/* =========================================================================
   TAXR — Certificate of Completion
   Clearly a course-completion record, NOT a credential or license.
   ========================================================================= */
function Certificate({ nav, account, progress }) {
  const D = window.TAXR;
  const testable = D.phases.flatMap((p) => p.modules).filter((m) => !m.capstone);
  const passed = testable.filter((m) => (progress.tests[m.id] || 0) >= 70).length;
  const earned = passed >= testable.length;
  const [demoUnlock, setDemoUnlock] = useState(false);
  const unlocked = earned || demoUnlock;

  const today = new Date().toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" });
  const name = account.guest ? "Your Name" : account.name;

  return (
    <div className="wrap" style={{ padding: "32px 32px 80px", maxWidth: 1000, margin: "0 auto" }}>
      <button className="row gap-8 fs-14 t-dim" onClick={() => nav("dashboard")} style={{ marginBottom: 22 }}><Icon name="back" size={16} /> Back to track</button>

      {!unlocked && (
        <div className="card card-pad" style={{ marginBottom: 18, display: "grid", gridTemplateColumns: "1fr auto", gap: 18, alignItems: "center" }}>
          <div className="row gap-14">
            <span style={{ width: 44, height: 44, borderRadius: 12, display: "grid", placeItems: "center", background: "var(--blue-soft)", color: "var(--blue-bright)", flex: "none" }}><Icon name="lock" size={20} /></span>
            <div className="col" style={{ gap: 6 }}>
              <span className="serif" style={{ fontSize: 19 }}>Finish the course to unlock your certificate</span>
              <span className="fs-14 t-muted">{passed} of {testable.length} module tests passed</span>
              <div style={{ width: 220, marginTop: 4 }}><Progress value={(passed / testable.length) * 100} thin /></div>
            </div>
          </div>
          <Button variant="ghost" size="sm" onClick={() => setDemoUnlock(true)}><Icon name="spark" size={15} style={{ color: "var(--amber)" }} /> Preview unlocked</Button>
        </div>
      )}

      {/* the certificate paper (warm off-white in every theme, like a real certificate) */}
      <div id="taxr-cert" style={{ position: "relative", background: "var(--light)", color: "var(--on-light)", borderRadius: 8, padding: 4,
        boxShadow: "var(--shadow-lg)", overflow: "hidden", opacity: unlocked ? 1 : 0.72 }}>
        {/* ornamental frame */}
        <div style={{ border: "2px solid rgba(58,109,240,0.5)", borderRadius: 6, padding: "52px 60px", position: "relative", outline: "1px solid rgba(0,0,0,0.10)", outlineOffset: 6 }}>
          {/* watermark for preview */}
          {!unlocked && <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", pointerEvents: "none" }}>
            <span className="mono" style={{ fontSize: 90, letterSpacing: ".2em", color: "rgba(0,0,0,0.05)", transform: "rotate(-14deg)", textTransform: "uppercase" }}>Preview</span>
          </div>}

          <div className="row spread" style={{ alignItems: "flex-start", marginBottom: 28 }}>
            <div className="row gap-10" style={{ alignItems: "center" }}>
              <span style={{ fontSize: 26 }}>🐧</span>
              <div className="col">
                <span style={{ fontFamily: "var(--serif)", fontWeight: 700, fontSize: 22, letterSpacing: "-0.02em", color: "var(--on-light)" }}>Taxr</span>
                <span className="mono" style={{ fontSize: 10, letterSpacing: ".2em", textTransform: "uppercase", color: "var(--on-light-mut)" }}>A Waddl3 Pro Tool</span>
              </div>
            </div>
            <span className="mono" style={{ fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--on-light-mut)" }}>No. TX-2026-{(name.length * 7 + 1042) % 9000 + 1000}</span>
          </div>

          <div className="col center" style={{ textAlign: "center" }}>
            <span className="mono" style={{ fontSize: 12, letterSpacing: ".3em", textTransform: "uppercase", color: "var(--on-light-mut)", marginBottom: 18 }}>Certificate of Completion</span>
            <p style={{ fontSize: 15, color: "var(--on-light-mut)" }}>This certifies that</p>
            <h1 style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 52, letterSpacing: "-0.02em", color: "var(--on-light)", margin: "10px 0 6px" }}>{name}</h1>
            <div style={{ width: 280, height: 1, background: "rgba(0,0,0,0.18)", margin: "6px 0 22px" }} />
            <p style={{ fontSize: 17, lineHeight: 1.6, maxWidth: 520, color: "var(--on-light)" }}>
              has successfully completed <strong>Taxr — Zero to Enrolled Agent</strong>, covering all three phases, 18 modules and 94 lessons, passing every module assessment.
            </p>

            {/* seal */}
            <div style={{ position: "relative", width: 92, height: 92, margin: "30px 0 22px", display: "grid", placeItems: "center" }}>
              <svg width="92" height="92" viewBox="0 0 92 92">
                <circle cx="46" cy="46" r="44" fill="none" stroke="rgba(58,109,240,0.55)" strokeWidth="2" />
                <circle cx="46" cy="46" r="36" fill="none" stroke="rgba(58,109,240,0.3)" strokeWidth="1" />
              </svg>
              <div style={{ position: "absolute", color: "#2f63e6" }}><Icon name="trophy" size={34} /></div>
            </div>

            <div className="row" style={{ gap: 60, marginTop: 8, alignItems: "flex-end" }}>
              <div className="col center">
                <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, color: "var(--on-light)" }}>Pip</span>
                <div style={{ width: 150, height: 1, background: "rgba(0,0,0,0.25)", margin: "4px 0 6px" }} />
                <span className="mono" style={{ fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--on-light-mut)" }}>Performance Improvement Penguin</span>
              </div>
              <div className="col center">
                <span style={{ fontFamily: "var(--serif)", fontSize: 20, color: "var(--on-light)" }}>{today}</span>
                <div style={{ width: 150, height: 1, background: "rgba(0,0,0,0.25)", margin: "4px 0 6px" }} />
                <span className="mono" style={{ fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--on-light-mut)" }}>Date completed</span>
              </div>
            </div>

            {/* the crucial clarification, ON the certificate itself */}
            <p style={{ fontSize: 12, lineHeight: 1.6, maxWidth: 600, color: "var(--on-light-mut)", marginTop: 34, paddingTop: 18, borderTop: "1px solid rgba(0,0,0,0.12)" }}>
              This is a record of completing the Taxr training course. It is <strong>not</strong> a professional credential, license, or authorization to prepare tax returns for pay or to represent taxpayers. To do so you must obtain an IRS PTIN; the Enrolled Agent credential requires passing the IRS Special Enrollment Examination and a suitability check, plus any applicable state requirements. Taxr is not affiliated with or endorsed by the IRS.
            </p>
          </div>
        </div>
      </div>

      {/* actions */}
      <div className="row spread" style={{ marginTop: 22 }}>
        <DisclaimerBand variant="inline" />
      </div>
      <div className="row gap-12" style={{ marginTop: 16, justifyContent: "flex-end" }}>
        <Button variant="ghost" onClick={() => nav("dashboard")}>Back to track</Button>
        <Button arrow disabled={!unlocked} onClick={() => window.print()}><Icon name="shield" size={16} /> Download / print</Button>
      </div>
    </div>
  );
}

Object.assign(window, { Certificate });