import { useState } from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';
import Link from 'next/link';
import { toast } from 'react-hot-toast';
import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
import { auth } from '@/lib/supabase';

interface LoginForm {
  email: string;
  password: string;
}

export default function Login() {
  const router = useRouter();
  const [form, setForm] = useState<LoginForm>({
    email: '',
    password: '',
  });
  const [loading, setLoading] = useState(false);
  const [showPassword, setShowPassword] = useState(false);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setForm(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!form.email || !form.password) {
      toast.error('请填写所有必填字段');
      return;
    }

    setLoading(true);

    try {
      // 检查是否为演示模式
      const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
      const isDemoMode = !supabaseUrl || supabaseUrl === 'https://demo.supabase.co' || supabaseUrl === '';
      
      if (isDemoMode) {
        // 演示模式：检查测试账号
        if (form.email === 'admin@demo.com' && form.password === 'admin123') {
          toast.success('登录成功！');
          // 在演示模式下直接跳转到仪表盘
          router.push('/dashboard');
        } else {
          toast.error('演示模式：请使用测试账号 admin@demo.com / admin123');
        }
      } else {
        // 真实模式：使用 Supabase 认证
        try {
          await auth.signIn(form.email, form.password);
          toast.success('登录成功！');
          router.push('/dashboard');
        } catch (authError: any) {
          console.error('Supabase auth error:', authError);
          toast.error(authError.message || '登录失败，请检查邮箱和密码');
        }
      }
    } catch (error: any) {
      console.error('Login error:', error);
      toast.error('登录过程中发生错误，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  // 填入测试账号
  const fillTestAccount = () => {
    setForm({
      email: 'admin@demo.com',
      password: 'admin123'
    });
  };

  return (
    <>
      <Head>
        <title>管理员登录 - 口译服务管理后台</title>
      </Head>

      <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-md w-full space-y-8">
          <div>
            <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
              管理员登录
            </h2>
            <p className="mt-2 text-center text-sm text-gray-600">
              口译服务后台管理系统
            </p>
          </div>

          {/* 测试账号提示 */}
          <div className="bg-blue-50 border border-blue-200 rounded-md p-4">
            <div className="flex">
              <div className="ml-3">
                <h3 className="text-sm font-medium text-blue-800">
                  测试账号
                </h3>
                <div className="mt-2 text-sm text-blue-700">
                  <p>邮箱：admin@demo.com</p>
                  <p>密码：admin123</p>
                  <button
                    type="button"
                    onClick={fillTestAccount}
                    className="mt-2 text-xs text-blue-600 hover:text-blue-500 underline"
                  >
                    点击自动填入
                  </button>
                </div>
              </div>
            </div>
          </div>

          <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
            <div className="rounded-md shadow-sm -space-y-px">
              <div>
                <label htmlFor="email" className="sr-only">
                  邮箱地址
                </label>
                <input
                  id="email"
                  name="email"
                  type="email"
                  autoComplete="email"
                  required
                  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                  placeholder="管理员邮箱"
                  value={form.email}
                  onChange={handleInputChange}
                />
              </div>
              <div className="relative">
                <label htmlFor="password" className="sr-only">
                  密码
                </label>
                <input
                  id="password"
                  name="password"
                  type={showPassword ? 'text' : 'password'}
                  autoComplete="current-password"
                  required
                  className="appearance-none rounded-none relative block w-full px-3 py-2 pr-10 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                  placeholder="管理员密码"
                  value={form.password}
                  onChange={handleInputChange}
                />
                <button
                  type="button"
                  className="absolute inset-y-0 right-0 pr-3 flex items-center"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  {showPassword ? (
                    <EyeSlashIcon className="h-5 w-5 text-gray-400" />
                  ) : (
                    <EyeIcon className="h-5 w-5 text-gray-400" />
                  )}
                </button>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <div className="text-sm">
                <Link
                  href="/"
                  className="font-medium text-blue-600 hover:text-blue-500"
                >
                  返回首页
                </Link>
              </div>
              <div className="text-sm">
                <a
                  href="#"
                  className="font-medium text-blue-600 hover:text-blue-500"
                >
                  忘记密码？
                </a>
              </div>
            </div>

            <div>
              <button
                type="submit"
                disabled={loading}
                className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {loading ? (
                  <div className="flex items-center">
                    <div className="loading-spinner-sm mr-2"></div>
                    登录中...
                  </div>
                ) : (
                  '登录'
                )}
              </button>
            </div>
          </form>
        </div>
      </div>
    </>
  );
} 