"use client"

import { useEffect, useMemo, useState } from "react"
import { Copy, Loader2, Plus, Search } from "lucide-react"
import {
  apiAssetUrl,
  copyProductLibraryAsset,
  listProductLibrary,
  type ImageRef,
  type ProductLibraryItem,
} from "@/lib/api"
import { toast } from "sonner"

interface ProductLibraryPickerProps {
  jobId: string
  onPick: (ref: ImageRef, item: ProductLibraryItem) => void
  disabled?: boolean
  buttonLabel?: string
  title?: string
  compact?: boolean
  maxItems?: number
  className?: string
}

export function ProductLibraryPicker({
  jobId,
  onPick,
  disabled = false,
  buttonLabel = "加入",
  title = "内置白底产品库",
  compact = false,
  maxItems,
  className = "",
}: ProductLibraryPickerProps) {
  const [items, setItems] = useState<ProductLibraryItem[]>([])
  const [loading, setLoading] = useState(false)
  const [query, setQuery] = useState("")
  const [productType, setProductType] = useState("all")
  const [addingId, setAddingId] = useState<string | null>(null)

  useEffect(() => {
    let alive = true
    setLoading(true)
    listProductLibrary()
      .then((next) => {
        if (alive) setItems(next)
      })
      .catch((e) => {
        if (alive) toast.error("产品库读取失败：" + (e instanceof Error ? e.message : String(e)))
      })
      .finally(() => {
        if (alive) setLoading(false)
      })
    return () => {
      alive = false
    }
  }, [])

  const productTypes = useMemo(() => {
    return Array.from(new Set(items.map((item) => item.product_type).filter(Boolean))).sort()
  }, [items])

  const filteredItems = useMemo(() => {
    const q = query.trim().toLowerCase()
    const next = items.filter((item) => {
      if (productType !== "all" && item.product_type !== productType) return false
      if (!q) return true
      const haystack = [
        item.title,
        item.handle,
        item.product_type,
        item.source_path,
        String(item.image_index),
      ].join(" ").toLowerCase()
      return haystack.includes(q)
    })
    return typeof maxItems === "number" ? next.slice(0, maxItems) : next
  }, [items, maxItems, productType, query])

  const handlePick = async (item: ProductLibraryItem) => {
    if (disabled || addingId) return
    setAddingId(item.id)
    try {
      const ref = await copyProductLibraryAsset(jobId, item.id)
      onPick(ref, item)
      toast.success(`已${buttonLabel}：${item.title}`)
    } catch (e) {
      toast.error("产品图加入失败：" + (e instanceof Error ? e.message : String(e)))
    } finally {
      setAddingId(null)
    }
  }

  return (
    <section className={`rounded-lg border border-amber-300/18 bg-amber-500/[0.07] p-2.5 ${className}`}>
      <div className="mb-2 flex items-center justify-between gap-2">
        <div className="text-[12px] font-semibold text-white">
          {title}
          <span className="ml-1.5 font-mono text-[10px] text-white/35">{filteredItems.length}/{items.length}</span>
        </div>
        {loading && <Loader2 className="h-3.5 w-3.5 animate-spin text-amber-200/80" />}
      </div>

      <div className={`mb-2 grid gap-1.5 ${compact ? "grid-cols-1" : "grid-cols-[1fr_150px]"}`}>
        <label className="relative block">
          <Search className="pointer-events-none absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-white/35" />
          <input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="搜索型号 / 品类"
            className="h-8 w-full rounded-md border border-white/10 bg-black/35 pl-7 pr-2 text-[11px] text-white outline-none placeholder:text-white/25 focus:border-amber-300/45"
          />
        </label>
        <select
          value={productType}
          onChange={(e) => setProductType(e.target.value)}
          className="h-8 rounded-md border border-white/10 bg-black/35 px-2 text-[11px] text-white/75 outline-none focus:border-amber-300/45"
        >
          <option value="all">全部品类</option>
          {productTypes.map((type) => (
            <option key={type} value={type}>{type}</option>
          ))}
        </select>
      </div>

      {loading ? (
        <div className="flex h-28 items-center justify-center rounded-md border border-white/10 bg-black/25 text-[11px] text-white/40">
          <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
          读取产品库
        </div>
      ) : filteredItems.length === 0 ? (
        <div className="rounded-md border border-dashed border-white/15 bg-black/25 px-3 py-6 text-center text-[11px] text-white/35">
          没有匹配的白底产品图
        </div>
      ) : (
        <div
          className={`grid gap-2 ${compact ? "max-h-80 overflow-y-auto pr-1" : ""}`}
          style={{ gridTemplateColumns: `repeat(auto-fill, minmax(${compact ? 104 : 132}px, 1fr))` }}
        >
          {filteredItems.map((item) => {
            const busy = addingId === item.id
            return (
              <div key={item.id} className="overflow-hidden rounded-md border border-white/10 bg-black/30">
                <div className="relative bg-white" style={{ aspectRatio: "1/1" }}>
                  <img
                    src={apiAssetUrl(item.url)}
                    alt={item.title}
                    className="absolute inset-0 h-full w-full object-contain"
                    loading="lazy"
                  />
                  <div className="absolute left-1 top-1 rounded bg-black/65 px-1 py-0.5 text-[8.5px] font-mono text-white">
                    {item.width}×{item.height}
                  </div>
                </div>
                <div className="space-y-1 border-t border-white/10 p-1.5">
                  <div className="truncate text-[10px] font-medium text-white/80" title={item.title}>
                    {item.title}
                  </div>
                  <div className="flex items-center justify-between gap-1">
                    <span className="truncate text-[9px] text-white/35" title={item.handle}>
                      #{item.image_index} · {item.product_type || "SKG"}
                    </span>
                    <button
                      type="button"
                      onClick={() => handlePick(item)}
                      disabled={disabled || !!addingId}
                      className="inline-flex h-7 min-w-12 items-center justify-center gap-1 rounded bg-amber-500/75 px-2 text-[10px] font-medium text-white transition hover:bg-amber-400 disabled:cursor-not-allowed disabled:opacity-40"
                      title={disabled ? "产品参考已满" : buttonLabel}
                    >
                      {busy ? <Loader2 className="h-3 w-3 animate-spin" /> : buttonLabel.includes("复制") ? <Copy className="h-3 w-3" /> : <Plus className="h-3 w-3" />}
                      {buttonLabel}
                    </button>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      )}
    </section>
  )
}