// progress.jsx — Path-to-production status bars for every active project
// Reads live from PCC Supabase project_status table.
// Renders inside the existing PCC shell as the "Progress" tab.

const PROGRESS_PATHS = {
  'lifecapsule':  [['Store live','done'],['TestFlight 13 + fix','await'],['Promo + ASO refresh','next']],
  'dealer':       [['GPM1 live','done'],['Onboard dealer #2','next'],['Multi-tenant','future']],
  'pinnacle':     [['BC section live','done'],['Paystack preview','await'],['Paystack live','next'],['Ads','future']],
  'bc':           [['Backend live','done'],['Build 4 modules','next'],['Bookkeeper GTM','future'],['50 founding','await']],
  'celestial':    [['Web live','done'],['Remove Stripe','next'],['Google Pay','future'],['iOS','await']],
  'pcc':          [['Backend','done'],['Deploy /ceo /keys /progress','next'],['Store APIs','await'],['UI polish','future']],
  'simdeck':      [['Paused','await'],['Re-provision DB','next'],['Resume Phase 1','future'],['Beta','future']],
  'bss':          [['Scope verticals','next'],['Escrow MVP','future'],['Verification','future'],['Legal','await']],
  'jarvis':       [['Baseline runs','done'],['Voice opt-in','next'],['Obsidian + Drive','future'],['Done','future']]
};
const PROGRESS_ORDER = ['lifecapsule','dealer','pinnacle','bc','celestial','pcc','bss','jarvis','simdeck'];

function stageClass(state) {
  return { done:'done', next:'next', await:'await', future:'future', paused:'paused' }[state] || 'future';
}

function ProgressPage() {
  const [rows, setRows]       = React.useState([]);
  const [meta, setMeta]       = React.useState('');
  const [loading, setLoading] = React.useState(true);
  const [error, setError]     = React.useState(null);

  async function fetchStatus() {
    if (!window.pccDb) { setError('Supabase not initialised'); setLoading(false); return; }
    try {
      const projects = await window.pccDb._raw
        ? await window.pccDb._raw('project_status?select=*&order=pct.desc.nullslast')
        : await fetch(`${window.SUPABASE_URL}/rest/v1/project_status?select=*&order=pct.desc.nullslast`, {
            headers: { apikey: window.SUPABASE_ANON_KEY, Authorization: 'Bearer ' + window.SUPABASE_ANON_KEY }
          }).then(r => r.json());
      const dash = await fetch(`${window.SUPABASE_URL}/rest/v1/ceo_dashboard_state?id=eq.1&select=updated_at,last_reconciled_date`, {
        headers: { apikey: window.SUPABASE_ANON_KEY, Authorization: 'Bearer ' + window.SUPABASE_ANON_KEY }
      }).then(r => r.json()).catch(() => []);
      setRows(Array.isArray(projects) ? projects : []);
      const st = Array.isArray(dash) ? dash[0] : null;
      setMeta(st
        ? `Live · updated ${new Date(st.updated_at).toLocaleString('en-GB',{day:'2-digit',month:'short',hour:'2-digit',minute:'2-digit'})} · reconciled ${st.last_reconciled_date}`
        : 'Live');
      setError(null);
    } catch (e) {
      setError((e && e.message) || String(e));
    } finally {
      setLoading(false);
    }
  }

  React.useEffect(() => {
    fetchStatus();
    const id = setInterval(fetchStatus, 60000);
    return () => clearInterval(id);
  }, []);

  const byKey = React.useMemo(() => Object.fromEntries(rows.map(r => [r.key, r])), [rows]);

  return (
    <div className="pcc-page">
      <PageHead title="Path to Production" subtitle={meta || 'loading…'} />

      {loading && <Card><div style={{padding:14, color:'var(--muted)'}}>Loading project status…</div></Card>}
      {error && <Card><div style={{padding:14, color:'#fca5a5'}}>Could not load: {error}</div></Card>}

      {!loading && !error && (
        <Card>
          <div style={{padding:'8px 14px 14px'}}>
            <div className="progress-legend" style={{display:'flex', gap:14, fontSize:11, color:'var(--muted)', flexWrap:'wrap', padding:'8px 0 14px'}}>
              <span><span className="legend-dot done"></span>Done</span>
              <span><span className="legend-dot next"></span>Next unblocked</span>
              <span><span className="legend-dot await"></span>Waiting on Tiaan</span>
              <span><span className="legend-dot future"></span>Future stage</span>
              <span><span className="legend-dot paused"></span>Paused</span>
            </div>

            {PROGRESS_ORDER.map(key => {
              const p = byKey[key];
              const path = PROGRESS_PATHS[key];
              if (!p || !path) return null;
              const pctLabel = p.pct !== null ? `${p.pct}%` : 'no %';
              return (
                <div key={key} className="progress-row">
                  <div className="progress-left">
                    <div className="progress-name">{p.name}</div>
                    <div className="progress-meta">{pctLabel} · {p.state_label || ''}</div>
                  </div>
                  <div className="progress-right">
                    <div className="progress-bar-wrap">
                      <div className="progress-bar" style={{width: (p.pct !== null ? p.pct : 0) + '%'}}></div>
                    </div>
                    <div className="progress-stages">
                      {path.map((stage, i) => (
                        <React.Fragment key={i}>
                          <span className={`progress-stage ${stageClass(stage[1])}`}>{stage[0]}</span>
                          {i < path.length - 1 && <span className="progress-arrow">→</span>}
                        </React.Fragment>
                      ))}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
      )}

      <style>{`
        .progress-row { display:grid; grid-template-columns:220px 1fr; gap:18px; padding:16px 0; border-bottom:1px solid var(--border, #1f1f28); align-items:start; }
        .progress-row:last-child { border-bottom:none; }
        .progress-name { font-weight:500; font-size:15px; }
        .progress-meta { font-size:11px; color:var(--muted); margin-top:3px; }
        .progress-bar-wrap { height:8px; background:rgba(148,163,184,0.18); border-radius:999px; overflow:hidden; margin-bottom:10px; }
        .progress-bar { height:100%; background:linear-gradient(90deg, #16a34a, #d4af37); border-radius:999px; transition:width .6s ease; }
        .progress-stages { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
        .progress-stage { padding:6px 10px; border-radius:6px; font-size:11px; font-weight:500; border:1px solid; }
        .progress-stage.done   { background:rgba(22,163,74,0.15);  border-color:rgba(22,163,74,0.4);  color:#86efac; }
        .progress-stage.next   { background:rgba(37,99,235,0.15);  border-color:rgba(37,99,235,0.4);  color:#93c5fd; }
        .progress-stage.await  { background:rgba(217,119,6,0.18);  border-color:rgba(217,119,6,0.5);  color:#fbbf24; }
        .progress-stage.future { background:rgba(8,145,178,0.12);  border-color:rgba(8,145,178,0.35); color:#67e8f9; }
        .progress-stage.paused { background:rgba(148,163,184,0.15);border-color:rgba(148,163,184,0.4);color:#cbd5e1; }
        .progress-arrow { color:var(--muted); font-size:13px; }
        .legend-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
        .legend-dot.done   { background:#16a34a; }
        .legend-dot.next   { background:#2563eb; }
        .legend-dot.await  { background:#d97706; }
        .legend-dot.future { background:#0891b2; }
        .legend-dot.paused { background:#94a3b8; }
      `}</style>
    </div>
  );
}

window.ProgressPage = ProgressPage;