import React, { useState } from "react";
import { Modal } from "../../ui/Modal";

export default function StepsReorderModal({ open, onClose, steps, onChange }) {
  const [local, setLocal] = useState(steps || []);
  const [dragIndex, setDragIndex] = useState(null);

  React.useEffect(() => {
    if (open) setLocal(steps || []);
  }, [open, steps]);

  const move = (from, to) => {
    if (from === to) return;
    const copy = [...local];
    const [item] = copy.splice(from, 1);
    copy.splice(to, 0, item);
    setLocal(copy);
  };

  if (!open) return null;

  const footer = (
    <div className="bp-designer-reorder__footer">
      <button className="bp-btn bp-btn-ghost" onClick={onClose}>Cancel</button>
      <button
        className="bp-btn bp-btn-primary"
        onClick={() => {
          onChange(local);
          onClose();
        }}
      >
        Save Order
      </button>
    </div>
  );

  return (
    <Modal open={open} title="Change Order" subtitle="Drag and drop steps." onClose={onClose} width="720px" footer={footer}>
      <div className="bp-list">
        {local.map((s, idx) => (
          <div
            key={s.key}
            className="bp-reorder-item"
            draggable
            onDragStart={() => setDragIndex(idx)}
            onDragOver={(e) => e.preventDefault()}
            onDrop={() => {
              if (dragIndex === null) return;
              move(dragIndex, idx);
              setDragIndex(null);
            }}
          >
            <div className="bp-reorder-grip">::</div>
            <div className="bp-flex bp-flex-col">
              <div className="bp-font-700">{s.title || s.key}</div>
              <div className="bp-text-sm bp-muted">{s.subtitle || ""}</div>
            </div>
            <div className="bp-chip">{s.enabled ? "Enabled" : "Disabled"}</div>
          </div>
        ))}
      </div>
    </Modal>
  );
}