// Project Overview — the primary briefing page.

function OverviewSection({ pdata, client, contract, stage }) {
  return (
    <>
      {/* Momentum band — the strongest visual surface on the page. */}
      <div style={{ margin: '0 24px 20px' }}>
        <ProjectMomentum pdata={pdata} />
      </div>

    <div className="ov-grid">
      {/* MAIN COLUMN — editorial / document composition. One shared
          reading surface, hairline dividers between sections. */}
      <div className="ov-main">
        <article className="ov-doc">

          {/* Goal + Vision as a single editorial pair, no card chrome,
              no decorative quote mark. */}
          <section className="ov-sec ov-sec-lead">
            <div className="ov-lead-eyebrow">Project Goal</div>
            <p className="ov-lead">{pdata.goal}</p>
            <div className="ov-lead-vision">
              <span className="ov-lead-vision-lbl">Vision</span>
              <span>{pdata.vision}</span>
            </div>
          </section>

          {/* Problems */}
          <section className="ov-sec">
            <h3 className="ov-sec-title">Problems we&apos;re solving</h3>
            <div className="ov-problems">
              {pdata.problems.map((p, i) => (
                <div className="ov-problem" key={i}>
                  <div className="ov-problem-num">{String(i + 1).padStart(2, '0')}</div>
                  <div>
                    <div className="ov-problem-title">{p.title}</div>
                    <div className="ov-problem-body">{p.body}</div>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* Target users */}
          <section className="ov-sec">
            <h3 className="ov-sec-title">Target users</h3>
            <div className="ov-users">
              {pdata.targetUsers.map((u, i) => (
                <div className="ov-user" key={i}>
                  <div className="ov-user-mark">
                    {u.name.split(' ').slice(0, 2).map(w => w[0]).join('').toUpperCase()}
                  </div>
                  <div className="ov-user-meta">
                    <div className="ov-user-name">{u.name}</div>
                    <div className="ov-user-note">{u.note}</div>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* Core use cases — quiet numbered list, no cards */}
          <section className="ov-sec">
            <h3 className="ov-sec-title">Core use cases</h3>
            <ol className="ov-uses">
              {pdata.useCases.map((uc) => (
                <li className="ov-use" key={uc.n}>
                  <span className="ov-use-num">{String(uc.n).padStart(2, '0')}</span>
                  <div className="ov-use-body">
                    <div className="ov-use-title">{uc.title}</div>
                    <div className="ov-use-lines">
                      <div><span className="lbl">Given</span> <span>{uc.given}</span></div>
                      <div><span className="lbl">When</span>  <span>{uc.when}</span></div>
                      <div><span className="lbl">Then</span>  <span>{uc.then}</span></div>
                    </div>
                  </div>
                </li>
              ))}
            </ol>
          </section>

          {/* Key features — kept as tiles (they carry state) but with the
              new subdued section header treatment. */}
          <section className="ov-sec">
            <div className="ov-sec-head-row">
              <h3 className="ov-sec-title">Key features</h3>
              <a className="ov-sec-link" href={`#/projects/${pdata.id}/features`}>Open Features →</a>
            </div>
            <div className="kfeat-grid">
              {pdata.features.slice(0, 6).map((f) => (
                <a href={`#/projects/${pdata.id}/features`} className="kfeat-tile" key={f.id}>
                  <div style={{ minWidth: 0, flex: '1 1 auto' }}>
                    <div className="kf-title truncate">{f.title}</div>
                    <div className="kf-sub">{f.owner} · {f.stage}</div>
                  </div>
                  <div className="kf-prog">
                    <ProgressBar value={f.progress} tone={featureProgTone(f.tone)} />
                  </div>
                  <div className="kf-num tabular">{f.progress}%</div>
                </a>
              ))}
            </div>
          </section>

          {/* Recent decisions — inline list, no card wrapper */}
          <section className="ov-sec">
            <div className="ov-sec-head-row">
              <h3 className="ov-sec-title">Recent decisions</h3>
              <a className="ov-sec-link">All decisions</a>
            </div>
            <div className="ov-decisions">
              {pdata.decisions.slice(0, 3).map((d, i) => (
                <div className="ov-decision" key={i}>
                  <div className="ov-decision-head">
                    <Label tone={d.tone === 'green' ? 'green' : d.tone === 'yellow' ? 'yellow' : 'red'} dot size="sm">{d.status}</Label>
                    <span className="when">{d.when}</span>
                  </div>
                  <div className="ov-decision-title">{d.title}</div>
                  <div className="ov-decision-ctx">{d.ctx}</div>
                  <div className="ov-decision-meta">
                    <AvatarStack names={d.participants} max={3} size="sm" />
                    <span>{d.owner}</span>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* Recent activity — inline list, no card wrapper */}
          <section className="ov-sec">
            <div className="ov-sec-head-row">
              <h3 className="ov-sec-title">Recent activity</h3>
              <a className="ov-sec-link">Activity log</a>
            </div>
            <div className="ov-activity">
              {pdata.activity.map((g, i) => (
                <div key={i} className="ov-activity-group">
                  <div className="ov-activity-day">{g.day}</div>
                  {g.items.map((it, j) => (
                    <div className="ov-activity-row" key={j}>
                      <div className="ov-activity-text">
                        <b>{it.a}</b> <span>{it.v}</span> <b>{it.what}</b><span>{it.extra}</span>
                      </div>
                      <div className="ov-activity-time">{it.time}</div>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </section>

          {/* Business — compact secondary summary. Not a card stack.
              Keeps the Business/Pricing/Metrics/Assumptions content but
              at reading-doc weight, subordinate to execution surfaces. */}
          {pdata.business && <BusinessSection business={pdata.business} />}
        </article>
      </div>

      {/* RAIL COLUMN — differentiated hierarchy. Current stage is the
          only surfaced card; everything else recedes to quiet blocks
          separated by hairline dividers on a shared rail surface. */}
      <div className="ov-rail">
        {/* Current stage — the strongest rail surface. Kept as a
            first-class card with the blue accent rail. */}
        <div className="cs-card">
          <div className="cs-eyebrow">Current stage</div>
          <div className="cs-of">Stage {pdata.currentStage} of {pdata.stages.length}</div>
          <div className="cs-title">{String(pdata.currentStage).padStart(2, '0')} · {stage.name}</div>
          <div className="cs-goal">{stage.goal}</div>
          <div className="cs-row">
            <Ring percent={estimateStageProgress(pdata, stage)} color="var(--primary-01)" size={44} />
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '-0.02em', textTransform: 'uppercase', fontWeight: 700 }}>Target</div>
              <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.015em' }}>{stage.end}</div>
            </div>
            <div style={{ marginLeft: 'auto' }}>
              <a className="link" href={`#/projects/${pdata.id}/stages`} style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 600, padding: '6px 10px', borderRadius: 8 }}>See stages →</a>
            </div>
          </div>
        </div>

        {/* Quiet rail blocks — no per-block card chrome, just a shared
            surface with hairline dividers. */}
        <div className="ov-rail-blocks">
          {/* Next milestones */}
          <div className="ov-rail-block">
            <div className="ov-rail-head">
              <h4>Next milestones</h4>
            </div>
            <div className="ov-rail-milestones">
              {upcomingMilestones(pdata).map((m, i) => (
                <div className="ov-milestone" key={i}>
                  <div className="ov-milestone-date">
                    <span className="m">{m.month}</span>
                    <span className="d">{m.day}</span>
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <div className="ov-milestone-name truncate">{m.name}</div>
                    <div className="ov-milestone-sub truncate">{m.sub}</div>
                  </div>
                  <div className="ov-milestone-in">in {m.inDays}d</div>
                </div>
              ))}
            </div>
          </div>

          {/* Risks & blockers */}
          <div className="ov-rail-block">
            <div className="ov-rail-head">
              <h4>Risks &amp; blockers</h4>
              {pdata.risks.length > 0 && <span className="ov-rail-count">{pdata.risks.length}</span>}
            </div>
            {pdata.risks.length === 0 ? (
              <div className="ov-rail-empty">No open risks on this project.</div>
            ) : (
              <div className="ov-rail-risks">
                {pdata.risks.map((r, i) => (
                  <div className="ov-risk" key={i}>
                    <div className={`ov-risk-dot ${r.state}`} />
                    <div className="ov-risk-body">
                      <div className="ov-risk-title">{r.title}</div>
                      <div className="ov-risk-note">{r.note}</div>
                      <div className="ov-risk-owner">{r.owner}</div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Related contract */}
          {contract && (
            <div className="ov-rail-block">
              <div className="ov-rail-head">
                <h4>Related contract</h4>
                <a className="ov-rail-link" href="#/contracts">Open</a>
              </div>
              <div className="ov-contract">
                <div className="ov-contract-name truncate">{contract.title}</div>
                <div className="ov-contract-meta">
                  <span className="mono">{contract.id}</span>
                  <span>·</span>
                  <span>{contract.value}</span>
                  {contract.reminder && (
                    <span className={`reminder-chip ${contract.reminder}`}>
                      {contract.reminder === 'expiring' ? contract.expiresIn.replace('Expires in ', '') : 'In legal'}
                    </span>
                  )}
                </div>
                <div className="ov-contract-dates">
                  <div><b>{contract.start}</b><span>Start</span></div>
                  <div><b>{contract.end}</b><span>End</span></div>
                </div>
              </div>
            </div>
          )}

          {/* Team */}
          <div className="ov-rail-block">
            <div className="ov-rail-head">
              <h4>Team</h4>
              <a className="ov-rail-link">Manage</a>
            </div>
            <div className="ov-team">
              {pdata.team.map((t, i) => (
                <div className="ov-team-item" key={i}>
                  <Avatar name={t.name} size="sm" />
                  <div style={{ minWidth: 0 }}>
                    <div className="ov-team-name truncate">{t.name}</div>
                    <div className="ov-team-role truncate">{t.role}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
    </>
  );
}

// ---------- helpers ----------

function featureKindTone(f) {
  if (f.tone === 'red')    return 'kind-peach';
  if (f.tone === 'yellow') return 'kind-cream';
  if (f.tone === 'green')  return 'kind-mint';
  if (f.tone === 'blue')   return 'kind-sky';
  if (f.tone === 'purple') return 'kind-lav';
  return 'kind-sky';
}
function featureProgTone(t) {
  return t === 'red' ? 'red' : t === 'green' ? 'green' : t === 'yellow' ? 'warn' : t === 'purple' ? 'purple' : 'blue';
}
function activityTone(t) {
  return { brand: 'lav', blue: 'lav', green: 'mint', red: 'peach', orange: 'cream', purple: 'lav' }[t] || 'peach';
}

// Estimate progress inside the current stage (0-100)
function estimateStageProgress(pdata, stage) {
  // Very rough: overall project progress vs a linear stage split.
  const per = 100 / pdata.stages.length;
  const stageStart = (stage.n - 1) * per;
  const withinStage = ((pdata.progress - stageStart) / per) * 100;
  return Math.max(5, Math.min(95, Math.round(withinStage)));
}

// Assemble upcoming milestones from stages + targetMilestone
function upcomingMilestones(pdata) {
  const items = [];
  const t = pdata.targetMilestone;
  items.push({
    name: t.name,
    sub: 'Pilot readiness',
    month: t.date.split(',')[0].split(' ')[1] || 'OCT',
    day: (t.date.match(/\d+/) || ['??'])[0],
    inDays: t.when,
  });
  // add two more from stages
  const next = pdata.stages.filter(s => s.status === 'upcoming').slice(0, 2);
  next.forEach((s, i) => {
    const parts = s.start.split(' ');
    items.push({
      name: `Stage ${String(s.n).padStart(2, '0')} kickoff — ${s.name}`,
      sub: `${s.duration} · ${s.owner}`,
      month: (parts[0] || '').toUpperCase().slice(0, 3),
      day: (parts[1] || '').replace(',', ''),
      inDays: 7 + i * 30,
    });
  });
  return items.slice(0, 3);
}

// -----------------------------------------------------------------
// Business — compact, secondary section at the end of the Overview
// document. No per-subsection cards. Reads as an appendix that
// doesn't compete with execution status.
// -----------------------------------------------------------------
function BusinessSection({ business }) {
  return (
    <section className="ov-sec ov-biz">
      <div className="ov-sec-head-row">
        <h3 className="ov-sec-title">Business</h3>
        <span className="ov-sec-caption">Summary · strategy · pricing</span>
      </div>

      {/* Prose — 2x2 with hairline dividers, not cards */}
      <div className="ov-biz-prose">
        <div>
          <div className="ov-biz-label">Opportunity</div>
          <p>{business.opportunity}</p>
        </div>
        <div>
          <div className="ov-biz-label">Value proposition</div>
          <p>{business.value}</p>
        </div>
        <div>
          <div className="ov-biz-label">Target customer</div>
          <p>{business.customer}</p>
        </div>
        <div>
          <div className="ov-biz-label">Business model</div>
          <p>{business.model}</p>
        </div>
      </div>

      {/* Pricing — compact 3-row list, no tier cards */}
      <div className="ov-biz-sub">
        <div className="ov-biz-sublabel">Pricing</div>
        <ul className="ov-biz-pricing">
          {business.pricing.map((p, i) => (
            <li key={i}>
              <span className="tier">{p.tier}</span>
              <span className="note">{p.note}</span>
              <span className="mono price">{p.price}</span>
            </li>
          ))}
        </ul>
      </div>

      {/* Success metrics — simple table-like list */}
      <div className="ov-biz-sub">
        <div className="ov-biz-sublabel">Success metrics</div>
        <ul className="ov-biz-metrics">
          {business.metrics.map((m, i) => (
            <li key={i}>
              <span className="name">{m.name}</span>
              <span className="mono target">
                <span className="from">{m.from}</span>
                <span className="arrow">→</span>
                <span className="to">{m.to}</span>
              </span>
              <span className="when">{m.when}</span>
            </li>
          ))}
        </ul>
      </div>

      {/* Assumptions — a plain inline list */}
      <div className="ov-biz-sub">
        <div className="ov-biz-sublabel">Key assumptions</div>
        <ul className="ov-biz-assumptions">
          {business.assumptions.map((a, i) => (
            <li key={i}>{a}</li>
          ))}
        </ul>
      </div>
    </section>
  );
}

Object.assign(window, { OverviewSection, BusinessSection });