// Blocos da ficha do cliente no CRM ligados aos registros reais:
// - SugestaoCRM: a próxima ação calculada (CRMIndicadores.jsx), com atalho
//   para virar a "Próxima ação" do cliente.
// - NegociosCliente: orçamentos e ações do cliente numa lista só, do mais
//   recente para o mais antigo.

const NEGOCIO_STATUS_COR = { Aprovado: 'success', Enviado: 'warning', 'Em elaboração': 'default', Recusado: 'danger', Cancelado: 'danger', Realizado: 'success', Agendado: 'primary' };
const NEGOCIOS_VISIVEIS = 8;

function SugestaoCRM({ sugestao, onUsar }) {
  if (!sugestao) return null;
  const cor = { followup: '#C2410C', contato: '#B45309', recuperacao: '#B91C1C' }[sugestao.tipo];
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', borderRadius: DS.radius.md, background: '#FFFBF5', border: `1px solid ${cor}33`, boxShadow: `inset 3px 0 0 ${cor}`, flexWrap: 'wrap' }}>
      <Icon name="zap" size={18} color={cor} />
      <div style={{ flex: 1, minWidth: 160 }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Sugestão do sistema</div>
        <div style={{ fontSize: 13.5, fontWeight: 700, color: cor }}>{sugestao.texto}</div>
        <div style={{ fontSize: 12, color: DS.colors.textSec }}>{sugestao.detalhe}</div>
      </div>
      <Btn size="sm" variant="secondary" onClick={onUsar}>Usar como próxima ação</Btn>
    </div>
  );
}

function crmDiaBR(iso) {
  return iso ? new Date(String(iso).slice(0, 10) + 'T00:00:00').toLocaleDateString('pt-BR') : '—';
}

function negociosDoCliente(clientId, events, budgets) {
  const hoje = window.crmHojeISO();
  const orcs = budgets.filter(b => b.client_id === clientId).map(b => ({
    key: 'b' + b.id, tipo: 'Orçamento', titulo: [b.code, b.event_name].filter(Boolean).join(' · ') || 'Orçamento',
    data: String(b.aprovado_em || b.created_at || '').slice(0, 10), status: b.status, valor: Number(b.value) || 0,
  }));
  const acoes = events.filter(e => e.client_id === clientId).map(e => {
    const data = String(e.event_date || '').slice(0, 10);
    const status = e.status === 'Cancelado' ? 'Cancelado' : (data && data <= hoje ? 'Realizado' : 'Agendado');
    return { key: 'e' + e.id, tipo: 'Ação', titulo: e.name || 'Evento', data, status, valor: null };
  });
  return [...orcs, ...acoes].sort((a, b) => b.data.localeCompare(a.data));
}

function NegociosCliente({ clientId, events, budgets }) {
  const [verTodos, setVerTodos] = React.useState(false);
  const lista = React.useMemo(() => negociosDoCliente(clientId, events, budgets), [clientId, events, budgets]);
  const visiveis = verTodos ? lista : lista.slice(0, NEGOCIOS_VISIVEIS);
  const nOrc = lista.filter(x => x.tipo === 'Orçamento').length;

  return (
    <div style={{ padding: '18px 20px', background: '#F8FAFC', borderRadius: DS.radius.md, border: `1px solid ${DS.colors.border}` }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10, gap: 8 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text }}>Orçamentos e ações</div>
        <div style={{ fontSize: 11.5, color: DS.colors.textMuted }}>{nOrc} orçamentos · {lista.length - nOrc} ações</div>
      </div>
      {lista.length === 0 ? (
        <div style={{ fontSize: 12.5, color: DS.colors.textMuted, lineHeight: 1.6 }}>
          Nenhum orçamento ou evento vinculado a este cliente ainda.
        </div>
      ) : (
        <>
          {visiveis.map((n, i) => (
            <div key={n.key} style={{ display: 'grid', gridTemplateColumns: '74px minmax(0, 1fr) auto', gap: 10, alignItems: 'center', padding: '8px 0', borderTop: i ? `1px solid ${DS.colors.border}` : 'none' }}>
              <span style={{ fontSize: 11.5, color: DS.colors.textMuted }}>{crmDiaBR(n.data)}</span>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 12.5, fontWeight: 600, color: DS.colors.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{n.titulo}</div>
                <div style={{ fontSize: 11, color: DS.colors.textMuted }}>{n.tipo}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <Badge variant={NEGOCIO_STATUS_COR[n.status] || 'default'}>{n.status}</Badge>
                {n.valor !== null && <div style={{ fontSize: 12, fontWeight: 700, color: n.status === 'Aprovado' ? DS.colors.success : DS.colors.textSec, marginTop: 2 }}>R$ {Math.round(n.valor).toLocaleString('pt-BR')}</div>}
              </div>
            </div>
          ))}
          {lista.length > NEGOCIOS_VISIVEIS && (
            <button onClick={() => setVerTodos(v => !v)}
              style={{ marginTop: 6, background: 'none', border: 'none', color: DS.colors.primary, fontWeight: 700, fontSize: 12, cursor: 'pointer', padding: 0, fontFamily: 'inherit' }}>
              {verTodos ? 'Mostrar menos' : `Ver todos (${lista.length})`}
            </button>
          )}
        </>
      )}
    </div>
  );
}

Object.assign(window, { SugestaoCRM, NegociosCliente });