"use client";

import { useMemo, useState } from "react";
import { useLocale } from "next-intl";
import type { Country } from "@/src/lib/constants/countries";

type Props = {
  countries: Country[];
  value: string;
  onChange: (code: string) => void;
  placeholder?: string;
  className?: string;
};

function cx(...c: Array<string | false | null | undefined>) {
  return c.filter(Boolean).join(" ");
}

export function CountrySelect({
  countries,
  value,
  onChange,
  placeholder,
  className,
}: Props) {
  const locale = useLocale();
  const [q, setQ] = useState("");

  const filtered = useMemo(() => {
    const query = q.trim().toLowerCase();
    if (!query) return countries;

    return countries.filter((c) => {
      const label = (locale === "fr" ? c.fr : c.en).toLowerCase();
      return (
        c.code.toLowerCase().includes(query) ||
        label.includes(query)
      );
    });
  }, [q, countries, locale]);

  return (
    <div className={cx("space-y-2", className)}>
      <input
        className="w-full rounded-xl border px-3 py-2 text-sm"
        placeholder={placeholder || (locale === "fr" ? "Rechercher un pays…" : "Search country…")}
        value={q}
        onChange={(e) => setQ(e.target.value)}
      />

      <select
        className="w-full rounded-xl border px-3 py-2 text-sm bg-white"
        value={value}
        onChange={(e) => onChange(e.target.value)}
      >
        {filtered.map((c) => (
          <option key={c.code} value={c.code}>
            {locale === "fr" ? c.fr : c.en} ({c.code})
          </option>
        ))}
      </select>

      <div className="text-[11px] text-neutral-500">
        {filtered.length}/{countries.length}
      </div>
    </div>
  );
}