import { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { motion, AnimatePresence } from "framer-motion";
import { Mail, Lock, Sun, Moon, Eye, EyeOff, CheckCircle } from "lucide-react";

export default function AuthPanel() {
  const [mode, setMode] = useState("login"); // login | register | reset
  const [theme, setTheme] = useState("dark");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    document.documentElement.classList.toggle("dark", theme === "dark");
  }, [theme]);

  const passwordStrength = () => {
    let score = 0;
    if (password.length >= 8) score++;
    if (/[A-Z]/.test(password)) score++;
    if (/[0-9]/.test(password)) score++;
    if (/[^A-Za-z0-9]/.test(password)) score++;
    return score;
  };

  const strengthColors = ["bg-red-500", "bg-orange-500", "bg-yellow-500", "bg-green-500"];

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");

    if (!email.includes("@")) {
      setError("Niepoprawny email");
      return;
    }

    if (mode !== "reset" && passwordStrength() < 2) {
      setError("Hasło jest zbyt słabe");
      return;
    }

    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      setSuccess(true);
    }, 1500);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 to-black p-4">
      <Card className="relative w-full max-w-md rounded-3xl bg-white/5 backdrop-blur-xl border border-white/10 shadow-2xl">
        <CardContent className="p-10">
          <button
            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
            className="absolute top-4 right-4 p-2"
          >
            {theme === "dark" ? <Sun /> : <Moon />}
          </button>

          <AnimatePresence mode="wait">
            {success ? (
              <motion.div key="success" className="text-center space-y-4">
                <CheckCircle className="mx-auto text-green-500" size={48} />
                <h2 className="text-2xl font-semibold">Sukces</h2>
                <Button onClick={() => { setSuccess(false); setMode("login"); }}>Powrót</Button>
              </motion.div>
            ) : (
              <motion.form key={mode} onSubmit={handleSubmit} className="space-y-5">
                <h1 className="text-2xl font-semibold text-center">
                  {mode === "login" && "Logowanie"}
                  {mode === "register" && "Rejestracja"}
                  {mode === "reset" && "Reset hasła"}
                </h1>

                {error && <div className="text-red-500 text-sm">{error}</div>}

                <div>
                  <Label>Email</Label>
                  <Input value={email} onChange={e => setEmail(e.target.value)} />
                </div>

                {mode !== "reset" && (
                  <div>
                    <Label>Hasło</Label>
                    <div className="relative">
                      <Input
                        type={showPassword ? "text" : "password"}
                        value={password}
                        onChange={e => setPassword(e.target.value)}
                      />
                      <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-2">
                        {showPassword ? <EyeOff /> : <Eye />}
                      </button>
                    </div>

                    {mode === "register" && (
                      <div className="flex gap-1 mt-2">
                        {[0,1,2,3].map(i => (
                          <div key={i} className={`h-1 flex-1 rounded ${passwordStrength() > i ? strengthColors[passwordStrength()-1] : "bg-gray-600"}`} />
                        ))}
                      </div>
                    )}
                  </div>
                )}

                <Button disabled={loading} className="w-full">
                  {loading ? "Przetwarzanie..." : "Wyślij"}
                </Button>

                <div className="text-sm text-center space-x-2">
                  {mode !== "login" && <span onClick={() => setMode("login")} className="cursor-pointer">Logowanie</span>}
                  {mode !== "register" && <span onClick={() => setMode("register")} className="cursor-pointer">Rejestracja</span>}
                  {mode !== "reset" && <span onClick={() => setMode("reset")} className="cursor-pointer">Reset hasła</span>}
                </div>
              </motion.form>
            )}
          </AnimatePresence>
        </CardContent>
      </Card>
    </div>
  );
}