mylegal-stage-law/src/routes/clients.$clientId.tsx

import { createFileRoute, Link, useNavigate } 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 { Badge } from "@/components/ui/badge";
import { supabase } from "@/integrations/supabase/client";
import { ClientFormDialog } from "@/components/clients/client-form-dialog";
import { useAuth } from "@/lib/auth";
import { ArrowLeft, Edit, Plus, Building2, User, Briefcase as Building, MapPin, Mail, Phone, Users } from "lucide-react";
import { formatCurrency, formatDate, statusBadgeClass } from "@/lib/format";
import { toast } from "sonner";

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

function ClientDetail() {
  const { clientId } = Route.useParams();
  const navigate = useNavigate();
  const { user, isAdmin } = useAuth();
  const [client, setClient] = useState<any>(null);
  const [cases, setCases] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [editOpen, setEditOpen] = useState(false);

  const load = async () => {
    setLoading(true);
    const [{ data: c, error: ce }, { data: cs }] = await Promise.all([
      supabase.from("clients").select("*").eq("id", clientId).maybeSingle(),
      supabase.from("cases").select("id, case_number, title, status, opened_at").eq("client_id", clientId).order("opened_at", { ascending: false }),
    ]);
    if (ce) toast.error("Failed to load client", { description: ce.message });
    const caseIds = (cs ?? []).map((x: any) => x.id);
    let totals: Record<string, { hours: number; amount: number }> = {};
    if (caseIds.length) {
      const { data: te } = await supabase
        .from("time_entries")
        .select("case_id, hours, hourly_rate, billable")
        .in("case_id", caseIds)
        .eq("billable", true);
      (te ?? []).forEach((t: any) => {
        const h = Number(t.hours) || 0;
        const r = Number(t.hourly_rate) || 0;
        if (!totals[t.case_id]) totals[t.case_id] = { hours: 0, amount: 0 };
        totals[t.case_id].hours += h;
        totals[t.case_id].amount += h * r;
      });
    }
    setClient(c);
    setCases((cs ?? []).map((x: any) => ({ ...x, billed: totals[x.id] ?? { hours: 0, amount: 0 } })));
    setLoading(false);
  };

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

  if (loading) {
    return (
      <PageContainer>
        <p className="text-muted-foreground">Loading…</p>
      </PageContainer>
    );
  }

  if (!client) {
    return (
      <PageContainer>
        <p className="text-muted-foreground">Client not found.</p>
        <Button variant="outline" className="mt-3" asChild>
          <Link to="/clients"><ArrowLeft className="h-4 w-4 mr-2" /> Back to clients</Link>
        </Button>
      </PageContainer>
    );
  }

  const Icon =
    client.client_type === "hoa" || client.client_type === "condo" ? Building2 : User;
  const canEdit = isAdmin || client.created_by === user?.id;

  return (
    <PageContainer>
      <Button variant="ghost" size="sm" asChild className="mb-3 -ml-2">
        <Link to="/clients"><ArrowLeft className="h-4 w-4 mr-1" /> All clients</Link>
      </Button>

      <PageHeader
        title={client.name}
        description={client.management_company || client.client_type.toUpperCase()}
        actions={
          <>
            {canEdit && (
              <Button variant="outline" onClick={() => setEditOpen(true)}>
                <Edit className="h-4 w-4 mr-2" /> Edit
              </Button>
            )}
            <Button onClick={() => navigate({ to: "/cases/new", search: { clientId: client.id } })}>
              <Plus className="h-4 w-4 mr-2" /> New case
            </Button>
          </>
        }
      />

      <div className="grid lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          <Card className="border-border/60">
            <CardContent className="p-5">
              <div className="flex items-center gap-2 mb-4">
                <Icon className="h-4 w-4 text-muted-foreground" />
                <h3 className="font-serif text-lg">Details</h3>
              </div>
              <dl className="grid grid-cols-2 gap-y-3 gap-x-6 text-sm">
                <DetailRow label="Type" value={client.client_type} />
                {(client.client_type === "hoa" || client.client_type === "condo") && (
                  <>
                    <DetailRow label="Units" value={client.num_units} />
                    <DetailRow label="Management Co." value={client.management_company} />
                    <DetailRow
                      label="Interest rate"
                      value={
                        client.annual_interest_rate != null
                          ? `${client.annual_interest_rate}% per annum`
                          : null
                      }
                    />
                  </>
                )}
                <DetailRow label="Primary contact" value={client.primary_contact_name} />
                <DetailRow label="Email" value={client.primary_contact_email} icon={Mail} />
                <DetailRow label="Phone" value={client.primary_contact_phone} icon={Phone} />
                <DetailRow
                  label="Address"
                  value={
                    [client.address_line1, client.city, client.state, client.postal_code]
                      .filter(Boolean)
                      .join(", ") || null
                  }
                  icon={MapPin}
                />
              </dl>
              {client.notes && (
                <div className="mt-4 pt-4 border-t">
                  <div className="text-xs uppercase tracking-wider text-muted-foreground mb-1">Notes</div>
                  <p className="text-sm whitespace-pre-wrap">{client.notes}</p>
                </div>
              )}
            </CardContent>
          </Card>

          {(client.client_type === "hoa" || client.client_type === "condo") && client.board_members?.length > 0 && (
            <Card className="border-border/60">
              <CardContent className="p-5">
                <div className="flex items-center gap-2 mb-3">
                  <Users className="h-4 w-4 text-muted-foreground" />
                  <h3 className="font-serif text-lg">Board members</h3>
                </div>
                <div className="divide-y">
                  {client.board_members.map((m: any, i: number) => (
                    <div key={i} className="py-2.5 flex flex-wrap items-baseline gap-x-4 gap-y-1 text-sm">
                      <span className="font-medium">{m.name}</span>
                      {m.role && <span className="text-xs uppercase tracking-wider text-muted-foreground">{m.role}</span>}
                      {m.email && <span className="text-muted-foreground">{m.email}</span>}
                      {m.phone && <span className="text-muted-foreground">{m.phone}</span>}
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}
        </div>

        <Card className="border-border/60 h-fit">
          <CardContent className="p-5">
            <h3 className="font-serif text-lg mb-3">Cases</h3>
            {cases.length === 0 && <p className="text-sm text-muted-foreground">No cases yet.</p>}
            <div className="space-y-1">
              {cases.map((c) => (
                <Link
                  key={c.id}
                  to="/cases/$caseId"
                  params={{ caseId: c.id }}
                  className="block p-2.5 rounded-md hover:bg-muted/60 -mx-2"
                >
                  <div className="flex items-center justify-between gap-2">
                    <span className="text-sm font-medium truncate">{c.title}</span>
                    <Badge variant="outline" className={`text-[10px] ${statusBadgeClass(c.status)}`}>
                      {c.status.replace("_", " ")}
                    </Badge>
                  </div>
                  <div className="text-xs text-muted-foreground">
                    {c.case_number} · opened {formatDate(c.opened_at)}
                  </div>
                  <div className="text-xs text-muted-foreground mt-0.5">
                    Billed: {c.billed.hours.toFixed(1)} hr · {formatCurrency(c.billed.amount)}
                  </div>
                </Link>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

      <ClientFormDialog open={editOpen} onOpenChange={setEditOpen} client={client} onSaved={load} />
    </PageContainer>
  );
}

function DetailRow({ label, value, icon: Icon }: { label: string; value: any; icon?: any }) {
  return (
    <>
      <dt className="text-xs uppercase tracking-wider text-muted-foreground self-center">{label}</dt>
      <dd className="text-sm flex items-center gap-1.5">
        {Icon && value && <Icon className="h-3 w-3 text-muted-foreground" />}
        {value || <span className="text-muted-foreground italic">—</span>}
      </dd>
    </>
  );
}