mylegal-stage-law/src/routes/contacts.$contactId.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 { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { supabase } from "@/integrations/supabase/client";
import { useAuth } from "@/lib/auth";
import { toast } from "sonner";
import { ArrowLeft, Edit, Trash2, Mail, Phone, MapPin, Building2, Briefcase, Users, Archive, ArchiveRestore } from "lucide-react";
import { ContactFormDialog, CONTACT_TYPES } from "@/components/contacts/contact-form-dialog";
import { setArchived } from "@/lib/archive";

export const Route = createFileRoute("/contacts/$contactId")({
  component: () => (
    <ProtectedLayout>
      <ContactDetail />
    </ProtectedLayout>
  ),
});

function ContactDetail() {
  const { contactId } = Route.useParams();
  const navigate = useNavigate();
  const { user, isAdmin } = useAuth();
  const [contact, setContact] = useState<any>(null);
  const [cases, setCases] = useState<any[]>([]);
  const [clients, setClients] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [editOpen, setEditOpen] = useState(false);

  const load = async () => {
    setLoading(true);
    const [{ data: c, error }, { data: cc }, { data: clc }] = await Promise.all([
      supabase.from("contacts").select("*").eq("id", contactId).maybeSingle(),
      supabase.from("case_contacts").select("role, case:cases(id, case_number, title, status)").eq("contact_id", contactId),
      supabase.from("client_contacts").select("role, client:clients(id, name, client_type)").eq("contact_id", contactId),
    ]);
    if (error) toast.error(error.message);
    setContact(c);
    setCases(((cc ?? []) as any[]).filter((r) => r.case));
    setClients(((clc ?? []) as any[]).filter((r) => r.client));
    setLoading(false);
  };

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

  const remove = async () => {
    if (!contact) return;
    if (!confirm(`Delete contact "${contact.name}"?`)) return;
    const { error } = await supabase.from("contacts").delete().eq("id", contactId);
    if (error) {
      toast.error(error.message);
      return;
    }
    toast.success("Contact deleted");
    navigate({ to: "/contacts" });
  };

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

  const canEdit = isAdmin || contact.created_by === user?.id;
  const typeLabel = CONTACT_TYPES.find((t) => t.value === contact.contact_type)?.label ?? contact.contact_type;
  const addr = [contact.address_line1, contact.address_line2, contact.city, contact.state, contact.postal_code].filter(Boolean).join(", ");

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

      <PageHeader
        title={contact.name}
        description={[contact.title, contact.company].filter(Boolean).join(" · ") || typeLabel}
        actions={
          <>
            {contact.archived_at && (
              <Badge variant="outline" className="bg-muted text-muted-foreground">
                <Archive className="h-3 w-3 mr-1" /> Archived
              </Badge>
            )}
            {canEdit && (
              <>
                <Button variant="outline" onClick={() => setEditOpen(true)}><Edit className="h-4 w-4 mr-2" /> Edit</Button>
                <Button
                  variant="outline"
                  onClick={async () => {
                    if (await setArchived("contacts", contact.id, !contact.archived_at)) load();
                  }}
                >
                  {contact.archived_at ? (
                    <><ArchiveRestore className="h-4 w-4 mr-2" /> Restore</>
                  ) : (
                    <><Archive className="h-4 w-4 mr-2" /> Archive</>
                  )}
                </Button>
                <Button variant="outline" onClick={remove}><Trash2 className="h-4 w-4 mr-2" /> Delete</Button>
              </>
            )}
          </>
        }
      />

      <div className="grid lg:grid-cols-3 gap-6">
        <Card className="lg:col-span-2 border-border/60">
          <CardContent className="p-5">
            <div className="flex items-center gap-2 mb-4">
              <Badge variant="outline" className="text-[10px]">{typeLabel}</Badge>
            </div>
            <dl className="grid grid-cols-2 gap-y-3 gap-x-6 text-sm">
              <DetailRow label="Email" value={contact.email} icon={Mail} />
              <DetailRow label="Phone" value={contact.phone} icon={Phone} />
              <DetailRow label="Company" value={contact.company} icon={Building2} />
              <DetailRow label="Title" value={contact.title} />
              <DetailRow label="Address" value={addr || null} icon={MapPin} />
            </dl>
            {contact.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">{contact.notes}</p>
              </div>
            )}
          </CardContent>
        </Card>

        <Card className="border-border/60 h-fit">
          <CardContent className="p-5 space-y-4">
            <div>
              <div className="flex items-center gap-2 mb-2">
                <Briefcase className="h-4 w-4 text-muted-foreground" />
                <h3 className="font-serif text-base">Cases ({cases.length})</h3>
              </div>
              {cases.length === 0 ? (
                <p className="text-xs text-muted-foreground">Not linked to any cases.</p>
              ) : (
                <div className="space-y-1">
                  {cases.map((row, i) => (
                    <Link
                      key={i}
                      to="/cases/$caseId"
                      params={{ caseId: row.case.id }}
                      className="block p-2 rounded-md hover:bg-muted/60 -mx-2"
                    >
                      <div className="text-sm font-medium truncate">{row.case.title}</div>
                      <div className="text-xs text-muted-foreground">{row.case.case_number}</div>
                    </Link>
                  ))}
                </div>
              )}
            </div>
            <div className="pt-3 border-t">
              <div className="flex items-center gap-2 mb-2">
                <Users className="h-4 w-4 text-muted-foreground" />
                <h3 className="font-serif text-base">Clients ({clients.length})</h3>
              </div>
              {clients.length === 0 ? (
                <p className="text-xs text-muted-foreground">Not linked to any clients.</p>
              ) : (
                <div className="space-y-1">
                  {clients.map((row, i) => (
                    <Link
                      key={i}
                      to="/clients/$clientId"
                      params={{ clientId: row.client.id }}
                      className="block p-2 rounded-md hover:bg-muted/60 -mx-2"
                    >
                      <div className="text-sm font-medium truncate">{row.client.name}</div>
                      <div className="text-xs text-muted-foreground capitalize">{row.client.client_type}</div>
                    </Link>
                  ))}
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      </div>

      <ContactFormDialog open={editOpen} onOpenChange={setEditOpen} contact={contact} 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>
    </>
  );
}