/* global React, SEED_TRAINERS, SEED_CLASSES, Icon */
const { useState: useStateLogin } = React;

function LoginScreen({ trainers, classes, totalPlayers, onLogin }) {
  const [email, setEmail] = useStateLogin("");
  const [password, setPassword] = useStateLogin("");
  const [error, setError] = useStateLogin("");
  const [loading, setLoading] = useStateLogin(false);
  const [pending, setPending] = useStateLogin(null); // Trainer mit mehreren Spielklassen

  const classById = (id) => classes.find(c => c.id === id);

  // Login via API (Passwortprüfung serverseitig / MySQL)
  const attempt = async () => {
    if (!email.trim()) { setError("Bitte E-Mail-Adresse eingeben."); return; }
    setError("");
    setLoading(true);
    try {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: email.trim(), password }),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || "E-Mail oder Passwort stimmt nicht.");
        return;
      }
      // Mehrere Spielklassen → Auswahl zeigen
      if (data.classes && data.classes.length > 1) {
        setPending({ id: data.trainerId, name: data.trainerName, classIds: data.classes });
      } else {
        onLogin(data.trainerId, data.classId);
      }
    } catch (e) {
      setError("Verbindungsfehler. Bitte Seite neu laden.");
    } finally {
      setLoading(false);
    }
  };

  const quickFill = (t) => {
    setEmail(t.email);
    setPassword(t.password);
    setError("");
  };

  // ===== Class picker (trainer with multiple classes) =====
  if (pending) {
    const myClasses = (pending.classIds || []).filter(classById);
    return (
      <div className="login-wrap">
        <div className="login-hero">
          <div className="login-hero-top">
            <img src="assets/admira-logo.webp" alt="SC Admira Dornbirn" />
            <div>
              <div style={{ fontSize: 12, opacity: 0.7, fontWeight: 500 }}>SC Admira Dornbirn 1946</div>
              <div style={{ fontSize: 16, fontWeight: 700 }}>Trainer-Portal</div>
            </div>
          </div>
          <div className="login-hero-content">
            <h1>Servus,<br />{pending.name.split(" ")[0]}.</h1>
            <p>Du betreust mehrere Spielklassen. Wähle aus, mit welcher du heute arbeiten möchtest.</p>
          </div>
          <div className="login-hero-meta"><div><b>{myClasses.length}</b> Spielklassen</div></div>
        </div>
        <div className="login-form-side">
          <div className="login-form">
            <h2>Spielklasse wählen</h2>
            <p className="sub">Du kannst später jederzeit wechseln (Abmelden → neu wählen).</p>
            <div className="profile-pick">
              {myClasses.map(cid => {
                const c = classById(cid);
                return (
                  <button key={cid} className="profile-card" onClick={async () => {
                    await fetch('/api/auth/class', {
                      method: 'POST',
                      headers: { 'Content-Type': 'application/json' },
                      body: JSON.stringify({ classId: cid }),
                    }).catch(console.error);
                    onLogin(pending.id, cid);
                  }}>
                    <div className="profile-avatar">{c.name}</div>
                    <div className="profile-info">
                      <div className="profile-name">Spielklasse {c.name}</div>
                      <div className="profile-role">Spielerpool, Plan & Trainingsutensilien</div>
                    </div>
                    <div style={{ color: "var(--primary)" }}><Icon.Check /></div>
                  </button>
                );
              })}
            </div>
            <button className="btn btn-secondary" style={{ width: "100%", marginTop: 18 }} onClick={() => setPending(null)}>
              Zurück
            </button>
          </div>
        </div>
      </div>
    );
  }

  // ===== Login form =====
  return (
    <div className="login-wrap">
      <div className="login-hero">
        <div className="login-hero-top">
          <img src="assets/admira-logo.webp" alt="SC Admira Dornbirn" />
          <div>
            <div style={{ fontSize: 12, opacity: 0.7, fontWeight: 500 }}>SC Admira Dornbirn 1946</div>
            <div style={{ fontSize: 16, fontWeight: 700 }}>Trainer-Portal</div>
          </div>
        </div>
        <div className="login-hero-content">
          <h1>Ballo Ballone.<br />Team-Management.</h1>
          <p>Spielereinstellungen, Mannschaftszuteilung und der komplette Matrixplan — direkt am Handy oder am Laptop. Für jeden Trainer, jede Spielklasse.</p>
        </div>
        <div className="login-hero-meta">
          <div><b>{classes.length}</b> Spielklassen</div>
          <div><b>{trainers.length}</b> Trainer</div>
          <div><b>{totalPlayers}</b> Spieler</div>
        </div>
      </div>

      <div className="login-form-side">
        <div className="login-form">
          <h2>Anmelden</h2>
          <p className="sub">Melde dich mit deiner Trainer-E-Mail an.</p>

          <div style={{ display: "grid", gap: 12 }}>
            <div>
              <label className="label">E-Mail</label>
              <input
                className="input"
                type="email"
                placeholder="vorname@admiradornbirn.at"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && attempt()}
              />
            </div>
            <div>
              <label className="label">Passwort</label>
              <input
                className="input"
                type="password"
                placeholder="••••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && attempt()}
              />
            </div>
          </div>

          {error && (
            <div style={{ marginTop: 12, padding: "10px 12px", background: "rgba(192,57,43,0.1)", color: "var(--danger)", borderRadius: 8, fontSize: 13, fontWeight: 600 }}>
              {error}
            </div>
          )}

          <button className="btn btn-lg" style={{ width: "100%", marginTop: 18 }} onClick={attempt} disabled={loading}>
            {loading ? "Wird geprüft…" : "Einloggen"}
          </button>

          <div className="login-divider">Demo-Zugänge</div>
          <div style={{ display: "grid", gap: 6 }}>
            {trainers.map(t => (
              <button
                key={t.id}
                className="profile-card"
                style={{ padding: "10px 12px" }}
                onClick={() => quickFill(t)}
                title="Zugangsdaten ausfüllen"
              >
                <div className="profile-avatar" style={{ width: 34, height: 34, fontSize: 12 }}>
                  {t.name.split(" ").map(s => s[0]).slice(0, 2).join("")}
                </div>
                <div className="profile-info">
                  <div className="profile-name">
                    {t.name}
                    {t.admin && <span className="badge" style={{ marginLeft: 8, height: 18, fontSize: 10 }}>Admin</span>}
                  </div>
                  <div className="profile-role">{t.email} · {(t.classIds || []).map(id => (classes.find(c => c.id === id) || {}).name).filter(Boolean).join(", ")}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;