EpicNext-Cms/src/components/admin/catalog/icon-picker.tsx

'use client'

import { Loader2, Package, Search, X } from 'lucide-react'
import { useCallback, useEffect, useRef, useState } from 'react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { cn } from '@/lib/utils'

interface IconPickerProps {
  value: number
  onChange: (iconImage: number) => void
  disabled?: boolean
  /** Optional trigger override. If not provided, a default button is rendered. */
  children?: React.ReactNode
}

const PAGE_SIZE = 120

export function IconPicker({ value, onChange, disabled, children }: IconPickerProps) {
  const [open, setOpen] = useState(false)
  const [search, setSearch] = useState('')
  const [debounced, setDebounced] = useState('')
  const [icons, setIcons] = useState<number[]>([])
  const [total, setTotal] = useState(0)
  const [loading, setLoading] = useState(false)
  const [offset, setOffset] = useState(0)
  const [hasMore, setHasMore] = useState(true)
  const scrollRef = useRef<HTMLDivElement>(null)

  // Debounce search
  useEffect(() => {
    const t = setTimeout(() => setDebounced(search.trim()), 250)
    return () => clearTimeout(t)
  }, [search])

  const fetchIcons = useCallback(
    async (nextOffset: number, replace: boolean) => {
      setLoading(true)
      try {
        const params = new URLSearchParams({
          limit: String(PAGE_SIZE),
          offset: String(nextOffset),
        })
        if (debounced) params.set('search', debounced)
        const res = await fetch(`/api/admin/catalog/icons?${params}`)
        if (!res.ok) throw new Error('Failed to load icons')
        const data = await res.json()
        const fetched: number[] = data.icons ?? []
        setTotal(data.total ?? 0)
        setHasMore(nextOffset + fetched.length < (data.total ?? 0))
        setIcons((prev) => (replace ? fetched : [...prev, ...fetched]))
        setOffset(nextOffset + fetched.length)
      } catch (err) {
        console.error('[IconPicker]', err)
      } finally {
        setLoading(false)
      }
    },
    [debounced],
  )

  // Reset and fetch on open / search change
  // biome-ignore lint/correctness/useExhaustiveDependencies: explicitly chosen here, see surrounding code
  useEffect(() => {
    if (!open) return
    setIcons([])
    setOffset(0)
    setHasMore(true)
    fetchIcons(0, true)
    if (scrollRef.current) scrollRef.current.scrollTop = 0
  }, [open, debounced, fetchIcons])

  const handleScroll = useCallback(() => {
    const el = scrollRef.current
    if (!el || loading || !hasMore) return
    if (el.scrollTop + el.clientHeight >= el.scrollHeight - 200) {
      fetchIcons(offset, false)
    }
  }, [loading, hasMore, offset, fetchIcons])

  const handleSelect = (id: number) => {
    onChange(id)
    setOpen(false)
  }

  const handleClear = () => {
    onChange(0)
    setOpen(false)
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        {children ?? (
          <Button
            type="button"
            variant="outline"
            disabled={disabled}
            className="h-auto gap-2 px-3 py-2"
          >
            <IconPreview iconImage={value} size={24} />
            <span className="font-mono text-xs text-muted-foreground">
              {value > 0 ? `#${value}` : 'None'}
            </span>
          </Button>
        )}
      </DialogTrigger>
      <DialogContent className="max-w-3xl">
        <DialogHeader>
          <DialogTitle>Select Catalog Icon</DialogTitle>
        </DialogHeader>

        <div className="flex items-center gap-2">
          <div className="relative flex-1">
            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search by icon ID..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="pl-9 pr-9"
              autoFocus
            />
            {search && (
              <button
                type="button"
                onClick={() => setSearch('')}
                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
              >
                <X className="h-4 w-4" />
              </button>
            )}
          </div>
          <Badge variant="secondary" className="shrink-0 tabular-nums">
            {total} icons
          </Badge>
          <Button type="button" variant="outline" size="sm" onClick={handleClear}>
            <Package className="mr-1.5 h-3.5 w-3.5" />
            None
          </Button>
        </div>

        <div
          ref={scrollRef}
          onScroll={handleScroll}
          className="h-[420px] overflow-y-auto rounded-md border bg-muted/20 p-2"
        >
          {icons.length === 0 && !loading && (
            <p className="py-16 text-center text-sm text-muted-foreground">No icons found</p>
          )}
          <div className="grid grid-cols-[repeat(auto-fill,minmax(56px,1fr))] gap-1.5">
            {icons.map((id) => (
              <button
                key={id}
                type="button"
                onClick={() => handleSelect(id)}
                className={cn(
                  'group relative flex aspect-square items-center justify-center rounded border bg-card p-1 transition-colors hover:border-primary hover:bg-accent',
                  value === id && 'border-primary ring-2 ring-primary/30',
                )}
                title={`Icon #${id}`}
              >
                <IconPreview iconImage={id} size={36} />
                <span className="absolute bottom-0 left-0 right-0 truncate bg-background/80 px-0.5 text-center font-mono text-[9px] leading-tight text-muted-foreground opacity-0 group-hover:opacity-100">
                  {id}
                </span>
              </button>
            ))}
          </div>
          {loading && (
            <div className="flex items-center justify-center py-4">
              <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  )
}

// ── Small preview component (inlined to avoid circular imports) ───────

function IconPreview({ iconImage, size = 24 }: { iconImage: number; size?: number }) {
  const [error, setError] = useState(false)
  // biome-ignore lint/correctness/useExhaustiveDependencies: explicitly chosen here, see surrounding code
  useEffect(() => setError(false), [iconImage])

  if (error || iconImage <= 0) {
    return (
      <Package className="shrink-0 text-muted-foreground" style={{ width: size, height: size }} />
    )
  }

  return (
    <img
      src={`/swf/c_images/catalogue/icon_${iconImage}.png`}
      alt=""
      width={size}
      height={size}
      className="shrink-0 object-contain"
      style={{ imageRendering: 'pixelated', maxWidth: size, maxHeight: size }}
      onError={() => setError(true)}
    />
  )
}