// Wave 5b — Operacional A (4 telas): Calendário, Arquivos, Documentos, Knowledge

// =============================================================
// 3. Calendário
// =============================================================
const EVENTOS = [
  { id: 1, titulo: 'Reunião com Padaria Pão Dourado', tipo: 'reuniao', data: 19, hora: '10:00', dur: 60, local: 'Google Meet', desc: 'Kickoff do módulo de NF-e · escopo e prazos.' },
  { id: 2, titulo: 'Revisão do mockup · site v3', tipo: 'tarefa', data: 19, hora: '14:30', dur: 45, local: 'Interno', desc: 'Feedback do cliente Bighorse.' },
  { id: 3, titulo: 'OS-0418 · Emergência chiller', tipo: 'os', data: 19, hora: '07:00', dur: 180, local: 'Grupo Três Marias', desc: 'Carlos Mendonça · prioridade crítica.' },
  { id: 4, titulo: 'Ligar para Fernanda Costa', tipo: 'lembrete', data: 19, hora: '16:00', dur: 15, local: 'Telefone', desc: 'Retorno sobre proposta Pão Dourado.' },
  { id: 5, titulo: 'Standup daily · equipe', tipo: 'reuniao', data: 20, hora: '09:30', dur: 15, local: 'Google Meet', desc: 'Padrão diário.' },
  { id: 6, titulo: 'Entregar DRE fechado · março', tipo: 'tarefa', data: 20, hora: '17:00', dur: 60, local: 'Financeiro' },
  { id: 7, titulo: 'Almoço com Carolina Mendes', tipo: 'reuniao', data: 21, hora: '12:00', dur: 90, local: 'Restaurante Xapuri' },
  { id: 8, titulo: 'Renovar contrato hosting', tipo: 'lembrete', data: 22, hora: '10:00', dur: 10, local: '—' },
  { id: 9, titulo: 'OS-0421 · Manutenção câmara fria', tipo: 'os', data: 22, hora: '09:00', dur: 120, local: 'Restaurante Xapuri' },
  { id: 10, titulo: 'Review sprint 14', tipo: 'reuniao', data: 23, hora: '14:00', dur: 90, local: 'Sala Vermelha' },
  { id: 11, titulo: 'Enviar proposta · Café Savassi', tipo: 'tarefa', data: 24, hora: '11:00', dur: 30, local: 'Comercial' },
];

const tipoMeta = {
  reuniao: { l: 'Reunião', c: '#a78bfa', bg: 'rgba(139,92,246,.18)' },
  tarefa: { l: 'Tarefa', c: '#60a5fa', bg: 'rgba(59,130,246,.18)' },
  lembrete: { l: 'Lembrete', c: '#fcd34d', bg: 'rgba(245,158,11,.18)' },
  os: { l: 'OS', c: '#34d399', bg: 'rgba(16,185,129,.18)' },
};

const PageCalendario = ({ onNavigate }) => {
  const [view, setView] = React.useState('semana');
  const [selected, setSelected] = React.useState(null);

  return (
    <AppShell current="calendario" onNavigate={onNavigate}>
      <PageContainer
        title="Calendário"
        subtitle="Reuniões, tarefas, OS e lembretes · tudo num só lugar."
        maxWidth={1700}
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="calendar" size={13}/> Hoje</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Novo evento</button>
        </>}
      >
        <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 14 }} className="calGrid">
          <style>{`@media (max-width:1100px){.calGrid{grid-template-columns:1fr !important}}`}</style>

          {/* Sidebar */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div className="tile" style={{ padding: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                <h4 style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-0)' }}>Abril · 2026</h4>
                <div style={{ display: 'flex', gap: 4 }}>
                  <button style={{ color: 'var(--text-3)', width: 24, height: 24, borderRadius: 5, display: 'grid', placeItems: 'center' }}><Icon name="chevron-left" size={12}/></button>
                  <button style={{ color: 'var(--text-3)', width: 24, height: 24, borderRadius: 5, display: 'grid', placeItems: 'center' }}><Icon name="chevron-right" size={12}/></button>
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 2, fontSize: 11 }}>
                {['D', 'S', 'T', 'Q', 'Q', 'S', 'S'].map((d, i) => <div key={i} style={{ textAlign: 'center', color: 'var(--text-4)', fontWeight: 600, padding: 4 }}>{d}</div>)}
                {Array.from({ length: 2 }).map((_, i) => <div key={'e' + i}/>)}
                {Array.from({ length: 30 }, (_, i) => i + 1).map(d => {
                  const isToday = d === 19;
                  const has = EVENTOS.some(e => e.data === d);
                  return (
                    <button key={d} style={{
                      padding: '5px 0', borderRadius: 5, textAlign: 'center', fontSize: 11,
                      background: isToday ? 'var(--brand-gradient)' : 'transparent',
                      color: isToday ? '#fff' : 'var(--text-2)',
                      fontWeight: isToday ? 700 : 400,
                      position: 'relative',
                    }}>
                      {d}
                      {has && !isToday && <span style={{ position: 'absolute', bottom: 2, left: '50%', transform: 'translateX(-50%)', width: 3, height: 3, borderRadius: '50%', background: 'var(--accent-1)' }}/>}
                    </button>
                  );
                })}
              </div>
            </div>

            <div className="tile" style={{ padding: 14 }}>
              <h4 style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-3)', fontWeight: 600, marginBottom: 10 }}>Categorias</h4>
              {Object.entries(tipoMeta).map(([k, m]) => (
                <label key={k} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', fontSize: 12.5, color: 'var(--text-1)', cursor: 'pointer' }}>
                  <input type="checkbox" defaultChecked style={{ accentColor: m.c }}/>
                  <span style={{ width: 10, height: 10, borderRadius: 3, background: m.c }}/>
                  {m.l}
                </label>
              ))}
            </div>

            <div className="tile" style={{ padding: 14 }}>
              <h4 style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-3)', fontWeight: 600, marginBottom: 10 }}>Próximos</h4>
              {EVENTOS.slice(0, 4).map(e => (
                <div key={e.id} onClick={() => setSelected(e)} style={{ display: 'flex', gap: 10, padding: '8px 0', cursor: 'pointer', borderBottom: '1px solid var(--line-1)' }}>
                  <span style={{ width: 3, borderRadius: 2, background: tipoMeta[e.tipo].c, flexShrink: 0 }}/>
                  <div>
                    <div style={{ fontSize: 12, color: 'var(--text-0)', fontWeight: 500, lineHeight: 1.3 }}>{e.titulo}</div>
                    <div style={{ fontSize: 10.5, color: 'var(--text-4)', marginTop: 2 }}>{e.data}/04 · {e.hora}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Week view */}
          <div className="tile" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div>
                <h3 style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-0)' }}>Semana · 19–25 abril 2026</h3>
                <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 2 }}>{EVENTOS.length} eventos · 3 reuniões hoje</div>
              </div>
              <div style={{ display: 'inline-flex', background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 8, padding: 3 }}>
                {['mes', 'semana', 'dia'].map(v => (
                  <button key={v} onClick={() => setView(v)} style={{
                    padding: '5px 11px', borderRadius: 5, fontSize: 11.5, fontWeight: 500, textTransform: 'capitalize',
                    background: view === v ? 'var(--bg-3)' : 'transparent',
                    color: view === v ? 'var(--text-0)' : 'var(--text-3)',
                  }}>{v}</button>
                ))}
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '56px repeat(7, 1fr)', minHeight: 680 }}>
              <div style={{ borderBottom: '1px solid var(--line-1)', background: 'var(--bg-2)' }}/>
              {[19, 20, 21, 22, 23, 24, 25].map((d, i) => (
                <div key={d} style={{ borderBottom: '1px solid var(--line-1)', borderLeft: '1px solid var(--line-1)', padding: '10px 8px', background: 'var(--bg-2)', textAlign: 'center' }}>
                  <div style={{ fontSize: 10.5, textTransform: 'uppercase', color: 'var(--text-4)', letterSpacing: '.05em' }}>{['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'][i]}</div>
                  <div style={{ fontSize: 18, fontWeight: 700, color: d === 19 ? 'var(--accent-text)' : 'var(--text-0)' }}>{d}</div>
                </div>
              ))}

              {[8, 9, 10, 11, 12, 13, 14, 15, 16, 17].map((h, hi) => (
                <React.Fragment key={h}>
                  <div style={{ padding: '6px 6px', fontSize: 10, color: 'var(--text-4)', textAlign: 'right', borderBottom: '1px solid var(--line-1)', height: 52 }}>{h}:00</div>
                  {[19, 20, 21, 22, 23, 24, 25].map(d => {
                    const evs = EVENTOS.filter(e => e.data === d && parseInt(e.hora) === h);
                    return (
                      <div key={d + '-' + h} style={{ borderLeft: '1px solid var(--line-1)', borderBottom: '1px solid var(--line-1)', position: 'relative', minHeight: 52, padding: 3 }}>
                        {evs.map(e => (
                          <div key={e.id} onClick={() => setSelected(e)} style={{
                            padding: '4px 7px', borderRadius: 5, fontSize: 10.5, cursor: 'pointer',
                            background: tipoMeta[e.tipo].bg, color: tipoMeta[e.tipo].c,
                            borderLeft: `2px solid ${tipoMeta[e.tipo].c}`, marginBottom: 2, lineHeight: 1.3,
                          }}>
                            <div style={{ fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.titulo}</div>
                            <div style={{ fontSize: 9, opacity: .8 }}>{e.hora} · {e.dur}min</div>
                          </div>
                        ))}
                      </div>
                    );
                  })}
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>

        {selected && (
          <>
            <div onClick={() => setSelected(null)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.5)', zIndex: 90 }}/>
            <div style={{ position: 'fixed', top: 0, right: 0, bottom: 0, width: 440, maxWidth: '100vw', zIndex: 100, background: 'var(--bg-1)', borderLeft: '1px solid var(--line-2)', padding: 24, overflowY: 'auto' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
                <span style={{ fontSize: 10, padding: '3px 8px', borderRadius: 4, background: tipoMeta[selected.tipo].bg, color: tipoMeta[selected.tipo].c, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.05em' }}>{tipoMeta[selected.tipo].l}</span>
                <button onClick={() => setSelected(null)} style={{ color: 'var(--text-3)' }}><Icon name="close" size={14}/></button>
              </div>
              <h2 style={{ fontSize: 22, fontWeight: 700, color: 'var(--text-0)', marginBottom: 16, lineHeight: 1.3 }}>{selected.titulo}</h2>
              {[
                { i: 'calendar', l: `${selected.data}/04/2026 · ${selected.hora}` },
                { i: 'clock', l: `${selected.dur} minutos` },
                { i: 'map-pin', l: selected.local },
              ].map(r => (
                <div key={r.i} style={{ display: 'flex', gap: 10, padding: '8px 0', color: 'var(--text-2)', fontSize: 13 }}>
                  <Icon name={r.i} size={14}/> {r.l}
                </div>
              ))}
              {selected.desc && (
                <div style={{ marginTop: 16, padding: 14, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 9, fontSize: 13, color: 'var(--text-1)', lineHeight: 1.5 }}>{selected.desc}</div>
              )}
              <div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
                <button className="btn btn-primary btn-sm" style={{ flex: 1 }}><Icon name="edit" size={12}/> Editar</button>
                <button className="btn btn-outline btn-sm" style={{ flex: 1 }}><Icon name="trash" size={12}/> Excluir</button>
              </div>
            </div>
          </>
        )}
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 4. Arquivos — file explorer
// =============================================================
const PASTAS = [
  { n: 'Contratos', qtd: 42, cor: '#a78bfa' },
  { n: 'Propostas comerciais', qtd: 128, cor: '#60a5fa' },
  { n: 'Marketing · campanhas', qtd: 86, cor: '#f472b6' },
  { n: 'Financeiro · 2026', qtd: 214, cor: '#34d399' },
  { n: 'RH · documentos', qtd: 97, cor: '#fcd34d' },
  { n: 'Projetos ativos', qtd: 163, cor: '#fb923c' },
];

const ARQUIVOS = [
  { n: 'Proposta-Xapuri-v3.pdf', tipo: 'pdf', sz: '2,4 MB', data: '16/04/2026', owner: 'Ana Silva' },
  { n: 'Logo-automatiza-2026.svg', tipo: 'svg', sz: '48 KB', data: '15/04/2026', owner: 'Bruno Lopes' },
  { n: 'Fotos-evento-lancamento.zip', tipo: 'zip', sz: '148 MB', data: '14/04/2026', owner: 'Carolina Mendes' },
  { n: 'Apresentação-diretoria-Q2.pptx', tipo: 'pptx', sz: '8,1 MB', data: '14/04/2026', owner: 'Diego Ferreira' },
  { n: 'Fluxo-caixa-abril.xlsx', tipo: 'xlsx', sz: '412 KB', data: '12/04/2026', owner: 'Fernanda Costa' },
  { n: 'Hero-landing-v4.png', tipo: 'img', sz: '1,8 MB', data: '10/04/2026', owner: 'Ana Silva' },
  { n: 'Contrato-Bighorse-2026.pdf', tipo: 'pdf', sz: '612 KB', data: '08/04/2026', owner: 'Eduardo Santos' },
  { n: 'Manual-operacional.docx', tipo: 'doc', sz: '1,2 MB', data: '06/04/2026', owner: 'Ana Silva' },
];

const PageArquivos = ({ onNavigate }) => {
  const [view, setView] = React.useState('grid');
  const iconFor = (t) => ({ pdf: '#fca5a5', svg: '#c4b5fd', zip: '#fcd34d', pptx: '#fb923c', xlsx: '#86efac', img: '#f9a8d4', doc: '#93c5fd' }[t] || 'var(--text-3)');

  return (
    <AppShell current="arquivos" onNavigate={onNavigate}>
      <PageContainer
        title="Arquivos"
        subtitle="Drive corporativo · 847 GB de 2 TB utilizados."
        maxWidth={1620}
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="folder-plus" size={13}/> Nova pasta</button>
          <button className="btn btn-primary btn-sm"><Icon name="upload" size={13}/> Upload</button>
        </>}
      >
        {/* Breadcrumbs */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 14, fontSize: 12.5 }}>
          <Icon name="folder" size={13} style={{ color: 'var(--text-3)' }}/>
          <span style={{ color: 'var(--text-3)', cursor: 'pointer' }}>Meu drive</span>
          <Icon name="chevron-right" size={11} style={{ color: 'var(--text-4)' }}/>
          <span style={{ color: 'var(--text-3)', cursor: 'pointer' }}>Bighorse</span>
          <Icon name="chevron-right" size={11} style={{ color: 'var(--text-4)' }}/>
          <span style={{ color: 'var(--text-0)', fontWeight: 600 }}>Comercial · 2026</span>
          <div style={{ marginLeft: 'auto', display: 'inline-flex', background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 7, padding: 3 }}>
            {[['grid', 'grid'], ['lista', 'list']].map(([id, icon]) => (
              <button key={id} onClick={() => setView(id)} style={{
                padding: '4px 8px', borderRadius: 5, display: 'grid', placeItems: 'center',
                background: view === id ? 'var(--bg-3)' : 'transparent',
                color: view === id ? 'var(--text-0)' : 'var(--text-3)',
              }}><Icon name={icon} size={12}/></button>
            ))}
          </div>
        </div>

        <h4 style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-3)', fontWeight: 600, marginBottom: 10 }}>Pastas</h4>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 10, marginBottom: 22 }}>
          {PASTAS.map(p => (
            <div key={p.n} className="tile" style={{ padding: 14, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, background: p.cor + '22', display: 'grid', placeItems: 'center' }}>
                <Icon name="folder" size={20} style={{ color: p.cor }}/>
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-0)' }}>{p.n}</div>
                <div style={{ fontSize: 11, color: 'var(--text-4)', marginTop: 2 }}>{p.qtd} arquivos</div>
              </div>
            </div>
          ))}
        </div>

        <h4 style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-3)', fontWeight: 600, marginBottom: 10 }}>Arquivos</h4>
        {view === 'grid' ? (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 10 }}>
            {ARQUIVOS.map(f => (
              <div key={f.n} className="tile" style={{ padding: 12, cursor: 'pointer' }}>
                <div style={{ aspectRatio: '4/3', borderRadius: 8, background: iconFor(f.tipo) + '18', display: 'grid', placeItems: 'center', marginBottom: 10, position: 'relative', overflow: 'hidden' }}>
                  {f.tipo === 'img' ? (
                    <div style={{ inset: 0, position: 'absolute', background: `linear-gradient(135deg, ${iconFor(f.tipo)}, var(--accent-2))` }}/>
                  ) : (
                    <span style={{ fontSize: 11, padding: '4px 10px', borderRadius: 4, background: iconFor(f.tipo), color: '#0a091c', fontWeight: 700, textTransform: 'uppercase' }}>{f.tipo}</span>
                  )}
                </div>
                <div style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--text-0)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.n}</div>
                <div style={{ fontSize: 10.5, color: 'var(--text-4)', marginTop: 3, display: 'flex', justifyContent: 'space-between' }}>
                  <span>{f.sz}</span><span>{f.data}</span>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="tile" style={{ padding: 0, overflow: 'hidden' }}>
            <table style={{ width: '100%', fontSize: 13 }}>
              <thead><tr style={{ background: 'var(--bg-2)', color: 'var(--text-3)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '.05em' }}>
                <th style={{ textAlign: 'left', padding: '10px 14px', fontWeight: 600 }}>Nome</th>
                <th style={{ textAlign: 'left', padding: '10px 14px', fontWeight: 600 }}>Proprietário</th>
                <th style={{ textAlign: 'left', padding: '10px 14px', fontWeight: 600 }}>Modificado</th>
                <th style={{ textAlign: 'right', padding: '10px 14px', fontWeight: 600 }}>Tamanho</th>
              </tr></thead>
              <tbody>{ARQUIVOS.map(f => (
                <tr key={f.n} style={{ borderTop: '1px solid var(--line-1)', cursor: 'pointer' }}>
                  <td style={{ padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{ width: 28, height: 28, borderRadius: 6, background: iconFor(f.tipo) + '22', display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 700, color: iconFor(f.tipo), textTransform: 'uppercase' }}>{f.tipo.slice(0, 3)}</span>
                    <span style={{ color: 'var(--text-0)' }}>{f.n}</span>
                  </td>
                  <td style={{ padding: '10px 14px', color: 'var(--text-2)' }}>{f.owner}</td>
                  <td style={{ padding: '10px 14px', color: 'var(--text-3)' }}>{f.data}</td>
                  <td style={{ padding: '10px 14px', textAlign: 'right', fontFamily: 'JetBrains Mono, monospace', color: 'var(--text-2)' }}>{f.sz}</td>
                </tr>
              ))}</tbody>
            </table>
          </div>
        )}

        {/* Upload dropzone */}
        <div style={{ marginTop: 22, padding: '30px 20px', border: '2px dashed var(--line-2)', borderRadius: 12, textAlign: 'center', background: 'var(--bg-1)' }}>
          <Icon name="upload" size={26} style={{ color: 'var(--text-3)' }}/>
          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-1)', marginTop: 8 }}>Arraste arquivos aqui ou clique para enviar</div>
          <div style={{ fontSize: 11.5, color: 'var(--text-4)', marginTop: 4 }}>Até 2 GB por arquivo · PDF, imagens, planilhas, ZIP</div>
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 5. Documentos — biblioteca versionada
// =============================================================
const DOCS = [
  { n: 'Contrato padrão · Cliente recorrente', cat: 'Contratos', ver: 'v4.2', autor: 'Jurídico', atu: '12/04/2026', status: 'publicado', leituras: 124 },
  { n: 'Modelo de proposta comercial premium', cat: 'Propostas', ver: 'v2.8', autor: 'Comercial', atu: '10/04/2026', status: 'publicado', leituras: 342 },
  { n: 'Política de privacidade · LGPD', cat: 'Jurídico', ver: 'v3.0', autor: 'DPO', atu: '08/04/2026', status: 'publicado', leituras: 88 },
  { n: 'Manual de onboarding · novos clientes', cat: 'Operacional', ver: 'v1.5', autor: 'Sucesso do Cliente', atu: '05/04/2026', status: 'revisao', leituras: 47 },
  { n: 'Contrato de prestação PJ · freelancers', cat: 'Contratos', ver: 'v2.1', autor: 'Jurídico', atu: '02/04/2026', status: 'publicado', leituras: 63 },
  { n: 'NDA padrão · parceiros tecnológicos', cat: 'Jurídico', ver: 'v1.3', autor: 'Jurídico', atu: '28/03/2026', status: 'publicado', leituras: 19 },
  { n: 'Processo de compras · aprovação > R$ 5k', cat: 'Operacional', ver: 'v2.0', autor: 'Financeiro', atu: '25/03/2026', status: 'publicado', leituras: 71 },
  { n: 'Código de conduta interna', cat: 'RH', ver: 'v4.0', autor: 'RH', atu: '20/03/2026', status: 'publicado', leituras: 156 },
  { n: 'Template apresentação institucional', cat: 'Marketing', ver: 'v5.1', autor: 'Marketing', atu: '15/03/2026', status: 'rascunho', leituras: 12 },
];

const PageDocumentos = ({ onNavigate }) => {
  const [sel, setSel] = React.useState(DOCS[0]);
  const cats = ['Todos', 'Contratos', 'Jurídico', 'Operacional', 'RH', 'Propostas', 'Marketing'];
  const [cat, setCat] = React.useState('Todos');
  const filtered = cat === 'Todos' ? DOCS : DOCS.filter(d => d.cat === cat);
  const statusColor = { publicado: '#86efac', revisao: '#fcd34d', rascunho: 'var(--text-3)' };

  return (
    <AppShell current="documentos" onNavigate={onNavigate}>
      <PageContainer
        title="Documentos"
        subtitle="Biblioteca de documentos oficiais · versionados e auditáveis."
        maxWidth={1620}
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Exportar</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Novo documento</button>
        </>}
      >
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.3fr', gap: 14 }} className="docsGrid">
          <style>{`@media (max-width:1100px){.docsGrid{grid-template-columns:1fr !important}}`}</style>
          <div className="tile" style={{ padding: 0, overflow: 'hidden', maxHeight: 700, display: 'flex', flexDirection: 'column' }}>
            <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--line-1)', display: 'flex', gap: 6, overflowX: 'auto' }}>
              {cats.map(c => (
                <button key={c} onClick={() => setCat(c)} style={{
                  padding: '5px 11px', borderRadius: 6, fontSize: 11.5, fontWeight: 500, whiteSpace: 'nowrap',
                  background: cat === c ? 'var(--bg-3)' : 'transparent',
                  color: cat === c ? 'var(--text-0)' : 'var(--text-3)',
                  border: '1px solid ' + (cat === c ? 'var(--line-2)' : 'transparent'),
                }}>{c}</button>
              ))}
            </div>
            <div style={{ overflowY: 'auto' }}>
              {filtered.map(d => (
                <div key={d.n} onClick={() => setSel(d)} style={{
                  padding: '12px 14px', borderBottom: '1px solid var(--line-1)', cursor: 'pointer',
                  background: sel?.n === d.n ? 'var(--accent-soft-10)' : 'transparent',
                  borderLeft: sel?.n === d.n ? '3px solid var(--accent-1)' : '3px solid transparent',
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 4 }}>
                    <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-0)', flex: 1, paddingRight: 10 }}>{d.n}</span>
                    <span style={{ fontSize: 10, padding: '2px 6px', borderRadius: 3, background: 'var(--bg-3)', color: 'var(--text-3)', fontFamily: 'JetBrains Mono, monospace' }}>{d.ver}</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, color: 'var(--text-4)' }}>
                    <span>{d.cat} · {d.autor}</span>
                    <span style={{ color: statusColor[d.status] }}>● {d.status}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Detalhe */}
          {sel && (
            <div className="tile" style={{ padding: 22, maxHeight: 700, overflowY: 'auto' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                <span style={{ fontSize: 10, padding: '3px 8px', borderRadius: 4, background: 'var(--accent-soft-14)', color: 'var(--accent-text)', fontWeight: 700, textTransform: 'uppercase' }}>{sel.cat}</span>
                <span style={{ fontSize: 11, color: 'var(--text-3)' }}>Versão atual <b style={{ color: 'var(--text-1)' }}>{sel.ver}</b></span>
              </div>
              <h2 style={{ fontSize: 22, fontWeight: 700, color: 'var(--text-0)', lineHeight: 1.3, marginBottom: 12 }}>{sel.n}</h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10, marginBottom: 20 }}>
                <div style={{ padding: 10, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 8 }}>
                  <div style={{ fontSize: 10, color: 'var(--text-4)', textTransform: 'uppercase' }}>Autor</div>
                  <div style={{ fontSize: 13, color: 'var(--text-0)', fontWeight: 600, marginTop: 2 }}>{sel.autor}</div>
                </div>
                <div style={{ padding: 10, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 8 }}>
                  <div style={{ fontSize: 10, color: 'var(--text-4)', textTransform: 'uppercase' }}>Atualizado</div>
                  <div style={{ fontSize: 13, color: 'var(--text-0)', fontWeight: 600, marginTop: 2 }}>{sel.atu}</div>
                </div>
                <div style={{ padding: 10, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 8 }}>
                  <div style={{ fontSize: 10, color: 'var(--text-4)', textTransform: 'uppercase' }}>Leituras</div>
                  <div style={{ fontSize: 13, color: 'var(--text-0)', fontWeight: 600, marginTop: 2 }}>{sel.leituras}</div>
                </div>
              </div>

              <h4 style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-3)', fontWeight: 600, marginBottom: 10 }}>Histórico de versões</h4>
              {[
                { v: sel.ver, d: sel.atu, a: sel.autor, desc: 'Atualização de cláusula 5ª · multa por atraso ajustada.', atual: true },
                { v: 'v' + (parseFloat(sel.ver.slice(1)) - 0.1).toFixed(1), d: '02/04/2026', a: 'Jurídico', desc: 'Revisão ortográfica e anexos atualizados.' },
                { v: 'v' + (parseFloat(sel.ver.slice(1)) - 0.2).toFixed(1), d: '15/03/2026', a: 'Jurídico', desc: 'Adicionada cláusula LGPD · tratamento de dados.' },
                { v: 'v' + (parseFloat(sel.ver.slice(1)) - 1.0).toFixed(1), d: '08/02/2026', a: sel.autor, desc: 'Reformulação completa do modelo.' },
              ].map((h, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, padding: '10px 0', borderBottom: '1px solid var(--line-1)' }}>
                  <div style={{ width: 50, fontFamily: 'JetBrains Mono, monospace', fontSize: 12, fontWeight: 700, color: h.atual ? 'var(--accent-text)' : 'var(--text-3)' }}>{h.v}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 12.5, color: 'var(--text-1)', lineHeight: 1.4 }}>{h.desc}</div>
                    <div style={{ fontSize: 10.5, color: 'var(--text-4)', marginTop: 3 }}>{h.a} · {h.d}</div>
                  </div>
                  {h.atual && <span style={{ fontSize: 10, padding: '2px 7px', borderRadius: 3, background: 'var(--accent-soft-14)', color: 'var(--accent-text)', fontWeight: 600, alignSelf: 'flex-start' }}>ATUAL</span>}
                </div>
              ))}

              <h4 style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-3)', fontWeight: 600, marginTop: 18, marginBottom: 10 }}>Controle de acesso</h4>
              <div style={{ padding: 12, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 9, fontSize: 12, color: 'var(--text-2)', lineHeight: 1.6 }}>
                <div>📖 <b>Leitura:</b> Todos os colaboradores (42)</div>
                <div>✏️ <b>Edição:</b> Jurídico + Diretoria (6)</div>
                <div>🔒 <b>Aprovação:</b> Apenas DPO</div>
              </div>

              <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
                <button className="btn btn-primary btn-sm"><Icon name="download" size={12}/> Baixar {sel.ver}</button>
                <button className="btn btn-outline btn-sm"><Icon name="edit" size={12}/> Nova revisão</button>
                <button className="btn btn-outline btn-sm"><Icon name="share" size={12}/> Compartilhar</button>
              </div>
            </div>
          )}
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 6. Knowledge — wiki interno
// =============================================================
const WIKI_TREE = [
  { id: '1', t: 'Processos comerciais', children: [
    { id: '1.1', t: 'Pipeline · etapas e SLAs' },
    { id: '1.2', t: 'Proposta · template padrão' },
    { id: '1.3', t: 'Régua de negociação · descontos' },
    { id: '1.4', t: 'Fechamento e assinatura' },
  ]},
  { id: '2', t: 'Operações financeiras', children: [
    { id: '2.1', t: 'Conciliação bancária · passo a passo' },
    { id: '2.2', t: 'Faturamento · NF-e e NFS-e' },
    { id: '2.3', t: 'Cobrança e régua de inadimplência' },
  ]},
  { id: '3', t: 'Pessoas & cultura', children: [
    { id: '3.1', t: 'Onboarding · primeira semana' },
    { id: '3.2', t: 'Política de home office' },
    { id: '3.3', t: 'Avaliação de desempenho 9-box' },
    { id: '3.4', t: 'Benefícios e reembolsos' },
  ]},
  { id: '4', t: 'Produto & engenharia', children: [
    { id: '4.1', t: 'Arquitetura da plataforma' },
    { id: '4.2', t: 'Fluxo de deploy' },
    { id: '4.3', t: 'Guia de design tokens' },
  ]},
];

const PageKnowledge = ({ onNavigate }) => {
  const [sel, setSel] = React.useState({ id: '2.1', t: 'Conciliação bancária · passo a passo' });

  return (
    <AppShell current="knowledge" onNavigate={onNavigate}>
      <PageContainer
        title="Base de conhecimento"
        subtitle="Wiki interno · processos, políticas e runbooks da empresa."
        maxWidth={1620}
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="search" size={13}/> Buscar</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Novo artigo</button>
        </>}
      >
        <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 14, minHeight: 700 }} className="knowledgeGrid">
          <style>{`@media (max-width:1100px){.knowledgeGrid{grid-template-columns:1fr !important}}`}</style>
          <div className="tile" style={{ padding: 14, maxHeight: 700, overflowY: 'auto' }}>
            <input placeholder="Buscar artigo…" style={{
              width: '100%', padding: '8px 12px', background: 'var(--bg-2)', border: '1px solid var(--line-2)',
              borderRadius: 8, color: 'var(--text-1)', fontSize: 12.5, marginBottom: 14,
            }}/>
            {WIKI_TREE.map(g => (
              <div key={g.id} style={{ marginBottom: 10 }}>
                <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.05em', color: 'var(--text-3)', fontWeight: 700, marginBottom: 6 }}>{g.t}</div>
                {g.children.map(c => (
                  <button key={c.id} onClick={() => setSel(c)} style={{
                    width: '100%', textAlign: 'left', padding: '7px 10px', borderRadius: 7, fontSize: 12.5,
                    background: sel.id === c.id ? 'var(--accent-soft-14)' : 'transparent',
                    color: sel.id === c.id ? 'var(--accent-text)' : 'var(--text-2)',
                    fontWeight: sel.id === c.id ? 600 : 400, marginBottom: 2,
                    display: 'flex', alignItems: 'center', gap: 8,
                  }}>
                    <Icon name="file" size={12}/> {c.t}
                  </button>
                ))}
              </div>
            ))}
          </div>

          <div className="tile" style={{ padding: 28, maxHeight: 700, overflowY: 'auto' }}>
            <div style={{ display: 'flex', gap: 6, fontSize: 11.5, color: 'var(--text-4)', marginBottom: 10 }}>
              <span>Base</span><Icon name="chevron-right" size={10}/><span>Operações financeiras</span><Icon name="chevron-right" size={10}/><span style={{ color: 'var(--text-2)' }}>{sel.t}</span>
            </div>
            <h1 style={{ fontSize: 28, fontWeight: 800, color: 'var(--text-0)', marginBottom: 10, lineHeight: 1.2 }}>{sel.t}</h1>
            <div style={{ display: 'flex', gap: 14, fontSize: 11.5, color: 'var(--text-4)', marginBottom: 24 }}>
              <span><Icon name="user" size={11}/> Fernanda Costa</span>
              <span><Icon name="clock" size={11}/> Atualizado há 3 dias</span>
              <span><Icon name="eye" size={11}/> 214 leituras</span>
            </div>

            <div style={{ fontSize: 14, color: 'var(--text-1)', lineHeight: 1.7 }}>
              <p>A conciliação bancária é o processo de <b style={{ color: 'var(--text-0)' }}>comparar os lançamentos contábeis</b> com os extratos das contas bancárias da empresa. No Automatiza, o processo é semi-automático e deve ser executado diariamente pelo analista financeiro responsável.</p>

              <h2 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-0)', marginTop: 28, marginBottom: 12 }}>Pré-requisitos</h2>
              <ul style={{ paddingLeft: 22, lineHeight: 1.9 }}>
                <li>Integração OFX ativa com o banco · ver módulo Bancos</li>
                <li>Perfil com permissão <code style={{ background: 'var(--bg-2)', padding: '1px 6px', borderRadius: 4, fontFamily: 'JetBrains Mono, monospace', fontSize: 12 }}>financeiro.conciliar</code></li>
                <li>Plano de contas configurado (mínimo L1 e L2)</li>
              </ul>

              <h2 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-0)', marginTop: 28, marginBottom: 12 }}>Passo a passo</h2>
              <ol style={{ paddingLeft: 22, lineHeight: 1.9 }}>
                <li>Acesse <b>Financeiro → Conciliação</b></li>
                <li>Selecione a conta bancária e o período (recomendado: últimos 7 dias)</li>
                <li>Clique em <b>Buscar OFX</b> para carregar automaticamente os lançamentos</li>
                <li>Na fila "Sugestões da IA", revise os matches automáticos · cada match vem com score de confiança</li>
                <li>Para matches com confiança &lt; 80%, revise manualmente arrastando o lançamento para o extrato correto</li>
                <li>Itens não reconciliados devem ser criados como novo lançamento ou marcados como "ignorar"</li>
                <li>Finalize clicando em <b>Conciliar selecionados</b></li>
              </ol>

              <div style={{ padding: 14, background: 'var(--accent-soft-08)', borderLeft: '3px solid var(--accent-1)', borderRadius: 8, marginTop: 20, fontSize: 13 }}>
                💡 <b style={{ color: 'var(--text-0)' }}>Dica:</b> ative a regra "taxa bancária &lt; R$ 50" para que o sistema concilie automaticamente sem revisão manual.
              </div>

              <h2 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-0)', marginTop: 28, marginBottom: 12 }}>Solução de problemas</h2>
              <table style={{ width: '100%', fontSize: 13, borderCollapse: 'collapse' }}>
                <thead><tr style={{ background: 'var(--bg-2)', color: 'var(--text-3)' }}>
                  <th style={{ textAlign: 'left', padding: '8px 10px' }}>Erro</th>
                  <th style={{ textAlign: 'left', padding: '8px 10px' }}>Causa provável</th>
                  <th style={{ textAlign: 'left', padding: '8px 10px' }}>Ação</th>
                </tr></thead>
                <tbody>
                  {[
                    ['OFX vazio', 'Token expirado', 'Reautenticar em Bancos → Integração'],
                    ['Duplicidades', 'Import manual anterior', 'Filtrar e excluir os duplicados'],
                    ['Saldo divergente', 'Lançamento fora do período', 'Verificar faturamento não conciliado'],
                  ].map((r, i) => (
                    <tr key={i} style={{ borderTop: '1px solid var(--line-1)' }}>
                      {r.map((c, j) => <td key={j} style={{ padding: '8px 10px', color: j === 0 ? 'var(--text-0)' : 'var(--text-2)' }}>{c}</td>)}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <div style={{ marginTop: 36, paddingTop: 18, borderTop: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 14 }}>
              <span style={{ fontSize: 13, color: 'var(--text-1)', flex: 1 }}>Este artigo foi útil?</span>
              <button className="btn btn-outline btn-sm">👍 Sim (87)</button>
              <button className="btn btn-outline btn-sm">👎 Não (3)</button>
            </div>
          </div>
        </div>
      </PageContainer>
    </AppShell>
  );
};

Object.assign(window, { EVENTOS, PASTAS, ARQUIVOS, DOCS, WIKI_TREE, PageCalendario, PageArquivos, PageDocumentos, PageKnowledge });