"use client";

import { useState } from "react";
import { GraduationCap, ArrowRight, Loader2 } from "lucide-react";
import { useAuth } from "@/components/AuthProvider";
import { mockApi } from "@/lib/mockApi";
import Image from "next/image";

export default function LoginPage() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const { login } = useAuth();

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setLoading(true);

    try {
      const { token, user } = await mockApi.login(username, password);
      login(token, user);
    } catch (err: any) {
      setError(err.message || "登录失败，请检查账号密码");
    } finally {
      setLoading(false);
    }
  };

  const autofill = (user: string) => {
    setUsername(user);
    setPassword("passwd");
  };

  return (
    <div className="min-h-screen w-full flex items-center justify-center bg-background relative overflow-hidden selection:bg-primary selection:text-on-primary">
      {/* Dynamic Background Elements */}
      <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/20 rounded-full blur-[120px] mix-blend-multiply dark:mix-blend-lighten animate-blob"></div>
      <div className="absolute bottom-[-10%] right-[-5%] w-[35%] h-[35%] bg-chart-4/20 rounded-full blur-[100px] mix-blend-multiply dark:mix-blend-lighten animate-blob animation-delay-2000"></div>
      <div className="absolute top-[20%] right-[10%] w-[25%] h-[25%] bg-chart-1/20 rounded-full blur-[90px] mix-blend-multiply dark:mix-blend-lighten animate-blob animation-delay-4000"></div>

      <div className="relative z-10 w-full max-w-md mx-4">
        {/* Glassmorphic Card */}
        <div className="bg-surface/60 dark:bg-surface/80 backdrop-blur-xl border border-white/20 dark:border-white/10 p-8 md:p-10 rounded-3xl shadow-elevation-3">
          
          <div className="flex flex-col items-center justify-center text-center mb-10">
            <div className="w-16 h-16 bg-primary-container text-primary rounded-2xl flex items-center justify-center mb-4 shadow-inner ring-1 ring-white/50">
              <GraduationCap className="w-8 h-8" />
            </div>
            <h1 className="text-3xl font-display font-bold text-on-surface tracking-tight">
               欢迎登录
            </h1>
            <p className="text-secondary mt-2 text-sm">SEEC-Analysis 学生评价平台</p>
          </div>

          <form onSubmit={handleLogin} className="space-y-5">
            <div>
              <label className="block text-sm font-medium text-on-surface mb-1.5 ml-1">用户名</label>
              <input
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="w-full px-5 py-3.5 bg-surface-container-high/50 border border-outline-variant/50 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all placeholder:text-outline text-on-surface shadow-inner"
                placeholder="请输入学号/工号"
                required
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-on-surface mb-1.5 ml-1">密码</label>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full px-5 py-3.5 bg-surface-container-high/50 border border-outline-variant/50 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all placeholder:text-outline text-on-surface shadow-inner"
                placeholder="请输入密码"
                required
              />
            </div>

            {error && (
              <div className="text-metric-low text-sm font-medium bg-metric-low/10 px-4 py-3 rounded-xl flex items-center border border-metric-low/20">
                <span className="mr-2">⚠️</span> {error}
              </div>
            )}

            <button
              type="submit"
              disabled={loading}
              className="w-full mt-2 py-4 px-4 bg-primary hover:bg-primary/90 text-on-primary font-bold rounded-xl shadow-lg hover:shadow-primary/30 transition-all flex justify-center items-center group disabled:opacity-70 disabled:cursor-not-allowed"
            >
              {loading ? (
                <Loader2 className="w-5 h-5 animate-spin" />
              ) : (
                <>
                  登录系统
                  <ArrowRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
                </>
              )}
            </button>
          </form>

          {/* Quick Mock Login Helpers */}
          <div className="mt-8 pt-6 border-t border-outline-variant/30 text-center">
             <p className="text-xs text-outline mb-3">Mock 账号</p>
             <div className="flex gap-3 justify-center">
                <button 
                  type="button" 
                  onClick={() => autofill('stu')}
                  className="px-4 py-2 bg-surface-container text-xs font-medium text-on-surface rounded-lg hover:bg-surface-container-high transition-colors border border-outline-variant/50"
                >
                  学生账号 (stu)
                </button>
                <button 
                  type="button" 
                  onClick={() => autofill('teacher')}
                  className="px-4 py-2 bg-surface-container text-xs font-medium text-on-surface rounded-lg hover:bg-surface-container-high transition-colors border border-outline-variant/50"
                >
                  教师账号 (teacher)
                </button>
             </div>
          </div>
        </div>
        
        {/* Footer Brand Banner */}
        <div className="mt-8 flex justify-center opacity-50 contrast-125 saturate-0 group-hover:opacity-100 transition-opacity">
            <Image 
              src="/banner.png" 
              alt="SEEC Analysis" 
              width={140} 
              height={35} 
              className="object-contain"
            />
        </div>
      </div>
    </div>
  );
}