legal-ai/web-ui/src/app/settings/page.tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import { Plus, Trash2, Tags, Building2 } from "lucide-react";
import { AppShell } from "@/components/app-shell";
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 default function SettingsPage() {
  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 (
    <AppShell>
      <section className="space-y-6">
        <header>
          <nav className="text-[0.78rem] text-ink-muted mb-1">
            <Link href="/" className="hover:text-gold-deep">
              בית
            </Link>
            <span aria-hidden> · </span>
            <span className="text-navy">הגדרות</span>
          </nav>
          <h1 className="text-navy mb-0">הגדרות</h1>
          <p className="text-ink-muted text-sm mt-1 max-w-2xl">
            ניהול מיפוי תגיות ערר לחברות ב-Paperclip. כל תיק חדש ישויך
            אוטומטית לפרויקט בחברה הנכונה לפי סוג הערר.
          </p>
        </header>

        <div className="h-[2px] bg-gradient-to-l from-transparent via-gold to-transparent" />

        {/* Companies overview */}
        <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>

        {/* Tag mappings */}
        <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>

            {/* Add form */}
            <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>

            {/* Table */}
            {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>
      </section>
    </AppShell>
  );
}