import { deployPages, removePagesPreview, rollbackPages } from "~/fns/pages";
import { useAction } from "~/hooks/use-action";
import { Badge, EmptyState, formatBytes, Panel, RelativeTime } from "~/components/ui/Primitives";
import { Button } from "~/components/ui/Button";
import { ErrorBanner } from "~/components/ui/Field";
import type { PagesData } from "./PagesSettings";

type RepoParams = { owner: string; repo: string };
type Deployment = PagesData["deployments"][number];

const STATUS_TONES = {
  queued: "neutral",
  building: "amber",
  active: "green",
  failed: "red",
  superseded: "neutral",
} as const;

function DeploymentRow({
  deployment,
  activeId,
  onRollback,
  onRemovePreview,
}: {
  deployment: Deployment;
  activeId: string | null;
  onRollback: (id: string) => void;
  onRemovePreview: (prNumber: number) => void;
}) {
  const live = deployment.status === "active";
  const prNumber = deployment.prNumber;
  return (
    <li className="flex flex-wrap items-center gap-3 px-4 py-2.5 text-sm">
      <Badge tone={STATUS_TONES[deployment.status]}>{deployment.status}</Badge>
      <span className="text-gray-200">
        {deployment.environment === "preview" ? `Preview #${deployment.prNumber}` : "Production"}
      </span>
      <code className="font-mono text-xs text-gray-500">
        {deployment.ref}@{deployment.sha.slice(0, 7)}
      </code>
      <span className="text-xs text-gray-500">{deployment.source === "artifact" ? "artifact" : "branch"}</span>
      {deployment.fileCount > 0 && (
        <span className="text-xs text-gray-500">
          {deployment.fileCount} files, {formatBytes(deployment.totalBytes)}
        </span>
      )}
      {deployment.error && <span className="w-full text-xs text-red-300">{deployment.error}</span>}
      <span className="ml-auto text-xs text-gray-500">
        <RelativeTime timestamp={deployment.createdAt} />
      </span>
      {live && deployment.url && (
        <a href={deployment.url} target="_blank" rel="noreferrer" className="text-xs text-accent-400 hover:underline">
          Visit
        </a>
      )}
      {deployment.environment === "production" && deployment.status === "superseded" && deployment.id !== activeId && (
        <Button size="sm" onClick={() => onRollback(deployment.id)}>
          Roll back
        </Button>
      )}
      {deployment.environment === "preview" && live && prNumber !== null && (
        <Button size="sm" variant="danger" onClick={() => onRemovePreview(prNumber)}>
          Remove preview
        </Button>
      )}
    </li>
  );
}

export function PagesDeployments({ data, params }: { data: PagesData; params: RepoParams }) {
  const deploy = useAction(deployPages);
  const rollback = useAction(rollbackPages);
  const remove = useAction(removePagesPreview);
  if (!data.site) return null;
  return (
    <Panel
      title="Deployments"
      actions={
        <Button size="sm" variant="primary" pending={deploy.pending} onClick={() => deploy.run({ data: params })}>
          Deploy now
        </Button>
      }
    >
      <div className="px-4 pt-3 empty:hidden">
        <ErrorBanner message={deploy.error ?? rollback.error ?? remove.error} />
      </div>
      {data.deployments.length === 0 ? (
        <EmptyState title="No deployments yet">Push to the configured branch or deploy now.</EmptyState>
      ) : (
        <ul className="divide-y divide-gray-800">
          {data.deployments.map((deployment) => (
            <DeploymentRow
              key={deployment.id}
              deployment={deployment}
              activeId={data.site?.activeDeploymentId ?? null}
              onRollback={(deploymentId) => rollback.run({ data: { ...params, deploymentId } })}
              onRemovePreview={(prNumber) => remove.run({ data: { ...params, prNumber } })}
            />
          ))}
        </ul>
      )}
    </Panel>
  );
}