// 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);

  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) {
        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);
    }
  };

  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>

      <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}}>
          <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 || !pwd}
          >
            {loading ? t('loading') : t('login_button')}
          </button>

          <div className="login-meta">
            <span>v 1.0.3</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;