// Persona picker — Coach, Student, Admin
// This is the entry point for NASEF reviewers to see each perspective

const PERSONAS = [
  {
    id: "coach",
    name: "Coach",
    titleSuffix: "Demo as a Coach",
    role: "Edwin Guama",
    school: "Hamilton High",
    avatar: "EG",
    avatarImg: "assets/avatars/lion.png",
    desc: "You're the SSBU coach at Hamilton, running a 6-player roster in CIF Pacific Coast. Today is Game Day — your match against Quartz Hill is live.",
    color: "var(--nasef-orange)",
    accent: "rgba(242,104,34,0.15)",
    border: "rgba(242,104,34,0.4)",
    icon: "shield",
    perms: [
      "Manage rosters & lineups",
      "Report scores, request reschedules, forfeit",
      "Appoint Team Captains",
      "Chat in all-chat and coach-only chat",
    ],
  },
  {
    id: "student",
    name: "Student",
    titleSuffix: "Demo as a Player",
    role: "Marcus Chen — \"Slate\"",
    school: "Hamilton HS · Player",
    captainRole: "Marcus Chen — \"Slate\"",
    captainSchool: "Hamilton HS · Team Captain",
    avatar: "MC",
    avatarImg: "assets/avatars/p1.png",
    desc: "You're on the SSBU varsity. Track your schedule, stats, and teammates, and follow your matches live with chat, rosters, and bracket updates.",
    captainDesc: "You're the Team Captain. Same player view, plus sub in coach-approved players, report match scores, and call reschedules or forfeits.",
    color: "var(--neon-cyan)",
    accent: "rgba(79,227,255,0.12)",
    border: "rgba(79,227,255,0.4)",
    icon: "user",
    perms: [
      "View team schedule & live match",
      "Chat with everyone in match (all-chat)",
      "View personal stats & match history",
      "Read-only on standings & brackets",
    ],
    captainPerms: [
      "Sub in players from coach-approved roster",
      "Report scores on behalf of the team",
      "Request reschedules and forfeit matches",
    ],
  },
  {
    id: "admin",
    name: "League Admin",
    titleSuffix: "Demo as an Admin",
    role: "James Wood",
    school: "NASEF · Scholastic Programs",
    avatar: "JW",
    avatarImg: "assets/avatars/james.png",
    desc: "You run NASEF's national esports operations. Add schools and districts, manage every league, override scores, broadcast announcements.",
    color: "var(--neon-violet)",
    accent: "rgba(155,109,255,0.12)",
    border: "rgba(155,109,255,0.4)",
    icon: "key",
    perms: [
      "Add schools and school districts",
      "Manage leagues and reschedule matches",
      "Override scores and brackets",
      "Send announcement notifications",
      "Manage all schools, teams, and coaches",
    ],
  },
];

const PersonaPicker = ({ onPick }) => {
  const [isCaptain, setIsCaptain] = React.useState(() => {
    try { return localStorage.getItem("nasef.captain") === "1"; } catch { return false; }
  });
  React.useEffect(() => {
    try { localStorage.setItem("nasef.captain", isCaptain ? "1" : "0"); } catch {}
  }, [isCaptain]);

  return (
    <div style={{ minHeight: "100vh", background: "var(--bg-deep)", color: "var(--text)", display: "flex", flexDirection: "column", position: "relative", overflow: "hidden" }}>
      <div style={{
        position: "absolute", inset: 0,
        background: `
          radial-gradient(ellipse 800px 500px at 50% 0%, rgba(242,104,34,0.12), transparent 70%),
          radial-gradient(ellipse 600px 400px at 20% 100%, rgba(79,227,255,0.07), transparent 60%),
          radial-gradient(ellipse 600px 400px at 80% 100%, rgba(155,109,255,0.07), transparent 60%)
        `,
      }} />
      <div className="bg-grid" style={{ position: "absolute", inset: 0, opacity: 0.4 }} />

      <header style={{ padding: "20px 56px", display: "flex", alignItems: "center", justifyContent: "space-between", position: "relative", zIndex: 1 }}>
        <NASEFMark />
        <button className="btn ghost sm" onClick={() => location.hash = "#/landing"}>
          <IconChevLeft size={12} /> Back to landing
        </button>
      </header>

      <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "40px 56px", position: "relative", zIndex: 1 }}>
        <div style={{ textAlign: "center", marginBottom: 56, maxWidth: 720 }}>
          <div className="badge orange" style={{ marginBottom: 20, padding: "5px 12px", fontSize: 12 }}>Proof of Concept · Built for NASEF Esports Initiative</div>
          <h1 style={{ fontSize: 52, letterSpacing: "-0.03em", lineHeight: 1.05, marginBottom: 18, fontWeight: 600 }}>
            Choose a perspective to demo.
          </h1>
          <p style={{ color: "var(--text-secondary)", fontSize: 16, lineHeight: 1.55 }}>
            Same platform, three points of view. Click any role to walk through the
            full game-day flow for the live SSBU match between Hamilton and Quartz Hill.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, maxWidth: 1180, width: "100%", alignItems: "stretch" }}>
          {PERSONAS.map(p => {
            const isStudent = p.id === "student";
            const captainActive = isStudent && isCaptain;
            const role = captainActive ? p.captainRole : p.role;
            const school = captainActive ? p.captainSchool : p.school;
            const desc = captainActive ? p.captainDesc : p.desc;

            return (
              <div key={p.id} className="persona-card-wrap" style={{ position: "relative", display: "flex" }}>
                <button onClick={() => onPick(p.id)}
                  className="persona-card"
                  style={{
                    all: "unset",
                    cursor: "pointer",
                    padding: 28,
                    borderRadius: "var(--r-lg)",
                    background: "var(--bg-raised)",
                    border: "1px solid var(--border)",
                    display: "flex",
                    flexDirection: "column",
                    gap: 18,
                    position: "relative",
                    transition: "all 0.18s ease",
                    flex: 1,
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.transform = "translateY(-4px)";
                    e.currentTarget.style.borderColor = p.border;
                    e.currentTarget.style.background = `linear-gradient(180deg, ${p.accent} 0%, var(--bg-raised) 70%)`;
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.transform = "translateY(0)";
                    e.currentTarget.style.borderColor = "var(--border)";
                    e.currentTarget.style.background = "var(--bg-raised)";
                  }}
                >
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                    <div className="upper" style={{ color: p.color, fontSize: 11, letterSpacing: "0.14em" }}>
                      {p.titleSuffix}
                    </div>
                    <div style={{
                      width: 32, height: 32, borderRadius: 8,
                      background: p.accent, border: `1px solid ${p.border}`,
                      color: p.color,
                      display: "flex", alignItems: "center", justifyContent: "center",
                    }}>
                      {p.id === "coach" && <IconShield size={16} />}
                      {p.id === "student" && <IconGrad size={16} />}
                      {p.id === "admin" && <IconCog size={16} />}
                    </div>
                  </div>

                  <div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 4 }}>
                      {p.name}
                    </div>
                    <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 14 }}>
                      <div style={{
                        width: 44, height: 44, borderRadius: 999,
                        overflow: "hidden", flexShrink: 0,
                        border: `2px solid ${p.border}`,
                        background: "linear-gradient(135deg, #2A1810, #14060A)",
                        display: "flex", alignItems: "center", justifyContent: "center",
                        fontWeight: 700, color: p.color, fontSize: 14,
                        boxShadow: `0 0 0 2px rgba(0,0,0,0.4), 0 4px 12px ${p.accent}`,
                      }}>
                        {p.avatarImg
                          ? <img src={p.avatarImg} alt={p.avatar} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                          : p.avatar}
                      </div>
                      <div>
                        <div style={{ fontSize: 13, fontWeight: 600 }}>{role}</div>
                        <div style={{ fontSize: 11, color: captainActive ? p.color : "var(--text-muted)" }}>{school}</div>
                      </div>
                    </div>
                  </div>

                  <p style={{ color: "var(--text-secondary)", fontSize: 13, lineHeight: 1.55, margin: 0 }}>
                    {desc}
                  </p>

                  {/* Captain toggle — only on student card. Not a child of <button> click. */}
                  {isStudent && (
                    <div
                      onClick={(e) => { e.stopPropagation(); e.preventDefault(); setIsCaptain(c => !c); }}
                      style={{
                        display: "flex", alignItems: "center", gap: 12,
                        padding: "10px 12px",
                        borderRadius: "var(--r-sm)",
                        background: captainActive ? "rgba(79,227,255,0.08)" : "var(--bg-base)",
                        border: `1px solid ${captainActive ? p.border : "var(--border-soft)"}`,
                        cursor: "pointer",
                        transition: "all 0.15s ease",
                      }}
                    >
                      <div style={{
                        width: 32, height: 18, borderRadius: 9,
                        background: captainActive ? p.color : "var(--bg-raised)",
                        border: `1px solid ${captainActive ? p.color : "var(--border)"}`,
                        position: "relative",
                        transition: "all 0.15s ease",
                        flexShrink: 0,
                      }}>
                        <div style={{
                          width: 12, height: 12, borderRadius: "50%",
                          background: captainActive ? "#0B0F18" : "var(--text-muted)",
                          position: "absolute", top: 2,
                          left: captainActive ? 17 : 2,
                          transition: "all 0.15s ease",
                        }} />
                      </div>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 12, fontWeight: 600, color: captainActive ? p.color : "var(--text-secondary)" }}>
                          Team Captain mode
                        </div>
                        <div style={{ fontSize: 10.5, color: "var(--text-muted)", marginTop: 1 }}>
                          Substitute, scoring and forfeit powers
                        </div>
                      </div>
                    </div>
                  )}

                  <div style={{ marginTop: "auto", paddingTop: 16, borderTop: "1px solid var(--border-soft)" }}>
                    <div className="upper muted" style={{ marginBottom: 10, fontSize: 10 }}>What you can do</div>
                    <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
                      {p.perms.map((perm, i) => (
                        <li key={i} style={{ display: "flex", gap: 8, fontSize: 12, color: "var(--text-secondary)" }}>
                          <IconCheck size={12} style={{ color: p.color, marginTop: 2, flexShrink: 0 }} />
                          {perm}
                        </li>
                      ))}
                    </ul>
                  </div>

                  <div style={{
                    marginTop: 4, padding: "10px 14px",
                    borderRadius: "var(--r-sm)",
                    background: "var(--bg-base)",
                    border: "1px solid var(--border)",
                    display: "flex", alignItems: "center", justifyContent: "space-between",
                    fontSize: 12, fontWeight: 600,
                    color: p.color,
                  }}>
                    Enter as {captainActive ? "Team Captain" : p.name} <IconArrowR size={14} />
                  </div>
                </button>
              </div>
            );
          })}
        </div>

        <div style={{ marginTop: 48, color: "var(--text-muted)", fontSize: 12, textAlign: "center", maxWidth: 600 }}>
          You can switch personas anytime from the user menu in the top-right of the app.
        </div>
      </div>
    </div>
  );
};

window.PersonaPicker = PersonaPicker;
window.PERSONAS = PERSONAS;