/* BUSINESS & AI — Pipeline: Vista executiva */

const RESP_COLORS_PL = { JP:'#6366f1', FC:'#0ea5e9', WN:'#10b981', MF:'#f59e0b' };
const PIPELINE_CACHE_KEY = 'digi-pipeline-analysis';
const PIPELINE_CACHE_TTL = 24 * 60 * 60 * 1000; // 24h

function plLoadCache() {
  try {
    const raw = localStorage.getItem(PIPELINE_CACHE_KEY);
    if (!raw) return null;
    const { ts, data } = JSON.parse(raw);
    if (Date.now() - ts > PIPELINE_CACHE_TTL) return null;
    return { data, ts };
  } catch(e) { return null; }
}

function plSaveCache(data) {
  try { localStorage.setItem(PIPELINE_CACHE_KEY, JSON.stringify({ ts: Date.now(), data })); } catch(e) {}
}

function plFmtDate(d) {
  if (!d) return '';
  const date = d instanceof Date ? d : new Date(d);
  const today = new Date(); today.setHours(0,0,0,0);
  const tDate = new Date(date); tDate.setHours(0,0,0,0);
  const diff = Math.round((tDate - today) / 86400000);
  if (diff === 0) return 'HOJE';
  if (diff === 1) return 'amanhã';
  if (diff < 0)  return `há ${-diff}d`;
  return date.toLocaleDateString('pt-PT', { day:'2-digit', month:'short' }).replace('.','');
}

function plFmtTs(ts) {
  if (!ts) return '';
  const diff = Math.round((Date.now() - ts) / 60000);
  if (diff < 2)  return 'agora mesmo';
  if (diff < 60) return `há ${diff} min`;
  const h = Math.round(diff / 60);
  if (h < 24)    return `há ${h}h`;
  return `há ${Math.round(h/24)}d`;
}

function plComputeMetrics(td) {
  const today = new Date(); today.setHours(0,0,0,0);
  const phases = td.flatMap(t => t.phases.filter(p => !p.buf && !p.vac));
  const totalPhases   = phases.length;
  const donePhases    = phases.filter(p => { const e = new Date(p.e); e.setHours(0,0,0,0); return e < today; }).length;
  const activePhases  = phases.filter(p => { const s = new Date(p.s); s.setHours(0,0,0,0); const e = new Date(p.e); e.setHours(0,0,0,0); return s <= today && e >= today; }).length;
  const allMilestones = phases.filter(p => p.marco);
  const next14 = phases
    .filter(p => {
      const end = new Date(p.e); end.setHours(0,0,0,0);
      const diff = Math.round((end - today) / 86400000);
      return diff >= -1 && diff <= 14 && end >= today;
    })
    .sort((a,b) => new Date(a.e) - new Date(b.e));
  return { today, phases, totalPhases, donePhases, activePhases, allMilestones, next14 };
}

function plNavigateToRoadmap(trackId, phaseId) {
  const payload = phaseId ? { trackId, phaseId } : { trackId };
  try { localStorage.setItem('digi-roadmap-scroll', JSON.stringify(payload)); } catch(e) {}
  window.dispatchEvent(new CustomEvent('digi-subnav', {
    detail: { storageKey: 'digi-business-sub', val: 'roadmap' }
  }));
}

// ── Sub-componentes ───────────────────────────────────────────

const PlRoadmapBtn = ({ trackId, phaseId, muted }) => (
  <button
    onClick={() => plNavigateToRoadmap(trackId, phaseId)}
    style={{ fontSize:9, color: muted ? 'var(--text-dim)' : '#6366f1',
      background: muted ? 'var(--surface-muted)' : '#6366f110',
      border:`1px solid ${muted ? 'var(--border)' : '#6366f125'}`,
      padding:'2px 8px', borderRadius:4, cursor:'pointer',
      whiteSpace:'nowrap', flexShrink:0 }}>
    {phaseId ? '→ roadmap' : 'ver roadmap'}
  </button>
);

const PlRespBadge = ({ resp }) => (
  <span style={{ fontSize:9, fontWeight:700,
    color: RESP_COLORS_PL[resp] || '#94a3b8',
    background: (RESP_COLORS_PL[resp] || '#94a3b8') + '18',
    padding:'1px 6px', borderRadius:4, flexShrink:0 }}>
    {resp}
  </span>
);

const PlMilestoneRow = ({ ph, trackId }) => {
  const today = new Date(); today.setHours(0,0,0,0);
  const end   = new Date(ph.e); end.setHours(0,0,0,0);
  const diff  = Math.round((end - today) / 86400000);
  const passed   = diff < 0;
  const thisWeek = diff >= 0 && diff <= 6;
  return (
    <div style={{ display:'flex', alignItems:'center', gap:8, opacity: passed ? 0.45 : 1 }}>
      <span style={{ fontSize:9 }}>🏁</span>
      <span style={{ flex:1, fontSize:10, color:'var(--text)',
        overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{ph.n}</span>
      <PlRespBadge resp={ph.resp} />
      <span style={{ fontSize:9, fontFamily:'var(--font-mono)', flexShrink:0,
        fontWeight: thisWeek ? 700 : 400,
        color: thisWeek ? '#f59e0b' : 'var(--text-muted)' }}>
        {plFmtDate(ph.e)}
      </span>
      <PlRoadmapBtn trackId={trackId} phaseId={ph.id} />
    </div>
  );
};

const PlTrackCard = ({ track }) => {
  const today0     = (() => { const d = new Date(); d.setHours(0,0,0,0); return d; })();
  const phases     = track.phases.filter(p => !p.buf && !p.vac);
  const done       = phases.filter(p => { const e = new Date(p.e); e.setHours(0,0,0,0); return e < today0; }).length;
  const active     = phases.filter(p => { const s = new Date(p.s); s.setHours(0,0,0,0); const e = new Date(p.e); e.setHours(0,0,0,0); return s <= today0 && e >= today0; }).length;
  const milestones = phases.filter(p => p.marco).sort((a,b) => new Date(a.e)-new Date(b.e));
  const pct        = phases.length ? Math.round(done / phases.length * 100) : 0;
  const inactive   = phases.length === 0; // só tracks completamente vazios ficam dimmed

  const fmtMo = (d) => d
    ? d.toLocaleDateString('pt-PT',{day:'2-digit',month:'short'}).replace('.','')
    : '';
  const starts    = phases.map(p => new Date(p.s));
  const ends      = phases.map(p => new Date(p.e));
  const trackStart = starts.length ? new Date(Math.min(...starts)) : null;
  const trackEnd   = ends.length   ? new Date(Math.max(...ends))   : null;

  let statusLabel = 'planeado', statusColor = '#94a3b8', statusBg = '#94a3b815';
  if (active > 0)                            { statusLabel = 'em curso';    statusColor = '#0ea5e9'; statusBg = '#0ea5e915'; }
  if (done === phases.length && done > 0)    { statusLabel = '✓ concluído'; statusColor = '#10b981'; statusBg = '#10b98115'; }

  const hasMilestones = milestones.length > 0;
  const hasProgress   = phases.length > 0;

  return (
    <div style={{ background:'var(--surface)', border:'1px solid var(--border)',
      borderRadius:8, padding:'10px 14px', opacity: inactive ? 0.65 : 1 }}>
      <div style={{ display:'flex', alignItems:'center', gap:8,
        marginBottom: (hasProgress || hasMilestones) ? 7 : 0 }}>
        <span style={{ width:7, height:7, borderRadius:'50%',
          background:track.color, flexShrink:0 }}/>
        <span style={{ fontWeight:700, fontSize:10, letterSpacing:'0.03em', flex:1,
          color:'var(--text)', overflow:'hidden', textOverflow:'ellipsis',
          whiteSpace:'nowrap', textTransform:'uppercase' }}>{track.label}</span>
        <span style={{ fontSize:9, color:statusColor, background:statusBg,
          padding:'1px 7px', borderRadius:8, flexShrink:0, whiteSpace:'nowrap' }}>
          {statusLabel}
        </span>
        <span style={{ fontSize:9, color:'var(--text-dim)', fontFamily:'var(--font-mono)',
          flexShrink:0, whiteSpace:'nowrap' }}>
          {done}/{phases.length}{trackStart ? ` · ${fmtMo(trackStart)} → ${fmtMo(trackEnd)}` : ''}
        </span>
        <PlRoadmapBtn trackId={track.id} />
      </div>

      {hasProgress && (
        <div style={{ height:4, background:'var(--surface-muted)', borderRadius:2,
          marginBottom: hasMilestones ? 8 : 0 }}>
          <div style={{ width:pct+'%', height:'100%', background:track.color, borderRadius:2 }}/>
        </div>
      )}

      {hasMilestones && (
        <div style={{ borderTop: hasProgress ? '1px solid var(--border)' : 'none',
          paddingTop: hasProgress ? 8 : 0,
          display:'flex', flexDirection:'column', gap:5 }}>
          <div style={{ fontSize:9, fontWeight:700, letterSpacing:'0.07em',
            color:track.color, marginBottom:2 }}>MILESTONES</div>
          {milestones.map(ph => (
            <PlMilestoneRow key={ph.id} ph={ph} trackId={track.id} />
          ))}
        </div>
      )}
    </div>
  );
};

const PlDeliveryRow = ({ ph, trackId, trackLabel, trackColor, isLast }) => {
  const today = new Date(); today.setHours(0,0,0,0);
  const end   = new Date(ph.e); end.setHours(0,0,0,0);
  const diff  = Math.round((end - today) / 86400000);
  const isMilestone = !!ph.marco;
  const isOverdue   = diff < 0;
  const isToday     = diff === 0;
  const isTomorrow  = diff === 1;

  let badgeLabel, badgeColor, badgeBg, rowBg = 'transparent';
  if (isMilestone && isOverdue)   { badgeLabel='ATRASADO'; badgeColor='#fff'; badgeBg='#ef4444'; rowBg='#ef444406'; }
  else if (isMilestone && isToday){ badgeLabel='HOJE';     badgeColor='#fff'; badgeBg='#ef4444'; rowBg='#ef444406'; }
  else if (isMilestone && isTomorrow){ badgeLabel='AMANHÃ'; badgeColor='#fff'; badgeBg='#f59e0b'; rowBg='#f59e0b06'; }
  else if (isMilestone)           { badgeLabel='MILESTONE'; badgeColor='#fff'; badgeBg=trackColor||'#f59e0b'; }
  else if (isToday)               { badgeLabel='HOJE';     badgeColor='#0ea5e9'; badgeBg='#0ea5e915'; }
  else                            { badgeLabel='EM CURSO'; badgeColor='#0ea5e9'; badgeBg='#0ea5e915'; }

  const dateColor = (isOverdue||isToday||isTomorrow) && isMilestone ? (isOverdue||isToday ? '#ef4444' : '#f59e0b') : 'var(--text-muted)';

  return (
    <div style={{ display:'flex', alignItems:'center', gap:10, padding:'9px 12px',
      borderBottom: isLast ? 'none' : '1px solid var(--border)', background:rowBg }}>
      <span style={{ fontSize:9, fontWeight:700, color:badgeColor, background:badgeBg,
        padding:'2px 7px', borderRadius:3, whiteSpace:'nowrap', flexShrink:0 }}>{badgeLabel}</span>
      <span style={{ flex:1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
        <span style={{ fontSize:11, color:'var(--text)' }}>{isMilestone && '🏁 '}{ph.n}</span>
        {trackLabel && <span style={{ fontSize:9, color:'var(--text-dim)', marginLeft:6,
          background:'var(--surface-alt,var(--border))', padding:'1px 5px', borderRadius:3 }}>{trackLabel}</span>}
      </span>
      <PlRespBadge resp={ph.resp} />
      <span style={{ fontSize:10, fontFamily:'var(--font-mono)', flexShrink:0,
        fontWeight: (isToday||isTomorrow||isOverdue) ? 700 : 400, color:dateColor }}>
        {end.toLocaleDateString('pt-PT',{day:'2-digit',month:'short'}).replace('.','')}
      </span>
      <PlRoadmapBtn trackId={trackId} phaseId={ph.id} />
    </div>
  );
};

// ── Ecrã principal ────────────────────────────────────────────

const BusinessAIPipelineScreen = ({ user }) => {
  const [brief,      setBrief]      = React.useState(null);   // null | 'loading' | { healthScore, narrativa, tags, recomendacoes }
  const [briefTs,    setBriefTs]    = React.useState(null);   // timestamp number
  const [refreshKey, setRefreshKey] = React.useState(0);

  const td = React.useMemo(() => {
    try {
      const raw = localStorage.getItem('digi-roadmap-data');
      if (raw) return JSON.parse(raw, (k,v) => (k==='s'||k==='e') && typeof v==='string' ? new Date(v) : v);
    } catch(e) {}
    return window.TRACKS_DATA || [];
  }, [refreshKey]);

  const metrics = React.useMemo(() => plComputeMetrics(td), [td]);

  const fetchAnalysis = React.useCallback(async (force) => {
    if (!force) {
      const cached = plLoadCache();
      if (cached) { setBrief(cached.data); setBriefTs(cached.ts); return; }
    }
    setBrief('loading');
    try {
      const payload = {
        totalPhases:  metrics.totalPhases,
        donePhases:   metrics.donePhases,
        activePhases: metrics.activePhases,
        milestones: metrics.allMilestones.map(p => ({
          nome: p.n,
          data: p.e instanceof Date ? p.e.toISOString().slice(0,10) : String(p.e),
          resp: p.resp,
        })),
        activeList: metrics.phases.filter(p => {
          const s = new Date(p.s); s.setHours(0,0,0,0);
          const e = new Date(p.e); e.setHours(0,0,0,0);
          return s <= metrics.today && e >= metrics.today;
        }).map(p => ({
          sh: p.sh, nome: p.n, resp: p.resp,
          data: p.e instanceof Date ? p.e.toISOString().slice(0,10) : String(p.e),
          track: (td.find(t => t.phases.some(x => x.id === p.id)) || {}).id || '',
        })),
        next14: metrics.next14.map(p => ({
          sh: p.sh, nome: p.n, resp: p.resp, marco: !!p.marco,
          data: p.e instanceof Date ? p.e.toISOString().slice(0,10) : String(p.e),
        })),
        tracks: td.map(t => {
          const today0 = metrics.today;
          const tPhases = t.phases.filter(p => !p.buf && !p.vac);
          return {
            id: t.id, label: t.label,
            total:  tPhases.length,
            done:   tPhases.filter(p => { const e = new Date(p.e); e.setHours(0,0,0,0); return e < today0; }).length,
            active: tPhases.filter(p => { const s = new Date(p.s); s.setHours(0,0,0,0); const e = new Date(p.e); e.setHours(0,0,0,0); return s <= today0 && e >= today0; }).length,
          };
        }),
      };
      const res = await fetch('/api/pipeline-analysis', {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error('HTTP ' + res.status);
      const data = await res.json();
      plSaveCache(data);
      setBrief(data);
      setBriefTs(Date.now());
    } catch(e) {
      console.error('[Pipeline] analysis error:', e);
      setBrief({ healthScore: null, narrativa: 'Não foi possível gerar análise. Verifica a ligação e tenta de novo.', tags: [], recomendacoes: [] });
    }
  }, [metrics, td]);

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

  const isLoading = brief === 'loading';
  const briefData = (brief && brief !== 'loading') ? brief : null;

  // ── Briefing IA ───────────────────────────────────────────
  const renderBrief = () => {
    const hScore = briefData?.healthScore;
    const hColor = hScore == null ? '#94a3b8' : hScore >= 75 ? '#10b981' : hScore >= 50 ? '#f59e0b' : '#ef4444';
    return (
      <div style={{ marginBottom:16, background:'var(--surface)',
        border:'1px solid #6366f120', borderRadius:10, overflow:'hidden',
        boxShadow:'var(--shadow-sm)' }}>
        <div style={{ background:'linear-gradient(135deg,#6366f108,#0ea5e906)',
          padding:'10px 14px', borderBottom:'1px solid #6366f112',
          display:'flex', alignItems:'center', gap:8 }}>
          <span style={{ fontSize:9, fontWeight:700, letterSpacing:'0.1em', color:'#6366f1' }}>
            ⚡ BRIEFING EXECUTIVO
          </span>
          {briefTs && !isLoading && (
            <>
              <span style={{ width:6, height:6, borderRadius:'50%', background:'#10b981', display:'inline-block' }}/>
              <span style={{ fontSize:9, color:'var(--text-dim)' }}>actualizado {plFmtTs(briefTs)}</span>
            </>
          )}
          <button onClick={() => { setRefreshKey(k => k + 1); fetchAnalysis(true); }} disabled={isLoading}
            style={{ marginLeft:'auto', fontSize:9, padding:'2px 8px', borderRadius:4,
              border:'1px solid #6366f130', background:'transparent', color:'#6366f1',
              cursor: isLoading ? 'default' : 'pointer', opacity: isLoading ? 0.5 : 1 }}>
            {isLoading ? '…' : '↻ Actualizar'}
          </button>
        </div>
        <div style={{ padding:14 }}>
          {isLoading ? (
            <div style={{ display:'flex', alignItems:'center', gap:10,
              color:'var(--text-muted)', fontSize:12, minHeight:40 }}>
              <span style={{ fontSize:18, color:'#6366f1' }}>⟳</span>
              A gerar análise…
            </div>
          ) : briefData ? (
            <>
              <div style={{ display:'flex', gap:14, marginBottom:12, paddingBottom:12,
                borderBottom:'1px solid var(--border)', alignItems:'flex-start' }}>
                {hScore != null && (
                  <div style={{ textAlign:'center', flexShrink:0 }}>
                    <div style={{ width:56, height:56, borderRadius:'50%',
                      border:`3px solid ${hColor}`,
                      display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column' }}>
                      <div style={{ fontSize:20, fontWeight:700, color:hColor, lineHeight:1 }}>{hScore}</div>
                      <div style={{ fontSize:7, color:'var(--text-dim)', lineHeight:1 }}>health</div>
                    </div>
                  </div>
                )}
                <div style={{ flex:1 }}>
                  <p style={{ margin:'0 0 8px', fontSize:12, lineHeight:1.65, color:'var(--text)' }}
                    dangerouslySetInnerHTML={{ __html:
                      (briefData.narrativa||'').replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>') }} />
                  {briefData.tags?.length > 0 && (
                    <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
                      {briefData.tags.map((tag,i) => (
                        <span key={i} style={{ background:'var(--surface-muted)',
                          border:'1px solid var(--border)', color:'var(--text-muted)',
                          padding:'2px 9px', borderRadius:10, fontSize:10 }}>{tag}</span>
                      ))}
                    </div>
                  )}
                </div>
              </div>
              {briefData.recomendacoes?.length > 0 && (
                <div style={{ background:'var(--surface-muted)', borderRadius:6, padding:'10px 12px' }}>
                  <div style={{ fontSize:9, fontWeight:700, letterSpacing:'0.07em',
                    color:'var(--text-dim)', marginBottom:7 }}>RECOMENDAÇÕES IA</div>
                  <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                    {briefData.recomendacoes.map((rec,i) => {
                      const c = ['#ef4444','#f59e0b','#6366f1'][i] || '#94a3b8';
                      return (
                        <div key={i} style={{ display:'flex', gap:8, fontSize:11,
                          color:'var(--text)', lineHeight:1.4 }}>
                          <span style={{ color:c, fontWeight:700, flexShrink:0 }}>{i+1}.</span>
                          <span dangerouslySetInnerHTML={{ __html:
                            rec.replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>') }} />
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}
            </>
          ) : null}
        </div>
      </div>
    );
  };

  // ── KPIs ─────────────────────────────────────────────────
  const renderKPIs = () => (
    <div style={{ display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:8, marginBottom:16 }}>
      {[
        { v:metrics.totalPhases,          l:'fases total',  c:'#6366f1', bc:'var(--border)' },
        { v:metrics.donePhases,           l:'concluídas',   c:'#10b981', bc:'#10b98125' },
        { v:metrics.activePhases,         l:'em curso',     c:'#0ea5e9', bc:'#0ea5e925' },
        { v:metrics.allMilestones.length, l:'milestones',   c:'#f59e0b', bc:'#f59e0b25' },
        { v:td.length,                    l:'tracks',       c:'#6366f1', bc:'var(--border)' },
      ].map(({ v,l,c,bc }) => (
        <div key={l} style={{ background:'var(--surface)', border:`1px solid ${bc}`,
          borderRadius:8, padding:10, textAlign:'center' }}>
          <div style={{ fontSize:24, fontWeight:700, color:c }}>{v}</div>
          <div style={{ fontSize:9, color:'var(--text-muted)' }}>{l}</div>
        </div>
      ))}
    </div>
  );

  // ── Entregas críticas ────────────────────────────────────
  const renderDeliveries = () => {
    if (!metrics.next14.length) return null;
    return (
      <div style={{ marginBottom:16 }}>
        <div style={{ fontSize:9, fontWeight:700, letterSpacing:'0.1em',
          color:'var(--text-dim)', marginBottom:8 }}>ENTREGAS CRÍTICAS · PRÓXIMOS 14 DIAS</div>
        <div style={{ background:'var(--surface)', border:'1px solid var(--border)',
          borderRadius:8, overflow:'hidden' }}>
          {metrics.next14.map((ph, i) => {
            const trackObj = td.find(t => t.phases.some(p => p.id === ph.id));
            return (
              <PlDeliveryRow key={ph.id} ph={ph}
                trackId={trackObj?.id}
                trackLabel={trackObj?.label}
                trackColor={trackObj?.color}
                isLast={i === metrics.next14.length - 1} />
            );
          })}
        </div>
      </div>
    );
  };

  // ── Tracks ───────────────────────────────────────────────
  const renderTracks = () => (
    <div>
      <div style={{ fontSize:9, fontWeight:700, letterSpacing:'0.1em',
        color:'var(--text-dim)', marginBottom:8 }}>TRACKS · VISÃO GERAL</div>
      <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
        {td.map(track => <PlTrackCard key={track.id} track={track} />)}
      </div>
    </div>
  );

  return (
    <div className="scrollbar" style={{ flex:1, overflowY:'auto', padding:'24px 28px 80px' }}>
      <div className="font-mono" style={{ fontSize:11, color:'var(--text-dim)',
        letterSpacing:'0.08em', marginBottom:6 }}>BUSINESS & AI · PIPELINE</div>
      <h2 className="font-display" style={{ margin:'0 0 20px', fontSize:26,
        fontWeight:500, letterSpacing:'-0.01em' }}>Pipeline</h2>

      {renderBrief()}
      {renderKPIs()}
      {renderDeliveries()}
      {renderTracks()}
    </div>
  );
};
window.BusinessAIPipelineScreen = BusinessAIPipelineScreen;