// Historico e ranking do profissional — orcamento 310, itens 26 e 28.
//
// Nenhum numero daqui e guardado. Tudo e conta feita na hora sobre as escalas
// e as avaliacoes que ja existem (migration 047). Uma tabela de estatisticas
// do freelancer seria um segundo lugar para a mesma verdade, e bastaria um
// gatilho falhar para o ranking passar a mentir sobre a operacao.
//
// "USO APENAS INTERNO" (item 28)
//   As duas funcoes do banco so devolvem linha para quem e da equipe. O
//   promotor nao descobre a propria posicao nem a dos colegas, e o cliente
//   nao tem caminho nenhum ate aqui.

const FD_DATA_BR = iso => iso ? String(iso).split('-').reverse().join('/') : '—';

function FDNumero({ valor, rotulo, cor, dica }) {
  return (
    <div title={dica || ''} style={{ background: '#F8FAFC', borderRadius: DS.radius.sm, padding: '12px 16px', minWidth: 108 }}>
      <div style={{ fontSize: 20, fontWeight: 800, color: cor || DS.colors.text }}>{valor}</div>
      <div style={{ fontSize: 11, color: DS.colors.textSec }}>{rotulo}</div>
    </div>
  );
}

// =================================================
// ITEM 26 — historico dentro do cadastro do freelancer
// =================================================
function HistoricoProfissionalCard({ freelancerId }) {
  const [h, setH] = React.useState(null);
  const [carregando, setCarregando] = React.useState(true);

  React.useEffect(() => {
    if (!freelancerId) return;
    let vivo = true;
    sb.rpc('historico_do_profissional', { p_freelancer_id: freelancerId }).then(({ data, error }) => {
      if (!vivo) return;
      if (error) console.error('[HistoricoProfissionalCard] Supabase error:', error);
      setH((data && data[0]) || null);
      setCarregando(false);
    });
    return () => { vivo = false; };
  }, [freelancerId]);

  if (carregando || !h) return null;

  const pct = v => (v === null || v === undefined ? '—' : Number(v) + '%');

  return (
    <Card style={{ padding: 24 }}>
      <div style={{ fontSize: 14, fontWeight: 700, color: DS.colors.text, marginBottom: 16 }}>Histórico de ações</div>

      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
        <FDNumero valor={h.acoes_realizadas} rotulo="ações realizadas"
                  dica="Ações com check-out registrado" />
        <FDNumero valor={h.check_ins} rotulo="check-ins" />
        <FDNumero valor={h.faltas} rotulo={h.faltas === 1 ? 'falta' : 'faltas'}
                  cor={h.faltas > 0 ? '#B91C1C' : undefined} />
        <FDNumero valor={h.atrasos} rotulo={h.atrasos === 1 ? 'atraso' : 'atrasos'}
                  cor={h.atrasos > 0 ? '#B45309' : undefined}
                  dica="Check-in mais de 15 minutos depois do horário da ação" />
        <FDNumero valor={pct(h.taxa_confirmacao)} rotulo="confirmação"
                  dica="Escalas confirmadas ou cumpridas, sobre tudo que foi oferecido" />
        <FDNumero valor={h.avaliacao_media ? '⭐ ' + Number(h.avaliacao_media).toFixed(2) : '—'}
                  rotulo={h.avaliacoes > 0 ? h.avaliacoes + (h.avaliacoes === 1 ? ' avaliação' : ' avaliações') : 'sem avaliação'} />
      </div>

      <div style={{ fontSize: 12, color: DS.colors.textSec, marginTop: 14 }}>
        {h.ultima_acao_nome
          ? <>Última ação: <b style={{ color: DS.colors.text }}>{h.ultima_acao_nome}</b> em {FD_DATA_BR(h.ultima_acao_data)}.</>
          : 'Ainda não participou de nenhuma ação.'}
        {h.recusas > 0 ? ' ' + h.recusas + (h.recusas === 1 ? ' recusa registrada.' : ' recusas registradas.') : ''}
      </div>
    </Card>
  );
}

// =================================================
// ITEM 28 — ranking interno
// =================================================
// Os cinco criterios que o orcamento pede, cada um como uma ordenacao da
// mesma lista. Cinco telas separadas mostrariam os mesmos numeros com cinco
// oportunidades de discordarem entre si.
const FD_CRITERIOS = [
  { id: 'realizadas',   rotulo: 'Mais ações realizadas', campo: 'acoes_realizadas',  sufixo: '' },
  { id: 'ativos',       rotulo: 'Mais ativos',           campo: 'acoes_escaladas',   sufixo: '' },
  { id: 'avaliacao',    rotulo: 'Melhor avaliação',      campo: 'avaliacao_media',   sufixo: '' },
  { id: 'pontualidade', rotulo: 'Melhor pontualidade',   campo: 'taxa_pontualidade', sufixo: '%' },
  { id: 'confirmacao',  rotulo: 'Maior confirmação',     campo: 'taxa_confirmacao',  sufixo: '%' },
];

const FD_PERIODOS = [
  { id: '90',   rotulo: 'Últimos 90 dias', dias: 90 },
  { id: '365',  rotulo: 'Último ano',      dias: 365 },
  { id: 'tudo', rotulo: 'Tudo',            dias: null },
];

function RankingProfissionais() {
  const [linhas, setLinhas] = React.useState([]);
  const [criterio, setCriterio] = React.useState('realizadas');
  const [periodo, setPeriodo] = React.useState('90');
  const [carregando, setCarregando] = React.useState(true);

  React.useEffect(() => {
    let vivo = true;
    setCarregando(true);
    const p = FD_PERIODOS.find(x => x.id === periodo);
    let desde = null;
    if (p && p.dias) {
      const d = new Date();
      d.setDate(d.getDate() - p.dias);
      desde = d.toISOString().slice(0, 10);
    }
    sb.rpc('ranking_profissionais', { p_desde: desde }).then(({ data, error }) => {
      if (!vivo) return;
      if (error) console.error('[RankingProfissionais] Supabase error:', error);
      setLinhas(data || []);
      setCarregando(false);
    });
    return () => { vivo = false; };
  }, [periodo]);

  const def = FD_CRITERIOS.find(c => c.id === criterio) || FD_CRITERIOS[0];

  const ordenadas = React.useMemo(() => {
    const copia = linhas.slice();
    copia.sort((a, b) => {
      const va = a[def.campo], vb = b[def.campo];
      // Quem nao tem o numero vai para o fim, e nao para o topo com um zero
      // que nunca teve. Sem isto, "melhor avaliacao" comecaria por quem nunca
      // foi avaliado.
      if (va === null && vb === null) return 0;
      if (va === null) return 1;
      if (vb === null) return -1;
      return Number(vb) - Number(va);
    });
    return copia;
  }, [linhas, def]);

  const valorDe = l => {
    const v = l[def.campo];
    if (v === null || v === undefined) return '—';
    return (def.campo === 'avaliacao_media' ? '⭐ ' + Number(v).toFixed(2) : Number(v) + def.sufixo);
  };

  const visiveis = ordenadas.slice(0, 15);

  return (
    <Card style={{ padding: 24, marginBottom: 20 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap', marginBottom: 14 }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: DS.colors.text }}>Ranking interno</div>
          <div style={{ fontSize: 11.5, color: DS.colors.textSec }}>Uso interno — não aparece para o cliente nem para a equipe de campo.</div>
        </div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {FD_PERIODOS.map(p => (
            <button key={p.id} onClick={() => setPeriodo(p.id)}
              style={{ border: '1px solid ' + (periodo === p.id ? DS.colors.primary : DS.colors.border),
                       background: periodo === p.id ? DS.colors.primaryLight : '#fff',
                       color: periodo === p.id ? DS.colors.primary : DS.colors.textSec,
                       borderRadius: 999, padding: '4px 12px', fontSize: 11.5, fontWeight: 700,
                       fontFamily: 'inherit', cursor: 'pointer' }}>
              {p.rotulo}
            </button>
          ))}
        </div>
      </div>

      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 14 }}>
        {FD_CRITERIOS.map(c => (
          <button key={c.id} onClick={() => setCriterio(c.id)}
            style={{ border: 'none', background: criterio === c.id ? DS.colors.primary : '#F1F5F9',
                     color: criterio === c.id ? '#fff' : DS.colors.textSec,
                     borderRadius: 8, padding: '6px 12px', fontSize: 12, fontWeight: 700,
                     fontFamily: 'inherit', cursor: 'pointer' }}>
            {c.rotulo}
          </button>
        ))}
      </div>

      {carregando ? <Spinner /> : visiveis.length === 0 ? (
        <div style={{ fontSize: 13, color: DS.colors.textSec }}>Nenhuma escala no período escolhido.</div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {visiveis.map((l, i) => (
            <div key={l.freelancer_id}
              style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 4px',
                       borderBottom: i < visiveis.length - 1 ? '1px solid ' + DS.colors.border : 'none' }}>
              <span style={{ width: 22, fontSize: 12, fontWeight: 800, color: DS.colors.textMuted }}>{i + 1}º</span>
              <span style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text, flex: 1, minWidth: 0,
                             overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{l.nome}</span>
              <span style={{ fontSize: 11, color: DS.colors.textMuted }}>
                {l.acoes_realizadas} {l.acoes_realizadas === 1 ? 'ação' : 'ações'}
                {l.faltas > 0 ? ' · ' + l.faltas + (l.faltas === 1 ? ' falta' : ' faltas') : ''}
              </span>
              <b style={{ fontSize: 13, color: DS.colors.text, minWidth: 64, textAlign: 'right' }}>{valorDe(l)}</b>
            </div>
          ))}
          {ordenadas.length > visiveis.length && (
            <div style={{ fontSize: 11, color: DS.colors.textMuted, paddingTop: 6 }}>
              Mostrando os 15 primeiros de {ordenadas.length}.
            </div>
          )}
        </div>
      )}
    </Card>
  );
}

Object.assign(window, { HistoricoProfissionalCard, RankingProfissionais });