ERP-node/frontend/components/admin/dashboard/ResolutionSelector.tsx

"use client";

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Monitor } from "lucide-react";

export type Resolution = "hd" | "fhd" | "qhd" | "uhd";

export interface ResolutionConfig {
  width: number;
  height: number;
  label: string;
}

export const RESOLUTIONS: Record<Resolution, ResolutionConfig> = {
  hd: {
    width: 1280 - 360,
    height: 720 - 312,
    label: "HD (1280x720)",
  },
  fhd: {
    width: 1920 - 360,
    height: 1080 - 312,
    label: "Full HD (1920x1080)",
  },
  qhd: {
    width: 2560 - 360,
    height: 1440 - 312,
    label: "QHD (2560x1440)",
  },
  uhd: {
    width: 3840 - 360,
    height: 2160 - 312,
    label: "4K UHD (3840x2160)",
  },
};

interface ResolutionSelectorProps {
  value: Resolution;
  onChange: (resolution: Resolution) => void;
  currentScreenResolution?: Resolution;
}

/**
 * 현재 화면 해상도 감지
 */
export function detectScreenResolution(): Resolution {
  if (typeof window === "undefined") return "fhd";

  const width = window.screen.width;
  const height = window.screen.height;

  // 화면 해상도에 따라 적절한 캔버스 해상도 반환
  if (width >= 3840 || height >= 2160) return "uhd";
  if (width >= 2560 || height >= 1440) return "qhd";
  if (width >= 1920 || height >= 1080) return "fhd";
  return "hd";
}

/**
 * 해상도 선택 컴포넌트
 * - HD, Full HD, QHD, 4K UHD 지원
 * - 12칸 그리드 유지, 셀 크기만 변경
 * - 현재 화면 해상도 감지 및 경고 표시
 */
export function ResolutionSelector({ value, onChange, currentScreenResolution }: ResolutionSelectorProps) {
  const currentConfig = RESOLUTIONS[value];
  const screenConfig = currentScreenResolution ? RESOLUTIONS[currentScreenResolution] : null;

  // 현재 선택된 해상도가 화면보다 큰지 확인
  const isTooLarge =
    screenConfig &&
    (currentConfig.width > screenConfig.width + 360 || currentConfig.height > screenConfig.height + 312);

  return (
    <div className="flex items-center gap-2">
      <Monitor className="h-4 w-4 text-gray-500" />
      <Select value={value} onValueChange={(v) => onChange(v as Resolution)}>
        <SelectTrigger className={`w-[180px] ${isTooLarge ? "border-orange-500" : ""}`}>
          <SelectValue />
        </SelectTrigger>
        <SelectContent className="z-[99999]">
          <SelectGroup>
            <SelectLabel>캔버스 해상도</SelectLabel>
            <SelectItem value="hd">
              <div className="flex items-center gap-2">
                <span>HD</span>
                <span className="text-xs text-gray-500">1280x720</span>
              </div>
            </SelectItem>
            <SelectItem value="fhd">
              <div className="flex items-center gap-2">
                <span>Full HD</span>
                <span className="text-xs text-gray-500">1920x1080</span>
              </div>
            </SelectItem>
            <SelectItem value="qhd">
              <div className="flex items-center gap-2">
                <span>QHD</span>
                <span className="text-xs text-gray-500">2560x1440</span>
              </div>
            </SelectItem>
            <SelectItem value="uhd">
              <div className="flex items-center gap-2">
                <span>4K UHD</span>
                <span className="text-xs text-gray-500">3840x2160</span>
              </div>
            </SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
      {isTooLarge && <span className="text-xs text-orange-600">⚠️ 현재 화면보다 큽니다</span>}
    </div>
  );
}