// Dashboard — post-profile landing hub with tiles to each module.

function Dashboard({ profile, onNav, onOpenPlayer }) {
  const { PLAYERS, BVB_SQUAD, CATEGORIES, CONSTRUCTION_SITES, TARGETS } = window.IAMS_DATA;
  // Top 3 reinforcements (from targets, by fit)
  const topTargets = [...TARGETS].sort((a,b) => b.fit - a.fit).slice(0, 3);
  const injuryFlagged = BVB_SQUAD.filter(p => p.injury.badge !== "green");
  const avgIams = Math.round(BVB_SQUAD.reduce((s,p) => s + p.iams, 0) / BVB_SQUAD.length);
  const avgAge  = (BVB_SQUAD.reduce((s,p) => s + p.age, 0) / BVB_SQUAD.length).toFixed(1);
  const bandCounts = CATEGORIES.map(c => ({ ...c, count: BVB_SQUAD.filter(p => p.categoryId === c.id).length }));

  return (
    <div style={{ padding: "28px 40px 80px", maxWidth: 1440, margin: "0 auto", width: "100%" }}>
      {/* Hero strip */}
      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 28, alignItems: "end" }}>
        <div>
          <div className="mono" style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 10 }}>
            Dashboard · {new Date().toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })}
          </div>
          <div className="display" style={{ fontSize: "clamp(30px, 3.6vw, 48px)", fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.02 }}>
            <span className="underline-accent">{profile.name}</span> · Summer {new Date().getFullYear()} scouting brief
          </div>
          <div style={{ marginTop: 14, fontSize: 16, color: "var(--ink-dim)", maxWidth: 620, textWrap: "pretty" }}>
            Squad audit identified <strong>{CONSTRUCTION_SITES.length} construction sites</strong>.
            IAMGPT has drafted {topTargets.length} reinforcement shortlists matched to your {profile.philosophy} philosophy
            and {profile.budget} budget band.
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
          <StatTile label="Squad IAMS avg" value={avgIams} sub="/200" accent/>
          <StatTile label="Avg age" value={avgAge} sub="years"/>
          <StatTile label="Injury flags" value={injuryFlagged.length} sub={`of ${BVB_SQUAD.length}`}/>
        </div>
      </div>

      {/* Module tiles */}
      <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
        <ModuleTile
          n="01" label="Camelot Wheel"
          title="Compatibility across 4 axes"
          sub="Role · Geo · League · Mental. Our signature USP — the harmonic wheel of football."
          accent
          onClick={() => onNav("camelot")}
        />
        <ModuleTile
          n="02" label="Shadow Team"
          title="Your top XI, pitched to the board"
          sub="Build a shadow line-up with a target for every position. Annotate and export."
          accent
          onClick={() => onNav("shadow")}
        />
        <ModuleTile
          n="03" label="Club Analysis"
          title={`5-band audit · ${CONSTRUCTION_SITES.length} construction sites`}
          sub="Roster evaluation. Identifies weaknesses, risk positions, age-structure gaps."
          onClick={() => onNav("analysis")}
        />
        <ModuleTile
          n="04" label="World Map"
          title="Geo-scouting zones"
          sub="Countries color-coded by fit. Drill into leagues, then clubs, then players."
          onClick={() => onNav("map")}
        />
        <ModuleTile
          n="05" label="Shortlist"
          title={`${TARGETS.length} targets ranked`}
          sub="Filterable by position, IAMS, Camelot band, market value, or role fit."
          onClick={() => onNav("list")}
        />
        <ModuleTile
          n="06" label="IAMGPT"
          title="Ask / explain / match"
          sub="Natural language search. Explains suggestions. Generates on-demand reports."
          onClick={() => { onNav("iamgpt"); }}
        />
      </div>

      {/* Two-column band summary + priorities */}
      <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 20 }}>
        <div className="card" style={{ padding: 28 }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
            <div>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.14em", textTransform: "uppercase" }}>Squad audit · at a glance</div>
              <div className="display" style={{ fontSize: 22, fontWeight: 600, marginTop: 4 }}>5-band categorization</div>
            </div>
            <button className="btn ghost sm" onClick={() => onNav("analysis")}>Open full audit →</button>
          </div>
          <div style={{ marginTop: 18, display: "grid", gap: 10 }}>
            {bandCounts.map(b => (
              <div key={b.id} className={b.color} style={{
                display: "grid", gridTemplateColumns: "4px 1fr auto", gap: 16,
                alignItems: "center",
                padding: "10px 0",
                borderTop: "1px solid var(--rule)",
              }}>
                <div className="band-strip"/>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{b.label}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-muted)", marginTop: 2 }}>{b.desc}</div>
                </div>
                <div className="display tnum" style={{ fontSize: 28, fontWeight: 600, color: "var(--band)" }}>{b.count}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card" style={{ padding: 28 }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
            <div>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.14em", textTransform: "uppercase" }}>Priority targets</div>
              <div className="display" style={{ fontSize: 22, fontWeight: 600, marginTop: 4 }}>Top 3 by club fit</div>
            </div>
          </div>
          <div style={{ marginTop: 18, display: "grid", gap: 14 }}>            {topTargets.map((p, i) => (
              <button key={p.id} onClick={() => onOpenPlayer(p.id)}
                style={{
                  display: "grid",
                  gridTemplateColumns: "28px 1fr auto",
                  gap: 12,
                  alignItems: "center",
                  padding: "10px 0",
                  borderTop: "1px solid var(--rule)",
                  textAlign: "left",
                  width: "100%",
                }}>
                <div className="display tnum" style={{ fontSize: 22, fontWeight: 600, color: "var(--ink-muted)" }}>
                  {String(i + 1).padStart(2, "0")}
                </div>
                <div>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ fontSize: 14, fontWeight: 600 }}>{p.name}</span>
                    {p.darkHorse && <span className="dark-horse">dark horse</span>}
                  </div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--ink-muted)", marginTop: 2 }}>
                    {p.pos} · {p.age} · {p.club} · {window.IAMS_DATA.COUNTRIES.find(c => c.iso === p.country)?.name}
                  </div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 6, justifyContent: "flex-end" }}>
                    <ProbPill value={p.fit} label="fit"/>
                    {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>
                  <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", marginTop: 4 }}>€{p.mv.toFixed(1)}M · IAMS {p.iams}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Gamification row: Trust + Leaderboard */}
      <TrustBoard profile={profile}/>
    </div>
  );
}

function TrustBoard({ profile }) {
  const D = window.IAMS_DATA;
  const xp = D.clubXP(profile).xp;
  const trust = D.trustFor(xp);
  const lead = D.LEADERBOARD;

  return (
    <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 20 }}>
      <div className="card" style={{ padding: 28 }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
          Scouting Trust · earned, not bought
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 22, alignItems: "center", marginTop: 18 }}>
          <div style={{
            width: 96, height: 96,
            display: "grid", placeItems: "center",
            border: "2px solid " + trust.current.color,
            background: "var(--panel-2)",
          }}>
            <div style={{ textAlign: "center" }}>
              <div className="display tnum" style={{ fontSize: 38, fontWeight: 700, color: trust.current.color, lineHeight: 1 }}>
                {trust.current.level}
              </div>
              <div className="mono" style={{ fontSize: 9, color: trust.current.color, letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 2 }}>
                {trust.current.label}
              </div>
            </div>
          </div>
          <div>
            <XpBar xp={xp} trust={trust}/>
            <div style={{ marginTop: 14, fontSize: 12.5, color: "var(--ink-dim)", lineHeight: 1.55 }}>
              Every rating you submit, every shadow-team slot you fill, and every scouting report you file
              earns your club XP. Higher trust = more weight in community ratings, earlier access to Dark Horse
              feeds, and board-level reporting export.
            </div>
          </div>
        </div>
        <div style={{ marginTop: 18, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
          <XpChip label="Actions"   value={D.clubXP(profile).actions}/>
          <XpChip label="Ratings"   value={D.clubXP(profile).ratings}/>
          <XpChip label="Reports"   value={D.clubXP(profile).reports}/>
          <XpChip label="Shadow XI" value={D.clubXP(profile).shadowSlots}/>
        </div>
      </div>

      <div className="card" style={{ padding: 28 }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
          <div>
            <div className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
              Scouting Leaderboard · this month
            </div>
            <div className="display" style={{ fontSize: 20, fontWeight: 600, marginTop: 4 }}>Top clubs by XP</div>
          </div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
            Pilot · 42 clubs
          </div>
        </div>
        <div style={{ marginTop: 14, display: "grid", gap: 0 }}>
          {lead.map(c => (
            <div key={c.rank} style={{
              display: "grid", gridTemplateColumns: "30px 1fr 70px 70px", gap: 10, alignItems: "center",
              padding: "10px 0",
              borderTop: "1px solid var(--rule)",
              background: c.self ? "var(--accent-soft)" : "transparent",
              paddingLeft: c.self ? 8 : 0, paddingRight: c.self ? 8 : 0,
            }}>
              <div className="mono tnum" style={{ fontSize: 14, fontWeight: 700, color: c.rank <= 3 ? "var(--accent)" : "var(--ink-muted)" }}>
                #{c.rank}
              </div>
              <div>
                <div style={{ fontSize: 13.5, fontWeight: c.self ? 700 : 500 }}>
                  {c.name} {c.self && <span className="mono" style={{ fontSize: 9, color: "var(--accent)", letterSpacing: "0.1em", marginLeft: 6 }}>YOU</span>}
                </div>
                <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)" }}>{c.flag}</div>
              </div>
              <div className="display tnum" style={{ fontSize: 15, fontWeight: 600, textAlign: "right" }}>{c.xp.toLocaleString()}</div>
              <div className="mono tnum" style={{ fontSize: 11, color: "var(--good)", textAlign: "right" }}>{c.dir}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function XpChip({ label, value }) {
  return (
    <div style={{
      padding: "8px 10px",
      background: "var(--panel-2)",
      border: "1px solid var(--rule)",
    }}>
      <div className="mono" style={{ fontSize: 9, color: "var(--ink-muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>{label}</div>
      <div className="display tnum" style={{ fontSize: 18, fontWeight: 700, color: "var(--ink)", marginTop: 2 }}>{value}</div>
    </div>
  );
}

function StatTile({ label, value, sub, accent }) {
  return (
    <div className="card" style={{ padding: 18 }}>
      <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.14em", textTransform: "uppercase" }}>{label}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginTop: 8 }}>
        <div className="display tnum" style={{ fontSize: 36, fontWeight: 600, letterSpacing: "-0.02em", color: accent ? "var(--accent)" : "var(--ink)" }}>{value}</div>
        <div className="mono" style={{ fontSize: 11, color: "var(--ink-muted)" }}>{sub}</div>
      </div>
    </div>
  );
}

function ModuleTile({ n, label, title, sub, onClick, accent }) {
  return (
    <button onClick={onClick} className="card" style={{
      padding: 22,
      textAlign: "left",
      display: "flex", flexDirection: "column", gap: 10,
      minHeight: 200,
      border: accent ? "1px solid var(--accent)" : "1px solid var(--rule)",
      background: accent ? "var(--accent-soft)" : "var(--panel)",
      transition: "background .12s ease, transform .08s ease",
    }}
      onMouseEnter={e => e.currentTarget.style.background = accent ? "var(--accent-soft)" : "var(--panel-2)"}
      onMouseLeave={e => e.currentTarget.style.background = accent ? "var(--accent-soft)" : "var(--panel)"}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
        <div className="mono" style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.14em" }}>{n}</div>
        <div className="mono" style={{ fontSize: 10, color: accent ? "var(--accent)" : "var(--ink-muted)", letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: accent ? 700 : 500 }}>{label}{accent && " ★"}</div>
      </div>
      <div className="display" style={{ fontSize: 20, fontWeight: 600, letterSpacing: "-0.01em", lineHeight: 1.15 }}>{title}</div>
      <div style={{ fontSize: 12, color: "var(--ink-muted)", lineHeight: 1.5, flex: 1 }}>{sub}</div>
      <div className="mono" style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.12em", textTransform: "uppercase" }}>Open →</div>
    </button>
  );
}

Object.assign(window, { Dashboard });