"use client";

import { useState, type FormEvent, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Search } from "lucide-react";

interface SearchBarProps {
  className?: string;
  placeholder?: string;
  variant?: "default" | "large";
}

export default function SearchBar({
  className = "",
  placeholder = "Search products...",
  variant = "default",
}: SearchBarProps) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [query, setQuery] = useState("");

  // Initialize from URL or localStorage on mount
  useEffect(() => {
    const searchQuery = searchParams.get("search");
    const storedQuery =
      typeof window !== "undefined"
        ? localStorage.getItem("lastSearchQuery")
        : null;

    // Priority: URL param > localStorage > empty
    if (searchQuery) {
      setQuery(searchQuery);
      if (typeof window !== "undefined") {
        localStorage.setItem("lastSearchQuery", searchQuery);
      }
    } else if (storedQuery) {
      setQuery(storedQuery);
    }
  }, [searchParams]);

  // Update localStorage when query changes
  const handleQueryChange = (value: string) => {
    setQuery(value);
    if (typeof window !== "undefined") {
      localStorage.setItem("lastSearchQuery", value);
    }
  };

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    if (query.trim()) {
      router.push(`/search?search=${encodeURIComponent(query.trim())}`);
    }
  };

  const isLarge = variant === "large";

  return (
    <form
      onSubmit={handleSubmit}
      className={`relative w-full p-4 md:p-8 ${className}`}
    >
      <div className="relative">
        <input
          type="text"
          value={query}
          onChange={(e) => handleQueryChange(e.target.value)}
          placeholder={placeholder}
          className={`w-full text-black ${isLarge ? "py-3 pl-5 pr-12 text-base" : "py-2 pl-4 pr-10 text-sm"}
            bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent`}
        />
        <button
          type="submit"
          className={`absolute inset-y-0 right-0 flex items-center ${isLarge ? "px-4" : "px-3"} text-gray-500 hover:text-red-600`}
        >
          <Search className={isLarge ? "w-6 h-6" : "w-5 h-5"} />
        </button>
      </div>
    </form>
  );
}