function SearchView({ data, navigate }) {
  const { companies, users, tickets, credentials } = data;
  const [q, setQ] = React.useState('');
  const inputRef = React.useRef();
  React.useEffect(() => { inputRef.current?.focus(); }, []);

  const query = q.toLowerCase().trim();
  const results = query.length < 2 ? [] : [
    ...companies.filter(c => c.name.toLowerCase().includes(query) || c.rif.toLowerCase().includes(query) || c.contact.toLowerCase().includes(query))
      .map(c => ({ type:'company', id:c.id, title:c.name, sub:`${c.rif} · ${c.contact}`, icon:'building' })),
    ...users.filter(u => u.name.toLowerCase().includes(query) || u.anydesk.includes(query) || (u.equipment?.ip||'').includes(query) || (u.equipment?.hostname||'').toLowerCase().includes(query) || u.email.toLowerCase().includes(query))
      .map(u => ({ type:'user', id:u.id, title:u.name, sub:`${u.anydesk} · ${u.position} · ${u.equipment?.hostname||''}`, icon:'users' })),
    ...tickets.filter(t => t.title.toLowerCase().includes(query) || t.description.toLowerCase().includes(query))
      .map(t => ({ type:'ticket', id:t.id, title:t.title, sub:`Ticket · ${t.status}`, icon:'ticket' })),
    ...credentials.filter(cr => cr.service.toLowerCase().includes(query) || cr.username.toLowerCase().includes(query))
      .map(cr => ({ type:'cred', id:cr.id, title:cr.service, sub:`${cr.username} · ${cr.url||''}`, icon:'key' })),
  ];

  function handleClick(r) {
    if (r.type==='company') navigate('company-detail',{companyId:r.id});
    else if (r.type==='user') navigate('user-detail',{userId:r.id});
    else if (r.type==='ticket') navigate('tickets',{ticketId:r.id});
    else if (r.type==='cred') navigate('credentials');
  }

  const typeLabel = { company:'Empresa', user:'Usuario', ticket:'Ticket', cred:'Credencial' };
  const typeColor = { company:'blue', user:'purple', ticket:'orange', cred:'green' };

  return (
    <div style={{padding:'32px 36px',maxWidth:700}}>
      <h1 style={{margin:'0 0 20px',fontSize:22,fontWeight:800,color:'#0f172a'}}>Búsqueda global</h1>
      <div style={{position:'relative',marginBottom:24}}>
        <span style={{position:'absolute',left:14,top:'50%',transform:'translateY(-50%)',color:'#94a3b8'}}><Icon name="search" size={18}/></span>
        <input ref={inputRef} value={q} onChange={e=>setQ(e.target.value)} placeholder="Buscar empresa, usuario, AnyDesk, IP, ticket..."
          style={{width:'100%',paddingLeft:44,paddingRight:16,paddingTop:13,paddingBottom:13,border:'2px solid #e2e8f0',borderRadius:12,fontSize:15,fontFamily:'inherit',outline:'none',background:'#fff',boxSizing:'border-box',transition:'border-color 0.15s'}}
          onFocus={e=>e.target.style.borderColor='#2563eb'} onBlur={e=>e.target.style.borderColor='#e2e8f0'} />
      </div>
      {query.length > 0 && query.length < 2 && <div style={{fontSize:13,color:'#94a3b8',textAlign:'center'}}>Escribe al menos 2 caracteres...</div>}
      {results.length===0 && query.length>=2 && <EmptyState icon="search" title="Sin resultados" desc={`No se encontró nada para "${q}"`} />}
      {results.length>0 && (
        <Card style={{padding:0}}>
          <div style={{padding:'10px 16px',borderBottom:'1px solid #f1f5f9',fontSize:12,color:'#94a3b8',fontWeight:600}}>{results.length} resultado{results.length!==1?'s':''}</div>
          {results.map((r,i)=>(
            <div key={r.type+r.id} onClick={()=>handleClick(r)}
              style={{padding:'13px 16px',borderBottom:i<results.length-1?'1px solid #f8fafc':'none',cursor:'pointer',display:'flex',alignItems:'center',gap:12,transition:'background 0.1s'}}
              onMouseEnter={e=>e.currentTarget.style.background='#f8fafc'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
              <div style={{width:36,height:36,borderRadius:9,background:'#f1f5f9',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,color:'#64748b'}}>
                <Icon name={r.icon} size={16}/>
              </div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:13,fontWeight:600,color:'#0f172a'}}>{r.title}</div>
                <div style={{fontSize:11,color:'#94a3b8',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{r.sub}</div>
              </div>
              <Badge label={typeLabel[r.type]} color={typeColor[r.type]} />
            </div>
          ))}
        </Card>
      )}
      {query.length===0 && (
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12,marginTop:8}}>
          {[
            {label:'Empresas',count:companies.length,icon:'building',section:'companies'},
            {label:'Usuarios',count:users.length,icon:'users',section:'users'},
            {label:'Tickets abiertos',count:tickets.filter(t=>t.status!=='resolved').length,icon:'ticket',section:'tickets'},
            {label:'Credenciales',count:credentials.length,icon:'key',section:'credentials'},
          ].map(s=>(
            <Card key={s.section} style={{padding:'16px 18px',cursor:'pointer',transition:'box-shadow 0.15s'}} onClick={()=>navigate(s.section)}
              onMouseEnter={e=>e.currentTarget.style.boxShadow='0 4px 16px rgba(0,0,0,0.08)'}
              onMouseLeave={e=>e.currentTarget.style.boxShadow='0 1px 3px rgba(0,0,0,0.05)'}>
              <div style={{display:'flex',alignItems:'center',gap:10}}>
                <Icon name={s.icon} size={18} color="#2563eb"/>
                <div>
                  <div style={{fontSize:20,fontWeight:800,color:'#0f172a'}}>{s.count}</div>
                  <div style={{fontSize:12,color:'#64748b'}}>{s.label}</div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── Main App ────────────────────────────────────────────────────────────────
function MainApp({ user, onLogout }) {
  const [data, setData]       = React.useState(() => DB.loadData());
  const [view, setView]       = React.useState(() => localStorage.getItem('it_view') || 'dashboard');
  const [viewParams, setViewParams] = React.useState({});
  const [toast, setToastMsg]  = React.useState(null);
  const [sidebarOpen, setSidebar] = React.useState(() => window.innerWidth > 900);
  const [syncStatus, setSyncStatus] = React.useState('idle');

  React.useEffect(() => {
    const off = DB.onSaveStatus((status) => setSyncStatus(status));
    const onReload = (ev) => setData(ev.detail);
    window.addEventListener('iti:state-reloaded', onReload);
    const stopWS = window.useWS && window.useWS(m => {
      if (m.type === 'state_changed') {
        DB.fetchFromBackend().then(d => setData(d));
      }
    });
    return () => { off(); window.removeEventListener('iti:state-reloaded', onReload); stopWS && stopWS(); };
  }, []);

  const canWrite = user.rol === 'admin' || user.rol === 'operador';
  const setDataGuarded = canWrite ? setData : () => {
    setToastMsg({msg:'Solo lectura — no puedes editar', type:'error', key: Date.now()});
  };

  // Tweaks
  const [tweaks, setTweaks]   = React.useState(() => {
    try { return JSON.parse(localStorage.getItem('it_tweaks')||'null') || TWEAK_DEFAULTS; } catch{ return TWEAK_DEFAULTS; }
  });
  const [tweakOpen, setTweakOpen] = React.useState(false);

  React.useEffect(()=>{
    const handler = e => {
      if(e.data?.type==='__activate_edit_mode') setTweakOpen(true);
      if(e.data?.type==='__deactivate_edit_mode') setTweakOpen(false);
    };
    window.addEventListener('message',handler);
    window.parent.postMessage({type:'__edit_mode_available'},'*');
    return ()=>window.removeEventListener('message',handler);
  },[]);

  function navigate(section, params={}) {
    setView(section);
    setViewParams(params);
    localStorage.setItem('it_view', section);
  }

  function showToast(msg, type='success') {
    setToastMsg({msg, type, key: Date.now()});
  }

  function applyTweak(key, val) {
    const next = {...tweaks,[key]:val};
    setTweaks(next);
    localStorage.setItem('it_tweaks', JSON.stringify(next));
    window.parent.postMessage({type:'__edit_mode_set_keys', edits:{[key]:val}},'*');
  }

  const navItems = [
    { id:'dashboard',     label:'Dashboard',      labelEn:'Overview',      icon:'home' },
    { id:'exec',          label:'Ejecutivo',      labelEn:'Executive',     icon:'chart-bar' },
    { id:'companies',     label:'Empresas',       labelEn:'Companies',     icon:'building' },
    { id:'users',         label:'Usuarios',       labelEn:'Devices',       icon:'users' },
    { id:'tickets',       label:'Tickets',        labelEn:'Incidents',     icon:'ticket' },
    { id:'maintenances',  label:'Mantenimientos', labelEn:'Maintenance',   icon:'clock' },
    { id:'kb',            label:'Conocimiento',   labelEn:'Knowledge',     icon:'copy' },
    { id:'billing',       label:'Facturación',    labelEn:'Billing',       icon:'chart-bar' },
    { id:'credentials',   label:'Credenciales',   labelEn:'Credentials',   icon:'key' },
    { id:'tools',         label:'Herramientas',   labelEn:'Tools',         icon:'settings' },
    { id:'search',        label:'Buscar',         labelEn:'Search',        icon:'search' },
    { id:'system',        label:'Sistema',        labelEn:'Account',       icon:'key' },
  ];

  const openTickets = data.tickets.filter(t=>t.status!=='resolved').length;
  const accentColor = tweaks.accentColor || '#2563eb';

  return (
    <div style={{display:'flex',height:'100vh',background:tweaks.darkMode?'#0a0d14':'#f1f5f9',fontFamily:"'Plus Jakarta Sans',sans-serif",overflow:'hidden'}}>

      {/* Sidebar */}
      <div style={{width:sidebarOpen?240:64,flexShrink:0,background:tweaks.darkMode?'#060810':'#0d1117',display:'flex',flexDirection:'column',transition:'width 0.2s ease',overflow:'hidden',zIndex:10}}>
        {/* Logo */}
        <div style={{padding:'20px 16px 16px',display:'flex',alignItems:'center',gap:10,minHeight:64}}>
          <div style={{width:34,height:34,borderRadius:9,background:accentColor,display:'flex',alignItems:'center',justifyContent:'center',fontSize:14,fontWeight:900,color:'#fff',flexShrink:0}}>IT</div>
          {sidebarOpen && <div style={{overflow:'hidden'}}>
            <div style={{fontSize:13,fontWeight:800,color:'#f1f5f9',whiteSpace:'nowrap'}}>INFINITOS TI</div>
            <div style={{fontSize:10,color:'#475569',whiteSpace:'nowrap'}}>Gestión IT</div>
          </div>}
        </div>

        {/* Nav */}
        <nav style={{flex:1,padding:'8px 8px',display:'flex',flexDirection:'column',gap:2}}>
          {navItems.map(item=>{
            const active = view===item.id || (item.id==='companies'&&(view==='company-detail')) || (item.id==='users'&&view==='user-detail') || (item.id==='add-user'&&item.id==='users');
            return (
              <button key={item.id} onClick={()=>navigate(item.id)}
                style={{display:'flex',alignItems:'center',gap:10,padding:'9px 10px',borderRadius:9,border:'none',background:active?accentColor:'transparent',cursor:'pointer',fontFamily:'inherit',transition:'all 0.15s',width:'100%',textAlign:'left',position:'relative'}}
                onMouseEnter={e=>{if(!active)e.currentTarget.style.background='rgba(255,255,255,0.07)'}}
                onMouseLeave={e=>{if(!active)e.currentTarget.style.background='transparent'}}>
                <span style={{flexShrink:0,color:active?'#fff':'#94a3b8'}}>
                  <Icon name={item.icon} size={18} color={active?'#fff':'#94a3b8'}/>
                </span>
                {sidebarOpen && <>
                  <div style={{overflow:'hidden',flex:1}}>
                    <div style={{fontSize:13,fontWeight:600,color:active?'#fff':'#94a3b8',whiteSpace:'nowrap'}}>{item.label}</div>
                    <div style={{fontSize:10,color:active?'rgba(255,255,255,0.6)':'#475569',whiteSpace:'nowrap'}}>{item.labelEn}</div>
                  </div>
                  {item.id==='tickets'&&openTickets>0&&(
                    <span style={{background:active?'rgba(255,255,255,0.25)':'#ef4444',color:'#fff',borderRadius:999,fontSize:10,fontWeight:800,padding:'1px 7px',minWidth:18,textAlign:'center'}}>
                      {openTickets}
                    </span>
                  )}
                </>}
              </button>
            );
          })}
        </nav>

        {/* Bottom */}
        <div style={{padding:'12px 8px',borderTop:'1px solid rgba(255,255,255,0.06)'}}>
          <button onClick={()=>setSidebar(v=>!v)}
            style={{display:'flex',alignItems:'center',gap:10,padding:'9px 10px',borderRadius:9,border:'none',background:'transparent',cursor:'pointer',fontFamily:'inherit',width:'100%',color:'#475569',transition:'background 0.15s'}}
            onMouseEnter={e=>e.currentTarget.style.background='rgba(255,255,255,0.07)'}
            onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
            <Icon name={sidebarOpen?'chevron-left':'chevron-right'} size={16} color="#475569"/>
            {sidebarOpen && <span style={{fontSize:12,color:'#475569'}}>Colapsar</span>}
          </button>
        </div>
      </div>

      {/* Main */}
      <div style={{flex:1,overflow:'auto',display:'flex',flexDirection:'column'}}>
        {/* Top bar */}
        <div style={{background:tweaks.darkMode?'#0d1117':'#fff',borderBottom:`1px solid ${tweaks.darkMode?'#1e2330':'#e2e8f0'}`,padding:'0 24px',height:56,display:'flex',alignItems:'center',gap:12,flexShrink:0,position:'sticky',top:0,zIndex:5}}>
          <div style={{flex:1,display:'flex',alignItems:'center',gap:8}}>
            <div style={{fontSize:12,color:'#94a3b8'}}>
              {navItems.find(n=>n.id===view||((view==='company-detail'||view==='user-detail')&&n.id==='companies'))?.label || 'Sistema IT'}
            </div>
          </div>
          <button onClick={()=>navigate('search')} style={{display:'flex',alignItems:'center',gap:8,padding:'7px 14px',background:'#f1f5f9',borderRadius:8,border:'none',cursor:'pointer',fontSize:12,color:'#94a3b8',fontFamily:'inherit'}}
            onMouseEnter={e=>e.currentTarget.style.background='#e2e8f0'} onMouseLeave={e=>e.currentTarget.style.background='#f1f5f9'}>
            <Icon name="search" size={14}/> Buscar... <span style={{fontSize:10,background:'#e2e8f0',borderRadius:4,padding:'1px 5px',color:'#64748b'}}>⌘K</span>
          </button>
          <span title="Estado de sincronización" style={{fontSize:11,color:syncStatus==='error'?'#dc2626':syncStatus==='saving'?'#f59e0b':'#10b981',display:'flex',alignItems:'center',gap:5}}>
            <span style={{width:8,height:8,borderRadius:99,background:syncStatus==='error'?'#dc2626':syncStatus==='saving'?'#f59e0b':'#10b981'}}/>
            {syncStatus==='saving'?'sincronizando…':syncStatus==='error'?'error':'sincronizado'}
          </span>
          <NotificationBell user={user} />
          <div title={`${user.nombre} · ${user.rol}`} style={{display:'flex',alignItems:'center',gap:6,padding:'4px 10px 4px 4px',background:'#f1f5f9',borderRadius:999}}>
            <div style={{width:26,height:26,borderRadius:999,background:accentColor,display:'flex',alignItems:'center',justifyContent:'center',fontSize:11,fontWeight:800,color:'#fff'}}>{user.nombre.charAt(0).toUpperCase()}</div>
            <span style={{fontSize:12,fontWeight:600,color:'#0f172a'}}>{user.username}</span>
          </div>
          <button onClick={onLogout} title="Cerrar sesión" style={{padding:'7px 10px',background:'#fef2f2',color:'#dc2626',border:'none',borderRadius:8,fontSize:11,fontWeight:600,cursor:'pointer',fontFamily:'inherit'}}>Salir</button>
        </div>

        {/* Content */}
        <div style={{flex:1}}>
          {view==='dashboard'    && <Dashboard    data={data} navigate={navigate} toast={showToast} />}
          {view==='exec'         && <ExecutiveDashboard data={data} navigate={navigate} toast={showToast} />}
          {view==='companies'    && <Companies    data={data} setData={setDataGuarded} navigate={navigate} toast={showToast} />}
          {view==='company-detail' && <CompanyDetail companyId={viewParams.companyId} data={data} setData={setDataGuarded} navigate={navigate} toast={showToast} />}
          {view==='users'        && <Users        data={data} setData={setDataGuarded} navigate={navigate} toast={showToast} initialUserId={viewParams.userId} />}
          {view==='user-detail'  && <UserDetail  userId={viewParams.userId} data={data} setData={setDataGuarded} navigate={navigate} toast={showToast} onBack={()=>navigate('users')} onEdit={()=>{}} />}
          {view==='add-user'     && <Users        data={data} setData={setDataGuarded} navigate={navigate} toast={showToast} />}
          {view==='tickets'      && <Tickets      data={data} setData={setDataGuarded} navigate={navigate} toast={showToast} initialTicketId={viewParams.ticketId} />}
          {view==='kb'           && <KnowledgeBase data={data} setData={setDataGuarded} navigate={navigate} toast={showToast} />}
          {view==='billing'      && <Billing       data={data} setData={setDataGuarded} navigate={navigate} toast={showToast} />}
          {view==='credentials'  && <Credentials   data={data} setData={setDataGuarded} navigate={navigate} toast={showToast} />}
          {view==='maintenances' && <Maintenances  data={data} setData={setDataGuarded} navigate={navigate} toast={showToast} initialCompanyId={viewParams.companyId} />}
          {view==='tools'        && <Tools         data={data} setData={setDataGuarded} navigate={navigate} toast={showToast} />}
          {view==='search'       && <SearchView   data={data} navigate={navigate} />}
          {view==='system'       && <SystemView   user={user} navigate={navigate} toast={showToast} />}
        </div>
      </div>

      {/* Toast */}
      {toast && <Toast key={toast.key} message={toast.msg} type={toast.type} onDone={()=>setToastMsg(null)} />}

      {/* Tweaks Panel */}
      {tweakOpen && (
        <div style={{position:'fixed',bottom:24,right:24,zIndex:900,background:'#fff',borderRadius:14,boxShadow:'0 8px 40px rgba(0,0,0,0.18)',border:'1px solid #e2e8f0',padding:'18px 20px',width:260}}>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:14}}>
            <span style={{fontWeight:700,fontSize:14,color:'#0f172a'}}>Tweaks</span>
            <button onClick={()=>setTweakOpen(false)} style={{background:'none',border:'none',cursor:'pointer',color:'#94a3b8',display:'flex'}}><Icon name="x" size={16}/></button>
          </div>
          <div style={{display:'flex',flexDirection:'column',gap:14}}>
            <div>
              <label style={{fontSize:11,fontWeight:700,color:'#64748b',textTransform:'uppercase',letterSpacing:'0.05em',display:'block',marginBottom:6}}>Color de acento</label>
              <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
                {['#2563eb','#7c3aed','#059669','#dc2626','#ea580c','#0891b2'].map(col=>(
                  <button key={col} onClick={()=>applyTweak('accentColor',col)} style={{width:26,height:26,borderRadius:999,background:col,border:tweaks.accentColor===col?'3px solid #0f172a':'2px solid transparent',cursor:'pointer',transition:'all 0.15s'}} />
                ))}
              </div>
            </div>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
              <label style={{fontSize:12,fontWeight:600,color:'#374151'}}>Modo oscuro</label>
              <button onClick={()=>applyTweak('darkMode',!tweaks.darkMode)}
                style={{width:42,height:24,borderRadius:999,background:tweaks.darkMode?accentColor:'#e2e8f0',border:'none',cursor:'pointer',position:'relative',transition:'background 0.2s'}}>
                <span style={{position:'absolute',top:3,left:tweaks.darkMode?20:3,width:18,height:18,borderRadius:999,background:'#fff',transition:'left 0.2s',boxShadow:'0 1px 4px rgba(0,0,0,0.2)'}} />
              </button>
            </div>
            <div>
              <label style={{fontSize:11,fontWeight:700,color:'#64748b',textTransform:'uppercase',letterSpacing:'0.05em',display:'block',marginBottom:6}}>Acciones</label>
              <Btn size="sm" variant="secondary" onClick={()=>{if(confirm('¿Resetear todos los datos de demostración?')){const d=DB.resetData();setData(d);showToast('Datos reseteados');}}} >Reset datos demo</Btn>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{"accentColor":"#2563eb","darkMode":false}/*EDITMODE-END*/;

function App() {
  const [user, setUser] = React.useState(undefined);
  const [dataReady, setDataReady] = React.useState(false);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    window.API.me()
      .then(r => setUser(r.user))
      .catch(() => setUser(null));
  }, []);

  React.useEffect(() => {
    if (!user) return;
    setDataReady(false);
    DB.fetchFromBackend()
      .then(() => setDataReady(true))
      .catch(e => setError(e.message || 'error cargando datos'));
  }, [user]);

  if (user === undefined) return <SplashScreen msg="Cargando..." />;
  if (!user) return <LoginScreen onLogin={u => setUser(u)} />;

  async function logout() {
    try { await window.API.logout(); } catch{}
    setUser(null);
    setDataReady(false);
  }

  if (user.rol === 'cliente') return <ClientPortal user={user} onLogout={logout} />;

  if (error) return <SplashScreen msg={`Error: ${error}`} />;
  if (!dataReady) return <SplashScreen msg="Sincronizando con servidor..." />;

  return <MainApp user={user} onLogout={logout} />;
}

function SplashScreen({ msg }) {
  return (
    <div style={{height:'100vh',display:'flex',alignItems:'center',justifyContent:'center',background:'#0a0d14',color:'#94a3b8',fontFamily:"'Plus Jakarta Sans',sans-serif"}}>
      <div style={{textAlign:'center'}}>
        <div style={{width:48,height:48,borderRadius:12,background:'#2563eb',display:'inline-flex',alignItems:'center',justifyContent:'center',fontSize:16,fontWeight:900,color:'#fff',marginBottom:14}}>IT</div>
        <div style={{fontSize:13}}>{msg}</div>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);