"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Search, Menu, ArrowUpRight, X, Loader2 } from "lucide-react";
import { cva, type VariantProps } from "class-variance-authority";

const searchFormVariants = cva("w-full relative", {
  variants: {
    variant: {
      default: "max-w-2xl mx-auto",
      expanded: "max-w-3xl mx-auto",
      minimal: "max-w-md mx-auto",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

export interface SearchFormProps extends React.FormHTMLAttributes<HTMLFormElement>, VariantProps<typeof searchFormVariants> {
  onSearch?: (query: string, filters: Record<string, string>) => void;
  placeholder?: string;
  filters?: { label: string; value: string }[];
  recentSearches?: string[];
  loading?: boolean;
}

/**
 * SearchForm — a search input with filter chips and recent searches.
 *
 * @example
 * <SearchForm
 *   placeholder="Search components..."
 *   recentSearches={["Button", "Card"]}
 *   filters={[{ label: "Templates", value: "template" }]}
 *   onSearch={(query) => router.push("/search?q=" + query)}
 * />
 */
export function SearchForm({
  className,
  variant,
  onSearch,
  placeholder = "Search...",
  filters = [],
  recentSearches = [],
  loading = false,
  ...props
}: SearchFormProps) {
  const [query, setQuery] = React.useState("");
  const [isFocused, setIsFocused] = React.useState(false);
  const [showFilters, setShowFilters] = React.useState(variant === "expanded");
  const [selectedFilter, setSelectedFilter] = React.useState("");

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    onSearch?.(query, { filter: selectedFilter });
    setIsFocused(false);
  };

  const showRecent = isFocused && recentSearches.length > 0 && !query;

  return (
    <form 
      className={cn(searchFormVariants({ variant, className }))} 
      onSubmit={handleSubmit}
      {...props}
    >
      <div className="relative flex items-center w-full group focus-within:ring-2 focus-within:ring-primary/30 transition-all duration-200 rounded-full">
        {loading ? (
          <Loader2 className="absolute left-4 h-5 w-5 text-muted-foreground animate-spin" />
        ) : (
          <Search className="absolute left-4 h-5 w-5 text-muted-foreground" />
        )}
        <Input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setTimeout(() => setIsFocused(false), 200)}
          placeholder={placeholder}
          className="pl-12 pr-28 h-14 text-lg rounded-full shadow-sm border-muted-foreground/20 focus-visible:ring-0 focus-visible:ring-offset-0 border-none bg-background shadow-[0_0_0_1px_hsl(var(--border))]"
        />
        
        <div className="absolute right-2 flex items-center space-x-1">
          {query && (
            <Button
              type="button"
              variant="ghost"
              size="icon"
              className="h-10 w-10 rounded-full hover:bg-muted"
              onClick={() => {
                setQuery("");
                document.querySelector<HTMLInputElement>('input[type="text"]')?.focus();
              }}
            >
              <X className="h-4 w-4 text-muted-foreground" />
            </Button>
          )}
          {variant !== "minimal" && filters.length > 0 && (
            <Button
              type="button"
              variant={showFilters ? "secondary" : "ghost"}
              size="icon"
              className="h-10 w-10 rounded-full"
              onClick={() => setShowFilters(!showFilters)}
            >
              <Menu className="h-4 w-4" />
            </Button>
          )}
          <Button type="submit" size="sm" className="h-10 rounded-full px-6" disabled={loading}>
            Search
          </Button>
        </div>
      </div>

      {showFilters && variant !== "minimal" && filters.length > 0 && (
        <div className="mt-4 flex flex-wrap gap-2 px-2">
          {filters.map((filter) => (
            <Button
              key={filter.value}
              type="button"
              variant={selectedFilter === filter.value ? "default" : "outline"}
              size="sm"
              className="rounded-full transition-all"
              onClick={() => setSelectedFilter(selectedFilter === filter.value ? "" : filter.value)}
            >
              {filter.label}
            </Button>
          ))}
        </div>
      )}

      {showRecent && (
        <div className="absolute top-full left-0 right-0 mt-2 p-2 bg-background border rounded-xl shadow-lg z-50 animate-in fade-in slide-in-from-top-2 duration-200">
          <div className="text-xs font-semibold text-muted-foreground px-3 py-2 uppercase tracking-wider">
            Recent Searches
          </div>
          <div className="flex flex-col">
            {recentSearches.map((search, idx) => (
              <button
                key={idx}
                type="button"
                className="flex items-center px-3 py-2.5 text-sm hover:bg-muted rounded-lg text-left transition-colors"
                onClick={() => {
                  setQuery(search);
                  onSearch?.(search, { filter: selectedFilter });
                }}
              >
                <ArrowUpRight className="mr-3 h-4 w-4 text-muted-foreground" />
                {search}
              </button>
            ))}
          </div>
        </div>
      )}
    </form>
  );
}
Search Form
