"use client"

import { useRef, useState } from "react"
import { useFormContext, useController, type FieldValues, type FieldPath } from "react-hook-form"
import { useQuery, useQueryClient } from "@tanstack/react-query"
import { Car, Loader2, PlusIcon } from "lucide-react"
import { useAuthApi } from "@/shared/useApi"
import { VEHICLE_ROUTES } from "@garage/api"
import { Field, FieldLabel, FieldError, FieldDescription } from "@/shared/components/ui/field"
import { Button } from "@/shared/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog"
import { ScrollArea } from "@/shared/components/ui/scroll-area"
import {
    Combobox,
    ComboboxInput,
    ComboboxContent,
    ComboboxList,
    ComboboxItem,
    ComboboxEmpty,
} from "@/shared/components/ui/combobox"
import Image from "next/image"
import { VehicleForm } from "./vehicle-form"

// ── Vehicle option type (enriched for display) ──

type VehicleOption = {
    value: string
    label: string
    make?: string
    model?: string
    year?: string
    sub_model?: string
    license_plate?: string
    image_url?: string
    mileage?: string
}

function buildVehicleOption(item: any): VehicleOption {
    const label =
        [item.year, item.make, item.model].filter(Boolean).join(" ") ||
        `Vehicle #${item.id}`
    return {
        value: String(item.id),
        label,
        make: item.make,
        model: item.model,
        year: item.year,
        sub_model: item.sub_model,
        license_plate: item.license_plate,
        image_url: item.image_url,
        mileage: item.mileage,
    }
}

function VehicleThumb({ src }: { src?: string }) {
    const [broken, setBroken] = useState(false)
    if (!src || broken) {
        return (
            <div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground border border-border">
                <Car className="size-4" />
            </div>
        )
    }
    return (
        <Image
            height={60}
            width={60}
            src={src}
            alt=""
            onError={() => setBroken(true)}
            className="size-9 shrink-0 rounded-md object-cover border border-border"
        />
    )
}

function extractItems(response: unknown): any[] {
    if (Array.isArray(response)) return response
    const obj = response as any
    if (Array.isArray(obj?.data?.data)) return obj.data.data
    if (Array.isArray(obj?.data)) return obj.data
    return []
}

// ── Props ──

export type RhfVehicleSelectFieldProps<
    TValues extends FieldValues,
    TName extends FieldPath<TValues>,
> = {
    name: TName
    label?: string
    description?: string
    required?: boolean
    disabled?: boolean
    placeholder?: string
    customer_id?: string | null
}

// ── Component ──

export function RhfVehicleSelectField<
    TValues extends FieldValues,
    TName extends FieldPath<TValues>,
>({
    name,
    label = "Vehicle",
    description,
    required,
    disabled,
    placeholder = "Search by make, model, year, or plate...",
    customer_id,
}: RhfVehicleSelectFieldProps<TValues, TName>) {
    const api = useAuthApi()
    const anchorRef = useRef<HTMLDivElement>(null)
    const [inputValue, setInputValue] = useState("")
    const [isCreateOpen, setIsCreateOpen] = useState(false)
    const queryClient = useQueryClient()

    const { control } = useFormContext<TValues>()
    const {
        field,
        fieldState: { error },
    } = useController({ name, control, disabled })

    const { data: options = [], isLoading } = useQuery<VehicleOption[]>({
        queryKey: [VEHICLE_ROUTES.INDEX, "vehicle-select", customer_id],
        queryFn: async () => {
            const res = await api.vehicles.list({ customer_id: customer_id || undefined })
            return extractItems(res).map(buildVehicleOption)
        },
        staleTime: 5 * 60 * 1000,
    })

    const filtered = inputValue
        ? options.filter((v) =>
              [v.year, v.make, v.model, v.sub_model, v.license_plate]
                  .filter(Boolean)
                  .join(" ")
                  .toLowerCase()
                  .includes(inputValue.toLowerCase()),
          )
        : options

    const handleCreateSuccess = (data?: any) => {
        const item = data?.data ?? data
        if (item?.id) {
            field.onChange(buildVehicleOption(item))
        }
        queryClient.invalidateQueries({ queryKey: [VEHICLE_ROUTES.INDEX, "vehicle-select"] })
        setIsCreateOpen(false)
    }

    const combobox = (
        <div ref={anchorRef}>
                  <Combobox
                    value={field.value}
                    onValueChange={(val: VehicleOption | VehicleOption[] | null) => {
                        const single = Array.isArray(val) ? val[0] ?? null : val
                        // Store only { value, label } to stay compatible with relationFieldSchema
                        field.onChange(
                            single ? { value: single.value, label: single.label } : null,
                        )
                    }}
                    disabled={field.disabled}
                    onInputValueChange={(val: string, { reason }: { reason: string }) => {
                        if (reason === "input-change") setInputValue(val)
                    }}
                    // Compare by id string so the selected item highlights correctly
                    // even when the stored form value has fewer fields than VehicleOption
                    isItemEqualToValue={(item: VehicleOption, val: any) =>
                        item?.value === val?.value
                    }
                >
                    <ComboboxInput
                        placeholder={placeholder}
                        showClear={!!field.value}
                        onBlur={field.onBlur}
                        aria-invalid={!!error || undefined}
                    />
                    <ComboboxContent anchor={anchorRef}>
                        <ComboboxList>
                            {isLoading && (
                                <div className="flex items-center justify-center py-6">
                                    <Loader2 className="size-4 animate-spin text-muted-foreground" />
                                </div>
                            )}

                            {!isLoading &&
                                filtered.map((opt) => (
                                    <ComboboxItem key={opt.value} value={opt}>
                                        <div className="flex items-center gap-3 py-0.5 w-full min-w-0">
                                            <VehicleThumb src={opt.image_url} />

                                            {/* Identity */}
                                            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                                                <span className="truncate text-sm font-medium leading-none">
                                                    {[opt.year, opt.make, opt.model]
                                                        .filter(Boolean)
                                                        .join(" ")}
                                                    {opt.sub_model && (
                                                        <span className="ml-1 font-normal text-muted-foreground">
                                                            {opt.sub_model}
                                                        </span>
                                                    )}
                                                </span>
                                                {opt.license_plate && (
                                                    <span className="font-mono text-xs text-muted-foreground">
                                                        {opt.license_plate}
                                                    </span>
                                                )}
                                            </div>

                                       
                                        </div>
                                    </ComboboxItem>
                                ))}

                            {!isLoading && filtered.length === 0 && (
                                <ComboboxEmpty>No vehicles found</ComboboxEmpty>
                            )}
                        </ComboboxList>
                    </ComboboxContent>
                </Combobox>
            </div>
    )

    return (
        <Field data-invalid={!!error?.message || undefined}>
            {label && (
                <div className="flex items-center justify-between">
                    <FieldLabel>
                        {label}
                        {required && <span className="text-destructive ms-0.5">*</span>}
                    </FieldLabel>
                    <Button
                        type="button"
                        size="icon"
                        variant="ghost"
                        className="h-5 w-5"
                        onClick={() => setIsCreateOpen(true)}
                        title={`Add new ${label}`}
                    >
                        <PlusIcon className="h-3.5 w-3.5" />
                    </Button>
                </div>
            )}
            {combobox}
            {description && <FieldDescription>{description}</FieldDescription>}
            {error?.message && <FieldError>{error.message}</FieldError>}

            <Dialog open={isCreateOpen} onOpenChange={(v) => { if (!v) setIsCreateOpen(false) }}>
                <DialogContent className="min-w-xl">
                    <DialogHeader>
                        <DialogTitle className="text-2xl font-bold">
                            Add {label}
                        </DialogTitle>
                     </DialogHeader>
                    <ScrollArea className="max-h-[80vh] px-4">
                        <VehicleForm onSuccess={handleCreateSuccess} />
                    </ScrollArea>
                </DialogContent>
            </Dialog>
        </Field>
    )
}