'use client';

import { useState, useCallback, useEffect } from 'react';
import './style/login.css';
import { useRouter, useSearchParams } from 'next/navigation';
import React from 'react';
import Link from 'next/link';
import { signInWithGoogle, loginUser } from '@/lib/auth';
import { GradientText } from '@/components/ui/gradient-text';
import { Eye, EyeOff } from 'lucide-react';

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [formError, setFormError] = useState('');
  const [successMessage, setSuccessMessage] = useState('');
  const router = useRouter();
  const searchParams = useSearchParams();

  // Check for registered=true parameter
  useEffect(() => {
    const registered = searchParams?.get('registered');
    if (registered === 'true') {
      setSuccessMessage('Registration successful! Please login with your new account.');
    }

    const error = searchParams?.get('error');
    if (error) {
      if (error === 'google_oauth') {
        setFormError('Google login failed, please try again.');
      } else if (error === 'auth_failed') {
        setFormError('Authentication failed, please try again.');
      }
    }
  }, [searchParams]);

  const handleGoogleSignIn = () => {
    signInWithGoogle();
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsSubmitting(true);
    setFormError('');
    setSuccessMessage('');

    try {
      await loginUser(email, password);
      // 登录成功后跳转到首页
      router.push('/');
    } catch (error: any) {
      console.error('Login failed:', error);

      // 根据错误类型显示不同的错误消息
      setFormError('Login failed, please check your credentials and try again.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="min-h-screen relative overflow-hidden">
      {/* 背景视频 */}
      <video
        autoPlay
        loop
        muted
        playsInline
        className="absolute inset-0 w-full h-full object-cover"
        data-alt="background-video"
      >
        <source src="/assets/login.mp4" type="video/mp4" />
        {/* 如果没有视频文件，显示渐变背景 */}
      </video>

      {/* 视频遮罩层 */}
      <div className="absolute inset-0 bg-black/20 " data-alt="video-overlay"></div>

      {/* Logo */}
      <div className="absolute top-8 left-8 z-10" data-alt="logo-container">
        <span className="logo-heart">
          <GradientText
            text="MovieFlow"
            startPercentage={30}
            endPercentage={70}
          />
        </span>
        {/* beta标签 */}
        <span className="inline-flex items-center px-1.5 py-0.5 text-[8px] font-semibold tracking-wider text-[rgb(212 202 202)] border border-[rgba(106,244,249,0.2)] rounded-full shadow-[0_0_10px_rgba(106,244,249,0.1)]">
          Beta
        </span>
      </div>

      {/* 登录框 - 居中显示 */}
      <div className="relative bottom-4 z-10 flex items-center justify-center min-h-screen p-4">
        <div className="auth-container max-w-md w-full bg-black/40 backdrop-blur-lg border border-white/20 rounded-2xl p-8 shadow-2xl">
          <div className="auth-header text-center mb-6">
            <h2 className="text-2xl font-bold text-white pb-4">Login</h2>
            <p className="text-gray-300">Enter your credentials to access your account</p>
          </div>

          <form onSubmit={handleSubmit}>
            {successMessage && (
              <div className="bg-green-500/20 text-green-300 p-3 mb-4 rounded-lg border border-green-500/20">
                {successMessage}
              </div>
            )}

            <div className="mb-4">
              <label className="form-label">Username</label>
              <input
                placeholder="Enter your username"
                required
                className="form-control"
                type="text"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>
            <div className="mb-4">
              <label className="form-label">Password</label>
              <div className="relative">
                <input
                  placeholder="Enter your password"
                  required
                  className="form-control pr-10"
                  type={showPassword ? "text" : "password"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
                <button
                  type="button"
                  data-alt="toggle-password-visibility"
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-300 focus:outline-none"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  {!showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
                </button>
              </div>
              <div className="flex justify-end mt-2">
                <a className="auth-link small" href="/forgot-password" data-discover="true">Forgot password?</a>
              </div>
            </div>

            {formError && (
              <div className="bg-red-500/20 text-red-300 p-3 mb-4 rounded-lg border border-red-500/20">
                {formError}
              </div>
            )}

            <button
              type="submit"
              className="w-full mt-4 btn btn-primary"
              disabled={isSubmitting}
            >
              {isSubmitting ? 'Logging in...' : 'Login'}
            </button>
{/*
            <div className="my-4 relative flex items-center">
              <div className="flex-grow border-t border-gray-500/30"></div>
              <span className="flex-shrink mx-4 text-gray-400">or</span>
              <div className="flex-grow border-t border-gray-500/30"></div>
            </div>

            <button
              type="button"
              onClick={handleGoogleSignIn}
              className="w-full flex items-center justify-center gap-2 py-3 border border-white/20 rounded-lg bg-black/30 hover:bg-black/50 backdrop-blur-sm transition-all"
            >
              <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" className="w-5 h-5" alt="Google" />
              <span>Continue with Google</span>
            </button> */}

            <div className="text-center mt-4">
              <p style={{ color: "rgba(255, 255, 255, 0.6)" }}>
                Don't have an account? <Link href="/signup" className="auth-link">Sign up</Link>
              </p>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}