"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { useRouter } from "next/navigation"
import { toast } from "sonner"
import { Lock } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { verifyPlanPassword } from "@/app/actions/auth"

const formSchema = z.object({
    password: z.string().min(1, "Password is required"),
})

export function PlanLoginForm({ planId }: { planId: string }) {
    const router = useRouter()
    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            password: "",
        },
    })

    async function onSubmit(values: z.infer<typeof formSchema>) {
        try {
            const success = await verifyPlanPassword(planId, values.password)
            if (success) {
                toast.success("Access granted!")
                router.refresh() // Refresh to trigger server re-render with cookie
            } else {
                toast.error("Invalid password")
            }
        } catch {
            toast.error("Something went wrong")
        }
    }

    return (
        <div className="flex flex-col items-center justify-center min-h-[50vh] space-y-4">
            <div className="p-4 bg-muted rounded-full">
                <Lock className="w-8 h-8 opacity-50" />
            </div>
            <h2 className="text-xl font-semibold">Enter Plan Password</h2>
            <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 w-full max-w-xs">
                    <FormField
                        control={form.control}
                        name="password"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel className="sr-only">Password</FormLabel>
                                <FormControl>
                                    <Input type="password" placeholder="Password" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <Button type="submit" className="w-full">
                        Unlock Plan
                    </Button>
                </form>
            </Form>
        </div>
    )
}