import { useTranslation } from "react-i18next";
import { makeClientKey } from "../../../lib/client-key";
import "../recipes.scss";

/** One in-progress preparation step in the recipe form. `key` is a client-only stable identity for React/reordering — the server derives the real `order`/`id` from array position on save (see `schemas/recipe.ts`), never from this. */
export interface StepDraft {
  key: string;
  description: string;
  picture: string;
}

/**
 * Ordered step editor — reordering is just moving array elements (up/down
 * buttons), no drag-and-drop library needed for a first version. `order` is
 * never tracked explicitly here: the array's position *is* the order, sent
 * to the API as-is on submit.
 */
export function StepListEditor({
  steps,
  onChange,
}: {
  steps: StepDraft[];
  onChange: (steps: StepDraft[]) => void;
}) {
  const { t } = useTranslation();

  function addStep() {
    onChange([...steps, { key: makeClientKey(), description: "", picture: "" }]);
  }

  function updateStep(key: string, patch: Partial<Pick<StepDraft, "description" | "picture">>) {
    onChange(steps.map((step) => (step.key === key ? { ...step, ...patch } : step)));
  }

  function removeStep(key: string) {
    onChange(steps.filter((step) => step.key !== key));
  }

  function moveStep(index: number, direction: -1 | 1) {
    const target = index + direction;
    if (target < 0 || target >= steps.length) return;
    const next = [...steps];
    const moved = next.splice(index, 1)[0];
    if (!moved) return;
    next.splice(target, 0, moved);
    onChange(next);
  }

  return (
    <div className="step-list-editor">
      <ol className="step-list-editor__list">
        {steps.map((step, index) => (
          <li key={step.key} className="step-list-editor__item">
            <div className="step-list-editor__reorder">
              <button
                type="button"
                onClick={() => moveStep(index, -1)}
                disabled={index === 0}
                title={t("recipes.form.moveStepUp")}
              >
                ↑
              </button>
              <button
                type="button"
                onClick={() => moveStep(index, 1)}
                disabled={index === steps.length - 1}
                title={t("recipes.form.moveStepDown")}
              >
                ↓
              </button>
            </div>
            <div className="step-list-editor__fields">
              <textarea
                value={step.description}
                onChange={(e) => updateStep(step.key, { description: e.target.value })}
                placeholder={t("recipes.form.stepDescriptionPlaceholder")}
                rows={2}
              />
              <input
                type="url"
                value={step.picture}
                onChange={(e) => updateStep(step.key, { picture: e.target.value })}
                placeholder={t("recipes.form.stepPicturePlaceholder")}
              />
            </div>
            <button
              type="button"
              className="step-list-editor__remove"
              onClick={() => removeStep(step.key)}
              title={t("recipes.form.removeStep")}
            >
              ✕
            </button>
          </li>
        ))}
      </ol>
      <button type="button" className="step-list-editor__add" onClick={addStep}>
        {t("recipes.form.addStep")}
      </button>
    </div>
  );
}
