/* Main app — assembles the central */
const { useState: useS, useEffect: useE, useMemo: useM, useRef: useR, Fragment: F2 } = React;

function PageHead({ eyebrow, title, sub, right }) {
  return (
    <div className="page-head">
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="page-eyebrow">/ {eyebrow}</div>
        <h1 className="page-title">{title}<span style={{ color: 'var(--green)' }}>.</span></h1>
        {sub && <p className="page-sub">{sub}</p>}
      </div>
      {right}
    </div>
  );
}

// --- Stats block ------------------------------------------
function StatsBlock() {
  return (
    <div className="stat-row rise" style={{ animationDelay: '80ms', marginBottom: 8 }}>
      <Stat label="CONVERSAS NA FILA" value="142" trend={{ dir: 'down', value: '12%' }}
            spark={[18,22,20,28,32,29,24,23,20,18,16,14]} />
      <Stat label="ATENDENTES ONLINE" value="38" accent
            trend={{ dir: 'up', value: '+3' }}
            spark={[30,32,33,31,34,35,36,37,38,38,38,38]} />
      <Stat label="SLA MÉDIO" value="2:14" trend={{ dir: 'up', value: '−8s' }}
            spark={[180,178,170,165,160,158,150,148,142,140,138,134]} />
      <Stat label="AÇÕES OPERACIONAIS HOJE" value="847"
            trend={{ dir: 'up', value: '+24%' }}
            spark={[200,210,260,300,340,420,480,560,610,690,760,847]} />
    </div>
  );
}

// --- Home (MVP simplificado) ------------------------------
function HomePage({ greeting, onOpenTool }) {
  const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/i.test(navigator.platform || navigator.userAgent || '');
  const modKey = isMac ? '⌘' : 'Ctrl';
  const totalTools = (window.TOOLS || []).filter(t => t.role !== 'lideranca' && !t.devOnly).length;

  return (
    <div className="page home-hero rise">
      <div className="home-hero-inner">
        <div className="home-hero-eyebrow mono">/ {greeting.toUpperCase()}</div>
        <h1 className="home-hero-title">
          Resolva tudo<br />
          aqui<span style={{ color: 'var(--green)' }}>.</span>
        </h1>
        <p className="home-hero-sub">
          A central operacional do colaborador iGreen no Suporte ao Cliente via chat. Resolva aqui as principais demandas do dia a dia, abra tickets com o Time de Engenharia de IA e Tecnologia e acompanhe nossas entregas. Nosso objetivo é apoiar cada colaborador para que possamos atuar com mais eficiência e, juntos, fazer mais pelo cliente.
        </p>

        <InlineSearch
          onOpenTool={onOpenTool}
          className="inline-search--hero"
          autoFocus
          placeholder="Buscar ferramenta, colaborador, conversa…" />

        <div className="home-hero-tip">
          <span className="home-hero-tip-dot" />
          <span>
            Dica · pressione <span className="kbd">{modKey}</span> <span className="kbd">K</span> a qualquer momento para abrir a busca.
          </span>
        </div>

        <div className="home-hero-meta">
          <span><b>{totalTools}</b><i>FUNCIONALIDADES</i></span>
          <span className="sep" />
          <span><b>24/7</b><i>SUPORTE</i></span>
        </div>
      </div>
    </div>
  );
}

// --- Auditoria view (dados reais do SQLite, super admin only) ------
const AUDIT_LABELS = {
  'admin.users.create':              'Cadastrou colaborador',
  'admin.users.reset_password':      'Resetou senha',
  'admin.users.set_role':            'Alterou cargo',
  'admin.users.set_level':           'Alterou nível',
  'admin.users.offboard':            'Desligou colaborador',
  'admin.families.add_member':       'Adicionou à família',
  'admin.families.remove_member':    'Removeu da família',
  'admin.family_catalog.create':     'Criou família',
  'admin.family_catalog.update':     'Editou família',
  'admin.family_catalog.deactivate': 'Desativou família',
  'admin.team_families.add':         'Vinculou time à família',
  'admin.team_families.remove':      'Desvinculou time da família',
  'support.tickets.create':          'Abriu ticket',
  'support.tickets.comment':         'Comentou no ticket',
  'support.tickets.update':          'Atualizou ticket',
};
function auditLabel(action) {
  return AUDIT_LABELS[action] || action;
}

function AuditoriaView() {
  const [items, setItems] = useS([]);
  const [error, setError] = useS(null);
  const [loading, setLoading] = useS(true);
  const [actionFilter, setActionFilter] = useS('');
  const [actorFilter, setActorFilter] = useS('');

  async function load() {
    setLoading(true); setError(null);
    try {
      const r = await window.CCApi.admin.listAudit({ limit: 500, action: actionFilter || null, actorEmail: actorFilter || null });
      setItems(r.items ?? []);
    } catch (e) {
      setError(e.detail?.message || e.detail?.error || e.message);
    } finally { setLoading(false); }
  }
  useE(() => { load(); }, []);

  return (
    <div className="page">
      <PageHead eyebrow="COMPLIANCE · AUDIT.LOG" title="Auditoria"
        sub="Eventos sensíveis registrados pelo sistema. Visível só para desenvolvedores (super admin)."
        right={<button onClick={load} disabled={loading} style={{
          padding: '7px 11px', borderRadius: 7,
          background: 'transparent', border: 'none',
          color: 'rgba(255,255,255,0.55)', fontSize: 11.5, fontFamily: 'inherit', cursor: 'pointer',
        }}>{loading ? '…' : 'Recarregar'}</button>} />

      <div className="card" style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
        <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.5)' }}>FILTROS</div>
        <input value={actionFilter} onChange={e => setActionFilter(e.target.value)} onKeyDown={e => e.key === 'Enter' && load()}
               placeholder="ação (ex: admin.users.create)"
               style={{
                 flex: 1, minWidth: 220, padding: '8px 10px',
                 background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.10)',
                 borderRadius: 6, color: 'var(--text)', fontFamily: '"Geist Mono", monospace', fontSize: 12,
               }} />
        <input value={actorFilter} onChange={e => setActorFilter(e.target.value)} onKeyDown={e => e.key === 'Enter' && load()}
               placeholder="actor email"
               style={{
                 flex: 1, minWidth: 200, padding: '8px 10px',
                 background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.10)',
                 borderRadius: 6, color: 'var(--text)', fontFamily: '"Geist Mono", monospace', fontSize: 12,
               }} />
        <button onClick={load} style={{
          padding: '8px 14px', borderRadius: 6,
          background: 'linear-gradient(180deg, rgba(34,197,94,0.30), rgba(22,163,74,0.20))',
          border: '1px solid rgba(34,197,94,0.42)', color: '#dcfce7',
          fontSize: 12, fontFamily: 'inherit', cursor: 'pointer',
        }}>Filtrar</button>
      </div>

      {error && <div className="chip is-warn">{error}</div>}

      <div className="card" style={{ padding: 0, fontFamily: 'Geist Mono, monospace', fontSize: 11.5, overflow: 'hidden' }}>
        <div style={{ padding: '10px 16px', borderBottom: '1px solid rgba(255,255,255,0.06)',
          display: 'flex', gap: 10, alignItems: 'center', background: 'rgba(10,14,39,0.5)' }}>
          <span style={{ color: 'var(--green)' }}>●</span>
          <span style={{ color: 'rgba(255,255,255,0.5)', letterSpacing: '0.22em' }}>/ AUDIT.LOG</span>
          <span style={{ flex: 1 }} />
          <span style={{ color: 'rgba(255,255,255,0.4)', letterSpacing: '0.22em' }}>{items.length} EVENTOS</span>
        </div>
        {loading ? (
          <div style={{ padding: 22, color: 'rgba(255,255,255,0.5)' }}>Carregando…</div>
        ) : items.length === 0 ? (
          <div style={{ padding: 22, color: 'rgba(255,255,255,0.5)' }}>Nenhum evento encontrado com os filtros atuais.</div>
        ) : items.map((e, k) => (
          <div key={e.id} style={{
            padding: '9px 16px', display: 'grid',
            gridTemplateColumns: '140px 180px 160px minmax(0, 1fr) 80px', gap: 12, alignItems: 'center',
            borderTop: k ? '1px solid rgba(255,255,255,0.04)' : 'none',
          }}>
            <span style={{ color: 'rgba(255,255,255,0.45)' }}>{e.ts}</span>
            <span style={{
              color: e.status === 'error' ? '#ef4444'
                   : (e.action || '').includes('offboard') ? '#f59e0b'
                   : (e.action || '').includes('add_member') ? '#22c55e'
                   : (e.action || '').includes('remove') ? '#fbbf24'
                   : '#3b82f6',
              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
            }} title={e.action}>{auditLabel(e.action)}</span>
            <span style={{ color: 'rgba(255,255,255,0.65)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={e.actor_email}>
              {e.actor_email || '—'}
            </span>
            <span style={{ color: 'rgba(255,255,255,0.55)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
                  title={`target=${e.target || '—'}${e.motivo ? `\nmotivo: ${e.motivo}` : ''}`}>
              {e.target || '—'}
              {e.motivo && <span style={{ color: 'var(--green)', marginLeft: 8 }}>· "{e.motivo}"</span>}
            </span>
            <span className="chip" style={{
              justifySelf: 'end',
              color: e.status === 'error' ? '#ef4444' : 'var(--green)',
              borderColor: e.status === 'error' ? 'rgba(239,68,68,0.32)' : 'rgba(34,197,94,0.32)',
            }}>{(e.status || '').toUpperCase()}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// --- Tool router ------------------------------------------
function ToolPage({ toolId }) {
  const tool = window.TOOLS.find(t => t.id === toolId);
  if (!tool) return <div className="page"><PageHead eyebrow="ERRO" title="Ferramenta não encontrada" /></div>;
  if (tool.devOnly && !(window.__identity && window.__identity.isSuperAdmin)) {
    return <div className="page"><PageHead eyebrow="ERRO" title="Ferramenta não encontrada" /></div>;
  }
  // Real implementations registered in pages-impl.jsx take precedence
  // over the placeholders in pages.jsx. This avoids any script-order race.
  const Page = (window.PAGE_OVERRIDES && window.PAGE_OVERRIDES[tool.id]) || window.PAGES[tool.id];
  if (Page) return <Page tool={tool} />;
  return (
    <div className="page">
      <PageHead eyebrow={tool.tag} title={tool.title} sub={tool.desc} />
      <div className="card card-topline" style={{ padding: 22 }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--green)', letterSpacing: '0.32em' }}>/ EM CONSTRUÇÃO</div>
        <p style={{ marginTop: 10, fontSize: 13.5, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55 }}>
          Esta ferramenta abrirá um fluxo dedicado. O comportamento detalhado pode ser definido junto com o time de operações.
        </p>
      </div>
    </div>
  );
}

// --- Command palette (centered modal, Ctrl+K) -------------
function CommandPalette({ onClose, onOpen }) {
  const [q, setQ] = useS('');
  const [idx, setIdx] = useS(0);
  const inputRef = useR(null);
  useE(() => { inputRef.current?.focus(); }, []);
  const filtered = useM(() => filterTools(q), [q]);
  useE(() => { setIdx(0); }, [q]);
  const onKey = (e) => {
    if (e.key === 'ArrowDown') { e.preventDefault(); setIdx(i => Math.min(filtered.length - 1, i + 1)); }
    if (e.key === 'ArrowUp')   { e.preventDefault(); setIdx(i => Math.max(0, i - 1)); }
    if (e.key === 'Enter')     { e.preventDefault(); filtered[idx] && onOpen(filtered[idx].id); }
  };
  return (
    <div className="cmdk-backdrop" onClick={onClose}>
      <div className="cmdk" onClick={e => e.stopPropagation()}>
        <div className="cmdk-input-row">
          <Icon name="terminal" size={14} />
          <input ref={inputRef} value={q} onChange={e => setQ(e.target.value)} onKeyDown={onKey}
                 className="cmdk-input"
                 placeholder="Buscar ferramenta, colaborador, conversa…" />
          <span className="kbd">ESC</span>
        </div>
        <div className="cmdk-results-wrap">
          <CommandResults filtered={filtered} idx={idx} setIdx={setIdx} q={q} onOpen={onOpen} />
        </div>
      </div>
    </div>
  );
}

// === Tweaks ===============================================
function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Layout">
        <TweakRadio label="Densidade" value={t.density} options={[
          { value: 'comfy', label: 'Confortável' },
          { value: 'dense', label: 'Densa' },
        ]} onChange={v => setTweak('density', v)} />
      </TweakSection>
      <TweakSection label="Visual">
        <TweakToggle label="Camadas decorativas" value={t.decor} onChange={v => setTweak('decor', v)} />
        <TweakToggle label="Mostrar KPIs no topo" value={t.showStats} onChange={v => setTweak('showStats', v)} />
      </TweakSection>
      <TweakSection label="Saudação">
        <TweakText label="Texto de abertura" value={t.greeting} onChange={v => setTweak('greeting', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

// === Locked / Forbidden screens ============================
function LockedPage({ title, sub, reason }) {
  return (
    <div className="page">
      <PageHead eyebrow="ACESSO BLOQUEADO" title={title} sub={sub} />
      <div className="card card-topline" style={{ padding: 32, textAlign: 'center' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          width: 64, height: 64, borderRadius: '50%',
          background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.10)',
          margin: '6px auto 14px', color: 'rgba(255,255,255,0.75)' }}>
          <Icon name="lock" size={28} />
        </div>
        <div className="mono" style={{ fontSize: 10, color: 'var(--green)', letterSpacing: '0.32em' }}>
          / EM DESENVOLVIMENTO
        </div>
        <p style={{ marginTop: 8, fontSize: 13.5, color: 'rgba(255,255,255,0.65)', lineHeight: 1.55 }}>
          {reason}
        </p>
      </div>
    </div>
  );
}

// === Root =================================================
function AppRoot() {
  const auth = window.useIdentity();

  if (auth.loading) {
    return (
      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div className="mono" style={{ color: 'rgba(255,255,255,0.5)', letterSpacing: '0.22em', fontSize: 11 }}>/ CARREGANDO SESSÃO…</div>
      </div>
    );
  }
  if (!auth.identity) return <window.LoginScreen onLogged={auth.reload} />;

  if (auth.identity.ticketRole === 'agent') {
    return (
      <main style={{
        minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexDirection: 'column', gap: 16, padding: 32, textAlign: 'center',
      }}>
        <div style={{ fontSize: 40 }}>🔒</div>
        <h2 style={{ margin: 0, fontSize: 20, fontWeight: 500 }}>Acesso restrito</h2>
        <p style={{ margin: 0, fontSize: 13.5, color: 'rgba(255,255,255,0.55)', maxWidth: 360, lineHeight: 1.6 }}>
          Este painel é exclusivo para gestores e administradores. Se você precisa de acesso, fale com seu supervisor.
        </p>
        <button onClick={auth.signOut} style={{
          marginTop: 8, padding: '8px 20px', borderRadius: 999, border: 'none', cursor: 'pointer',
          background: 'rgba(255,255,255,0.06)', color: 'rgba(255,255,255,0.7)', fontSize: 12,
        }}>Sair</button>
      </main>
    );
  }

  return <Authed identity={auth.identity} onSignOut={auth.signOut} />;
}

function Authed({ identity, onSignOut }) {
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "density": "comfy",
    "decor": true,
    "showStats": true,
    "greeting": "Boa tarde, Marina"
  }/*EDITMODE-END*/);

  useE(() => {
    document.body.classList.toggle('density-dense', tweaks.density === 'dense');
    document.body.classList.toggle('bg-min', !tweaks.decor);
  }, [tweaks.density, tweaks.decor]);

  // Expose identity globally for child pages
  window.__identity = identity;

  const isAdmin = identity.ticketRole === 'administrator';
  const [active, setActive] = useS('home');
  const [headerForced, setHeaderForced] = useS(false);
  const [cmd, setCmd] = useS(false);
  // Bump pageNonce to force the active page to remount (re-rodando useEffects de fetch).
  // Atalho pra contornar "failed to fetch" sem precisar trocar de menu e voltar.
  const [pageNonce, setPageNonce] = useS(0);
  const refreshPage = () => setPageNonce(n => n + 1);

  useE(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); setCmd(c => !c); }
      if (e.key === 'Escape') setCmd(false);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const openTool = (id) => { setHeaderForced(false); setActive(`tool:${id}`); };

  const breadcrumb = useM(() => {
    if (active === 'home') return 'SUPORTE · INÍCIO';
    if (active === 'auditoria') return 'COMPLIANCE · AUDITORIA';
    if (active === 'reports') return 'REPORTS · ACOMPANHAMENTO';
    if (active.startsWith('tool:')) {
      const t = window.TOOLS.find(t => t.id === active.slice(5));
      if (!t) return '';
      const r = window.ROLES.find(r => r.id === t.role);
      const s = window.SECTIONS[t.role].find(s => s.id === t.section);
      return [r?.label, s?.label, t.title].filter(Boolean).join(' · ').toUpperCase();
    }
    return '';
  }, [active]);

  const greeting = computeGreeting(identity, tweaks.greeting);
  const userMeta = {
    name: identity.displayName || identity.email || 'Colaborador',
    initials: computeInitials(identity),
    role: composeRoleLabel(identity),
    avatarUrl: identity.avatarUrl || null,
  };

  // Tool access guard
  function renderToolArea() {
    if (!active.startsWith('tool:')) return null;
    const id = active.slice(5);
    const tool = window.TOOLS.find(t => t.id === id);
    if (!tool) return <ToolPage toolId={id} />;
    if (tool.role === 'lideranca') {
      return <LockedPage
        title={tool.title}
        sub={tool.desc}
        reason="A aba Liderança está em desenvolvimento. Acesso temporariamente bloqueado para todos os perfis." />;
    }
    if (tool.role === 'gestor' && !isAdmin) {
      return <LockedPage
        title={tool.title}
        sub={tool.desc}
        reason="Esta ferramenta requer perfil de Administrador. Solicite ao gestor responsável." />;
    }
    return <ToolPage toolId={id} />;
  }

  return (
    <div style={{ minHeight: '100vh', position: 'relative', overflow: 'hidden' }}>
      <div className="bg-layers" aria-hidden="true">
        <div className="bg-glow" />
        <div className="bg-dots" />
        <div className="bg-vlines" />
        <div className="bg-scan" />
        <div className="bg-vignette" />
      </div>

      {active === 'home' && (
        <button type="button" onClick={() => setHeaderForced(f => !f)} className="header-reveal-btn" title={headerForced ? 'Ocultar header' : 'Mostrar header'}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            {headerForced
              ? <polyline points="18 15 12 9 6 15"/>
              : <polyline points="6 9 12 15 18 9"/>}
          </svg>
        </button>
      )}
      <div className={`header-wrap ${active === 'home' && !headerForced ? 'is-hidden' : ''}`}>
        <HeaderBar user={userMeta} onOpenTool={openTool} breadcrumb={breadcrumb}
                   onRefresh={refreshPage} onSignOut={onSignOut} hideSearch={active === 'home'} />
      </div>

      <div className={`app-body ${active === 'home' && !headerForced ? 'is-home' : ''}`}>
        <window.Sidebar active={active} onChange={setActive} identity={identity} />
        <main className="app-main" key={`${active}::${pageNonce}`}>
          {active === 'home' && <HomePage greeting={greeting} onOpenTool={openTool} />}
          {active === 'auditoria' && (identity.isSuperAdmin
            ? <AuditoriaView />
            : <LockedPage title="Auditoria" sub="Acesso restrito"
                reason="A página de auditoria é visível apenas para desenvolvedores (super admin)." />
          )}
          {active === 'reports' && <window.PageReports />}
          {active.startsWith('tool:') && renderToolArea()}
        </main>
      </div>

      {cmd && <CommandPalette
        onClose={() => setCmd(false)}
        onOpen={(id) => { openTool(id); setCmd(false); }} />}

      <TweaksUI t={tweaks} setTweak={setTweak} />
    </div>
  );
}

function computeInitials(identity) {
  const src = (identity.displayName || identity.email || '').replace(/@.*$/, '');
  const parts = src.split(/[._\s-]/).filter(Boolean);
  if (parts.length === 0) return 'CC';
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return (parts[0][0] + parts[1][0]).toUpperCase();
}
function composeRoleLabel(identity) {
  const role = identity.ticketRole === 'administrator' ? 'ADMIN' : 'AGENT';
  const lvl = identity.ticketLevel ? identity.ticketLevel.toUpperCase() : '';
  return [role, lvl].filter(Boolean).join(' · ') || 'COLABORADOR';
}
function computeGreeting(identity, fallback) {
  const h = new Date().getHours();
  const periodo = h < 12 ? 'Bom dia' : h < 18 ? 'Boa tarde' : 'Boa noite';
  const first = (identity.displayName || identity.email || '').split(/[\s.@]/)[0];
  const nome = first ? first.charAt(0).toUpperCase() + first.slice(1) : null;
  return nome ? `${periodo}, ${nome}` : (fallback || `${periodo}`);
}

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