mylegal-stage-law/src/routes/cases.index.tsx

import { createFileRoute, Link } from "@tanstack/react-router";
import { useEffect, useMemo, useState } from "react";
import { ProtectedLayout } from "@/components/protected-layout";
import { PageContainer, PageHeader } from "@/components/app-shell";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { supabase } from "@/integrations/supabase/client";
import { Plus, Search, Archive, ArchiveRestore, ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
import { formatDate, statusBadgeClass } from "@/lib/format";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { setArchived } from "@/lib/archive";
import { NewCaseDialog } from "@/components/cases/new-case-dialog";

type SortKey = "title" | "client" | "status" | "attorney" | "opened_at";
type SortDir = "asc" | "desc";

export const Route = createFileRoute("/cases/")({
  component: () => (
    <ProtectedLayout>
      <CasesList />
    </ProtectedLayout>
  ),
});

function CasesList() {
  const [cases, setCases] = useState<any[]>([]);
  const [q, setQ] = useState("");
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [view, setView] = useState<"active" | "archived">("active");
  const [newOpen, setNewOpen] = useState(false);
  const [sortKey, setSortKey] = useState<SortKey>("title");
  const [sortDir, setSortDir] = useState<SortDir>("asc");

  const load = async () => {
    const { data } = await supabase
      .from("cases")
      .select("*, client:clients(name), assignee:profiles!cases_assigned_attorney_id_fkey(full_name, email)")
      .order("updated_at", { ascending: false });
    setCases(data ?? []);
  };

  useEffect(() => {
    load();
  }, []);

  const visible = cases.filter((c) =>
    view === "archived" ? c.archived_at : !c.archived_at,
  );
  const filtered = visible.filter((c) => {
    const okStatus = statusFilter === "all" || c.status === statusFilter;
    const okQ = [c.title, c.case_number, c.client?.name].filter(Boolean).join(" ").toLowerCase().includes(q.toLowerCase());
    return okStatus && okQ;
  });

  const sorted = useMemo(() => {
    const getVal = (c: any): string => {
      switch (sortKey) {
        case "title": return (c.title ?? "").toLowerCase();
        case "client": return (c.client?.name ?? "").toLowerCase();
        case "status": return (c.status ?? "").toLowerCase();
        case "attorney": return (c.assignee?.full_name || c.assignee?.email || "").toLowerCase();
        case "opened_at": return c.opened_at ?? "";
      }
    };
    const arr = [...filtered];
    arr.sort((a, b) => {
      const av = getVal(a);
      const bv = getVal(b);
      if (av < bv) return sortDir === "asc" ? -1 : 1;
      if (av > bv) return sortDir === "asc" ? 1 : -1;
      return 0;
    });
    return arr;
  }, [filtered, sortKey, sortDir]);

  const toggleSort = (key: SortKey) => {
    if (sortKey === key) {
      setSortDir(sortDir === "asc" ? "desc" : "asc");
    } else {
      setSortKey(key);
      setSortDir(key === "opened_at" ? "desc" : "asc");
    }
  };

  const archivedCount = cases.filter((c) => c.archived_at).length;
  const activeCount = cases.length - archivedCount;

  const onArchive = async (id: string, archived: boolean) => {
    if (await setArchived("cases", id, archived)) load();
  };

  const SortHeader = ({ label, k, align = "left" }: { label: string; k: SortKey; align?: "left" | "right" }) => {
    const active = sortKey === k;
    const Icon = !active ? ArrowUpDown : sortDir === "asc" ? ArrowUp : ArrowDown;
    return (
      <th className={`px-4 py-3 font-medium text-${align}`}>
        <button
          type="button"
          onClick={() => toggleSort(k)}
          className={`inline-flex items-center gap-1 hover:text-foreground transition-colors ${active ? "text-foreground" : ""}`}
        >
          {label}
          <Icon className="h-3 w-3" />
        </button>
      </th>
    );
  };

  return (
    <PageContainer>
      <PageHeader
        title="Cases"
        description="Matters assigned to you and ones you've created."
        actions={
          <Button onClick={() => setNewOpen(true)}>
            <Plus className="h-4 w-4 mr-2" /> New case
          </Button>
        }
      />
      <NewCaseDialog open={newOpen} onOpenChange={setNewOpen} />

      <div className="flex flex-col sm:flex-row gap-3 mb-4">
        <Tabs value={view} onValueChange={(v) => setView(v as "active" | "archived")}>
          <TabsList>
            <TabsTrigger value="active">Active ({activeCount})</TabsTrigger>
            <TabsTrigger value="archived">Archived ({archivedCount})</TabsTrigger>
          </TabsList>
        </Tabs>
        <div className="relative flex-1 max-w-sm">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search cases…" className="pl-9" />
        </div>
        <Select value={statusFilter} onValueChange={setStatusFilter}>
          <SelectTrigger className="w-[180px]"><SelectValue /></SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All statuses</SelectItem>
            <SelectItem value="intake">Intake</SelectItem>
            <SelectItem value="active">Active</SelectItem>
            <SelectItem value="on_hold">On hold</SelectItem>
            <SelectItem value="closed_won">Closed — won</SelectItem>
            <SelectItem value="closed_lost">Closed — lost</SelectItem>
            <SelectItem value="closed">Closed</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <Card className="border-border/60 overflow-hidden">
        <CardContent className="p-0">
          <table className="w-full text-sm">
            <thead className="bg-muted/50 text-xs uppercase tracking-wider text-muted-foreground">
              <tr>
                <SortHeader label="Case" k="title" />
                <SortHeader label="Client" k="client" />
                <SortHeader label="Status" k="status" />
                <SortHeader label="Attorney" k="attorney" />
                <SortHeader label="Opened" k="opened_at" />
                <th className="text-right px-4 py-3 font-medium w-12"></th>
              </tr>
            </thead>
            <tbody>
              {sorted.length === 0 && (
                <tr><td colSpan={6} className="text-center py-12 text-muted-foreground">
                  {view === "archived" ? "No archived cases." : "No cases."}
                </td></tr>
              )}
              {sorted.map((c) => (
                <tr key={c.id} className="border-t hover:bg-muted/30">
                  <td className="px-4 py-3">
                    <Link to="/cases/$caseId" params={{ caseId: c.id }} className="font-medium hover:text-primary">
                      {c.title}
                    </Link>
                    <div className="text-xs text-muted-foreground">{c.case_number}</div>
                  </td>
                  <td className="px-4 py-3 text-muted-foreground">{c.client?.name ?? "—"}</td>
                  <td className="px-4 py-3">
                    <Badge variant="outline" className={statusBadgeClass(c.status)}>{c.status.replace("_", " ")}</Badge>
                  </td>
                  <td className="px-4 py-3 text-muted-foreground">{c.assignee?.full_name || c.assignee?.email || "—"}</td>
                  <td className="px-4 py-3 text-muted-foreground">{formatDate(c.opened_at)}</td>
                  <td className="px-4 py-3 text-right">
                    <Button
                      size="icon"
                      variant="ghost"
                      title={c.archived_at ? "Restore" : "Archive"}
                      onClick={() => onArchive(c.id, !c.archived_at)}
                    >
                      {c.archived_at ? <ArchiveRestore className="h-4 w-4" /> : <Archive className="h-4 w-4" />}
                    </Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </CardContent>
      </Card>
    </PageContainer>
  );
}