"use client";
'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const LucideIcons = require('lucide-react');
const utils = require('../../lib/utils.cjs');
const button = require('../button.cjs');
const input = require('../input.cjs');

function StepTabs({
  steps,
  activeStepIndex,
  onActiveStepChange,
  onAddStep,
  onDeleteStep,
  onRenameStep,
  className,
  hideStepControls
}) {
  const [editingIndex, setEditingIndex] = React.useState(null);
  const [editValue, setEditValue] = React.useState("");
  const handleStartEdit = (index, currentTitle) => {
    setEditingIndex(index);
    setEditValue(currentTitle);
  };
  const handleConfirmEdit = () => {
    if (editingIndex !== null && editValue.trim()) {
      onRenameStep(editingIndex, editValue.trim());
    }
    setEditingIndex(null);
    setEditValue("");
  };
  const handleCancelEdit = () => {
    setEditingIndex(null);
    setEditValue("");
  };
  const handleKeyDown = (e) => {
    if (e.key === "Enter") {
      handleConfirmEdit();
    } else if (e.key === "Escape") {
      handleCancelEdit();
    }
  };
  if (hideStepControls) {
    return null;
  }
  if (steps.length <= 1) {
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2 mb-4", className), children: [
      /* @__PURE__ */ jsxRuntime.jsxs(
        button.Button,
        {
          variant: "outline",
          size: "sm",
          onClick: onAddStep,
          className: "gap-1",
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "h-4 w-4" }),
            "Add Step"
          ]
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Add a step to create a multi-step form" })
    ] });
  }
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2 mb-4 flex-wrap", className), children: [
    steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        className: utils.cn(
          "group flex items-center gap-1 px-3 py-1.5 rounded-md border transition-colors",
          activeStepIndex === index ? "bg-primary text-primary-foreground border-primary" : "bg-card hover:bg-muted border-border"
        ),
        children: editingIndex === index ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            input.Input,
            {
              value: editValue,
              onChange: (e) => setEditValue(e.target.value),
              onKeyDown: handleKeyDown,
              className: "h-6 w-24 text-sm px-1",
              autoFocus: true
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsx(
            button.Button,
            {
              variant: "ghost",
              size: "icon",
              className: "h-6 w-6",
              onClick: handleConfirmEdit,
              children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Check, { className: "h-3 w-3" })
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsx(
            button.Button,
            {
              variant: "ghost",
              size: "icon",
              className: "h-6 w-6",
              onClick: handleCancelEdit,
              children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-3 w-3" })
            }
          )
        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            "button",
            {
              type: "button",
              onClick: () => onActiveStepChange(index),
              className: "text-sm font-medium",
              children: step.title
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsxs(
            "div",
            {
              className: utils.cn(
                "flex items-center gap-0.5 ml-1",
                activeStepIndex === index ? "opacity-70 hover:opacity-100" : "opacity-0 group-hover:opacity-100"
              ),
              children: [
                /* @__PURE__ */ jsxRuntime.jsx(
                  button.Button,
                  {
                    variant: "ghost",
                    size: "icon",
                    className: utils.cn(
                      "h-5 w-5",
                      activeStepIndex === index ? "hover:bg-primary-foreground/20 text-primary-foreground" : "hover:bg-muted-foreground/20"
                    ),
                    onClick: (e) => {
                      e.stopPropagation();
                      handleStartEdit(index, step.title);
                    },
                    title: "Rename step",
                    children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Pencil, { className: "h-3 w-3" })
                  }
                ),
                /* @__PURE__ */ jsxRuntime.jsx(
                  button.Button,
                  {
                    variant: "ghost",
                    size: "icon",
                    className: utils.cn(
                      "h-5 w-5",
                      activeStepIndex === index ? "hover:bg-destructive/20 text-primary-foreground" : "hover:bg-destructive/20 hover:text-destructive"
                    ),
                    onClick: (e) => {
                      e.stopPropagation();
                      onDeleteStep(index);
                    },
                    title: "Delete step",
                    children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-3 w-3" })
                  }
                )
              ]
            }
          )
        ] })
      },
      step.id
    )),
    /* @__PURE__ */ jsxRuntime.jsxs(
      button.Button,
      {
        variant: "outline",
        size: "sm",
        onClick: onAddStep,
        className: "gap-1 h-8",
        children: [
          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "h-4 w-4" }),
          "Add Step"
        ]
      }
    )
  ] });
}

exports.StepTabs = StepTabs;
