"use client";

import { useState } from "react";
import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from "@/components/ui/select";
import {
  useLibrarySearch, type PracticeArea, type SearchHit,
} from "@/lib/api/precedent-library";
import { PRACTICE_AREAS, PRECEDENT_LEVELS } from "./practice-area";
import { AuthorityBadge } from "./halacha-meta";

function formatDate(iso: string | null) {
  if (!iso) return "—";
  try {
    return new Date(iso).toLocaleDateString("he-IL");
  } catch {
    return iso;
  }
}

function HalachaCard({ hit }: { hit: Extract<SearchHit, { type: "halacha" }> }) {
  return (
    <div className="rounded-lg border border-gold/40 bg-gold-wash/40 p-4 space-y-2">
      <div className="flex items-center gap-2 text-[0.78rem] text-ink-muted flex-wrap">
        <Badge className="bg-gold text-navy border-0">הלכה</Badge>
        <span className="font-mono" dir="ltr">{hit.case_number}</span>
        {hit.court && <span>· {hit.court}</span>}
        {hit.decision_date && <span>· {formatDate(hit.decision_date)}</span>}
        {hit.precedent_level && <span>· {hit.precedent_level}</span>}
        {/* PRE-3/PRE-5 (INV-IA5): the derived authority (binding/persuasive)
            rides on the wire but was dropped here — render it as in the review
            tab so search shows the same provenance everywhere. */}
        <AuthorityBadge authority={hit.authority} />
        <span className="ms-auto tabular-nums">דירוג {hit.score.toFixed(2)}</span>
      </div>
      <p className="text-navy font-medium text-[0.95rem]" dir="rtl">
        {hit.rule_statement}
      </p>
      <blockquote className="text-ink-soft text-sm border-r-2 border-gold pr-3" dir="rtl">
        &ldquo;{hit.supporting_quote}&rdquo;
        {hit.page_reference && <span className="text-ink-muted text-[0.72rem] ms-2">({hit.page_reference})</span>}
      </blockquote>
      {hit.subject_tags?.length > 0 && (
        <div className="flex flex-wrap gap-1">
          {hit.subject_tags.map((t) => (
            <Badge key={t} variant="outline" className="text-[0.65rem] bg-surface">
              {t}
            </Badge>
          ))}
        </div>
      )}
    </div>
  );
}

function PassageCard({ hit }: { hit: Extract<SearchHit, { type: "passage" }> }) {
  return (
    <div className="rounded-lg border border-rule bg-surface p-4 space-y-2">
      <div className="flex items-center gap-2 text-[0.78rem] text-ink-muted flex-wrap">
        <Badge variant="outline" className="bg-rule-soft text-ink-muted">קטע</Badge>
        <span className="font-mono" dir="ltr">{hit.case_number}</span>
        {hit.court && <span>· {hit.court}</span>}
        {hit.decision_date && <span>· {formatDate(hit.decision_date)}</span>}
        <span className="text-[0.7rem]">· {hit.section_type}</span>
        <span className="ms-auto tabular-nums">דירוג {hit.score.toFixed(2)}</span>
      </div>
      <p className="text-ink text-sm leading-relaxed" dir="rtl">
        {hit.content.slice(0, 600)}
        {hit.content.length > 600 && <span>…</span>}
      </p>
    </div>
  );
}

export function LibrarySearchPanel() {
  const [draft, setDraft] = useState("");
  const [query, setQuery] = useState("");
  const [practiceArea, setPracticeArea] = useState<PracticeArea>("");
  const [precedentLevel, setPrecedentLevel] = useState("");
  const [includeHalachot, setIncludeHalachot] = useState(true);

  const { data, isFetching, error } = useLibrarySearch(query, {
    practiceArea: practiceArea || undefined,
    precedentLevel: precedentLevel || undefined,
    includeHalachot,
    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>
        <div className="min-w-[170px]">
          <label className="text-[0.78rem] text-ink-muted">רמת תקדים</label>
          <Select value={precedentLevel || "_all"}
            onValueChange={(v) => setPrecedentLevel(v === "_all" ? "" : v)}>
            <SelectTrigger><SelectValue /></SelectTrigger>
            <SelectContent>
              <SelectItem value="_all">הכל</SelectItem>
              {PRECEDENT_LEVELS.map((l) => (
                <SelectItem key={l.value} value={l.value}>{l.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>

      <label className="flex items-center gap-2 cursor-pointer text-sm text-ink-muted">
        <input type="checkbox" checked={includeHalachot}
          onChange={(e) => setIncludeHalachot(e.target.checked)} />
        כלול הלכות (rule-level matches)
      </label>

      {!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-24 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, i) =>
            hit.type === "halacha" ? (
              <HalachaCard key={`h-${hit.halacha_id ?? i}`} hit={hit} />
            ) : (
              <PassageCard key={`p-${hit.chunk_id ?? i}`} hit={hit} />
            ),
          )}
        </div>
      )}
    </div>
  );
}