"use client";

// MissionWizard — unified 5-step wizard replacing ResearchWizard +
// LoopsWizard.
//   1. Template   — pick one of the 5 workflow templates (or custom)
//   2. Target     — repo picker (when template requires) + subject/prompt
//   3. Team       — bind existing team (later slices: team template + auto-provision)
//   4. Schedule   — one-shot / cron / on-event
//   5. Review     — plan preview + launch
//
// Slice 2 ships a minimal implementation that creates a mission with
// the template's canned phase composition; Slice 4 threads the TOML
// recipe engine through here for real template dispatch.

import { useEffect, useMemo, useState } from "react";
import { X } from "lucide-react";

import {
  createMission,
  presetForKind,
  TEMPLATE_PRESETS,
  type Schedule,
  type TemplateKind,
  type TemplatePreset,
} from "@/lib/api/missions";
import {
  listTeamTemplates,
  type TeamTemplate,
} from "@/lib/api/team-templates";
import { RepoPicker, type PickedRepo } from "./RepoPicker";

const mono =
  "ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, monospace";

type Step = 1 | 2 | 3 | 4 | 5;

export function MissionWizard({
  onClose,
  onCreated,
}: {
  onClose: () => void;
  onCreated: (id: string) => void;
}) {
  const [step, setStep] = useState<Step>(1);
  const [templateKind, setTemplateKind] = useState<TemplateKind>("research_only");
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [repo, setRepo] = useState<PickedRepo | null>(null);
  const [teamTemplateId, setTeamTemplateId] = useState<string>("");
  const [teamTemplates, setTeamTemplates] = useState<TeamTemplate[]>([]);
  useEffect(() => {
    (async () => {
      try {
        setTeamTemplates(await listTeamTemplates());
      } catch {
        // Non-fatal: user can still create a mission without a team template.
      }
    })();
  }, []);
  const [scheduleKind, setScheduleKind] = useState<"one_shot" | "cron">("one_shot");
  const [cron, setCron] = useState("0 */6 * * *");
  const [runtimeKind, setRuntimeKind] = useState<"zeroclaw" | "local_herdr">("zeroclaw");
  const [targetNodeId, setTargetNodeId] = useState<string>("");
  const [onlineNodes, setOnlineNodes] = useState<
    Array<{ id: string; name: string }>
  >([]);
  useEffect(() => {
    (async () => {
      try {
        const r = await fetch("/api/nodes");
        if (!r.ok) return;
        const data = (await r.json()) as {
          nodes?: Array<{ id: string; name: string; status: string }>;
        };
        setOnlineNodes(
          (data.nodes ?? [])
            .filter((n) => n.status === "online")
            .map((n) => ({ id: n.id, name: n.name })),
        );
      } catch {
        // Non-fatal — user can still pick zeroclaw runtime without nodes.
      }
    })();
  }, []);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const preset: TemplatePreset = useMemo(
    () => presetForKind(templateKind) ?? TEMPLATE_PRESETS[0],
    [templateKind],
  );

  const canNext =
    (step === 1 && !!templateKind) ||
    (step === 2 &&
      title.trim().length > 0 &&
      (!preset.requiresRepo || repo !== null)) ||
    step === 3 ||
    (step === 4 &&
      (runtimeKind === "zeroclaw" || targetNodeId !== ""));

  async function submit() {
    setError(null);
    setSubmitting(true);
    try {
      const schedule: Schedule =
        scheduleKind === "cron" ? { kind: "cron", cron } : { kind: "one_shot" };
      const created = await createMission({
        title: title.trim(),
        template_kind: templateKind,
        repo_id: repo?.repo_id,
        team_template_id: teamTemplateId || undefined,
        schedule,
        description: description.trim() || undefined,
        phases: preset.phases,
        runtime_kind: runtimeKind,
        target_node_id:
          runtimeKind === "local_herdr" ? targetNodeId : undefined,
      });
      onCreated(created.id);
    } catch (e) {
      setError(e instanceof Error ? e.message : "create failed");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div
      onClick={onClose}
      role="presentation"
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 110,
        background: "rgba(0,0,0,.62)",
        backdropFilter: "blur(4px)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: 24,
        animation: "cm-fade .18s ease",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        role="dialog"
        aria-modal="true"
        aria-label="New mission"
        style={{
          width: "100%",
          maxWidth: 720,
          maxHeight: "88vh",
          display: "flex",
          flexDirection: "column",
          borderRadius: 16,
          background: "#0d0d10",
          border: "1px solid rgba(255,255,255,.1)",
          boxShadow: "0 30px 90px rgba(0,0,0,.6)",
          overflow: "hidden",
          animation: "scale-in .18s ease",
        }}
      >
        <div
          style={{
            flex: "none",
            display: "flex",
            alignItems: "center",
            gap: 11,
            padding: "16px 20px",
            borderBottom: "1px solid rgba(255,255,255,.07)",
          }}
        >
          <span
            style={{
              fontFamily: mono,
              fontSize: 10,
              letterSpacing: ".14em",
              color: "#5ec8d8",
            }}
          >
            STEP {step} / 5
          </span>
          <span style={{ fontSize: 15, fontWeight: 700, color: "#f3f3f5" }}>
            New mission
          </span>
          <button
            type="button"
            onClick={onClose}
            aria-label="Close"
            style={{
              marginLeft: "auto",
              width: 28,
              height: 28,
              borderRadius: 8,
              border: "1px solid rgba(255,255,255,.12)",
              background: "transparent",
              color: "#9a9aa2",
              cursor: "pointer",
            }}
          >
            <X aria-hidden size={14} />
          </button>
        </div>

        <div style={{ flex: 1, minHeight: 0, overflow: "auto", padding: 20 }}>
          {step === 1 && (
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <span style={labelStyle}>Template</span>
              <p style={hintStyle}>
                Pick the workflow shape. This decides which phases run and what
                the coding/research agents are asked to do.
              </p>
              <div
                style={{
                  display: "grid",
                  gridTemplateColumns: "1fr",
                  gap: 8,
                  marginTop: 4,
                }}
              >
                {TEMPLATE_PRESETS.map((p) => {
                  const active = p.kind === templateKind;
                  return (
                    <button
                      key={p.kind}
                      type="button"
                      onClick={() => setTemplateKind(p.kind)}
                      style={{
                        textAlign: "left",
                        padding: 12,
                        borderRadius: 10,
                        border: `1px solid ${active ? "rgba(255,138,122,.6)" : "rgba(255,255,255,.1)"}`,
                        background: active
                          ? "rgba(255,138,122,.08)"
                          : "#101014",
                        cursor: "pointer",
                        color: "#eaeaee",
                        display: "flex",
                        flexDirection: "column",
                        gap: 4,
                      }}
                    >
                      <span
                        style={{
                          fontWeight: 700,
                          fontSize: 13.5,
                          color: "#f3f3f5",
                        }}
                      >
                        {p.title}
                      </span>
                      <span style={{ fontSize: 12, color: "#a0a0a8", lineHeight: 1.5 }}>
                        {p.blurb}
                      </span>
                      <span
                        style={{
                          fontFamily: mono,
                          fontSize: 10,
                          color: "#7cd6e0",
                          marginTop: 4,
                        }}
                      >
                        {p.phases.map((ph) => ph.kind).join(" → ")}
                        {p.requiresRepo ? " · needs repo" : ""}
                      </span>
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          {step === 2 && (
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <label style={labelStyle} htmlFor="mission-title">
                Title
              </label>
              <input
                id="mission-title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                placeholder="e.g. ClawHDF5 spec — memory engine v3"
                style={fieldStyle}
              />
              <label style={labelStyle} htmlFor="mission-desc">
                Description / prompt
              </label>
              <textarea
                id="mission-desc"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                rows={5}
                placeholder="What should the mission accomplish? The template's agents will use this as their driving prompt."
                style={{ ...fieldStyle, resize: "vertical", fontFamily: "inherit" }}
              />
              {preset.requiresRepo && (
                <>
                  <span style={labelStyle}>Repository</span>
                  <p style={hintStyle}>
                    {preset.title} needs a repo bound so agents can read + write
                    /workspace/repo.
                  </p>
                  <RepoPicker value={repo} onChange={setRepo} />
                </>
              )}
            </div>
          )}

          {step === 3 && (
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <span style={labelStyle}>Team template</span>
              <p style={hintStyle}>
                Pick a canonical roster. On mission launch the team is
                materialized from the template — roles, prompts, MCP bundles,
                and (later) skills + brain seeds. Leave unset to let the
                mission auto-provision an LLM-derived team from the prompt.
              </p>
              <div style={{ display: "grid", gap: 8 }}>
                <button
                  type="button"
                  onClick={() => setTeamTemplateId("")}
                  style={{
                    ...templateCardStyle(teamTemplateId === ""),
                  }}
                >
                  <span style={{ fontWeight: 700, color: "#f3f3f5" }}>
                    LLM auto-provision
                  </span>
                  <span style={{ fontSize: 12, color: "#a0a0a8" }}>
                    Let Claude Sonnet 5 derive 3–5 roles from the description.
                    Best for one-off or exploratory missions.
                  </span>
                </button>
                {teamTemplates.map((t) => {
                  const active = teamTemplateId === t.id;
                  return (
                    <button
                      key={t.id}
                      type="button"
                      onClick={() => setTeamTemplateId(t.id)}
                      style={templateCardStyle(active)}
                    >
                      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                        <span style={{ fontWeight: 700, color: "#f3f3f5", fontSize: 13.5 }}>
                          {t.name}
                        </span>
                        {t.source === "builtin" && (
                          <span
                            style={{
                              fontFamily: mono,
                              fontSize: 9.5,
                              color: "#7cd6e0",
                              letterSpacing: ".1em",
                            }}
                          >
                            BUILTIN
                          </span>
                        )}
                        <span
                          style={{
                            marginLeft: "auto",
                            fontFamily: mono,
                            fontSize: 10,
                            color: "#8a8a92",
                          }}
                        >
                          {t.default_topology} · {t.risk_profile}
                        </span>
                      </div>
                      {t.description && (
                        <span style={{ fontSize: 12, color: "#a0a0a8", lineHeight: 1.5 }}>
                          {t.description}
                        </span>
                      )}
                      <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
                        {t.stack.map((s) => (
                          <span
                            key={s}
                            style={{
                              fontFamily: mono,
                              fontSize: 10,
                              padding: "2px 7px",
                              borderRadius: 999,
                              border: "1px solid rgba(255,255,255,.1)",
                              color: "#cfcfd5",
                            }}
                          >
                            {s}
                          </span>
                        ))}
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          {step === 4 && (
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <span style={labelStyle}>Runtime</span>
              <label style={radioRowStyle(runtimeKind === "zeroclaw")}>
                <input
                  type="radio"
                  checked={runtimeKind === "zeroclaw"}
                  onChange={() => {
                    setRuntimeKind("zeroclaw");
                    setTargetNodeId("");
                  }}
                />
                <div>
                  <div style={{ fontWeight: 600, color: "#f3f3f5" }}>
                    Hosted (ZeroClaw)
                  </div>
                  <div style={hintStyle}>
                    Runs headlessly in the shared ZeroClaw daemon. Default. No
                    fleet node required.
                  </div>
                </div>
              </label>
              <label style={radioRowStyle(runtimeKind === "local_herdr")}>
                <input
                  type="radio"
                  checked={runtimeKind === "local_herdr"}
                  onChange={() => setRuntimeKind("local_herdr")}
                />
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, color: "#f3f3f5" }}>
                    On a fleet node (Herdr)
                  </div>
                  <div style={hintStyle}>
                    Executes in a Herdr pane on a fleet node, using that
                    node's local CLI (claude / kimi / codex). Operator-visible,
                    live pane view in the mission canvas.
                  </div>
                  {runtimeKind === "local_herdr" && (
                    <select
                      value={targetNodeId}
                      onChange={(e) => setTargetNodeId(e.target.value)}
                      style={{ ...fieldStyle, marginTop: 6 }}
                    >
                      <option value="">Pick a node…</option>
                      {onlineNodes.map((n) => (
                        <option key={n.id} value={n.id}>
                          {n.name}
                        </option>
                      ))}
                    </select>
                  )}
                  {runtimeKind === "local_herdr" && onlineNodes.length === 0 && (
                    <div style={{ ...hintStyle, color: "#ff8a7a", marginTop: 4 }}>
                      No online nodes. Connect one from the INFRA tier first.
                    </div>
                  )}
                </div>
              </label>
              <span style={{ ...labelStyle, marginTop: 6 }}>Schedule</span>
              <label style={radioRowStyle(scheduleKind === "one_shot")}>
                <input
                  type="radio"
                  checked={scheduleKind === "one_shot"}
                  onChange={() => setScheduleKind("one_shot")}
                />
                <div>
                  <div style={{ fontWeight: 600, color: "#f3f3f5" }}>One-shot</div>
                  <div style={hintStyle}>Runs once on launch. Simplest.</div>
                </div>
              </label>
              <label style={radioRowStyle(scheduleKind === "cron")}>
                <input
                  type="radio"
                  checked={scheduleKind === "cron"}
                  onChange={() => setScheduleKind("cron")}
                />
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, color: "#f3f3f5" }}>Cron</div>
                  <div style={hintStyle}>
                    Fires on schedule. Coding phases re-check the repo and pick
                    up where they left off.
                  </div>
                  {scheduleKind === "cron" && (
                    <input
                      type="text"
                      value={cron}
                      onChange={(e) => setCron(e.target.value)}
                      placeholder="0 */6 * * *"
                      style={{ ...fieldStyle, marginTop: 6 }}
                    />
                  )}
                </div>
              </label>
            </div>
          )}

          {step === 5 && (
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <span style={labelStyle}>Review</span>
              <ReviewRow k="Template" v={preset.title} />
              <ReviewRow k="Title" v={title} />
              {description && <ReviewRow k="Description" v={description} />}
              {repo && <ReviewRow k="Repo" v={`${repo.owner}/${repo.name}`} />}
              <ReviewRow
                k="Team"
                v={
                  teamTemplateId
                    ? (teamTemplates.find((t) => t.id === teamTemplateId)?.name ??
                      teamTemplateId)
                    : "auto-provision from prompt"
                }
              />
              <ReviewRow
                k="Runtime"
                v={
                  runtimeKind === "local_herdr"
                    ? `Herdr on ${onlineNodes.find((n) => n.id === targetNodeId)?.name ?? targetNodeId}`
                    : "Hosted (ZeroClaw)"
                }
              />
              <ReviewRow
                k="Schedule"
                v={scheduleKind === "cron" ? `cron: ${cron}` : "one-shot"}
              />
              <ReviewRow k="Phases" v={preset.phases.map((p) => p.kind).join(" → ")} />
              {error && (
                <p style={{ ...hintStyle, color: "#ff8a7a" }}>{error}</p>
              )}
            </div>
          )}
        </div>

        <div
          style={{
            padding: 14,
            borderTop: "1px solid rgba(255,255,255,.06)",
            display: "flex",
            gap: 8,
            justifyContent: "space-between",
          }}
        >
          <button
            type="button"
            onClick={() => setStep((s) => Math.max(1, s - 1) as Step)}
            disabled={step === 1}
            style={{ ...secondaryBtn, opacity: step === 1 ? 0.4 : 1 }}
          >
            Back
          </button>
          {step < 5 ? (
            <button
              type="button"
              onClick={() => setStep((s) => Math.min(5, s + 1) as Step)}
              disabled={!canNext}
              style={{ ...primaryBtn, opacity: !canNext ? 0.4 : 1 }}
            >
              Next
            </button>
          ) : (
            <button
              type="button"
              onClick={submit}
              disabled={submitting}
              style={{ ...primaryBtn, opacity: submitting ? 0.5 : 1 }}
            >
              {submitting ? "Creating…" : "Launch mission"}
            </button>
          )}
        </div>
      </div>

    </div>
  );
}

function ReviewRow({ k, v }: { k: string; v: string }) {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "120px 1fr",
        gap: 12,
        padding: "8px 10px",
        borderRadius: 8,
        border: "1px solid rgba(255,255,255,.06)",
        background: "#101014",
      }}
    >
      <span
        style={{
          fontFamily: mono,
          fontSize: 11,
          color: "#8a8a92",
          textTransform: "uppercase",
          letterSpacing: ".08em",
        }}
      >
        {k}
      </span>
      <span style={{ fontSize: 12.5, color: "#eaeaee", wordBreak: "break-word" }}>
        {v}
      </span>
    </div>
  );
}

const labelStyle: React.CSSProperties = {
  fontFamily: mono,
  fontSize: 10,
  letterSpacing: ".14em",
  color: "#8a8a92",
  textTransform: "uppercase",
};
const hintStyle: React.CSSProperties = {
  fontSize: 12,
  color: "#a0a0a8",
  lineHeight: 1.55,
};
const fieldStyle: React.CSSProperties = {
  width: "100%",
  boxSizing: "border-box",
  padding: "8px 10px",
  borderRadius: 9,
  border: "1px solid rgba(255,255,255,.12)",
  background: "#141417",
  color: "#eaeaee",
  fontSize: 13,
};
const primaryBtn: React.CSSProperties = {
  padding: "8px 14px",
  borderRadius: 9,
  border: 0,
  background: "#ff8a7a",
  color: "#1a0d0b",
  fontSize: 12.5,
  fontWeight: 700,
  cursor: "pointer",
};
const secondaryBtn: React.CSSProperties = {
  padding: "8px 14px",
  borderRadius: 9,
  border: "1px solid rgba(255,255,255,.14)",
  background: "transparent",
  color: "#d7d7db",
  fontSize: 12.5,
  cursor: "pointer",
};
const templateCardStyle = (active: boolean): React.CSSProperties => ({
  textAlign: "left",
  padding: 12,
  borderRadius: 10,
  border: `1px solid ${active ? "rgba(255,138,122,.6)" : "rgba(255,255,255,.1)"}`,
  background: active ? "rgba(255,138,122,.08)" : "#101014",
  cursor: "pointer",
  color: "#eaeaee",
  display: "flex",
  flexDirection: "column",
  gap: 6,
});
const radioRowStyle = (active: boolean): React.CSSProperties => ({
  display: "flex",
  alignItems: "flex-start",
  gap: 10,
  padding: "10px 12px",
  borderRadius: 10,
  border: `1px solid ${active ? "rgba(94,200,216,.4)" : "rgba(255,255,255,.08)"}`,
  background: active ? "rgba(94,200,216,.05)" : "#101014",
  cursor: "pointer",
});