// Login page - TI_StockConnect
// Database: PostgreSQL RONDA_WEB
const { useState: useStateL, useEffect: useEffectL, useRef: useRefL } = React;

const API_BASE = window.APP_CONFIG?.API_URL || "/api";

// Language selector for login page (same style as header)
function LoginLanguageSelector() {
  const [open, setOpen] = useStateL(false);
  const [currentLang, setCurrentLang] = useStateL(getLanguage());
  const ref = useRefL(null);

  useEffectL(() => {
    const handleLangChange = (e) => setCurrentLang(e.detail);
    window.addEventListener('languageChange', handleLangChange);
    return () => window.removeEventListener('languageChange', handleLangChange);
  }, []);

  useEffectL(() => {
    const handleClickOutside = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const handleSelect = (lang) => {
    setLanguage(lang);
    setOpen(false);
  };

  const languages = getAvailableLanguages();
  const current = languages[currentLang];

  // Globe icon inline
  const globeIcon = (
    <svg viewBox="0 0 24 24" style={{width: 16, height: 16, stroke: "currentColor", strokeWidth: 1.5, fill: "none"}}>
      <circle cx="12" cy="12" r="10"/>
      <path d="M2 12h20"/>
      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
    </svg>
  );

  return (
    <div className="login-lang-selector" ref={ref}>
      <button className="lang-btn" onClick={() => setOpen(!open)} type="button" title="Lingua / Sprache / Langue / Lingua">
        <span className="lang-icon">{globeIcon}</span>
        <span className="lang-code">{current.flag}</span>
      </button>
      {open && (
        <div className="lang-dropdown">
          {Object.values(languages).map(lang => (
            <button
              key={lang.code}
              type="button"
              className={"lang-option" + (lang.code === currentLang ? " active" : "")}
              onClick={() => handleSelect(lang.code)}
            >
              <span className="lang-option-flag">{lang.flag}</span>
              <span className="lang-option-name">{lang.name}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function LoginPage({ onLogin }) {
  const [user, setUser] = useStateL("");
  const [pwd, setPwd] = useStateL("");
  const [error, setError] = useStateL("");
  const [loading, setLoading] = useStateL(false);
  const [config, setConfig] = useStateL({});
  const [, forceUpdate] = useStateL(0);

  // Stato per impostazione password
  const [setupMode, setSetupMode] = useStateL(false);
  const [setupToken, setSetupToken] = useStateL("");
  const [newPwd, setNewPwd] = useStateL("");
  const [confirmPwd, setConfirmPwd] = useStateL("");
  const [setupSuccess, setSetupSuccess] = useStateL(false);

  useEffectL(() => {
    fetch(`${API_BASE}/config`)
      .then(r => r.json())
      .then(data => {
        if (data.success) setConfig(data.config);
      });
  }, []);

  useEffectL(() => {
    const handleLangChange = () => forceUpdate(n => n + 1);
    window.addEventListener('languageChange', handleLangChange);
    return () => window.removeEventListener('languageChange', handleLangChange);
  }, []);

  const submit = async (e) => {
    e.preventDefault();
    setError("");
    setLoading(true);

    try {
      const res = await fetch(`${API_BASE}/auth/login`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username: user, password: pwd })
      });

      const data = await res.json();

      if (data.success) {
        // Se password pending, mostra form per impostarla
        if (data.passwordPending) {
          setSetupToken(data.setupToken);
          setSetupMode(true);
          setLoading(false);
          return;
        }

        localStorage.setItem("token", data.token);
        localStorage.setItem("user", JSON.stringify(data.user));
        onLogin(data.user);
      } else {
        setError(data.error || t('invalid_credentials'));
      }
    } catch (err) {
      setError(t('error_connection'));
    } finally {
      setLoading(false);
    }
  };

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

    if (newPwd.length < 6) {
      setError("La password deve avere almeno 6 caratteri");
      return;
    }

    if (newPwd !== confirmPwd) {
      setError("Le password non coincidono");
      return;
    }

    setLoading(true);

    try {
      const res = await fetch(`${API_BASE}/auth/set-password`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ setupToken, password: newPwd })
      });

      const data = await res.json();

      if (data.success) {
        setSetupSuccess(true);
        setSetupMode(false);
        setNewPwd("");
        setConfirmPwd("");
        setPwd("");
      } else {
        setError(data.error || "Errore impostazione password");
      }
    } catch (err) {
      setError(t('error_connection'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-page">
      <div className="grid-bg"></div>
      <svg className="login-lines" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="ln" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0" stopColor="rgba(255,255,255,0)"/>
            <stop offset="0.5" stopColor="rgba(255,255,255,0.5)"/>
            <stop offset="1" stopColor="rgba(255,255,255,0)"/>
          </linearGradient>
        </defs>
        {Array.from({length: 14}).map((_, i) => (
          <path key={i} d={`M 0 ${100 + i * 70} Q 960 ${50 + i * 80} 1920 ${120 + i * 60}`}
            stroke="url(#ln)" fill="none" strokeWidth="1" opacity={0.3 + (i%3)*0.15}/>
        ))}
        {Array.from({length: 30}).map((_, i) => (
          <circle key={i} cx={Math.random()*1920} cy={Math.random()*1080} r="2.5" fill="rgba(255,255,255,0.4)"/>
        ))}
      </svg>

      {setupMode ? (
        // Form impostazione password
        <form className="login-card" onSubmit={submitNewPassword}>
          <LoginLanguageSelector />

          <div className="login-tenant">
            <div className="mark">
              <div className="diamond"></div>
              <div className="name">{config.app_name || "TI_StockConnect"}</div>
            </div>
          </div>
          <div className="login-title">Imposta la tua password</div>
          <div style={{fontSize: 13, color: "var(--text-3)", marginBottom: 16}}>
            Benvenuto <strong>{user}</strong>! Crea una password sicura per il tuo account.
          </div>

          <div style={{display: "flex", flexDirection: "column", gap: 14}}>
            <div className="field">
              <label>Nuova password</label>
              <input
                type="password"
                value={newPwd}
                onChange={(e) => setNewPwd(e.target.value)}
                placeholder="Minimo 6 caratteri"
                autoFocus
                disabled={loading}
              />
            </div>
            <div className="field">
              <label>Conferma password</label>
              <input
                type="password"
                value={confirmPwd}
                onChange={(e) => setConfirmPwd(e.target.value)}
                placeholder="Ripeti la password"
                disabled={loading}
              />
            </div>

            {error && (
              <div style={{
                padding: "10px 12px",
                background: "rgba(220, 53, 69, 0.1)",
                border: "1px solid rgba(220, 53, 69, 0.3)",
                borderRadius: 4,
                color: "#dc3545",
                fontSize: 13
              }}>
                {error}
              </div>
            )}

            <button
              type="submit"
              className="btn btn-primary btn-lg"
              style={{marginTop: 8}}
              disabled={loading || !newPwd || !confirmPwd}
            >
              {loading ? t('loading') : "Imposta password"}
            </button>

            <button
              type="button"
              className="btn btn-secondary"
              onClick={() => { setSetupMode(false); setError(""); }}
              disabled={loading}
            >
              Annulla
            </button>
          </div>
        </form>
      ) : (
        // Form login normale
        <form className="login-card" onSubmit={submit}>
          <LoginLanguageSelector />

          <div className="login-tenant">
            <div className="mark">
              <div className="diamond"></div>
              <div className="name">{config.app_name || "TI_StockConnect"}</div>
            </div>
            {getLanguage() === 'it' && (
              <div style={{fontSize: 11, color: "var(--text-3)", marginTop: 4, letterSpacing: "0.04em"}}>
                {config.app_description || t('saldi_title')}
              </div>
            )}
          </div>
          <div className="login-title">{t('login_title')}</div>

          <div style={{display: "flex", flexDirection: "column", gap: 14}}>
            {setupSuccess && (
              <div style={{
                padding: "10px 12px",
                background: "rgba(45, 138, 95, 0.1)",
                border: "1px solid rgba(45, 138, 95, 0.3)",
                borderRadius: 4,
                color: "#2D8A5F",
                fontSize: 13
              }}>
                Password impostata con successo! Ora puoi accedere.
              </div>
            )}

            <div className="field">
              <label>{t('username')}</label>
              <input
                type="text"
                value={user}
                onChange={(e) => setUser(e.target.value)}
                autoFocus
                disabled={loading}
              />
            </div>
            <div className="field">
              <label>{t('password')}</label>
              <input
                type="password"
                value={pwd}
                onChange={(e) => setPwd(e.target.value)}
                placeholder={t('password') + "..."}
                disabled={loading}
              />
            </div>

            {error && (
              <div style={{
                padding: "10px 12px",
                background: "rgba(220, 53, 69, 0.1)",
                border: "1px solid rgba(220, 53, 69, 0.3)",
                borderRadius: 4,
                color: "#dc3545",
                fontSize: 13
              }}>
                {error}
              </div>
            )}

            <button
              type="submit"
              className="btn btn-primary btn-lg"
              style={{marginTop: 8}}
              disabled={loading || !user}
            >
              {loading ? t('loading') : t('login_button')}
            </button>

            <div className="login-meta">
              <span>v 1.1.0</span>
            </div>

          </div>
        </form>
      )}

      <div className="login-footer-mark">
        <div className="ti-logo">team<span className="ti-i">informatica</span></div>
      </div>
    </div>
  );
}

window.LoginPage = LoginPage;