"use client"

import { DatePicker } from "@/components/date-picker"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Switch } from "@/components/ui/switch"
import { createAdvanceUrl } from "@/lib/actions/url"
import { advancedUrlSchema } from "@/lib/schema/url"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"

type AdvancedUrlFormValues = z.infer<typeof advancedUrlSchema>

export function AdvancedUrlFormCard() {
    const form = useForm<AdvancedUrlFormValues>({
        resolver: zodResolver(advancedUrlSchema),
        defaultValues: {
            url: "",
            slug: "",
            title: "",
            maxVisits: 0,
            expDate: undefined,
            forwardQueryParams: true,
            crawlable: false
        }
    })

    async function handleSubmit(data: AdvancedUrlFormValues) {
        const res = await createAdvanceUrl(data)

        if (res.error) {
            toast.error(res.message)
        } else {
            toast.success(res.message)
            form.reset()
        }
    }

    return (
        <Card>
            <CardHeader>
                <CardTitle>Create Advanced Short Link</CardTitle>
                <CardDescription>
                    Create a short link with advanced configuration options.
                </CardDescription>
            </CardHeader>
            <CardContent>
                <Form {...form}>
                    <form
                        onSubmit={form.handleSubmit(handleSubmit)}
                        className="space-y-4"
                    >
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="space-y-4">
                                <FormField
                                    control={form.control}
                                    name="url"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>Original URL</FormLabel>
                                            <FormControl>
                                                <Input
                                                    placeholder="https://example.com"
                                                    {...field}
                                                />
                                            </FormControl>
                                            <FormDescription>
                                                The URL you want to shorten.
                                            </FormDescription>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                                <FormField
                                    control={form.control}
                                    name="slug"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>Custom Slug (Optional)</FormLabel>
                                            <FormControl>
                                                <Input
                                                    placeholder="my-custom-link"
                                                    {...field}
                                                />
                                            </FormControl>
                                            <FormDescription>
                                                A unique identifier for your short link (max 10 characters).
                                            </FormDescription>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                                <FormField
                                    control={form.control}
                                    name="forwardQueryParams"
                                    render={({ field }) => (
                                        <FormItem className="flex items-center justify-between rounded-lg border p-4">
                                            <div className="space-y-0.5">
                                                <FormLabel className="text-base">
                                                    Forward Query Parameters
                                                </FormLabel>
                                                <FormDescription>
                                                    Forward query parameters from the short link to the destination URL.
                                                </FormDescription>
                                            </div>
                                            <FormControl>
                                                <Switch
                                                    checked={field.value}
                                                    onCheckedChange={field.onChange}
                                                />
                                            </FormControl>
                                        </FormItem>
                                    )}
                                />
                                <FormField
                                    control={form.control}
                                    name="crawlable"
                                    render={({ field }) => (
                                        <FormItem className="flex items-center justify-between rounded-lg border p-4">
                                            <div className="space-y-0.5">
                                                <FormLabel className="text-base">
                                                    Crawlable (Optional)
                                                </FormLabel>
                                                <FormDescription>
                                                    Allow search engines to crawl and index this link.
                                                </FormDescription>
                                            </div>
                                            <FormControl>
                                                <Switch
                                                    checked={field.value ?? false}
                                                    onCheckedChange={field.onChange}
                                                />
                                            </FormControl>
                                        </FormItem>
                                    )}
                                />
                            </div>
                            <div className="space-y-4">
                                <FormField
                                    control={form.control}
                                    name="title"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>Title (Optional)</FormLabel>
                                            <FormControl>
                                                <Input
                                                    placeholder="My Link Title"
                                                    {...field}
                                                />
                                            </FormControl>
                                            <FormDescription>
                                                A descriptive title for your link (max 100 characters).
                                            </FormDescription>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                                <FormField
                                    control={form.control}
                                    name="maxVisits"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>Max Visits (Optional)</FormLabel>
                                            <FormControl>
                                                <Input
                                                    type="number"
                                                    placeholder="100"
                                                    {...field}
                                                    onChange={e => field.onChange(e.target.value ? parseInt(e.target.value) : undefined)}
                                                />
                                            </FormControl>
                                            <FormDescription>
                                                Maximum number of visits before the link expires.
                                            </FormDescription>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                                <FormField
                                    control={form.control}
                                    name="expDate"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>Expiration Date (Optional)</FormLabel>
                                            <FormControl>
                                                <DatePicker
                                                    value={field.value}
                                                    onChange={field.onChange}
                                                    placeholder="Select expiration date"
                                                />
                                            </FormControl>
                                            <FormDescription>
                                                When this link should expire and become inaccessible.
                                            </FormDescription>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </div>
                        </div>
                        <Button
                            type="submit"
                            className="w-full"
                            disabled={form.formState.isSubmitting}
                        >
                            {form.formState.isSubmitting ? "Creating..." : "Create Short Link"}
                        </Button>
                    </form>
                </Form>
            </CardContent>
        </Card>
    )
}