// extras.jsx — Pipeline, Partners, Analytics, Content Studio views

// ─── PIPELINE & LIFECYCLE ────────────────────────────────────────
const KAN_COLS = [
  { stage: 'Pre-Solicitation', dot: 'var(--violet)' },
  { stage: 'Solicitation', dot: 'var(--accent)' },
  { stage: 'Evaluation', dot: 'var(--warn)' },
  { stage: 'Awarded', dot: 'var(--go)' },
];
const KAN_EXTRA = [
  { stage: 'Evaluation', agencyShort: 'DOE', title: 'Grid Cybersecurity Operations Support', ceiling: '$140M', tier1: 'PURSUE' },
  { stage: 'Evaluation', agencyShort: 'SSA', title: 'Identity Services Modernization', ceiling: '$62M', tier1: 'MONITOR' },
  { stage: 'Awarded', agencyShort: 'DLA', title: 'Logistics Data Platform O&M', ceiling: '$88M', tier1: 'PURSUE' },
  { stage: 'Awarded', agencyShort: 'DOJ', title: 'Case Management Cloud Migration', ceiling: '$51M', tier1: 'PURSUE' },
];

function Pipeline({ go }) {
  const Icons = window.Icons;
  const { TierBadge } = window;
  const cards = [...window.OPPS.map(o => ({ ...o })), ...KAN_EXTRA];

  return (
    <div className="content-inner">
      <div className="row-head">
        <div>
          <h2>Procurement Lifecycle</h2>
          <div className="desc">8-stage intelligence with automated transitions and amendment detection across 1,284 tracked opportunities.</div>
        </div>
      </div>
      <div className="lifecycle">
        {window.LIFECYCLE.map(s => (
          <div className={`lc-stage ${s.state}`} key={s.n}>
            <div className="lc-n">{s.n}</div>
            <div className="lc-label">{s.label}</div>
            <div className="lc-count">{s.count}</div>
            <div className="lc-bar"><i style={{ width: s.state === 'active' ? '60%' : s.state === 'done' ? '100%' : '22%' }}></i></div>
          </div>
        ))}
      </div>

      {/* reconciliation */}
      <div className="row-head mt-20">
        <div>
          <h2>Pipeline Reconciliation</h2>
          <div className="desc">3-pass matching engine compares your C2P capture export against the live market to surface gaps.</div>
        </div>
        <button className="filter-chip"><Icons.download /> Upload C2P export</button>
      </div>
      <div className="recon">
        {window.RECON.map((r, i) => (
          <div className={`recon-col ${r.cls}`} key={i}>
            <div className="rc-num">{r.num}</div>
            <div className="rc-label">{r.label}</div>
            <div className="rc-desc">{r.desc}</div>
          </div>
        ))}
      </div>

      {/* kanban board */}
      <div className="row-head mt-20">
        <div><h2>Active Capture Board</h2><div className="desc">Opportunities in motion, grouped by lifecycle stage.</div></div>
      </div>
      <div className="kanban">
        {KAN_COLS.map(col => {
          const items = cards.filter(c => c.stage === col.stage);
          return (
            <div className="kan-col" key={col.stage}>
              <div className="kan-h">
                <span className="kh-dot" style={{ background: col.dot }}></span>
                <span className="kh-t">{col.stage}</span>
                <span className="kh-c">{items.length}</span>
              </div>
              <div className="kan-b">
                {items.map((c, i) => (
                  <div className="kan-card" key={i} onClick={() => c.id && go('detail', c.id)}>
                    <div className="kc-agency">{c.agencyShort}</div>
                    <div className="kc-title">{c.title}</div>
                    <div className="kc-foot">
                      <span className="kc-ceiling">{c.ceiling}</span>
                      <TierBadge tier={c.tier1} />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
      <div style={{ height: 12 }}></div>
    </div>
  );
}
window.Pipeline = Pipeline;

// ─── PARTNER DISCOVERY ───────────────────────────────────────────
const PARTNERS = [
  { name: 'Aegis Cyber Group', initials: 'AC', set: 'SDVOSB', naics: 94, agency: 88, vehicle: 90, opps: 7, top: 'DISA Zero Trust' },
  { name: 'Northbridge Labs', initials: 'NL', set: '8(a)', naics: 88, agency: 72, vehicle: 81, opps: 5, top: 'CISA CDM Phase 4' },
  { name: 'Veritas Systems', initials: 'VS', set: '8(a)', naics: 71, agency: 64, vehicle: 77, opps: 4, top: 'VA Cloud Mod' },
  { name: 'Meridian Solutions', initials: 'MS', set: 'WOSB', naics: 82, agency: 79, vehicle: 58, opps: 6, top: 'Army TITAN' },
  { name: 'Polaris Defense', initials: 'PD', set: 'Large', naics: 76, agency: 91, vehicle: 84, opps: 9, top: 'Navy ICAM' },
  { name: 'Sentinel Data Co.', initials: 'SD', set: 'HUBZone', naics: 69, agency: 55, vehicle: 72, opps: 3, top: 'HHS NextGen ITSM' },
];

function Partners() {
  const Icons = window.Icons;
  const { ScoreBar } = window;
  const score = p => Math.round((p.naics + p.agency + p.vehicle) / 3);
  return (
    <div className="content-inner">
      <div className="row-head">
        <div>
          <h2>Partner Discovery & Teaming Intelligence</h2>
          <div className="desc">3-factor matching engine scores teaming partners against every opportunity — NAICS overlap, agency history, and contract vehicle alignment.</div>
        </div>
        <button className="filter-chip on"><Icons.users /> {PARTNERS.length} matched partners</button>
      </div>
      <div className="grid g-3">
        {PARTNERS.sort((a,b) => score(b) - score(a)).map((p, i) => (
          <div className="card" key={i}>
            <div className="card-h">
              <span className="p-logo" style={{ width: 36, height: 36 }}>{p.initials}</span>
              <div><h3 style={{ fontSize: '0.92rem' }}>{p.name}</h3><div className="sub">{p.set} · {p.opps} matched opportunities</div></div>
              <span className="badge accent" style={{ marginLeft: 'auto' }}>{score(p)}</span>
            </div>
            <div className="card-b">
              {[['NAICS overlap', p.naics], ['Agency history', p.agency], ['Vehicle alignment', p.vehicle]].map(([lbl, v]) => (
                <div className="cap-dim" key={lbl} style={{ marginBottom: 11 }}>
                  <span className="cd-name" style={{ width: 124 }}>{lbl}</span>
                  <span className="cd-bar"><ScoreBar value={v} /></span>
                  <span className="cd-val" style={{ color: window.fitColor(v) }}>{v}</span>
                </div>
              ))}
              <div className="flex between center" style={{ borderTop: '1px solid var(--border)', paddingTop: 12, marginTop: 4 }}>
                <span className="note">Strongest on</span>
                <span className="c-mono" style={{ color: 'var(--accent)' }}>{p.top}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ height: 12 }}></div>
    </div>
  );
}
window.Partners = Partners;

// ─── SPEND ANALYTICS ─────────────────────────────────────────────
function Analytics() {
  const Icons = window.Icons;
  const max = 130;
  return (
    <div className="content-inner">
      <div className="row-head">
        <div>
          <h2>Agency Spend Trend Analytics</h2>
          <div className="desc">Quarterly obligations across your key agencies and NAICS codes, powered by USASpending with AI-generated market briefs.</div>
        </div>
        <div className="flex gap-8">
          <button className="filter-chip on"><Icons.building /> DISA · Army · VA</button>
          <button className="filter-chip"><Icons.download /> Export</button>
        </div>
      </div>

      <div className="tilegrid g-3">
        <div className="tile"><div className="t-label">Addressable Spend (TTM)</div><div className="t-num">$4.8<span className="u">B</span></div><div className="t-delta up"><Icons.arrowUp />+22% YoY</div></div>
        <div className="tile"><div className="t-label">New Obligations · Q2 26</div><div className="t-num">$1.2<span className="u">B</span></div><div className="t-delta up"><Icons.arrowUp />+14% QoQ</div></div>
        <div className="tile"><div className="t-label">Avg Award Size · 541512</div><div className="t-num">$31<span className="u">M</span></div><div className="t-delta flat">stable</div></div>
      </div>

      <div className="card mt-18">
        <div className="card-h">
          <span className="ch-ic"><Icons.barChart /></span>
          <div><h3>Quarterly Obligations by NAICS</h3><div className="sub">$M · trailing 6 quarters</div></div>
        </div>
        <div className="chart-area">
          <div className="bars-x">
            {window.SPEND_QUARTERS.map(q => (
              <div className="bx" key={q.q}>
                <div className="bx-stack">
                  <i className="s3" style={{ height: `${q.s3/max*100}%` }}></i>
                  <i className="s2" style={{ height: `${q.s2/max*100}%` }}></i>
                  <i className="s1" style={{ height: `${q.s1/max*100}%` }}></i>
                </div>
                <span className="bx-label">{q.q}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="chart-legend">
          <span className="lg"><i style={{ background: 'var(--accent)' }}></i>541512 · Systems Design</span>
          <span className="lg"><i style={{ background: 'var(--accent-dim)' }}></i>541519 · Computer Services</span>
          <span className="lg"><i style={{ background: 'var(--violet)', opacity: 0.7 }}></i>541330 · Engineering</span>
        </div>
      </div>

      <div className="card mt-18">
        <div className="card-h">
          <span className="ch-ic"><Icons.sparkles /></span>
          <div><h3>AI-Generated Investment Themes</h3><div className="sub">Market brief · updated weekly</div></div>
        </div>
        <div className="card-b" style={{ paddingTop: 6, paddingBottom: 6 }}>
          {window.SPEND_THEMES.map((t, i) => (
            <div className="theme" key={i}>
              <div className="th-top">
                <span className="th-name">{t.name}</span>
                <span className="th-trend"><span className={`badge ${t.dir === 'up' ? 'go' : 'bad'}`}>{t.dir === 'up' ? <Icons.arrowUp /> : <Icons.arrowDown />}{t.delta}</span></span>
              </div>
              <div className="th-text">{t.text}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ height: 12 }}></div>
    </div>
  );
}
window.Analytics = Analytics;

// ─── CONTENT STUDIO ──────────────────────────────────────────────
const STUDIO_CARDS = [
  { ic: 'mic', t: 'Audio Briefing', d: '8-minute podcast-style walkthrough of the DISA Zero Trust opportunity, incumbent posture, and bid rationale.', kind: 'wave' },
  { ic: 'presentation', t: 'Gate Review Deck', d: '14-slide PowerPoint capture brief — fit, P(Win), competitive landscape, and action items, ready for the bid board.', kind: 'ppt' },
  { ic: 'chart', t: 'Data Charts', d: 'Spend trend and competitive-positioning visuals exported as PNG/SVG for proposals and reviews.', kind: 'bars' },
  { ic: 'image', t: 'Visual Infographic', d: 'One-page opportunity summary infographic — the briefing distilled for executive stakeholders.', kind: 'info' },
];

function StudioPreview({ kind }) {
  if (kind === 'wave') return <div className="wave">{Array.from({length: 22}).map((_, i) => <i key={i} style={{ height: `${15 + Math.abs(Math.sin(i*0.9))*100}%` }}></i>)}</div>;
  if (kind === 'bars') return <div className="barsmini">{[60,90,45,75,55].map((h, i) => <i key={i} style={{ height: `${h}%`, background: i === 1 ? 'var(--accent)' : 'var(--accent-dim)' }}></i>)}</div>;
  const Icons = window.Icons;
  const Ic = kind === 'ppt' ? Icons.presentation : Icons.image;
  return <div className="pv-ic"><Ic /></div>;
}

function Studio() {
  const Icons = window.Icons;
  return (
    <div className="content-inner">
      <div className="row-head">
        <div>
          <h2>Content Studio</h2>
          <div className="desc">Generate podcast-style audio, gate-review decks, data charts, and infographics for any opportunity — powered by Google Gemini.</div>
        </div>
        <span className="badge accent" style={{ alignSelf: 'center' }}><Icons.sparkles /> DISA Zero Trust Modernization</span>
      </div>
      <div className="studio-out">
        {STUDIO_CARDS.map((c, i) => (
          <div className="studio-card" key={i}>
            <div className="studio-prev">
              <span className="gemtag">GEMINI</span>
              <StudioPreview kind={c.kind} />
            </div>
            <div className="studio-cb">
              <div className="sc-t">{c.t}</div>
              <div className="sc-d">{c.d}</div>
              <div className="sc-foot">
                <button className="cta-act" style={{ padding: '8px 16px', fontSize: '0.7rem' }}><Icons.sparkles /> Generate</button>
                <button className="filter-chip"><Icons.download /> Last export</button>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ height: 12 }}></div>
    </div>
  );
}
window.Studio = Studio;