/* global React */
// BikeForge — Auth Screen (Login / Register)

const { useState, useEffect } = React;
const Icon = window.BikeIcon;

const HERO_PHOTOS = [
  "https://images.unsplash.com/photo-1650130504767-b5df679feff3?auto=format&fit=crop&w=2000&q=85",
  "https://images.unsplash.com/photo-1663273144838-731f87e8a20b?auto=format&fit=crop&w=2000&q=85",
  "https://images.unsplash.com/photo-1642227600302-92e0ae96bfcc?auto=format&fit=crop&w=2000&q=85",
];

function AuthScreen({ onAuth }) {
  const [mode, setMode] = useState("login");
  const [photoIdx, setPhotoIdx] = useState(0);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const t = setInterval(() => setPhotoIdx(i => (i + 1) % HERO_PHOTOS.length), 5000);
    return () => clearInterval(t);
  }, []);

  const switchMode = (m) => { setMode(m); setError(""); };

  const submit = async (e) => {
    e.preventDefault();
    setError("");
    setLoading(true);
    try {
      const url = mode === "login" ? "/api/auth/login" : "/api/auth/register";
      const body = mode === "login"
        ? { email, password }
        : { email, password, name };
      const res = await fetch(url, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || "Unbekannter Fehler.");
      } else {
        localStorage.setItem("bf_token", data.token);
        localStorage.setItem("bf_user", JSON.stringify(data.user));
        onAuth(data.user, data.token);
      }
    } catch {
      setError("Verbindungsfehler — ist der Server erreichbar?");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      minHeight: "100vh",
      display: "grid",
      gridTemplateColumns: "1fr 520px",
      background: "var(--canvas)",
    }}>

      {/* LEFT — Brand hero */}
      <div style={{
        background: "#0a0a0a",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        padding: "48px 72px",
        borderRight: "1px solid var(--hairline)",
        position: "relative",
        overflow: "hidden",
      }}>
        {/* Hero bike photos — crossfade slideshow */}
        {HERO_PHOTOS.map((url, i) => (
          <div key={url} style={{
            position: "absolute", inset: 0,
            backgroundImage: `url('${url}')`,
            backgroundSize: "cover",
            backgroundPosition: "center 50%",
            pointerEvents: "none",
            opacity: i === photoIdx ? 1 : 0,
            transition: "opacity 1.4s ease-in-out",
          }} />
        ))}
        {/* Dark overlay for readability */}
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(160deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.82) 100%)",
          pointerEvents: "none",
        }} />

        {/* Brand mark */}
        <div className="brand-mark" style={{ position: "relative", zIndex: 1 }}>
          <span className="brand-mark-icon"><Icon name="bolt" size={14} /></span>
          BIKEFORGE
        </div>

        {/* Hero text */}
        <div style={{ position: "relative", zIndex: 1 }}>
          <div className="eyebrow eyebrow-accent" style={{ marginBottom: 24 }}>
            Algorithmischer Bike-Konfigurator
          </div>
          <div style={{
            font: "500 80px/1.0 var(--font-sans)",
            letterSpacing: "-1.6px",
            color: "var(--ink)",
            marginBottom: 28,
          }}>
            Dein perfektes<br />
            <span style={{ color: "var(--accent)" }}>Bike.</span>
          </div>
          <p style={{
            color: "var(--ink-soft)",
            maxWidth: 420,
            font: "400 16px/1.65 var(--font-sans)",
          }}>
            Profil eingeben, Build entsteht live. Jede Komponente algorithmisch
            begründet — Sicherheit zuerst, Budget zuletzt.
          </p>
        </div>

        {/* Stats strip */}
        <div style={{
          position: "relative", zIndex: 1,
          borderTop: "1px solid var(--hairline)",
          paddingTop: 28,
          display: "grid",
          gridTemplateColumns: "1fr 1fr 1fr",
          gap: 32,
        }}>
          {[
            { value: "35+", label: "Rahmen" },
            { value: "120+", label: "Komponenten" },
            { value: "V2", label: "Algorithmus" },
          ].map((s, i) => (
            <div key={i}>
              <div style={{
                font: "500 32px/1 var(--font-sans)",
                letterSpacing: "-0.64px",
                fontVariantNumeric: "tabular-nums",
                color: "var(--accent)",
              }}>{s.value}</div>
              <div className="eyebrow" style={{ marginTop: 8, color: "var(--ink-soft)" }}>
                {s.label}
              </div>
            </div>
          ))}
        </div>

        {/* Brand ticker */}
        <div style={{ position: "relative", zIndex: 1, marginLeft: -72, marginRight: -72 }}>
          {window.BikeUI?.BrandTicker && <window.BikeUI.BrandTicker />}
        </div>
      </div>

      {/* RIGHT — Form */}
      <div style={{
        background: "var(--canvas-elevated)",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        padding: "64px 56px",
      }}>
        <div style={{ maxWidth: 380 }}>

          {/* Mode toggle tabs */}
          <div style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            border: "1px solid var(--hairline-strong)",
            marginBottom: 40,
          }}>
            {[
              { key: "login", label: "Anmelden" },
              { key: "register", label: "Registrieren" },
            ].map((tab) => (
              <button
                key={tab.key}
                onClick={() => switchMode(tab.key)}
                style={{
                  background: mode === tab.key ? "var(--accent)" : "transparent",
                  color: mode === tab.key ? "var(--accent-ink)" : "var(--ink-soft)",
                  border: "none",
                  padding: "14px 8px",
                  font: "700 11px/1 var(--font-sans)",
                  letterSpacing: "1.2px",
                  textTransform: "uppercase",
                  cursor: "pointer",
                  transition: "all 200ms",
                }}
              >
                {tab.label}
              </button>
            ))}
          </div>

          <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 22 }}>

            {mode === "register" && (
              <AuthField
                label="Name"
                type="text"
                value={name}
                onChange={setName}
                placeholder="Max Mustermann"
                autoFocus
                required
              />
            )}

            <AuthField
              label="E-Mail"
              type="email"
              value={email}
              onChange={setEmail}
              placeholder="max@example.com"
              autoFocus={mode === "login"}
              required
            />

            <AuthField
              label="Passwort"
              type="password"
              value={password}
              onChange={setPassword}
              placeholder={mode === "register" ? "Mindestens 6 Zeichen" : "••••••••"}
              required
            />

            {error && (
              <div style={{
                padding: "12px 14px",
                background: "var(--accent-soft)",
                borderLeft: "2px solid var(--accent)",
                color: "var(--ink)",
                font: "500 13px/1.45 var(--font-sans)",
                display: "flex",
                gap: 10,
                alignItems: "flex-start",
              }}>
                <span style={{ marginTop: 2, flexShrink: 0 }}>
                  <Icon name="warn" size={15} />
                </span>
                {error}
              </div>
            )}

            <button
              type="submit"
              className="btn btn-primary"
              disabled={loading}
              style={{
                width: "100%",
                justifyContent: "center",
                padding: "16px 24px",
                marginTop: 6,
                opacity: loading ? 0.7 : 1,
              }}
            >
              {loading
                ? "Bitte warten…"
                : mode === "login"
                  ? "Anmelden"
                  : "Account erstellen"}
            </button>
          </form>

          {/* Divider */}
          <div style={{
            marginTop: 32,
            paddingTop: 24,
            borderTop: "1px solid var(--hairline)",
            display: "flex",
            alignItems: "center",
            gap: 12,
          }}>
            <span style={{ color: "var(--ink-soft)", font: "400 13px/1 var(--font-sans)" }}>
              {mode === "login" ? "Noch kein Account?" : "Bereits registriert?"}
            </span>
            <button
              className="btn btn-ghost btn-sm"
              style={{ padding: "4px 0", color: "var(--accent)", letterSpacing: "0.5px" }}
              onClick={() => switchMode(mode === "login" ? "register" : "login")}
            >
              {mode === "login" ? "Jetzt registrieren →" : "Anmelden →"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function AuthField({ label, type, value, onChange, placeholder, autoFocus, required }) {
  const [focused, setFocused] = useState(false);
  return (
    <div className="field">
      <div className="field-label">{label}</div>
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        autoFocus={autoFocus}
        required={required}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        style={{
          width: "100%",
          background: "var(--canvas)",
          border: `1px solid ${focused ? "var(--accent)" : "var(--hairline-strong)"}`,
          color: "var(--ink)",
          font: "400 15px/1 var(--font-sans)",
          padding: "13px 14px",
          outline: "none",
          boxSizing: "border-box",
          transition: "border-color 150ms",
        }}
      />
    </div>
  );
}

window.BikeAuth = { AuthScreen };