"use client";

import { useState, type FormEvent } from "react";
import { signIn } from "next-auth/react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import Navigation from "@/components/navigation/Navigation";
import {
  Input,
  Button,
  Alert,
  Card,
  BackgroundSection,
  SectionTitle,
} from "@/components/ui";

export default function LoginPage() {
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

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

    try {
      const result = await signIn("credentials", {
        email,
        password,
        redirect: false,
        callbackUrl: "/",
      });

      if (result?.error) {
        setError("Email ou mot de passe incorrect");
        setLoading(false);
      } else if (result?.ok) {
        router.push("/");
        router.refresh();
      } else {
        setError("Une erreur est survenue lors de la connexion");
        setLoading(false);
      }
    } catch (err) {
      console.error("Login error:", err);
      setError("Une erreur est survenue");
      setLoading(false);
    }
  };

  return (
    <main className="min-h-screen bg-black relative">
      <Navigation />
      <BackgroundSection backgroundImage="/got-2.jpg" className="pt-24">
        {/* Login Form */}
        <div className="w-full max-w-md mx-auto px-8">
          <Card variant="dark" className="p-8">
            <SectionTitle
              variant="gradient"
              size="lg"
              className="mb-2 text-center"
            >
              CONNEXION
            </SectionTitle>
            <p className="text-gray-400 text-sm text-center mb-8">
              Connectez-vous à votre compte
            </p>

            <form onSubmit={handleSubmit} className="space-y-6">
              {error && <Alert variant="error">{error}</Alert>}

              <Input
                id="email"
                type="email"
                label="Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                placeholder="votre@email.com"
              />

              <Input
                id="password"
                type="password"
                label="Mot de passe"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                placeholder="••••••••"
              />

              <Button
                type="submit"
                variant="primary"
                size="lg"
                disabled={loading}
                className="w-full"
              >
                {loading ? "Connexion..." : "Se connecter"}
              </Button>
            </form>

            <div className="mt-6 text-center">
              <p className="text-gray-400 text-sm">
                Pas encore de compte ?{" "}
                <Link
                  href="/register"
                  className="text-pixel-gold hover:text-orange-400 transition"
                >
                  S&apos;inscrire
                </Link>
              </p>
            </div>
          </Card>
        </div>
      </BackgroundSection>
    </main>
  );
}