// Club Analysis — 5-band squad audit + construction sites + reinforcements
// Mirrors the BVB 2025 worked example from the IAMS spec.

function ClubAnalysis({ profile, onOpenPlayer, onNav }) {
  const { BVB_SQUAD, CATEGORIES, CONSTRUCTION_SITES, TARGETS } = window.IAMS_DATA;
  const [expanded, setExpanded] = useState("indispensable");

  const grouped = CATEGORIES.map(c => ({
    ...c,
    players: BVB_SQUAD.filter(p => p.categoryId === c.id),
  }));

  // For each construction site, compute top recommended reinforcements from TARGETS
  const reinforcementsFor = (site) => {
    return [...TARGETS]
      .filter(p => p.pos === site.pos)
      .sort((a,b) => b.fit - a.fit)
      .slice(0, 3);
  };

  return (
    <div style={{ padding: "28px 40px 80px", maxWidth: 1440, margin: "0 auto", width: "100%" }}>
      {/* Header */}
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
        <SectionTitle
          eyebrow={`Club analysis · ${profile.name}`}
          title="Squad audit, summer 2025"
          lede="AI-driven roster analysis. Players assigned to 5 bands. Construction sites ranked by severity. Reinforcements ordered by club fit."/>
        <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
          Generated {new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short" })} · Confidence 84%
        </div>
      </div>

      {/* Top-level scoreboard */}
      <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 10 }}>
        {grouped.map(g => (
          <button key={g.id}
            onClick={() => setExpanded(g.id)}
            className={g.color + " card"}
            style={{
              padding: 16,
              textAlign: "left",
              borderLeft: "4px solid var(--band)",
              background: expanded === g.id ? "var(--band-soft)" : "var(--panel)",
            }}>
            <div className="mono" style={{ fontSize: 10, color: "var(--band)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
              Band {["I","II","III","IV","V"][CATEGORIES.indexOf(CATEGORIES.find(c => c.id === g.id))]}
            </div>
            <div className="display tnum" style={{ fontSize: 36, fontWeight: 600, color: "var(--band)", lineHeight: 1, marginTop: 4 }}>{g.players.length}</div>
            <div style={{ fontSize: 12, fontWeight: 600, marginTop: 6 }}>{g.label}</div>
          </button>
        ))}
      </div>

      {/* Player tables (expand one at a time) */}
      <div className="card" style={{ marginTop: 18, padding: 0 }}>
        {grouped.map(g => (
          <div key={g.id} className={g.color} style={{ borderBottom: "1px solid var(--rule)" }}>
            <button onClick={() => setExpanded(expanded === g.id ? null : g.id)}
              style={{
                display: "grid",
                gridTemplateColumns: "4px 1fr auto auto",
                gap: 16, alignItems: "center",
                padding: "14px 20px",
                width: "100%",
                textAlign: "left",
              }}>
              <div className="band-strip"/>
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span className="band-label">{g.label}</span>
                  <span className="mono tnum" style={{ fontSize: 11, color: "var(--ink-muted)" }}>{g.players.length} player{g.players.length === 1 ? "" : "s"}</span>
                </div>
                <div style={{ fontSize: 12, color: "var(--ink-muted)", marginTop: 4 }}>{g.desc}</div>
              </div>
              <div className="mono" style={{ fontSize: 11, color: "var(--ink-muted)" }}>
                Avg IAMS {g.players.length ? Math.round(g.players.reduce((s,p) => s+p.iams, 0) / g.players.length) : "—"}
              </div>
              <div style={{ color: "var(--ink-muted)", fontSize: 16 }}>{expanded === g.id ? "▾" : "▸"}</div>
            </button>

            {expanded === g.id && g.players.length > 0 && (
              <div style={{ padding: "0 20px 16px" }}>
                <div className="mono" style={{
                  display: "grid",
                  gridTemplateColumns: "1fr 50px 40px 80px 90px 110px 110px 90px 24px",
                  gap: 8,
                  padding: "8px 0",
                  fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase",
                  color: "var(--ink-muted)",
                  borderBottom: "1px solid var(--rule)",
                }}>
                  <span>Player</span><span>Pos</span><span>Age</span><span>Contract</span>
                  <span style={{ textAlign: "right" }}>IAMS</span>
                  <span style={{ textAlign: "right" }}>Role fit</span>
                  <span>Injury</span>
                  <span style={{ textAlign: "right" }}>€M</span>
                  <span></span>
                </div>
                {g.players.map(p => {
                  const rf = window.IAMS_DATA.roleFit(p, p.roleId);
                  return (
                    <button key={p.id} onClick={() => onOpenPlayer(p.id)}
                      style={{
                        display: "grid",
                        gridTemplateColumns: "1fr 50px 40px 80px 90px 110px 110px 90px 24px",
                        gap: 8,
                        padding: "12px 0",
                        width: "100%",
                        textAlign: "left",
                        borderBottom: "1px solid var(--rule)",
                        alignItems: "center",
                      }}>
                      <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
                        <span style={{ minWidth: 0 }}>
                          <div style={{ fontSize: 14, fontWeight: 500 }}>{p.name}</div>
                          <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)" }}>
                            {window.IAMS_DATA.ROLES.find(r => r.id === p.roleId)?.label}
                          </div>
                        </span>
                        {p.camelotKey && (
                          <span className="mono" style={{ fontSize: 9.5, fontWeight: 700, color: "var(--accent)", padding: "2px 5px", border: "1px solid var(--accent)", background: "var(--accent-soft)", flexShrink: 0 }}>
                            {p.camelotKey.code}
                          </span>
                        )}
                      </span>
                      <span className="mono" style={{ fontSize: 12 }}>{p.pos}</span>
                      <span className="tnum" style={{ fontSize: 13 }}>{p.age}</span>
                      <span className="mono" style={{ fontSize: 11, color: "var(--ink-muted)" }}>{p.contract}</span>
                      <span style={{ textAlign: "right" }}>
                        <span className="tnum" style={{ fontWeight: 600, fontSize: 14, color: "var(--band)" }}>{p.iams}</span>
                        <span className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", marginLeft: 3 }}>/200</span>
                      </span>
                      <span style={{ textAlign: "right", display: "flex", alignItems: "center", gap: 6, justifyContent: "flex-end" }}>
                        <div style={{ width: 50 }}><FitBar value={rf}/></div>
                        <span className="tnum" style={{ fontSize: 12, fontWeight: 600, color: fitColor(rf) }}>{rf}</span>
                      </span>
                      <span><InjuryBadge injury={p.injury}/></span>
                      <span className="tnum" style={{ textAlign: "right", fontSize: 13 }}>€{p.mv}M</span>
                      <span style={{ color: "var(--ink-muted)", textAlign: "right" }}>›</span>
                    </button>
                  );
                })}
              </div>
            )}
          </div>
        ))}
      </div>

      {/* Construction sites */}
      <div style={{ marginTop: 40 }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <SectionTitle eyebrow="Construction sites" title={`${CONSTRUCTION_SITES.length} positional gaps identified`}/>
          <button className="btn ghost sm" onClick={() => onNav("list")}>Full shortlist →</button>
        </div>
        <div style={{ marginTop: 24, display: "grid", gap: 16 }}>
          {CONSTRUCTION_SITES.map((site, i) => {
            const recs = reinforcementsFor(site);
            return (
              <div key={i} className="card" style={{ padding: 24 }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 3fr", gap: 28 }}>
                  {/* Left: the site */}
                  <div>
                    <div className={"chip sev-" + site.severity} style={{
                      background: "transparent",
                      border: "1px solid currentColor",
                      padding: "3px 8px",
                    }}>
                      Severity · {site.severity}
                    </div>
                    <div className="display" style={{ fontSize: 24, fontWeight: 600, marginTop: 10, letterSpacing: "-0.01em" }}>{site.label}</div>
                    <div className="mono" style={{ fontSize: 11, color: "var(--ink-muted)", marginTop: 6, letterSpacing: "0.08em", textTransform: "uppercase" }}>Position · {site.pos}{site.side ? " · " + site.side : ""}</div>
                    <div style={{ fontSize: 13, color: "var(--ink-dim)", marginTop: 10, lineHeight: 1.5 }}>{site.note}</div>
                  </div>
                  {/* Right: top 3 reinforcements */}
                  <div>
                    <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 10 }}>
                      Top reinforcements · ordered by club fit
                    </div>
                    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
                      {recs.map(p => {
                        const rf = window.IAMS_DATA.roleFit(p, p.roleId || "box-to-box");
                        return (
                          <button key={p.id} onClick={() => onOpenPlayer(p.id)} className="card" style={{
                            padding: 14,
                            textAlign: "left",
                            background: "var(--panel-2)",
                          }}>
                            <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                              <span style={{ fontSize: 14, fontWeight: 600 }}>{p.name}</span>
                              {p.darkHorse && <span className="dark-horse">dark horse</span>}
                            </div>
                            <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", marginTop: 3 }}>
                              {p.age} · {p.club} · €{p.mv}M
                            </div>
                            <div style={{ marginTop: 10, display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                              <ProbPill value={p.fit} label="fit"/>
                              <span className="mono" style={{ fontSize: 10, color: "var(--ink-muted)" }}>IAMS {p.iams}</span>
                              {p.camelotKey && (
                                <span className="mono" style={{ fontSize: 9.5, fontWeight: 700, color: "var(--accent)", padding: "2px 5px", border: "1px solid var(--accent)" }}>
                                  {p.camelotKey.code}
                                </span>
                              )}
                            </div>
                          </button>
                        );
                      })}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="mono" style={{ marginTop: 30, fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
        Categorizations are illustrative for this prototype. Live audit pulls from Transfermarkt + club-uploaded tactical data.
      </div>
    </div>
  );
}

Object.assign(window, { ClubAnalysis });