legal-ai/web-ui/src/components/training/compare-panel.tsx

"use client";

import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from "@/components/ui/select";
import {
  useCorpus, useCompare, type CompareSide, type PatternEntry,
} from "@/lib/api/training";

/*
 * Compare two decisions from the style corpus side-by-side. Uses the
 * training/compare endpoint which already does the heavy lifting (pattern
 * extraction, section stats, shared/unique pattern sets). Our job is
 * layout: two columns of metadata + section bars, plus a third "shared"
 * section listing patterns that appear in both.
 */

function SideColumn({ side }: { side: CompareSide }) {
  return (
    <Card className="bg-surface border-rule shadow-sm">
      <CardContent className="px-5 py-4 space-y-3">
        <header>
          <h3 className="text-navy text-lg mb-0 tabular-nums">
            {side.decision_number || "—"}
          </h3>
          <p className="text-[0.78rem] text-ink-muted tabular-nums">
            {side.decision_date || "—"} · {(side.chars / 1000).toFixed(1)}K תווים
          </p>
        </header>
        {side.subjects.length > 0 && (
          <div className="flex flex-wrap gap-1">
            {side.subjects.map((s) => (
              <Badge
                key={s}
                variant="outline"
                className="text-[0.7rem] bg-gold-wash text-gold-deep border-gold/40"
              >
                {s}
              </Badge>
            ))}
          </div>
        )}
        {side.sections.length > 0 && (
          <div>
            <h4 className="text-[0.72rem] uppercase tracking-wider text-gold-deep font-semibold mb-1.5">
              חלוקה לחלקים
            </h4>
            <ul className="space-y-1 text-[0.78rem]">
              {side.sections.map((sec) => (
                <li key={sec.type} className="flex items-center justify-between gap-2">
                  <span className="text-ink-soft truncate">{sec.type}</span>
                  <span className="text-ink-muted tabular-nums shrink-0">
                    {(sec.chars / 1000).toFixed(1)}K
                  </span>
                </li>
              ))}
            </ul>
          </div>
        )}
        <p className="text-[0.78rem] text-ink-muted">
          דפוסי סגנון שנמצאו: <span className="text-navy font-semibold tabular-nums">{side.patterns_count}</span>
        </p>
      </CardContent>
    </Card>
  );
}

function PatternList({
  title,
  items,
  tone,
}: {
  title: string;
  items: PatternEntry[];
  tone: "shared" | "a" | "b";
}) {
  const toneClass =
    tone === "shared"
      ? "bg-success-bg border-success/40"
      : tone === "a"
        ? "bg-info-bg border-info/40"
        : "bg-gold-wash border-gold/40";
  const toneHeading =
    tone === "shared"
      ? "text-success"
      : tone === "a"
        ? "text-info"
        : "text-gold-deep";

  return (
    <Card className={`${toneClass} shadow-sm`}>
      <CardContent className="px-5 py-4">
        <h4 className={`${toneHeading} text-sm font-semibold mb-3 flex items-center gap-2`}>
          {title}
          <span className="text-[0.7rem] tabular-nums opacity-70">{items.length}</span>
        </h4>
        {items.length === 0 ? (
          <p className="text-ink-muted text-[0.78rem]">—</p>
        ) : (
          <ul className="space-y-1.5 text-[0.78rem] max-h-60 overflow-y-auto">
            {items.slice(0, 20).map((p) => (
              <li key={p.id} className="text-ink leading-relaxed">
                {p.text}
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}

export function ComparePanel() {
  const { data: corpus, isPending } = useCorpus();
  const [a, setA] = useState<string | null>(null);
  const [b, setB] = useState<string | null>(null);
  const cmp = useCompare(a, b);

  return (
    <div className="space-y-6">
      <Card className="bg-surface border-rule shadow-sm">
        <CardContent className="px-5 py-4">
          <h3 className="text-navy text-base mb-3">בחר שתי החלטות להשוואה</h3>
          <div className="grid gap-3 md:grid-cols-2">
            {(["a", "b"] as const).map((slot) => (
              <div key={slot}>
                <label className="block text-[0.78rem] font-medium text-navy mb-1">
                  {slot === "a" ? "החלטה א" : "החלטה ב"}
                </label>
                <Select
                  disabled={isPending}
                  value={(slot === "a" ? a : b) ?? ""}
                  onValueChange={(v) => (slot === "a" ? setA(v) : setB(v))}
                  dir="rtl"
                >
                  <SelectTrigger>
                    <SelectValue placeholder={isPending ? "טוען…" : "בחר החלטה"} />
                  </SelectTrigger>
                  <SelectContent className="max-h-[300px]">
                    {corpus?.map((c) => (
                      <SelectItem key={c.id} value={c.id}>
                        {c.decision_number || "—"}
                        {c.decision_date ? ` · ${c.decision_date}` : ""}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {a && b && a === b && (
        <p className="text-ink-muted text-sm text-center">בחר שתי החלטות שונות</p>
      )}

      {cmp.error && (
        <Card className="bg-danger-bg border-danger/40">
          <CardContent className="px-6 py-5 text-danger text-center">
            {cmp.error.message}
          </CardContent>
        </Card>
      )}

      {cmp.isPending && a && b && a !== b && (
        <Skeleton className="h-60 w-full" />
      )}

      {cmp.data && (
        <>
          <div className="grid gap-4 md:grid-cols-2">
            <SideColumn side={cmp.data.a} />
            <SideColumn side={cmp.data.b} />
          </div>
          <div className="grid gap-4 md:grid-cols-3">
            <PatternList title="דפוסים משותפים" items={cmp.data.shared} tone="shared" />
            <PatternList title="רק בהחלטה א" items={cmp.data.only_a} tone="a" />
            <PatternList title="רק בהחלטה ב" items={cmp.data.only_b} tone="b" />
          </div>
        </>
      )}
    </div>
  );
}