import { useEffect } from "react"
import { useForm, type ControllerProps, type FieldPath } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormDescription,
} from "@/components/ui/form"
import { useSiteSettings, useCreateSiteSetting, useUpdateSiteSetting } from "@/features/site-management/hooks/useSiteSettings"
import { Save } from "lucide-react"

const formSchema = z.object({
    is_active: z.boolean(),
    site_active: z.boolean(),
})

type SiteSettingsFormValues = z.infer<typeof formSchema>

const SiteSettingsFormField = <TName extends FieldPath<SiteSettingsFormValues>>(
    props: ControllerProps<SiteSettingsFormValues, TName>
) => {
    return <FormField<SiteSettingsFormValues, TName> {...props} />
}

export const SiteSettingsForm = () => {
    const { data: settingsList, isLoading } = useSiteSettings()
    const createSetting = useCreateSiteSetting()
    const updateSetting = useUpdateSiteSetting()

    // Varsayılan olarak ilk ayarı al, yoksa null
    const settings = settingsList?.[0]

    const form = useForm<SiteSettingsFormValues>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            is_active: true,
            site_active: true,
        },
    })

    useEffect(() => {
        if (settings) {
            form.reset({
                is_active: settings.is_active,
                site_active: settings.site_active,
            })
        }
    }, [settings, form])

    const onSubmit = (values: SiteSettingsFormValues) => {
        if (settings) {
            updateSetting.mutate({ id: settings.id, data: values })
        } else {
            createSetting.mutate(values)
        }
    }

    if (isLoading) return <div>Yükleniyor...</div>

    return (
        <div className="space-y-6">
            <h2 className="text-2xl font-bold tracking-tight">Genel Site Ayarları</h2>

            <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 max-w-2xl">

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <SiteSettingsFormField
                            control={form.control}
                            name="site_active"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                                    <div className="space-y-0.5">
                                        <FormLabel className="text-base">Site Aktif</FormLabel>
                                        <FormDescription>
                                            Siteyi genel olarak aktif veya pasif hale getirir.
                                        </FormDescription>
                                    </div>
                                    <FormControl>
                                        <Switch
                                            checked={field.value}
                                            onCheckedChange={field.onChange}
                                        />
                                    </FormControl>
                                </FormItem>
                            )}
                        />

                        <SiteSettingsFormField
                            control={form.control}
                            name="is_active"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                                    <div className="space-y-0.5">
                                        <FormLabel className="text-base">Kayıt Aktif</FormLabel>
                                        <FormDescription>
                                            Kaydın aktif olup olmadığını belirler.
                                        </FormDescription>
                                    </div>
                                    <FormControl>
                                        <Switch
                                            checked={field.value}
                                            onCheckedChange={field.onChange}
                                        />
                                    </FormControl>
                                </FormItem>
                            )}
                        />
                    </div>

                    <div className="flex justify-end">
                        <Button type="submit" disabled={createSetting.isPending || updateSetting.isPending}>
                            <Save className="mr-2 h-4 w-4" />
                            Ayarları Kaydet
                        </Button>
                    </div>
                </form>
            </Form>
        </div>
    )
}
