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 { supabase } from "@/integrations/supabase/client";
import { ClientFormDialog } from "@/components/clients/client-form-dialog";
import { Plus, Search, Building2, User, Briefcase as Building } from "lucide-react";
import { formatDate } from "@/lib/format";

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

function ClientsList() {
  const [clients, setClients] = useState<any[]>([]);
  const [q, setQ] = useState("");
  const [open, setOpen] = useState(false);

  const load = async () => {
    const { data } = await supabase
      .from("clients")
      .select("*")
      .order("name", { ascending: true });
    setClients(data ?? []);
  };

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

  const filtered = clients.filter((c) =>
    [c.name, c.management_company, c.primary_contact_name, c.primary_contact_email]
      .filter(Boolean)
      .join(" ")
      .toLowerCase()
      .includes(q.toLowerCase()),
  );

  const typeIcon = (t: string) =>
    t === "hoa" ? Building2 : t === "business" ? Building : User;

  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="relative mb-4 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>

      <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">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>
              </tr>
            </thead>
            <tbody>
              {filtered.length === 0 && (
                <tr>
                  <td colSpan={5} className="text-center py-12 text-muted-foreground">
                    {clients.length === 0 ? "No clients yet. Add your first one." : "No matches."}
                  </td>
                </tr>
              )}
              {filtered.map((c) => {
                const Icon = typeIcon(c.client_type);
                return (
                  <tr key={c.id} className="border-t hover:bg-muted/30 transition-colors">
                    <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"
                      >
                        <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>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </CardContent>
      </Card>

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