Pien-Studio/apps/web/components/editor/history-panel.tsx

"use client";

import { Redo2, Undo2 } from "lucide-react";
import type { Project } from "@pien-studio/types";
import { useTranslations } from "../../hooks/use-translations";
import { panelClass, panelTitleClass } from "../../lib/theme";

type Props = {
  history: { past: Project[]; future: Project[] };
  isDark: boolean;
  canUndo: boolean;
  canRedo: boolean;
  onUndo: () => void;
  onRedo: () => void;
  onJumpToPast: (idx: number) => void;
  onJumpToFuture: (idx: number) => void;
};

export function HistoryPanel({
  history,
  isDark,
  canUndo,
  canRedo,
  onUndo,
  onRedo,
  onJumpToPast,
  onJumpToFuture,
}: Props) {
  const { t } = useTranslations();

  return (
    <div className={panelClass(isDark)}>
      <div className="flex items-center justify-between">
        <h2
          className={`text-xs font-semibold uppercase tracking-wide ${panelTitleClass(isDark)}`}
        >
          {t("editor.history")}
        </h2>
        <div className="flex gap-1">
          <button
            type="button"
            onClick={onUndo}
            disabled={!canUndo}
            title={t("editor.undo")}
            className={`rounded p-1 ${!canUndo ? "opacity-30" : isDark ? "hover:bg-white/10" : "hover:bg-black/5"}`}
          >
            <Undo2 className="h-3.5 w-3.5" />
          </button>
          <button
            type="button"
            onClick={onRedo}
            disabled={!canRedo}
            title={t("editor.redo")}
            className={`rounded p-1 ${!canRedo ? "opacity-30" : isDark ? "hover:bg-white/10" : "hover:bg-black/5"}`}
          >
            <Redo2 className="h-3.5 w-3.5" />
          </button>
        </div>
      </div>
      <div
        className={`mt-2 flex max-h-[240px] flex-col gap-1 overflow-y-auto ${isDark ? "[&::-webkit-scrollbar-thumb]:bg-white/20" : "[&::-webkit-scrollbar-thumb]:bg-black/20"}`}
      >
        {[...history.past].reverse().map((_, i) => {
          const idx = history.past.length - i;
          return (
            <button
              key={`past-${idx}`}
              type="button"
              onClick={() => onJumpToPast(idx)}
              className={`w-full rounded px-2 py-1 text-left text-[10px] ${isDark ? "text-[#9aa1ad] hover:bg-white/10" : "text-[#6b7280] hover:bg-black/5"}`}
            >
              {idx > history.past.length - 2
                ? t("editor.beforeLastAction")
                : `${t("editor.step")} ${idx}`}
            </button>
          );
        })}
        <button
          type="button"
          className={`w-full rounded px-2 py-1 text-left text-[10px] font-semibold ${isDark ? "bg-white/10 text-[#e2e5ea]" : "bg-black/5 text-[#1f2430]"}`}
          disabled
        >
          {t("editor.now")}
        </button>
        {[...history.future].map((_, i) => (
          <button
            key={`future-${i}`}
            type="button"
            onClick={() => onJumpToFuture(i)}
            className={`w-full rounded px-2 py-1 text-left text-[10px] ${isDark ? "text-[#9aa1ad] hover:bg-white/10" : "text-[#6b7280] hover:bg-black/5"}`}
          >
            {t("editor.undoneStep")} {i + 1}
          </button>
        ))}
        {history.past.length === 0 && history.future.length === 0 ? (
          <p
            className={`py-2 text-center text-[10px] ${isDark ? "text-[#6b7280]" : "text-[#9ca3af]"}`}
          >
            {t("editor.noHistoryYet")}
          </p>
        ) : null}
      </div>
    </div>
  );
}