import Shell from "@/components/Shell";
import { requireSession, asMembershipRow } from "@/lib/session";
import { can } from "@/lib/rbac";
import { listCustomers } from "@/lib/data/customers";
import { listSites } from "@/lib/data/sites";
import { PageHeader, Card, Avatar, Badge, EmptyState } from "@/components/ui";
import AddCustomerButton from "@/components/AddCustomerButton";

export default async function CustomersPage() {
  const session = await requireSession();
  const m = asMembershipRow(session);
  const customers = listCustomers(session.orgId);
  const sites = listSites(session.orgId);

  return (
    <Shell session={session} active="/customers">
      <PageHeader
        title="Customers"
        description="Give each client visibility into only the sites you build for them"
        action={can.manageCustomers(m) ? <AddCustomerButton sites={sites} /> : undefined}
      />
      {customers.length === 0 ? (
        <Card>
          <EmptyState>No customers yet.</EmptyState>
        </Card>
      ) : (
        <div className="flex flex-col gap-3">
          {customers.map((c) => (
            <Card key={c.id} className="flex flex-col gap-3">
              <div className="flex items-center gap-3 flex-wrap">
                <Avatar name={c.name} size={34} />
                <div className="flex-1 min-w-[160px]">
                  <div className="text-sm font-bold">{c.name}</div>
                  <div className="font-mono text-[11.5px] text-text-secondary">{c.email}</div>
                </div>
                <Badge status={c.status} />
              </div>
              {c.sites.length > 0 && (
                <div className="flex gap-2 flex-wrap">
                  {c.sites.map((s) => (
                    <span
                      key={s.id}
                      className="px-2.5 py-1.5 rounded-full text-[11.5px] font-semibold bg-white/5 border border-border-input text-[#c9ccd3]"
                    >
                      {s.name}
                    </span>
                  ))}
                </div>
              )}
            </Card>
          ))}
        </div>
      )}
    </Shell>
  );
}