/* ============================================================
   KODILA — Prijava v intranet
   ============================================================ */
function Login({ onLogin, theme, toggleTheme }) {
  const [email, setEmail] = useState('');
  const [pw, setPw] = useState('');
  const [show, setShow] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const submit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    const { ok, data } = await api('/api/auth/login', {
      method: 'POST',
      body: JSON.stringify({ email, password: pw }),
    });
    setLoading(false);
    if (ok) {
      onLogin(data.user, data.csrfToken);
    } else {
      setError('Napačen e-poštni naslov ali geslo.');
    }
  };

  return (
    <div className="login-wrap">
      <aside className="login-aside">
        <svg className="lg-texture" viewBox="0 0 400 600" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
          <defs>
            <pattern id="lgp" width="26" height="26" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
              <line x1="0" y1="0" x2="0" y2="26" stroke="#fff" strokeWidth="1" />
            </pattern>
          </defs>
          <rect width="400" height="600" fill="url(#lgp)" />
        </svg>

        <div className="lg-logo-card">
          <img src="/assets/img/kodila-logo-main-w.png" alt="Kodila" />
        </div>

        <div className="lg-mid">
          <h1>Poslovno-informacijski sistem za vašo dejavnost.</h1>
          <p>Eno mesto za proizvodnjo, prodajo, trgovine in restavracijo. Šifranti, dokumenti, BI pregledi in razvozne poti — povezano in pregledno.</p>
          <div className="lg-links">
            <a className="lg-link" href="https://www.kodila.si" target="_blank" rel="noopener noreferrer">
              <span dangerouslySetInnerHTML={{ __html: I('grid', 16) }} />
              <span>Spletna stran podjetja</span>
              <span className="lg-link-url">www.kodila.si</span>
            </a>
            <a className="lg-link" href="https://shop.kodila.si" target="_blank" rel="noopener noreferrer">
              <span dangerouslySetInnerHTML={{ __html: I('box', 16) }} />
              <span>Web shop podjetja</span>
              <span className="lg-link-url">shop.kodila.si</span>
            </a>
            <span className="lg-link disabled" title="Podatki za podporo še niso vnešeni">
              <span dangerouslySetInnerHTML={{ __html: I('bell', 16) }} />
              <span>Kontakt / podpora</span>
              <span className="badge" style={{ height: 18, fontSize: 11 }}>kmalu</span>
            </span>
          </div>
        </div>

        <div className="lg-foot">
          <span>© 2026 Kodila d.o.o.</span>
          <span>Markišavci 44, Murska Sobota</span>
        </div>
      </aside>

      <main className="login-main">
        <div style={{ position: 'absolute', top: 18, right: 22 }}>
          <button className="btn btn-icon btn-ghost" onClick={toggleTheme} title="Svetla / temna tema"
            dangerouslySetInnerHTML={{ __html: I(theme === 'dark' ? 'sun' : 'moon', 18) }} />
        </div>

        <div className="login-card">
          <h2>Prijava v intranet</h2>
          <p className="sub">Vnesite svoje poslovne poverilnice za dostop do aplikacij.</p>

          <form className="login-form" onSubmit={submit}>
            <div className="field">
              <label>E-pošta</label>
              <input className="input" type="text" value={email} onChange={e => setEmail(e.target.value)} autoComplete="username" required />
            </div>
            <div className="field">
              <label>Geslo</label>
              <div className="input-pw">
                <input className="input" type={show ? 'text' : 'password'} value={pw}
                  onChange={e => setPw(e.target.value)} autoComplete="current-password" required />
                <button type="button" className="btn btn-icon btn-sm btn-ghost toggle" onClick={() => setShow(s => !s)}
                  dangerouslySetInnerHTML={{ __html: I(show ? 'eyeoff' : 'eye', 16) }} />
              </div>
            </div>

            {error && <div className="badge dng" style={{ width: '100%', justifyContent: 'flex-start' }}>{error}</div>}

            <div className="login-row">
              <label className="check"><input type="checkbox" defaultChecked /> Zapomni si me</label>
              <a className="link" href="#" onClick={e => e.preventDefault()}>Pozabljeno geslo?</a>
            </div>

            <button className="btn btn-primary" type="submit" style={{ height: 42, justifyContent: 'center' }} disabled={loading}>
              {loading
                ? <span>Prijavljanje…</span>
                : <><span dangerouslySetInnerHTML={{ __html: I('logout', 17) }} style={{ transform: 'scaleX(-1)' }} /> Prijava</>}
            </button>
          </form>
        </div>
      </main>
    </div>
  );
}
Object.assign(window, { Login });