EpicNext-Cms/src/components/admin/catalog/quick-add-furni.tsx

"use client";

import { Loader2, Package, Search, Zap } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react";
import { toast } from "sonner";
import { createCatalogItem } from "@/actions/catalog-items";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { useServerAction } from "@/hooks/use-server-action";
import { getHabboCdnIconUrl, getLocalIconUrl } from "@/lib/furni/classname";

interface FurniResult {
  id: number;
  itemName: string;
  publicName: string;
  type: string;
  spriteId: number;
}

interface QuickAddFurniProps {
  pageId: number;
  furniRevisionMap: Record<number, { classname: string; revision: number }>;
}

export function QuickAddFurni({ pageId, furniRevisionMap }: QuickAddFurniProps) {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [debounced, setDebounced] = useState("");
  const [results, setResults] = useState<FurniResult[]>([]);
  const [loading, setLoading] = useState(false);
  const { run, isPending } = useServerAction();
  const inputRef = useRef<HTMLInputElement>(null);

  // Keyboard shortcut: Ctrl+K / Cmd+K
  useEffect(() => {
    function onKeyDown(e: KeyboardEvent) {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        const tag = (e.target as HTMLElement)?.tagName;
        if (tag === "INPUT" || tag === "TEXTAREA") return;
        e.preventDefault();
        setOpen(true);
      }
    }
    document.addEventListener("keydown", onKeyDown);
    return () => document.removeEventListener("keydown", onKeyDown);
  }, []);

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

  // Focus input when opened
  useEffect(() => {
    if (open) setTimeout(() => inputRef.current?.focus(), 50);
  }, [open]);

  // Fetch results
  useEffect(() => {
    if (!open || debounced.length < 2) {
      setResults([]);
      return;
    }
    setLoading(true);
    const ac = new AbortController();
    fetch(`/api/admin/furni/search?q=${encodeURIComponent(debounced)}&limit=30`, {
      signal: ac.signal,
    })
      .then((r) => r.json())
      .then((data) => setResults(data.results ?? []))
      .catch(() => {})
      .finally(() => setLoading(false));
    return () => ac.abort();
  }, [debounced, open]);

  const handleAdd = useCallback(
    (base: FurniResult) => {
      run(
        () =>
          createCatalogItem({
            pageId,
            itemIds: String(base.id),
            catalogName: base.publicName || base.itemName,
            costCredits: 0,
            costPoints: 0,
            pointsType: 0,
            amount: 1,
            limitedSells: 0,
            limitedStack: 0,
            orderNumber: 1,
            offerId: -1,
            songId: 0,
            haveOffer: "1",
            clubOnly: "0",
            extradata: "",
          }),
        {
          successMessage: `Added "${base.publicName || base.itemName}" to page.`,
          errorMessage: "Failed to add item.",
          onSuccess: () => {
            toast.success(`Added #${base.id}`);
          },
        },
      );
    },
    [pageId, run],
  );

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" size="sm">
          <Zap className="mr-2 h-4 w-4" />
          Quick Add
          <kbd className="ml-2 hidden rounded border bg-muted px-1 text-[10px] sm:inline">Ctrl+K</kbd>
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>Quick Add Furni</DialogTitle>
        </DialogHeader>

        <div className="relative">
          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            ref={inputRef}
            placeholder="Search by item name or public name..."
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            className="pl-9"
          />
          {loading && (
            <Loader2 className="absolute right-2.5 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" />
          )}
        </div>

        <div className="max-h-[420px] overflow-y-auto rounded-md border">
          {debounced.length < 2 ? (
            <p className="py-8 text-center text-sm text-muted-foreground">
              Type at least 2 characters to search
            </p>
          ) : results.length === 0 && !loading ? (
            <p className="py-8 text-center text-sm text-muted-foreground">
              No furni found for &quot;{debounced}&quot;
            </p>
          ) : (
            <div className="divide-y">
              {results.map((r) => {
                const furni = furniRevisionMap[r.id];
                return (
                  <button
                    key={r.id}
                    type="button"
                    onClick={() => handleAdd(r)}
                    disabled={isPending}
                    className="flex w-full items-center gap-3 px-3 py-2 text-left hover:bg-accent disabled:opacity-50"
                  >
                    <FurniThumb classname={furni?.classname ?? r.itemName} revision={furni?.revision ?? 0} />
                    <div className="min-w-0 flex-1">
                      <p className="truncate text-sm font-medium">
                        {r.publicName || <span className="italic text-muted-foreground">{r.itemName}</span>}
                      </p>
                      <p className="truncate font-mono text-[11px] text-muted-foreground">
                        #{r.id} · {r.itemName} · {r.type}
                      </p>
                    </div>
                    <span className="shrink-0 text-xs text-muted-foreground">Add →</span>
                  </button>
                );
              })}
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}

function FurniThumb({ classname, revision }: { classname: string; revision: number }) {
  if (!classname) {
    return (
      <div className="flex h-10 w-10 items-center justify-center rounded bg-muted">
        <Package className="h-4 w-4 text-muted-foreground" />
      </div>
    );
  }
  const primary = getLocalIconUrl(classname);

  function handleError(e: React.SyntheticEvent<HTMLImageElement>) {
    const img = e.target as HTMLImageElement;
    if (!img.dataset.fallback && revision > 0) {
      img.dataset.fallback = "cdn";
      img.src = getHabboCdnIconUrl(classname, revision);
    } else {
      img.style.opacity = "0";
    }
  }

  return (
    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded bg-muted/50">
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={primary}
        alt={classname}
        className="max-h-full max-w-full object-contain"
        style={{ imageRendering: "pixelated" }}
        onError={handleError}
        loading="lazy"
      />
    </div>
  );
}