"use client"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { DateTimePicker } from "@/components/ui/date-time-picker"
import { BuildPartsUpdate, buildPartsUpdateSchema } from "@/pages/build-parts/update/schema"
import { Checkbox } from "@/components/ui/checkbox"
import { useUpdateBuildPartsMutation } from "@/pages/build-parts/update/queries"

const BuildPartsForm = ({ refetchTable, initData, selectedUuid, buildId }: { refetchTable: () => void, initData: BuildPartsUpdate, selectedUuid: string, buildId: string }) => {

    const form = useForm<BuildPartsUpdate>({
        resolver: zodResolver(buildPartsUpdateSchema), defaultValues: { ...initData, directionId: initData.directionId ?? '', typeId: initData.typeId ?? '' }
    })
    const { handleSubmit } = form
    const mutation = useUpdateBuildPartsMutation();
    function onSubmit(values: BuildPartsUpdate) { mutation.mutate({ data: values as any || initData, uuid: selectedUuid, buildId, refetchTable }) }

    return (
        <Form {...form}>
            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 p-4">
                {/* ROW 1 */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="addressGovCode"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Address Gov Code</FormLabel>
                                <FormControl>
                                    <Input placeholder="TR-34-XXX-XXXX" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="no"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>No</FormLabel>
                                <FormControl>
                                    <Input
                                        type="number"
                                        placeholder="Area No"
                                        {...field}
                                        onChange={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                {/* ROW 2 */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="level"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Level</FormLabel>
                                <FormControl>
                                    <Input
                                        type="number"
                                        placeholder="Floor / Level"
                                        {...field}
                                        onChange={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="code"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Code</FormLabel>
                                <FormControl>
                                    <Input placeholder="Part Code (e.g. A5)" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                {/* ROW 3 */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="key"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Key</FormLabel>
                                <FormControl>
                                    <Input placeholder="Unique Key (e.g. BLK-A5-L5-N3)" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="grossSize"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Gross Size</FormLabel>
                                <FormControl>
                                    <Input
                                        type="number"
                                        placeholder="Gross Size (m²)"
                                        {...field}
                                        onBlur={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                {/* ROW 4 */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="netSize"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Net Size</FormLabel>
                                <FormControl>
                                    <Input
                                        type="number"
                                        placeholder="Net Size (m²)"
                                        {...field}
                                        onBlur={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="defaultAccessory"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Default Accessory</FormLabel>
                                <FormControl>
                                    <Input placeholder="e.g. balcony, terrace..." {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                </div>

                {/* ROW 5 */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="directionId"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Direction Id</FormLabel>
                                <FormControl>
                                    <Input placeholder="Direction ObjectId (optional)" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="typeId"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Type Id</FormLabel>
                                <FormControl>
                                    <Input placeholder="Type ObjectId (optional)" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                </div>

                {/* BOOLEAN ROW */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">

                    {/* boşluk kalmasın diye aktif alanını buraya koydum */}
                    <FormField
                        control={form.control}
                        name="active"
                        render={({ field }) => (
                            <FormItem className="flex flex-row items-center justify-between rounded-md border p-3">
                                <FormLabel className="text-sm font-medium">
                                    Active
                                </FormLabel>
                                <FormControl>
                                    <Checkbox
                                        checked={field.value}
                                        onCheckedChange={field.onChange}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="humanLivability"
                        render={({ field }) => (
                            <FormItem className="flex flex-row items-center justify-between rounded-md border p-3">
                                <FormLabel className="text-sm font-medium">
                                    Human Livability
                                </FormLabel>
                                <FormControl>
                                    <Checkbox
                                        checked={field.value}
                                        onCheckedChange={field.onChange}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="isConfirmed"
                        render={({ field }) => (
                            <FormItem className="flex flex-row items-center justify-between rounded-md border p-3">
                                <FormLabel className="text-sm font-medium">
                                    Is Confirmed
                                </FormLabel>
                                <FormControl>
                                    <Checkbox
                                        checked={field.value}
                                        onCheckedChange={field.onChange}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                <Separator />
                {/* EXPIRY DATES */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="expiryStarts"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Expiry Starts</FormLabel>
                                <FormControl>
                                    <DateTimePicker {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="expiryEnds"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Expiry Ends</FormLabel>
                                <FormControl>
                                    <DateTimePicker {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>
                <Button type="submit" className="w-full">Update Build Address</Button>
            </form>
        </Form>
    );

}

export { BuildPartsForm }