vfxreview/app/(dashboard)/clients/page.tsx

import { Metadata } from "next";
import Link from "next/link";
import { auth } from "@/auth";
import { redirect } from "next/navigation";
import { db } from "@/lib/db";
import { PlusCircle, Building2, Mail, User2, FolderOpen } from "lucide-react";
import { Button } from "@/components/ui/button";
import { NewClientDialog } from "@/components/clients/NewClientDialog";
import { cn } from "@/lib/utils";

export const metadata: Metadata = { title: "Clients" };

async function getClients() {
  return db.client.findMany({
    orderBy: { company: "asc" },
    include: { _count: { select: { projects: true } } },
  });
}

export default async function ClientsPage() {
  const session = await auth();
  if (!session || !["ADMIN", "PRODUCER"].includes(session.user.role as string)) {
    redirect("/dashboard");
  }

  const clients = await getClients();

  return (
    <div className="p-6 max-w-5xl mx-auto space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Clients</h1>
          <p className="text-sm text-zinc-400 mt-0.5">
            {clients.length} client{clients.length !== 1 ? "s" : ""} total
          </p>
        </div>
        <NewClientDialog>
          <Button className="gap-2">
            <PlusCircle className="h-4 w-4" />
            New Client
          </Button>
        </NewClientDialog>
      </div>

      {/* Grid */}
      {clients.length === 0 ? (
        <div className="rounded-xl border border-dashed border-zinc-700 bg-zinc-900/40 p-16 text-center">
          <Building2 className="h-10 w-10 mx-auto mb-3 text-zinc-600" />
          <p className="text-zinc-400 font-medium">No clients yet</p>
          <p className="text-zinc-600 text-sm mt-1">
            Add your first client to start sharing reviews.
          </p>
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {clients.map((client) => (
            <Link
              key={client.id}
              href={`/clients/${client.id}`}
              className={cn(
                "rounded-xl border border-zinc-800 bg-zinc-900 p-5 space-y-4",
                "hover:border-zinc-600 hover:bg-zinc-800/60 transition-all group"
              )}
            >
              {/* Avatar + company */}
              <div className="flex items-start gap-3">
                <div className="w-10 h-10 rounded-lg bg-zinc-800 border border-zinc-700 flex items-center justify-center shrink-0 group-hover:bg-zinc-700 transition-colors">
                  <Building2 className="h-5 w-5 text-zinc-400" />
                </div>
                <div className="min-w-0">
                  <p className="font-semibold text-white truncate">{client.company}</p>
                  <span
                    className={cn(
                      "text-xs px-2 py-0.5 rounded-full",
                      client.isActive
                        ? "bg-emerald-500/10 text-emerald-400"
                        : "bg-zinc-700 text-zinc-500"
                    )}
                  >
                    {client.isActive ? "Active" : "Inactive"}
                  </span>
                </div>
              </div>

              {/* Details */}
              <div className="space-y-1.5">
                {client.contactPerson && (
                  <div className="flex items-center gap-2 text-xs text-zinc-400">
                    <User2 className="h-3.5 w-3.5 text-zinc-600 shrink-0" />
                    <span className="truncate">{client.contactPerson}</span>
                  </div>
                )}
                {client.email && (
                  <div className="flex items-center gap-2 text-xs text-zinc-400">
                    <Mail className="h-3.5 w-3.5 text-zinc-600 shrink-0" />
                    <span className="truncate">{client.email}</span>
                  </div>
                )}
              </div>

              {/* Project count */}
              <div className="flex items-center gap-1.5 text-xs text-zinc-500 pt-2 border-t border-zinc-800">
                <FolderOpen className="h-3.5 w-3.5" />
                <span>{client._count.projects} project{client._count.projects !== 1 ? "s" : ""}</span>
              </div>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}