const ScreenModulo = ({ trilhaId, moduloId, go }) => {
  const trilha = VELYX.trilhas.find(t => t.id === trilhaId) || VELYX.trilhas[0];
  const modulos = VELYX.modulos[trilha.id] || VELYX.modulos.fundamentos;
  const current = modulos.find(m => m.id === moduloId) || modulos.find(m => m.current) || modulos[0];
  const idx = modulos.indexOf(current);
  const prev = modulos[idx - 1];
  const next = modulos[idx + 1];

  const [tab, setTab] = React.useState('conteudo');
  const [playing, setPlaying] = React.useState(false);

  return (
    <div className="max-w-[1360px] mx-auto px-8 py-6" data-screen-label={`Módulo · ${current.title}`}>
      {/* Top crumb */}
      <div className="flex items-center justify-between gap-4 mb-5 text-[12.5px] text-mute">
        <div className="flex items-center gap-2 min-w-0">
          <button onClick={() => go({ name: 'trilhas' })} className="hover:text-ink t-fast">Trilhas</button>
          <I.chevRight size={12} className="text-mute2"/>
          <button onClick={() => go({ name: 'trilha', id: trilha.id })} className="hover:text-ink t-fast truncate">{trilha.name}</button>
          <I.chevRight size={12} className="text-mute2"/>
          <span className="text-ink truncate">Aula {String(current.n).padStart(2,'0')}</span>
        </div>
      </div>

      <div className="grid grid-cols-[1fr_340px] gap-6">
        {/* Left: player + tabs */}
        <div>
          {/* Player */}
          <div className="relative aspect-[16/9] rounded-[10px] overflow-hidden bg-[#0E0E10] hairline2 mb-5">
            <div className="absolute inset-0 stripes"/>
            <div className="absolute inset-0 dotbg opacity-50"/>
            {/* center play */}
            <button onClick={() => setPlaying(p => !p)}
              className="absolute inset-0 flex items-center justify-center group">
              <div className="w-[72px] h-[72px] rounded-full bg-accent text-black flex items-center justify-center t-fast group-hover:scale-105 shadow-[0_0_40px_-10px_rgba(216,255,60,0.5)]">
                {playing ? <div className="flex gap-1.5"><div className="w-1.5 h-5 bg-black"/><div className="w-1.5 h-5 bg-black"/></div> : <I.playFill size={28}/>}
              </div>
            </button>
            {/* HUD */}
            <div className="absolute top-4 left-4 flex items-center gap-2">
              <Badge tone="neutral" className="backdrop-blur">Aula {String(current.n).padStart(2,'0')}</Badge>
              <Badge tone="neutral" className="backdrop-blur">{current.dur}</Badge>
            </div>
            <div className="absolute bottom-0 left-0 right-0 p-4">
              <div className="flex items-center gap-3 text-white/80 text-[11.5px] font-mono mb-2">
                <span>07:14</span>
                <div className="flex-1 h-[3px] rounded-full bg-white/15 overflow-hidden">
                  <div className="h-full bg-accent rounded-full" style={{ width: '38%'}}/>
                </div>
                <span>{current.dur}</span>
              </div>
            </div>
          </div>

          {/* Title + meta */}
          <div className="flex items-start justify-between gap-6 mb-5">
            <div className="flex-1">
              <div className="flex items-center gap-2 mb-2">
                <StatusLabel status={current.status}/>
                <span className="text-mute2 text-[12px]">·</span>
                <span className="text-mute text-[12px]">{trilha.name}</span>
              </div>
              <h1 className="text-[24px] font-semibold tracking-tightest text-ink leading-snug">
                {current.title}
              </h1>
            </div>
          </div>

          {/* Tabs */}
          <div className="border-b border-line mb-6 flex items-center gap-1">
            {[
              ['conteudo', 'Conteúdo'],
              ['transcricao', 'Transcrição'],
              ['materiais', 'Materiais'],
              ['discussao', 'Discussão', 4],
            ].map(([id, label, count]) => (
              <button key={id} onClick={() => setTab(id)}
                className={`relative h-10 px-3.5 text-[13px] t-fast flex items-center gap-1.5
                  ${tab === id ? 'text-ink' : 'text-mute hover:text-ink'}`}>
                {label}
                {count && <span className="text-[10.5px] font-mono text-mute2 bg-white/[0.05] px-1.5 rounded">{count}</span>}
                {tab === id && <span className="absolute left-0 right-0 -bottom-px h-[1.5px] bg-accent"/>}
              </button>
            ))}
          </div>

          {/* Tab content */}
          <div className="fade-in min-h-[300px]">
            {tab === 'conteudo' && <ConteudoTab current={current}/>}
            {tab === 'transcricao' && <TranscricaoTab/>}
            {tab === 'materiais' && <MateriaisTab/>}
            {tab === 'discussao' && <DiscussaoTab/>}
          </div>

          {/* Footer nav */}
          <div className="mt-10 pt-6 border-t border-line flex items-center justify-between gap-4">
            <Button variant="secondary" size="md"
              onClick={() => prev && go({ name: 'modulo', trilha: trilha.id, modulo: prev.id })}
              className={!prev ? 'opacity-40 pointer-events-none' : ''}
              icon={<I.chevLeft size={14}/>}>
              Aula anterior
            </Button>
            <Button variant="secondary" size="md" icon={<I.check size={14}/>}>
              Marcar como concluída
            </Button>
            <Button variant="primary" size="md"
              onClick={() => next && go({ name: 'modulo', trilha: trilha.id, modulo: next.id })}
              className={!next ? 'opacity-40 pointer-events-none' : ''}
              iconRight={<I.chevRight size={14}/>}>
              Próxima aula
            </Button>
          </div>
        </div>

        {/* Right: module sidebar */}
        <aside>
          <div className="sticky top-6">
            <div className="mb-3">
              <div className="text-mute2 text-[10.5px] font-mono uppercase tracking-[0.12em] mb-1">Do módulo</div>
              <div className="text-ink text-[14px] font-medium truncate">{trilha.name}</div>
            </div>

            <div className="rounded-[10px] hairline bg-panel overflow-hidden">
              {modulos.map((m, i) => (
                <button key={m.id}
                  onClick={() => go({ name: 'modulo', trilha: trilha.id, modulo: m.id })}
                  className={`w-full flex items-center gap-3 px-3.5 py-2.5 text-left t-fast ${i !== modulos.length-1 ? 'border-b border-line' : ''}
                    ${m.id === current.id ? 'bg-accent/[0.06]' : 'hover:bg-panel2'}`}>
                  <StatusPip status={m.status}/>
                  <div className="flex-1 min-w-0">
                    <div className={`text-[12.5px] truncate leading-snug ${m.id === current.id ? 'text-accent font-medium' : m.status === 'concluido' ? 'text-mute' : 'text-ink'}`}>
                      {String(m.n).padStart(2,'0')} · {m.title}
                    </div>
                    <div className="text-mute2 text-[10.5px] font-mono mt-0.5">{m.dur}</div>
                  </div>
                </button>
              ))}
            </div>

            {/* Velocity widget */}
            <div className="mt-4 p-4 rounded-[10px] hairline bg-panel">
              <div className="flex items-center gap-2 mb-2">
                <I.flame size={14} className="text-accent"/>
                <span className="text-[12.5px] text-ink">6 dias seguidos</span>
              </div>
              <p className="text-mute text-[11.5px] leading-relaxed">
                Mais 24min hoje pra manter a sequência.
              </p>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
};

const ConteudoTab = ({ current }) => (
  <div className="max-w-[680px]">
    <p className="text-ink text-[15.5px] leading-[1.7] mb-5">
      Quase todo time que liga uma IA de atendimento sem pensar no handoff acaba com o mesmo problema em semanas: o cliente sente que caiu em outra fila. Esta aula existe pra evitar isso.
    </p>
    <h3 className="text-ink text-[17px] font-semibold tracking-tightest mt-8 mb-3">O que você vai aprender</h3>
    <ul className="space-y-2.5 text-[14px] text-ink/90 leading-relaxed">
      {['Os três sinais que justificam escalar pro humano — e dois que parecem justificar mas não são',
        'Como passar o contexto da conversa pro atendente sem fazer o cliente repetir',
        'O roteiro mínimo de transição: três frases que funcionam',
        'Critérios de roteamento: pra qual fila mandar, e quando'
      ].map((s, i) => (
        <li key={i} className="flex gap-3">
          <span className="font-mono text-mute2 text-[12px] pt-0.5 shrink-0 w-6">0{i+1}</span>
          <span>{s}</span>
        </li>
      ))}
    </ul>

    <h3 className="text-ink text-[17px] font-semibold tracking-tightest mt-10 mb-3">Pré-requisitos</h3>
    <div className="p-4 rounded-[8px] hairline text-mute text-[13px] leading-relaxed">
      Ter visto "Onde a IA quebra (e como proteger)". Se ainda não viu, recomendamos voltar antes.
    </div>
  </div>
);

const TranscricaoTab = () => (
  <div className="max-w-[680px] space-y-4 text-[14px] leading-[1.75] text-ink/85">
    <div className="flex gap-4">
      <span className="font-mono text-[11.5px] text-mute2 pt-1 shrink-0 w-12">00:08</span>
      <p>Olha, a maioria dos times que eu acompanho começa por aqui: desenha o fluxo da IA e esquece do humano. Não é descaso, é que o humano parece óbvio demais pra ser desenhado.</p>
    </div>
    <div className="flex gap-4">
      <span className="font-mono text-[11.5px] text-mute2 pt-1 shrink-0 w-12">00:32</span>
      <p>E aí acontece o de sempre. O cliente tá resolvendo com a IA, a IA trava, manda pro humano, e o humano pergunta: "como posso ajudar?". O cliente suspira. Tudo que a IA coletou foi pro lixo.</p>
    </div>
    <div className="flex gap-4">
      <span className="font-mono text-[11.5px] text-mute2 pt-1 shrink-0 w-12">01:14</span>
      <p>Então a pergunta não é "quando a IA desiste". A pergunta é: o que sobrevive da conversa quando ela troca de operador?</p>
    </div>
  </div>
);

const MateriaisTab = () => (
  <div className="grid grid-cols-2 gap-3 max-w-[680px]">
    {[
      ['Slides da aula','PDF · 2.1mb','Os frames principais com espaço pra anotações.'],
      ['Template de handoff','MD · 4kb','O prompt que passa contexto pro humano sem repetição.'],
      ['Caso Pittol','PDF · 890kb','O fluxo real que eles rodaram depois de refazer o handoff.'],
      ['Checklist de transição','PDF · 320kb','23 itens pra revisar antes de ligar em produção.'],
    ].map(([t, meta, d], i) => (
      <div key={i} className="p-4 rounded-[8px] hairline hover:bg-panel2 t-fast cursor-pointer group">
        <div className="flex items-start justify-between mb-3">
          <I.doc size={18} className="text-mute"/>
          <I.download size={14} className="text-mute2 group-hover:text-accent t-fast"/>
        </div>
        <div className="text-ink text-[13.5px] font-medium mb-1 tracking-tightest">{t}</div>
        <div className="text-mute2 text-[10.5px] font-mono mb-2">{meta}</div>
        <p className="text-mute text-[12px] leading-relaxed line-clamp-2">{d}</p>
      </div>
    ))}
  </div>
);

const DiscussaoTab = () => (
  <div className="max-w-[680px] space-y-5">
    <div className="p-4 rounded-[10px] hairline">
      <textarea rows={3} placeholder="Compartilhe uma dúvida ou reflexão com outros alunos..."
        className="w-full bg-transparent text-ink text-[13.5px] placeholder:text-mute2 resize-none focus:outline-none"/>
      <div className="flex items-center justify-end gap-2 mt-2">
        <Button variant="primary" size="sm">Publicar</Button>
      </div>
    </div>
    {[
      { name: 'Diego R.', co: 'Flowly', when: '2h', text: 'O exemplo do handoff com resumo automático virou nossa implementação. Antes a gente mandava o log inteiro, o atendente não lia. Agora é 3 bullets. Mudou o jogo.' },
      { name: 'Priscila M.', co: 'Notely', when: '5h', text: 'Alguém testou isso com voz? Tenho dúvida se o resumo em voz funciona ou se é melhor o atendente ver o texto enquanto ouve o cliente.' },
      { name: 'Rafael K.', co: 'Pittol', when: '1d', text: 'No nosso caso, o gatilho "o cliente repete o mesmo ponto 2x" foi o que mais pegou. Melhor que sentiment analysis.' },
    ].map((c, i) => (
      <div key={i} className="flex gap-3">
        <Avatar initials={c.name[0]} size={32}/>
        <div className="flex-1">
          <div className="flex items-center gap-2 mb-1">
            <span className="text-ink text-[13px] font-medium">{c.name}</span>
            <span className="text-mute2 text-[11.5px]">·</span>
            <span className="text-mute text-[11.5px]">{c.co}</span>
            <span className="text-mute2 text-[11.5px] ml-auto font-mono">{c.when}</span>
          </div>
          <p className="text-ink/85 text-[13.5px] leading-relaxed">{c.text}</p>
        </div>
      </div>
    ))}
  </div>
);

window.ScreenModulo = ScreenModulo;