// DynamicSelectField — async, searchable single-select for declarative forms.
//
// This is the declarative answer to "I don't want to type a raw FK UUID".
// Instead of a plain <select> that dumps every option (RefSelect) or a free
// text input, it renders a typeahead combobox that queries the canonical
// options endpoint as the user types:
//
//   GET /api/options/<ref>?field=id&q=<text>&limit=<n>
//
// reusing `useOptionsResolver` (which already debounce-aborts in-flight
// requests). It is the metacore equivalent of 7leguas' `search.go` / dynamic
// `type: search` field, but driven entirely from the manifest — so an addon
// declares `type: "dynamic_select"` + `ref` and gets a searchable picker with
// zero custom React.
//
// Resolution path (highest priority first):
//   1. field.ref          → /options/<ref>?field=id        (canonical, preferred)
//   2. field.searchEndpoint→ used verbatim as the options endpoint (escape hatch)
//
// Edit-mode caveat: resolving an EXISTING value's label requires the id to be
// in a fetched page (we match by id against loaded options, else show the raw
// value). A dedicated `?ids=` lookup is a follow-up; create flows — the common
// case — start empty and never hit this.
import { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
    Badge,
    Button,
    Command,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
    Popover,
    PopoverContent,
    PopoverTrigger,
    InitialsAvatar,
} from '@asteby/metacore-ui/primitives'
import { Check, ChevronsUpDown, Loader2, Plus, ScanLine } from 'lucide-react'
import { resolveColorCss } from '@asteby/metacore-ui/lib'
import { BarcodeScanner } from './barcode-scanner'
import { DynamicIcon, isLucideIconName } from './dynamic-icon'
import { useDebouncedValue } from './use-debounced-value'
import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
import { getDependsOn, getFieldRef, resolveOptionsSource } from './dynamic-form-schema'
import type { ActionFieldDef } from './types'

/**
 * Default hint shown when a cascading picker's depended-on field is still
 * empty. Domain-neutral on purpose; a caller may override it per field via
 * `dependsHint`.
 */
export const DEFAULT_DEPENDS_HINT = 'Selecciona primero el campo del que depende'

/**
 * Small square thumbnail for an option's `image`. When the option has no image
 * it falls back to a deterministic initials avatar (shared `InitialsAvatar`)
 * derived from `name`, so an imageless reference reads as a colored badge rather
 * than an empty placeholder — and rows/triggers stay aligned. `size` is in
 * pixels (kept small — 20–24px — so the picker reads as a list, not a gallery).
 * Inline style for the box dimensions: arbitrary Tailwind classes from a
 * federated addon don't always survive the host's class scan.
 */
export function OptionThumb({
    image,
    name,
    size = 20,
}: {
    image?: string | null
    name?: string | null
    size?: number
}) {
    const [broken, setBroken] = useState(false)
    const box = { width: size, height: size }
    // Missing or 404 image (bare avatar filenames often 404) → initials, never
    // an invisible box that looks like "no avatar".
    if (!image || broken) {
        return <InitialsAvatar name={name} size={size} rounded="sm" tone="neutral" />
    }
    // A lucide icon name stored where an image url/path is expected (the `icon`
    // form widget's icon mode) → render the glyph instead of a broken <img>.
    if (isLucideIconName(image)) {
        return (
            <span className="flex shrink-0 items-center justify-center rounded-sm bg-muted" style={box} aria-hidden>
                <DynamicIcon name={image} className="size-4" />
            </span>
        )
    }
    return (
        <img
            src={image}
            alt=""
            aria-hidden
            loading="lazy"
            className="shrink-0 rounded-sm object-cover"
            style={box}
            onError={() => setBroken(true)}
        />
    )
}

/**
 * Leading visual for an option: a photo thumbnail (FK relations with an image),
 * else a declared icon, else a color dot (enum/status options with a color).
 * Returns null when the option carries none, so plain text options stay plain.
 */
export function OptionLead({
    option,
    size = 20,
}: {
    option?: Pick<ResolvedOption, 'image' | 'color' | 'icon' | 'label'> | null
    size?: number
}) {
    if (!option) return null
    if (option.image) return <OptionThumb image={option.image} name={option.label} size={size} />
    if (option.icon) {
        return (
            <span
                className="flex shrink-0 items-center justify-center"
                style={{ width: size, height: size, color: option.color ? resolveColorCss(option.color) : undefined }}
                aria-hidden
            >
                <DynamicIcon name={option.icon} className="size-4" />
            </span>
        )
    }
    if (option.color) {
        return (
            <span
                className="shrink-0 rounded-full"
                style={{ width: Math.round(size * 0.5), height: Math.round(size * 0.5), background: resolveColorCss(option.color) }}
                aria-hidden
            />
        )
    }
    // No image/icon/color: an imageless reference option. Show its initials
    // (shared InitialsAvatar) so it stays visually aligned with the sibling
    // options that DO carry a thumbnail, rather than a blank gap.
    if (option.label) return <InitialsAvatar name={option.label} size={size} rounded="sm" tone="neutral" />
    return null
}

function useDebounced<T>(value: T, ms: number): T {
    return useDebouncedValue(value, ms)
}

export interface DynamicSelectFieldProps {
    field: ActionFieldDef
    value: any
    onChange: (v: any) => void
    /**
     * Pre-resolved option for the CURRENT value (label + image/color/icon) the
     * caller already has — e.g. the relation sibling the table served. Lets the
     * trigger show the name + thumbnail for an existing value without waiting for
     * a lookup (which only loads once the popover opens). Matched by id == value.
     */
    seedOption?: ResolvedOption | null
    /**
     * Cascade scope: the current value of the field this picker `dependsOn`
     * (the caller resolves it from the form context). Forwarded as
     * `filter_value`. When the field declares a `dependsOn` and this is empty,
     * the picker is disabled with `dependsHint` and the current selection is
     * cleared. Changing it re-fetches and clears the selection.
     */
    dependsValue?: string
    /** Overrides the disabled-state hint shown while `dependsValue` is empty. */
    dependsHint?: string
    /**
     * Renders the picker as a locked, non-interactive display of the current
     * value's resolved label (no popover, no inline-create). Used when the value
     * is fixed by context — e.g. the product of a receive-goods line is dictated
     * by the source document, not chosen. Options are fetched eagerly (not just
     * on open) so the label resolves to the NAME instead of showing the raw id.
     */
    readonly?: boolean
    /**
     * Caller-owned options (e.g. warehouses filtered by available stock for a
     * dispatch line). When set, skips `/options` and filters these client-side
     * by the search box. Federated process modals use this so they share the
     * same DynamicSelect chrome without reinventing a lighter picker.
     */
    staticOptions?: readonly ResolvedOption[] | null
    /**
     * Render `option.description` as a trailing Badge (stock, codes, …) instead
     * of the default muted subtitle under the label.
     */
    descriptionAsBadge?: boolean
    /**
     * Hide the inline "+" create affordance even when `field.ref` is set.
     * Useful for static / filtered lists where creating a new record is not
     * meaningful in context.
     */
    hideCreate?: boolean
    /**
     * Pre-filled values for the record the inline "+" creates, forwarded to
     * the host's create modal via the `metacore:create-record` event.
     * Generic: any model, any fields (e.g. a mechanic picker seeding
     * `{ role: 'mecanico' }` on a new team user).
     */
    createDefaults?: Record<string, unknown>
    /**
     * Fields of the inline-created record the user must NOT change — the
     * host's create modal renders them locked. Pairs with `createDefaults`.
     */
    createLockedFields?: string[]
    /** Paint trigger with destructive border when validation failed. */
    invalid?: boolean
}

export function DynamicSelectField({
    field,
    value,
    onChange,
    seedOption,
    dependsValue,
    dependsHint,
    readonly = false,
    staticOptions = null,
    descriptionAsBadge = false,
    hideCreate = false,
    createDefaults,
    createLockedFields,
    invalid = false,
}: DynamicSelectFieldProps) {
    const { t } = useTranslation()
    const ph = (fallback: string) =>
        field.placeholder ? t(field.placeholder, { defaultValue: field.placeholder }) : fallback
    const [open, setOpen] = useState(false)
    const [search, setSearch] = useState('')
    const [scanOpen, setScanOpen] = useState(false)
    const debounced = useDebounced(search, 250)

    // Escaneo por cámara para "llenar rápido": opt-in por campo (`scan`). El
    // botón aparece SIEMPRE que el campo lo declara (igual que el POS), sin
    // esconderse por `isCameraScanSupported()` — en escritorio el botón no salía
    // aunque el campo lo pidiera. El BarcodeScanner ya degrada con un mensaje
    // cuando no hay cámara. Un código escaneado alimenta la búsqueda y abre el
    // picker para elegir la referencia sin tipear el UUID.
    const scanEnabled = !!(field.scan ?? field.scannable)
    const handleScanDetected = (code: string) => {
        setSearch(code)
        setOpen(true)
    }
    // Remember the label of the option the user actually picked so the trigger
    // shows a name (not a UUID) without a round-trip.
    const [picked, setPicked] = useState<ResolvedOption | null>(null)

    // Tolerate the snake_case `source`/`relation` aliases the kernel may serve
    // for the FK target, not just camelCase `ref`.
    const fieldRef = getFieldRef(field)

    // Options routing: an `optionsConfig.source` (dependent/scoped picker) wins
    // over the field's `ref` — query the SOURCE model with `field=<value>`;
    // otherwise keep the canonical `ref`-based resolution.
    const source = resolveOptionsSource(field)

    // Cascade: a `dependsOn` field whose value is still empty leaves this
    // picker disabled until the parent is set. `dependsValue` is the resolved
    // value the caller threaded from the form context.
    const dependsOn = getDependsOn(field)
    const scope = dependsValue ? String(dependsValue) : ''
    const blockedByDependency = !!dependsOn && scope === ''

    const useStatic = Array.isArray(staticOptions)

    const { options: fetchedOptions, loading: fetchLoading } = useOptionsResolver({
        modelKey: '',
        fieldKey: source.fieldKey,
        ref: source.ref,
        // optionsConfig.source → `/options/<source>`. Else searchEndpoint only
        // drives the URL when there's no ref — ref is the canonical,
        // kernel-derived path and wins.
        endpoint: source.endpoint ?? (source.ref ? undefined : field.searchEndpoint),
        query: debounced,
        limit: 20,
        // Cascade scope forwarded as filter_value (only when this field
        // declares a dependency). Re-fetches when the parent value changes.
        filterValue: dependsOn ? scope : undefined,
        // Don't fetch until the popover opens (and keep fetching as the query
        // changes while open). A picker blocked by an unset dependency never
        // fetches. A readonly cell fetches eagerly so its value's label resolves
        // to the name without the user ever opening it.
        // Static lists never hit the network.
        enabled: !useStatic && (open || readonly) && !blockedByDependency,
    })

    const options = useStatic
        ? (staticOptions as ResolvedOption[]).filter((o) => {
              if (!debounced) return true
              const q = debounced.toLowerCase()
              return (
                  String(o.label ?? '').toLowerCase().includes(q) ||
                  String(o.description ?? '').toLowerCase().includes(q)
              )
          })
        : fetchedOptions
    const loading = useStatic ? false : fetchLoading

    // When the depended-on value changes, the previously-picked option no longer
    // belongs to the new scope, so clear the selection (skip the initial mount).
    const prevScopeRef = useRef<string>(scope)
    useEffect(() => {
        if (!dependsOn) return
        if (prevScopeRef.current !== scope) {
            prevScopeRef.current = scope
            setPicked(null)
            if (value) onChange('')
        }
    }, [dependsOn, scope, value, onChange])

    // The currently-selected option, resolved either from what the user picked
    // (cached in `picked`) or from the loaded page. Drives both the trigger
    // label and its thumbnail.
    const selectedOption =
        (picked && String(picked.id) === String(value) ? picked : null) ??
        options.find((o) => String(o.id) === String(value)) ??
        (seedOption && String(seedOption.id) === String(value) ? seedOption : null) ??
        null

    const selectedLabel = selectedOption?.label ?? (value ? String(value) : '')

    // Only switch the picker into "with thumbnails" mode when the data actually
    // carries images — a relation whose options have no `image` keeps the plain
    // text list it had before (no empty placeholder column).

    const handlePick = (opt: ResolvedOption) => {
        setPicked(opt)
        onChange(String(opt.id))
        setOpen(false)
        setSearch('')
    }

    // Inline-create: the "+" opens the REFERENCED model's own create modal (the
    // real one the host renders for that model — full fields, not a duplicate),
    // via a decoupled window event the host listens for. On success the host
    // hands back the new record and we select it immediately. No host import →
    // no circular dependency; works for ANY dynamic_select with a `ref`.
    const openCreate = () => {
        if (!fieldRef || typeof window === 'undefined') return
        window.dispatchEvent(
            new CustomEvent('metacore:create-record', {
                detail: {
                    model: fieldRef,
                    // Generic passthrough: the host's create modal seeds these
                    // values and locks these fields (DynamicRecordDialog's own
                    // defaults/lockedFields props). Undefined when unused.
                    defaults: createDefaults,
                    lockedFields: createLockedFields,
                    onCreated: (rec: any) => {
                        if (rec && rec.id != null) {
                            const id = String(rec.id)
                            const label = String(rec.name ?? rec.label ?? rec.title ?? rec.id)
                            handlePick({ id, value: id, label, name: label })
                        }
                    },
                },
            }),
        )
    }

    // Locked display: the value is fixed by context, so render the resolved
    // label (name) as a disabled control — no popover, no inline-create. While
    // the eager fetch is in flight the label falls back to the seed/raw value,
    // then snaps to the name once options arrive.
    if (readonly) {
        return (
            <Button
                type="button"
                variant="outline"
                role="combobox"
                id={field.key}
                disabled
                aria-readonly="true"
                className="w-full min-w-0 cursor-default justify-start font-normal opacity-100"
            >
                <span className="flex min-w-0 flex-1 items-center gap-2 text-left">
                    {selectedOption ? <OptionLead option={selectedOption} size={20} /> : null}
                    <span className={'min-w-0 flex-1 truncate ' + (selectedOption ? '' : 'text-muted-foreground')}>
                        {/* Never flash the raw id: until the eager fetch resolves the
                            option, show a loading hint instead of String(value). */}
                        {selectedOption?.label ?? (loading ? 'Cargando…' : ph('—'))}
                    </span>
                </span>
            </Button>
        )
    }

    // w-full + min-w-0: as a grid cell child, the row must be allowed to shrink
    // to the cell. Without min-w-0 the combobox+button row sizes to its content
    // (the long empty-state placeholder) and overflows the column, pushing the
    // "+" off-screen — it only "fit" once a short value was selected.
    return (
        <div className="flex w-full min-w-0 items-center gap-1.5">
            <Popover open={open && !blockedByDependency} onOpenChange={(o: boolean) => { if (!blockedByDependency) setOpen(o) }}>
            <PopoverTrigger asChild>
                <Button
                    type="button"
                    variant="outline"
                    role="combobox"
                    aria-expanded={open}
                    id={field.key}
                    disabled={blockedByDependency}
                    aria-invalid={invalid || undefined}
                    className={
                        'min-w-0 flex-1 justify-between font-normal' +
                        (invalid ? ' border-destructive ring-1 ring-destructive/30' : '')
                    }
                    data-empty={!value}
                    data-depends-blocked={blockedByDependency ? '' : undefined}
                >
                    <span className="flex min-w-0 flex-1 items-center gap-2 text-left">
                        {value && selectedOption ? (
                            <OptionLead option={selectedOption} size={20} />
                        ) : null}
                        <span className={'min-w-0 flex-1 truncate ' + (selectedLabel ? '' : 'text-muted-foreground')}>
                            {blockedByDependency
                                ? (dependsHint || DEFAULT_DEPENDS_HINT)
                                : selectedLabel || ph('Buscar…')}
                        </span>
                        {descriptionAsBadge && selectedOption?.description ? (
                            <Badge variant="secondary" className="shrink-0 font-normal tabular-nums">
                                {selectedOption.description}
                            </Badge>
                        ) : null}
                    </span>
                    <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
                </Button>
            </PopoverTrigger>
            <PopoverContent
                className="p-0"
                align="start"
                // Match the trigger width without an arbitrary Tailwind class
                // (those don't always survive a consuming app's Tailwind scan).
                style={{ width: 'var(--radix-popover-trigger-width)' }}
            >
                <Command shouldFilter={false}>
                    <CommandInput
                        placeholder={ph('Buscar…')}
                        value={search}
                        onValueChange={setSearch}
                    />
                    <CommandList>
                        {loading && (
                            <div className="text-muted-foreground flex items-center justify-center gap-2 py-6 text-sm">
                                <Loader2 className="size-4 animate-spin" />
                                Buscando…
                            </div>
                        )}
                        {!loading && options.length === 0 && (
                            <CommandEmpty>
                                {useStatic
                                    ? debounced
                                        ? 'Sin resultados'
                                        : 'Sin opciones'
                                    : debounced
                                      ? 'Sin resultados'
                                      : 'Sin resultados — escribe para filtrar'}
                            </CommandEmpty>
                        )}
                        {!loading && options.length > 0 && (
                            <CommandGroup className="max-h-64 overflow-auto">
                                {options.map((opt) => {
                                    const isSel = String(opt.id) === String(value)
                                    return (
                                        <CommandItem
                                            key={String(opt.id)}
                                            value={String(opt.id)}
                                            onSelect={() => handlePick(opt)}
                                        >
                                            <Check className={'mr-2 size-4 shrink-0 ' + (isSel ? 'opacity-100' : 'opacity-0')} />
                                            <OptionLead option={opt} size={24} />
                                            {descriptionAsBadge ? (
                                                <div className="ml-2 flex min-w-0 flex-1 items-center gap-2">
                                                    <span className="min-w-0 flex-1 truncate">{opt.label}</span>
                                                    {opt.description ? (
                                                        <Badge variant="secondary" className="shrink-0 font-normal tabular-nums">
                                                            {opt.description}
                                                        </Badge>
                                                    ) : null}
                                                </div>
                                            ) : (
                                                <div className="ml-2 flex min-w-0 flex-col">
                                                    <span className="truncate">{opt.label}</span>
                                                    {opt.description && (
                                                        <span className="text-muted-foreground truncate text-xs">
                                                            {opt.description}
                                                        </span>
                                                    )}
                                                </div>
                                            )}
                                        </CommandItem>
                                    )
                                })}
                            </CommandGroup>
                        )}
                    </CommandList>
                </Command>
            </PopoverContent>
            </Popover>
            {scanEnabled && (
                <Button
                    type="button"
                    variant="outline"
                    size="icon"
                    className="size-9 shrink-0"
                    onClick={() => setScanOpen(true)}
                    title="Escanear con la cámara"
                    aria-label="Escanear código de barras con la cámara"
                >
                    <ScanLine className="size-4" />
                </Button>
            )}
            {fieldRef && !hideCreate && !useStatic && (
                <Button
                    type="button"
                    variant="outline"
                    size="icon"
                    className="size-9 shrink-0"
                    onClick={openCreate}
                    title={`Crear ${field.label ?? fieldRef}`}
                    aria-label={`Crear ${field.label ?? fieldRef}`}
                >
                    <Plus className="size-4" />
                </Button>
            )}
            {scanEnabled && (
                <BarcodeScanner
                    open={scanOpen}
                    onClose={() => setScanOpen(false)}
                    onDetected={handleScanDetected}
                    continuous={false}
                    position="fixed"
                    title={`Escanear ${field.label ?? ''}`.trim()}
                />
            )}
        </div>
    )
}

export default DynamicSelectField