mylegal-stage-law/src/routes/collections.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 { supabase } from "@/integrations/supabase/client";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { formatCurrency, formatDate } from "@/lib/format";
import { ChevronRight, Wallet, Search } from "lucide-react";

export const Route = createFileRoute("/collections/")({
  component: CollectionsIndexPage,
});

interface Stage {
  key: string;
  label: string;
  sort_order: number;
}

function CollectionsIndexPage() {
  const [rows, setRows] = useState<any[]>([]);
  const [balances, setBalances] = useState<Record<string, number>>({});
  const [openTaskCounts, setOpenTaskCounts] = useState<Record<string, number>>({});
  const [stages, setStages] = useState<Stage[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [stageFilter, setStageFilter] = useState<string>("all");

  const load = async () => {
    setLoading(true);
    const [{ data: cols }, { data: stgs }] = await Promise.all([
      supabase
        .from("collections")
        .select(
          "id, status, current_stage, opened_at, homeowner:homeowners(id, first_name, last_name, unit_number, opening_balance), case:cases(id, case_number, title, client:clients(id, name))",
        )
        .order("created_at", { ascending: false }),
      supabase
        .from("collection_workflow_stages")
        .select("*")
        .order("sort_order"),
    ]);
    const list = cols ?? [];
    setRows(list);
    setStages((stgs ?? []) as Stage[]);

    if (list.length) {
      const ids = list.map((c: any) => c.id);
      const [{ data: ents }, { data: tasks }] = await Promise.all([
        supabase
          .from("collection_ledger_entries")
          .select("collection_id, debit, credit")
          .in("collection_id", ids),
        supabase
          .from("collection_tasks")
          .select("collection_id")
          .in("collection_id", ids)
          .eq("done", false),
      ]);
      const balMap: Record<string, number> = {};
      list.forEach((c: any) => {
        balMap[c.id] = Number(c.homeowner?.opening_balance ?? 0);
      });
      (ents ?? []).forEach((e: any) => {
        balMap[e.collection_id] =
          (balMap[e.collection_id] ?? 0) + Number(e.debit) - Number(e.credit);
      });
      setBalances(balMap);

      const taskMap: Record<string, number> = {};
      (tasks ?? []).forEach((t: any) => {
        taskMap[t.collection_id] = (taskMap[t.collection_id] ?? 0) + 1;
      });
      setOpenTaskCounts(taskMap);
    }
    setLoading(false);
  };

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

  const stageLabel = (key: string | null) =>
    stages.find((s) => s.key === key)?.label ?? key ?? "—";

  const filtered = rows.filter((r) => {
    if (stageFilter !== "all" && r.current_stage !== stageFilter) return false;
    if (!search.trim()) return true;
    const q = search.toLowerCase();
    return (
      `${r.homeowner?.first_name ?? ""} ${r.homeowner?.last_name ?? ""}`
        .toLowerCase()
        .includes(q) ||
      (r.case?.case_number ?? "").toLowerCase().includes(q) ||
      (r.case?.client?.name ?? "").toLowerCase().includes(q) ||
      (r.homeowner?.unit_number ?? "").toLowerCase().includes(q)
    );
  });

  return (
    <ProtectedLayout>
      <PageContainer>
        <PageHeader
          title="Collections"
          description="All homeowner collections across every matter."
        />
        <div className="flex gap-3 mb-4 flex-wrap">
          <div className="relative flex-1 min-w-[260px] max-w-md">
            <Search className="h-4 w-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
            <Input
              placeholder="Search homeowner, HOA, case…"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="pl-9"
            />
          </div>
          <Select value={stageFilter} onValueChange={setStageFilter}>
            <SelectTrigger className="w-[260px]">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All stages</SelectItem>
              {stages.map((s) => (
                <SelectItem key={s.key} value={s.key}>
                  {s.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <Card className="border-border/60">
          <CardContent className="p-0">
            {loading ? (
              <div className="p-12 text-center text-muted-foreground text-sm">
                Loading…
              </div>
            ) : filtered.length === 0 ? (
              <div className="p-16 text-center text-muted-foreground text-sm">
                <Wallet className="h-8 w-8 mx-auto mb-3 opacity-40" />
                No collections found.
              </div>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Homeowner</TableHead>
                    <TableHead>HOA / Case</TableHead>
                    <TableHead>Stage</TableHead>
                    <TableHead className="text-center">Open tasks</TableHead>
                    <TableHead>Opened</TableHead>
                    <TableHead className="text-right">Balance</TableHead>
                    <TableHead></TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filtered.map((r) => {
                    const bal = balances[r.id] ?? 0;
                    const tcount = openTaskCounts[r.id] ?? 0;
                    return (
                      <TableRow
                        key={r.id}
                        className="cursor-pointer"
                        onClick={() => {}}
                      >
                        <TableCell className="font-medium">
                          <Link
                            to="/collections/$collectionId"
                            params={{ collectionId: r.id }}
                            className="hover:underline"
                          >
                            {r.homeowner?.last_name}, {r.homeowner?.first_name}
                            {r.homeowner?.unit_number && (
                              <span className="text-muted-foreground font-normal ml-1">
                                · Unit {r.homeowner.unit_number}
                              </span>
                            )}
                          </Link>
                        </TableCell>
                        <TableCell className="text-sm">
                          <div>{r.case?.client?.name}</div>
                          <div className="text-xs text-muted-foreground">
                            {r.case?.case_number} · {r.case?.title}
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge variant="outline" className="text-[10px]">
                            {stageLabel(r.current_stage)}
                          </Badge>
                        </TableCell>
                        <TableCell className="text-center">
                          {tcount > 0 ? (
                            <Badge className="text-[10px]">{tcount}</Badge>
                          ) : (
                            <span className="text-xs text-muted-foreground">
                              —
                            </span>
                          )}
                        </TableCell>
                        <TableCell className="text-muted-foreground text-sm">
                          {formatDate(r.opened_at)}
                        </TableCell>
                        <TableCell
                          className={`text-right font-mono ${
                            bal > 0
                              ? "text-destructive font-semibold"
                              : bal < 0
                                ? "text-emerald-600"
                                : ""
                          }`}
                        >
                          {formatCurrency(Math.abs(bal))}
                          {bal < 0 ? " CR" : ""}
                        </TableCell>
                        <TableCell className="text-right">
                          <Link
                            to="/collections/$collectionId"
                            params={{ collectionId: r.id }}
                          >
                            <ChevronRight className="h-4 w-4 text-muted-foreground inline" />
                          </Link>
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            )}
          </CardContent>
        </Card>
      </PageContainer>
    </ProtectedLayout>
  );
}