// Player profile — full IAMS 0-200 + 0-20 attrs + 4 ratings + Camelot + injury + role matrix + dark horse

function PlayerScreen({ id, onBack, profile }) {
  const { findPlayer, COUNTRIES, ROLES, roleFit, camelotFor, VISIBLE_ATTRS, HIDDEN_ATTRS, RADAR_KEYS,
    ATTR_CATEGORIES, profileCamelotKey, camelotMatch, camelotReasoning } = window.IAMS_DATA;
  const player = findPlayer(id);
  if (!player) return <div style={{ padding: 40 }}>Not found. <button onClick={onBack}>Back</button></div>;
  const country = COUNTRIES.find(c => c.iso === player.country);
  const profileKey = profileCamelotKey(profile);
  const match = camelotMatch(player.camelotKey, profileKey);

  // User's "My rating" persisted in LS
  const myKey = `ias.myRating.${id}`;
  const [myRating, setMyRating] = useState(() => {
    try { const v = JSON.parse(localStorage.getItem(myKey) || "null"); return v; } catch { return null; }
  });
  useEffect(() => {
    if (myRating != null) localStorage.setItem(myKey, JSON.stringify(myRating));
  }, [myRating]);

  // Compute role-fit matrix for all roles of this position + adjacent positions
  const rolesToShow = ROLES.filter(r => r.pos === player.pos);
  const roleFits = rolesToShow.map(r => ({ ...r, fit: roleFit(player, r.id) })).sort((a,b) => b.fit - a.fit);

  const camelot = camelotFor(player, profile);
  const reasoning = camelotReasoning(player, profile, camelot);

  // Probabilities (derived)
  const probs = [
    { label: "Role match",        v: roleFits[0]?.fit || 70 },
    { label: "Geo adapt.",        v: camelot.find(c => c.axis === "Geo")?.score || 60 },
    { label: "Shortlist match",   v: player.fit },
    { label: "Shadow team fit",   v: Math.min(99, Math.round((player.fit + player.iams/2.1) / 2)) },
  ];

  return (
    <div style={{ padding: "28px 40px 100px", maxWidth: 1320, margin: "0 auto", width: "100%" }}>
      <button className="btn ghost sm" onClick={onBack} style={{ marginBottom: 20 }}>← Back</button>

      {/* ─── Header ─── */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 24, alignItems: "end" }}>
        <div>
          <div className="mono" style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
            {country?.name} · {player.pos} · {player.club}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", marginTop: 6 }}>
            <h1 className="display" style={{
              fontSize: "clamp(40px, 5vw, 60px)", fontWeight: 600, letterSpacing: "-0.03em",
              lineHeight: 0.98, margin: 0,
            }}>{player.name}</h1>
            <CamelotKeyPill keyCode={player.camelotKey.code} match={match}/>
            {player.darkHorse && <span className="dark-horse">dark horse</span>}
            {player.categoryId && (
              <span className={(window.IAMS_DATA.CATEGORIES.find(c => c.id === player.categoryId)?.color || "") + " band-label"}>
                {window.IAMS_DATA.CATEGORIES.find(c => c.id === player.categoryId)?.label}
              </span>
            )}
          </div>
          <div style={{ marginTop: 12, fontSize: 14, color: "var(--ink-dim)", display: "flex", gap: 20, flexWrap: "wrap" }}>
            <span>Age <strong>{player.age}</strong></span>
            <span>Foot <strong>{player.foot}</strong></span>
            <span>Height <strong>{player.height} cm</strong></span>
            <span>Market <strong>€{player.mv}M</strong> <Trend value={player.trend}/></span>
            <span>Contract <strong>until {player.contract || "—"}</strong></span>
            <span>Apps <strong>{player.apps || "—"}</strong></span>
          </div>
          <div style={{ marginTop: 14, display: "flex", gap: 8, flexWrap: "wrap" }}>
            {(player.tags || []).map(t => <span key={t} className="tag">{t}</span>)}
            <InjuryBadge injury={player.injury}/>
          </div>
        </div>
        <div>
          <IamsDial value={player.iams} label="IAMS Index" sub="AI · /200"/>
        </div>
      </div>

      {/* ─── Row 1: IMDb-style rating block + Camelot (with reasoning) ─── */}
      <div style={{ marginTop: 30, display: "grid", gridTemplateColumns: "1.25fr 1fr", gap: 16 }}>
        {/* IMDb-style rating block — cinematic gold panel */}
        <div className="card" style={{
          padding: 0, overflow: "hidden", position: "relative",
          background: "linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%)",
          border: "1px solid var(--rule-strong)",
        }}>
          {/* Gold top-bar rule */}
          <div style={{ height: 4, background: "linear-gradient(90deg, #d19712 0%, #f1c148 50%, #d19712 100%)" }}/>

          <div style={{ padding: 24 }}>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 14 }}>
              <div className="mono" style={{ fontSize: 10, color: "#d19712", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700 }}>
                ★ IAMS Community Rating
              </div>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
                4 perspectives · trust-weighted
              </div>
            </div>

            {/* Giant gold IAMS + stars + vote count — IMDb hero block */}
            <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, alignItems: "center" }}>
              <div style={{ textAlign: "left" }}>
                <div style={{ display: "flex", alignItems: "flex-start", gap: 6 }}>
                  <div style={{
                    fontFamily: "var(--display)",
                    fontSize: 92, fontWeight: 700,
                    color: "#d19712",
                    letterSpacing: "-0.05em", lineHeight: 0.88,
                    textShadow: "0 2px 0 rgba(209,151,18,0.15)",
                  }} className="tnum">
                    {(player.ratings.community.stars).toFixed(1)}
                  </div>
                  <div style={{ marginTop: 8 }}>
                    <div className="mono tnum" style={{ fontSize: 13, color: "var(--ink-muted)", fontWeight: 600 }}>/10</div>
                  </div>
                </div>
                <div style={{ marginTop: 6 }}>
                  <StarRow value={Math.round(player.ratings.community.stars)} max={10} size={14}/>
                </div>
                <div className="mono" style={{ fontSize: 11, color: "var(--ink-dim)", marginTop: 8, letterSpacing: "0.04em" }}>
                  <strong style={{ color: "var(--ink)" }}>{player.ratings.community.votes.toLocaleString()}</strong> clubs rated ·
                  {" "}<strong style={{ color: "var(--ink)" }}>{player.ratings.pro.votes}</strong> pro reports
                </div>
              </div>

              {/* Vote distribution — tighter, with "most-common" annotation */}
              <div>
                <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 8 }}>
                  Vote distribution
                </div>
                <div style={{ display: "grid", gridTemplateRows: "repeat(10, 1fr)", gap: 2 }}>
                  {player.ratings.histogram.slice().reverse().map((v, i) => {
                    const n = 10 - i;
                    const max = Math.max(...player.ratings.histogram);
                    const isPeak = v === max;
                    const isClose = n === Math.round(player.ratings.community.stars);
                    return (
                      <div key={i} style={{ display: "grid", gridTemplateColumns: "18px 1fr 44px", gap: 6, alignItems: "center" }}>
                        <div className="mono tnum" style={{ fontSize: 10, color: isClose ? "#d19712" : "var(--ink-muted)", textAlign: "right", fontWeight: isClose ? 700 : 500 }}>{n}</div>
                        <div style={{ height: 10, background: "var(--chip-bg)", position: "relative" }}>
                          <div style={{
                            height: "100%", width: (v / max * 100) + "%",
                            background: isPeak
                              ? "linear-gradient(90deg, #d19712, #f1c148)"
                              : isClose ? "var(--accent)" : "var(--accent-2)",
                            opacity: isPeak ? 1 : isClose ? 0.9 : 0.45,
                          }}/>
                        </div>
                        <div className="mono tnum" style={{ fontSize: 10, color: isPeak ? "#d19712" : "var(--ink-muted)", fontWeight: isPeak ? 700 : 500 }}>
                          {v}{isPeak ? " ★" : ""}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>

            {/* Divider */}
            <div style={{ height: 1, background: "var(--rule)", margin: "20px 0" }}/>

            {/* 3 sources + My rating — 4-col row */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1.2fr", gap: 12 }}>
              <SourceStat label="IAMS AI"      value={player.ratings.iams.v}      note="weighted index"/>
              <SourceStat label="PRO scouts"   value={player.ratings.pro.v}       note={`${player.ratings.pro.votes} reports`}/>
              <SourceStat label="Community"    value={player.ratings.community.v} note={`${player.ratings.community.votes} clubs`}/>
              <div style={{
                padding: 12,
                background: "var(--accent-soft)",
                border: "1px solid var(--accent)",
              }}>
                <div className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 700, marginBottom: 6 }}>
                  ★ Your club
                </div>
                <StarRow value={myRating || 0} max={10} size={15} onChange={setMyRating}/>
                <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", marginTop: 6 }}>
                  {myRating ? `${myRating}/10 · submitted` : "Rate to contribute"}
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Camelot — wheel + per-axis reasoning */}
        <div className="card" style={{ padding: 22 }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
              Camelot compatibility · {match.toUpperCase()}
            </div>
            <CamelotKeyPill keyCode={player.camelotKey.code} match={match}/>
          </div>
          <div style={{ display: "flex", justifyContent: "center", marginTop: 6 }}>
            <CamelotWheel data={camelot} size={200}/>
          </div>
          <div style={{ marginTop: 10, display: "grid", gap: 6 }}>
            {camelot.map(a => (
              <div key={a.axis} style={{
                display: "grid", gridTemplateColumns: "60px auto 1fr",
                gap: 10, alignItems: "start",
                padding: "6px 0",
                borderTop: "1px solid var(--rule)",
              }}>
                <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
                  {a.axis}
                </div>
                <div className="mono tnum" style={{
                  fontSize: 12, fontWeight: 700,
                  color: a.band === "good" ? "var(--good)" : a.band === "mid" ? "var(--mid)" : "var(--bad)",
                }}>{a.score}</div>
                <div style={{ fontSize: 11.5, color: "var(--ink-dim)", lineHeight: 1.4 }}>
                  {reasoning[a.axis]}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ─── Row 1.5: Probability indicators ─── */}
      <div className="card" style={{ marginTop: 16, padding: 18 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
            Probabilities
          </div>
          {probs.map(p => (
            <div key={p.label} style={{
              display: "flex", alignItems: "center", gap: 8,
              padding: "6px 12px",
              border: "1px solid var(--rule)",
            }}>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.1em", textTransform: "uppercase" }}>{p.label}</div>
              <div className="display tnum" style={{ fontSize: 20, fontWeight: 700, color: fitColor(p.v) }}>{p.v}%</div>
            </div>
          ))}
        </div>
      </div>

      {/* ─── Row 2: FM-style attribute matrix + Radar + AI summary ─── */}
      <div style={{ marginTop: 20, display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 16 }}>
        <div className="card" style={{ padding: 24 }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 14 }}>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
              Attributes · FM-style · 0–20 scale
            </div>
            <SourceTag src="IAMS v0.3 · Smrt Stats"/>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 18 }}>
            {Object.entries(ATTR_CATEGORIES).map(([cat, keys]) => (
              <div key={cat}>
                <div className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 10, paddingBottom: 6, borderBottom: "2px solid var(--accent)" }}>
                  {cat}
                </div>
                <div style={{ display: "grid", gap: 0 }}>
                  {keys.map(k => (
                    <FmAttr key={k} label={k} value={player.attrs[k] ?? 10}
                      hidden={HIDDEN_ATTRS.includes(k)}/>
                  ))}
                </div>
              </div>
            ))}
          </div>
          <div className="mono" style={{ fontSize: 9.5, color: "var(--ink-muted)", letterSpacing: "0.06em", marginTop: 16, lineHeight: 1.5 }}>
            Hidden attributes (italic) are revealed at PRO tier only. Scores ≥16 shown in brand green; 12–15 in ink; 8–11 amber; &lt;8 red.
          </div>
        </div>

        <div style={{ display: "grid", gap: 16 }}>
          <div className="card" style={{ padding: 20, display: "flex", flexDirection: "column", alignItems: "center" }}>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.14em", textTransform: "uppercase", alignSelf: "flex-start" }}>
              Radar (0-100)
            </div>
            <Radar values={player.radar} keys={RADAR_KEYS} size={240}/>
          </div>
          <div className="card" style={{ padding: 18 }}>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
              AI scouting summary
            </div>
            <p style={{
              fontSize: 13, lineHeight: 1.55, textWrap: "pretty",
              margin: "10px 0 0", color: "var(--ink)",
            }}>
              Profiles as a <strong>{ROLES.find(r => r.id === player.roleId)?.label || player.pos}</strong>
              {player.philosophy ? ` — ${player.philosophy.toLowerCase()}.` : "."}
              Current signals align with your <em>{profile?.philosophy}</em> philosophy.
              Resale window {player.age >= 22 ? "narrow" : "wide"}; Camelot match <strong>{match}</strong>.
            </p>
            <SourceTag src="AI · regenerated 14h ago"/>
          </div>
        </div>
      </div>

      {/* ─── Row 3: Role fit matrix + Injury history ─── */}
      <div style={{ marginTop: 20, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div className="card" style={{ padding: 24 }}>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
            Role fit matrix · {player.pos}
          </div>
          <div style={{ marginTop: 14, display: "grid", gap: 10 }}>
            {roleFits.map((r, i) => (
              <div key={r.id} style={{
                display: "grid", gridTemplateColumns: "24px 1fr 60px 50px", gap: 12,
                alignItems: "center",
                padding: "8px 0",
                borderTop: i ? "1px solid var(--rule)" : "none",
              }}>
                <div className="mono tnum" style={{ fontSize: 10, color: "var(--ink-muted)" }}>#{i + 1}</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{r.label}</div>
                  <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", marginTop: 2 }}>
                    {Object.entries(r.weights).slice(0, 4).map(([k, w]) => `${k} ×${w}`).join(" · ")}
                  </div>
                </div>
                <FitBar value={r.fit}/>
                <div className="tnum" style={{ fontSize: 13, fontWeight: 600, color: fitColor(r.fit), textAlign: "right" }}>{r.fit}%</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card" style={{ padding: 24 }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
              Injury profile · 12 months
            </div>
            <InjuryBadge injury={player.injury}/>
          </div>
          <div style={{ marginTop: 12, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
            <MiniStat label="Injury score" value={player.injury.score} suffix="/100" color={fitColor(player.injury.score)}/>
            <MiniStat label="Days lost" value={player.injury.daysLost12m} suffix="d"/>
            <MiniStat label="Incidents" value={player.injury.count12m} suffix="×"/>
          </div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.14em", textTransform: "uppercase", marginTop: 20, marginBottom: 8 }}>
            Timeline
          </div>
          {(player.injury.history || []).length === 0 && (
            <div style={{ fontSize: 13, color: "var(--ink-muted)", padding: "14px 0" }}>No recorded incidents in the last 12 months.</div>
          )}
          <div style={{ display: "grid", gap: 6 }}>
            {(player.injury.history || []).map((h, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "80px 1fr 60px", gap: 10, alignItems: "center", fontSize: 13 }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--ink-muted)" }}>{h.y}</div>
                <div>{h.desc}</div>
                <div className="tnum" style={{ textAlign: "right", color: h.days > 30 ? "var(--bad)" : h.days > 14 ? "var(--mid)" : "var(--ink-dim)" }}>{h.days}d</div>
              </div>
            ))}
          </div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.04em", marginTop: 14, lineHeight: 1.5 }}>
            Transfer flag: <strong style={{ color: player.injury.badge === "green" ? "var(--good)" : player.injury.badge === "yellow" ? "var(--mid)" : "var(--bad)" }}>
              {player.injury.badge === "green" ? "Go" : player.injury.badge === "yellow" ? "Caution" : "No-go / require medical"}
            </strong>
          </div>
        </div>
      </div>

      {/* ─── Row 4: Source transparency ─── */}
      <div className="card" style={{ marginTop: 20, padding: 24 }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
          Source transparency · every value tagged
        </div>
        <div style={{ marginTop: 14, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10, fontSize: 13 }}>
          <Src label="Attributes 0-20"     src="IAMS model v0.3 (FM-style derivation)"/>
          <Src label="IAMS Index"          src="AI · weighted by role"/>
          <Src label="Market value"        src="Transfermarkt · synced 14h ago"/>
          <Src label="Injury history"      src="Transfermarkt injury feed"/>
          <Src label="Role fit matrix"     src="IAMS role weights · user-configurable"/>
          <Src label="Camelot axes"        src="Derived from club-profile + player country/hidden attrs"/>
          <Src label="Community rating"    src="Activates at 50 clubs"/>
          <Src label="PRO rating"          src="Invite-only, 3+ verified reports"/>
        </div>
        <div className="mono" style={{ marginTop: 14, fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.04em" }}>
          {player.club === "Borussia Dortmund"
            ? "BVB 2025 squad used as the spec’s worked example. Ratings, injury entries, and evaluative content are illustrative — not a real assessment of the named player."
            : "Prototype data · target identity is fictional."}
        </div>
      </div>
    </div>
  );
}

function RatingCard({ label, value, src, primary }) {
  const unset = value === null || value === undefined;
  return (
    <div style={{
      padding: 14,
      background: primary ? "var(--accent-soft)" : "var(--panel-2)",
      border: primary ? "1px solid var(--accent)" : "1px solid var(--rule)",
    }}>
      <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
        {label}
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginTop: 4 }}>
        <div className="display tnum" style={{
          fontSize: 32, fontWeight: 600, letterSpacing: "-0.02em",
          color: unset ? "var(--ink-muted)" : primary ? "var(--accent)" : "var(--ink)",
        }}>{unset ? "—" : value}</div>
        {!unset && <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)" }}>/200</div>}
      </div>
      <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.04em", marginTop: 4 }}>{src}</div>
    </div>
  );
}

function SourceStat({ label, value, note }) {
  return (
    <div style={{
      padding: 12,
      background: "var(--panel-2)",
      border: "1px solid var(--rule)",
    }}>
      <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>{label}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginTop: 4 }}>
        <div className="display tnum" style={{ fontSize: 22, fontWeight: 700, color: "var(--ink)" }}>{value}</div>
        <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)" }}>/200</div>
      </div>
      <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", marginTop: 2 }}>{note}</div>
    </div>
  );
}

function MiniStat({ label, value, suffix, color }) {  return (
    <div style={{
      padding: 12,
      background: "var(--panel-2)",
      border: "1px solid var(--rule)",
    }}>
      <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.1em", textTransform: "uppercase" }}>{label}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 3, marginTop: 6 }}>
        <div className="display tnum" style={{ fontSize: 26, fontWeight: 600, color: color || "var(--ink)" }}>{value}</div>
        <div className="mono" style={{ fontSize: 11, color: "var(--ink-muted)" }}>{suffix}</div>
      </div>
    </div>
  );
}

function Src({ label, src }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 10 }}>
      <div className="mono" style={{ fontSize: 11, color: "var(--ink-muted)", letterSpacing: "0.04em" }}>{label}</div>
      <div style={{ color: "var(--ink-dim)", fontSize: 13 }}>{src}</div>
    </div>
  );
}

Object.assign(window, { PlayerScreen });