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

import { createFileRoute, Link, useNavigate } 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 { Checkbox } from "@/components/ui/checkbox";
import { SearchableSelect } from "@/components/ui/searchable-select";
import { supabase } from "@/integrations/supabase/client";
import { ClientFormDialog } from "@/components/clients/client-form-dialog";
import { Plus, Search, Building2, User, Archive, ArchiveRestore } from "lucide-react";
import { formatDate } from "@/lib/format";
import { toast } from "sonner";

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

function ClientsList() {
  const navigate = useNavigate();
  const [clients, setClients] = useState<any[]>([]);
  const [users, setUsers] = useState<any[]>([]);
  const [q, setQ] = useState("");
  const [open, setOpen] = useState(false);
  const [view, setView] = useState<"active" | "archived">("active");
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [assignTo, setAssignTo] = useState<string>("");
  const [busy, setBusy] = useState(false);

  const load = async () => {
    const [{ data: cli }, { data: usr }] = await Promise.all([
      supabase.from("clients").select("*").order("name", { ascending: true }),
      supabase.from("profiles").select("id, full_name, email").order("full_name", { ascending: true }),
    ]);
    setClients(cli ?? []);
    setUsers(usr ?? []);
  };

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

  const visible = clients.filter((c) => (view === "archived" ? c.archived_at : !c.archived_at));
  const filtered = visible.filter((c) =>
    [c.name, c.management_company, c.primary_contact_name, c.primary_contact_email]
      .filter(Boolean).join(" ").toLowerCase().includes(q.toLowerCase()),
  );

  const archivedCount = clients.filter((c) => c.archived_at).length;
  const activeCount = clients.length - archivedCount;
  const typeIcon = (t: string) => (t === "hoa" || t === "condo" ? Building2 : User);

  // Selection helpers — clear when switching views/search.
  useEffect(() => { setSelected(new Set()); }, [view]);
  const visibleIds = useMemo(() => filtered.map((c) => c.id), [filtered]);
  const allSelected = visibleIds.length > 0 && visibleIds.every((id) => selected.has(id));
  const someSelected = selected.size > 0 && !allSelected;

  const toggleAll = () => {
    if (allSelected) setSelected(new Set());
    else setSelected(new Set(visibleIds));
  };
  const toggleOne = (id: string) => {
    const next = new Set(selected);
    if (next.has(id)) next.delete(id); else next.add(id);
    setSelected(next);
  };

  const onArchive = async (id: string, archived: boolean) => {
    const patch = { archived_at: archived ? new Date().toISOString() : null };
    const { error } = await supabase.from("clients").update(patch).eq("id", id);
    if (error) toast.error(error.message);
    else { toast.success(archived ? "Client archived" : "Client restored"); load(); }
  };

  const bulkArchive = async (archived: boolean) => {
    if (selected.size === 0) return;
    setBusy(true);
    const ids = Array.from(selected);
    const { error } = await supabase
      .from("clients")
      .update({ archived_at: archived ? new Date().toISOString() : null })
      .in("id", ids);
    setBusy(false);
    if (error) toast.error(error.message);
    else {
      toast.success(`${ids.length} client(s) ${archived ? "archived" : "restored"}`);
      setSelected(new Set());
      load();
    }
  };

  const bulkAssign = async () => {
    if (selected.size === 0 || !assignTo) return;
    setBusy(true);
    const ids = Array.from(selected);
    const { error } = await supabase.from("clients").update({ created_by: assignTo }).in("id", ids);
    setBusy(false);
    if (error) toast.error(error.message);
    else {
      toast.success(`${ids.length} client(s) reassigned`);
      setSelected(new Set());
      setAssignTo("");
      load();
    }
  };

  const userOptions = users.map((u) => ({
    value: u.id,
    label: u.full_name || u.email || u.id,
    keywords: `${u.full_name || ""} ${u.email || ""}`,
  }));

  return (
    <PageContainer>
      <PageHeader
        title="Clients"
        description="HOA associations, businesses, and individual clients."
        actions={
          <Button onClick={() => setOpen(true)}>
            <Plus className="h-4 w-4 mr-2" />
            New client
          </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 by name, contact, manager…"
            className="pl-9"
          />
        </div>
      </div>

      {selected.size > 0 && (
        <div className="mb-3 flex flex-wrap items-center gap-2 rounded-md border border-border/60 bg-muted/30 px-3 py-2">
          <span className="text-sm font-medium">{selected.size} selected</span>
          <Button size="sm" variant="outline" onClick={() => setSelected(new Set())} disabled={busy}>
            Clear
          </Button>
          <div className="mx-2 h-5 w-px bg-border" />
          {view === "active" ? (
            <Button size="sm" variant="outline" onClick={() => bulkArchive(true)} disabled={busy}>
              <Archive className="h-4 w-4 mr-2" /> Archive
            </Button>
          ) : (
            <Button size="sm" variant="outline" onClick={() => bulkArchive(false)} disabled={busy}>
              <ArchiveRestore className="h-4 w-4 mr-2" /> Restore
            </Button>
          )}
          <div className="mx-2 h-5 w-px bg-border" />
          <span className="text-sm text-muted-foreground">Assign to:</span>
          <div className="w-[220px]">
            <SearchableSelect
              value={assignTo}
              onValueChange={setAssignTo}
              options={userOptions}
              placeholder="Select user…"
              searchPlaceholder="Search users…"
            />
          </div>
          <Button size="sm" onClick={bulkAssign} disabled={busy || !assignTo}>
            Apply
          </Button>
        </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="px-4 py-3 w-10">
                  <Checkbox
                    checked={allSelected ? true : someSelected ? "indeterminate" : false}
                    onCheckedChange={toggleAll}
                    aria-label="Select all"
                  />
                </th>
                <th className="text-left px-4 py-3 font-medium">Name</th>
                <th className="text-left px-4 py-3 font-medium">Type</th>
                <th className="text-left px-4 py-3 font-medium">Contact</th>
                <th className="text-left px-4 py-3 font-medium">Units</th>
                <th className="text-left px-4 py-3 font-medium">Created</th>
                <th className="text-right px-4 py-3 font-medium w-12"></th>
              </tr>
            </thead>
            <tbody>
              {filtered.length === 0 && (
                <tr>
                  <td colSpan={7} className="text-center py-12 text-muted-foreground">
                    {visible.length === 0
                      ? view === "archived"
                        ? "No archived clients."
                        : "No clients yet. Add your first one."
                      : "No matches."}
                  </td>
                </tr>
              )}
              {filtered.map((c) => {
                const Icon = typeIcon(c.client_type);
                const isChecked = selected.has(c.id);
                return (
                  <tr
                    key={c.id}
                    className="border-t hover:bg-muted/30 cursor-pointer transition-colors"
                    onClick={() => navigate({ to: "/clients/$clientId", params: { clientId: c.id } })}
                  >
                    <td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
                      <Checkbox
                        checked={isChecked}
                        onCheckedChange={() => toggleOne(c.id)}
                        aria-label={`Select ${c.name}`}
                      />
                    </td>
                    <td className="px-4 py-3">
                      <Link
                        to="/clients/$clientId"
                        params={{ clientId: c.id }}
                        className="flex items-center gap-2 font-medium text-foreground hover:text-primary"
                        onClick={(e) => e.stopPropagation()}
                      >
                        <Icon className="h-4 w-4 text-muted-foreground" />
                        {c.name}
                      </Link>
                      {c.management_company && (
                        <div className="text-xs text-muted-foreground ml-6">{c.management_company}</div>
                      )}
                    </td>
                    <td className="px-4 py-3">
                      <Badge variant="outline" className="capitalize">{c.client_type}</Badge>
                    </td>
                    <td className="px-4 py-3 text-muted-foreground">
                      {c.primary_contact_name || "—"}
                      {c.primary_contact_email && (
                        <div className="text-xs">{c.primary_contact_email}</div>
                      )}
                    </td>
                    <td className="px-4 py-3 text-muted-foreground">{c.num_units ?? "—"}</td>
                    <td className="px-4 py-3 text-muted-foreground">{formatDate(c.created_at)}</td>
                    <td className="px-4 py-3 text-right" onClick={(e) => e.stopPropagation()}>
                      <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>

      <ClientFormDialog open={open} onOpenChange={setOpen} onSaved={load} />
    </PageContainer>
  );
}