/**
 * @file RunSetup.tsx
 * @description The pre-run setup panel: everything the user picks before a run
 * exists. Moved verbatim out of `pages/Run.tsx` (where it was `ConfigCard`) so
 * the Run page and the Workspace page can both mount the same panel.
 *
 * What lives here:
 *   - `RunSetup` — mode (conversation / headless), fresh-vs-resume source, the
 *     prompt editor, and the cwd / model / permission-mode / effort fields,
 *     plus the concurrency hint and the Start button. Its disabled state is
 *     driven by the `binaryFound` prop, so a missing `claude` binary is a
 *     surfaced state here rather than a probe of its own.
 *     above the panel, with its own localStorage-persisted minimized state.
 *   - the pickers the panel owns: `CwdAutocomplete`, `SessionPicker`,
 *     `ModelPicker`, and the small `ModeOption` / `Field` layout helpers.
 *
 * Props only for `RunSetup`: no `/stage` call, no lane API call, and no run
 * lifecycle — the page owns `api.run.start` and hands the result back through
 * `onStart`. `SessionPicker` keeps the one API call it already owned (listing
 * past sessions to resume) and `PromptEditor` keeps its `@`-file lookup.
 *
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import {
  Play,
  RefreshCw,
  AlertCircle,
  ChevronDown,
  ShieldAlert,
  X,
  FolderOpen,
  Home,
  History as HistoryIcon,
  Search,
  RotateCcw,
  Lock,
} from "lucide-react";
import { api, RUN_MODEL_CHOICES, RUN_EFFORT_CHOICES } from "../../lib/api";
import type {
  CwdSuggestion,
  DashboardRunHistoryItem,
  RunListResponse,
  EffortLevel,
  PermissionMode,
  RunMode,
} from "../../lib/api";
import type { Session } from "../../lib/types";
import { Select } from "../Select";
import { PromptEditor } from "./RunConsole";
import type { SlashCommand } from "./RunConsole";

// ── Limitations banner (above the config card) ────────────────────────


interface RunSetupProps {
  mode: RunMode;
  onModeChange: (m: RunMode) => void;
  prompt: string;
  onPromptChange: (s: string) => void;
  cwd: string;
  onCwdChange: (s: string) => void;
  cwdSuggestions: CwdSuggestion[];
  model: string;
  onModelChange: (s: string) => void;
  permissionMode: PermissionMode;
  onPermissionModeChange: (m: PermissionMode) => void;
  effort: EffortLevel;
  onEffortChange: (e: EffortLevel) => void;
  binaryFound: boolean;
  busy: boolean;
  onStart: () => void;
  activeRuns: RunListResponse | null;
  resumeSession: Session | null;
  onResumeSessionChange: (s: Session | null) => void;
  /** The selected lane's cwd - narrows the resume picker to that lane's own
   *  sessions. Undefined when no lane is selected (the picker then lists
   *  everything, same as before lanes existed). */
  laneCwd?: string;
  slashCommands: SlashCommand[];
  runHistory: DashboardRunHistoryItem[];
  onResumeFromHistory: (item: DashboardRunHistoryItem) => void;
}

export function RunSetup(props: RunSetupProps) {
  const { t } = useTranslation("run");
  const atCap =
    props.activeRuns != null && props.activeRuns.activeCount >= props.activeRuns.maxConcurrent;
  const isResume = !!props.resumeSession;
  const [resumePicked, setResumePicked] = useState(isResume);
  // Keep "resume picked" in sync with the parent. Two cases:
  //  1. Parent set a resume session (e.g. user clicked Resume in the runs
  //     modal) - flip the radio so the picker is shown and the selection
  //     is visible.
  //  2. Parent cleared the session and mode flipped to headless - clear
  //     the radio so the form is honest.
  useEffect(() => {
    if (isResume && !resumePicked) setResumePicked(true);
    else if (!isResume && resumePicked && props.mode === "headless") setResumePicked(false);
  }, [isResume, resumePicked, props.mode]);

  return (
    <div className="rounded-xl border border-border bg-surface-1">
      {/* Mode and source on one line. Both are two-way choices made once at
          spawn time, so a segmented row carries them; the longer explanations
          live in each button's title rather than in a paragraph. */}
      <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border px-3 py-2 text-[11.5px]">
        <div className="flex items-center rounded-md border border-border bg-surface-2 p-0.5">
          <Seg
            active={props.mode === "conversation"}
            label={t("mode.conversation")}
            title={t("mode.conversationHint")}
            onClick={() => props.onModeChange("conversation")}
          />
          <Seg
            active={props.mode === "headless"}
            label={t("mode.headless")}
            title={`${t("mode.headlessHint")} — ${t("hint.headlessExplain")}`}
            onClick={() => {
              props.onModeChange("headless");
              setResumePicked(false);
            }}
          />
        </div>

        {props.mode === "conversation" && (
          <>
            <div className="flex items-center rounded-md border border-border bg-surface-2 p-0.5">
              <Seg
                active={!resumePicked}
                label={t("resume.freshOption")}
                title={t("resume.freshHint")}
                onClick={() => {
                  setResumePicked(false);
                  props.onResumeSessionChange(null);
                }}
              />
              <Seg
                active={resumePicked}
                label={t("resume.resumeOption")}
                title={t("resume.resumeHint")}
                onClick={() => setResumePicked(true)}
              />
            </div>
            {resumePicked && (
              <div className="min-w-0 flex-1">
                <SessionPicker
                  selected={props.resumeSession}
                  onSelect={props.onResumeSessionChange}
                  cwd={props.laneCwd}
                />
              </div>
            )}
          </>
        )}
      </div>

      {/* Prompt */}
      <div className="px-4 py-3 border-b border-border">
        <label className="block text-[11px] font-semibold uppercase tracking-wider text-gray-500 mb-1.5">
          {t("fields.prompt")}
        </label>
        <PromptEditor
          value={props.prompt}
          onChange={props.onPromptChange}
          onSubmit={props.onStart}
          placeholder={t("fields.promptPlaceholder")}
          rows={5}
          slashCommands={props.slashCommands}
          fileCwd={props.resumeSession?.cwd || props.cwd}
        />
        <div className="mt-1 text-[10px] text-gray-600">
          {t("hint.shortcut")} · / for slash commands · @ for file references
        </div>
      </div>

      {/* Advanced fields */}
      <div className="grid grid-cols-1 gap-3 px-4 py-3 sm:grid-cols-2 lg:grid-cols-4">
        <Field label={t("fields.cwd")}>
          {isResume && props.resumeSession ? (
            <div className="bg-surface-2 border border-border rounded-md px-3 py-1.5 text-[11px] font-mono text-gray-300 flex items-center gap-2">
              <Lock className="w-3 h-3 text-gray-500 flex-shrink-0" />
              <span className="truncate">{props.resumeSession.cwd}</span>
            </div>
          ) : (
            <div title={t("fields.cwdHint")}>
              <CwdAutocomplete
                value={props.cwd}
                onChange={props.onCwdChange}
                suggestions={props.cwdSuggestions}
              />
            </div>
          )}
        </Field>
        <Field label={t("fields.model")}>
          <ModelPicker value={props.model} onChange={props.onModelChange} />
        </Field>
        <Field label={t("fields.permissionMode")}>
          <Select<PermissionMode>
            value={props.permissionMode}
            onChange={props.onPermissionModeChange}
            options={[
              { value: "acceptEdits", label: t("fields.permissionAcceptEdits") },
              { value: "default", label: t("fields.permissionDefault") },
              { value: "plan", label: t("fields.permissionPlan") },
              { value: "bypassPermissions", label: t("fields.permissionBypass") },
            ]}
          />
        </Field>
        <Field label={t("fields.effort")}>
          <Select<EffortLevel>
            value={props.effort}
            onChange={props.onEffortChange}
            options={RUN_EFFORT_CHOICES.map((c) => ({
              value: c.id,
              label: c.label,
              hint: c.hint,
            }))}
          />
        </Field>
      </div>

      {props.permissionMode === "bypassPermissions" && (
        <div className="mx-4 mb-3 rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-[11px] text-red-200 flex items-start gap-2">
          <ShieldAlert className="w-3.5 h-3.5 flex-shrink-0 mt-0.5" />
          <span>{t("hint.permissionWarning")}</span>
        </div>
      )}

      {/* Footer: contextual run-state hint + run button */}
      <div className="border-t border-border px-4 py-3 flex items-center justify-between gap-3 flex-wrap">
        <div className="flex items-center gap-3 text-[11px] min-w-0">
          {atCap ? (
            <span className="inline-flex items-center gap-1.5 text-amber-300">
              <AlertCircle className="w-3.5 h-3.5" />
              {t("concurrency.atCap", { max: props.activeRuns?.maxConcurrent ?? 0 })}
            </span>
          ) : props.activeRuns && props.activeRuns.activeCount > 0 ? (
            <span className="inline-flex items-center gap-1.5 text-gray-400">
              <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
              {t("concurrency.active", { count: props.activeRuns.activeCount })}
            </span>
          ) : null}
        </div>
        <button
          onClick={props.onStart}
          disabled={
            !props.binaryFound ||
            !props.prompt.trim() ||
            props.busy ||
            atCap ||
            (resumePicked && !props.resumeSession) ||
            // Resume locks cwd to the original session, so allow it then;
            // otherwise require a non-empty cwd so we never spawn at an
            // invisible default.
            (!props.resumeSession && !props.cwd.trim())
          }
          className="inline-flex items-center gap-2 rounded-lg border border-accent/40 bg-accent/15 hover:bg-accent/25 text-accent px-4 py-1.5 text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {props.busy ? (
            <RefreshCw className="w-3.5 h-3.5 animate-spin" />
          ) : (
            <Play className="w-3.5 h-3.5" />
          )}
          {props.busy ? t("actions.starting") : t("actions.start")}
        </button>
      </div>
    </div>
  );
}

/** One segment of a two-way inline choice. The explanation rides on `title`
 *  instead of a hint line, which is what keeps the row to one line. */
function Seg({
  active,
  label,
  title,
  onClick,
}: {
  active: boolean;
  label: string;
  title?: string;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      title={title}
      aria-pressed={active}
      className={`rounded px-2 py-0.5 font-medium transition-colors ${
        active ? "bg-accent/20 text-accent" : "text-gray-400 hover:text-gray-200"
      }`}
    >
      {label}
    </button>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div>
      <label className="block text-[10px] font-semibold uppercase tracking-wider text-gray-500 mb-1">
        {label}
      </label>
      {children}
    </div>
  );
}

// ── CWD autocomplete ──────────────────────────────────────────────────

export function CwdAutocomplete({
  value,
  onChange,
  suggestions,
  inputId,
}: {
  value: string;
  onChange: (s: string) => void;
  suggestions: CwdSuggestion[];
  /** Sets the input's `id` so an external `<label htmlFor>` can target it. */
  inputId?: string;
}) {
  const { t } = useTranslation("run");
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(0);
  const containerRef = useRef<HTMLDivElement | null>(null);
  const inputRef = useRef<HTMLInputElement | null>(null);

  // Close dropdown on outside click
  useEffect(() => {
    if (!open) return;
    const onClick = (e: MouseEvent) => {
      if (!containerRef.current) return;
      if (!containerRef.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, [open]);

  const filtered = useMemo(() => {
    const q = value.toLowerCase().trim();
    const out = suggestions.filter(
      (s) => !q || s.path.toLowerCase().includes(q) || s.label.toLowerCase().includes(q)
    );
    return out;
  }, [value, suggestions]);

  // Group suggestions by kind preserving fixed order — home first, matching
  // the neutral default the page pre-fills (issue #202).
  const groups = useMemo(() => {
    const order: CwdSuggestion["kind"][] = ["home", "dashboard", "recent"];
    return order
      .map((kind) => ({ kind, items: filtered.filter((s) => s.kind === kind) }))
      .filter((g) => g.items.length > 0);
  }, [filtered]);

  // Flat index for keyboard navigation
  const flat = useMemo(() => groups.flatMap((g) => g.items), [groups]);

  // Keep `active` clamped within bounds
  useEffect(() => {
    if (active >= flat.length) setActive(Math.max(0, flat.length - 1));
  }, [flat.length, active]);

  const choose = (s: CwdSuggestion) => {
    onChange(s.path);
    setOpen(false);
    inputRef.current?.blur();
  };

  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
      setOpen(true);
      e.preventDefault();
      return;
    }
    if (e.key === "ArrowDown") {
      e.preventDefault();
      setActive((a) => Math.min(flat.length - 1, a + 1));
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setActive((a) => Math.max(0, a - 1));
    } else if (e.key === "Enter") {
      if (open && flat[active]) {
        e.preventDefault();
        choose(flat[active]);
      }
    } else if (e.key === "Escape") {
      setOpen(false);
    }
  };

  return (
    <div ref={containerRef} className="relative">
      <div className="relative">
        <FolderOpen className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-500 pointer-events-none" />
        <input
          ref={inputRef}
          id={inputId}
          type="text"
          value={value}
          onChange={(e) => {
            onChange(e.target.value);
            setOpen(true);
            setActive(0);
          }}
          onFocus={() => setOpen(true)}
          onKeyDown={onKeyDown}
          placeholder={t("fields.cwdPlaceholder")}
          autoComplete="off"
          spellCheck={false}
          className="w-full bg-surface-2 border border-border rounded-md pl-7 pr-3 py-1.5 text-[11px] font-mono text-gray-100 placeholder:text-gray-500 focus:outline-none focus:border-accent/50"
        />
      </div>
      {open && (
        <div className="absolute z-30 left-0 right-0 mt-1 rounded-md border border-border bg-surface-1 shadow-lg shadow-black/40 max-h-72 overflow-auto py-1">
          {groups.length === 0 ? (
            <div className="px-3 py-2 text-[11px] text-gray-500">{t("fields.cwdNoMatches")}</div>
          ) : (
            groups.map((g) => (
              <div key={g.kind}>
                <div className="px-3 pt-1.5 pb-0.5 text-[10px] font-semibold uppercase tracking-wider text-gray-500 flex items-center gap-1.5">
                  {g.kind === "dashboard" ? (
                    <FolderOpen className="w-3 h-3" />
                  ) : g.kind === "home" ? (
                    <Home className="w-3 h-3" />
                  ) : (
                    <HistoryIcon className="w-3 h-3" />
                  )}
                  {t(`fields.cwdGroups.${g.kind}`)}
                </div>
                {g.items.map((s) => {
                  const idx = flat.indexOf(s);
                  const isActive = idx === active;
                  return (
                    <button
                      key={s.path}
                      type="button"
                      onMouseDown={(e) => e.preventDefault() /* keep input focused */}
                      onClick={() => choose(s)}
                      onMouseEnter={() => setActive(idx)}
                      className={`w-full text-left px-3 py-1.5 transition-colors ${
                        isActive ? "bg-accent/15" : "hover:bg-surface-3"
                      }`}
                    >
                      <div className="text-[11px] text-gray-200 truncate">{s.label}</div>
                      <div className="font-mono text-[10px] text-gray-500 truncate">{s.path}</div>
                    </button>
                  );
                })}
              </div>
            ))
          )}
        </div>
      )}
    </div>
  );
}

// ── Model picker ──────────────────────────────────────────────────────

// ── Session picker (for resume) ───────────────────────────────────────

function SessionPicker({
  selected,
  onSelect,
  cwd,
}: {
  selected: Session | null;
  onSelect: (s: Session | null) => void;
  /** Restricts the list to sessions under this exact working directory - the
   *  lane a resume is started from should only offer that lane's own history. */
  cwd?: string;
}) {
  const { t } = useTranslation("run");
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [sessions, setSessions] = useState<Session[] | null>(null);
  const containerRef = useRef<HTMLDivElement | null>(null);

  // Lazily load sessions when the picker opens, and again whenever the lane
  // (and so its cwd filter) changes - otherwise switching lanes would leave
  // the picker showing the PREVIOUS lane's sessions until closed and reopened.
  const fetchedForCwd = useRef<string | undefined>(undefined);
  useEffect(() => {
    if (!open) return;
    if (sessions !== null && fetchedForCwd.current === cwd) return;
    fetchedForCwd.current = cwd;
    api.sessions
      .list({ sort_by: "started_at", sort_desc: true, limit: 100, cwd })
      .then((r) => setSessions(r.sessions))
      .catch(() => setSessions([]));
  }, [open, cwd, sessions]);

  useEffect(() => {
    if (!open) return;
    const onClick = (e: MouseEvent) => {
      if (!containerRef.current) return;
      if (!containerRef.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, [open]);

  const filtered = useMemo(() => {
    if (!sessions) return [];
    const q = query.toLowerCase().trim();
    if (!q) return sessions;
    return sessions.filter(
      (s) =>
        s.id.toLowerCase().includes(q) ||
        (s.cwd || "").toLowerCase().includes(q) ||
        (s.status || "").toLowerCase().includes(q)
    );
  }, [sessions, query]);

  if (selected) {
    return (
      <div className="mt-2 rounded-lg border border-accent/30 bg-accent/5 px-3 py-2 flex items-start gap-2">
        <RotateCcw className="w-3.5 h-3.5 text-accent flex-shrink-0 mt-0.5" />
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-accent/15 text-accent border border-accent/30">
              {t("resume.selectedBadge")}
            </span>
            <span className="font-mono text-[11px] text-gray-200 truncate">{selected.id}</span>
          </div>
          <div className="font-mono text-[10px] text-gray-500 truncate mt-0.5">{selected.cwd}</div>
        </div>
        <button
          onClick={() => onSelect(null)}
          className="text-[10px] font-medium px-2 py-0.5 rounded border border-border bg-surface-2 hover:bg-surface-3 text-gray-300 inline-flex items-center gap-1 flex-shrink-0"
        >
          <X className="w-3 h-3" />
          {t("resume.clear")}
        </button>
      </div>
    );
  }

  return (
    <div ref={containerRef} className="relative mt-2">
      <button
        onClick={() => setOpen((v) => !v)}
        className="w-full text-left rounded-md border border-dashed border-border bg-surface-2 hover:bg-surface-3 px-3 py-2 text-[11px] text-gray-400 inline-flex items-center gap-2"
      >
        <RotateCcw className="w-3.5 h-3.5" />
        {t("resume.pickSession")}
        <ChevronDown className="w-3 h-3 opacity-70 ml-auto" />
      </button>
      {open && (
        <div className="absolute z-30 left-0 right-0 mt-1 rounded-md border border-border bg-surface-1 shadow-lg shadow-black/40 overflow-hidden">
          <div className="px-3 py-2 border-b border-border flex items-center gap-2">
            <Search className="w-3.5 h-3.5 text-gray-500 flex-shrink-0" />
            <input
              autoFocus
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder={t("resume.search")}
              className="bg-transparent text-[11px] text-gray-100 placeholder:text-gray-500 focus:outline-none w-full"
            />
          </div>
          <div className="max-h-72 overflow-auto py-1">
            {sessions === null ? (
              <div className="px-3 py-2 text-[11px] text-gray-500">…</div>
            ) : filtered.length === 0 ? (
              <div className="px-3 py-2 text-[11px] text-gray-500">{t("resume.noSessions")}</div>
            ) : (
              filtered.map((s) => (
                <button
                  key={s.id}
                  onClick={() => {
                    onSelect(s);
                    setOpen(false);
                    setQuery("");
                  }}
                  className="w-full text-left px-3 py-2 hover:bg-surface-3 transition-colors"
                >
                  <div className="flex items-center gap-2 mb-0.5">
                    <span
                      className={`text-[10px] font-mono px-1.5 py-0.5 rounded border ${
                        s.status === "active"
                          ? "bg-emerald-500/10 text-emerald-300 border-emerald-500/30"
                          : s.status === "completed"
                            ? "bg-sky-500/10 text-sky-300 border-sky-500/30"
                            : s.status === "error"
                              ? "bg-red-500/10 text-red-300 border-red-500/30"
                              : "bg-surface-3 text-gray-400 border-border"
                      }`}
                    >
                      {s.status}
                    </span>
                    {s.name?.trim() && (
                      <span className="text-[11px] text-gray-200 truncate">{s.name.trim()}</span>
                    )}
                    <span className="font-mono text-[11px] text-gray-400 truncate flex-shrink-0">
                      {s.id.slice(0, 12)}…
                    </span>
                    <span className="text-[10px] text-gray-600 ml-auto flex-shrink-0">
                      {new Date(s.started_at).toLocaleString()}
                    </span>
                  </div>
                  <div className="font-mono text-[10px] text-gray-500 truncate">{s.cwd}</div>
                </button>
              ))
            )}
          </div>
        </div>
      )}
    </div>
  );
}

// The custom Select dropdown now lives in ../components/Select (shared with the
// webhook settings form). Imported at the top of this file.

// Sentinel option value for "Custom model…". Empty string is already taken by
// the "inherit from settings" choice, so use a non-empty marker.
const MODEL_CUSTOM = "__custom__";

function ModelPicker({ value, onChange }: { value: string; onChange: (s: string) => void }) {
  const { t } = useTranslation("run");
  // "Custom" is selected when the value isn't one of our curated IDs.
  const knownIds = useMemo(() => RUN_MODEL_CHOICES.map((c) => c.id), []);
  const isCustom = value !== "" && !knownIds.includes(value);
  const [showCustom, setShowCustom] = useState(isCustom);

  // Reuse the shared Select so the Model dropdown renders identically to the
  // Permission Mode and Effort dropdowns (Tailwind + lucide popover) instead of
  // a browser-native <select>.
  const options = useMemo(
    () => [
      ...RUN_MODEL_CHOICES.map((c) => ({
        value: c.id === "" ? "" : c.id,
        label: c.id === "" ? t("fields.modelInheritLabel") : c.label,
        hint: c.hint,
      })),
      { value: MODEL_CUSTOM, label: t("fields.modelCustom") },
    ],
    [t]
  );

  const onSelect = (v: string) => {
    if (v === MODEL_CUSTOM) {
      setShowCustom(true);
      return;
    }
    setShowCustom(false);
    onChange(v);
  };

  const selectValue = showCustom || isCustom ? MODEL_CUSTOM : value;

  return (
    <div className="space-y-1.5">
      <Select<string> value={selectValue} onChange={onSelect} options={options} />
      {(showCustom || isCustom) && (
        <input
          type="text"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={t("fields.modelCustomPlaceholder")}
          autoComplete="off"
          spellCheck={false}
          className="w-full bg-surface-2 border border-border rounded-md px-3 py-1.5 text-[11px] font-mono text-gray-100 placeholder:text-gray-500 focus:outline-none focus:border-accent/50"
        />
      )}
    </div>
  );
}