import { useState } from "react";
import type { Subflow } from "../lib/api";
import type { T } from "../lib/i18n";

interface Props {
  t: T;
  subflows: Subflow[];
  active: string; // "main" | subflowId
  running: boolean;
  onSelect: (key: string) => void;
  onAdd: () => void;
  onRename: (id: string, name: string) => void;
  onDelete: (id: string) => void;
  onRunSubflow: (id: string) => void;
}

export function CanvasTabs({
  t,
  subflows,
  active,
  running,
  onSelect,
  onAdd,
  onRename,
  onDelete,
  onRunSubflow,
}: Props) {
  const [editing, setEditing] = useState<string | null>(null);

  return (
    <div className="canvas-tabs">
      <button className={"tab" + (active === "main" ? " on" : "")} onClick={() => onSelect("main")}>
        {t("tab_main")}
      </button>

      {subflows.map((sf) => (
        <div key={sf.id} className={"tab tab-sub" + (active === sf.id ? " on" : "")}>
          {editing === sf.id ? (
            <input
              autoFocus
              defaultValue={sf.name}
              onBlur={(e) => {
                onRename(sf.id, e.target.value.trim() || sf.name);
                setEditing(null);
              }}
              onKeyDown={(e) => {
                if (e.key === "Enter") (e.target as HTMLInputElement).blur();
                if (e.key === "Escape") setEditing(null);
              }}
            />
          ) : (
            <button className="tab-label" onClick={() => onSelect(sf.id)} onDoubleClick={() => setEditing(sf.id)}>
              {sf.name}
            </button>
          )}
          {active === sf.id && (
            <>
              <button
                className="tab-icon"
                title={t("tab_run")}
                disabled={running}
                onClick={() => onRunSubflow(sf.id)}
              >
                ▶
              </button>
              <button className="tab-icon" title={t("remove")} onClick={() => onDelete(sf.id)}>
                ✕
              </button>
            </>
          )}
        </div>
      ))}

      <button className="tab tab-add" title={t("tab_add")} onClick={onAdd}>
        +
      </button>
    </div>
  );
}