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

import { createFileRoute, Link } from "@tanstack/react-router";
import { useEffect, 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 } from "lucide-react";
import { formatDate, statusBadgeClass } from "@/lib/format";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { setArchived } from "@/lib/archive";

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 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 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();
  };

  return (
    <PageContainer>
      <PageHeader
        title="Cases"
        description="Matters assigned to you and ones you've created."
        actions={
          <Button asChild>
            <Link to="/cases/new"><Plus className="h-4 w-4 mr-2" /> New case</Link>
          </Button>
        }
      />

      <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>
                <th className="text-left px-4 py-3 font-medium">Case</th>
                <th className="text-left px-4 py-3 font-medium">Client</th>
                <th className="text-left px-4 py-3 font-medium">Status</th>
                <th className="text-left px-4 py-3 font-medium">Attorney</th>
                <th className="text-left px-4 py-3 font-medium">Opened</th>
                <th className="text-right px-4 py-3 font-medium w-12"></th>
              </tr>
            </thead>
            <tbody>
              {filtered.length === 0 && (
                <tr><td colSpan={6} className="text-center py-12 text-muted-foreground">
                  {view === "archived" ? "No archived cases." : "No cases."}
                </td></tr>
              )}
              {filtered.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>
  );
}