// Career tab — political career timeline, fundraising history,
// pre-political career, and lifetime totals.

function TabCareer({ p, onNavigate }) {
  const career = p.career || [];
  const fund = p.fundraisingHistory || [];
  const stats = p.careerStats || {};

  if (career.length === 0 && fund.length === 0) {
    return (
      <section>
        <SectionHead title="Career" sub="The full record — every office, every campaign, every cycle."/>
        <EmptyState text="Career history not yet documented for this candidate." detail="Career data is sourced from Ballotpedia, Wikidata, and official bios."/>
      </section>
    );
  }

  return (
    <section>
      <SectionHead
        title="Career"
        sub={<>The full record. Every office, every campaign, every cycle. <strong>The card defaults to current term elsewhere; career data lives here.</strong></>}
        right={<SourceButton label="Ballotpedia · Wikidata · FEC"/>}
      />

      {Object.keys(stats).length > 0 && (
        <div className="cv-career-totals">
          <div className="cv-career-tot">
            <div className="cv-career-tot-l">Lifetime raised</div>
            <div className="cv-career-tot-v">${stats.lifetimeRaised}M</div>
          </div>
          <div className="cv-career-tot">
            <div className="cv-career-tot-l">Cycles run</div>
            <div className="cv-career-tot-v">{stats.cyclesRun}</div>
          </div>
          <div className="cv-career-tot">
            <div className="cv-career-tot-l">Won / lost</div>
            <div className="cv-career-tot-v cv-career-tot-wl">
              <span className="cv-career-w">{stats.electionsWon}</span>
              <span className="cv-career-sep">/</span>
              <span className="cv-career-l">{stats.electionsLost}</span>
            </div>
          </div>
          <div className="cv-career-tot">
            <div className="cv-career-tot-l">Offices held</div>
            <div className="cv-career-tot-v">{stats.officesHeld}</div>
          </div>
        </div>
      )}

      {career.length > 0 && (
        <>
          <h4 className="cv-h4"><span>Timeline</span><span className="cv-h4-sub">{career.length} entries</span></h4>
          <CareerTimeline entries={career}/>
        </>
      )}

      {fund.length > 0 && (
        <>
          <h4 className="cv-h4"><span><Term name="fec">Fundraising</Term> by cycle</span><span className="cv-h4-sub">FEC</span></h4>
          <FundraisingHistory entries={fund}/>
        </>
      )}
    </section>
  );
}

const CAREER_KIND = {
  office:       { color: "var(--cv-accent)",     label: "Office",      icon: "▮" },
  campaign:     { color: "var(--cv-nay)",        label: "Campaign",    icon: "◆" },
  education:    { color: "var(--cv-ink-2)",      label: "Education",   icon: "▲" },
  professional: { color: "var(--cv-muted)",      label: "Professional",icon: "●" },
};

function CareerTimeline({ entries }) {
  return (
    <ol className="cv-career-tl">
      {entries.map((e, i) => {
        const meta = CAREER_KIND[e.kind] || CAREER_KIND.professional;
        const range = e.end ? (e.year === e.end ? `${e.year}` : `${e.year}–${e.end}`)
                            : `${e.year}–present`;
        return (
          <li key={i} className={`cv-career-row cv-career-row-${e.kind}`}>
            <div className="cv-career-year">
              <span className="cv-career-year-v">{e.year}</span>
              {e.end && e.end !== e.year && (
                <span className="cv-career-year-range">→ {e.end === null ? "now" : e.end}</span>
              )}
              {!e.end && <span className="cv-career-year-range">→ now</span>}
            </div>
            <div className="cv-career-mark" style={{ "--mark-color": meta.color }} aria-hidden="true">
              <span className="cv-career-dot"/>
              {i < entries.length - 1 && <span className="cv-career-line"/>}
            </div>
            <div className="cv-career-body">
              <div className="cv-career-kind" style={{ color: meta.color }}>
                <span className="cv-career-icon" aria-hidden="true">{meta.icon}</span>
                {meta.label}
                <span className="cv-career-range-mono">· {range}</span>
              </div>
              <div className="cv-career-role">{e.role}</div>
              <div className="cv-career-where">{e.where}</div>
              {e.result && (
                <div className={`cv-career-result cv-career-result-${(e.result || "").toLowerCase().startsWith("win") ? "win" : "loss"}`}>
                  {e.result}
                </div>
              )}
              {e.detail && <div className="cv-career-detail">{e.detail}</div>}
            </div>
            <SourceLink label="bio"/>
          </li>
        );
      })}
    </ol>
  );
}

function FundraisingHistory({ entries }) {
  const max = Math.max(...entries.map(e => e.raised), 1);
  return (
    <div className="cv-fundh">
      {entries.map((e, i) => (
        <div key={i} className="cv-fundh-row">
          <div className="cv-fundh-cycle">{e.cycle}</div>
          <div className="cv-fundh-bar">
            <div className="cv-fundh-bar-fill" style={{ width: `${(e.raised / max) * 100}%` }}/>
            <span className="cv-fundh-bar-v">${e.raised}M</span>
          </div>
          <div className="cv-fundh-meta">
            <span className="cv-fundh-meta-small">{e.smallDollar}% small-$</span>
            <span className="cv-fundh-meta-pac">{e.pacShare}% PAC</span>
          </div>
          <div className="cv-fundh-status">{e.status}</div>
          <SourceLink label=""/>
        </div>
      ))}
      <div className="cv-fundh-foot">
        <SourceIcon/>
        Every dollar from <Term name="fec">FEC</Term> itemized contributions. Self-funding is broken out where it
        exceeds 10% of the total.
      </div>
    </div>
  );
}

Object.assign(window, { TabCareer, FundraisingHistory });