"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 { BuildPartsAdd, buildPartsAddSchema } from "./schema"
import { useAddBuildAreasMutation } from "./queries"
import { Checkbox } from "@/components/ui/checkbox"

const BuildPartsForm = ({ refetchTable, selectedBuildId }: { refetchTable: () => void, selectedBuildId: string }) => {
    const form = useForm<BuildPartsAdd>({
        resolver: zodResolver(buildPartsAddSchema),
        defaultValues: {
            addressGovCode: "", no: 0, level: 0, code: "", grossSize: 0, netSize: 0, defaultAccessory: "", humanLivability: false, key: "",
            directionId: "", typeId: "", active: false, isConfirmed: false, expiryStarts: "", expiryEnds: "",
        },
    });
    const { handleSubmit } = form;
    const mutation = useAddBuildAreasMutation();
    function onSubmit(values: BuildPartsAdd) { mutation.mutate({ data: values, buildId: selectedBuildId, 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">Add Build Parts</Button>
            </form>
        </Form>
    );
};

export { BuildPartsForm }