/* passport.jsx — EU Skills Passport style credential */

/* Real share: copy a genuine link to the clipboard (no fake "copied" toast). */
function sharePassport(toast) {
  const url = location.origin + location.pathname + "#passport";
  const ok = () => toast("Share link copied to clipboard", "link");
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(url).then(ok).catch(() => toast(url, "link"));
  } else {
    toast(url, "link");
  }
}

/* deterministic faux-QR */
function FauxQR({ size = 96, seed = "vanharen", fg = "#1d3d7c", bg = "#fff" }) {
  const N = 21;
  let h = 0; for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
  const rnd = (i) => { let x = (h ^ (i * 2654435761)) >>> 0; x ^= x << 13; x ^= x >>> 17; x ^= x << 5; return ((x >>> 0) % 100) / 100; };
  const cells = [];
  const isFinder = (r, c) => (r < 7 && c < 7) || (r < 7 && c > N - 8) || (r > N - 8 && c < 7);
  for (let r = 0; r < N; r++) for (let c = 0; c < N; c++) {
    if (isFinder(r, c)) continue;
    if (rnd(r * N + c) > 0.55) cells.push([r, c]);
  }
  const finder = (x, y) => (
    <g key={x + "-" + y}>
      <rect x={x} y={y} width="7" height="7" fill={fg} />
      <rect x={x + 1} y={y + 1} width="5" height="5" fill={bg} />
      <rect x={x + 2} y={y + 2} width="3" height="3" fill={fg} />
    </g>
  );
  return (
    <svg width={size} height={size} viewBox={`0 0 ${N} ${N}`} style={{ borderRadius: 8, background: bg, display: "block" }} shapeRendering="crispEdges">
      <rect width={N} height={N} fill={bg} />
      {cells.map(([r, c], i) => <rect key={i} x={c} y={r} width="1" height="1" fill={fg} />)}
      {finder(0, 0)}{finder(N - 7, 0)}{finder(0, N - 7)}
    </svg>
  );
}

function PassportCard() {
  return (
    <div className="card" style={{ padding: 0, overflow: "hidden", position: "relative", background: "linear-gradient(135deg,#1d3d7c,#0f2756 60%,#12325f)", border: "none", color: "#fff", boxShadow: "var(--shadow-lg)" }}>
      {/* guilloché hex texture */}
      <div style={{ position: "absolute", inset: 0, opacity: .5, backgroundImage: "radial-gradient(rgba(148,191,230,.4) 1px, transparent 1.4px)", backgroundSize: "16px 16px", maskImage: "linear-gradient(120deg,#000,transparent 75%)", WebkitMaskImage: "linear-gradient(120deg,#000,transparent 75%)" }} />
      <div style={{ position: "absolute", right: -70, top: -60, width: 300, height: 300, clipPath: "polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", background: "radial-gradient(circle at 40% 35%, rgba(59,193,206,.35), transparent 65%)" }} />
      <div style={{ position: "relative", padding: 26 }}>
        <div className="between" style={{ marginBottom: 22 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{ fontSize: 26 }}>🇪🇺</span>
            <div>
              <div className="eyebrow" style={{ color: "var(--vh-blue-200)", letterSpacing: ".14em", lineHeight: 1.4 }}>European Skills Passport</div>
              <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 15.5, marginTop: 4, lineHeight: 1.1 }}>Digital Credential Record</div>
            </div>
          </div>
          <Logo height={26} white />
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 24, alignItems: "center" }}>
          {/* portrait */}
          <div style={{ width: 96, height: 116, borderRadius: 12, overflow: "hidden", position: "relative", background: "linear-gradient(135deg,#2a5298,#1d3d7c)", border: "2px solid rgba(255,255,255,.25)", display: "grid", placeItems: "center" }}>
            <span style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 40, color: "rgba(255,255,255,.9)" }}>{LEARNER.initials}</span>
            <div style={{ position: "absolute", inset: 0, backgroundImage: "repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 6px,transparent 6px 12px)" }} />
          </div>
          {/* identity */}
          <div style={{ display: "grid", gap: 14 }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--vh-blue-200)", fontWeight: 600 }}>Holder</div>
              <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 24, marginTop: 2 }}>{LEARNER.name}</div>
              <div style={{ color: "rgba(255,255,255,.78)", fontSize: 13.5, marginTop: 2 }}>{LEARNER.role} · {LEARNER.org}</div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3,auto)", gap: "14px 28px", width: "fit-content" }}>
              {[["Passport no.", "EU-SP-44821-MV"], ["Issued", "12 May 2026"], ["EQF level", "Level 4"], ["Authority", "Van Haren Certify"], ["Valid through", "May 2029"], ["Status", "Verified"]].map(([k, v]) => (
                <div key={k}>
                  <div style={{ fontSize: 10.5, letterSpacing: ".09em", textTransform: "uppercase", color: "var(--vh-blue-200)", fontWeight: 600, whiteSpace: "nowrap" }}>{k}</div>
                  <div style={{ fontSize: 13.5, fontWeight: 600, marginTop: 3, display: "flex", alignItems: "center", gap: 5 }}>
                    {v === "Verified" && <span style={{ width: 7, height: 7, borderRadius: 99, background: "var(--vh-teal)", boxShadow: "0 0 0 3px rgba(59,193,206,.3)" }} />}
                    {v}
                  </div>
                </div>
              ))}
            </div>
          </div>
          {/* qr */}
          <div style={{ display: "grid", gap: 8, justifyItems: "center" }}>
            <div style={{ padding: 7, background: "#fff", borderRadius: 12 }}><FauxQR size={92} seed="EU-SP-44821-MV" /></div>
            <div style={{ fontSize: 10.5, color: "var(--vh-blue-200)", display: "flex", alignItems: "center", gap: 5, fontWeight: 600 }}><Icon name="qr" size={12} />Verification QR · demo</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function CompetencyRow({ s }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16, padding: "14px 0" }}>
      <div style={{ position: "relative", width: 48, height: 53, flex: "none" }}>
        <div className="hex-flat" style={{ position: "absolute", inset: 0, clipPath: "polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", background: s.color, display: "grid", placeItems: "center" }}>
          <Icon name={s.icon} size={20} style={{ color: "#fff" }} />
        </div>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="between" style={{ marginBottom: 7 }}>
          <div>
            <span style={{ fontSize: 15, fontWeight: 600 }}>{s.name}</span>
            <span className="tag" style={{ marginLeft: 10, fontSize: 11 }}>{s.ecf}</span>
          </div>
          <span className="dim" style={{ fontSize: 13, fontWeight: 700, fontFamily: "var(--display)" }}>Level {s.level}<span style={{ opacity: .5 }}> / {s.max}</span></span>
        </div>
        {/* segmented level meter */}
        <div style={{ display: "flex", gap: 5 }}>
          {Array.from({ length: s.max }).map((_, i) => (
            <div key={i} style={{ flex: 1, height: 8, borderRadius: 4, background: i < s.level ? s.color : "var(--surface-3)" }} />
          ))}
        </div>
      </div>
    </div>
  );
}

function CertCard({ c }) {
  return (
    <div className="card" style={{ padding: 18, display: "flex", gap: 15, alignItems: "center", opacity: c.pending ? .85 : 1 }}>
      <Badge icon={c.icon} size={56} color={c.color} ink="#fff" style="shield" locked={false} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="between">
          <h4 style={{ fontSize: 15.5, fontWeight: 600 }}>{c.title}</h4>
          {c.pending
            ? <span className="tag" style={{ fontSize: 11 }}><Icon name="clock" size={12} />In progress</span>
            : <span className="tag" style={{ background: "color-mix(in oklab,var(--vh-teal),transparent 86%)", color: "var(--vh-blue-600)", fontSize: 11 }}><Icon name="checkCircle" size={12} />Verified</span>}
        </div>
        <div className="dim" style={{ fontSize: 12.5, marginTop: 4 }}>{c.issuer}</div>
        <div style={{ display: "flex", gap: 16, marginTop: 9, fontSize: 12 }}>
          <span className="muted"><b style={{ fontFamily: "var(--display)" }}>{c.level}</b></span>
          <span className="muted">{c.date}</span>
          <span className="dim" style={{ fontFamily: "ui-monospace,monospace" }}>{c.credential}</span>
        </div>
      </div>
    </div>
  );
}

function Passport({ t, toast }) {
  return (
    <div className="vh-in">
      <PageHead
        eyebrow="Credentials"
        title="Skills Passport"
        sub="A verifiable, EU-aligned record of everything you've earned — competencies, certificates and completed learning, ready to share."
        right={
          <div style={{ display: "flex", gap: 10 }}>
            <button className="btn btn-outline" onClick={() => sharePassport(toast)}><Icon name="share" size={16} />Share</button>
            <button className="btn btn-pri" onClick={() => window.print()}><Icon name="download" size={16} />Export PDF</button>
          </div>
        }
      />

      <div style={{ marginBottom: 22 }}><PassportCard /></div>

      {/* Spider diagrams */}
      <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:20, marginBottom:20 }}>
        {/* Hard skills */}
        <div className="card" style={{ padding:"22px 22px 16px" }}>
          <div className="between" style={{ marginBottom:4 }}>
            <h3 style={{ fontSize:16, fontWeight:700 }}>Hard Skills</h3>
            <span className="tag"><Icon name="layers" size={13}/>Technical</span>
          </div>
          <p className="dim" style={{ fontSize:12.5, marginBottom:12 }}>ICB4 practice competencies &amp; technical domains</p>
          <RadarChart size={280} max={100} fill="var(--vh-blue-500)" data={[
            { short:"PM",          pct:72,  color:"var(--vh-blue-500)" },
            { short:"Risk",        pct:78,  color:"var(--vh-blue-500)" },
            { short:"Scope",       pct:65,  color:"var(--vh-blue-500)" },
            { short:"Finance",     pct:55,  color:"var(--vh-blue-500)" },
            { short:"Scheduling",  pct:68,  color:"var(--vh-blue-500)" },
            { short:"Procurement", pct:48,  color:"var(--vh-blue-500)" },
            { short:"Quality",     pct:60,  color:"var(--vh-blue-500)" },
            { short:"Agile",       pct:64,  color:"var(--vh-blue-500)" },
          ]} />
          <div style={{ display:"flex", gap:10, justifyContent:"center", flexWrap:"wrap", marginTop:8 }}>
            {[["var(--vh-blue-500)","Current"]].map(([c,l])=>(
              <div key={l} style={{ display:"flex", alignItems:"center", gap:5, fontSize:12, color:"var(--ink-2)" }}>
                <div style={{ width:10, height:10, borderRadius:"50%", background:c }} />{l}
              </div>
            ))}
          </div>
        </div>

        {/* Soft skills */}
        <div className="card" style={{ padding:"22px 22px 16px" }}>
          <div className="between" style={{ marginBottom:4 }}>
            <h3 style={{ fontSize:16, fontWeight:700 }}>Soft Skills</h3>
            <span className="tag" style={{ background:"color-mix(in oklab,#7a5ad6,transparent 86%)", color:"#7a5ad6" }}><Icon name="users" size={13}/>Behavioural</span>
          </div>
          <p className="dim" style={{ fontSize:12.5, marginBottom:12 }}>ICB4 people competencies &amp; interpersonal skills</p>
          <RadarChart size={280} max={100} fill="#7a5ad6" data={[
            { short:"Leadership",      pct:60,  color:"#7a5ad6" },
            { short:"Communication",   pct:74,  color:"#7a5ad6" },
            { short:"Stakeholders",    pct:70,  color:"#7a5ad6" },
            { short:"Negotiation",     pct:52,  color:"#7a5ad6" },
            { short:"Conflict",        pct:58,  color:"#7a5ad6" },
            { short:"Teamwork",        pct:76,  color:"#7a5ad6" },
            { short:"Resilience",      pct:64,  color:"#7a5ad6" },
            { short:"Self-mgmt",       pct:80,  color:"#7a5ad6" },
          ]} />
          <div style={{ display:"flex", gap:10, justifyContent:"center", flexWrap:"wrap", marginTop:8 }}>
            {[["#7a5ad6","Current"]].map(([c,l])=>(
              <div key={l} style={{ display:"flex", alignItems:"center", gap:5, fontSize:12, color:"var(--ink-2)" }}>
                <div style={{ width:10, height:10, borderRadius:"50%", background:c }} />{l}
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.25fr 1fr", gap: 20 }}>
        {/* competencies */}
        <div className="card" style={{ padding: 24 }}>
          <div className="between" style={{ marginBottom: 6 }}>
            <h3 style={{ fontSize: 18, fontWeight: 700 }}>Competency profile</h3>
            <span className="tag"><Icon name="eu" size={13} />e-CF aligned</span>
          </div>
          <p className="dim" style={{ fontSize: 13, marginBottom: 6 }}>Proficiency levels mapped to the European e-Competence Framework.</p>
          <div style={{ display: "flex", flexDirection: "column" }}>
            {SKILLS.map((s, i) => (
              <div key={s.id} style={{ borderTop: i ? "1px solid var(--line)" : "none" }}><CompetencyRow s={s} /></div>
            ))}
          </div>
        </div>

        {/* right column */}
        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          <div>
            <div className="between" style={{ marginBottom: 12 }}>
              <h3 style={{ fontSize: 18, fontWeight: 700 }}>Certificates</h3>
              <span className="dim" style={{ fontSize: 13, fontWeight: 600 }}>{CERTS.filter(c => !c.pending).length} verified</span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {CERTS.map(c => <CertCard key={c.id} c={c} />)}
            </div>
          </div>

          {/* completed learning summary */}
          <div className="card" style={{ padding: 22, background: "linear-gradient(135deg,var(--vh-blue-50),var(--surface))" }}>
            <h3 style={{ fontSize: 16, fontWeight: 700, marginBottom: 14 }}>Contributing learning</h3>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {COURSES.filter(c => c.progress === 100 || c.certified).concat(COURSES.filter(c => c.progress > 0 && c.progress < 100).slice(0, 2)).map(c => (
                <div key={c.id} style={{ display: "flex", alignItems: "center", gap: 11 }}>
                  <div className="hex-flat" style={{ width: 30, height: 30, flex: "none", clipPath: "polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", background: c.color, display: "grid", placeItems: "center" }}>
                    <Icon name={c.icon} size={15} style={{ color: "#fff" }} />
                  </div>
                  <span style={{ flex: 1, fontSize: 13.5, fontWeight: 600 }}>{c.title}</span>
                  {c.progress === 100
                    ? <Icon name="checkCircle" size={18} style={{ color: "var(--vh-teal)" }} />
                    : <span className="dim" style={{ fontSize: 12, fontWeight: 700 }}>{c.progress}%</span>}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Passport, FauxQR });