"use client";

import Link from "next/link";
import { usePathname, useSearchParams } from "next/navigation";

/**
 * Filter sisi publik: pencarian judul + filter tag (sesuai CMS).
 * Kategori artikel tidak dipakai — diganti penjelasan singkat + tag.
 */
export default function ContentTypeFilterSidebar() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const q = searchParams.get("q") ?? "";
  const tag = searchParams.get("tag") ?? "";

  return (
    <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
      <div className="border-b pb-4">
        <h3 className="text-sm font-semibold">Filter</h3>
        <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
          Kategori tidak digunakan untuk artikel saat ini. Gunakan{" "}
          <span className="font-medium text-foreground">kata kunci</span> (judul)
          dan <span className="font-medium text-foreground">tag</span> yang sama
          seperti di CMS.
        </p>
      </div>

      <form
        key={`${q}-${tag}`}
        action={pathname}
        method="get"
        className="mt-6 space-y-5"
      >
        <div>
          <label
            htmlFor="filter-q"
            className="text-sm font-medium text-foreground"
          >
            Kata kunci
          </label>
          <p className="mb-2 mt-1 text-xs text-muted-foreground">
            Mencari di judul artikel.
          </p>
          <input
            id="filter-q"
            name="q"
            type="search"
            defaultValue={q}
            placeholder="Cari judul…"
            className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#966314]"
          />
        </div>

        <div>
          <label
            htmlFor="filter-tag"
            className="text-sm font-medium text-foreground"
          >
            Tag
          </label>
          <p className="mb-2 mt-1 text-xs text-muted-foreground">
            Cocokkan teks pada kolom tag (bisa sebagian).
          </p>
          <input
            id="filter-tag"
            name="tag"
            type="text"
            defaultValue={tag}
            placeholder="contoh: nasional"
            className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#966314]"
          />
        </div>

        <div className="flex flex-col gap-2 pt-1">
          <button
            type="submit"
            className="w-full rounded-lg bg-[#b07c18] py-2.5 text-sm font-medium text-white transition hover:opacity-90"
          >
            Terapkan
          </button>
          <Link
            href={pathname}
            className="block w-full rounded-lg border border-gray-200 py-2.5 text-center text-sm font-medium text-[#966314] transition hover:bg-gray-50"
          >
            Reset filter
          </Link>
        </div>
      </form>
    </div>
  );
}
