"use client";

import { useState } from "react";
import { useRouter } from "next/router";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { toast } from "@/app/_hooks/use-toast";
import { Button } from "@/app/_components/ui/button";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/app/_components/ui/form";
import { Input } from "@/app/_components/ui/input";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/app/_components/ui/card";
import Link from "next/link";
import { SubmitButton } from "@/app/_components/submit-button";

const FormSchema = z.object({
  email: z.string().email({
    message: "Please enter a valid email address.",
  }),
});

export default function RecoveryEmailForm() {
  // const router = useRouter();
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      email: "",
    },
  });

  function onSubmit(data: z.infer<typeof FormSchema>) {
    setTimeout(() => {
      toast({
        title: "Recovery email sent",
        description: `We've sent a recovery link to ${data.email}`,
      });
      // Redirect to a confirmation page or back to login
      //   router.push("/login");
    }, 2000);
  }

  return (
    <div className="flex items-center justify-center">
      <Card className="w-[450px] text-white border-none">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Account Recovery</CardTitle>
          <CardDescription className="text-gray-400">
            Enter your email to receive a recovery link
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="text-gray-200">Email</FormLabel>
                    <FormControl>
                      <Input
                        {...field}
                        type="email"
                        placeholder="you@example.com"
                        className="bg-[#1C1C1C] border-gray-800 text-white placeholder:text-gray-500 focus:border-emerald-600 focus:ring-emerald-600"
                      />
                    </FormControl>
                    <FormDescription className="text-gray-400">
                      We'll send a recovery link to this email
                    </FormDescription>
                    <FormMessage className="text-red-400" />
                  </FormItem>
                )}
              />
              <SubmitButton
                pendingText="Sending..."
                className="w-full bg-emerald-600 hover:bg-emerald-700 text-white"
              >
                Send Recovery Link
              </SubmitButton>
            </form>
          </Form>
        </CardContent>
        <CardFooter className="flex justify-center">
          <Button
            variant="link"
            className="text-emerald-500 hover:text-emerald-400"
          >
            <Link href={"sign-in"}>Back to Login</Link>
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}