"use client"

import { z } from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Plus, Save } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { FieldGroup } from "@/shared/components/ui/field"
import { Rhform, RhfTextField, RhfCheckboxField } from "@/shared/components/form"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
import { useEffect } from "react"

// ── Schema ──

const taskSectionSchema = z.object({
    title: z.string().min(1, "Title is required"),
    arrangement: z.string().optional(),
    is_default: z.boolean().optional(),
})

type TaskSectionFormValues = z.infer<typeof taskSectionSchema>

// ── Props ──

type TaskSectionFormProps = {
    resourceId?: string | null
    initialData?: any
    onSuccess?: () => void
}

// ── Component ──

export function TaskSectionForm({ resourceId, initialData, onSuccess }: TaskSectionFormProps) {
    const api = useAuthApi()
    const isEditing = !!resourceId

    const form = useForm<TaskSectionFormValues>({
        resolver: zodResolver(taskSectionSchema),
        defaultValues: { title: "", arrangement: "", is_default: false },
    })

    useEffect(() => {
        if (initialData) {
            const d = initialData?.data ?? initialData
            form.reset({
                title: d.title ?? "",
                arrangement: d.arrangement != null ? String(d.arrangement) : "",
                is_default: d.is_default ?? false,
            })
        }
    }, [initialData, form])

    const handleSubmit = async (values: TaskSectionFormValues) => {
        try {
            const promise = isEditing
                ? api.taskSections.update(resourceId!, {
                    title: values.title,
                    arrangement: values.arrangement ? Number(values.arrangement) : undefined,
                    is_default: values.is_default,
                })
                : api.taskSections.create({
                    title: values.title,
                    arrangement: values.arrangement ? Number(values.arrangement) : undefined,
                    is_default: values.is_default,
                })

            toast.promise(promise, {
                loading: isEditing ? "Updating..." : "Creating...",
                success: isEditing ? "Updated successfully" : "Created successfully",
                error: isEditing ? "Failed to update" : "Failed to create",
            })

            await promise
            form.reset()
            onSuccess?.()
        } catch {
            // toast already shown
        }
    }

    return (
        <Rhform form={form} onSubmit={handleSubmit}>
            <FieldGroup>
                <RhfTextField
                    name="title"
                    label="Title"
                    placeholder="e.g. Pre-Work"
                    required
                />
                <RhfTextField
                    name="arrangement"
                    label="Arrangement Order"
                    placeholder="e.g. 1"
                    type="number"
                />
                <RhfCheckboxField name="is_default" label="Set as default" />
                <Button type="submit" disabled={form.formState.isSubmitting}>
                    {isEditing ? <Save className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
                    {form.formState.isSubmitting
                        ? isEditing ? "Updating..." : "Creating..."
                        : isEditing ? "Update" : "Create"}
                </Button>
            </FieldGroup>
        </Rhform>
    )
}