// detail.jsx — Opportunity detail: 6-factor fit, Black Hat CI, capture readiness, partners, NAICS

function FitFactors({ opp }) {
  const total = opp.factors.reduce((s, f) => s + f.score * f.weight, 0) / 100;
  return (
    <div className="card">
      <div className="card-h">
        <span className="ch-ic"><window.Icons.gauge /></span>
        <div><h3>6-Factor Fit Score</h3><div className="sub">Weighted against the Halcyon Federal profile</div></div>
        <span className="badge accent">{Math.round(total)} / 100 composite</span>
      </div>
      <div className="card-b">
        {opp.factors.map((f, i) => (
          <div className="factor" key={i}>
            <div className="f-top">
              <span className="f-name">{f.name}</span>
              <span className="f-weight">w{f.weight}%</span>
              <span className="f-score" style={{ color: window.fitColor(f.score), marginLeft: 'auto' }}>{f.score}</span>
            </div>
            <window.ScoreBar value={f.score} />
            <div className="f-note">{f.note}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function BlackHat({ opp }) {
  const Icons = window.Icons;
  const [open, setOpen] = React.useState(0);
  return (
    <div className="card">
      <div className="card-h">
        <span className="ch-ic"><Icons.crosshair /></span>
        <div><h3>Black Hat Competitive Intelligence</h3><div className="sub">Shipley method · 11-section automated report</div></div>
        <span className="badge accent">Tier 2</span>
      </div>
      <div className="ci-sections">
        {opp.ci.map((s, i) => (
          <div className={`ci-sec${open === i ? ' open' : ''}`} key={i}>
            <button className="ci-sec-h" onClick={() => setOpen(open === i ? -1 : i)}>
              <span className="ci-sec-n">{String(i+1).padStart(2,'0')}</span>
              <span className="ci-sec-t">{s.t}</span>
              {s.tag && <span className="ci-sec-tag"><span className={`badge ${s.tagType || 'muted'}`}>{s.tag}</span></span>}
              <span className="ci-sec-chev"><Icons.chevronRight /></span>
            </button>
            {open === i && <div className="ci-sec-body" dangerouslySetInnerHTML={{ __html: s.body }}></div>}
          </div>
        ))}
      </div>
    </div>
  );
}

function CaptureReadiness({ opp }) {
  const c = opp.capture;
  const callCls = c.call === 'GO' ? 'go' : c.call === 'CONDITIONAL' ? 'cond' : 'nogo';
  const callColor = c.call === 'GO' ? 'var(--go)' : c.call === 'CONDITIONAL' ? 'var(--warn)' : 'var(--bad)';
  return (
    <div className="card">
      <div className="card-h">
        <span className="ch-ic"><window.Icons.shield /></span>
        <div><h3>Capture Readiness</h3><div className="sub">10-dimension scoring · 7 automated + 3 manual</div></div>
      </div>
      <div className="card-b">
        <div className="cap-gauge">
          <window.Donut value={c.score} size={92} stroke={8} color={callColor} />
          <div className="cap-verdict">
            <div className={`cv-call ${callCls}`}>{c.call}</div>
            <div className="cv-sub">{c.narrative}</div>
          </div>
        </div>
        <div className="cap-dims">
          {c.dims.map((d, i) => (
            <div className={`cap-dim${d.auto ? '' : ' manual'}`} key={i}>
              <span className="cd-name">{d.name}<span className="auto">{d.auto ? 'AUTO' : 'MANUAL'}</span></span>
              <span className="cd-bar"><window.ScoreBar value={d.score} /></span>
              <span className="cd-val">{d.score}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Detail({ oppId, go }) {
  const Icons = window.Icons;
  const { Donut, Badge, TierBadge } = window;
  const opp = window.OPP_BY_ID[oppId] || window.OPPS[0];
  const full = !!opp.factors;

  return (
    <div className="content-inner">
      <button className="detail-back" onClick={() => go('opportunities')}><Icons.arrowLeft /> Back to opportunities</button>

      {/* hero */}
      <div className="detail-hero">
        <div className="dh-top">
          <div className="dh-main">
            <div className="dh-badges">
              <Badge kind="accent" live>Solicitation Open</Badge>
              <TierBadge tier={opp.tier1} />
              {opp.tier2 && <Badge kind="accent"><Icons.zap /> Tier 2 Deep Analysis</Badge>}
              <Badge kind="muted">{opp.stage}</Badge>
            </div>
            <div className="dh-agency">{opp.agency}</div>
            <div className="dh-title">{opp.title}</div>
            {opp.summary && <div className="dh-sub">{opp.summary}</div>}
          </div>
          <div className="dh-score">
            <Donut value={opp.fit} size={104} stroke={9} />
            <div className="label">Fit Score</div>
          </div>
        </div>
        <div className="dh-meta">
          <div className="m kv"><span className="k">Solicitation</span><span className="v">{opp.solId}</span></div>
          <div className="m kv"><span className="k">Ceiling</span><span className="v accent">{opp.ceiling}</span></div>
          <div className="m kv"><span className="k">Vehicle</span><span className="v">{opp.vehicle}</span></div>
          <div className="m kv"><span className="k">Set-Aside</span><span className="v">{opp.setaside}</span></div>
          <div className="m kv"><span className="k">P(Win)</span><span className="v accent">{opp.pwin}</span></div>
        </div>
      </div>

      {full ? (
        <div className="detail-grid">
          {/* LEFT */}
          <div className="grid" style={{ gridTemplateColumns: '1fr' }}>
            <FitFactors opp={opp} />
            <BlackHat opp={opp} />
          </div>
          {/* RIGHT */}
          <div className="grid" style={{ gridTemplateColumns: '1fr' }}>
            {/* two-tier AI rec */}
            <div className="card">
              <div className="card-h">
                <span className="ch-ic"><Icons.zap /></span>
                <div><h3>AI Recommendation</h3><div className="sub">Two-tier analysis</div></div>
              </div>
              <div className="card-b">
                <div className="flex between center">
                  <div>
                    <div className="note">Tier 1 · Auto-screen</div>
                    <div style={{ marginTop: 6 }}><TierBadge tier={opp.tier1} /></div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div className="note">Tier 2 · Deep capture</div>
                    <div style={{ marginTop: 6 }}><Badge kind="go"><Icons.check /> BID</Badge></div>
                  </div>
                </div>
                <div className="ci-text" style={{ marginTop: 16, fontSize: '0.82rem', lineHeight: 1.6, color: 'var(--text-secondary)' }}>
                  Tier 2 deep analysis combined web research with structured intelligence and confirms the Tier 1 screen. <b style={{ color: 'var(--text-white)' }}>P(Win) {opp.pwin}</b> sits above the 55% bid threshold.
                </div>
              </div>
            </div>

            <CaptureReadiness opp={opp} />

            {/* partners */}
            <div className="card">
              <div className="card-h">
                <span className="ch-ic"><Icons.users /></span>
                <div><h3>Teaming Partners</h3><div className="sub">3-factor match engine</div></div>
              </div>
              <div className="card-b" style={{ paddingTop: 8, paddingBottom: 8 }}>
                {opp.partners.map((p, i) => (
                  <div className="partner" key={i}>
                    <div className="p-logo">{p.initials}</div>
                    <div className="p-main">
                      <div className="p-name">{p.name}</div>
                      <div className="p-meta"><span className="mono">{p.naics}</span><span>· {p.agency}</span><span>· {p.vehicle}</span></div>
                    </div>
                    <div className="p-match">
                      <div className="pm-num" style={{ color: window.fitColor(p.match) }}>{p.match}</div>
                      <div className="pm-label">Match</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* NAICS adjacency */}
            <div className="card">
              <div className="card-h">
                <span className="ch-ic"><Icons.network /></span>
                <div><h3>NAICS Adjacency</h3><div className="sub">3-tier classification</div></div>
              </div>
              <div className="card-b">
                <div className="flex wrap gap-8">
                  {opp.naicsAdj.map((n, i) => (
                    <span className={`pill ${n.cls}`} key={i} title={`${n.label} · ${n.tier}`}>{n.code}</span>
                  ))}
                </div>
                <div className="flex gap-16 mt-18 wrap">
                  <div className="flex center gap-8"><span className="pill accent" style={{ padding: '2px 8px' }}>●</span><span className="note">Same Group</span></div>
                  <div className="flex center gap-8"><span className="pill violet" style={{ padding: '2px 8px' }}>●</span><span className="note">Functional</span></div>
                  <div className="flex center gap-8"><span className="pill lilac" style={{ padding: '2px 8px' }}>●</span><span className="note">Cross-Sector</span></div>
                </div>
              </div>
            </div>

            {/* content studio */}
            <div className="card">
              <div className="card-h">
                <span className="ch-ic"><Icons.sparkles /></span>
                <div><h3>Content Studio</h3><div className="sub">Generate for this opportunity</div></div>
              </div>
              <div className="card-b">
                <div className="studio-grid">
                  {window.STUDIO_ACTIONS.map((a, i) => {
                    const Ic = Icons[a.ic];
                    return (
                      <button className="studio-act" key={i}>
                        <span className="sa-ic"><Ic /></span>
                        <div><div className="sa-t">{a.t}</div><div className="sa-d">{a.d}</div></div>
                      </button>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <NonFeatured opp={opp} go={go} />
      )}
      <div style={{ height: 12 }}></div>
    </div>
  );
}

// fallback for opps without full Tier-2 content
function NonFeatured({ opp, go }) {
  const Icons = window.Icons;
  const { TierBadge, Badge } = window;
  return (
    <div className="detail-grid">
      <div className="grid" style={{ gridTemplateColumns: '1fr' }}>
        <div className="card">
          <div className="card-h">
            <span className="ch-ic"><Icons.zap /></span>
            <div><h3>Tier 1 Auto-Screen</h3><div className="sub">Quick recommendation</div></div>
            <span className="ch-ic" style={{ marginLeft: 'auto' }}></span>
          </div>
          <div className="card-b">
            <div className="flex center gap-12">
              <TierBadge tier={opp.tier1} />
              <span className="note">screened automatically on intake from the {opp.agencyShort} record</span>
            </div>
            <div className="ci-text" style={{ marginTop: 16, fontSize: '0.84rem', lineHeight: 1.65, color: 'var(--text-secondary)' }}>
              This {opp.vehicle} opportunity scored <b style={{ color: window.fitColor(opp.fit) }}>{opp.fit}</b> on the 6-factor model
              {opp.tier1 === 'PURSUE' ? ' — strong enough to escalate to a full Tier 2 deep capture analysis.' :
               opp.tier1 === 'MONITOR' ? ' — worth watching, but below the threshold for immediate Tier 2 escalation.' :
               ' — below the pursuit threshold; tracked for awareness only.'}
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-h">
            <span className="ch-ic"><Icons.crosshair /></span>
            <div><h3>Tier 2 Deep Capture Analysis</h3><div className="sub">Black Hat CI · Capture readiness · Partner matching</div></div>
          </div>
          <div className="card-b" style={{ textAlign: 'center', padding: '40px 32px' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: '1.1rem', color: 'var(--text-white)', letterSpacing: '-0.01em' }}>Tier 2 analysis not yet run.</div>
            <div className="note" style={{ maxWidth: 420, margin: '12px auto 22px' }}>
              Escalate this opportunity to run the 11-section Shipley Black Hat report, 10-dimension capture readiness scoring, and 3-factor partner matching.
            </div>
            <button className="cta-act"><Icons.zap /> Run Tier 2 Deep Analysis</button>
          </div>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: '1fr' }}>
        <div className="card">
          <div className="card-h"><span className="ch-ic"><Icons.database /></span><div><h3>Source Records</h3><div className="sub">Deduplicated</div></div></div>
          <div className="card-b">
            <window.SrcDots active={opp.sources} />
            <div className="note mt-18">Found in {opp.sources.length} of 5 sources; merged into one enriched record.</div>
          </div>
        </div>
        <div className="card">
          <div className="card-h"><span className="ch-ic"><Icons.calendar /></span><div><h3>Key Facts</h3></div></div>
          <div className="card-b">
            <div className="cap-dims">
              <div className="flex between"><span className="note">Stage</span><Badge kind="muted">{opp.stage}</Badge></div>
              <div className="flex between"><span className="note">Due</span><span className="c-mono">{opp.due}</span></div>
              <div className="flex between"><span className="note">P(Win)</span><span className="c-mono" style={{ color: 'var(--accent)' }}>{opp.pwin}</span></div>
              <div className="flex between"><span className="note">NAICS</span><span className="c-mono">{opp.naics}</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.Detail = Detail;