/* COBRANÇAS · Vista 4 — COBRANÇA PROACTIVA
   Agenda do dia (15 acções) + canal/tipo + preview template + acções de envio. */

const FinProactivaView = ({ ctx, onGoTo, onOpenChat }) => {
  const H = window.FinHelpers;
  const AGENDA = window.FIN_AGENDA_HOJE;
  const CLIENTES = window.FIN_CLIENTES;
  const TIPOS = window.FIN_AGENDA_TIPOS;
  const CANAIS = window.FIN_CANAIS;

  const [filter, setFilter] = React.useState('all');
  const [selected, setSelected] = React.useState(0);

  const filtered = AGENDA.filter(a => {
    if (filter === 'all') return true;
    if (filter === 'criticas') return a.critico;
    if (filter === 'pre') return a.tipo.startsWith('pre');
    if (filter === 'pos') return a.tipo.startsWith('pos');
    if (filter === 'cartas') return a.tipo === 'carta_formal' || a.tipo === 'tel_sugerido';
    return true;
  });

  const item = filtered[selected] || filtered[0];
  const cli = item ? CLIENTES.find(c => c.id === item.clienteId) : null;

  const totalValor = AGENDA.reduce((s, a) => s + a.valor, 0);
  const criticas = AGENDA.filter(a => a.critico).length;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>

      {/* top — KPIs + filtros */}
      <div className="card" style={{ padding: 14, marginBottom: 12, flexShrink: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div className="font-mono" style={{ fontSize: 9.5, color: 'var(--text-dim)', letterSpacing: '0.08em' }}>AGENDA · 28 ABR · QUARTA-FEIRA</div>
            <h3 className="font-display" style={{ margin: '4px 0 0', fontSize: 22, fontWeight: 600 }}>
              {AGENDA.length} cobranças hoje <span style={{ color: 'var(--text-muted)', fontWeight: 400, fontSize: 14 }}>· {H.fmtEUR(totalValor)} em jogo</span>
            </h3>
          </div>
          <div style={{ display: 'flex', gap: 14 }}>
            <Stat label="Críticas" v={criticas} alert={criticas > 0} />
            <Stat label="WhatsApp" v={AGENDA.filter(a => a.canal === 'wa').length} />
            <Stat label="Email" v={AGENDA.filter(a => a.canal === 'email').length} />
            <Stat label="Telefone" v={AGENDA.filter(a => a.canal === 'tel').length} />
            <Stat label="Carta" v={AGENDA.filter(a => a.canal === 'carta').length} />
          </div>
        </div>

        {/* digi briefing */}
        <div className="ai-surface" style={{ padding: 12, borderRadius: 5, marginTop: 14, borderLeft: '2px solid var(--ai-500)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <span className="ai-chip"><span className="ai-dot" />Digi sugere ordem</span>
          </div>
          <div style={{ fontSize: 12.5, lineHeight: 1.55 }}>
            Começa pelas <strong>5 críticas</strong> (Meta Print, GráficaSul, VisualMax, Rotulación, Cartel Madrid). Depois <strong>follow-ups pré-vencimento</strong> (4 emails Eurofactor, 1 clique cada). Posso enviar em lote — 12 minutos para tudo, salvo as 3 cartas formais que precisam de revisão tua.
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
            <button className="btn btn-xs btn-ai">Enviar lote (12 itens) →</button>
            <button className="btn btn-xs">Ver cartas para revisão (3)</button>
            <button className="btn btn-xs" onClick={onOpenChat}>Falar c/ Digi</button>
          </div>
        </div>

        {/* chips */}
        <div style={{ display: 'flex', gap: 6, marginTop: 12, flexWrap: 'wrap' }}>
          <Chip active={filter === 'all'}      onClick={() => { setFilter('all'); setSelected(0); }}      label="Tudo"        count={AGENDA.length} />
          <Chip active={filter === 'criticas'} onClick={() => { setFilter('criticas'); setSelected(0); }} label="Críticas"    count={AGENDA.filter(a => a.critico).length} color="var(--danger)" />
          <Chip active={filter === 'pre'}      onClick={() => { setFilter('pre'); setSelected(0); }}      label="Pré-venc."   count={AGENDA.filter(a => a.tipo.startsWith('pre')).length} color="#3B82F6" />
          <Chip active={filter === 'pos'}      onClick={() => { setFilter('pos'); setSelected(0); }}      label="Pós-venc."   count={AGENDA.filter(a => a.tipo.startsWith('pos')).length} color="#F59E0B" />
          <Chip active={filter === 'cartas'}   onClick={() => { setFilter('cartas'); setSelected(0); }}   label="Cartas / Tel." count={AGENDA.filter(a => a.tipo === 'carta_formal' || a.tipo === 'tel_sugerido').length} color="#A855F7" />
        </div>
      </div>

      {/* lista + preview */}
      <div style={{ display: 'grid', gridTemplateColumns: '460px minmax(0, 1fr)', gap: 12, flex: 1, minHeight: 0 }}>

        {/* lista agenda */}
        <div className="card scrollbar" style={{ overflowY: 'auto', padding: 0, minHeight: 0 }}>
          {filtered.map((a, i) => {
            const c = CLIENTES.find(x => x.id === a.clienteId);
            const t = TIPOS[a.tipo];
            return (
              <button key={i} onClick={() => setSelected(i)} style={{
                width: '100%', textAlign: 'left',
                padding: '12px 14px',
                background: selected === i ? 'color-mix(in oklch, var(--ai-500) 8%, transparent)' : 'transparent',
                borderLeft: selected === i ? '2px solid var(--ai-500)' : '2px solid transparent',
                borderBottom: '1px solid var(--border)',
                cursor: 'pointer',
                display: 'grid', gridTemplateColumns: '20px 1fr auto', gap: 10, alignItems: 'flex-start',
              }}>
                <div style={{ width: 6, height: '100%', minHeight: 32, borderRadius: 3, background: t.color, marginTop: 2 }} />
                <div style={{ minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
                    <span style={{ fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c?.nome}</span>
                    {a.critico && <span style={{ fontSize: 9.5, padding: '0 5px', borderRadius: 3, background: 'color-mix(in oklch, var(--danger) 14%, transparent)', color: 'var(--danger)', fontWeight: 700, fontFamily: 'var(--font-mono)' }}>CRÍTICO</span>}
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--text-muted)', display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
                    <span style={{ color: t.color, fontWeight: 600, fontFamily: 'var(--font-mono)', fontSize: 10 }}>{t.short}</span>
                    <span>·</span>
                    <span>{CANAIS[a.canal].icon} {CANAIS[a.canal].label}</span>
                    <span>·</span>
                    <span className="font-mono">{a.idioma}</span>
                  </div>
                  {a.nota && <div style={{ fontSize: 10.5, color: 'var(--danger)', marginTop: 3, fontFamily: 'var(--font-mono)' }}>⚠ {a.nota}</div>}
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div className="font-mono" style={{ fontSize: 12, fontWeight: 600 }}>{H.fmtEURcompact(a.valor)}</div>
                  <div className="font-mono" style={{ fontSize: 10, color: H.idadeColor(a.idade), marginTop: 2 }}>{a.idade < 0 ? 'em ' + Math.abs(a.idade) + 'd' : a.idade + 'd'}</div>
                </div>
              </button>
            );
          })}
        </div>

        {/* preview template */}
        {item && cli && (
          <PreviewTemplate item={item} cliente={cli} tipo={TIPOS[item.tipo]} canal={CANAIS[item.canal]} />
        )}
      </div>
    </div>
  );
};

// ─── preview ──────────────────────────────────────────────────────

const PreviewTemplate = ({ item, cliente, tipo, canal }) => {
  const H = window.FinHelpers;
  const isES = item.idioma === 'ES';

  // Templates conforme tipo
  let subject, body;
  if (item.tipo === 'pre_venc_7d') {
    subject = isES ? `Recordatorio · vencimiento ${Math.abs(item.idade)} días — ${cliente.nome}` : `Lembrete · vencimento em ${Math.abs(item.idade)} dias — ${cliente.nome}`;
    body = isES
      ? `Estimado ${cliente.accountManager.split(' ')[0]},\n\nLe escribimos para recordarle que la factura ${cliente.docs?.[0]?.id || 'XXXX'} de ${H.fmtEUR(item.valor)} vence en ${Math.abs(item.idade)} días.\n\nModo de pago acordado: Eurofactor. Si necesita ajustar la fecha, responda a este correo.\n\nUn saludo,\nDigidelta · Cobranzas`
      : `Caro(a) ${cliente.accountManager.split(' ')[0]},\n\nEscrevemos para o recordar que a factura ${cliente.docs?.[0]?.id || 'XXXX'} de ${H.fmtEUR(item.valor)} vence em ${Math.abs(item.idade)} dias.\n\nModo de pagamento acordado: Eurofactor. Caso precise reagendar, basta responder a este email.\n\nCumprimentos,\nDigidelta · Cobranças`;
  } else if (item.tipo === 'pos_venc_7d' || item.tipo === 'pos_venc_30d') {
    const dias = item.tipo === 'pos_venc_7d' ? '7' : '30';
    subject = isES ? `Factura vencida hace ${item.idade} días — ${cliente.nome}` : `Factura vencida há ${item.idade} dias — ${cliente.nome}`;
    body = isES
      ? `Estimado cliente,\n\nLa factura está pendiente desde hace ${item.idade} días. Por favor confirme la fecha de pago de los ${H.fmtEUR(item.valor)} en abierto.\n\nGracias,\nDigidelta`
      : `Caro(a) cliente,\n\nA factura encontra-se vencida há ${item.idade} dias. Pedimos a confirmação da data de pagamento dos ${H.fmtEUR(item.valor)} em aberto.\n\nObrigado,\nDigidelta`;
  } else if (item.tipo === 'carta_formal') {
    subject = `Carta formal pré-litígio — ${cliente.nome}`;
    body = `EXM.ª SR.ª/ EXM.O SR.,\n\nVimos pelo presente notificar V. Exa. de que se encontra em mora pelo valor de ${H.fmtEUR(item.valor)}, vencido há ${item.idade} dias.\n\nCaso o pagamento não seja regularizado nos próximos 8 dias úteis, será o presente assunto encaminhado para o departamento jurídico desta empresa.\n\nCom os melhores cumprimentos,\nPatrícia Mota\nDigidelta · Crédito e Cobranças`;
  } else if (item.tipo === 'tel_sugerido') {
    subject = 'Telefonema sugerido';
    body = `Pontos a falar:\n\n• Saldo pendente: ${H.fmtEUR(item.valor)} a ${item.idade}d${item.nota ? ' · ' + item.nota : ''}\n• Histórico recente: ${cliente.suspenso ? 'cliente em suspensão FAL · acordo activo' : 'cliente regular'}\n• Account manager interno: ${cliente.accountManager}\n• Sugestão Digi: ${cliente.suspenso ? 'confirmar próxima parcela do acordo' : 'pedir compromisso de data específica'}\n\nDepois do telefonema, regista o resultado e a Digi actualiza o histórico do cliente.`;
  }

  return (
    <div className="card scrollbar" style={{ padding: 0, overflow: 'auto', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
      {/* header */}
      <div style={{ padding: 14, borderBottom: '1px solid var(--border)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
          <span className="font-mono" style={{ fontSize: 10, padding: '2px 6px', borderRadius: 3, background: 'color-mix(in oklch, ' + tipo.color + ' 14%, transparent)', color: tipo.color, fontWeight: 600, border: '1px solid color-mix(in oklch, ' + tipo.color + ' 30%, transparent)' }}>{tipo.label}</span>
          <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>· canal: <strong>{canal.icon} {canal.label}</strong></span>
          <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>· idioma: <strong>{item.idioma}</strong></span>
        </div>
        <div style={{ fontSize: 13.5, fontWeight: 600 }}>{subject}</div>
      </div>

      {/* body */}
      <div style={{ flex: 1, padding: 16, fontSize: 13, lineHeight: 1.65, whiteSpace: 'pre-wrap', fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>
        {body}
      </div>

      {/* footer · acções */}
      <div style={{ padding: 14, borderTop: '1px solid var(--border)', display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
        <button className="btn btn-sm btn-ai">{canal.icon} Enviar agora</button>
        <button className="btn btn-sm">Editar antes</button>
        <button className="btn btn-sm">Adiar 24h</button>
        <button className="btn btn-sm">Marcar como contactado</button>
        <span style={{ flex: 1 }} />
        <span style={{ fontSize: 10.5, color: 'var(--text-dim)' }}>Tom: cordial · CC: {cliente.accountManager}</span>
      </div>
    </div>
  );
};

// shared
const Stat = ({ label, v, alert }) => (
  <div>
    <div className="font-mono" style={{ fontSize: 9.5, color: 'var(--text-dim)', letterSpacing: '0.06em' }}>{label}</div>
    <div className="font-display" style={{ fontSize: 16, fontWeight: 600, color: alert ? 'var(--danger)' : 'var(--text)', marginTop: 1 }}>{v}</div>
  </div>
);

const Chip = ({ active, label, count, color, onClick }) => (
  <button onClick={onClick} className="font-mono" style={{
    fontSize: 11, padding: '4px 10px', borderRadius: 999,
    background: active ? (color || 'var(--ai-500)') : 'var(--bg-sunken)',
    color: active ? '#fff' : (color || 'var(--text)'),
    border: '1px solid ' + (active ? 'transparent' : 'var(--border)'),
    cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center', gap: 6,
  }}>
    {label}
    {count != null && <span style={{
      fontSize: 9.5, padding: '0 5px', borderRadius: 9,
      background: active ? 'rgba(255,255,255,0.22)' : 'var(--bg-elev)',
    }}>{count}</span>}
  </button>
);

window.FinProactivaView = FinProactivaView;