"use client";

import { useState } from "react";
import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from "@/components/ui/select";
import { useDigestSearch } from "@/lib/api/digests";
import type { PracticeArea } from "@/lib/api/precedent-library";
import { PRACTICE_AREAS } from "@/components/precedents/practice-area";
import { DigestCard } from "./digest-card";

export function DigestSearchPanel() {
  const [draft, setDraft] = useState("");
  const [query, setQuery] = useState("");
  const [practiceArea, setPracticeArea] = useState<PracticeArea>("");

  const { data, isFetching, error } = useDigestSearch(query, {
    practiceArea: practiceArea || undefined,
    limit: 20,
  });

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setQuery(draft.trim());
  };

  return (
    <div className="space-y-4">
      <form onSubmit={onSubmit} className="flex items-end gap-3 flex-wrap">
        <div className="flex-1 min-w-[300px]">
          <label className="text-[0.78rem] text-ink-muted">שאילתת חיפוש</label>
          <Input
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
            placeholder="שיקול דעת הוועדה המחוזית בהקלה"
            dir="rtl"
          />
        </div>
        <div className="min-w-[180px]">
          <label className="text-[0.78rem] text-ink-muted">תחום</label>
          <Select
            value={practiceArea || "_all"}
            onValueChange={(v) => setPracticeArea(v === "_all" ? "" : (v as PracticeArea))}
          >
            <SelectTrigger><SelectValue /></SelectTrigger>
            <SelectContent>
              <SelectItem value="_all">הכל</SelectItem>
              {PRACTICE_AREAS.map((a) => (
                <SelectItem key={a.value} value={a.value}>{a.label}</SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <Button type="submit" className="bg-navy text-parchment hover:bg-navy-soft">
          <Search className="w-4 h-4 me-1" />
          חפש
        </Button>
      </form>

      <p className="text-[0.78rem] text-ink-muted">
        חיפוש סמנטי ב-radar היומונים. כל תוצאה מצביעה על פסק דין מקורי —
        הצטט מהפסק עצמו (ספריית הפסיקה), לא מהיומון.
      </p>

      {!query.trim() ? (
        <div className="text-center text-ink-muted py-12">
          הקלד שאילתא כדי לחפש ביומונים. החיפוש סמנטי — לא טקסטואלי.
        </div>
      ) : error ? (
        <div className="rounded bg-danger-bg border border-danger/40 px-6 py-5 text-danger text-center">
          {error.message}
        </div>
      ) : isFetching ? (
        <div className="space-y-3">
          {[...Array(3)].map((_, i) => <Skeleton key={i} className="h-32 w-full" />)}
        </div>
      ) : !data?.items.length ? (
        <div className="text-center text-ink-muted py-12">
          לא נמצאו יומונים תואמים. נסה ניסוח אחר.
        </div>
      ) : (
        <div className="space-y-3">
          <p className="text-[0.78rem] text-ink-muted">{data.count} תוצאות</p>
          {data.items.map((hit) => (
            <DigestCard key={hit.id} digest={hit} score={hit.score} />
          ))}
        </div>
      )}
    </div>
  );
}