// ============ 首页：访问码输入 ============
const { useState, useEffect } = React;
const { useNavigate } = window.RR;
const { toast } = window;

function LandingPage({ onVerified }) {
  const navigate = useNavigate();
  const [code, setCode] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!code.trim()) {
      setError('请输入访问码');
      return;
    }
    setLoading(true);
    setError('');
    try {
      const result = await API.verifyAccessCode(code.trim());
      if (result.valid && result.member && result.subscriptions) {
        sessionStorage.setItem('access_verified', 'true');
        sessionStorage.setItem('member_info', JSON.stringify(result.member));
        sessionStorage.setItem('member_subscriptions', JSON.stringify(result.subscriptions));
        if (result.downloads)
          sessionStorage.setItem('member_downloads', JSON.stringify(result.downloads));
        if (result.tutorials)
          sessionStorage.setItem('member_tutorials', JSON.stringify(result.tutorials));
        toast.success('验证成功，欢迎回来');
        onVerified(result.member, result.subscriptions, result.downloads, result.tutorials);
      } else {
        setError(result.message || '访问码无效或已过期');
      }
    } catch (err) {
      setError(err.data?.message || err.message || '验证失败，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="landing-page">
      <div className="landing-card">
        <div className="landing-logo">
          <i className="fa-solid fa-wand-magic-sparkles"></i>
        </div>
        <h1 className="landing-title">歪魔法</h1>
        <p className="landing-subtitle">请输入访问码</p>

        <form className="landing-form" onSubmit={handleSubmit}>
          <div className={`landing-input-wrap ${error ? 'has-error' : ''}`}>
            <i className="fa-solid fa-key landing-input-icon"></i>
            <input
              type="text"
              className="landing-input"
              placeholder="访问码"
              value={code}
              onChange={(e) => {
                setCode(e.target.value);
                if (error) setError('');
              }}
              autoFocus
              disabled={loading}
              autoComplete="off"
            />
          </div>

          {error && (
            <div className="landing-error">
              <i className="fa-solid fa-circle-exclamation"></i>
              {error}
            </div>
          )}

          <button type="submit" className="landing-btn" disabled={loading}>
            {loading ? (
              <i className="fa-solid fa-spinner fa-spin"></i>
            ) : (
              <>
                <span>进入</span>
                <i className="fa-solid fa-arrow-right"></i>
              </>
            )}
          </button>
        </form>
      </div>

      <div className="landing-footer">
        <span className="landing-footer-dot"></span>
        服务正常
      </div>
    </div>
  );
}

window.LandingPage = LandingPage;