import React, { useState, useEffect } from 'react';
import { Compass, ArrowRight, X, Phone, Lock, Loader2 } from 'lucide-react';
import { Button } from '../components/ui/Button';
import { Input } from '../components/ui/Input';
import request from '../utils/request';
import clsx from 'clsx';

// PncyssD Prototype: Landing Page
export function LandingPage({ onStart }) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [loading, setLoading] = useState(false);
  
  // Login Form State
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const [countdown, setCountdown] = useState(0);

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) setIsLoggedIn(true);
  }, []);

  useEffect(() => {
    let timer;
    if (countdown > 0) {
      timer = setInterval(() => setCountdown(c => c - 1), 1000);
    }
    return () => clearInterval(timer);
  }, [countdown]);

  const handleGetCode = async () => {
    if (!phone) return alert('请输入手机号');
    if (!/^1[3-9]\d{9}$/.test(phone)) return alert('手机号格式不正确');
    
    try {
      // Backend: /auth/sms-code?phone=... (AuthController.java)
      // Note: "Business type" is not required by the current backend implementation.
      const res = await request.get('/auth/sms-code', { params: { phone } });
      
      if (res.code === 200) {
        setCountdown(60);
        // Display backend message or dev code
        const msg = res.data?.message || '验证码已发送';
        if (res.data?.code) {
           alert(`【测试模式】${msg}\n验证码: ${res.data.code}`);
        } else {
           alert(msg);
        }
      } else {
        console.warn('SMS Code Error:', res);
        alert(res.message || '发送失败，请稍后重试');
      }
    } catch (e) {
      console.error('Failed to get SMS code:', e);
      const errorMsg = e.response?.data?.message || '网络连接异常，请检查您的网络设置';
      alert(errorMsg);
    }
  };

  const handleLogin = async () => {
    if (!phone || !code) return alert('请填写完整信息');
    setLoading(true);
    try {
      const res = await request.post('/auth/login', { phone, smsCode: code });
      if (res.code === 200) {
        const { accessToken } = res.data;
        localStorage.setItem('token', accessToken);
        setIsLoggedIn(true);
        setShowLoginModal(false);
        // Clear sensitive data
        setPhone('');
        setCode('');
      } else {
        alert(res.message || '登录失败');
      }
    } catch (e) {
      console.error(e);
      alert('登录异常，请检查网络');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex flex-col items-center justify-center text-center p-6 relative overflow-hidden">
      {/* Background & Effects */}
      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-[100px] animate-pulse-slow"></div>
      
      <div className="relative z-10 space-y-8 max-w-lg mx-auto w-full">
        <div className="mb-4 inline-block p-4 rounded-full bg-white/5 border border-white/10 shadow-2xl animate-float">
          <Compass className="w-16 h-16 text-primary icon-spin-slow" strokeWidth={1.5} />
        </div>
        
        <h1 className="text-4xl md:text-6xl font-bold text-white tracking-tight landing-title">
          人生OS
          <span className="block text-xl md:text-2xl font-light mt-4 text-primary/80">Life Trajectory</span>
        </h1>
        
        {/* Buttons */}
        <div className="flex flex-col items-center justify-center gap-4 mt-12 w-full max-w-xs mx-auto">
          {isLoggedIn ? (
             <Button 
                variant="primary" 
                size="lg"
                onClick={onStart}
                className="w-full animate-in fade-in zoom-in duration-500"
              >
                开启旅程 <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform ml-2" />
              </Button>
          ) : (
             <Button 
                variant="primary"
                size="lg"
                onClick={() => setShowLoginModal(true)}
                className="w-full shadow-[0_0_20px_rgba(205,133,63,0.3)] hover:shadow-[0_0_30px_rgba(205,133,63,0.5)] transition-all"
              >
                登录账号
              </Button>
          )}
        </div>
      </div>

      {/* Login Modal */}
      {showLoginModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
          <div className="relative w-full max-w-md bg-[#0f172a] border border-white/10 rounded-2xl shadow-2xl p-8 overflow-hidden">
             {/* Modal Background */}
             <div className="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 pointer-events-none"></div>

             <button 
                onClick={() => setShowLoginModal(false)}
                className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
             >
                <X className="w-6 h-6" />
             </button>

             <h2 className="text-2xl font-bold text-white mb-6 flex items-center gap-2">
                <span className="w-1 h-6 bg-primary rounded-full"></span>
                欢迎回来
             </h2>

             <div className="space-y-4">
                <div className="space-y-1 text-left">
                    <label className="text-xs font-bold text-gray-400 uppercase tracking-wider ml-1">手机号</label>
                    <div className="relative">
                        <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
                        <Input 
                            placeholder="请输入手机号" 
                            className="pl-10" 
                            value={phone}
                            onChange={(e) => setPhone(e.target.value)}
                        />
                    </div>
                </div>

                <div className="space-y-1 text-left">
                    <label className="text-xs font-bold text-gray-400 uppercase tracking-wider ml-1">验证码</label>
                    <div className="flex gap-3">
                        <div className="relative flex-1">
                            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
                            <Input 
                                placeholder="请输入验证码" 
                                className="pl-10" 
                                value={code}
                                onChange={(e) => setCode(e.target.value)}
                            />
                        </div>
                        <Button 
                            variant="secondary" 
                            className="w-28 whitespace-nowrap"
                            onClick={handleGetCode}
                            disabled={countdown > 0}
                        >
                            {countdown > 0 ? `${countdown}s` : '获取验证码'}
                        </Button>
                    </div>
                </div>

                <Button 
                    variant="primary" 
                    className="w-full mt-6 py-3 text-lg" 
                    onClick={handleLogin}
                    disabled={loading}
                >
                    {loading ? <Loader2 className="w-5 h-5 animate-spin mx-auto" /> : '登 录'}
                </Button>
             </div>
          </div>
        </div>
      )}
    </div>
  );
}