import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { Search as SearchIcon } from "lucide-react";
import { CATEGORIES, PROVINCES } from "@/lib/catalog";
import { useI18n } from "@/lib/i18n";

export const Route = createFileRoute("/search")({
  head: () => ({
    meta: [
      { title: "Pesquisar anúncios — KUYA" },
      { name: "description", content: "Pesquisa por categoria, província e preço entre milhares de anúncios em Angola." },
      { property: "og:title", content: "Pesquisar anúncios — KUYA" },
      { property: "og:description", content: "Pesquisa por categoria, província e preço em todo o Angola." },
    ],
  }),
  component: SearchPage,
});

function SearchPage() {
  const { t, lang } = useI18n();
  const navigate = useNavigate();
  const [term, setTerm] = useState("");

  return (
    <div className="mx-auto max-w-[720px] px-4 pt-6 sm:px-6">
      <h1 className="font-display text-2xl font-bold">{t("search")}</h1>

      <form
        onSubmit={(event) => {
          event.preventDefault();
          navigate({ to: "/", search: { q: term || undefined } });
        }}
        className="mt-4 flex gap-2"
      >
        <div className="flex flex-1 items-center gap-2 rounded-full bg-card px-4 py-3 shadow-[0_0_0_1px_var(--input)]">
          <SearchIcon className="size-4 text-muted-foreground" />
          <input
            autoFocus
            value={term}
            onChange={(e) => setTerm(e.target.value)}
            placeholder={t("searchPlaceholder")}
            className="w-full bg-transparent text-sm outline-none"
          />
        </div>
        <button type="submit" className="kuya-btn kuya-btn-buy shrink-0">
          {t("search")}
        </button>
      </form>

      <h2 className="mt-6 font-display text-lg font-bold">{t("category")}</h2>
      <div className="mt-2 grid grid-cols-2 gap-2 sm:grid-cols-3">
        {CATEGORIES.map((cat) => (
          <button
            key={cat.slug}
            type="button"
            onClick={() => navigate({ to: "/", search: { category: cat.slug } })}
            className="kuya-card p-4 text-left font-display text-sm font-semibold"
          >
            {lang === "pt" ? cat.pt : cat.en}
          </button>
        ))}
      </div>

      <h2 className="mt-6 font-display text-lg font-bold">{t("province")}</h2>
      <div className="mt-2 flex flex-wrap gap-2">
        {PROVINCES.map((province) => (
          <button
            key={province}
            type="button"
            onClick={() => navigate({ to: "/", search: { province } })}
            className="kuya-chip"
          >
            {province}
          </button>
        ))}
      </div>
    </div>
  );
}