// Home / Dashboard — view depends on persona

const HomePage = ({ persona, onNav, onOpenLobby, onReportScore }) => {
  const D = window.NASEF_DATA;
  const personaInfo = window.PERSONAS.find(p => p.id === persona);
  const liveMatch = D.matches.find(m => m.status === "live");
  const upcoming = D.matches.filter(m => m.status === "upcoming").slice(0, 3);
  const recent = D.matches.filter(m => m.status === "complete").slice(-3).reverse();
  const ham = D.schoolsById.ham;

  // Persona-specific greeting
  const greeting = {
    coach:   { eyebrow: "Game Day · Friday, May 8 · 4:00 PM PT",     title: "Hamilton vs. Quartz Hill is live in 17 minutes." },
    student: { eyebrow: "Welcome back, Slate",                        title: "Your match is live — captain's roster locked." },
    admin:   { eyebrow: "CIF Esports Initiative · 162 active leagues", title: "8 matches live across the network right now." },
  }[persona];

  return (
    <div className="home-page" style={{ display: "flex", flexDirection: "column", gap: 24 }}>
      {/* Hero band */}
      <div className="home-hero" style={{
        position: "relative",
        padding: "28px 32px",
        borderRadius: "var(--r-lg)",
        background: "linear-gradient(120deg, rgba(242,104,34,0.18) 0%, rgba(11,15,24,0.6) 50%, rgba(155,109,255,0.12) 100%)",
        border: "1px solid var(--border)",
        overflow: "hidden",
      }}>
        <div className="bg-grid" style={{ position: "absolute", inset: 0, opacity: 0.4, maskImage: "linear-gradient(180deg, black, transparent)" }} />
        <div style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 }}>
          <div>
            <div className="upper" style={{ color: "var(--nasef-orange-soft)", marginBottom: 8 }}>{greeting.eyebrow}</div>
            <h1 style={{ fontSize: 28, letterSpacing: "-0.02em", fontWeight: 600, marginBottom: 6, lineHeight: 1.15 }}>{greeting.title}</h1>
            <p style={{ color: "var(--text-secondary)", margin: 0, fontSize: 14 }}>
              {persona === "admin"
                ? "Pacific Coast Division enters playoffs next week. Spot-check live matches and approve pending reschedules from the Admin Console."
                : persona === "student"
                ? "Your coach has confirmed the lineup. Stage striking begins when you join the lobby."
                : "Your match against Quartz Hill is the deciding game for the #1 seed. Open the lobby to begin stage striking."
              }
            </p>
          </div>
          {liveMatch && (
            <button className="btn primary lg" onClick={() => onOpenLobby(liveMatch.id)}>
              <span className="dot" style={{ width: 6, height: 6, borderRadius: 99, background: "#14060A" }} />
              Open match lobby <IconArrowR size={14} />
            </button>
          )}
        </div>
      </div>

      {/* Two-col body */}
      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 24 }}>
        {/* LEFT */}
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          {/* Live match card */}
          {liveMatch && (
            <div className="card home-live-card">
              <div className="card-header">
                <div className="row-tight">
                  <h3>This match</h3>
                  <span className="badge live"><span className="dot" />LIVE</span>
                </div>
                <div className="row" style={{ gap: 8 }}>
                  <GameTag game="SSBU" />
                  <span className="upper muted">Wk 5 · BO5</span>
                </div>
              </div>
              <div className="home-live-body" style={{ padding: 24 }}>
                <div className="home-live-score" style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 24 }}>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
                    <Crest school={D.schoolsById.ham} size="xl" />
                    <div style={{ textAlign: "center", lineHeight: 1.25 }}>
                      <div style={{ fontWeight: 700, fontSize: 16 }}>{D.schoolsById.ham.mascot}</div>
                      <div style={{ fontSize: 12, color: "var(--text-secondary)" }}>{D.schoolsById.ham.name}</div>
                      <div className="muted mono" style={{ fontSize: 11, marginTop: 4 }}>4–0</div>
                    </div>
                  </div>
                  <div style={{ textAlign: "center" }}>
                    <div className="mono" style={{ fontSize: 56, fontWeight: 700, lineHeight: 1, letterSpacing: "0.02em", display: "flex", alignItems: "center", justifyContent: "center", gap: 56 }}>
                      <span style={{ color: "var(--nasef-orange)" }}>2</span>
                      <span>1</span>
                    </div>
                    <div className="upper muted" style={{ marginTop: 12 }}>Game 4 · Hollow Bastion</div>
                  </div>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
                    <Crest school={D.schoolsById.qhl} size="xl" />
                    <div style={{ textAlign: "center", lineHeight: 1.25 }}>
                      <div style={{ fontWeight: 700, fontSize: 16 }}>{D.schoolsById.qhl.mascot}</div>
                      <div style={{ fontSize: 12, color: "var(--text-secondary)" }}>{D.schoolsById.qhl.name}</div>
                      <div className="muted mono" style={{ fontSize: 11, marginTop: 4 }}>3–1</div>
                    </div>
                  </div>
                </div>
                <div className="home-live-footer" style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--border-soft)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
                  <div className="row home-live-meta" style={{ gap: 18, fontSize: 12, color: "var(--text-secondary)" }}>
                    <div className="row-tight"><IconLink size={13} /><span className="mono">NASEF-44C2</span></div>
                    <div className="row-tight"><IconClock size={13} />Started 4:02 PM</div>
                    <div className="row-tight"><IconUsers size={13} />6 in lobby</div>
                  </div>
                  <button className="btn primary" onClick={() => onOpenLobby(liveMatch.id)}>
                    Enter lobby <IconArrowR size={12} />
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* Upcoming matches */}
          <div className="card">
            <div className="card-header">
              <h3>Upcoming matches</h3>
              <button className="btn ghost sm" onClick={() => onNav("schedule")}>
                View schedule <IconChevRight size={12} />
              </button>
            </div>
            <div style={{ padding: 8 }}>
              {upcoming.map(m => (
                <MatchRow key={m.id} match={m} schools={D.schoolsById} onClick={() => onOpenLobby(m.id)} />
              ))}
            </div>
          </div>

          {/* Recent results */}
          <div className="card">
            <div className="card-header">
              <h3>Recent results</h3>
              <span className="badge complete">4-0 in conference</span>
            </div>
            <div style={{ padding: 8 }}>
              {recent.map(m => (
                <MatchRow key={m.id} match={m} schools={D.schoolsById} />
              ))}
            </div>
          </div>
        </div>

        {/* RIGHT */}
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          {/* Standings widget */}
          <div className="card">
            <div className="card-header">
              <h3>Pacific Coast · SSBU</h3>
              <button className="btn ghost sm" onClick={() => onNav("standings")}>
                Full table <IconChevRight size={12} />
              </button>
            </div>
            <div style={{ padding: 0 }}>
              <table className="table">
                <thead>
                  <tr><th style={{ width: 30 }}>#</th><th>Team</th><th style={{ textAlign: "right" }}>W-L</th><th style={{ textAlign: "right", width: 50 }}>Strk</th></tr>
                </thead>
                <tbody>
                  {D.standings.slice(0, 6).map(s => {
                    const sch = D.schoolsById[s.schoolId];
                    const me = s.schoolId === "ham";
                    const streakKind = s.streak[0]; // W / L / —
                    const streakNum = s.streak.replace(/[WL]/, "");
                    const streakColor = streakKind === "W" ? "var(--success)"
                                      : streakKind === "L" ? "var(--danger)"
                                      : "var(--text-muted)";
                    return (
                      <tr key={s.schoolId} style={me ? { background: "rgba(242,104,34,0.06)" } : {}}>
                        <td className="mono muted">{s.rank}</td>
                        <td>
                          <div className="row" style={{ gap: 10 }}>
                            <Crest school={sch} size="sm" />
                            <span style={{ fontWeight: me ? 600 : 400 }}>{sch.short}</span>
                            {me && <span className="badge orange" style={{ fontSize: 10, padding: "2px 6px" }}>You</span>}
                          </div>
                        </td>
                        <td className="mono" style={{ textAlign: "right", fontWeight: 600 }}>{s.w}-{s.l}</td>
                        <td className="mono" style={{ textAlign: "right", color: streakColor, fontWeight: 700 }}>{streakNum}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>

          {/* Other live matches */}
          <div className="card">
            <div className="card-header">
              <div className="row-tight">
                <h3>Live across CIF</h3>
                <span className="badge live"><span className="dot" />3</span>
              </div>
            </div>
            <div style={{ padding: 12, display: "flex", flexDirection: "column", gap: 4 }}>
              {D.otherLiveMatches.map(m => {
                const home = D.schoolsById[m.home];
                const away = D.schoolsById[m.away];
                return (
                  <div key={m.id} style={{ padding: "10px 12px", borderRadius: "var(--r-sm)", display: "flex", alignItems: "center", gap: 10, fontSize: 13 }}>
                    <Crest school={home} size="sm" />
                    <span style={{ flex: 1 }}>{home.short}</span>
                    <span className="mono" style={{ fontWeight: 600 }}>{m.homeScore}</span>
                    <span className="muted">·</span>
                    <span className="mono" style={{ fontWeight: 600 }}>{m.awayScore}</span>
                    <span style={{ flex: 1, textAlign: "right" }}>{away.short}</span>
                    <Crest school={away} size="sm" />
                  </div>
                );
              })}
            </div>
          </div>

          {/* Announcements moved to top-bar bell */}
        </div>
      </div>
    </div>
  );
};

window.HomePage = HomePage;