cat-sitting-planner/components/plan-settings.tsx

"use client"

import { useState } from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Settings } from "lucide-react"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import {
    Form,
    FormControl,
    FormDescription,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { updatePlan } from "@/app/actions/plan"

interface PlanSettingsProps {
    planId: string
    initialTitle: string
    initialInstructions: string | null
    initialWebhookUrl: string | null
    initialNotifyAll: boolean
    initialFeedingPerDay: number
    initialFeedingInterval: number
    initialLitterInterval: number
    dict: any
    lang: string
}

export function PlanSettings({
    planId,
    initialTitle,
    initialInstructions,
    initialWebhookUrl,
    initialNotifyAll,
    initialFeedingPerDay,
    initialFeedingInterval,
    initialLitterInterval,
    dict,
    lang
}: PlanSettingsProps) {
    const [open, setOpen] = useState(false)
    const [isPending, setIsPending] = useState(false)

    const formSchema = z.object({
        title: z.string().min(2),
        instructions: z.string().optional(),
        webhookUrl: z.string().url().optional().or(z.literal("")),
        notifyAll: z.boolean(),
        feedingPerDay: z.number().min(1).max(10),
        feedingInterval: z.number().min(1).max(30),
        litterInterval: z.number().min(1).max(30),
    })

    type FormValues = z.infer<typeof formSchema>

    const form = useForm<FormValues>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            title: initialTitle,
            instructions: initialInstructions || "",
            webhookUrl: initialWebhookUrl || "",
            notifyAll: initialNotifyAll,
            feedingPerDay: initialFeedingPerDay,
            feedingInterval: initialFeedingInterval,
            litterInterval: initialLitterInterval,
        },
    })

    async function onSubmit(data: FormValues) {
        setIsPending(true)
        try {
            await updatePlan(planId, data, lang)
            toast.success(dict.success)
            setOpen(false)
        } catch (error) {
            toast.error(dict.error)
        } finally {
            setIsPending(false)
        }
    }

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button variant="outline" size="sm">
                    <Settings className="w-4 h-4 mr-2" />
                    {dict.label}
                </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[425px]">
                <DialogHeader>
                    <DialogTitle>{dict.title}</DialogTitle>
                    <DialogDescription>
                        {dict.description}
                    </DialogDescription>
                </DialogHeader>
                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                        <FormField
                            control={form.control}
                            name="title"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>{dict.titleLabel}</FormLabel>
                                    <FormControl>
                                        <Input
                                            {...field}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="webhookUrl"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>{dict.webhookLabel}</FormLabel>
                                    <FormControl>
                                        <Input
                                            placeholder={dict.webhookPlaceholder}
                                            {...field}
                                        />
                                    </FormControl>
                                    <FormDescription>
                                        {dict.webhookDesc}
                                    </FormDescription>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <div className="grid grid-cols-2 gap-4">
                            <FormField
                                control={form.control}
                                name="feedingPerDay"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>{dict.feedingPerDayLabel}</FormLabel>
                                        <FormControl>
                                            <Input
                                                type="number"
                                                {...field}
                                                onChange={(e) => field.onChange(parseInt(e.target.value))}
                                            />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="feedingInterval"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>{dict.feedingIntervalLabel}</FormLabel>
                                        <FormControl>
                                            <Input
                                                type="number"
                                                {...field}
                                                onChange={(e) => field.onChange(parseInt(e.target.value))}
                                            />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                        </div>
                        <FormField
                            control={form.control}
                            name="litterInterval"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>{dict.litterIntervalLabel}</FormLabel>
                                    <FormControl>
                                        <Input
                                            type="number"
                                            {...field}
                                            onChange={(e) => field.onChange(parseInt(e.target.value))}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="notifyAll"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
                                    <FormControl>
                                        <Checkbox
                                            checked={field.value}
                                            onCheckedChange={field.onChange}
                                        />
                                    </FormControl>
                                    <div className="space-y-1 leading-none">
                                        <FormLabel>
                                            {dict.notifyAllLabel}
                                        </FormLabel>
                                        <FormDescription>
                                            {dict.notifyAllDesc}
                                        </FormDescription>
                                    </div>
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="instructions"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>{dict.instructionsLabel}</FormLabel>
                                    <FormControl>
                                        <Textarea
                                            placeholder={dict.instructionsPlaceholder}
                                            className="h-32"
                                            {...field}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <DialogFooter>
                            <Button type="submit" disabled={isPending}>
                                {isPending ? dict.saving : dict.save}
                            </Button>
                        </DialogFooter>
                    </form>
                </Form>
            </DialogContent>
        </Dialog>
    )
}