"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { resetPasswordSchema } from "@/lib/validation/schemas";
import { createClient } from "@/lib/supabase/client";
import { AuthLayout } from "@/components/layout/auth-layout";
import { Input, Label, FieldError } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { useTranslations } from "@/lib/i18n/i18n-provider";

export default function ResetPasswordPage({ params }: { params: { locale: string } }) {
  const t = useTranslations();
  const router = useRouter();
  const [success, setSuccess] = useState(false);
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting }
  } = useForm<{ password: string }>({ resolver: zodResolver(resetPasswordSchema) });

  async function onSubmit(values: { password: string }) {
    const supabase = createClient();
    const { error } = await supabase.auth.updateUser({ password: values.password });
    if (!error) {
      setSuccess(true);
      setTimeout(() => router.push(`/${params.locale}/login`), 1500);
    }
  }

  return (
    <AuthLayout locale={params.locale} title={t("auth.resetPassword.title")} subtitle="">
      {success ? (
        <p className="text-sm text-emerald-700">{t("auth.resetPassword.success")}</p>
      ) : (
        <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">
          <div>
            <Label htmlFor="password">{t("auth.resetPassword.password")}</Label>
            <Input id="password" type="password" error={errors.password?.message} {...register("password")} />
            <FieldError id="password-error">{errors.password?.message}</FieldError>
          </div>
          <Button type="submit" className="w-full" loading={isSubmitting}>
            {t("auth.resetPassword.submit")}
          </Button>
        </form>
      )}
    </AuthLayout>
  );
}