"use client";

// The deploy ladder entry: choose a scale (single / team / company / org) then
// branch into the matching wizard. Single = max fidelity; Team = a baseline
// topology staffed with templated agents. Company/Org are next rungs.

import { useState } from "react";

import { ComposeWizard } from "./ComposeWizard";
import { CreateClawForm } from "./CreateClawForm";
import { TeamWizard } from "./TeamWizard";

type Scope = "choose" | "single" | "team" | "company" | "org";

const TIERS: { key: Scope; title: string; blurb: string; soon?: boolean }[] = [
  { key: "single", title: "Single agent", blurb: "One agent, crafted by you — maximum control & fidelity." },
  { key: "team", title: "Team", blurb: "A baseline topology staffed with templated agents." },
  { key: "company", title: "Company", blurb: "A topology of teams." },
  { key: "org", title: "Organization", blurb: "A topology of companies." },
];

export function DeployWizard() {
  const [scope, setScope] = useState<Scope>("choose");

  if (scope === "single") return <CreateClawForm />;
  if (scope === "team") return <TeamWizard />;
  if (scope === "company") return <ComposeWizard tier="company" />;
  if (scope === "org") return <ComposeWizard tier="org" />;

  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-3 sm:grid-cols-2">
      {TIERS.map((t) => (
        <button
          key={t.title}
          type="button"
          disabled={t.soon}
          onClick={() => !t.soon && setScope(t.key)}
          className={`rounded-xl border p-4 text-left transition-colors ${
            t.soon
              ? "border-border/60 opacity-50"
              : "border-border hover:border-coral hover:bg-surface-warm"
          }`}
        >
          <p className="text-sm font-semibold text-foreground">
            {t.title}
            {t.soon ? <span className="ml-2 text-xxs text-muted-foreground">soon</span> : null}
          </p>
          <p className="mt-1 text-xs text-muted-foreground">{t.blurb}</p>
        </button>
      ))}
    </div>
  );
}