"use client";

import { useState, useCallback } from "react";
import { useRouter } from "next/navigation";

interface ParsedFilters {
  gender?: string;
  city?: string;
  country?: string;
  hair_color?: string;
  ethnicity?: string;
  min_age?: number;
  max_age?: number;
  services?: string[];
}

export default function NLSearch() {
  const [query, setQuery] = useState("");
  const [filters, setFilters] = useState<ParsedFilters | null>(null);
  const [loading, setLoading] = useState(false);
  const [focused, setFocused] = useState(false);
  const router = useRouter();

  const parseQuery = useCallback(async () => {
    const trimmed = query.trim();
    if (!trimmed) return;

    setLoading(true);
    try {
      const res = await fetch("/api/ai/search-parse", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ query: trimmed }),
      });

      if (!res.ok) {
        // Fallback: redirect with keyword
        router.push(`/search/results?keyword=${encodeURIComponent(trimmed)}`);
        return;
      }

      const data = await res.json();
      const parsed: ParsedFilters = data.filters ?? {};

      // If no meaningful filters were extracted, just use keyword search
      const hasFilters = Object.keys(parsed).some(
        (k) => parsed[k as keyof ParsedFilters] !== undefined
      );

      if (!hasFilters) {
        router.push(`/search/results?keyword=${encodeURIComponent(trimmed)}`);
        return;
      }

      setFilters(parsed);
    } catch {
      router.push(`/search/results?keyword=${encodeURIComponent(trimmed)}`);
    } finally {
      setLoading(false);
    }
  }, [query, router]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (filters) {
      navigateWithFilters(filters);
    } else {
      parseQuery();
    }
  };

  const navigateWithFilters = (f: ParsedFilters) => {
    const params = new URLSearchParams();
    if (f.gender) params.set("gender", f.gender);
    if (f.city) params.set("city", f.city);
    if (f.country) params.set("country", f.country);
    if (f.hair_color) params.set("hair_color", f.hair_color);
    if (f.ethnicity) params.set("ethnicity", f.ethnicity);
    if (f.min_age) params.set("min_age", String(f.min_age));
    if (f.max_age) params.set("max_age", String(f.max_age));
    if (f.services?.length) params.set("services", f.services.join(","));
    router.push(`/search/results?${params.toString()}`);
  };

  const removeFilter = (key: keyof ParsedFilters) => {
    if (!filters) return;
    const updated = { ...filters };
    delete updated[key];
    setFilters(Object.keys(updated).length > 0 ? updated : null);
  };

  const filterChips = filters
    ? Object.entries(filters)
        .filter(([, v]) => v !== undefined && v !== null)
        .map(([key, value]) => ({
          key: key as keyof ParsedFilters,
          label: `${key.replace(/_/g, " ")}: ${Array.isArray(value) ? value.join(", ") : value}`,
        }))
    : [];

  return (
    <div className="max-w-xl mx-auto mt-4">
      <form onSubmit={handleSubmit}>
        <div
          className={`flex items-center rounded-xl border-2 transition-all duration-200 bg-surface/80 backdrop-blur-sm ${
            focused
              ? "border-gold shadow-lg shadow-gold/10"
              : "border-white/10 hover:border-white/20"
          }`}
        >
          <div className="pl-4 text-gold">
            <svg
              className="w-5 h-5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
              />
            </svg>
          </div>
          <input
            type="text"
            value={query}
            onChange={(e) => {
              setQuery(e.target.value);
              setFilters(null);
            }}
            onFocus={() => setFocused(true)}
            onBlur={() => setFocused(false)}
            placeholder="Describe what you're looking for..."
            className="flex-1 bg-transparent px-4 py-3.5 text-white placeholder-text-muted outline-none text-sm"
          />
          <button
            type="submit"
            disabled={loading || !query.trim()}
            className="bg-gold hover:bg-gold-light text-black font-semibold px-6 py-2.5 rounded-lg mr-1.5 transition-all duration-200 text-sm whitespace-nowrap disabled:opacity-40 disabled:cursor-not-allowed"
          >
            {loading ? (
              <svg
                className="w-5 h-5 animate-spin"
                fill="none"
                viewBox="0 0 24 24"
              >
                <circle
                  className="opacity-25"
                  cx="12"
                  cy="12"
                  r="10"
                  stroke="currentColor"
                  strokeWidth="4"
                />
                <path
                  className="opacity-75"
                  fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
                />
              </svg>
            ) : filters ? (
              "Go"
            ) : (
              "Search"
            )}
          </button>
        </div>
      </form>

      {/* Parsed filter chips */}
      {filterChips.length > 0 && (
        <div className="flex flex-wrap gap-2 mt-3 justify-center">
          {filterChips.map((chip) => (
            <span
              key={chip.key}
              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-gold/15 border border-gold/30 text-gold text-xs font-medium capitalize"
            >
              {chip.label}
              <button
                type="button"
                onClick={() => removeFilter(chip.key)}
                className="hover:text-white transition-colors"
              >
                <svg
                  className="w-3.5 h-3.5"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
              </button>
            </span>
          ))}
          <button
            type="button"
            onClick={() => navigateWithFilters(filters!)}
            className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full bg-gold text-black text-xs font-semibold hover:bg-gold-light transition-colors"
          >
            Search with filters
            <svg
              className="w-3.5 h-3.5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M14 5l7 7m0 0l-7 7m7-7H3"
              />
            </svg>
          </button>
        </div>
      )}
    </div>
  );
}