// DRIVR — Verified Driver Record. The portable, driver-owned "Verified by DRIVR"
// score. Ported from the light source into the dark DRIVR system (teal Verify
// identity). Lives as a second tab on the scorecard.

function VRing({ value = 990, max = 1000, size = 138, stroke = 11 }) {
  const r = (size - stroke) / 2;
  const C = 2 * Math.PI * r;
  const off = C * (1 - value / max);
  return (
    <div style={{ position: "relative", width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: "rotate(-90deg)" }}>
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--ink-700)" strokeWidth={stroke} />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--teal-bright)" strokeWidth={stroke} strokeLinecap="round" strokeDasharray={C} strokeDashoffset={off} />
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
        <span style={{ fontFamily: "var(--font-mono)", fontWeight: 600, fontSize: 42, color: "var(--paper)", lineHeight: 1, letterSpacing: "-0.02em" }}>{value}</span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--paper-4)", marginTop: 4 }}>/ {max}</span>
      </div>
    </div>
  );
}

function VEyebrow({ children, color = "var(--teal-bright)" }) {
  return <div style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color }}>{children}</div>;
}

function Dim({ label, sub, score, w, building, last }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 10, columnGap: 12, alignItems: "center", padding: "15px 0", borderBottom: last ? "none" : "1px solid var(--line)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
        <span style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 15.5, color: "var(--paper)" }}>{label}</span>
        {building && <span style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 9.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--teal-bright)", border: "1px solid var(--teal-dim)", borderRadius: 4, padding: "2px 6px" }}>Building</span>}
      </div>
      <div style={{ fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 20, color: "var(--paper)", textAlign: "right", whiteSpace: "nowrap" }}>{score}<span style={{ fontSize: 11, color: "var(--paper-4)", fontWeight: 500 }}> /1000</span></div>
      <div style={{ gridColumn: "1 / -1", display: "flex", flexDirection: "column", gap: 8 }}>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--paper-4)", marginTop: -4 }}>{sub}</div>
        <div style={{ height: 8, borderRadius: 99, background: "var(--ink-700)", overflow: "hidden" }}>
          <div style={{ height: "100%", width: w + "%", background: "var(--teal-bright)", borderRadius: 99 }} />
        </div>
      </div>
    </div>
  );
}

function WkTile({ value, label, good }) {
  return (
    <div style={{ background: "var(--ink-750)", border: "1px solid var(--line)", borderRadius: "var(--r-sm)", padding: "15px 10px", textAlign: "center" }}>
      <div style={{ fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 24, lineHeight: 1, color: good ? "var(--teal-bright)" : "var(--paper)" }}>{value}</div>
      <div style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 9.5, letterSpacing: "0.07em", textTransform: "uppercase", color: "var(--paper-4)", marginTop: 8 }}>{label}</div>
    </div>
  );
}

function Prove({ children }) {
  return (
    <div style={{ display: "flex", gap: 11, alignItems: "flex-start", fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.4, color: "var(--paper-2)" }}>
      <span style={{ flex: "none", width: 21, height: 21, borderRadius: 999, background: "var(--teal)", color: "#04222c", display: "flex", alignItems: "center", justifyContent: "center", marginTop: 1 }}><Icon name="check" size={12} /></span>
      <span>{children}</span>
    </div>
  );
}

const VDATA = {
  name: "Marcus Reyes",
  id: "A1DRVRREYES0427",
  overall: 940,
  tier: "Great",
  dims: [
    { label: "Safety", sub: "Strong on-road safety record", score: 970 },
    { label: "Quality", sub: "98.5% completion · 99.7% photo-on-delivery", score: 920 },
    { label: "Feedback", sub: "Low complaint rate", score: 940 },
    { label: "Experience", sub: "2,975 deliveries · 8 weeks tracked", score: 880, building: true },
  ],
  trend: [
    { week: 1, overall: 998 }, { week: 2, overall: 934 }, { week: 3, overall: 822 },
    { week: 4, overall: 986 }, { week: 5, overall: 1000 }, { week: 6, overall: 741 },
    { week: 7, overall: 1000 }, { week: 8, overall: 741 },
  ],
};

function TrendChart({ data }) {
  const max = 1000;
  return (
    <div className="surface" style={{ padding: "18px 16px 15px" }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 17, color: "var(--paper)", letterSpacing: "-0.01em" }}>8-week trend</div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--paper-4)" }}>weekly score</div>
      </div>
      <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--paper-4)", margin: "3px 0 16px" }}>Strong, but volatile — two weeks dipped near 740.</div>
      <div style={{ display: "flex", alignItems: "flex-end", gap: 7, height: 116 }}>
        {data.map((d) => {
          const dip = d.overall < 800;
          return (
            <div key={d.week} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-end", gap: 6, height: "100%" }}>
              <span style={{ fontFamily: "var(--font-mono)", fontWeight: 600, fontSize: 9.5, color: dip ? "var(--warn)" : "var(--paper-3)" }}>{d.overall}</span>
              <div style={{ width: "100%", height: (d.overall / max) * 100 + "%", minHeight: 6, borderRadius: "4px 4px 2px 2px", background: dip ? "var(--warn)" : "var(--teal-bright)" }} />
            </div>
          );
        })}
      </div>
      <div style={{ display: "flex", gap: 7, marginTop: 8 }}>
        {data.map((d) => (
          <div key={d.week} style={{ flex: 1, textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--paper-4)" }}>W{d.week}</div>
        ))}
      </div>
    </div>
  );
}

function VerifiedRecord() {
  const initials = VDATA.name.split(" ").map((w) => w[0]).join("").slice(0, 2);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16, padding: "18px 14px 30px", background: "var(--ink-900)", minHeight: "100%" }}>

      {/* Hero */}
      <div className="surface" style={{ padding: "22px 18px 24px", position: "relative", overflow: "hidden" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 16 }}>
          <div style={{ width: 56, height: 56, borderRadius: 999, background: "var(--teal)", color: "#04222c", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, flex: "none" }}>{initials}</div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 24, letterSpacing: "-0.015em", color: "var(--paper)", lineHeight: 1.05 }}>{VDATA.name}</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--paper-3)", marginTop: 5 }}>{VDATA.id}</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--paper-4)", marginTop: 3 }}>DSP •••• · STATION ••••</div>
          </div>
        </div>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 7, background: "var(--teal-dim)", border: "1px solid var(--teal)", color: "var(--teal-bright)", fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 10.5, letterSpacing: "0.05em", textTransform: "uppercase", padding: "6px 11px", borderRadius: "var(--r-sm)", whiteSpace: "nowrap" }}>
          <Icon name="check" size={12} />Record verified
        </span>

        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10, marginTop: 22 }}>
          <VRing value={VDATA.overall} max={1000} />
          <span style={{ background: "var(--tier-great)", color: "#04210f", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 13, letterSpacing: "0.1em", textTransform: "uppercase", padding: "6px 14px", borderRadius: "var(--r-sm)" }}>{VDATA.tier}</span>
          <span style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 10.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--paper-4)" }}>Earned, not given</span>
        </div>
      </div>

      {/* Dimensions */}
      <div>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", padding: "0 2px 8px" }}>
          <VEyebrow>What makes up your score</VEyebrow>
        </div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--paper-4)", padding: "0 2px 12px" }}>The fundamentals every delivery company measures — plus the track record they don't.</div>
        <div className="surface" style={{ padding: "2px 16px" }}>
          {VDATA.dims.map((d, i) => (
            <Dim key={d.label} label={d.label} sub={d.sub} score={d.score} w={d.score / 10} building={d.building} last={i === VDATA.dims.length - 1} />
          ))}
        </div>
      </div>

      {/* Weekly trend */}
      <TrendChart data={VDATA.trend} />

      {/* Supporting stats */}
      <div className="surface" style={{ padding: "18px 16px 20px" }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 17, color: "var(--paper)", letterSpacing: "-0.01em" }}>On the record</div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--paper-4)", margin: "3px 0 15px" }}>Eight weeks tracked and counting.</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 9 }}>
          <WkTile value="2,975" label="Total deliveries" />
          <WkTile value="8" label="Weeks tracked" />
          <WkTile value="98.5%" label="Avg completion" good />
          <WkTile value="99.7%" label="Avg POD compliance" good />
        </div>
      </div>

      {/* What it proves + share */}
      <div style={{ borderRadius: "var(--r-md)", overflow: "hidden", padding: "22px 18px 20px", background: "linear-gradient(180deg, rgba(30,146,180,0.14), transparent 60%), var(--ink-800)", border: "1px solid var(--teal-dim)" }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 19, color: "var(--paper)", letterSpacing: "-0.015em", marginBottom: 15 }}>What your record proves</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
          <Prove><b style={{ color: "var(--paper)", fontWeight: 700 }}>You drive safely</b> — a strong on-road safety record.</Prove>
          <Prove><b style={{ color: "var(--paper)", fontWeight: 700 }}>You finish the job</b> — 98.5% completion across 8 weeks.</Prove>
          <Prove><b style={{ color: "var(--paper)", fontWeight: 700 }}>You're trusted</b> — customers rarely have a complaint.</Prove>
          <Prove><b style={{ color: "var(--paper)", fontWeight: 700 }}>You're proven</b> — nearly 3,000 deliveries on record.</Prove>
        </div>
        <button onClick={() => alert("In the real app: generates a verified one-page profile / link you can share anywhere.")} style={{ marginTop: 20, width: "100%", display: "flex", alignItems: "center", justifyContent: "center", gap: 9, background: "var(--green)", color: "#04210f", border: 0, borderRadius: "var(--r-sm)", padding: "13px 16px", fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 15, cursor: "pointer" }}>
          <Icon name="link" size={16} />Share my verified record
        </button>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--paper-3)", textAlign: "center", marginTop: 12, lineHeight: 1.4 }}>Yours to share — with any employer, anywhere. You own it.</div>
      </div>

      {/* Locked note */}
      <div style={{ borderLeft: "3px solid var(--teal)", background: "var(--ink-800)", borderRadius: "0 var(--r-sm) var(--r-sm) 0", padding: "15px 18px", fontFamily: "var(--font-body)", fontStyle: "italic", fontSize: 13, lineHeight: 1.5, color: "var(--paper-2)" }}>
        Your record is locked because it's history — it can't be edited, which is exactly why it's worth something. Everything you do next writes the next line.
      </div>

      <div style={{ textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--paper-4)", letterSpacing: "0.02em", paddingTop: 2 }}>
        Verified by DRIVR · Portable record
      </div>
    </div>
  );
}

Object.assign(window, { VerifiedRecord, VDATA });