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

export default async function DeploymentsPage() {
  const session = await requireSession();
  const deployments = listDeployments(session.orgId) as any[];

  return (
    <Shell session={session} active="/deployments">
      <PageHeader title="Deployments" description="Latest activity across every site" />
      <Card className="p-0 overflow-hidden">
        {deployments.length === 0 ? (
          <EmptyState>No deployments yet.</EmptyState>
        ) : (
          deployments.map((d) => (
            <ListRow key={d.id}>
              <span
                className="flex-none px-2.5 py-1 rounded-full text-[10.5px] font-bold"
                style={{
                  background: d.status === "Success" ? "rgba(61,220,132,0.14)" : "rgba(245,69,92,0.14)",
                  color: d.status === "Success" ? "#3ddc84" : "#f5455c",
                }}
              >
                {d.status}
              </span>
              <span className="text-[12.5px] font-bold flex-none w-[110px] truncate">
                {d.site_name}
              </span>
              <span className="flex-1 text-sm min-w-[160px] truncate">{d.message}</span>
              <span className="font-mono text-[11.5px] text-text-tertiary flex-none">
                {new Date(d.created_at).toLocaleString()}
              </span>
            </ListRow>
          ))
        )}
      </Card>
    </Shell>
  );
}