// Panel administrativo — shell, login y navegación
const { useState: useStateA, useEffect: useEffectA, useReducer } = React;
const NAV_KEY = 'guaca_admin_nav';

function Login({ onIn }) {
  const [email, setEmail] = useStateA('');
  const [pw, setPw] = useStateA('');
  const [show, setShow] = useStateA(false);
  const [err, setErr] = useStateA('');
  const [busy, setBusy] = useStateA(false);
  async function submit(e) {
    e.preventDefault(); setErr('');
    if (!email.trim() || !pw) { setErr('Ingresá tu correo y contraseña.'); return; }
    setBusy(true); await new Promise(r => setTimeout(r, 500));
    const res = S.login(email, pw); setBusy(false);
    if (!res.ok) { setErr(res.msg); return; }
    onIn(res.user);
  }
  return (
    <div className="ga-login" data-screen-label="Login administrativo">
      <div className="ga-login-art">
        <div><span className="ga-login-logo"><img src="/assets/guaca-repuestos-logo.png" alt="Guaca Repuestos" /></span></div>
        <div className="ga-login-copy">
          <h1>Panel de gestión de códigos</h1>
          <p>Revisá, asigná y da seguimiento a cada solicitud de cliente en un solo lugar.</p>
        </div>
        <div className="ga-mascot-wrap"><img className="ga-mascot" src="/assets/mascota-guaca-asoma-v2.jpg" alt="Mascota de Guaca Repuestos" /></div>
        <small>Acceso exclusivo para colaboradores autorizados de Guaca Repuestos. La actividad queda registrada.</small>
      </div>
      <div className="ga-login-form">
        <form className="ga-login-box" onSubmit={submit} noValidate>
          <h2>Iniciar sesión</h2>
          <p>Usá tu cuenta corporativa.</p>
          <div className="ga-fg"><label className="ga-fl" htmlFor="em">Correo corporativo</label><input id="em" className="input" type="email" autoComplete="username" value={email} onChange={e => setEmail(e.target.value)} placeholder="nombre@guaca.cr" /></div>
          <div className="ga-fg"><label className="ga-fl" htmlFor="pw">Contraseña</label>
            <div className="ga-pw"><input id="pw" className="input" type={show ? 'text' : 'password'} autoComplete="current-password" value={pw} onChange={e => setPw(e.target.value)} style={{ paddingRight: 52 }} />
              <button type="button" onClick={() => setShow(!show)} aria-label={show ? 'Ocultar contraseña' : 'Mostrar contraseña'}><Icon name="eye" size={18} /></button></div></div>
          {err && <div className="gf-alert err" role="alert" style={{ marginBottom: 16 }}><Icon name="alert" size={18} /><span>{err}</span></div>}
          <button className="btn btn-primary btn-lg" style={{ width: '100%' }} disabled={busy}>{busy ? 'Verificando…' : <>Ingresar <Icon name="arrowRight" size={18} /></>}</button>
          <p style={{ fontSize: 12.5, color: 'var(--gray-500)', marginTop: 14, display: 'flex', gap: 6, alignItems: 'center' }}><Icon name="shield" size={14} /> Sesión cifrada · cierre automático tras 30 min de inactividad</p>
        </form>
      </div>
    </div>
  );
}

function Notifs({ reqs, openReq, user }) {
  const [open, setOpen] = useStateA(false);
  const ref = React.useRef();
  useEffectA(() => { const c = e => ref.current && !ref.current.contains(e.target) && setOpen(false); document.addEventListener('mousedown', c); return () => document.removeEventListener('mousedown', c); }, []);
  const R = S.db.settings.rules;
  const items = [
    ...(R.notifyNew ? reqs.filter(r => r.status === 'recibida' && !r.assignee).slice(0, 5).map(r => ({ id: r.id, t: `Nueva solicitud: ${r.negocio.name}`, s: `${r.id} · ${GFmt.rel(r.createdAt)}` })) : []),
    ...(R.notifyAssign ? reqs.filter(r => r.assignee === user.id && r.status === 'recibida').slice(0, 3).map(r => ({ id: r.id, t: `Se te asignó ${r.id}`, s: r.negocio.name })) : []),
    ...(R.pendingAlerts ? S.stale(reqs).slice(0, 4).map(r => ({ id: r.id, t: `Sin movimiento: ${r.negocio.name}`, s: `${r.id} · última actualización ${GFmt.rel(r.updatedAt)}`, warn: true })) : []),
  ];
  return (
    <div className="ga-menu-w" ref={ref}>
      <button className="ga-icobtn" onClick={() => setOpen(!open)} aria-label="Notificaciones"><Icon name="bolt" size={20} />{items.length > 0 && <span className="dot" />}</button>
      {open && <div className="ga-menu ga-notif">
        <div className="ga-notif-h">Avisos <span style={{ color: 'var(--gray-500)', fontWeight: 500 }}>{items.length}</span></div>
        {items.length === 0 ? <div className="ga-empty" style={{ padding: 24 }}>Sin avisos pendientes.</div> :
          items.map((n, i) => <div key={i} className="ga-notif-i" onClick={() => { openReq(n.id); setOpen(false); }}><span style={{ color: n.warn ? 'var(--red-ink)' : 'var(--ink)', fontWeight: 500 }}>{n.t}</span><small>{n.s}</small></div>)}
      </div>}
    </div>
  );
}

function AdminApp() {
  const [user, setUser] = useStateA(() => S.current());
  const [, force] = useReducer(x => x + 1, 0);
  const saved = (() => { try { return JSON.parse(S.storage().get(NAV_KEY)) || {}; } catch (e) { return {}; } })();
  const [view, setView] = useStateA(saved.view || 'dashboard');
  const [filters, setFilters] = useStateA(saved.filters || {});
  const [openId, setOpenId] = useStateA(saved.openId || null);
  const [side, setSide] = useStateA(false);
  const [toastMsg, setToastMsg] = useStateA('');

  useEffectA(() => S.subscribe(force), []);
  useEffectA(() => { S.storage().set(NAV_KEY, JSON.stringify({ view, filters, openId })); }, [view, filters, openId]);
  useEffectA(() => { if (!user) return; const t = setInterval(() => { if (!S.current()) setUser(null); }, 30000); return () => clearInterval(t); }, [user]);
  useEffectA(() => { if (!toastMsg) return; const t = setTimeout(() => setToastMsg(''), 2600); return () => clearTimeout(t); }, [toastMsg]);

  if (!user) return <Login onIn={u => { setUser(u); }} />;

  const reqs = S.list();
  const showDemo = S.db.settings.showDemo;
  const demoCount = S.db.requests.filter(r => r.demo).length;
  const realCount = S.db.requests.filter(r => !r.demo).length;
  const newCount = reqs.filter(r => r.status === 'recibida').length;
  const staleCount = S.db.settings.rules.pendingAlerts ? S.stale(reqs).length : 0;
  const go = (v, f) => { setView(v); if (f) setFilters(f); setSide(false); window.scrollTo(0, 0); };
  const toast = m => setToastMsg(m);

  const solCount    = reqs.filter(r => (r.tipo !== 'cambio')).length;
  const cambioCount = reqs.filter(r => r.tipo === 'cambio').length;

  const NAV = [
    { k: 'dashboard',   ic: 'grid',  l: 'Resumen' },
    { k: 'solicitudes', ic: 'list',  l: 'Solicitudes', cnt: newCount },
    { k: 'reportes',    ic: 'chart', l: 'Reportes' },
  ];
  const NAV2 = [
    { k: 'automatizaciones', ic: 'bolt', l: 'Automatizaciones' },
    { k: 'usuarios', ic: 'users', l: 'Usuarios y roles' },
    ...(S.can(user, 'audit') ? [{ k: 'auditoria', ic: 'shield', l: 'Auditoría' }] : []),
  ];
  const TITLES = { dashboard: 'Resumen', solicitudes: 'Solicitudes', reportes: 'Reportes y análisis', automatizaciones: 'Automatizaciones', usuarios: 'Usuarios y roles', auditoria: 'Registro de auditoría' };
  const v = (view === 'auditoria' && !S.can(user, 'audit')) ? 'dashboard' : view;

  return (
    <div className="ga-shell">
      {side && <div className="ga-scrim" onClick={() => setSide(false)} />}
      <aside className={'ga-side' + (side ? ' open' : '')}>
        <div className="ga-side-logo"><img src="/assets/guaca-repuestos-logo.png" alt="Guaca Repuestos" /><span>Panel<br />interno</span></div>
        <nav className="ga-nav">
          {NAV.map(n => (
            <React.Fragment key={n.k}>
              <button className={v === n.k ? 'on' : ''} onClick={() => go(n.k, n.k === 'solicitudes' ? filters : null)}>
                <Icon name={n.ic} size={19} />{n.l}{n.cnt > 0 && <span className="cnt">{n.cnt}</span>}
              </button>
              {n.k === 'solicitudes' && (
                <div className="ga-nav-sub">
                  <button
                    className={(v === 'solicitudes' && filters.tipo === 'solicitud') ? 'on' : ''}
                    onClick={() => go('solicitudes', { tipo: 'solicitud' })}>
                    <Icon name="file" size={16} />Solicitudes
                    <span className="cnt-sub">{solCount}</span>
                  </button>
                  <button
                    className={(v === 'solicitudes' && filters.tipo === 'cambio') ? 'on' : ''}
                    onClick={() => go('solicitudes', { tipo: 'cambio' })}>
                    <Icon name="refresh" size={16} />Cambios
                    <span className="cnt-sub">{cambioCount}</span>
                  </button>
                </div>
              )}
            </React.Fragment>
          ))}
          <div className="ga-nav-k">Configuración</div>
          {NAV2.map(n => <button key={n.k} className={v === n.k ? 'on' : ''} onClick={() => go(n.k)}><Icon name={n.ic} size={19} />{n.l}</button>)}
          <div className="ga-nav-k">Enlaces</div>
          <button onClick={() => window.open('/solicitud', '_blank')}><Icon name="file" size={19} />Formulario público</button>
        </nav>
        <div className="ga-me">
          <Avatar uid={user.id} />
          <div className="ga-me-t"><b>{user.name}</b><span>{S.ROLES[user.role].label}</span></div>
          <button className="ga-icobtn" onClick={() => { S.logout(); setUser(null); setOpenId(null); }} aria-label="Cerrar sesión" title="Cerrar sesión"><Icon name="logout" size={19} /></button>
        </div>
      </aside>

      <div className="ga-main">
        <header className="ga-top">
          <button className="ga-icobtn ga-burger" onClick={() => setSide(true)} aria-label="Menú"><Icon name="menu" size={22} /></button>
          <h1>{TITLES[v]}</h1>
          <div className="ga-top-r">
            {staleCount > 0 && <button className="btn btn-danger btn-sm ga-hide-sm" onClick={() => go('solicitudes', { stale: true })}><Icon name="clock" size={16} /> {staleCount} requieren atención</button>}
            <Notifs reqs={reqs} openReq={setOpenId} user={user} />
          </div>
        </header>
        <main className="ga-content" data-screen-label={TITLES[v]}>
          {v === 'dashboard' && <DashboardView reqs={reqs} user={user} go={go} openReq={setOpenId} />}
          {v === 'solicitudes' && <RequestsView reqs={reqs} user={user} filters={filters} setFilters={setFilters} openReq={setOpenId} selected={openId} toast={toast} />}
          {v === 'reportes' && <ReportsView reqs={reqs} user={user} toast={toast} />}
          {v === 'automatizaciones' && <AutomationsView user={user} toast={toast} />}
          {v === 'usuarios' && <UsersView user={user} toast={toast} />}
          {v === 'auditoria' && <AuditView user={user} />}
        </main>
      </div>
      {openId && S.get(openId) && <RequestDrawer id={openId} user={user} onClose={() => setOpenId(null)} toast={toast} />}
      {toastMsg && <div className="ga-toast" role="status"><Icon name="check" size={18} />{toastMsg}</div>}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<AdminApp />);