legal-ai/web-ui/src/components/graph/graph-node-panel.tsx

"use client";

/**
 * Side panel shown when a node is selected. For precedent/halacha nodes it
 * deep-links into the existing precedent library (/precedents/[id]) so the
 * graph is a navigation surface, not a dead-end visualization.
 */

import Link from "next/link";
import { ExternalLink, X } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import type { GraphNode } from "@/lib/api/graph";

const TYPE_LABELS: Record<string, string> = {
  precedent: "פסיקה",
  halacha: "הלכה",
  topic: "נושא",
  practice_area: "תחום",
  gap: "פסיקה חסרה",
};

const GAP_STATUS_LABELS: Record<string, string> = {
  open: "ממתינה לקליטה",
  uploaded: "הועלתה",
  closed: "טופלה",
  irrelevant: "לא רלוונטית",
};

const PA_LABELS: Record<string, string> = {
  rishuy_uvniya: "רישוי ובנייה",
  betterment_levy: "היטל השבחה",
  compensation_197: "פיצויים (ס׳ 197)",
  appeals_committee: "ועדת ערר",
};

const SOURCE_LABELS: Record<string, string> = {
  external_upload: "פסיקה חיצונית",
  internal_committee: "החלטת ועדה",
  cited_only: "מוזכר בלבד",
  nevo_seed: "נבו",
};

export function GraphNodePanel({
  node,
  onClose,
}: {
  node: GraphNode;
  onClose: () => void;
}) {
  const isPrecedentLike = node.type === "precedent" || node.type === "halacha";
  const isGap = node.type === "gap";
  return (
    <Card className="bg-surface border-rule shadow-sm w-80 shrink-0 overflow-y-auto">
      <CardContent className="space-y-4 p-4">
        <div className="flex items-start justify-between gap-2">
          <div className="space-y-1">
            <Badge variant="outline" className="text-[0.65rem]">
              {TYPE_LABELS[node.type] ?? node.type}
            </Badge>
            <h2 className="text-navy text-base leading-snug m-0">{node.label}</h2>
          </div>
          <Button
            variant="ghost"
            size="icon"
            onClick={onClose}
            aria-label="סגור"
            className="shrink-0"
          >
            <X className="size-4" />
          </Button>
        </div>

        <dl className="space-y-2 text-sm">
          {isPrecedentLike && (
            <Row label="ציטוטים נכנסים" value={String(node.size)} />
          )}
          {node.practice_area && (
            <Row label="תחום" value={PA_LABELS[node.practice_area] ?? node.practice_area} />
          )}
          {node.source_kind && (
            <Row label="מקור" value={SOURCE_LABELS[node.source_kind] ?? node.source_kind} />
          )}
          {node.precedent_level && <Row label="דרגה" value={node.precedent_level} />}
          {isGap && (
            <>
              <Row label="מצוטטת ע״י" value={`${node.size} פסיקות בקורפוס`} />
              {node.gap_status && (
                <Row
                  label="סטטוס"
                  value={GAP_STATUS_LABELS[node.gap_status] ?? node.gap_status}
                />
              )}
              <p className="text-ink-muted text-xs leading-relaxed m-0">
                פסיקה זו מצוטטת בקורפוס אך אינה קיימת בו — מועמדת לקליטה.
              </p>
            </>
          )}
          {!isPrecedentLike && !isGap && (
            <p className="text-ink-muted text-xs leading-relaxed m-0">
              לחיצה על נקודה זו מתמקדת בשכניה — כל הפסיקות המשויכות אליה.
            </p>
          )}
        </dl>

        {isPrecedentLike && node.case_law_id && (
          <Button asChild variant="outline" className="w-full">
            <Link href={`/precedents/${node.case_law_id}`}>
              <ExternalLink className="size-4 me-2" />
              פתח בספריית הפסיקה
            </Link>
          </Button>
        )}

        {isGap && (
          <Button asChild variant="outline" className="w-full">
            <Link href="/missing-precedents">
              <ExternalLink className="size-4 me-2" />
              לרשימת הפסיקה החסרה
            </Link>
          </Button>
        )}
      </CardContent>
    </Card>
  );
}

function Row({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-baseline justify-between gap-3">
      <dt className="text-ink-muted text-xs shrink-0">{label}</dt>
      <dd className="text-ink text-end m-0">{value}</dd>
    </div>
  );
}