"use client";

import { useState } from "react";
import { Sparkles, Search, Loader2, X } from "lucide-react";
import { aiSearch } from "@/lib/api";
import type { Car } from "@/lib/types";

interface Props {
  onResults: (cars: Car[], query: string) => void;
  onClear: () => void;
}

export default function AISearchBar({ onResults, onClear }: Props) {
  const [query, setQuery] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [hasSearched, setHasSearched] = useState(false);

  async function handleSearch() {
    const q = query.trim();
    if (!q || loading) return;

    setLoading(true);
    setError(null);
    setHasSearched(true);

    try {
      const res = await aiSearch(q);
      onResults(res.cars, q);
    } catch (err: unknown) {
      const detail = (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail;
      setError(detail || "Smart search unavailable. Please try again.");
    } finally {
      setLoading(false);
    }
  }

  function handleClear() {
    setQuery("");
    setError(null);
    setHasSearched(false);
    onClear();
  }

  return (
    <div className="rounded-[24px] bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-700 p-5 shadow-[0_8px_30px_rgba(37,99,235,0.3)] mb-5">
      <div className="flex items-center gap-2 mb-3">
        <Sparkles className="w-4 h-4 text-blue-200" />
        <p className="text-sm font-black text-white">Smart Search</p>
        <span className="ml-1 px-2 py-0.5 rounded-full bg-white/20 text-blue-100 text-[10px] font-bold">
          Natural Language
        </span>
      </div>

      <div className="flex items-center gap-3">
        <div className="flex-1 flex items-center gap-2 bg-white/15 backdrop-blur border border-white/20 rounded-2xl px-4 py-3">
          <Search className="w-4 h-4 text-blue-200 shrink-0" />
          <input
            type="text"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && handleSearch()}
            placeholder="e.g. &quot;best family SUV under ₹20L with good mileage&quot;"
            className="flex-1 bg-transparent text-white placeholder-blue-300 text-sm outline-none"
          />
          {query && (
            <button onClick={handleClear} className="text-blue-300 hover:text-white">
              <X className="w-4 h-4" />
            </button>
          )}
        </div>

        <button
          onClick={handleSearch}
          disabled={!query.trim() || loading}
          className="shrink-0 h-11 px-5 rounded-2xl bg-white text-blue-700 font-black text-sm hover:bg-blue-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg flex items-center gap-2"
        >
          {loading ? (
            <Loader2 className="w-4 h-4 animate-spin" />
          ) : (
            <Sparkles className="w-4 h-4" />
          )}
          {loading ? "Searching…" : "Search"}
        </button>
      </div>

      {error && (
        <p className="mt-3 text-xs text-red-300 bg-red-500/20 rounded-xl px-3 py-2">
          {error}
        </p>
      )}

      {!error && (
        <p className="mt-3 text-[11px] text-blue-300">
          Try: &quot;Most fuel efficient petrol car&quot; · &quot;7-seater SUV for hill driving&quot; · &quot;Best electric car in India&quot;
        </p>
      )}
    </div>
  );
}