// صفحه Login
const LoginPage = ({ onLogin }) => {
  const [user, setUser] = useState('admin');
  const [pass, setPass] = useState('');
  const [showPass, setShowPass] = useState(false);
  const [err, setErr] = useState('');
  const [loading, setLoading] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setErr(''); setLoading(true);
    try {
      const r = await window.api('/auth/login', {
        method: 'POST',
        body: { username: user, password: pass },
      });
      if (r.success) {
        localStorage.setItem(window.TOKEN_KEY, r.data.token);
        onLogin(r.data.admin);
      } else {
        setErr('نام کاربری یا رمز اشتباه است');
      }
    } catch {
      setErr('خطا در اتصال به سرور');
    }
    setLoading(false);
  };

  return (
    <div style={{
      minHeight: '100vh', display: 'grid', placeItems: 'center',
      background: 'var(--bg-1)',
    }}>
      <div style={{
        width: 360, padding: 36, background: 'var(--bg-2)',
        borderRadius: 16, border: '1px solid var(--border-soft)',
        boxShadow: '0 24px 64px rgba(0,0,0,0.4)',
      }}>
        {/* لوگو */}
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <div style={{
            width: 52, height: 52, borderRadius: 14, background: 'var(--primary)',
            display: 'inline-grid', placeItems: 'center', marginBottom: 12,
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
              <path d="M3 7 L12 3 L21 7 L21 17 L12 21 L3 17 Z" stroke="white" strokeWidth="1.8" strokeLinejoin="round" />
              <circle cx="12" cy="12" r="3" fill="white" />
            </svg>
          </div>
          <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-1)' }}>SalesBot</div>
          <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 4 }}>پنل مدیریت هوشمند</div>
        </div>

        <form onSubmit={submit}>
          <div style={{ marginBottom: 16 }}>
            <label className="label">نام کاربری</label>
            <input
              className="input" value={user}
              onChange={e => setUser(e.target.value)}
              placeholder="admin" autoFocus
            />
          </div>

          <div style={{ marginBottom: 24 }}>
            <label className="label">رمز عبور</label>
            <div style={{ position: 'relative' }}>
              <input
                className="input"
                type={showPass ? 'text' : 'password'}
                value={pass}
                onChange={e => setPass(e.target.value)}
                placeholder="••••••••"
                style={{ paddingLeft: 40 }}
              />
              <button
                type="button"
                onClick={() => setShowPass(p => !p)}
                style={{
                  position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)',
                  background: 'none', border: 'none', cursor: 'pointer',
                  color: 'var(--text-3)', display: 'flex', alignItems: 'center', padding: 4,
                }}
                title={showPass ? 'پنهان کردن' : 'نمایش رمز'}
              >
                {showPass ? (
                  // eye-off
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
                    <line x1="1" y1="1" x2="23" y2="23"/>
                  </svg>
                ) : (
                  // eye
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                    <circle cx="12" cy="12" r="3"/>
                  </svg>
                )}
              </button>
            </div>
          </div>

          {err && (
            <div style={{
              padding: '10px 14px', borderRadius: 8, marginBottom: 16,
              background: 'rgba(248,113,113,0.12)', color: '#F87171',
              fontSize: 13, textAlign: 'center',
            }}>{err}</div>
          )}

          <button
            type="submit"
            className="btn btn-primary"
            style={{ width: '100%', justifyContent: 'center' }}
            disabled={loading}
          >
            {loading ? <span className="spinner" /> : 'ورود به پنل'}
          </button>

          <div style={{ marginTop: 16, textAlign: 'center', fontSize: 12, color: 'var(--text-3)' }}>
            یوزر: <span style={{ color: 'var(--text-2)', fontFamily: 'monospace' }}>admin</span>
            &nbsp;/&nbsp;
            پسورد: <span style={{ color: 'var(--text-2)', fontFamily: 'monospace' }}>admin123</span>
          </div>
        </form>
      </div>
    </div>
  );
};
window.LoginPage = LoginPage;