import { reviewDeployment } from "~/fns/deployments";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/components/ui/Button";
import { ErrorBanner } from "~/components/ui/Field";

type PendingDeployment = {
  id: string;
  environment: string;
  waitUntil: number | null;
  needsReview: boolean;
  canReview: boolean;
};

/** Banner for jobs held by environment protection rules, with approve/reject for required reviewers. */
export function DeploymentGate({
  owner,
  repo,
  deployments,
}: {
  owner: string;
  repo: string;
  deployments: PendingDeployment[];
}) {
  const review = useAction(reviewDeployment);
  if (deployments.length === 0) return null;
  return (
    <div className="space-y-2 rounded-md border border-amber-800 bg-amber-950/30 px-4 py-3 text-sm text-amber-200">
      <ErrorBanner message={review.error} />
      {deployments.map((deployment) => (
        <div key={deployment.id} className="flex flex-wrap items-center gap-3">
          <span>
            Deployment to <span className="font-medium text-amber-100">{deployment.environment}</span>{" "}
            {deployment.needsReview ? "is waiting for a required reviewer" : "is waiting"}
            {deployment.waitUntil && deployment.waitUntil > Date.now() && (
              <>
                {" "}
                · wait timer ends at{" "}
                <time suppressHydrationWarning>{new Date(deployment.waitUntil).toLocaleTimeString()}</time>
              </>
            )}
          </span>
          {deployment.canReview && (
            <span className="ml-auto flex gap-2">
              <Button
                size="sm"
                variant="danger"
                pending={review.pending}
                onClick={() => review.run({ data: { owner, repo, id: deployment.id, approve: false } })}
              >
                Reject
              </Button>
              <Button
                size="sm"
                variant="primary"
                pending={review.pending}
                onClick={() => review.run({ data: { owner, repo, id: deployment.id, approve: true } })}
              >
                Approve and deploy
              </Button>
            </span>
          )}
        </div>
      ))}
    </div>
  );
}