// ─────────────────────────────────────────────────────────
// ChefVerse · Login + Forgot + Reset password screens
// Layout: form panel LEFT (locale dropdown top-left), image+glass hero RIGHT
// ─────────────────────────────────────────────────────────

const LOGIN_I18N = {
  en: {
    eyebrow: "Built for working chefs",
    headline: "Sign in to grow your audience without losing your edge.",
    sub: "Modules filmed by chefs. Briefs from real brands. Payouts that respect your time.",
    bullet1: "8 chef-led modules per path",
    bullet2: "Practice briefs with real payouts",
    bullet3: "Earn rewards as you ship",
    emailLabel: "Work email",
    emailPlaceholder: "you@yourrestaurant.com",
    passwordLabel: "Password",
    passwordPlaceholder: "•••••••••",
    forgot: "Forgot password?",
    cta: "Sign in",
    noAccount: "Not invited yet?",
    request: "Request access",
    legalLine: "By signing in you agree to our",
    terms: "Terms",
    and: "and",
    privacy: "Privacy Policy",
    quoteAttribution: "— Marco Rivera, Sous chef, NYC",
    quote: "I shot a brief on a Wednesday lunch break and got paid by Friday. That's never happened in eighteen years of cooking.",
    welcomeBack: "Welcome back",
    signInToContinue: "Sign in to continue your work.",
    // Forgot password
    forgotTitle: "Forgot your password?",
    forgotSub: "Enter the email tied to your ChefVerse account. We'll send you a link to set a new one.",
    forgotCta: "Send reset link",
    forgotBackToSignIn: "Back to sign in",
    forgotSentTitle: "Check your inbox",
    forgotSentSub: "If an account exists for {email}, we just sent a password-reset link. Check spam too — these things sometimes hide.",
    forgotSentResend: "Didn't get it? Resend",
    // Reset password
    resetTitle: "Set a new password",
    resetSub: "Pick something you'll actually remember. At least 8 characters, mix it up.",
    resetNewLabel: "New password",
    resetConfirmLabel: "Confirm new password",
    resetCta: "Update password",
    resetMismatch: "Passwords don't match yet.",
    resetTooShort: "Use at least 8 characters.",
    resetDoneTitle: "Password updated",
    resetDoneSub: "You're good to go. Sign in with your new password to keep cooking.",
    resetGoToSignIn: "Go to sign in",
  },
  de: {
    eyebrow: "Gebaut für arbeitende Köche",
    headline: "Melde dich an, um dein Publikum zu wachsen ohne deinen Anspruch zu verlieren.",
    sub: "Module gefilmt von Köchen. Briefings von echten Marken. Auszahlungen, die deine Zeit respektieren.",
    bullet1: "8 Chef-Module pro Pfad",
    bullet2: "Praxis-Briefings mit echter Auszahlung",
    bullet3: "Verdiene Belohnungen beim Liefern",
    emailLabel: "Geschäftliche E-Mail",
    emailPlaceholder: "du@deinrestaurant.com",
    passwordLabel: "Passwort",
    passwordPlaceholder: "•••••••••",
    forgot: "Passwort vergessen?",
    cta: "Anmelden",
    noAccount: "Noch nicht eingeladen?",
    request: "Zugang anfordern",
    legalLine: "Mit der Anmeldung akzeptierst du unsere",
    terms: "AGB",
    and: "und",
    privacy: "Datenschutzerklärung",
    quoteAttribution: "— Lukas Berg, Küchenchef, Hamburg",
    quote: "Ich habe ein Briefing in der Mittagspause gefilmt und am Freitag bezahlt bekommen. Das gab's in 18 Jahren Kochen noch nie.",
    welcomeBack: "Willkommen zurück",
    signInToContinue: "Melde dich an, um weiterzumachen.",
    forgotTitle: "Passwort vergessen?",
    forgotSub: "Gib die E-Mail zu deinem ChefVerse-Konto ein. Wir schicken dir einen Link für ein neues.",
    forgotCta: "Reset-Link senden",
    forgotBackToSignIn: "Zurück zur Anmeldung",
    forgotSentTitle: "Check dein Postfach",
    forgotSentSub: "Wenn ein Konto für {email} existiert, ist gerade ein Reset-Link rausgegangen. Schau auch im Spam.",
    forgotSentResend: "Nichts bekommen? Erneut senden",
    resetTitle: "Neues Passwort setzen",
    resetSub: "Wähl was, das du dir merkst. Mindestens 8 Zeichen, gemischt.",
    resetNewLabel: "Neues Passwort",
    resetConfirmLabel: "Neues Passwort bestätigen",
    resetCta: "Passwort aktualisieren",
    resetMismatch: "Passwörter stimmen noch nicht überein.",
    resetTooShort: "Mindestens 8 Zeichen.",
    resetDoneTitle: "Passwort aktualisiert",
    resetDoneSub: "Alles gut. Melde dich mit dem neuen Passwort an und koch weiter.",
    resetGoToSignIn: "Zur Anmeldung",
  },
  id: {
    eyebrow: "Dibangun untuk koki bekerja",
    headline: "Masuk untuk membangun audiens tanpa kehilangan kualitasmu.",
    sub: "Modul difilmkan oleh koki. Brief dari merek nyata. Pembayaran yang menghormati waktumu.",
    bullet1: "8 modul yang dipimpin koki per jalur",
    bullet2: "Brief praktik dengan pembayaran nyata",
    bullet3: "Dapatkan reward saat kamu mengirim karya",
    emailLabel: "Email kerja",
    emailPlaceholder: "kamu@restoranmu.com",
    passwordLabel: "Kata sandi",
    passwordPlaceholder: "•••••••••",
    forgot: "Lupa kata sandi?",
    cta: "Masuk",
    noAccount: "Belum diundang?",
    request: "Minta akses",
    legalLine: "Dengan masuk, kamu menyetujui",
    terms: "Ketentuan",
    and: "dan",
    privacy: "Kebijakan Privasi",
    quoteAttribution: "— Putri Santoso, Sous chef, Jakarta",
    quote: "Saya ambil brief saat istirahat makan siang Rabu dan dibayar hari Jumat. Belum pernah terjadi dalam 18 tahun memasak.",
    welcomeBack: "Selamat datang kembali",
    signInToContinue: "Masuk untuk melanjutkan pekerjaanmu.",
    forgotTitle: "Lupa kata sandi?",
    forgotSub: "Masukkan email yang terhubung dengan akun ChefVerse-mu. Kami kirim link untuk set yang baru.",
    forgotCta: "Kirim link reset",
    forgotBackToSignIn: "Kembali ke login",
    forgotSentTitle: "Cek kotak masukmu",
    forgotSentSub: "Kalau ada akun untuk {email}, link reset baru saja terkirim. Cek folder spam juga.",
    forgotSentResend: "Belum dapat? Kirim ulang",
    resetTitle: "Set kata sandi baru",
    resetSub: "Pilih yang bisa kamu ingat. Minimal 8 karakter, campur.",
    resetNewLabel: "Kata sandi baru",
    resetConfirmLabel: "Konfirmasi kata sandi",
    resetCta: "Perbarui kata sandi",
    resetMismatch: "Kata sandi belum cocok.",
    resetTooShort: "Minimal 8 karakter.",
    resetDoneTitle: "Kata sandi diperbarui",
    resetDoneSub: "Mantap. Masuk pakai kata sandi baru dan lanjut masak.",
    resetGoToSignIn: "Ke halaman login",
  },
};

// ─── Top-left locale picker (dropdown, scales for many languages) ───
function LoginLocalePicker({ locale, onLocaleChange }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    const onEsc = (e) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onEsc);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      document.removeEventListener("keydown", onEsc);
    };
  }, [open]);
  // Pull from central I18N so labels match the dashboard locale chip everywhere
  const langs = ["en", "de", "id"].map(k => {
    const o = window.I18N[k];
    return { c: k, flag: o.flag, lab: o.locale.replace(/\s*\(.*\)$/, "") };
  });
  const cur = langs.find(l => l.c === locale) || langs[0];
  return (
    <div className="login-locale-picker" ref={ref}>
      <button className="login-locale-trigger" onClick={() => setOpen(!open)} type="button" aria-haspopup="listbox" aria-expanded={open}>
        <span className="login-locale-flag">{cur.flag}</span>
        <span className="login-locale-lab">{cur.lab}</span>
        <Icon name="chevron-down" size={14} style={{ color: "var(--smoke)" }} />
      </button>
      {open && (
        <div className="login-locale-menu" role="listbox">
          {langs.map(l => (
            <button key={l.c}
              className={"login-locale-item " + (locale === l.c ? "on" : "")}
              onClick={() => { onLocaleChange(l.c); setOpen(false); }}
              type="button" role="option" aria-selected={locale === l.c}>
              <span className="login-locale-flag">{l.flag}</span>
              <span className="login-locale-lab">{l.lab}</span>
              {locale === l.c && <Icon name="check" size={14} style={{ marginLeft: "auto", color: "var(--ufs-orange)" }} />}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── Shared image+glass hero (used across login/forgot/reset screens) ───
function LoginHero({ tl }) {
  return (
    <div className="login-hero" aria-hidden="true">
      <div className="login-hero-img" />
      <div className="login-hero-overlay" />
      <div className="login-hero-content">
        <div className="login-glass">
          <div className="login-glass-eyebrow">{tl.eyebrow}</div>
          <h2 className="login-glass-headline">{tl.headline}</h2>
          <p className="login-glass-sub">{tl.sub}</p>
          <ul className="login-glass-bullets">
            <li><span className="login-glass-dot"><Icon name="check" size={11} /></span>{tl.bullet1}</li>
            <li><span className="login-glass-dot"><Icon name="check" size={11} /></span>{tl.bullet2}</li>
            <li><span className="login-glass-dot"><Icon name="check" size={11} /></span>{tl.bullet3}</li>
          </ul>
          <div className="login-glass-quote">
            <div className="login-glass-quote-mark">"</div>
            <p className="login-glass-quote-body display-italic">{tl.quote}</p>
            <div className="login-glass-quote-attr">{tl.quoteAttribution}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Form top: brand + locale picker (locale on top-left) ───
function LoginFormTop({ locale, onLocaleChange }) {
  return (
    <div className="login-form-top">
      <div className="login-form-brand">
        <img src="assets/UFS_Primary_logo.png" alt="UFS" />
        <span className="login-form-brand-name">ChefVerse</span>
      </div>
    </div>
  );
}

// ─── MAIN LoginPage — routes between login/forgot/reset views ───
function LoginPage({ locale, onLocaleChange, onSignIn, onOpenLegal, loginScreen, setLoginScreen }) {
  const tl = LOGIN_I18N[locale] || LOGIN_I18N.en;
  
  // Per-screen state
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [forgotEmail, setForgotEmail] = React.useState("");
  const [newPw, setNewPw] = React.useState("");
  const [confirmPw, setConfirmPw] = React.useState("");
  const [pwError, setPwError] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  
  const screen = loginScreen || "login";
  const goScreen = setLoginScreen || (() => {});
  
  const handleSignIn = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    setLoading(true);
    setTimeout(() => { setLoading(false); onSignIn(); }, 600);
  };
  
  const handleForgot = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    setLoading(true);
    setTimeout(() => { setLoading(false); goScreen("forgot-sent"); }, 600);
  };
  
  const handleReset = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    setPwError("");
    if (newPw.length < 8) { setPwError(tl.resetTooShort); return; }
    if (newPw !== confirmPw) { setPwError(tl.resetMismatch); return; }
    setLoading(true);
    setTimeout(() => { setLoading(false); goScreen("reset-done"); }, 600);
  };
  
  // Common shell wrapper used by all login-flow screens.
  // showLegalFooter: only show "By signing in you agree…" on the actual sign-in screen.
  const ScreenShell = ({ children, showLegalFooter }) => (
    <div className="login-shell">
      {/* Top-right floating locale picker — scales for many languages */}
      <div className="login-locale-top">
        <LoginLocalePicker locale={locale} onLocaleChange={onLocaleChange} />
      </div>
      <div className="login-form-wrap">
        <div className="login-form-inner">
          <LoginFormTop locale={locale} onLocaleChange={onLocaleChange} />
          {children}
          {showLegalFooter && (
            <div className="login-form-foot">
              <div className="login-legal">
                {tl.legalLine}{" "}
                <button className="link-btn login-legal-btn" type="button" onClick={() => onOpenLegal("terms")}>{tl.terms}</button>
                {" "}{tl.and}{" "}
                <button className="link-btn login-legal-btn" type="button" onClick={() => onOpenLegal("privacy")}>{tl.privacy}</button>.
              </div>
            </div>
          )}
        </div>
      </div>
      <LoginHero tl={tl} />
    </div>
  );
  
  // ─── Screen 1: Sign in ───
  if (screen === "login") {
    return (
      <ScreenShell showLegalFooter={true}>
        <div className="login-form-greeting">
          <div className="login-form-eyebrow">{tl.eyebrow}</div>
          <h1 className="login-form-h">{tl.welcomeBack}</h1>
          <p className="login-form-sub">{tl.signInToContinue}</p>
        </div>
        <div className="login-form" onKeyDown={(e) => { if (e.key === "Enter") handleSignIn(e); }}>
          <div className="login-field">
            <label className="login-label">{tl.emailLabel}</label>
            <input type="email" className="login-input" placeholder={tl.emailPlaceholder}
              value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" />
          </div>
          <div className="login-field">
            <div className="login-label-row">
              <label className="login-label">{tl.passwordLabel}</label>
              <button className="login-forgot link-btn" type="button" onClick={() => goScreen("forgot")}>{tl.forgot}</button>
            </div>
            <input type="password" className="login-input" placeholder={tl.passwordPlaceholder}
              value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" />
          </div>
          <button className="btn btn-primary btn-lg login-cta" onClick={handleSignIn} disabled={loading}>
            {loading ? "…" : <>{tl.cta} <Icon name="arrow-right" size={14} /></>}
          </button>
        </div>
      </ScreenShell>
    );
  }
  
  // ─── Screen 2: Forgot password (entry) ───
  if (screen === "forgot") {
    return (
      <ScreenShell>
        <div className="login-form-greeting">
          <button className="login-back-btn" type="button" onClick={() => goScreen("login")}>
            <Icon name="chevron-left" size={14} /> {tl.forgotBackToSignIn}
          </button>
          <h1 className="login-form-h">{tl.forgotTitle}</h1>
          <p className="login-form-sub">{tl.forgotSub}</p>
        </div>
        <div className="login-form" onKeyDown={(e) => { if (e.key === "Enter") handleForgot(e); }}>
          <div className="login-field">
            <label className="login-label">{tl.emailLabel}</label>
            <input type="email" className="login-input" placeholder={tl.emailPlaceholder}
              value={forgotEmail} onChange={(e) => setForgotEmail(e.target.value)} autoComplete="email" autoFocus />
          </div>
          <button className="btn btn-primary btn-lg login-cta" onClick={handleForgot} disabled={loading}>
            {loading ? "…" : <>{tl.forgotCta} <Icon name="arrow-right" size={14} /></>}
          </button>
        </div>
      </ScreenShell>
    );
  }
  
  // ─── Screen 3: Forgot password — sent confirmation ───
  if (screen === "forgot-sent") {
    return (
      <ScreenShell>
        <div className="login-form-greeting">
          <button className="login-back-btn" type="button" onClick={() => goScreen("login")}>
            <Icon name="chevron-left" size={14} /> {tl.forgotBackToSignIn}
          </button>
          <h1 className="login-form-h">{tl.forgotSentTitle}</h1>
          <p className="login-form-sub">{tl.forgotSentSub.replace("{email}", forgotEmail || "your account")}</p>
        </div>
        <div className="login-form">
          <button className="link-btn login-resend" type="button" onClick={handleForgot}>
            {tl.forgotSentResend}
          </button>
        </div>
      </ScreenShell>
    );
  }
  
  // ─── Screen 4: Reset password ───
  if (screen === "reset") {
    return (
      <ScreenShell>
        <div className="login-form-greeting">
          <h1 className="login-form-h">{tl.resetTitle}</h1>
          <p className="login-form-sub">{tl.resetSub}</p>
        </div>
        <div className="login-form" onKeyDown={(e) => { if (e.key === "Enter") handleReset(e); }}>
          <div className="login-field">
            <label className="login-label">{tl.resetNewLabel}</label>
            <input type="password" className="login-input" placeholder="••••••••" autoFocus
              value={newPw} onChange={(e) => setNewPw(e.target.value)} autoComplete="new-password" />
          </div>
          <div className="login-field">
            <label className="login-label">{tl.resetConfirmLabel}</label>
            <input type="password" className="login-input" placeholder="••••••••"
              value={confirmPw} onChange={(e) => setConfirmPw(e.target.value)} autoComplete="new-password" />
          </div>
          {pwError && <div className="login-error">{pwError}</div>}
          <button className="btn btn-primary btn-lg login-cta" onClick={handleReset} disabled={loading}>
            {loading ? "…" : <>{tl.resetCta} <Icon name="arrow-right" size={14} /></>}
          </button>
        </div>
      </ScreenShell>
    );
  }
  
  // ─── Screen 5: Reset done ───
  if (screen === "reset-done") {
    return (
      <ScreenShell>
        <div className="login-form-greeting">
          <div className="login-success-icon green">
            <Icon name="check" size={28} />
          </div>
          <h1 className="login-form-h">{tl.resetDoneTitle}</h1>
          <p className="login-form-sub">{tl.resetDoneSub}</p>
        </div>
        <div className="login-form">
          <button className="btn btn-primary btn-lg login-cta" type="button" onClick={() => goScreen("login")}>
            {tl.resetGoToSignIn} <Icon name="arrow-right" size={14} />
          </button>
        </div>
      </ScreenShell>
    );
  }
  
  return null;
}

window.LoginPage = LoginPage;
window.LOGIN_I18N = LOGIN_I18N;