"use client";

import { useState, useRef, useTransition } from "react";
import { useRouter } from "next/navigation";
import { useLocale, useTranslations } from "next-intl";
import { Search, Loader2, Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";

const SUGGESTIONS_FA = [
  "کافه آروم با وای‌فای خوب مناسب کار",
  "کافه لوکس مناسب قرار دونفره",
  "رستوران سنتی با فضای خانوادگی",
  "کافه با نور طبیعی و صبحانه خوب",
  "کافه پت‌فرندلی در تهران",
];

const SUGGESTIONS_EN = [
  "quiet cafe with good WiFi for working",
  "upscale cafe for a date",
  "traditional restaurant family-friendly",
  "bright cafe with great breakfast",
  "pet-friendly cafe in Tehran",
];

interface Props {
  initialValue?: string;
  initialCity?: string;
  autoFocus?: boolean;
  large?: boolean;
}

export function AiSearchBar({ initialValue = "", initialCity = "", autoFocus, large }: Props) {
  const locale = useLocale();
  const t = useTranslations("home");
  const router = useRouter();
  const [value, setValue] = useState(initialValue);
  const [isPending, startTransition] = useTransition();
  const inputRef = useRef<HTMLInputElement>(null);

  const suggestions = locale === "fa" ? SUGGESTIONS_FA : SUGGESTIONS_EN;

  function submit(q: string) {
    const params = new URLSearchParams();
    if (q.trim()) params.set("q", q.trim());
    if (initialCity) params.set("city", initialCity);
    startTransition(() => {
      router.push(`/${locale}/search?${params.toString()}`);
    });
  }

  return (
    <div className="w-full">
      {/* Search input */}
      <div className={cn(
        "relative flex items-center overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm",
        "transition-all focus-within:border-brand-400 focus-within:shadow-md focus-within:shadow-brand-100",
        large && "rounded-2xl shadow-lg"
      )}>
        <div className="flex items-center gap-2 ps-4">
          <Sparkles className="h-4 w-4 shrink-0 text-brand-600" />
        </div>
        <input
          ref={inputRef}
          type="search"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && submit(value)}
          placeholder={t("searchPlaceholder")}
          autoFocus={autoFocus}
          className={cn(
            "flex-1 bg-transparent px-3 py-3 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none",
            large && "py-4 text-base"
          )}
        />
        <button
          onClick={() => submit(value)}
          disabled={isPending}
          className={cn(
            "m-1.5 flex items-center gap-1.5 rounded-xl bg-brand-700 px-4 py-2 text-sm font-semibold text-white",
            "transition hover:bg-brand-800 disabled:opacity-70",
            large && "px-5 py-2.5"
          )}
        >
          {isPending ? (
            <Loader2 className="h-4 w-4 animate-spin" />
          ) : (
            <Search className="h-4 w-4" />
          )}
          <span className="hidden sm:inline">{t("searchBtn")}</span>
        </button>
      </div>

      {/* Suggestion chips */}
      {large && (
        <div className="mt-3 flex flex-wrap gap-2">
          {suggestions.map((s) => (
            <button
              key={s}
              onClick={() => { setValue(s); submit(s); }}
              className="rounded-full border border-gray-200 bg-white px-3 py-1 text-xs text-gray-600 transition hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700"
            >
              {s}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}
