legal-ai/web-ui/src/components/missing-precedents/missing-precedents-table.tsx

"use client";

import { useState } from "react";
import { Trash2, Upload, Pencil, ExternalLink } from "lucide-react";
import { toast } from "sonner";
import Link from "next/link";
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import {
  useMissingPrecedents,
  useDeleteMissingPrecedent,
  CITED_BY_PARTY_LABELS,
  STATUS_LABELS,
  type MissingPrecedent,
  type MissingPrecedentStatus,
} from "@/lib/api/missing-precedents";
import { MissingPrecedentDetailDrawer } from "./missing-precedent-detail-drawer";

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

function StatusBadge({ status }: { status: MissingPrecedentStatus }) {
  const variants: Record<MissingPrecedentStatus, string> = {
    open: "bg-gold-wash text-gold-deep border-gold/40",
    uploaded: "bg-rule-soft text-ink-muted border-rule",
    closed: "bg-emerald-50 text-emerald-800 border-emerald-300/60",
    irrelevant: "bg-rule-soft text-ink-muted border-rule line-through",
  };
  return (
    <Badge variant="outline" className={variants[status]}>
      {STATUS_LABELS[status]}
    </Badge>
  );
}

function TableSkeleton({ cols }: { cols: number }) {
  return (
    <>
      {Array.from({ length: 4 }).map((_, i) => (
        <TableRow key={i} className="border-rule">
          {Array.from({ length: cols }).map((__, j) => (
            <TableCell key={j}>
              <Skeleton className="h-4 w-full" />
            </TableCell>
          ))}
        </TableRow>
      ))}
    </>
  );
}

type Props = {
  status?: MissingPrecedentStatus | "";
  caseNumber?: string;
  legalTopic?: string;
};

export function MissingPrecedentsTable({ status, caseNumber, legalTopic }: Props) {
  const [openId, setOpenId] = useState<string | null>(null);
  const { data, isPending, error } = useMissingPrecedents({
    status: status === "" ? undefined : status,
    caseNumber,
    legalTopic,
    limit: 200,
  });
  const del = useDeleteMissingPrecedent();

  const handleDelete = async (mp: MissingPrecedent) => {
    if (!confirm(`למחוק את הרשומה? ${mp.case_name || mp.citation.slice(0, 60)}...`)) {
      return;
    }
    try {
      await del.mutateAsync(mp.id);
      toast.success("הרשומה נמחקה");
    } catch (e) {
      toast.error("מחיקה נכשלה");
      console.error(e);
    }
  };

  if (error) {
    return (
      <div className="rounded bg-danger-bg border border-danger/40 px-6 py-4 text-danger text-center text-sm">
        {error.message}
      </div>
    );
  }

  return (
    <>
      <div className="rounded-lg border border-rule bg-surface shadow-sm overflow-hidden">
        <Table>
          <TableHeader className="bg-rule-soft/60">
            <TableRow className="border-rule">
              <TableHead className="text-navy text-right">פסיקה</TableHead>
              <TableHead className="text-navy text-right">נושא</TableHead>
              <TableHead className="text-navy text-right">תיק</TableHead>
              <TableHead className="text-navy text-right">צד מצטט</TableHead>
              <TableHead className="text-navy text-right">סטטוס</TableHead>
              <TableHead className="text-navy text-right">נוצר</TableHead>
              <TableHead className="text-navy" />
            </TableRow>
          </TableHeader>
          <TableBody>
            {isPending ? (
              <TableSkeleton cols={7} />
            ) : !data?.items.length ? (
              <TableRow className="border-rule">
                <TableCell colSpan={7} className="text-center text-ink-muted py-8">
                  אין פסיקות חסרות בקריטריונים הנוכחיים.
                </TableCell>
              </TableRow>
            ) : (
              data.items.map((mp) => (
                <TableRow
                  key={mp.id}
                  className="border-rule hover:bg-rule-soft/30 cursor-pointer"
                  onClick={() => setOpenId(mp.id)}
                >
                  <TableCell className="max-w-[440px]">
                    <div className="text-sm text-navy font-medium truncate">
                      {mp.case_name || mp.citation.split(" ").slice(0, 6).join(" ")}
                    </div>
                    <div className="text-[0.72rem] text-ink-muted truncate" dir="rtl">
                      {mp.citation}
                    </div>
                  </TableCell>
                  <TableCell>
                    <span className="text-sm text-ink">{mp.legal_topic || "—"}</span>
                  </TableCell>
                  <TableCell>
                    {mp.cited_in_case_number ? (
                      <Link
                        href={`/cases/${encodeURIComponent(mp.cited_in_case_number)}`}
                        onClick={(e) => e.stopPropagation()}
                        className="text-sm text-navy hover:text-gold-deep inline-flex items-center gap-1"
                      >
                        {mp.cited_in_case_number}
                        <ExternalLink className="w-3 h-3" />
                      </Link>
                    ) : (
                      <span className="text-ink-muted text-sm">—</span>
                    )}
                  </TableCell>
                  <TableCell className="text-sm text-ink">
                    {mp.cited_by_party
                      ? CITED_BY_PARTY_LABELS[mp.cited_by_party]
                      : "—"}
                    {mp.cited_by_party_name ? (
                      <div className="text-[0.7rem] text-ink-muted truncate max-w-[160px]">
                        {mp.cited_by_party_name}
                      </div>
                    ) : null}
                  </TableCell>
                  <TableCell>
                    <StatusBadge status={mp.status} />
                    {mp.linked_case_law_number ? (
                      <div className="text-[0.7rem] text-emerald-700 mt-1">
                        ↳ {mp.linked_case_law_name || mp.linked_case_law_number}
                      </div>
                    ) : null}
                  </TableCell>
                  <TableCell className="text-[0.78rem] text-ink-muted">
                    {formatDate(mp.created_at)}
                  </TableCell>
                  <TableCell className="text-end">
                    <div className="flex items-center justify-end gap-1">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={(e) => {
                          e.stopPropagation();
                          setOpenId(mp.id);
                        }}
                        title={mp.status === "open" ? "העלאה" : "פרטים"}
                      >
                        {mp.status === "open" ? (
                          <Upload className="w-4 h-4" />
                        ) : (
                          <Pencil className="w-4 h-4" />
                        )}
                      </Button>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={(e) => {
                          e.stopPropagation();
                          handleDelete(mp);
                        }}
                        disabled={del.isPending}
                        className="text-danger hover:text-danger"
                        title="מחיקה"
                      >
                        <Trash2 className="w-4 h-4" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      <MissingPrecedentDetailDrawer
        id={openId}
        onOpenChange={(open) => {
          if (!open) setOpenId(null);
        }}
      />
    </>
  );
}