"use client";

import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { RiSearchLine } from "@remixicon/react";
import { Button } from "../ui/button";

export default function SearchBar() {
  const router = useRouter();
  const [query, setQuery] = useState("");

  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault();
        document.getElementById("site-search")?.focus();
      }
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, []);

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const q = query.trim();
    if (!q) return;
    router.push(`/products?q=${encodeURIComponent(q)}`);
  }

  return (
    <form
      onSubmit={handleSubmit}
      className="w-full h-12 bg-surface-container-low dark:bg-surface-container-lowest rounded-full flex items-center px-4 border border-outline-variant transition-all focus-within:ring-2 focus-within:ring-primary focus-within:border-transparent"
    >
      <label htmlFor="site-search" className="sr-only">
        Search products
      </label>
      <input
        id="site-search"
        className="bg-transparent border-none outline-0 focus:ring-0 w-full text-body-md font-body-md placeholder:text-on-surface-variant"
        placeholder="Search products..."
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <Button type="submit" size="icon" aria-label="Search">
        <RiSearchLine className="text-primary-foreground" />
      </Button>
    </form>
  );
}