// ═══════════════════════════════════════════════════════════════
// SCREEN · Avaliações
// ═══════════════════════════════════════════════════════════════

const BLOCOS = [
  { id: 'tecnico',       label: 'Técnico',        icon: 'star',      cor: '#1F4A8A' },
  { id: 'comportamental',label: 'Comportamental',  icon: 'users',     cor: '#7A4A00' },
  { id: 'metas',         label: 'Metas',           icon: 'trophy',    cor: '#005E4D' },
  { id: 'lideranca',     label: 'Liderança',       icon: 'trend_up',  cor: '#6B3FA0' },
];

const ScaleSelect = ({ value, onChange }) => (
  <div style={{ display: 'flex', gap: 6 }}>
    {[1, 2, 3, 4, 5].map(n => (
      <button key={n} onClick={() => onChange(n)} style={{
        width: 40, height: 40, border: `2px solid ${value === n ? 'var(--escalab-brand)' : 'var(--escalab-line)'}`,
        borderRadius: 8, background: value === n ? 'var(--escalab-brand)' : '#fff',
        color: value === n ? '#fff' : 'var(--escalab-slate)', fontWeight: 700, fontSize: 15,
        cursor: 'pointer', transition: 'all .15s', fontFamily: 'var(--font-sans)',
      }}>{n}</button>
    ))}
  </div>
);

const FormAvaliacao = ({ colab, tipo, onClose, onSalvar }) => {
  const perguntas = BANCO_PERGUNTAS[colab.cargo] || BANCO_PERGUNTAS['default'];
  const [respostas, setRespostas] = useState({});
  const [blocoAtual, setBlocoAtual] = useState(0);
  const temLideranca = colab.nivel !== 'liderado';
  const blocosVisiveis = temLideranca ? BLOCOS : BLOCOS.filter(b => b.id !== 'lideranca');
  const bloco = blocosVisiveis[blocoAtual];
  const perguntasBloco = perguntas.filter(p => p.bloco === bloco?.id);
  const totalRespondidas = Object.keys(respostas).filter(k => respostas[k] != null).length;
  const totalPerguntas = perguntas.filter(p => blocosVisiveis.some(b => b.id === p.bloco)).length;

  function salvar() {
    const notas = {};
    blocosVisiveis.forEach(b => {
      const ps = perguntas.filter(p => p.bloco === b.id);
      const vals = ps.map((p, i) => respostas[`${b.id}_${i}`]).filter(v => v != null);
      notas[b.id] = vals.length ? vals.reduce((s, v) => s + v, 0) / vals.length : null;
    });
    const notaGeral = Object.values(notas).filter(v => v != null);
    const media = notaGeral.reduce((s, v) => s + v, 0) / notaGeral.length;
    onSalvar({ avaliadoId: colab.id, tipo, blocos: notas, nota: parseFloat(media.toFixed(2)) });
  }

  return (
    <div>
      {/* Cabeçalho colaborador */}
      <div style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '14px 24px', background: 'var(--escalab-paper)', borderBottom: '1px solid var(--escalab-line)', margin: '-24px -24px 20px' }}>
        <Avatar nome={colab.nome} cor={colab.cor} iniciais={colab.iniciais} size={38} />
        <div>
          <div style={{ fontWeight: 600, fontSize: 14 }}>{colab.nome}</div>
          <div style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>{colab.cargo}</div>
        </div>
        <div style={{ flex: 1 }} />
        <Tag tone="brand">{tipo === 'auto' ? 'Autoavaliação' : tipo === 'liderado' ? 'Avaliação de liderado' : 'Avaliação de superior'}</Tag>
      </div>

      {/* Progresso geral */}
      <div style={{ marginBottom: 20 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--escalab-mute)', marginBottom: 6 }}>
          <span>Progresso</span><span>{totalRespondidas}/{totalPerguntas} respostas</span>
        </div>
        <Progress value={totalRespondidas} max={totalPerguntas} />
      </div>

      {/* Tabs de blocos */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 20, flexWrap: 'wrap' }}>
        {blocosVisiveis.map((b, i) => {
          const ps = perguntas.filter(p => p.bloco === b.id);
          const done = ps.filter((_, pi) => respostas[`${b.id}_${pi}`] != null).length;
          return (
            <button key={b.id} onClick={() => setBlocoAtual(i)} style={{
              display: 'flex', alignItems: 'center', gap: 6, padding: '7px 13px', borderRadius: 8,
              border: `1.5px solid ${blocoAtual === i ? b.cor : 'var(--escalab-line)'}`,
              background: blocoAtual === i ? b.cor + '12' : '#fff',
              color: blocoAtual === i ? b.cor : 'var(--escalab-slate)',
              cursor: 'pointer', fontSize: 12.5, fontWeight: 500, transition: 'all .15s',
              fontFamily: 'var(--font-sans)',
            }}>
              <Icon name={b.icon} size={13} />
              {b.label}
              {done === ps.length && ps.length > 0 && <Icon name="check" size={12} />}
            </button>
          );
        })}
      </div>

      {/* Perguntas do bloco */}
      {perguntasBloco.length === 0 ? (
        <Banner tone="info">Nenhuma pergunta configurada para este bloco e cargo.</Banner>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          {perguntasBloco.map((p, i) => (
            <div key={i}>
              <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--escalab-ink)', marginBottom: 12, lineHeight: 1.4 }}>{p.pergunta}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <ScaleSelect value={respostas[`${bloco.id}_${i}`]} onChange={v => setRespostas(r => ({ ...r, [`${bloco.id}_${i}`]: v }))} />
                <span style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>
                  {respostas[`${bloco.id}_${i}`] ? ['', 'Abaixo do esperado', 'Precisa melhorar', 'Atende', 'Supera', 'Excepcional'][respostas[`${bloco.id}_${i}`]] : ''}
                </span>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Navegação entre blocos */}
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 28, paddingTop: 20, borderTop: '1px solid var(--escalab-line)' }}>
        <Button variant="outline" size="sm" icon="chev_left" onClick={() => setBlocoAtual(b => Math.max(0, b - 1))} disabled={blocoAtual === 0}>Anterior</Button>
        {blocoAtual < blocosVisiveis.length - 1
          ? <Button variant="primary" size="sm" iconRight="chev_right" onClick={() => setBlocoAtual(b => b + 1)}>Próximo bloco</Button>
          : <Button variant="primary" size="sm" icon="check" onClick={salvar} disabled={totalRespondidas === 0}>Concluir avaliação</Button>
        }
      </div>
    </div>
  );
};

const ScreenAvaliacao = ({ user }) => {
  const [abaAtiva, setAbaAtiva] = useState('');
  const [avaliadoSel, setAvaliadoSel] = useState(null);
  const [formOpen, setFormOpen] = useState(false);
  const [concluidas, setConcluidas] = useState([]);
  const [showIntersetorial, setShowIntersetorial] = useState(false);
  const [sucesso, setSucesso] = useState('');

  const cicloAtivo = CICLOS.find(c => c.status === 'ativo');

  // Determinar responsabilidades por perfil
  const abas = useMemo(() => {
    const all = [];
    if (user.nivel === 'diretor' || user.nivel === 'lider') {
      all.push({ id: 'liderados', label: 'Avaliar liderados', icon: 'users' });
    }
    if (user.nivel === 'lider' || user.nivel === 'liderado') {
      all.push({ id: 'superior', label: 'Avaliar superior', icon: 'trend_up' });
    }
    if (user.nivel === 'diretor') {
      all.push({ id: 'lider_setor', label: 'Avaliar líderes', icon: 'star' });
    }
    all.push({ id: 'auto', label: 'Autoavaliação', icon: 'user' });
    all.push({ id: 'setor', label: 'Avaliação de setor', icon: 'chart' });
    return all;
  }, [user]);

  useEffect(() => {
    if (abas.length && !abaAtiva) setAbaAtiva(abas[0].id);
  }, [abas]);

  // Colaboradores relevantes por aba
  const colabosPorAba = useMemo(() => {
    const meuSetor = COLABORADORES.filter(c => c.setor === user.setor && c.id !== user.id);
    if (abaAtiva === 'liderados') return meuSetor.filter(c => c.nivel === 'liderado');
    if (abaAtiva === 'superior')  return COLABORADORES.filter(c => (c.nivel === 'diretor' || c.nivel === 'lider') && c.setor === user.setor && c.id !== user.id);
    if (abaAtiva === 'lider_setor') return COLABORADORES.filter(c => c.nivel === 'lider' && c.setor === user.setor);
    if (abaAtiva === 'auto') return [user];
    return [];
  }, [abaAtiva, user]);

  function getStatus(colaboradorId, tipo) {
    if (concluidas.find(a => a.avaliadoId === colaboradorId && a.tipo === tipo)) return 'concluida';
    const existing = AVALIACOES.find(a => a.avaliadorId === user.id && a.avaliadoId === colaboradorId && a.tipo === tipo && a.cicloId === cicloAtivo?.id);
    return existing?.status || 'pendente';
  }

  const statusTone = { concluida: 'success', em_andamento: 'warn', pendente: 'neutral' };
  const statusLabel = { concluida: 'Concluída', em_andamento: 'Em andamento', pendente: 'Pendente' };

  const progresso = colabosPorAba.filter(c => getStatus(c.id, abaAtiva) === 'concluida').length;

  // Avaliação de setor
  const [notaSetor, setNotaSetor] = useState({});
  const perguntasSetor = [
    'O setor alcançou suas metas principais no ciclo',
    'A comunicação interna do setor é eficaz',
    'Os processos do setor estão bem definidos e otimizados',
    'A equipe demonstra engajamento e colaboração',
    'O setor contribui positivamente para os objetivos da empresa',
  ];

  return (
    <div style={{ animation: 'fadeIn .22s var(--ease-out)' }}>
      {/* Header */}
      <div style={{ marginBottom: 24 }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-brand)', marginBottom: 4 }}>Avaliações</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
          <h2 style={{ fontSize: 22, fontWeight: 700, margin: 0 }}>Ciclo Avaliativo</h2>
          <Tag tone="success">{cicloAtivo?.nome}</Tag>
        </div>
        <p style={{ margin: 0, fontSize: 13.5, color: 'var(--escalab-slate)', maxWidth: '100%' }}>
          {cicloAtivo?.inicio} até {cicloAtivo?.fim}
        </p>
      </div>

      {sucesso && (
        <div style={{ marginBottom: 16 }}>
          <Banner tone="success" onClose={() => setSucesso('')}>{sucesso}</Banner>
        </div>
      )}

      {/* KPIs de progresso */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 12, marginBottom: 22 }}>
        {abas.filter(a => a.id !== 'setor').map(a => {
          const cols = (() => {
            const meuSetor = COLABORADORES.filter(c => c.setor === user.setor && c.id !== user.id);
            if (a.id === 'liderados') return meuSetor.filter(c => c.nivel === 'liderado');
            if (a.id === 'superior')  return COLABORADORES.filter(c => (c.nivel === 'diretor' || c.nivel === 'lider') && c.setor === user.setor && c.id !== user.id);
            if (a.id === 'lider_setor') return COLABORADORES.filter(c => c.nivel === 'lider' && c.setor === user.setor);
            if (a.id === 'auto') return [user];
            return [];
          })();
          const done = cols.filter(c => getStatus(c.id, a.id) === 'concluida').length;
          const pct = cols.length ? Math.round((done / cols.length) * 100) : 0;
          return (
            <div key={a.id} style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '16px 18px' }}>
              <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 10, display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name={a.icon} size={12} /> {a.label}
              </div>
              <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--escalab-brand-deep)', marginBottom: 8 }}>{done}/{cols.length}</div>
              <Progress value={done} max={Math.max(cols.length, 1)} />
            </div>
          );
        })}
      </div>

      {/* Tabs */}
      <Tabs tabs={abas} active={abaAtiva} onChange={setAbaAtiva} />
      <div style={{ paddingTop: 20 }}>

        {/* ── Lista de avaliados ── */}
        {abaAtiva !== 'setor' && (
          <div style={{ display: 'grid', gridTemplateColumns: avaliadoSel ? '260px 1fr' : '1fr', gap: 16, animation: 'fadeIn .2s' }}>
            {/* Lista */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {abaAtiva === 'intersetorial' && (
                <Banner tone="warn" style={{ marginBottom: 12 }}>
                  <span style={{ fontStyle: 'italic' }}>Avaliação opcional · colaboradores de outros setores</span>
                </Banner>
              )}
              {colabosPorAba.length === 0 ? (
                <Banner tone="info">Nenhum colaborador para avaliar nesta categoria.</Banner>
              ) : colabosPorAba.map(c => {
                const st = getStatus(c.id, abaAtiva);
                return (
                  <div key={c.id} onClick={() => setAvaliadoSel(c)} style={{
                    display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px',
                    background: avaliadoSel?.id === c.id ? 'var(--escalab-brand-tint)' : '#fff',
                    border: `1px solid ${avaliadoSel?.id === c.id ? 'var(--escalab-brand-soft)' : 'var(--escalab-line)'}`,
                    borderRadius: 10, cursor: 'pointer', transition: 'all .15s',
                  }}>
                    <Avatar nome={c.nome} cor={c.cor} iniciais={c.iniciais} size={36} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--escalab-ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.nome}</div>
                      <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginTop: 1 }}>{c.cargo}</div>
                    </div>
                    <Tag tone={statusTone[st]} size="xs">{statusLabel[st]}</Tag>
                  </div>
                );
              })}
            </div>

            {/* Formulário / placeholder */}
            {avaliadoSel ? (
              <Card pad={24}>
                {getStatus(avaliadoSel.id, abaAtiva) === 'concluida' ? (
                  <div style={{ textAlign: 'center', padding: '40px 0' }}>
                    <div style={{ color: 'var(--escalab-brand)', marginBottom: 12 }}><Icon name="check" size={40} /></div>
                    <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 6 }}>Avaliação concluída!</div>
                    <div style={{ fontSize: 13.5, color: 'var(--escalab-mute)' }}>A avaliação de {avaliadoSel.nome} já foi respondida neste ciclo.</div>
                  </div>
                ) : (
                  <FormAvaliacao
                    colab={avaliadoSel}
                    tipo={abaAtiva}
                    onClose={() => setAvaliadoSel(null)}
                    onSalvar={(dados) => {
                      setConcluidas(prev => [...prev, dados]);
                      setSucesso(`Avaliação de ${avaliadoSel.nome} salva com sucesso!`);
                      setAvaliadoSel(null);
                    }}
                  />
                )}
              </Card>
            ) : (
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--escalab-paper)', borderRadius: 12, border: '1px dashed var(--escalab-line)', minHeight: 240, color: 'var(--escalab-mute)', flexDirection: 'column', gap: 8 }}>
                <Icon name="clipboard" size={28} />
                <span style={{ fontSize: 14 }}>Selecione um colaborador para avaliar</span>
              </div>
            )}
          </div>
        )}

        {/* ── Avaliação de setor ── */}
        {abaAtiva === 'setor' && (
          <Card pad={28} style={{ maxWidth: 640, animation: 'fadeIn .2s' }}>
            <div style={{ marginBottom: 24 }}>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 4 }}>Avaliação Final</div>
              <h3 style={{ fontSize: 17, fontWeight: 700, margin: '0 0 6px' }}>Setor: {user.setor}</h3>
              <p style={{ margin: 0, fontSize: 13.5, color: 'var(--escalab-slate)', maxWidth: '100%' }}>Avalie o desempenho geral do setor no ciclo atual.</p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
              {perguntasSetor.map((q, i) => (
                <div key={i}>
                  <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--escalab-ink)', marginBottom: 10, lineHeight: 1.4 }}>{q}</div>
                  <ScaleSelect value={notaSetor[i]} onChange={v => setNotaSetor(s => ({ ...s, [i]: v }))} />
                </div>
              ))}
            </div>
            <div style={{ marginTop: 28, paddingTop: 20, borderTop: '1px solid var(--escalab-line)' }}>
              <Button variant="primary" icon="check" onClick={() => setSucesso('Avaliação de setor enviada com sucesso!')}
                disabled={Object.keys(notaSetor).length < perguntasSetor.length}>
                Enviar avaliação de setor
              </Button>
            </div>
          </Card>
        )}

      </div>

      {/* Botão intersetorial */}
      <div style={{ marginTop: 28, paddingTop: 20, borderTop: '1px solid var(--escalab-line)', display: 'flex', gap: 12, alignItems: 'center' }}>
        <div style={{ border: '1.5px dashed var(--escalab-mute)', borderRadius: 10, padding: '12px 20px', display: 'flex', gap: 12, alignItems: 'center', flex: 1, maxWidth: 480 }}>
          <Tag tone="amber" size="xs">Opcional</Tag>
          <span style={{ fontSize: 13.5, color: 'var(--escalab-slate)', flex: 1 }}>Avaliação intersetorial · colaboradores de outros setores</span>
          <Button variant="outline" size="sm" onClick={() => setShowIntersetorial(true)}>Preencher</Button>
        </div>
      </div>

      <Modal open={showIntersetorial} onClose={() => setShowIntersetorial(false)} title="Avaliação Intersetorial (Opcional)" width={500}>
        <Banner tone="info" style={{ marginBottom: 16 }}>
          Esta avaliação é anônima para o avaliado e visível apenas para o GC. Avalie colaboradores de outros setores com quem teve contato direto neste ciclo.
        </Banner>
        <p style={{ fontSize: 13.5, color: 'var(--escalab-mute)', maxWidth: '100%' }}>Funcionalidade em desenvolvimento.</p>
      </Modal>
    </div>
  );
};

window.ScreenAvaliacao = ScreenAvaliacao;