"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import { VIBES, vibeMeta, isVibe } from "@/lib/vibe";
import type { Vibe } from "@/app/generated/prisma/enums";

export function PeopleFilter() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const initialVibe = searchParams.get("vibe");
  const [vibe, setVibe] = useState<Vibe | null>(
    isVibe(initialVibe) ? initialVibe : null
  );
  const [city, setCity] = useState(searchParams.get("city") ?? "");
  const [interest, setInterest] = useState(searchParams.get("interest") ?? "");

  function buildParams(overrides?: { vibe?: Vibe | null }) {
    const params = new URLSearchParams();
    const nextVibe = overrides && "vibe" in overrides ? overrides.vibe : vibe;
    if (nextVibe) params.set("vibe", nextVibe);
    if (city.trim()) params.set("city", city.trim());
    if (interest.trim()) params.set("interest", interest.trim().toLowerCase());
    return params;
  }

  function pushFilters(params: URLSearchParams) {
    const qs = params.toString();
    router.push(`/people${qs ? `?${qs}` : ""}`);
  }

  function handleSelectVibe(next: Vibe | null) {
    setVibe(next);
    pushFilters(buildParams({ vibe: next }));
  }

  function handleSearch(e: React.FormEvent) {
    e.preventDefault();
    pushFilters(buildParams());
  }

  function handleReset() {
    setVibe(null);
    setCity("");
    setInterest("");
    router.push("/people");
  }

  const hasFilters = vibe || city.trim() || interest.trim();

  return (
    <form
      onSubmit={handleSearch}
      className="rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-5"
    >
      <div className="mb-4">
        <label className="mb-1.5 block text-xs font-medium text-neutral-500">
          Vibe
        </label>
        <div className="flex flex-wrap gap-1.5">
          <button
            type="button"
            onClick={() => handleSelectVibe(null)}
            aria-pressed={vibe === null}
            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
              vibe === null
                ? "border-primary-600 bg-primary-600 text-white"
                : "border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50"
            }`}
          >
            Semua
          </button>
          {VIBES.map((v) => {
            const m = vibeMeta(v);
            const active = vibe === v;
            return (
              <button
                key={v}
                type="button"
                onClick={() => handleSelectVibe(v)}
                aria-pressed={active}
                title={m.description}
                className={`inline-flex items-center gap-1 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
                  active
                    ? "border-primary-600 bg-primary-600 text-white"
                    : "border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50"
                }`}
              >
                <span aria-hidden>{m.icon}</span>
                <span>{m.label}</span>
              </button>
            );
          })}
        </div>
      </div>

      <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
        <div className="flex-1">
          <label
            htmlFor="people-city"
            className="mb-1.5 block text-xs font-medium text-neutral-500"
          >
            Kota
          </label>
          <input
            id="people-city"
            type="text"
            value={city}
            onChange={(e) => setCity(e.target.value)}
            placeholder="Bandung, Jakarta, ..."
            className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-3 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:border-primary-500 focus:bg-white"
          />
        </div>

        <div className="flex-1">
          <label
            htmlFor="people-interest"
            className="mb-1.5 block text-xs font-medium text-neutral-500"
          >
            Minat
          </label>
          <input
            id="people-interest"
            type="text"
            value={interest}
            onChange={(e) => setInterest(e.target.value)}
            placeholder="hiking, fotografi, yoga..."
            className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-3 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:border-primary-500 focus:bg-white"
          />
        </div>

        <div className="flex gap-2 sm:shrink-0">
          <button
            type="submit"
            className="flex-1 rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md shadow-primary-600/20 transition-colors hover:bg-primary-700 sm:flex-none"
          >
            Cari
          </button>
          {hasFilters && (
            <button
              type="button"
              onClick={handleReset}
              className="rounded-xl border border-neutral-200 px-3 py-2.5 text-sm font-medium text-neutral-500 transition-colors hover:bg-neutral-50 hover:text-neutral-700"
            >
              Reset
            </button>
          )}
        </div>
      </div>
    </form>
  );
}
