"use client";

import { useMemo, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { toast } from "sonner";
import { Car, Loader2, ArrowLeft, MailCheck } from "lucide-react";
import { useAuth } from "@/presentation/hooks/use-auth";
import { useRepositories } from "@/di/repository-provider";
import { useApiMutation } from "@/presentation/hooks/use-api-mutation";
import { loginSchema, type LoginFormValues } from "@/shared/schemas/auth.schema";
import {
  forgotPasswordSchema,
  type ForgotPasswordFormValues,
} from "@/shared/schemas/reset-password.schema";
import { useT } from "@/shared/i18n/client";
import { Button } from "@/presentation/components/ui/button";
import { Input } from "@/presentation/components/ui/input";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/presentation/components/ui/card";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/presentation/components/ui/form";

export default function LoginPage() {
  const t = useT();
  const { login } = useAuth();
  const container = useRepositories();
  const [loading, setLoading] = useState(false);
  const [mode, setMode] = useState<"login" | "forgot">("login");
  const [forgotSent, setForgotSent] = useState(false);

  const schema = useMemo(() => loginSchema(t), [t]);
  const loginForm = useForm<LoginFormValues>({
    resolver: zodResolver(schema),
    defaultValues: { email: "", password: "" },
  });

  const forgotSchema = useMemo(() => forgotPasswordSchema(t), [t]);
  const forgotForm = useForm<ForgotPasswordFormValues>({
    resolver: zodResolver(forgotSchema),
    defaultValues: { email: "" },
  });

  const onSubmit = async (values: LoginFormValues) => {
    setLoading(true);
    try {
      await login(values.email, values.password);
    } catch {
      toast.error(t.auth.invalidCredentials);
    } finally {
      setLoading(false);
    }
  };

  const forgotMutation = useApiMutation(
    (values: ForgotPasswordFormValues) => container.authRepository.forgotPassword(values.email),
    { onSuccess: () => setForgotSent(true) },
  );

  const backToLogin = () => {
    setMode("login");
    setForgotSent(false);
    forgotForm.reset({ email: "" });
  };

  if (mode === "forgot") {
    return (
      <Card className="w-full max-w-md shadow-lg">
        <CardHeader className="text-center space-y-3">
          <div className="mx-auto w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center shadow-lg">
            {forgotSent ? (
              <MailCheck className="w-6 h-6 text-white" />
            ) : (
              <Car className="w-6 h-6 text-white" />
            )}
          </div>
          <div>
            <CardTitle className="text-2xl font-bold">{t.auth.forgotPassword.title}</CardTitle>
            <CardDescription>
              {forgotSent ? t.auth.forgotPassword.success : t.auth.forgotPassword.subtitle}
            </CardDescription>
          </div>
        </CardHeader>
        <CardContent>
          {forgotSent ? (
            <Button variant="outline" className="w-full" onClick={backToLogin}>
              <ArrowLeft className="w-4 h-4 mr-2" />
              {t.auth.forgotPassword.back}
            </Button>
          ) : (
            <Form {...forgotForm}>
              <form
                onSubmit={forgotForm.handleSubmit((v) => forgotMutation.mutate(v))}
                className="space-y-4"
              >
                <FormField
                  control={forgotForm.control}
                  name="email"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t.forms.email}</FormLabel>
                      <FormControl>
                        <Input
                          type="email"
                          placeholder={t.auth.emailPlaceholder}
                          autoComplete="email"
                          {...field}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <Button type="submit" className="w-full" disabled={forgotMutation.loading}>
                  {forgotMutation.loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
                  {t.auth.forgotPassword.submit}
                </Button>
                <Button
                  type="button"
                  variant="ghost"
                  className="w-full text-muted-foreground"
                  onClick={backToLogin}
                >
                  <ArrowLeft className="w-4 h-4 mr-2" />
                  {t.auth.forgotPassword.back}
                </Button>
              </form>
            </Form>
          )}
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="w-full max-w-md shadow-lg">
      <CardHeader className="text-center space-y-3">
        <div className="mx-auto w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center shadow-lg">
          <Car className="w-6 h-6 text-white" />
        </div>
        <div>
          <CardTitle className="text-2xl font-bold">{t.auth.appName}</CardTitle>
          <CardDescription>{t.auth.loginSubtitle}</CardDescription>
        </div>
      </CardHeader>
      <CardContent>
        <Form {...loginForm}>
          <form onSubmit={loginForm.handleSubmit(onSubmit)} className="space-y-4">
            <FormField
              control={loginForm.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{t.forms.email}</FormLabel>
                  <FormControl>
                    <Input
                      type="email"
                      placeholder={t.auth.emailPlaceholder}
                      autoComplete="email"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={loginForm.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{t.forms.password}</FormLabel>
                  <FormControl>
                    <Input
                      type="password"
                      placeholder={t.auth.passwordPlaceholder}
                      autoComplete="current-password"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit" className="w-full" disabled={loading}>
              {loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
              {t.auth.submit}
            </Button>
            <Button
              type="button"
              variant="link"
              className="w-full text-muted-foreground"
              onClick={() => setMode("forgot")}
            >
              {t.auth.forgotPasswordLink}
            </Button>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
}