import Shell from "@/components/Shell";
import { requireSession } from "@/lib/session";
import { listDomains } from "@/lib/data/sites";
import { PageHeader, Card, ListRow, Badge, EmptyState } from "@/components/ui";

export default async function DomainsPage() {
  const session = await requireSession();
  const domains = listDomains(session.orgId) as any[];

  return (
    <Shell session={session} active="/domains">
      <PageHeader title="Domains" description="All domains connected across your sites" />
      <Card className="p-0 overflow-hidden">
        {domains.length === 0 ? (
          <EmptyState>No domains yet.</EmptyState>
        ) : (
          domains.map((d) => (
            <ListRow key={d.domain}>
              <span className="font-mono text-sm font-semibold flex-1 min-w-[180px]">
                {d.domain}
              </span>
              <span className="text-[12.5px] text-text-secondary flex-none min-w-[110px]">
                {d.site_name}
              </span>
              <Badge status={d.status === "Active" ? "ACTIVE" : d.status} />
            </ListRow>
          ))
        )}
      </Card>
    </Shell>
  );
}