// Login + Welcome screens
const { Button: BtnA, Info: InfoA, Ic: IcA } = window.UI;

function LoginScreen({ t, lang, setLang, onLogin }) {
  const [email, setEmail] = React.useState("");
  const [pwd, setPwd] = React.useState("");
  const [show, setShow] = React.useState(false);
  const [remember, setRemember] = React.useState(true);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState("");

  const turnstileRef = React.useRef(null);
  const turnstileWid = React.useRef(null);
  const turnstileTokenRef = React.useRef('');
  const turnstilePendingRef = React.useRef(null);

  React.useEffect(() => {
    const siteKey = window.__BOLTON_TURNSTILE_SITE_KEY || '';
    if (!siteKey || siteKey === 'placeholder' || location.hostname === 'localhost' || location.hostname === '127.0.0.1') return;
    const renderWidget = () => {
      if (turnstileRef.current && window.turnstile && !turnstileWid.current) {
        turnstileWid.current = window.turnstile.render(turnstileRef.current, {
          sitekey: window.__BOLTON_TURNSTILE_SITE_KEY || '',
          size: 'invisible',
          callback: (token) => {
            turnstileTokenRef.current = token;
            if (turnstilePendingRef.current) {
              turnstilePendingRef.current(token);
              turnstilePendingRef.current = null;
            }
          },
          'expired-callback': () => { turnstileTokenRef.current = ''; },
        });
      }
    };
    if (window.turnstile) { renderWidget(); }
    else { document.addEventListener('turnstile:loaded', renderWidget, { once: true }); }
    return () => {
      if (turnstileWid.current && window.turnstile) {
        window.turnstile.remove(turnstileWid.current);
        turnstileWid.current = null;
      }
    };
  }, []);

  const waitForTurnstile = () => new Promise((resolve) => {
    turnstilePendingRef.current = resolve;
    window.turnstile.execute(turnstileWid.current);
    setTimeout(() => {
      if (turnstilePendingRef.current) {
        turnstilePendingRef.current(window.turnstile.getResponse(turnstileWid.current) || '');
        turnstilePendingRef.current = null;
      }
    }, 30000);
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");

    if (!email || !email.includes('@') || !email.includes('.') || pwd.length < 8) {
      setError(lang === 'it' ? 'Credenziali non valide' : 'Invalid credentials');
      return;
    }

    setLoading(true);
    try {
      const siteKey = window.__BOLTON_TURNSTILE_SITE_KEY || '';
      let token = '';
      if (siteKey && siteKey !== 'placeholder' && location.hostname !== 'localhost' && location.hostname !== '127.0.0.1' && window.turnstile) {
        token = window.turnstile.getResponse(turnstileWid.current);
        if (!token) {
          token = await waitForTurnstile();
          if (!token) {
            setError(lang === 'it' ? 'Verifica di sicurezza fallita. Riprova.' : 'Security check failed. Please try again.');
            setLoading(false);
            return;
          }
        }
      }

      const res = await window.API_CLIENT.apiPost("/auth/login", { email, password: pwd, turnstile: token });
      if (res && res.token) {
        localStorage.setItem("bt_token", res.token);
        onLogin();
      }
    } catch (err) {
      setError(err.message || (lang === 'it' ? 'Errore di accesso' : 'Sign in error'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-shell-min">
      <div className="login-top">
        <div className="brand">
          <img src="Logo%20Bolton.svg" alt="Bolton" style={{ height: 28, width: 28, display: "block" }} />
          <div style={{ lineHeight: 1.1 }}>
            Bolton <span className="serif-it" style={{ color: "var(--ink-soft)" }}>transfer</span>
          </div>
        </div>
        <LangToggle lang={lang} setLang={setLang} />
      </div>

      <div className="login-form-wrap-min">
        <form className="login-form" onSubmit={handleSubmit}>
          <div>
            <h2>{t.login.title}</h2>
          </div>

          <div className="field">
            <label className="label" htmlFor="email">{t.login.email}</label>
            <input id="email" className="input" type="email" placeholder={t.login.email_ph}
              value={email} onChange={(e) => setEmail(e.target.value)} autoFocus />
          </div>

          <div className="field">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <label className="label" htmlFor="pwd">{t.login.pwd}</label>
              <a className="hint" style={{ color: "var(--accent)", fontWeight: 500, cursor: "pointer" }}>{t.login.forgot}</a>
            </div>
            <div style={{ position: "relative" }}>
              <input id="pwd" className="input" type={show ? "text" : "password"} placeholder={t.login.pwd_ph} autoComplete="current-password"
                value={pwd} onChange={(e) => setPwd(e.target.value)} style={{ paddingRight: 44 }} />
              <button type="button" className="iconbtn" onClick={() => setShow(!show)}
                style={{ position: "absolute", right: 4, top: 4 }} aria-label="toggle password">
                {show ? <IcA.eyeOff /> : <IcA.eye />}
              </button>
            </div>
          </div>

          <label className="checkbox-row">
            <input type="checkbox" checked={remember} onChange={(e) => setRemember(e.target.checked)} />
            {t.login.remember}
          </label>

          {error && (
            <div style={{ color: "#B23A3A", fontSize: 13, padding: "8px 12px", background: "rgba(178,58,58,0.08)", borderRadius: 8, border: "1px solid rgba(178,58,58,0.2)" }}>
              {error}
            </div>
          )}

          <div ref={turnstileRef}></div>

          <BtnA variant="primary" size="lg" block type="submit" disabled={loading}>
            {loading ? (lang === "it" ? "Accesso in corso…" : "Signing in…") : t.login.cta}
          </BtnA>

          <div className="hint" style={{ textAlign: "center", marginTop: 4 }}>
            {t.login.foot}
          </div>
        </form>
      </div>
    </div>
  );
}

function LangToggle({ lang, setLang }) {
  return (
    <div className="lang-toggle" role="tablist" aria-label="language">
      <button data-active={lang === "it"} onClick={() => setLang("it")}>IT</button>
      <button data-active={lang === "en"} onClick={() => setLang("en")}>EN</button>
    </div>
  );
}

function WelcomeScreen({ t, lang, setLang, onContinue, onTour }) {
  return (
    <div className="welcome">
      <h1>{t.welcome.title_a} <em>{t.welcome.title_b}</em>.</h1>
      <p className="lead">{t.welcome.lead}</p>

      <div className="steps">
        {t.welcome.steps.map((s, i) => (
          <div className="step" key={i}>
            <div className="n">{s.n}.</div>
            <h3>{s.t}</h3>
            <p>{s.d}</p>
          </div>
        ))}
      </div>

      <div style={{ display: "flex", gap: 10, marginTop: 36, alignItems: "center" }}>
        <BtnA variant="primary" size="lg" onClick={onContinue} iconRight={<IcA.arrow />}>
          {t.welcome.cta_primary}
        </BtnA>
        <BtnA size="lg" variant="ghost" onClick={onTour}>{t.welcome.cta_secondary}</BtnA>
      </div>

      <div className="hint" style={{ marginTop: 18, display: "inline-flex", alignItems: "center", gap: 6 }}>
        <IcA.info /> {t.welcome.help_hint}
      </div>

      <div style={{ marginTop: 48, display: "flex", alignItems: "center", gap: 14 }}>
        <span style={{ fontSize: 13, color: "var(--ink-soft)" }}>
          {lang === "it" ? "Lingua / Language" : "Language / Lingua"}
        </span>
        <div style={{
          display: "inline-flex", border: "1px solid var(--border)",
          borderRadius: 999, padding: 3, background: "var(--surface)", gap: 2,
        }}>
          {[{ code: "it", label: "🇮🇹  Italiano" }, { code: "en", label: "🇬🇧  English" }].map(({ code, label }) => (
            <button key={code} onClick={() => setLang(code)}
              style={{
                border: 0, borderRadius: 999,
                padding: "7px 20px",
                fontSize: 13.5, fontWeight: lang === code ? 600 : 400,
                cursor: "pointer",
                background: lang === code ? "var(--accent)" : "transparent",
                color: lang === code ? "#fff" : "var(--ink-soft)",
                transition: "background 0.15s, color 0.15s",
              }}>
              {label}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;
window.WelcomeScreen = WelcomeScreen;
window.LangToggle = LangToggle;