legal-ai/web-ui/src/app/settings/_components/paperclip-tab.tsx

"use client";

import { useState } from "react";
import { Plus, Trash2, Tags, Building2 } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  useTagMappings,
  usePaperclipCompanies,
  useAddTagMapping,
  useDeleteTagMapping,
} from "@/lib/api/settings";
import { APPEAL_SUBTYPES } from "@/lib/practice-area";
import { toast } from "sonner";

const TAG_SUGGESTIONS = APPEAL_SUBTYPES.filter((s) => s.value !== "unknown");

export function PaperclipTab() {
  const { data: mappings, isPending: loadingMappings } = useTagMappings();
  const { data: companies, isPending: loadingCompanies } = usePaperclipCompanies();
  const addMapping = useAddTagMapping();
  const deleteMapping = useDeleteTagMapping();

  const [tag, setTag] = useState("");
  const [tagLabel, setTagLabel] = useState("");
  const [companyId, setCompanyId] = useState("");

  function handleTagInput(value: string) {
    setTag(value);
    const match = TAG_SUGGESTIONS.find((s) => s.value === value);
    if (match) setTagLabel(match.label);
  }

  function handleAdd() {
    if (!tag || !companyId) {
      toast.error("יש לבחור תגית וחברה");
      return;
    }
    const company = companies?.find((c) => c.id === companyId);
    addMapping.mutate(
      {
        tag,
        tag_label: tagLabel,
        company_id: companyId,
        company_name: company?.name ?? "",
      },
      {
        onSuccess: () => {
          toast.success("מיפוי נוסף בהצלחה");
          setTag("");
          setTagLabel("");
          setCompanyId("");
        },
        onError: (err) => toast.error(`שגיאה: ${err.message}`),
      },
    );
  }

  function handleDelete(id: string, tag: string) {
    deleteMapping.mutate(id, {
      onSuccess: () => toast.success(`מיפוי "${tag}" נמחק`),
      onError: (err) => toast.error(`שגיאה: ${err.message}`),
    });
  }

  return (
    <div className="space-y-6">
      <Card className="bg-surface border-rule shadow-sm">
        <CardContent className="px-6 py-5">
          <h2 className="text-navy text-lg mb-3 flex items-center gap-2">
            <Building2 className="w-4 h-4" />
            חברות ב-Paperclip
          </h2>
          {loadingCompanies ? (
            <Skeleton className="h-12 w-full" />
          ) : !companies?.length ? (
            <p className="text-ink-muted text-sm">לא נמצאו חברות</p>
          ) : (
            <div className="flex flex-wrap gap-3">
              {companies.map((c) => (
                <div
                  key={c.id}
                  className="flex items-center gap-2 rounded-md bg-rule-soft/60 border border-rule px-4 py-2.5"
                >
                  <span className="text-sm font-medium text-ink">{c.name}</span>
                  <Badge variant="outline" className="text-[0.7rem] tabular-nums">
                    {c.prefix}
                  </Badge>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      <Card className="bg-surface border-rule shadow-sm">
        <CardContent className="px-6 py-5">
          <h2 className="text-navy text-lg mb-4 flex items-center gap-2">
            <Tags className="w-4 h-4" />
            מיפוי תגיות
            <Badge variant="outline" className="text-[0.7rem] tabular-nums">
              {mappings?.length ?? 0}
            </Badge>
          </h2>

          <div className="flex flex-wrap items-end gap-3 mb-5 p-4 rounded-md bg-rule-soft/40 border border-rule">
            <div className="flex flex-col gap-1.5 min-w-[180px]">
              <label className="text-[0.72rem] text-ink-muted">תגית</label>
              <Input
                list="tag-suggestions"
                value={tag}
                onChange={(e) => handleTagInput(e.target.value)}
                placeholder="סוג ערר או תגית חופשית"
                className="w-[220px]"
              />
              <datalist id="tag-suggestions">
                {TAG_SUGGESTIONS.map((s) => (
                  <option key={s.value} value={s.value}>
                    {s.label}
                  </option>
                ))}
              </datalist>
            </div>

            <div className="flex flex-col gap-1.5 min-w-[140px]">
              <label className="text-[0.72rem] text-ink-muted">תווית</label>
              <Input
                value={tagLabel}
                onChange={(e) => setTagLabel(e.target.value)}
                placeholder="שם לתצוגה"
                className="w-[160px]"
              />
            </div>

            <div className="flex flex-col gap-1.5 min-w-[200px]">
              <label className="text-[0.72rem] text-ink-muted">
                חברה ב-Paperclip
              </label>
              <Select value={companyId} onValueChange={setCompanyId}>
                <SelectTrigger className="w-[240px]">
                  <SelectValue placeholder="בחר חברה" />
                </SelectTrigger>
                <SelectContent>
                  {companies?.map((c) => (
                    <SelectItem key={c.id} value={c.id}>
                      {c.name} ({c.prefix})
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <Button
              onClick={handleAdd}
              disabled={addMapping.isPending || !tag || !companyId}
              size="default"
            >
              <Plus className="w-4 h-4" data-icon="inline-start" />
              {addMapping.isPending ? "שומר..." : "הוסף מיפוי"}
            </Button>
          </div>

          {loadingMappings ? (
            <Skeleton className="h-32 w-full" />
          ) : !mappings?.length ? (
            <p className="text-ink-muted text-sm">
              אין מיפויים. הוסף מיפוי כדי שתיקים חדשים ישויכו אוטומטית
              לפרויקט בחברה הנכונה.
            </p>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-rule text-ink-muted text-[0.72rem] uppercase tracking-wider">
                    <th className="text-start py-2 px-3 font-medium">Tag</th>
                    <th className="text-start py-2 px-3 font-medium">Label</th>
                    <th className="text-start py-2 px-3 font-medium">Company</th>
                    <th className="py-2 px-3 w-12" />
                  </tr>
                </thead>
                <tbody>
                  {mappings.map((m) => (
                    <tr
                      key={m.id}
                      className="border-b border-rule/60 hover:bg-rule-soft/40 transition-colors"
                    >
                      <td className="py-2.5 px-3">
                        <Badge variant="outline" className="text-[0.75rem] font-mono">
                          {m.tag}
                        </Badge>
                      </td>
                      <td className="py-2.5 px-3 text-ink">{m.tag_label}</td>
                      <td className="py-2.5 px-3 text-ink">{m.company_name}</td>
                      <td className="py-2.5 px-3">
                        <Button
                          variant="ghost"
                          size="icon-xs"
                          onClick={() => handleDelete(m.id, m.tag)}
                          disabled={deleteMapping.isPending}
                          title="מחק מיפוי"
                        >
                          <Trash2 className="w-3.5 h-3.5 text-danger" />
                        </Button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}