import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { INPUT_CLASS, LABEL_CLASS, PANEL_CLASS, PRIMARY_BUTTON_CLASS } from "./shared.js";

type TimelineSettingsPanelProps = {
  undoMaxSteps: number;
  timelineSaved: boolean;
  isSaving: boolean;
  onUndoMaxStepsChange: (value: number) => void;
  onSave: () => void;
};

export function TimelineSettingsPanel({
  undoMaxSteps,
  timelineSaved,
  isSaving,
  onUndoMaxStepsChange,
  onSave,
}: TimelineSettingsPanelProps) {
  return (
    <div className={PANEL_CLASS}>
      <div>
        <h2 className="flex items-center text-base font-semibold text-gray-900 dark:text-gray-100">
          Timeline{" "}
          <InfoTooltip content="Settings for the timeline view, including undo history depth." />
        </h2>
        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
          Configure timeline behavior and undo or redo history.
        </p>
      </div>

      <div className="max-w-xs">
        <label className={LABEL_CLASS}>Undo History Depth</label>
        <input
          type="number"
          className={INPUT_CLASS}
          value={undoMaxSteps}
          onChange={(event) => onUndoMaxStepsChange(parseInt(event.target.value, 10) || 50)}
          min={1}
          max={200}
        />
        <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
          Maximum number of undo steps for timeline operations. Default: 50.
        </p>
      </div>

      <div className="flex items-center gap-3">
        <button
          type="button"
          onClick={onSave}
          disabled={isSaving}
          className={PRIMARY_BUTTON_CLASS}
        >
          {isSaving ? "Saving…" : "Save Timeline Settings"}
        </button>
        {timelineSaved ? (
          <span className="text-sm font-medium text-green-600 dark:text-green-400">Saved!</span>
        ) : null}
      </div>
    </div>
  );
}
