// PlayerSignup — solo-spillere melder seg på en turnering uten lag
// Tre veier videre etter signup:
//   1) Kaptein inviterer deg inn i lag (free agents-liste i TeamCreate)
//   2) Du blir med i 2v2 Switcharoo-pulje (admin spinner deg inn random)
//   3) Du oppretter eget lag senere

const PlayerSignup = ({ tweaks, onNav, initialTournamentId, discordUser, isLoggedIn, onLoginRequest }) => {
  const accent = tweaks.accent;
  const [tournaments, setTournaments] = useState([]);
  const [tournamentId, setTournamentId] = useState(initialTournamentId || "");
  const [activisionId, setActivisionId] = useState("");
  const [displayName, setDisplayName] = useState(
    discordUser?.user_metadata?.full_name ||
    discordUser?.user_metadata?.name ||
    ""
  );
  const [notes, setNotes] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    WZN_Store.getTournaments().then(data => {
      const open = (data || []).filter(t =>
        t.status === "open" || t.status === "locked"
      );
      setTournaments(open);
      if (!tournamentId && open.length > 0) setTournamentId(open[0].id);
    });
  }, []);

  useEffect(() => {
    if (discordUser) {
      const name = discordUser.user_metadata?.full_name ||
                   discordUser.user_metadata?.name || "";
      if (!displayName) setDisplayName(name);
    }
  }, [discordUser]);

  const selectedTrn = tournaments.find(t => t.id === tournamentId);

  const handleSubmit = async () => {
    if (!isLoggedIn) {
      onLoginRequest && onLoginRequest();
      return;
    }
    if (!tournamentId) { setErrorMsg("Velg en turnering"); return; }
    if (!displayName.trim()) { setErrorMsg("Skriv inn et visningsnavn"); return; }
    if (!activisionId.trim()) { setErrorMsg("Activision ID må fylles inn (f.eks. ZRO_lars90#1234)"); return; }

    setSubmitting(true);
    setErrorMsg(null);

    const { data, error } = await WZN_Store.addPlayerSignup({
      tournamentId,
      displayName: displayName.trim(),
      activisionId: activisionId.trim(),
      discordId: discordUser?.user_metadata?.provider_id || discordUser?.id || null,
      discordName: discordUser?.user_metadata?.full_name || discordUser?.user_metadata?.name || null,
      notes: notes.trim() || null,
    });

    setSubmitting(false);
    if (error) {
      setErrorMsg("Påmelding feilet: " + error.message);
      return;
    }
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="ps-screen">
        <div className="ps-success" style={{borderColor: accent}}>
          <div className="ps-success-stamp" style={{borderColor: accent, color: accent}}>
            ✓ PÅMELDT
          </div>
          <h2 className="ps-success-title">Du er nå på lista!</h2>
          <p className="ps-success-text">
            Du står som <b>solo-spiller</b> for <b style={{color: accent}}>{selectedTrn?.name}</b>.
            Hva som skjer videre:
          </p>
          <div className="ps-success-paths">
            <div className="ps-path">
              <div className="ps-path-num" style={{color: accent}}>01</div>
              <div className="ps-path-h">EN KAPTEIN INVITERER DEG</div>
              <div className="ps-path-p">Lag som mangler spillere kan plukke deg fra "Free Agents"-lista.</div>
            </div>
            <div className="ps-path">
              <div className="ps-path-num" style={{color: accent}}>02</div>
              <div className="ps-path-h">SWITCHAROO 2V2</div>
              <div className="ps-path-p">Admin spinner alle solo-spillere sammen i tilfeldige 2v2-par ved turneringsstart.</div>
            </div>
            <div className="ps-path">
              <div className="ps-path-num" style={{color: accent}}>03</div>
              <div className="ps-path-h">OPPRETT EGET LAG</div>
              <div className="ps-path-p">Endrer du mening? Bygg ditt eget lag og ta med venner.</div>
            </div>
          </div>
          <div className="ps-success-actions">
            <button className="cta cta-ghost" onClick={() => onNav("landing")}>← TIL FORSIDEN</button>
            <button className="cta cta-primary" style={{background: accent, borderColor: accent}}
                    onClick={() => onNav({ id: "team-create", tournamentId })}>
              <span>OPPRETT EGET LAG I STEDET</span> <span>▶</span>
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="ps-screen">
      <button className="t-back" onClick={() => onNav("landing")} style={{borderColor: accent}}>
        <span style={{color: accent}}>←</span> TILBAKE TIL FORSIDEN
      </button>

      <div className="ps-header">
        <div className="hero-tag">
          <span className="tag-pip" style={{background: accent}} />
          <span>SOLO-PÅMELDING</span>
        </div>
        <h1 className="ps-title">PÅMELD DEG UTEN LAG</h1>
        <p className="ps-lede">
          Mangler du teammates? Meld deg på som solo-spiller, så kobles du til et lag
          eller plasseres i 2v2 Switcharoo-puljen før turneringsstart.
        </p>
      </div>

      {!isLoggedIn && (
        <div className="ps-login-prompt" style={{borderColor: accent}}>
          <div style={{fontFamily: "var(--font-stencil)", fontSize: "1.1rem", letterSpacing: ".05em", marginBottom: ".4rem"}}>
            DISCORD-LOGIN PÅKREVD
          </div>
          <div style={{color: "var(--text-dim)", fontSize: ".85rem", marginBottom: "1rem"}}>
            For å melde deg på må du være logget inn med Discord (sånn at admin kan tildele rolle og kontakte deg).
          </div>
          <button className="cta cta-primary" style={{background: accent, borderColor: accent}}
                  onClick={onLoginRequest}>
            <span>LOGG INN MED DISCORD</span> <span>▶</span>
          </button>
        </div>
      )}

      <div className="ps-form" style={!isLoggedIn ? {opacity: 0.5, pointerEvents: "none"} : null}>
        <div className="ps-field">
          <label className="ps-label">TURNERING</label>
          <select
            value={tournamentId}
            onChange={e => setTournamentId(e.target.value)}
            className="ps-input"
          >
            <option value="">— Velg turnering —</option>
            {tournaments.map(t => (
              <option key={t.id} value={t.id}>
                {t.name} · {t.start_date?.slice(0,10) || "TBD"} · {(t.team_size || "trios").toUpperCase()}
              </option>
            ))}
          </select>
          {tournaments.length === 0 && (
            <div className="ps-hint">Ingen åpne turneringer akkurat nå.</div>
          )}
        </div>

        <div className="ps-field">
          <label className="ps-label">VISNINGSNAVN</label>
          <input
            type="text"
            value={displayName}
            onChange={e => setDisplayName(e.target.value)}
            placeholder="Hvordan vil du vises på listen?"
            className="ps-input"
            maxLength={32}
          />
        </div>

        <div className="ps-field">
          <label className="ps-label">ACTIVISION ID <span style={{color: "var(--text-faint)"}}>(med #-nummer)</span></label>
          <input
            type="text"
            value={activisionId}
            onChange={e => setActivisionId(e.target.value)}
            placeholder="f.eks. ZRO_lars90#1234"
            className="ps-input"
            maxLength={32}
          />
          <div className="ps-hint">Trengs for å invitere deg inn i lobby. Finn den i Warzone-menyen.</div>
        </div>

        <div className="ps-field">
          <label className="ps-label">EKSTRA INFO <span style={{color: "var(--text-faint)"}}>(valgfritt)</span></label>
          <textarea
            value={notes}
            onChange={e => setNotes(e.target.value)}
            placeholder="F.eks. preferert rolle (IGL / fragger / support), tidsperioder du IKKE kan spille, etc."
            className="ps-input ps-textarea"
            maxLength={300}
            rows={3}
          />
        </div>

        {errorMsg && (
          <div className="ps-error" style={{color: "var(--bad)"}}>{errorMsg}</div>
        )}

        <button
          onClick={handleSubmit}
          disabled={submitting || !isLoggedIn}
          className="cta cta-primary cta-block ps-submit"
          style={{background: accent, borderColor: accent}}
        >
          {submitting ? "SENDER…" : (
            <><span>MELD MEG PÅ SOM SOLO-SPILLER</span> <span>▶</span></>
          )}
        </button>

        <div className="ps-disclaimer">
          Ved påmelding bekrefter du at du er minimum 16 år, eier en gyldig Warzone-konto,
          og at du følger WZN-reglene under turneringen.
        </div>
      </div>
    </div>
  );
};

window.PlayerSignup = PlayerSignup;