// ═══════════════════════════════════════════════════════════════════
// Screen: Biblioteca de Treinamentos
// Diretoria adiciona, vendedores acessam. Materiais ficam em links externos
// (Google Drive, Dropbox, etc.) — clicar abre em nova aba.
// ═══════════════════════════════════════════════════════════════════

const CATEGORIAS_TREIN = [
  'Prospecção',
  'Qualificação',
  'Proposta & fechamento',
  'Fidelização & pós-venda',
  'Soft skills',
  'Processo & ferramentas',
  'Geral',
];

// Detecta tipo do material pela URL
function detectarTipoTreino(url) {
  if (!url) return 'link';
  const u = url.toLowerCase();
  if (u.includes('.pdf') || u.includes('/pdf/'))                                  return 'pdf';
  if (u.match(/\.(pptx?|key)(\?|$)/) || u.includes('slides.google'))              return 'ppt';
  if (u.match(/\.(docx?|odt)(\?|$)/) || u.includes('docs.google.com/document'))   return 'doc';
  if (u.includes('youtube.com') || u.includes('youtu.be') || u.includes('vimeo.com') || u.includes('loom.com')) return 'video';
  if (u.includes('drive.google.com')) {
    // Tenta inferir pelo path
    if (u.includes('/presentation')) return 'ppt';
    if (u.includes('/document'))     return 'doc';
    return 'pdf'; // default razoável pro Drive
  }
  return 'link';
}

const ROTULO_TIPO = { pdf: 'PDF', ppt: 'Apresentação', doc: 'Documento', video: 'Vídeo', link: 'Link' };
const ICONE_TIPO  = { pdf: 'file', ppt: 'file', doc: 'file', video: 'play', link: 'link' };
const COR_TIPO    = {
  pdf:   { fg: '#B3261E', bg: '#FDECEC', border: '#F4C7C3' },
  ppt:   { fg: '#B56500', bg: '#FFF4E6', border: '#FFD6A3' },
  doc:   { fg: '#1F4A8A', bg: '#EEF3FA', border: '#C9D7EC' },
  video: { fg: '#5B2A85', bg: '#F1EBFA', border: '#D9C8EE' },
  link:  { fg: 'var(--escalab-slate)', bg: 'rgba(74,85,96,.08)', border: 'transparent' },
};

function TreinamentoFormModal({ open, onClose, treinamento, onSave, autorNome }) {
  const blank = () => ({
    id: 'tr_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6),
    titulo: '', descricao: '', categoria: 'Geral',
    url: '', tipo: 'pdf', duracao: '',
    autor: autorNome || '',
    data: new Date().toISOString().slice(0, 10),
  });
  const [form, setForm] = useState(blank());

  useEffect(() => {
    if (open) setForm(treinamento ? { ...blank(), ...treinamento } : blank());
  }, [open, treinamento]);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  // Auto-detecta tipo quando URL muda (mas permite override manual)
  const setUrl = (v) => setForm(f => ({ ...f, url: v, tipo: detectarTipoTreino(v) || f.tipo }));

  const salvar = () => {
    if (!form.titulo.trim()) { alert('Informe o título do treinamento.'); return; }
    if (!form.url.trim())    { alert('Informe o link do material (Drive, Dropbox, YouTube, etc.).'); return; }
    onSave({ ...form, titulo: form.titulo.trim(), descricao: form.descricao.trim(), url: form.url.trim() });
  };

  return (
    <Modal open={open} onClose={onClose}
      title={treinamento ? 'Editar treinamento' : 'Adicionar treinamento'}
      width={600}
      footer={<>
        <Button variant="outline" onClick={onClose}>Cancelar</Button>
        <Button variant="primary" icon="check" onClick={salvar}>Salvar</Button>
      </>}
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Banner tone="info" icon="info">
          Cole o link público do material (Google Drive, Dropbox, YouTube, Loom…). Verifique se está com permissão de visualização para o time.
        </Banner>

        <Field label="Título">
          <Input value={form.titulo} onChange={v => set('titulo', v)} placeholder="Ex: Framework SPIN para qualificação" />
        </Field>

        <Field label="Descrição curta" hint="O que o vendedor vai aprender aqui? (Opcional, mas ajuda muito.)">
          <Input value={form.descricao} onChange={v => set('descricao', v)} placeholder="Ex: 4 perguntas-chave para descobrir a dor real do cliente" />
        </Field>

        <Field label="Link do material">
          <Input value={form.url} onChange={setUrl} placeholder="https://drive.google.com/file/d/…" prefix="🔗" />
        </Field>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
          <Field label="Categoria">
            <Select value={form.categoria} onChange={v => set('categoria', v)}
              options={CATEGORIAS_TREIN.map(c => ({ value: c, label: c }))} />
          </Field>
          <Field label="Tipo de material">
            <Select value={form.tipo} onChange={v => set('tipo', v)}
              options={Object.entries(ROTULO_TIPO).map(([v, l]) => ({ value: v, label: l }))} />
          </Field>
          <Field label="Duração" hint="opcional">
            <Input value={form.duracao} onChange={v => set('duracao', v)} placeholder="15 min" />
          </Field>
        </div>
      </div>
    </Modal>
  );
}

function TreinamentosScreen({ state, setState, isMaria, autorNome }) {
  const treinamentos = state.treinamentos || [];
  const { isMobile } = useMobile();
  const [busca, setBusca] = useState('');
  const [filtroCategoria, setFiltroCategoria] = useState('');
  const [filtroTipo, setFiltroTipo] = useState('');
  const [modalOpen, setModalOpen] = useState(false);
  const [editando, setEditando] = useState(null);

  const filtrados = treinamentos.filter(t => {
    if (busca) {
      const q = busca.toLowerCase();
      const m = t.titulo?.toLowerCase().includes(q) || t.descricao?.toLowerCase().includes(q);
      if (!m) return false;
    }
    if (filtroCategoria && t.categoria !== filtroCategoria) return false;
    if (filtroTipo && t.tipo !== filtroTipo) return false;
    return true;
  });

  const ordenados = [...filtrados].sort((a, b) => (b.data || '').localeCompare(a.data || ''));

  // Agrupar por categoria pra organizar a lista
  const grupos = {};
  ordenados.forEach(t => {
    const k = t.categoria || 'Geral';
    if (!grupos[k]) grupos[k] = [];
    grupos[k].push(t);
  });
  const ordemCat = [...CATEGORIAS_TREIN, ...Object.keys(grupos).filter(k => !CATEGORIAS_TREIN.includes(k))]
    .filter(k => grupos[k]);

  const abrirNovo = () => { setEditando(null); setModalOpen(true); };
  const abrirEdit = (t) => { setEditando(t); setModalOpen(true); };

  const salvar = (t) => {
    setState.setTreinamentos(prev => {
      const exists = (prev || []).find(x => x.id === t.id);
      return exists ? prev.map(x => x.id === t.id ? t : x) : [t, ...(prev || [])];
    });
    setModalOpen(false);
  };

  const remover = (id) => {
    if (!window.confirm('Remover este treinamento da biblioteca? Esta ação não pode ser desfeita.')) return;
    setState.setTreinamentos(prev => (prev || []).filter(t => t.id !== id));
  };

  const totalCat = Object.keys(grupos).length;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      {/* Cabeçalho */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 20, flexWrap: 'wrap' }}>
        <div>
          <Eyebrow idx="05">Treinamentos &amp; materiais</Eyebrow>
          <h1 style={{ fontSize: 'clamp(24px, 6.4vw, 44px)', margin: 0, letterSpacing: '-.02em', lineHeight: 1.05, overflowWrap: 'break-word', maxWidth: '100%' }}>
            Aprendizado <em style={{ fontStyle: 'normal', color: 'var(--escalab-brand)' }}>contínuo</em>.
          </h1>
          <p style={{ marginTop: 14, color: 'var(--escalab-slate)', fontSize: 16, maxWidth: 640 }}>
            Biblioteca de materiais de venda compartilhada pelo time. Qualquer pessoa pode adicionar — PDFs, apresentações, vídeos, links.
          </p>
        </div>
        <span data-tut="btn-novo-treinamento"><Button variant="primary" icon="plus" onClick={abrirNovo}>Adicionar treinamento</Button></span>
      </div>

      {/* Filtros */}
      {treinamentos.length > 0 && (
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.5fr 1fr 1fr auto', gap: 10 }}>
          <Input value={busca} onChange={setBusca} placeholder="Buscar por título ou descrição…" prefix="🔍" />
          <Select value={filtroCategoria} onChange={setFiltroCategoria} placeholder="Todas as categorias"
            options={CATEGORIAS_TREIN.map(c => ({ value: c, label: c }))} />
          <Select value={filtroTipo} onChange={setFiltroTipo} placeholder="Todos os tipos"
            options={Object.entries(ROTULO_TIPO).map(([v, l]) => ({ value: v, label: l }))} />
          {(busca || filtroCategoria || filtroTipo) && (
            <Button variant="outline" icon="close" onClick={() => { setBusca(''); setFiltroCategoria(''); setFiltroTipo(''); }}>Limpar</Button>
          )}
        </div>
      )}

      {/* Estado vazio */}
      {treinamentos.length === 0 && (
        <Card>
          <div style={{ padding: 32, textAlign: 'center' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 56, height: 56, background: 'var(--escalab-brand-tint)', borderRadius: '50%', color: 'var(--escalab-brand)', marginBottom: 16 }}>
              <Icon name="book" size={26} />
            </div>
            <h3 style={{ margin: '0 0 8px', fontSize: 17 }}>Biblioteca ainda vazia</h3>
            <p style={{ margin: '0 auto 16px', maxWidth: 400, fontSize: 14, color: 'var(--escalab-slate)' }}>
              Comece adicionando o primeiro material — pode ser um PDF de processo, uma apresentação de produto ou um vídeo de role play.
            </p>
            <Button variant="primary" icon="plus" onClick={abrirNovo}>Adicionar primeiro treinamento</Button>
          </div>
        </Card>
      )}

      {/* Estado filtrado mas vazio */}
      {treinamentos.length > 0 && filtrados.length === 0 && (
        <Card>
          <div style={{ padding: 32, textAlign: 'center', fontSize: 14, color: 'var(--escalab-mute)' }}>
            Nenhum treinamento encontrado com esses filtros.
          </div>
        </Card>
      )}

      {/* Lista por categoria */}
      {ordemCat.length > 0 && ordemCat.map((cat, catIdx) => (
        <div key={cat} {...(catIdx === 0 ? { 'data-tut': 'lista-treinamentos' } : {})}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 12 }}>
            <h3 style={{ margin: 0, fontSize: 15, letterSpacing: '-.005em' }}>{cat}</h3>
            <span style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>{grupos[cat].length} {grupos[cat].length === 1 ? 'item' : 'itens'}</span>
            <span style={{ flex: 1, height: 1, background: 'var(--escalab-line)' }} />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fill, minmax(320px, 1fr))', gap: 14 }}>
            {grupos[cat].map(t => {
              const cor = COR_TIPO[t.tipo] || COR_TIPO.link;
              return (
                <div key={t.id} style={{
                  background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12,
                  padding: 18, display: 'flex', flexDirection: 'column', gap: 10,
                  transition: 'box-shadow .18s var(--ease-out), transform .18s var(--ease-out), border-color .18s var(--ease-out)',
                }}
                  onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--shadow-md)'; e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.borderColor = 'var(--escalab-brand-soft)'; }}
                  onMouseLeave={e => { e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; e.currentTarget.style.transform = 'none'; e.currentTarget.style.borderColor = 'var(--escalab-line)'; }}
                >
                  <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10 }}>
                    <span style={{
                      display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px',
                      borderRadius: 6, fontSize: 11, fontWeight: 700, letterSpacing: '.04em', textTransform: 'uppercase',
                      background: cor.bg, color: cor.fg, border: `1px solid ${cor.border}`,
                    }}>
                      <Icon name={ICONE_TIPO[t.tipo] || 'link'} size={12} />
                      {ROTULO_TIPO[t.tipo] || 'Material'}
                    </span>
                    {t.duracao && <span style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>⏱ {t.duracao}</span>}
                  </div>

                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--escalab-ink)', marginBottom: 4, lineHeight: 1.3 }}>{t.titulo}</div>
                    {t.descricao && (
                      <div style={{ fontSize: 13, color: 'var(--escalab-slate)', lineHeight: 1.5 }}>{t.descricao}</div>
                    )}
                  </div>

                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, paddingTop: 8, borderTop: '1px solid var(--escalab-line)' }}>
                    <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>
                      {t.autor ? `por ${t.autor}` : ''}{t.autor && t.data ? ' · ' : ''}{t.data || ''}
                    </div>
                    <div style={{ display: 'flex', gap: 6 }}>
                      {/* Editar e remover: o autor original ou qualquer diretor. */}
                      {(isMaria || t.autor === autorNome) && (
                        <>
                          <button onClick={() => abrirEdit(t)} style={{ background: 'none', border: '1px solid var(--escalab-line)', borderRadius: 6, cursor: 'pointer', padding: '5px 10px', color: 'var(--escalab-slate)', fontSize: 12 }}>editar</button>
                          <button onClick={() => remover(t.id)} style={{ background: 'none', border: '1px solid #F4C7C3', borderRadius: 6, cursor: 'pointer', padding: '5px 10px', color: '#B3261E', fontSize: 12 }}>remover</button>
                        </>
                      )}
                      <a href={t.url} target="_blank" rel="noopener noreferrer"
                        style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px', background: 'var(--escalab-brand)', color: '#fff', borderRadius: 6, fontSize: 12.5, fontWeight: 600, textDecoration: 'none', transition: 'background .15s' }}
                        onMouseEnter={e => e.currentTarget.style.background = 'var(--escalab-brand-hover)'}
                        onMouseLeave={e => e.currentTarget.style.background = 'var(--escalab-brand)'}>
                        Abrir <Icon name="external" size={12} />
                      </a>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      ))}

      <TreinamentoFormModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        treinamento={editando}
        onSave={salvar}
        autorNome={autorNome}
      />
    </div>
  );
}

Object.assign(window, { TreinamentosScreen, detectarTipoTreino, CATEGORIAS_TREIN });