// ============================================================================
// Detalhe de Playbook / Manual — abre como overlay sobre a página
// ============================================================================

function DetailView({ item, onClose }) {
  if (!item) return null;
  const isManual = item.code && (item.code.startsWith('F-') || item.code.startsWith('O-'));
  useEffect(() => {
    const fn = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', fn);
    return () => window.removeEventListener('keydown', fn);
  }, [onClose]);
  return (
    <div>
      {/* Breadcrumb / voltar */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        padding: '16px 28px', borderBottom: '1px solid var(--line)',
        background: 'var(--bg)',
      }}>
        <button onClick={onClose} style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '7px 12px', borderRadius: 8,
          background: 'var(--paper)', border: '1px solid var(--line)',
          fontSize: 12.5, fontWeight: 600, color: 'var(--ink-2)',
        }}>
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>
          Voltar
        </button>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--ink-3)' }}>
          <span>Portal</span>
          <span style={{ opacity: .5 }}>/</span>
          <span>{isManual ? 'Manuais' : 'Playbooks'}</span>
          <span style={{ opacity: .5 }}>/</span>
          <span style={{ color: 'var(--ink)', fontWeight: 600 }}>{item.title}</span>
        </div>
        <div style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--ink-4)' }}>
          esc para voltar
        </div>
      </div>
      {isManual ? <ManualDetail m={item} onClose={onClose}/> : <PlaybookDetail p={item} onClose={onClose}/>}
    </div>
  );
}

// ============================================================================
// PLAYBOOK DETAIL
// ============================================================================
function PlaybookDetail({ p, onClose }) {
  const d = DETAIL_PLAYBOOK; // Sempre usa o "Usinas" como exemplo cheio — independente do que abriu
  const pal = PRODUCT_PALETTES[p.pal || 'investimento'];
  const [active, setActive] = useState(d.sections[0].n);
  const isDark = pal.ink === '#fff';

  return (
    <div>
      {/* Hero */}
      <div style={{ background: pal.bg, color: pal.ink, padding: '28px 40px 32px', position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, opacity: .7 }}>{p.code || '01·PB'}</span>
            <StatusPill status={p.status || 'Atualizado'} dark={isDark}/>
            <Pill tone="dark" style={{ background: 'rgba(0,0,0,.18)', color: pal.ink === '#fff' ? '#fff' : 'var(--ink)', borderColor: 'rgba(0,0,0,.1)' }}>
              <Icon.dot s={6}/> {d.meta.version}
            </Pill>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button style={{ padding: '8px 12px', borderRadius: 8, background: 'rgba(255,255,255,.12)', color: pal.ink, fontSize: 12, fontWeight: 600, border: '1px solid rgba(255,255,255,.18)' }}>
              <Icon.bookmark s={13}/>
            </button>
            <button onClick={onClose} style={{ padding: '8px 14px', borderRadius: 8, background: 'rgba(255,255,255,.12)', color: pal.ink, fontSize: 12, fontWeight: 600, border: '1px solid rgba(255,255,255,.18)' }}>Fechar · esc</button>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 32, marginTop: 22, alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 12, opacity: .75, letterSpacing: '.04em' }}>{p.subtitle || d.subtitle}</div>
            <h1 style={{ margin: '8px 0 0', fontFamily: 'Instrument Serif, serif', fontWeight: 400, fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.02em' }}>
              {p.title ? `Playbook · ${p.title}` : d.title}
            </h1>
            <div style={{ display: 'flex', gap: 24, marginTop: 18, fontSize: 12, opacity: .75 }}>
              <Meta lbl="Responsável" v={d.meta.owner}/>
              <Meta lbl="Atualizado" v={d.meta.updated}/>
              <Meta lbl="Versão" v={d.meta.version}/>
              <Meta lbl="Leitura" v={d.meta.read}/>
            </div>
          </div>
          <PlaybookCover kind={p.cover || 'sun-grid'} ink={pal.ink} accent={pal.accent}/>
        </div>
      </div>

      {/* Conteúdo */}
      <div style={{ display: 'grid', gridTemplateColumns: '240px minmax(0, 1fr)', minHeight: 600 }}>
        {/* TOC */}
        <aside style={{ borderRight: '1px solid var(--line)', background: 'var(--paper)', padding: '22px 18px' }}>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '.1em', textTransform: 'uppercase', marginBottom: 10 }}>Sumário</div>
          {d.sections.map(s => (
            <button key={s.n} onClick={() => setActive(s.n)} style={{
              display: 'flex', alignItems: 'flex-start', gap: 10, padding: '8px 10px',
              width: '100%', textAlign: 'left', borderRadius: 8,
              background: active === s.n ? 'var(--bg-2)' : 'transparent',
              color: active === s.n ? 'var(--ink)' : 'var(--ink-2)',
              fontSize: 12.5, fontWeight: active === s.n ? 700 : 500,
            }}>
              <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10.5, color: 'var(--amber)', minWidth: 18, marginTop: 2 }}>{String(s.n).padStart(2,'0')}</span>
              <span>{s.t}</span>
            </button>
          ))}
          <div style={{ marginTop: 18, borderTop: '1px solid var(--line)', paddingTop: 14 }}>
            <Progress value={36} />
            <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 8 }}>4 de 12 blocos lidos</div>
          </div>
        </aside>

        {/* Body */}
        <div style={{ padding: '30px 32px 50px', background: 'var(--bg)', minWidth: 0 }}>
          {d.sections.map(s => (
            <article key={s.n} id={`s-${s.n}`} style={{ marginBottom: 30, paddingBottom: 22, borderBottom: '1px solid var(--line)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--amber)', letterSpacing: '.08em' }}>{String(s.n).padStart(2,'0')}</span>
                <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>{s.t}</h3>
              </div>
              <p style={{ margin: '10px 0 0', fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.65, maxWidth: 760, textWrap: 'pretty' }}>{s.body}</p>
              {s.n === 4 && <JourneyStrip />}
              {s.n === 6 && <ArgumentsGrid />}
              {s.n === 8 && <ObjectionsTable />}
            </article>
          ))}

          {/* Checklist + atenção */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 22, marginTop: 8 }}>
            <Card style={{ padding: 22 }}>
              <Pill tone="leaf"><Icon.check s={11}/> Checklist final</Pill>
              <div style={{ marginTop: 14 }}>
                {d.checklist.map((c, i) => (
                  <label key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '10px 0', borderTop: i === 0 ? 'none' : '1px solid var(--line)', fontSize: 13.5, cursor: 'pointer' }}>
                    <input type="checkbox" style={{ marginTop: 3, accentColor: 'var(--leaf)' }}/>
                    <span style={{ color: 'var(--ink-2)' }}>{c}</span>
                  </label>
                ))}
              </div>
            </Card>
            <Card style={{ padding: 22, background: 'var(--rust-soft)', borderColor: 'rgba(184,83,51,.2)' }}>
              <Pill tone="rust"><Icon.shield s={11}/> Pontos de atenção</Pill>
              <ul style={{ margin: '14px 0 0', padding: 0, listStyle: 'none' }}>
                {d.attention.map((a, i) => (
                  <li key={i} style={{ fontSize: 13.5, padding: '8px 0', display: 'flex', gap: 10, color: 'var(--ink-2)' }}>
                    <span style={{ color: 'var(--rust)', marginTop: 6, width: 5, height: 5, borderRadius: 99, background: 'var(--rust)', flex: '0 0 5px' }}/>
                    {a}
                  </li>
                ))}
              </ul>
            </Card>
          </div>

          {/* FAQ */}
          <section style={{ marginTop: 32 }}>
            <SectionHead eyebrow="FAQ" title="Perguntas frequentes"/>
            {d.faq.map((f, i) => (
              <details key={i} style={{ border: '1px solid var(--line)', borderRadius: 12, padding: '14px 18px', background: 'var(--paper)', marginBottom: 8 }}>
                <summary style={{ cursor: 'pointer', fontSize: 14, fontWeight: 700, listStyle: 'none', display: 'flex', justifyContent: 'space-between' }}>
                  <span>{f.q}</span>
                  <span style={{ color: 'var(--amber)', fontFamily: 'JetBrains Mono, monospace', fontSize: 13 }}>+</span>
                </summary>
                <p style={{ margin: '10px 0 0', fontSize: 13.5, color: 'var(--ink-3)', lineHeight: 1.6 }}>{f.a}</p>
              </details>
            ))}
          </section>

          {/* Footer ações */}
          <div style={{ marginTop: 36, padding: '22px 22px', borderRadius: 16, background: 'var(--navy)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,.6)', letterSpacing: '.1em', textTransform: 'uppercase' }}>Próxima etapa</div>
              <div style={{ fontSize: 16, fontWeight: 700, marginTop: 4 }}>Realizar role-play com par sênior e registrar feedback no ClickUp</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button style={{ padding: '10px 14px', borderRadius: 10, background: 'transparent', border: '1px solid rgba(255,255,255,.2)', color: '#fff', fontSize: 12.5, fontWeight: 600 }}>Sugerir melhoria</button>
              <button style={{ padding: '10px 14px', borderRadius: 10, background: 'var(--amber)', color: 'var(--navy)', fontSize: 12.5, fontWeight: 700 }}>Marcar como concluído</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Meta({ lbl, v }) {
  return (
    <div>
      <div style={{ fontSize: 10, letterSpacing: '.12em', textTransform: 'uppercase', opacity: .6 }}>{lbl}</div>
      <div style={{ fontSize: 13, marginTop: 2, fontWeight: 600 }}>{v}</div>
    </div>
  );
}

function JourneyStrip() {
  const steps = ['Lead', 'Pré-qual.', 'Diagnóstico', 'Agendamento', 'Apresentação', 'Proposta', 'Negociação', 'Fechamento', 'Contrato', 'Pós-venda'];
  return (
    <div style={{ marginTop: 16, padding: '14px 16px', background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 12, display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
      {steps.map((s, i) => (
        <React.Fragment key={i}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px', background: i <= 2 ? 'var(--bg-2)' : 'transparent', borderRadius: 99 }}>
            <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--amber)' }}>{String(i+1).padStart(2,'0')}</span>
            <span style={{ fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap' }}>{s}</span>
          </div>
          {i < steps.length - 1 && <Icon.arrow s={12}/>}
        </React.Fragment>
      ))}
    </div>
  );
}

function ArgumentsGrid() {
  const args = [
    { t: 'Ativo real', d: 'O cliente compra cotas de uma usina física operada pela Ampexx.' },
    { t: 'Previsibilidade', d: 'Indexação à tarifa de energia gera retorno previsível.' },
    { t: 'Sem operação para o cliente', d: 'A Ampexx cuida de O&M, monitoramento e seguro.' },
    { t: 'Transparência', d: 'Portal de geração mensal disponível ao investidor.' },
  ];
  return (
    <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
      {args.map((a, i) => (
        <div key={i} style={{ border: '1px solid var(--line)', borderRadius: 12, padding: '14px 16px', background: 'var(--paper)' }}>
          <div style={{ fontSize: 13, fontWeight: 700 }}>{a.t}</div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4, lineHeight: 1.5 }}>{a.d}</div>
        </div>
      ))}
    </div>
  );
}

function ObjectionsTable() {
  const rows = [
    { obj: '“E se eu precisar do dinheiro antes do prazo?”', resp: 'Apresentar cláusula de saída, prazo de aviso e simulação de cenário.' },
    { obj: '“E se a tarifa cair?”', resp: 'Mostrar histórico de 10 anos da tarifa e referência setorial.' },
    { obj: '“Não vou ter problema com a distribuidora?”', resp: 'Explicar enquadramento em geração compartilhada e papel do Ampexx no relacionamento.' },
    { obj: '“Por que não comprar minha própria usina?”', resp: 'Comparativo de CAPEX, gestão e diluição de risco.' },
  ];
  return (
    <div style={{ marginTop: 16, background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', background: 'var(--bg-2)', padding: '12px 16px', fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>
        <div>Objeção</div><div>Resposta padrão</div>
      </div>
      {rows.map((r, i) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', padding: '14px 16px', borderTop: '1px solid var(--line)', fontSize: 13 }}>
          <div style={{ fontWeight: 600 }}>{r.obj}</div>
          <div style={{ color: 'var(--ink-3)', lineHeight: 1.5 }}>{r.resp}</div>
        </div>
      ))}
    </div>
  );
}

// ============================================================================
// MANUAL DETAIL — versão simplificada que mostra a estrutura do manual
// ============================================================================
function ManualDetail({ m, onClose }) {
  const blocks = [
    { n: '01', t: 'Objetivo', body: 'Padronizar a geração de propostas comerciais, garantindo que toda proposta enviada ao cliente siga o mesmo layout, dados e fluxo de aprovação.' },
    { n: '02', t: 'Quando este processo deve ser usado', body: 'Sempre que um lead for qualificado e o vendedor precisar enviar uma proposta formal — em qualquer dos quatro produtos da Ampexx.' },
    { n: '03', t: 'Responsável pelo processo', body: 'Comercial (Closer) com apoio do time de Operações para revisão técnica.' },
    { n: '04', t: 'Ferramentas utilizadas', body: 'PipeRun (etapa do lead) · Wattio (dimensionamento) · Google Drive (modelos) · Modelos de proposta padrão.' },
    { n: '05', t: 'Informações necessárias', body: 'Dados do cliente (CPF/CNPJ, endereço, conta de luz), produto escolhido, ticket alvo e condições negociadas em reunião.' },
    { n: '06', t: 'Passo a passo', body: 'Sequência operacional detalhada abaixo, em 14 passos.' },
    { n: '07', t: 'Padrão de nomenclatura', body: 'AAAA-MM-DD · Cliente · Produto · Versão. Ex: 2026-05-12 · João Silva · Usinas · v1.' },
    { n: '08', t: 'Cuidados importantes', body: 'Conferir titularidade da conta de luz · usar modelo do mês vigente · não alterar cláusulas sem aprovação.' },
    { n: '09', t: 'Em caso de erro', body: 'Solicitar revisão pela coordenação no canal #ops-propostas no WhatsApp e abrir tarefa no ClickUp.' },
    { n: '10', t: 'Checklist final', body: 'Itens obrigatórios verificáveis antes do envio — listados abaixo.' },
    { n: '11', t: 'Próxima etapa', body: 'Enviar proposta para o cliente, mover o lead para “Proposta enviada” no PipeRun e agendar follow-up em até 48h.' },
  ];
  const steps = [
    'Confirmar que o lead está na etapa “Proposta” no PipeRun',
    'Abrir o Wattio e gerar dimensionamento ou simulação do produto',
    'Exportar o resultado em PDF',
    'Abrir o modelo de proposta vigente no Drive',
    'Preencher dados do cliente, condições e anexos',
    'Validar cabeçalho, rodapé e logo (versão atual)',
    'Salvar com o padrão de nomenclatura',
    'Mover para a pasta do cliente no Drive',
    'Atualizar etapa para “Proposta enviada” no PipeRun',
    'Registrar próximo passo combinado',
    'Enviar proposta ao cliente (e-mail + WhatsApp confirmando)',
    'Agendar follow-up em até 48h',
    'Anexar proposta na oportunidade do PipeRun',
    'Comunicar Ops sobre data prevista de fechamento',
  ];
  const checklist = [
    'Dados do cliente conferidos com o cadastro',
    'Modelo do mês vigente foi usado',
    'Valores e condições conferem com o que foi combinado',
    'Documento foi salvo na pasta correta com padrão de nomenclatura',
    'Lead atualizado para a próxima etapa no PipeRun',
    'Próximo passo combinado por escrito com o cliente',
  ];
  return (
    <div>
      <div style={{ background: 'var(--navy)', color: '#fff', padding: '28px 40px 30px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, opacity: .7 }}>{m.code}</span>
            <Pill tone="dark" style={{ background: 'rgba(232,155,44,.2)', color: '#F0B656', borderColor: 'rgba(232,155,44,.35)' }}>Manual · Operacional</Pill>
            <Pill tone="dark" style={{ background: 'rgba(255,255,255,.1)', color: '#fff', borderColor: 'rgba(255,255,255,.18)' }}>v3.1 · ciclo mai·26</Pill>
          </div>
          <button onClick={onClose} style={{ padding: '8px 14px', borderRadius: 8, background: 'rgba(255,255,255,.12)', color: '#fff', fontSize: 12, fontWeight: 600, border: '1px solid rgba(255,255,255,.18)' }}>Fechar · esc</button>
        </div>
        <h1 style={{ margin: '14px 0 0', fontFamily: 'Instrument Serif, serif', fontWeight: 400, fontSize: 44, lineHeight: 1.05, letterSpacing: '-0.02em' }}>
          Manual · {m.title}
        </h1>
        <div style={{ display: 'flex', gap: 24, marginTop: 16, fontSize: 12, opacity: .75 }}>
          <Meta lbl="Área" v={m.area}/>
          <Meta lbl="Ferramentas" v={m.tool}/>
          <Meta lbl="Passos" v={`${m.steps} etapas · ${m.time}`}/>
          <Meta lbl="Atualizado" v={m.updated}/>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '240px minmax(0, 1fr)', minHeight: 600 }}>
        <aside style={{ borderRight: '1px solid var(--line)', background: 'var(--paper)', padding: '22px 18px' }}>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '.1em', textTransform: 'uppercase', marginBottom: 10 }}>Blocos · 11</div>
          {blocks.map(b => (
            <div key={b.n} style={{ padding: '7px 10px', borderRadius: 8, fontSize: 12.5, color: 'var(--ink-2)', display: 'flex', gap: 10 }}>
              <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10.5, color: 'var(--amber)' }}>{b.n}</span>
              <span>{b.t}</span>
            </div>
          ))}
        </aside>
        <div style={{ padding: '28px 32px 50px', background: 'var(--bg)', minWidth: 0 }}>
          {blocks.map(b => (
            <article key={b.n} style={{ marginBottom: 24, paddingBottom: 18, borderBottom: '1px solid var(--line)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--amber)' }}>{b.n}</span>
                <h3 style={{ margin: 0, fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em' }}>{b.t}</h3>
              </div>
              <p style={{ margin: '8px 0 0', fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.6, maxWidth: 760 }}>{b.body}</p>

              {b.n === '06' && (
                <ol style={{ marginTop: 14, padding: 0, listStyle: 'none', counterReset: 'step' }}>
                  {steps.map((s, i) => (
                    <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '10px 14px', background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, marginBottom: 6 }}>
                      <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--amber)', minWidth: 22 }}>{String(i+1).padStart(2,'0')}</span>
                      <span style={{ fontSize: 13, color: 'var(--ink-2)' }}>{s}</span>
                    </li>
                  ))}
                </ol>
              )}

              {b.n === '10' && (
                <div style={{ marginTop: 14, background: 'var(--leaf-soft)', border: '1px solid rgba(47,107,79,.18)', borderRadius: 12, padding: '14px 18px' }}>
                  {checklist.map((c, i) => (
                    <label key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '8px 0', fontSize: 13.5, cursor: 'pointer', borderTop: i === 0 ? 'none' : '1px solid rgba(47,107,79,.12)' }}>
                      <input type="checkbox" style={{ marginTop: 3, accentColor: 'var(--leaf)' }}/>
                      <span style={{ color: 'var(--ink-2)' }}>{c}</span>
                    </label>
                  ))}
                </div>
              )}
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}

window.DetailView = DetailView;
