'use client';

import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Command } from 'cmdk';
import { RiSearchLine } from '@remixicon/react';
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
import { Loader } from '@/components/ui/loader';
import { getProducts, type Product } from '@/hooks/use-shopify-products';

interface SearchDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

const SearchDialog: React.FC<SearchDialogProps> = ({ open, onOpenChange }) => {
  const router = useRouter();
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(false);
  const [query, setQuery] = useState('');

  // Load the catalog once per open; cmdk filters it as the user types
  useEffect(() => {
    if (!open) {
      setQuery('');
      return;
    }

    let cancelled = false;
    setLoading(true);
    getProducts({ first: 100, sortKey: 'TITLE' })
      .then((data) => {
        if (!cancelled) setProducts(data);
      })
      .catch((err) => {
        console.error('Failed to load products for search:', err);
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });

    return () => {
      cancelled = true;
    };
  }, [open]);

  const handleSelect = (handle: string) => {
    onOpenChange(false);
    router.push(`/products/${handle}`);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl p-0 gap-0 overflow-hidden [&>button]:hidden">
        <DialogTitle className="sr-only">Search products</DialogTitle>
        <Command label="Search products">
          <div className="flex items-center gap-2 border-b border-gray-200 px-4">
            <RiSearchLine size={16} className="text-gray-400 shrink-0" />
            <Command.Input
              value={query}
              onValueChange={setQuery}
              placeholder="Search products..."
              className="h-12 w-full bg-transparent text-sm text-gray-900 outline-none placeholder:text-gray-400"
            />
          </div>
          <Command.List className="max-h-80 overflow-y-auto p-2">
            {loading ? (
              <div className="flex items-center justify-center py-8">
                <Loader size={20} />
              </div>
            ) : (
              <>
                <Command.Empty className="py-8 text-center text-sm text-gray-500">
                  No products found.
                </Command.Empty>
                {products.map((product) => {
                  const image = product.images.edges[0]?.node;
                  const price = product.priceRange.minVariantPrice;

                  return (
                    <Command.Item
                      key={product.id}
                      value={product.title}
                      onSelect={() => handleSelect(product.handle)}
                      className="flex cursor-pointer items-center gap-3 rounded-md px-2 py-2 text-sm data-[selected=true]:bg-gray-100"
                    >
                      <div className="w-10 h-10 bg-gray-100 overflow-hidden shrink-0">
                        {image && (
                          <img
                            src={image.url}
                            alt={image.altText || product.title}
                            className="w-full h-full object-cover"
                          />
                        )}
                      </div>
                      <span className="flex-1 truncate font-medium text-gray-900">
                        {product.title}
                      </span>
                      <span className="text-gray-500 shrink-0">
                        ${parseFloat(price.amount).toFixed(2)}
                      </span>
                    </Command.Item>
                  );
                })}
              </>
            )}
          </Command.List>
        </Command>
      </DialogContent>
    </Dialog>
  );
};

export default SearchDialog;