"use client";

import { Suspense, useMemo, useState } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Car, Loader2, CheckCircle2, AlertTriangle } from "lucide-react";
import { useRepositories } from "@/di/repository-provider";
import { useApiMutation } from "@/presentation/hooks/use-api-mutation";
import { useT } from "@/shared/i18n/client";
import { ROUTES } from "@/shared/constants";
import {
  resetPasswordSchema,
  type ResetPasswordFormValues,
} from "@/shared/schemas/reset-password.schema";
import { Button } from "@/presentation/components/ui/button";
import { Input } from "@/presentation/components/ui/input";
import { Label } from "@/presentation/components/ui/label";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/presentation/components/ui/card";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/presentation/components/ui/form";

function ResetPasswordCard() {
  const t = useT();
  const params = useSearchParams();
  const email = params.get("email")?.trim() ?? "";
  const token = params.get("token")?.trim() ?? "";
  const container = useRepositories();
  const [done, setDone] = useState(false);

  const schema = useMemo(() => resetPasswordSchema(t), [t]);
  const form = useForm<ResetPasswordFormValues>({
    resolver: zodResolver(schema),
    defaultValues: { password: "", password_confirmation: "" },
  });

  const mutation = useApiMutation(
    (values: ResetPasswordFormValues) =>
      container.authRepository.resetPassword({
        email,
        token,
        password: values.password,
        password_confirmation: values.password_confirmation,
      }),
    { onSuccess: () => setDone(true) },
  );

  // The emailed link must carry both params; otherwise the token is unusable.
  if (!email || !token) {
    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-red-500 rounded-xl flex items-center justify-center shadow-lg">
            <AlertTriangle className="w-6 h-6 text-white" />
          </div>
          <div>
            <CardTitle className="text-2xl font-bold">
              {t.auth.resetPassword.invalidLinkTitle}
            </CardTitle>
            <CardDescription>{t.auth.resetPassword.invalidLinkMessage}</CardDescription>
          </div>
        </CardHeader>
        <CardContent>
          <Button asChild variant="outline" className="w-full">
            <Link href={ROUTES.login}>{t.auth.resetPassword.backToLogin}</Link>
          </Button>
        </CardContent>
      </Card>
    );
  }

  if (done) {
    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-emerald-500 rounded-xl flex items-center justify-center shadow-lg">
            <CheckCircle2 className="w-6 h-6 text-white" />
          </div>
          <div>
            <CardTitle className="text-2xl font-bold">
              {t.auth.resetPassword.successTitle}
            </CardTitle>
            <CardDescription>{t.auth.resetPassword.successMessage}</CardDescription>
          </div>
        </CardHeader>
        <CardContent>
          <Button asChild className="w-full">
            <Link href={ROUTES.login}>{t.auth.resetPassword.backToLogin}</Link>
          </Button>
        </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.resetPassword.title}</CardTitle>
          <CardDescription>{t.auth.resetPassword.subtitle}</CardDescription>
        </div>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
            className="space-y-4"
          >
            <div className="space-y-2">
              <Label>{t.forms.email}</Label>
              <Input value={email} disabled readOnly autoComplete="username" />
            </div>
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{t.auth.resetPassword.newPassword}</FormLabel>
                  <FormControl>
                    <Input type="password" autoComplete="new-password" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password_confirmation"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{t.auth.resetPassword.confirmPassword}</FormLabel>
                  <FormControl>
                    <Input type="password" autoComplete="new-password" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit" className="w-full" disabled={mutation.loading}>
              {mutation.loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
              {t.auth.resetPassword.submit}
            </Button>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
}

export default function ResetPasswordPage() {
  return (
    <Suspense fallback={null}>
      <ResetPasswordCard />
    </Suspense>
  );
}