// Shortlist (full table) + Player profile screens

function ListScreen({ profile, onOpenPlayer, onNav }) {
  const players = window.IAMS_DATA.PLAYERS;
  const [pos, setPos] = useState("all");
  const [sort, setSort] = useState("fit");
  const [q, setQ] = useState("");

  const filtered = useMemo(() => {
    let rs = players;
    if (pos !== "all") rs = rs.filter(p => p.pos === pos);
    if (q) rs = rs.filter(p => (p.name + p.club + p.country).toLowerCase().includes(q.toLowerCase()));
    if (sort === "fit") rs = [...rs].sort((a, b) => b.fit - a.fit);
    if (sort === "ai") rs = [...rs].sort((a, b) => b.aiRating - a.aiRating);
    if (sort === "age") rs = [...rs].sort((a, b) => a.age - b.age);
    if (sort === "mv") rs = [...rs].sort((a, b) => a.mv - b.mv);
    return rs;
  }, [players, pos, sort, q]);

  return (
    <div style={{ padding: "28px 40px 80px", maxWidth: 1360, margin: "0 auto", width: "100%" }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16 }}>
        <SectionTitle eyebrow="Shortlist" title={`${filtered.length} players flagged for ${profile.name || "your club"}`} />
        <button className="btn ghost sm" onClick={() => onNav("map")}>← Back to map</button>
      </div>

      {/* toolbar */}
      <div style={{
        marginTop: 28, display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap",
        padding: "12px 16px",
        background: "var(--panel)", border: "1px solid var(--rule)",
        borderRadius: "var(--radius-lg)",
      }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-muted)" }}>Position</div>
        <div className="seg">
          <button className={pos === "all" ? "on" : ""} onClick={() => setPos("all")}>All</button>
          {window.IAMS_DATA.POSITIONS.map(p => (
            <button key={p} className={pos === p ? "on" : ""} onClick={() => setPos(p)}>{p}</button>
          ))}
        </div>
        <div style={{ flex: 1 }}/>
        <div className="field" style={{ width: 240 }}>
          <input type="text" placeholder="Search name / club / country" value={q} onChange={e => setQ(e.target.value)} />
        </div>
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-muted)" }}>Sort</div>
        <select value={sort} onChange={e => setSort(e.target.value)}
          style={{
            padding: "6px 10px", background: "var(--panel-2)", color: "var(--ink)",
            border: "1px solid var(--rule-strong)", borderRadius: "var(--radius)",
          }}>
          <option value="fit">Fit score</option>
          <option value="ai">IAMS AI rating</option>
          <option value="age">Age (young first)</option>
          <option value="mv">Market value (low first)</option>
        </select>
      </div>

      {/* Table header */}
      <div className="card" style={{ marginTop: 16, padding: 0, overflow: "hidden" }}>
        <div className="mono" style={{
          display: "grid",
          gridTemplateColumns: "40px 1fr 60px 60px 1fr 90px 90px 90px 40px",
          gap: 10,
          padding: "10px 18px",
          fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase",
          color: "var(--ink-muted)",
          borderBottom: "1px solid var(--rule)",
          background: "var(--panel-2)",
        }}>
          <span>#</span><span>Player</span><span>Pos</span><span>Age</span><span>Club / Nat</span>
          <span style={{ textAlign: "right" }}>AI Rating</span>
          <span style={{ textAlign: "right" }}>Market €M</span>
          <span style={{ textAlign: "right" }}>Fit % · Camelot</span>
          <span></span>
        </div>
        {filtered.map((p, i) => {
          const cNat = window.IAMS_DATA.COUNTRIES.find(c => c.iso === p.country);
          return (
            <button key={p.id} onClick={() => onOpenPlayer(p.id)}
              style={{
                display: "grid",
                gridTemplateColumns: "40px 1fr 60px 60px 1fr 90px 90px 90px 40px",
                gap: 10,
                padding: "12px 18px",
                width: "100%",
                textAlign: "left",
                borderBottom: "1px solid var(--rule)",
                alignItems: "center",
              }}>
              <span className="mono tnum" style={{ fontSize: 11, color: "var(--ink-muted)" }}>{String(i+1).padStart(2,"0")}</span>
              <span style={{ minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{p.name}</div>
                <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", marginTop: 2 }}>
                  {p.tags.slice(0, 3).join(" · ")}
                </div>
              </span>
              <span className="mono" style={{ fontSize: 12 }}>{p.pos}</span>
              <span className="tnum" style={{ fontSize: 13 }}>{p.age}</span>
              <span style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.club}</div>
                <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)" }}>{cNat?.name || p.country}</div>
              </span>
              <span style={{ textAlign: "right" }}>
                <span className="tnum" style={{ fontWeight: 600, fontSize: 14 }}>{p.aiRating}</span>
                <span className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", marginLeft: 4 }}>/200</span>
                <span style={{ marginLeft: 6 }}><Trend value={p.trend}/></span>
              </span>
              <span className="tnum" style={{ textAlign: "right", fontSize: 14 }}>€{p.mv.toFixed(1)}M</span>
              <span style={{ textAlign: "right", display: "flex", alignItems: "center", gap: 8, justifyContent: "flex-end" }}>
                <div style={{ width: 50 }}><FitBar value={p.fit}/></div>
                <span className="tnum" style={{ fontWeight: 600, color: fitColor(p.fit), fontSize: 14, minWidth: 24, textAlign: "right" }}>{p.fit}</span>
                {p.camelotKey && (
                  <span className="mono" style={{ fontSize: 10, fontWeight: 700, color: "var(--accent)", padding: "2px 5px", border: "1px solid var(--accent)", background: "var(--accent-soft)" }}>
                    {p.camelotKey.code}
                  </span>
                )}
              </span>
              <span style={{ color: "var(--ink-muted)", textAlign: "right" }}>›</span>
            </button>
          );
        })}
      </div>

      <div className="mono" style={{ marginTop: 14, fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
        Data: prototype dataset · live build sources Smrt Stats 330-tournament index.
      </div>
    </div>
  );
}

// ─── Player profile screen ──────────────────────────────
function PlayerScreen({ id, onBack }) {
  const player = window.IAMS_DATA.PLAYERS.find(p => p.id === id);
  if (!player) return <div style={{ padding: 40 }}>Not found. <button onClick={onBack}>Back</button></div>;
  const country = window.IAMS_DATA.COUNTRIES.find(c => c.iso === player.country);

  return (
    <div style={{ padding: "28px 40px 100px", maxWidth: 1240, margin: "0 auto", width: "100%" }}>
      <button className="btn ghost sm" onClick={onBack} style={{ marginBottom: 20 }}>← Back to shortlist</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>
          <h1 className="display" style={{
            fontSize: "clamp(40px, 5vw, 64px)", fontWeight: 600, letterSpacing: "-0.03em",
            lineHeight: 0.98, margin: "8px 0 0",
          }}>{player.name}</h1>
          <div style={{ marginTop: 12, fontSize: 14, color: "var(--ink-dim)", display: "flex", gap: 16, 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 value <strong>€{player.mv.toFixed(1)}M</strong></span>
          </div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>IAMS AI Rating</div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 4, justifyContent: "flex-end" }}>
            <div className="display tnum" style={{ fontSize: 72, fontWeight: 600, letterSpacing: "-0.04em", lineHeight: 1, color: "var(--accent)" }}>
              {player.aiRating}
            </div>
            <div className="mono" style={{ fontSize: 14, color: "var(--ink-muted)" }}>/200</div>
          </div>
          <div style={{ marginTop: 6, display: "flex", justifyContent: "flex-end", gap: 6 }}>
            <Trend value={player.trend}/>
            <span className="mono" style={{ fontSize: 11, color: "var(--ink-muted)" }}>last 30 days</span>
          </div>
        </div>
      </div>

      {/* Fit + explanation */}
      <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        <div className="card" style={{ padding: 24 }}>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
            Club Fit · for Musterstadt SV
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 8 }}>
            <div className="display tnum" style={{ fontSize: 52, fontWeight: 600, letterSpacing: "-0.03em", color: fitColor(player.fit) }}>{player.fit}</div>
            <div className="mono" style={{ fontSize: 13, color: "var(--ink-muted)" }}>%</div>
            <div style={{ marginLeft: "auto" }} className="chip">{fitLabel(player.fit)}</div>
          </div>
          <div style={{ marginTop: 12 }}><FitBar value={player.fit}/></div>
          <div style={{ marginTop: 18, display: "grid", gap: 10 }}>
            {[
              { l: "Playing style match",  v: Math.min(99, player.fit + 4) },
              { l: "Budget alignment",      v: Math.max(40, player.fit - 8) },
              { l: "Language / culture",    v: Math.min(99, player.fit + 2) },
              { l: "Positional need",       v: player.fit },
            ].map(d => (
              <div key={d.l} style={{ display: "grid", gridTemplateColumns: "180px 1fr 40px", gap: 10, alignItems: "center" }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--ink-muted)" }}>{d.l}</div>
                <FitBar value={d.v}/>
                <div className="tnum" style={{ fontSize: 12, color: fitColor(d.v), textAlign: "right" }}>{d.v}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card" style={{ padding: 24 }}>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
            AI Scouting Summary · 150 words
          </div>
          <p className="display" style={{
            fontSize: 17, lineHeight: 1.55, textWrap: "pretty",
            margin: "12px 0 0", color: "var(--ink)",
          }}>
            {player.name.split(" ")[0]} profiles as a <em>{player.philosophy.toLowerCase()}</em>
            {" "}The playing data shows {player.tags[0]}-leaning tendencies that line up with your “{"pressing"}” philosophy and tier-2 budget envelope. Progression maps indicate room to grow into first-team minutes at {country?.name}-level intensity, with transferable habits to your league. Cultural signals are positive given your language preferences, and the resale window (ages 23–25) matches a “{player.id % 2 === 0 ? "develop-and-sell" : "plug-and-play"}” goal.
          </p>
          <div style={{ marginTop: 16, display: "flex", gap: 6, flexWrap: "wrap" }}>
            {player.tags.map(t => <span key={t} className="tag">{t}</span>)}
          </div>
        </div>
      </div>

      {/* Radar + ratings */}
      <div style={{ marginTop: 20, display: "grid", gridTemplateColumns: "360px 1fr", gap: 20 }}>
        <div className="card" style={{ padding: 24, display: "flex", flexDirection: "column", alignItems: "center" }}>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.12em", textTransform: "uppercase", alignSelf: "flex-start" }}>
            Attribute radar
          </div>
          <div style={{ marginTop: 12 }}>
            <Radar values={player.radar} keys={window.IAMS_DATA.RADAR_KEYS} size={280}/>
          </div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", alignSelf: "flex-start", marginTop: 8 }}>
            Source: Smrt Stats attribute model · last synced 14h ago
          </div>
        </div>

        <div style={{ display: "grid", gap: 20 }}>
          <div className="card" style={{ padding: 24 }}>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
              Rating ensemble
            </div>
            <div style={{ marginTop: 14, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
              <RatingBox label="IAMS AI" value={player.aiRating} active unit="/200" sub="Live · recomputed nightly"/>
              <RatingBox label="Community" value="—" active={false} unit="" sub="Activates at 50 active clubs"/>
              <RatingBox label="PRO Rating" value="—" active={false} unit="" sub="Invite-only; activates at 10 paying clubs"/>
            </div>
          </div>

          <div className="card" style={{ padding: 24 }}>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
              Source transparency
            </div>
            <div style={{ marginTop: 14, display: "grid", gap: 8, fontSize: 13 }}>
              <Src label="Match data & attributes" src="Smrt Stats · 330-tournament index"/>
              <Src label="Market value"             src="Smrt Stats transfer module"/>
              <Src label="Club fit scoring"          src="IAMScouting model v0.3 (Claude-assisted)"/>
              <Src label="AI scouting summary"      src="Generated · cached 7 days · last ran 14h ago"/>
            </div>
            <div className="mono" style={{ marginTop: 14, fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.04em" }}>
              Prototype data. Player identity is fictional for demo purposes.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function RatingBox({ label, value, active, unit, sub }) {
  return (
    <div style={{
      padding: 14,
      border: "1px solid var(--rule)",
      borderRadius: "var(--radius)",
      background: active ? "var(--accent-soft)" : "var(--panel-2)",
      opacity: active ? 1 : 0.7,
    }}>
      <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.08em", 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: active ? "var(--accent)" : "var(--ink-muted)" }}>{value}</div>
        <div className="mono" style={{ fontSize: 11, color: "var(--ink-muted)" }}>{unit}</div>
      </div>
      <div style={{ fontSize: 11, color: "var(--ink-muted)", marginTop: 4, lineHeight: 1.4 }}>{sub}</div>
    </div>
  );
}

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

Object.assign(window, { ListScreen, PlayerScreen });