import type { Installation } from "../installation-metadata.ts";

const stages = [
  ["preparing", "Preparing your account"],
  ["deploying", "Deploying Flarebot"],
  ["provisioning", "Provisioning your Sandbox"],
  ["verifying", "Verifying installation"],
] as const;

export function InstallationProgress({
  installation,
  updating = false,
}: {
  installation: Pick<Installation, "status" | "progress"> | null;
  updating?: boolean;
}) {
  const ready = installation?.status === "ready";
  const failed = installation?.status === "failed";
  const stage = ready
    ? stages.length
    : stages.findIndex(([value]) => value === installation?.progress);
  const completed = Math.max(0, stage) + 1;
  const total = stages.length + 1;
  const label = updating ? "Update progress" : "Installation progress";
  const summary = ready
    ? updating
      ? "Update complete"
      : "Installation complete"
    : failed
      ? "Needs attention"
      : stage >= 0
        ? stages[stage][1]
        : installation?.status === "reserved"
          ? "Ready to install"
          : updating
            ? "Preparing update…"
            : "Preparing installation…";

  return (
    <div className="installation-progress" data-status={installation?.status}>
      <div className="progress-heading" role="status">
        <span className="progress-label">{summary}</span>
        {installation && (
          <span>
            {completed} of {total} steps complete
          </span>
        )}
      </div>
      <progress
        className="installation-progress-bar"
        aria-label={label}
        aria-valuetext={
          installation
            ? `${completed} of ${total} steps complete. ${summary}`
            : summary
        }
        max={total}
        value={installation ? completed : undefined}
      />
      {installation && (
        <details className="progress-details" open={!ready}>
          <summary>View {updating ? "update" : "installation"} steps</summary>
          <ol className="progress" aria-label={`${label} steps`}>
            <li data-state="complete">
              <span className="step-state">Complete</span>
              <span>Cloudflare account connected</span>
            </li>
            {stages.map(([value, name], index) => (
              <li
                key={value}
                data-state={
                  index < stage
                    ? "complete"
                    : index === stage
                      ? failed
                        ? "stopped"
                        : "active"
                      : "waiting"
                }
                aria-current={stage === index ? "step" : undefined}
              >
                <span className="step-state">
                  {index < stage
                    ? "Complete"
                    : index === stage
                      ? failed
                        ? "Stopped"
                        : "In progress"
                      : "Waiting"}
                </span>
                <span>{name}</span>
              </li>
            ))}
          </ol>
        </details>
      )}
    </div>
  );
}