"use client";

import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useTranslation } from "react-i18next";
import { useForm, Controller } from "react-hook-form";
import { useRouter } from "next/router";
import { Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useCategory } from "@/context/helpers/category";
import { useMemo, useEffect } from "react";

// Header search bar with category select and text input
export default function SearchBar() {
  const { t, i18n } = useTranslation("header");
  const isArabic = i18n.language === "ar";
  const router = useRouter();
  const { categoryList, getCategories } = useCategory();

  // Fetch categories on mount
  useEffect(() => {
    getCategories();
  }, [getCategories]);

  // Prepare categories for the select dropdown
  const categoryOptions = useMemo(() => {
    if (!categoryList || !Array.isArray(categoryList)) return [];
    // Flatten nested categories if needed and filter out unwanted categories
    return categoryList.filter((cat) => {
      if (!cat.id || !cat.name) return false;
      const name = cat.name.toLowerCase().trim();
      // Exclude "main" and "13 products category name"
      if (name === "main" || name === "13 products category name") return false;
      return true;
    });
  }, [categoryList]);

  const { control, handleSubmit } = useForm({
    defaultValues: {
      keyword: router.query.keyword || "",
      category: router.query.category || "all",
    },
  });

  const onSubmit = (data) => {
    const { keyword, category } = data;

    if (!keyword || keyword.trim() === "") {
      return;
    }

    // Build query parameters
    const query = {};

    // Add category filter if not "all"
    if (category && category !== "all") {
      query.category = category;
    }

    // Navigate to search results page with query params
    router.push({
      pathname: `/search/${encodeURIComponent(keyword.trim())}`,
      query,
    });
  };

  // Handle Enter key press
  const handleKeyDown = (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      handleSubmit(onSubmit)();
    }
  };

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      className="flex bg-white border-[#336699] border-2 rounded-sm w-full sm:w-[556px] max-w-full sm:max-w-xl overflow-hidden"
    >
      {/* Category dropdown */}
      <Controller
        name="category"
        control={control}
        render={({ field }) => (
          <Select
            dir={isArabic ? "rtl" : "ltr"}
            value={field.value}
            onValueChange={field.onChange}
          >
            <SelectTrigger className="px-4 border-none rounded-none focus:outline-none focus:ring-0 w-40 text-gray-700">
              <SelectValue placeholder={t("search.allCategories")} />
            </SelectTrigger>
            <SelectContent className="max-h-64 overflow-y-auto">
              <SelectItem value="all">{t("search.allCategories")}</SelectItem>
              {categoryOptions.map((category) => (
                <SelectItem key={category.id} value={String(category.id)}>
                  {category.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        )}
      />

      {/* Divider */}
      <div className="bg-gray-300 my-2 w-px" />

      {/* Search input */}
      <div className="relative flex flex-1 items-center">
        <Controller
          name="keyword"
          control={control}
          render={({ field }) => (
            <Input
              {...field}
              type="text"
              placeholder={t("search.placeholder")}
              className="px-3 py-0 pr-10 border-none focus-visible:border-none rounded-none focus-visible:ring-0 focus-visible:ring-transparent text-gray-700"
              onKeyDown={handleKeyDown}
            />
          )}
        />
        <Button
          type="submit"
          size="icon"
          variant="ghost"
          className="right-0 absolute hover:bg-transparent px-3 focus:ring-0 focus:ring-transparent h-full cursor-pointer"
          aria-label={t("a11y.searchAlt")}
        >
          <Search className="w-5 h-5 text-mainColor" />
        </Button>
      </div>
    </form>
  );
}