Pien-Studio/apps/web/components/canvas-size-modal.tsx

"use client";

import React from "react";
import type { AspectRatio } from "@pien-studio/types";
import { useTranslations } from "../hooks/use-translations";

interface CanvasSizeModalProps {
  isOpen: boolean;
  onClose: () => void;
  currentWidth: number;
  currentHeight: number;
  currentAspect: AspectRatio;
  onApply: (width: number, height: number, aspect: AspectRatio) => void;
  isDark: boolean;
}

const PRESETS = [
  { labelKey: "editor.presetSquare", sublabel: "1080 × 1080", aspect: "1:1" as AspectRatio, width: 1080, height: 1080 },
  { labelKey: "editor.presetPortrait45", sublabel: "1080 × 1350", aspect: "4:5" as AspectRatio, width: 1080, height: 1350 },
  { labelKey: "editor.presetStory916", sublabel: "1080 × 1920", aspect: "9:16" as AspectRatio, width: 1080, height: 1920 },
  { labelKey: "editor.presetWidescreen", sublabel: "1920 × 1080", aspect: "16:9" as AspectRatio, width: 1920, height: 1080 },
  { labelKey: "editor.presetPhoto43", sublabel: "1440 × 1080", aspect: "4:3" as AspectRatio, width: 1440, height: 1080 },
  { labelKey: "editor.presetClassic32", sublabel: "1620 × 1080", aspect: "3:2" as AspectRatio, width: 1620, height: 1080 },
];

export function CanvasSizeModal({
  isOpen,
  onClose,
  currentWidth,
  currentHeight,
  currentAspect,
  onApply,
  isDark,
}: CanvasSizeModalProps) {
  const { t } = useTranslations();
  const [mode, setMode] = React.useState<"preset" | "custom">(
    PRESETS.some((p) => p.aspect === currentAspect) ? "preset" : "custom",
  );
  const [customWidth, setCustomWidth] = React.useState(currentWidth.toString());
  const [customHeight, setCustomHeight] = React.useState(currentHeight.toString());
  const [selectedPreset, setSelectedPreset] = React.useState<AspectRatio>(currentAspect);

  if (!isOpen) return null;

  function handleApply() {
    if (mode === "preset") {
      const preset = PRESETS.find((p) => p.aspect === selectedPreset)!;
      onApply(preset.width, preset.height, preset.aspect);
    } else {
      const w = parseInt(customWidth, 10);
      const h = parseInt(customHeight, 10);
      if (!isNaN(w) && !isNaN(h) && w > 0 && h > 0) {
        onApply(w, h, "free");
      }
    }
    onClose();
  }

  const overlay = "fixed inset-0 z-50 flex items-center justify-center bg-black/40";
  const panel = `w-full max-w-sm rounded-2xl border p-5 shadow-2xl ${
    isDark ? "border-white/15 bg-[#2b2d31]" : "border-black/15 bg-white"
  }`;

  return (
    <div className={overlay} onClick={onClose}>
      <div className={panel} onClick={(e) => e.stopPropagation()}>
        <div className="mb-4 flex items-center justify-between">
          <h2 className={`text-base font-semibold ${isDark ? "text-[#f5f7fa]" : "text-[#1f2430]"}`}>
            {t("editor.canvasSizeTitle")}
          </h2>
          <button
            onClick={onClose}
            className={`rounded border px-2 py-0.5 text-xs ${isDark ? "border-white/20 text-[#d7dae0]" : "border-black/20 text-[#1f2430]"}`}
          >
            ✕
          </button>
        </div>

        <div className="mb-4 flex gap-2">
          {(["preset", "custom"] as const).map((m) => (
            <button
              key={m}
              onClick={() => setMode(m)}
              className={`flex-1 rounded border py-1.5 text-xs font-semibold capitalize ${
                mode === m
                  ? "border-[var(--color-accent-strong)] bg-[var(--color-accent-strong)] text-white"
                  : isDark
                    ? "border-white/20 text-[#d7dae0]"
                    : "border-black/20 text-[#1f2430]"
              }`}
            >
              {m === "preset" ? t("editor.modePreset") : t("editor.modeCustom")}
            </button>
          ))}
        </div>

        {mode === "preset" ? (
          <div className="grid grid-cols-2 gap-2">
            {PRESETS.map((p) => (
              <button
                key={p.aspect}
                onClick={() => setSelectedPreset(p.aspect)}
                className={`rounded border p-3 text-left ${
                  selectedPreset === p.aspect
                    ? "border-[var(--color-accent-strong)] bg-[var(--color-accent-strong)] text-white"
                    : isDark
                      ? "border-white/10 bg-[#343841] text-[#d7dae0]"
                      : "border-black/10 bg-[#f6f8fb] text-[#1f2430]"
                }`}
              >
                <div className="text-xs font-semibold">{t(p.labelKey)}</div>
                <div className={`text-[10px] ${selectedPreset === p.aspect ? "text-white/70" : isDark ? "text-[#aeb3bc]" : "text-[#6c7382]"}`}>
                  {p.sublabel}
                </div>
              </button>
            ))}
          </div>
        ) : (
          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <label className={`w-16 text-xs ${isDark ? "text-[#aeb3bc]" : "text-[#5f6672]"}`}>{t("editor.widthShort")}</label>
              <input
                type="number"
                value={customWidth}
                onChange={(e) => setCustomWidth(e.target.value)}
                min={1}
                className={`flex-1 rounded border px-2 py-1.5 text-sm ${
                  isDark ? "border-white/20 bg-[#25272b] text-[#e8eaed]" : "border-black/20 bg-[#f6f8fb] text-[#1f2430]"
                }`}
              />
              <span className={`text-xs ${isDark ? "text-[#aeb3bc]" : "text-[#5f6672]"}`}>px</span>
            </div>
            <div className="flex items-center gap-2">
              <label className={`w-16 text-xs ${isDark ? "text-[#aeb3bc]" : "text-[#5f6672]"}`}>{t("editor.heightShort")}</label>
              <input
                type="number"
                value={customHeight}
                onChange={(e) => setCustomHeight(e.target.value)}
                min={1}
                className={`flex-1 rounded border px-2 py-1.5 text-sm ${
                  isDark ? "border-white/20 bg-[#25272b] text-[#e8eaed]" : "border-black/20 bg-[#f6f8fb] text-[#1f2430]"
                }`}
              />
              <span className={`text-xs ${isDark ? "text-[#aeb3bc]" : "text-[#5f6672]"}`}>px</span>
            </div>
            <div className="rounded border border-dashed border-black/20 p-2 text-center">
              <span className={`text-xs ${isDark ? "text-[#aeb3bc]" : "text-[#5f6672]"}`}>
                {parseInt(customWidth) || 0} × {parseInt(customHeight) || 0} px
              </span>
            </div>
          </div>
        )}

        <div className="mt-5 flex justify-end gap-2">
          <button
            onClick={onClose}
            className={`rounded border px-3 py-1.5 text-xs font-medium ${
              isDark ? "border-white/20 text-[#d7dae0]" : "border-black/20 text-[#1f2430]"
            }`}
          >
            {t("editor.cancel")}
          </button>
          <button
            onClick={handleApply}
            className="rounded border border-[var(--color-accent-strong)] bg-[var(--color-accent-strong)] px-3 py-1.5 text-xs font-semibold text-white"
          >
            {t("editor.apply")}
          </button>
        </div>
      </div>
    </div>
  );
}