/* Daily Briefing Carteira V3 — perdas, pipeline em curso e contactos. */

const bcv3Fmt = v => {
  const n = Math.abs(Number(v) || 0);
  const s = n >= 1000 ? (n / 1000).toFixed(1).replace('.', ',') + 'k' : String(Math.round(n));
  return (Number(v) < 0 ? '−' : '') + s + '€';
};

const BCV3 = {
  green: 'var(--dgd-green-700,#1F8A52)',
  red: 'var(--dgd-red-700,#B53B3B)',
  amber: 'var(--dgd-pumpkin-500,#FF9A40)',
  blue: 'var(--dgd-primary-500,#61A9FF)',
  fg1: 'var(--dgd-fg-1)', fg2: 'var(--dgd-fg-2)', fg3: 'var(--dgd-fg-3)',
  border: 'var(--dgd-border-1)', surf: 'var(--dgd-bg-surface)', app: 'var(--dgd-bg-app)',
};

const bcv3Click = { cursor: 'pointer', color: 'var(--dgd-primary-500,#61A9FF)', textDecoration: 'underline dotted', fontWeight: 600 };
const bcv3Th = { textAlign: 'left', padding: '6px 8px', fontSize: 10, color: BCV3.fg3, fontFamily: 'var(--dgd-font-mono)', fontWeight: 600, textTransform: 'uppercase' };

const BCV3_CONTACTO = {
  sem_nota: { c: BCV3.red, l: 'Sem nota' },
  tentativa: { c: BCV3.amber, l: 'Tentativa' },
  fraca: { c: BCV3.amber, l: 'Fraca' },
  seguimento: { c: BCV3.green, l: 'Seguimento' },
};

function Bcv3Card({ n, color, title, children }) {
  return (
    <div style={{ background: BCV3.surf, border: `1px solid ${BCV3.border}`, borderRadius: 8, padding: '20px 24px', marginBottom: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <span style={{ width: 22, height: 22, borderRadius: 6, background: color, color: '#fff', fontSize: 12, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{n}</span>
        <span style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', color: BCV3.fg3, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{title}</span>
      </div>
      {children}
    </div>
  );
}

function Bcv3Urg({ u }) {
  const cfg = { hoje: { c: BCV3.red, l: 'HOJE' }, semana: { c: BCV3.amber, l: 'SEMANA' }, monitorizar: { c: BCV3.fg3, l: 'MONITOR' } }[u] || { c: BCV3.fg3, l: '' };
  if (!cfg.l) return null;
  return <span style={{ fontSize: 9, fontWeight: 700, padding: '2px 6px', borderRadius: 3, letterSpacing: '0.06em', background: `color-mix(in oklch, ${cfg.c} 15%, transparent)`, color: cfg.c }}>{cfg.l}</span>;
}

function ScreenDailyBriefingCarteiraV3({ vendedorId, userName }) {
  const [state, setState] = React.useState({ data: null, loading: false, error: null });
  const [selectedCliente, setSelectedCliente] = React.useState(null);

  const fetchBrief = React.useCallback((force = false) => {
    if (!vendedorId) return;
    setState(s => ({ data: force ? s.data : null, loading: true, error: null }));
    fetch(`/api/comercial/brief-carteira-v3/${encodeURIComponent(vendedorId)}${force ? '?force=true' : ''}`)
      .then(r => r.json())
      .then(json => {
        if (json.error) throw new Error(json.error);
        setState({ data: json, loading: false, error: null });
      })
      .catch(err => setState({ data: null, loading: false, error: err.message }));
  }, [vendedorId]);

  React.useEffect(() => { fetchBrief(false); }, [fetchBrief]);

  if (!vendedorId) return <div style={{ padding: 32, color: BCV3.fg3, fontSize: 13 }}>Sem vendedor seleccionado.</div>;

  const { data, loading, error } = state;
  const brief = data?.brief || null;
  const m = data?.metricas || {};
  const act = m.actividade || {};
  const today = new Date().toLocaleDateString('pt-PT', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
  const first = (userName || '').split(' ')[0];
  const contactoValor = act.sem_dia_anterior ? '—' : `${act.feitos || 0}/${act.atribuídos || 0}`;

  return (
    <div className="scrollbar" style={{ height: '100%', overflowY: 'auto', padding: '28px 32px 80px' }}>
      {(() => { const M = window.ProspectClienteModal; return M && selectedCliente ? <M nome={selectedCliente} userName={userName} onClose={() => setSelectedCliente(null)} /> : null; })()}
      <div style={{ background: BCV3.surf, borderRadius: 10, padding: '24px 28px', marginBottom: 24, boxShadow: 'var(--dgd-shadow-card)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'flex-start' }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', letterSpacing: '0.1em', textTransform: 'uppercase', color: BCV3.fg3, marginBottom: 6 }}>COMERCIAL · CONSUMÍVEIS · CARTEIRA V3</div>
            <h1 style={{ margin: 0, fontSize: 24, fontWeight: 700, fontFamily: 'var(--font-display,Montserrat,sans-serif)', color: BCV3.fg1, lineHeight: 1.2, letterSpacing: '-0.01em' }}>
              {first ? `${first}, ` : ''}{brief?.hero?.titulo || 'perdas de venda, de margem e oportunidades em curso.'}
            </h1>
            {brief?.hero?.subtitulo && <p style={{ margin: '8px 0 0', fontSize: 13, color: BCV3.fg2, lineHeight: 1.6 }}>{brief.hero.subtitulo}</p>}
            <div style={{ marginTop: 10, display: 'inline-flex', alignItems: 'center', gap: 8, padding: '4px 12px', background: 'color-mix(in oklch, var(--dgd-primary-500,#61A9FF) 8%, transparent)', borderRadius: 4, fontSize: 10, fontFamily: 'var(--dgd-font-mono)', letterSpacing: '0.12em', color: BCV3.blue }}>⚡ DIGI · AGENTE AI DIGIDELTA</div>
          </div>
          <div style={{ textAlign: 'right', flexShrink: 0 }}>
            <button onClick={() => fetchBrief(true)} disabled={loading}
              style={{ padding: '8px 16px', fontSize: 12, borderRadius: 6, border: `1px solid ${BCV3.border}`, background: BCV3.app, color: BCV3.fg2, cursor: loading ? 'not-allowed' : 'pointer', opacity: loading ? 0.5 : 1 }}>
              {loading ? 'A gerar…' : 'Regenerar'}
            </button>
            <div style={{ fontSize: 11, color: BCV3.fg3, marginTop: 6 }}>{today}</div>
          </div>
        </div>
      </div>

      {loading && !data && <div style={{ padding: 48, textAlign: 'center', color: BCV3.fg3, fontSize: 13 }}>A preparar o briefing…</div>}
      {error && <div style={{ padding: 14, borderRadius: 8, color: BCV3.red, fontSize: 13, marginBottom: 16 }}>{error}</div>}

      {data && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 12, marginBottom: 20 }}>
          {[
            ['Venda em risco', bcv3Fmt(m.valor_venda_em_risco), BCV3.red, m.cards?.venda],
            ['Margem em risco', bcv3Fmt(m.valor_margem_em_risco), BCV3.amber, m.cards?.margem],
            ['Contactos ontem', contactoValor, act.pct == null ? BCV3.fg2 : (act.pct >= 60 ? BCV3.green : BCV3.amber), m.cards?.contactos],
            ['Pipeline em curso', m.n_pipeline || 0, BCV3.blue, m.cards?.pipeline],
          ].map(([label, value, color, frase]) => (
            <div key={label} style={{ background: BCV3.surf, border: `1px solid ${BCV3.border}`, borderRadius: 8, padding: '14px 16px' }}>
              <div style={{ fontSize: 10, color: BCV3.fg3, fontFamily: 'var(--dgd-font-mono)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>{label}</div>
              <div style={{ fontSize: 22, fontWeight: 700, color, fontFamily: 'var(--font-display,Montserrat,sans-serif)' }}>{value}{label === 'Contactos ontem' && act.pct != null ? <span style={{ fontSize: 13, marginLeft: 6 }}>{act.pct}%</span> : null}</div>
              {frase && <div style={{ fontSize: 12, color: BCV3.fg2, marginTop: 6, lineHeight: 1.45 }}>{frase}</div>}
            </div>
          ))}
        </div>
      )}

      {brief?.bloco4?.regra_do_dia && (
        <div style={{ marginBottom: 16, padding: '12px 16px', borderRadius: 8, borderLeft: `3px solid ${BCV3.blue}`, background: BCV3.surf, fontSize: 13, color: BCV3.fg1, lineHeight: 1.55 }}>
          <div style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', letterSpacing: '0.1em', color: BCV3.fg3, marginBottom: 4 }}>REGRA DO DIA</div>
          {brief.bloco4.regra_do_dia}
        </div>
      )}

      {data && (
        <Bcv3Card n="·" color={BCV3.fg2} title="CONTACTOS — ATRIBUÍDOS E FEITOS">
          {brief?.contactos?.narrativa && <p style={{ margin: '0 0 12px', fontSize: 13, color: BCV3.fg2, lineHeight: 1.6 }}>{brief.contactos.narrativa}</p>}
          <p style={{ margin: '0 0 12px', fontSize: 12, color: BCV3.amber, lineHeight: 1.5 }}>Não te esqueças de colocar data para a próxima interação.</p>
          {act.sem_dia_anterior
            ? <div style={{ fontSize: 12, color: BCV3.fg3, marginBottom: 12 }}>Ainda não há briefing de ontem para comparar. Os contactos de hoje ficam guardados e amanhã aparece a execução.</div>
            : <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginBottom: 12, fontSize: 12, color: BCV3.fg2 }}>
                <span>Atribuídos {act.atribuídos}</span>
                <span>Com nota {act.feitos}</span>
                <span>Seguimento {act.seguimento}</span>
                <span>Fracas {act.fracas}</span>
                <span>Tentativas {act.tentativas}</span>
                <span>Sem nota {act.sem_nota}</span>
              </div>}
          {(act.linhas || []).length > 0 && (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 14 }}>
              {act.linhas.map((l, i) => {
                const cfg = BCV3_CONTACTO[l.estado] || BCV3_CONTACTO.sem_nota;
                return (
                  <span key={i} style={{ fontSize: 12, padding: '4px 8px', borderRadius: 4, background: `color-mix(in oklch, ${cfg.c} 12%, transparent)`, color: cfg.c }}>
                    <span style={bcv3Click} onClick={() => setSelectedCliente(l.cliente)}>{l.cliente}</span>
                    <span style={{ marginLeft: 6, fontSize: 10 }}>{cfg.l}</span>
                  </span>
                );
              })}
            </div>
          )}
          <div style={{ fontSize: 10, fontFamily: 'var(--dgd-font-mono)', letterSpacing: '0.08em', color: BCV3.fg3, marginBottom: 6 }}>ATRIBUÍDOS HOJE</div>
          {(m.contactos_hoje || []).length === 0
            ? <div style={{ fontSize: 12, color: BCV3.fg3 }}>Sem contactos atribuídos para hoje.</div>
            : <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {m.contactos_hoje.map((nome, i) => (
                  <span key={i} style={bcv3Click} onClick={() => setSelectedCliente(nome)}>{nome}</span>
                ))}
              </div>}
        </Bcv3Card>
      )}

      {data && (
        <Bcv3Card n={1} color={BCV3.red} title="PERDAS DE VENDA">
          {brief?.bloco1?.narrativa && <p style={{ margin: '0 0 12px', fontSize: 13, color: BCV3.fg2, lineHeight: 1.6 }}>{brief.bloco1.narrativa}</p>}
          {(m.perdas_venda || []).length === 0
            ? <div style={{ fontSize: 12, color: BCV3.fg3 }}>Sem perdas relevantes neste período.</div>
            : <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead><tr>{['Cliente', 'Tipo', anoLabel(m), 'Este ano', 'Desvio', 'O que se passa', 'Argumento'].map(h => <th key={h} style={bcv3Th}>{h}</th>)}</tr></thead>
                <tbody>
                  {m.perdas_venda.map((r, i) => (
                    <tr key={i} style={{ borderTop: `1px solid ${BCV3.border}`, verticalAlign: 'top' }}>
                      <td style={{ padding: '8px' }}><span style={bcv3Click} onClick={() => setSelectedCliente(r.cliente)}>{r.cliente}</span><div style={{ marginTop: 4 }}><Bcv3Urg u={r.urgencia} /></div></td>
                      <td style={{ padding: '8px', fontSize: 11, color: r.tipo === 'ausente' ? BCV3.red : BCV3.amber }}>{r.tipo === 'ausente' ? 'Ausente' : 'Em queda'}</td>
                      <td style={{ padding: '8px', fontSize: 12, color: BCV3.fg3 }}>{bcv3Fmt(r.val_ant)}</td>
                      <td style={{ padding: '8px', fontSize: 12 }}>{bcv3Fmt(r.val_ano)}</td>
                      <td style={{ padding: '8px', fontSize: 12, fontWeight: 700, color: BCV3.red, whiteSpace: 'nowrap' }}>{bcv3Fmt(r.desvio_eur)} · {r.var_pct}%</td>
                      <td style={{ padding: '8px', fontSize: 12, color: BCV3.fg2, lineHeight: 1.45, maxWidth: 240 }}>{r.situacao}</td>
                      <td style={{ padding: '8px', fontSize: 12, color: BCV3.fg1, lineHeight: 1.45, maxWidth: 260 }}>{r.argumento}</td>
                    </tr>
                  ))}
                </tbody>
              </table>}
        </Bcv3Card>
      )}

      {data && (
        <Bcv3Card n={2} color={BCV3.amber} title="PERDAS DE MARGEM">
          {brief?.bloco2?.narrativa && <p style={{ margin: '0 0 12px', fontSize: 13, color: BCV3.fg2, lineHeight: 1.6 }}>{brief.bloco2.narrativa}</p>}
          {(m.perdas_margem || []).length === 0
            ? <div style={{ fontSize: 12, color: BCV3.fg3 }}>Sem perdas de margem relevantes.</div>
            : <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead><tr>{['Cliente', 'Margem ano ant.', 'Margem este ano', 'Desvio', 'O que se passa', 'Argumento'].map(h => <th key={h} style={bcv3Th}>{h}</th>)}</tr></thead>
                <tbody>
                  {m.perdas_margem.map((r, i) => (
                    <tr key={i} style={{ borderTop: `1px solid ${BCV3.border}`, verticalAlign: 'top' }}>
                      <td style={{ padding: '8px' }}><span style={bcv3Click} onClick={() => setSelectedCliente(r.cliente)}>{r.cliente}</span><div style={{ marginTop: 4 }}><Bcv3Urg u={r.urgencia} /></div></td>
                      <td style={{ padding: '8px', fontSize: 12, color: BCV3.fg3, whiteSpace: 'nowrap' }}>{bcv3Fmt(r.marg_ant)}{r.pct_ant != null ? ` · ${r.pct_ant}%` : ''}</td>
                      <td style={{ padding: '8px', fontSize: 12, whiteSpace: 'nowrap' }}>{bcv3Fmt(r.marg_ano)}{r.pct_ano != null ? ` · ${r.pct_ano}%` : ''}</td>
                      <td style={{ padding: '8px', fontSize: 12, fontWeight: 700, color: BCV3.amber, whiteSpace: 'nowrap' }}>{bcv3Fmt(r.desvio_eur)}</td>
                      <td style={{ padding: '8px', fontSize: 12, color: BCV3.fg2, lineHeight: 1.45, maxWidth: 240 }}>{r.situacao}</td>
                      <td style={{ padding: '8px', fontSize: 12, color: BCV3.fg1, lineHeight: 1.45, maxWidth: 260 }}>{r.argumento}</td>
                    </tr>
                  ))}
                </tbody>
              </table>}
        </Bcv3Card>
      )}

      {data && (
        <Bcv3Card n={3} color={BCV3.blue} title="PIPELINE EM CURSO">
          {brief?.bloco3?.narrativa && <p style={{ margin: '0 0 12px', fontSize: 13, color: BCV3.fg2, lineHeight: 1.6 }}>{brief.bloco3.narrativa}</p>}
          {(m.pipeline || []).length === 0
            ? <div style={{ fontSize: 12, color: BCV3.fg3 }}>Sem oportunidades abertas nesta carteira.</div>
            : <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead><tr>{['Cliente', 'Fase', 'Próxima', 'O que se passa', 'Argumento'].map(h => <th key={h} style={bcv3Th}>{h}</th>)}</tr></thead>
                <tbody>
                  {[...m.pipeline].sort((a, b) => (b.hoje ? 1 : 0) - (a.hoje ? 1 : 0)).map((r, i) => {
                    const fmtDate = d => d ? new Date(d + 'T00:00:00').toLocaleDateString('pt-PT', { day: '2-digit', month: '2-digit', year: 'numeric' }) : null;
                    const dataFmt = fmtDate(r.next_date);
                    return (
                      <tr key={i} style={{ borderTop: `1px solid ${BCV3.border}`, verticalAlign: 'top' }}>
                        <td style={{ padding: '8px' }}><span style={bcv3Click} onClick={() => setSelectedCliente(r.cliente)}>{r.cliente}</span><div style={{ marginTop: 4 }}><Bcv3Urg u={r.urgencia} /></div></td>
                        <td style={{ padding: '8px', fontSize: 12, color: BCV3.fg2 }}>{r.stage || '—'}</td>
                        <td style={{ padding: '8px', fontSize: 12, whiteSpace: 'nowrap' }}>
                          {dataFmt
                            ? <span style={{ display: 'inline-block', padding: '2px 8px', borderRadius: 4, background: r.hoje ? 'color-mix(in oklch, var(--dgd-red-500,#EF4444) 12%, transparent)' : 'color-mix(in oklch, var(--dgd-primary-500,#61A9FF) 10%, transparent)', color: r.hoje ? BCV3.red : BCV3.blue, fontFamily: 'var(--dgd-font-mono)', fontSize: 11, fontWeight: 600 }}>{dataFmt}</span>
                            : <span style={{ color: BCV3.fg3 }}>—</span>}
                        </td>
                        <td style={{ padding: '8px', fontSize: 12, color: BCV3.fg2, lineHeight: 1.45, maxWidth: 240 }}>{r.situacao}</td>
                        <td style={{ padding: '8px', fontSize: 12, color: BCV3.fg1, lineHeight: 1.45, maxWidth: 260 }}>{r.argumento}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>}
        </Bcv3Card>
      )}

      {brief?.bloco4 && (
        <Bcv3Card n={4} color={BCV3.blue} title="ACÇÕES DO DIA">
          {(brief.bloco4.acoes_prioritarias || []).map(a => (
            <div key={a.n} style={{ padding: '8px 0', borderTop: `1px solid ${BCV3.border}`, fontSize: 13, color: BCV3.fg2 }}>
              <span style={bcv3Click} onClick={() => setSelectedCliente(a.cliente)}>{a.cliente}</span>
              <span style={{ marginLeft: 8, fontSize: 10, textTransform: 'uppercase', color: BCV3.fg3 }}>{a.tipo} · {a.quando}</span>
              <div>{a.acao}</div>
            </div>
          ))}
          {brief.bloco4.conclusao && <p style={{ margin: '12px 0 0', fontSize: 13, color: BCV3.fg2 }}>{brief.bloco4.conclusao}</p>}
        </Bcv3Card>
      )}
    </div>
  );
}

function anoLabel(m) {
  return m?.ano ? String(m.ano - 1) : 'Ano ant.';
}

window.ScreenDailyBriefingCarteiraV3 = ScreenDailyBriefingCarteiraV3;