import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { motion } from "framer-motion";
import {
  Eye,
  EyeOff,
  Server,
  Key,
  User,
  Lock,
  AlertCircle,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { useAuthStore } from "@/stores";
import { LEDLogo } from "@/components/shared/LEDLogo";
import { STORAGE_KEYS } from "@/lib/constants";

export default function LoginPage() {
  const navigate = useNavigate();
  const { login } = useAuthStore();
  const [showPassword, setShowPassword] = useState(false);
  const [loginMode, setLoginMode] = useState("apikey");
  const [serverUrl, setServerUrl] = useState(
    () => (typeof window !== "undefined" ? localStorage.getItem(STORAGE_KEYS.SERVER_URL) || "http://localhost:3000" : "http://localhost:3000")
  );
  const [apiKey, setApiKey] = useState("");
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

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

    try {
      // 模拟登录过程
      await new Promise((resolve) => setTimeout(resolve, 800));

      // 简单验证
      if (loginMode === "apikey" && !apiKey.trim()) {
        throw new Error("请输入 API Key");
      }
      if (loginMode === "password" && (!username.trim() || !password)) {
        throw new Error("请输入用户名和密码");
      }

      // 创建模拟用户对象
      const mockWorker = {
        id: "1",
        name: loginMode === "apikey" ? "当前用户" : username,
        type: "human" as const,
        status: "online" as const,
      };

      login(mockWorker, apiKey || "demo-token");
      navigate("/workbench");
    } catch (err) {
      setError(err instanceof Error ? err.message : "登录失败");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 flex flex-col">
      <div className="flex-1 flex flex-col items-center justify-center p-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="w-full max-w-md space-y-8"
        >
          <div className="text-center space-y-6">
            <div className="inline-flex items-center justify-center">
              <LEDLogo />
            </div>
            <div className="space-y-2">
              <h1 className="text-3xl font-bold text-slate-100 tracking-tight">
                列阵工作台
              </h1>
              <p className="text-slate-400">
                人机协作，效率翻倍
              </p>
            </div>
          </div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-8 shadow-2xl"
          >
            {error && (
              <Alert className="mb-6 border-red-500/20 bg-red-500/10 text-red-400">
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}

            <Tabs defaultValue={loginMode} onValueChange={setLoginMode} className="w-full">
              <TabsList className="w-full bg-slate-950/50 border border-slate-700 mb-6">
                <TabsTrigger value="apikey" className="flex-1 data-[state=active]:bg-cyan-600">
                  <Key className="w-4 h-4 mr-2" />
                  API Key
                </TabsTrigger>
                <TabsTrigger value="password" className="flex-1 data-[state=active]:bg-cyan-600">
                  <User className="w-4 h-4 mr-2" />
                  密码登录
                </TabsTrigger>
              </TabsList>

              <form onSubmit={handleLogin} className="space-y-6">
                <div className="space-y-3">
                  <Label htmlFor="serverUrl" className="text-slate-300 flex items-center gap-2">
                    <Server className="w-4 h-4" />
                    服务器地址
                  </Label>
                  <Input
                    id="serverUrl"
                    placeholder="http://localhost:3000"
                    value={serverUrl}
                    onChange={(e) => setServerUrl(e.target.value)}
                    className="h-12 bg-slate-950/50 border-slate-700 text-slate-200 placeholder:text-slate-500 focus:border-cyan-500 focus:ring-cyan-500/20"
                  />
                </div>

                <TabsContent value="apikey" className="space-y-6 mt-0">
                  <div className="space-y-3">
                    <Label htmlFor="apiKey" className="text-slate-300 flex items-center gap-2">
                      <Key className="w-4 h-4" />
                      API Key
                    </Label>
                    <Input
                      id="apiKey"
                      type="password"
                      placeholder="输入您的 API Key"
                      value={apiKey}
                      onChange={(e) => setApiKey(e.target.value)}
                      className="h-12 bg-slate-950/50 border-slate-700 text-slate-200 placeholder:text-slate-500 focus:border-cyan-500 focus:ring-cyan-500/20"
                    />
                  </div>
                </TabsContent>

                <TabsContent value="password" className="space-y-6 mt-0">
                  <div className="space-y-3">
                    <Label htmlFor="username" className="text-slate-300 flex items-center gap-2">
                      <User className="w-4 h-4" />
                      用户名
                    </Label>
                    <Input
                      id="username"
                      placeholder="输入用户名"
                      value={username}
                      onChange={(e) => setUsername(e.target.value)}
                      className="h-12 bg-slate-950/50 border-slate-700 text-slate-200 placeholder:text-slate-500 focus:border-cyan-500 focus:ring-cyan-500/20"
                    />
                  </div>
                  <div className="space-y-3">
                    <Label htmlFor="password" className="text-slate-300 flex items-center gap-2">
                      <Lock className="w-4 h-4" />
                      密码
                    </Label>
                    <div className="relative">
                      <Input
                        id="password"
                        type={showPassword ? "text" : "password"}
                        placeholder="••••••••"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        className="h-12 bg-slate-950/50 border-slate-700 text-slate-200 placeholder:text-slate-500 focus:border-cyan-500 focus:ring-cyan-500/20 pr-12"
                      />
                      <button
                        type="button"
                        onClick={() => setShowPassword(!showPassword)}
                        className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300 transition-colors"
                      >
                        {showPassword ? (
                          <EyeOff className="w-5 h-5" />
                        ) : (
                          <Eye className="w-5 h-5" />
                        )}
                      </button>
                    </div>
                  </div>
                </TabsContent>

                <Button
                  type="submit"
                  disabled={loading}
                  className="w-full h-12 bg-gradient-to-r from-cyan-600 to-cyan-500 hover:from-cyan-500 hover:to-cyan-400 text-slate-950 font-semibold shadow-lg shadow-cyan-500/25 transition-all hover:shadow-cyan-500/40 disabled:opacity-50"
                >
                  {loading ? "登录中..." : "登录"}
                </Button>
              </form>
            </Tabs>

            <div className="mt-8 text-center">
              <p className="text-slate-400 text-sm">
                还没有账户？{" "}
                <button
                  type="button"
                  className="text-cyan-400 hover:text-cyan-300 font-medium transition-colors"
                >
                  立即注册
                </button>
              </p>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </div>
  );
}