vexplor/frontend/components/screen/panels/GridPanel.tsx

"use client";

import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Slider } from "@/components/ui/slider";
import { Grid3X3, RotateCcw, Eye, EyeOff, Zap, RefreshCw } from "lucide-react";
import { GridSettings, ScreenResolution } from "@/types/screen";
import { calculateGridInfo } from "@/lib/utils/gridUtils";

interface GridPanelProps {
  gridSettings: GridSettings;
  onGridSettingsChange: (settings: GridSettings) => void;
  onResetGrid: () => void;
  onForceGridUpdate?: () => void; // 강제 격자 재조정 추가
  screenResolution?: ScreenResolution; // 해상도 정보 추가
}

export const GridPanel: React.FC<GridPanelProps> = ({
  gridSettings,
  onGridSettingsChange,
  onResetGrid,
  onForceGridUpdate,
  screenResolution,
}) => {
  const updateSetting = (key: keyof GridSettings, value: any) => {
    onGridSettingsChange({
      ...gridSettings,
      [key]: value,
    });
  };

  // 실제 격자 정보 계산
  const actualGridInfo = screenResolution
    ? calculateGridInfo(screenResolution.width, screenResolution.height, {
        columns: gridSettings.columns,
        gap: gridSettings.gap,
        padding: gridSettings.padding,
        snapToGrid: gridSettings.snapToGrid || false,
      })
    : null;

  // 실제 표시되는 컬럼 수 계산 (항상 설정된 개수를 표시하되, 너비가 너무 작으면 경고)
  const actualColumns = gridSettings.columns;

  // 컬럼이 너무 작은지 확인
  const isColumnsTooSmall =
    screenResolution && actualGridInfo
      ? actualGridInfo.columnWidth < 30 // 30px 미만이면 너무 작다고 판단
      : false;

  return (
    <div className="flex h-full flex-col">
      {/* 헤더 */}
      <div className="border-b p-4">
        <div className="mb-3 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Grid3X3 className="text-muted-foreground h-4 w-4" />
            <h3 className="text-sm font-semibold">격자 설정</h3>
          </div>

          <div className="flex items-center gap-1.5">
            {onForceGridUpdate && (
              <Button
                size="sm"
                variant="outline"
                onClick={onForceGridUpdate}
                className="h-7 px-2 text-xs" style={{ fontSize: "12px" }}
                title="현재 해상도에 맞게 모든 컴포넌트를 격자에 재정렬합니다"
              >
                <RefreshCw className="mr-1 h-3 w-3" />
                재정렬
              </Button>
            )}

            <Button size="sm" variant="outline" onClick={onResetGrid} className="h-7 px-2 text-xs">
              <RotateCcw className="mr-1 h-3 w-3" />
              초기화
            </Button>
          </div>
        </div>

        {/* 주요 토글들 */}
        <div className="space-y-2.5">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              {gridSettings.showGrid ? (
                <Eye className="text-primary h-3.5 w-3.5" />
              ) : (
                <EyeOff className="text-muted-foreground h-3.5 w-3.5" />
              )}
              <Label htmlFor="showGrid" className="text-xs font-medium">
                격자 표시
              </Label>
            </div>
            <Checkbox
              id="showGrid"
              checked={gridSettings.showGrid}
              onCheckedChange={(checked) => updateSetting("showGrid", checked)}
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Zap className="text-primary h-3.5 w-3.5" />
              <Label htmlFor="snapToGrid" className="text-xs font-medium">
                격자 스냅
              </Label>
            </div>
            <Checkbox
              id="snapToGrid"
              checked={gridSettings.snapToGrid}
              onCheckedChange={(checked) => updateSetting("snapToGrid", checked)}
            />
          </div>
        </div>
      </div>

      {/* 설정 영역 */}
      <div className="flex-1 space-y-4 overflow-y-auto p-4">
        {/* 격자 구조 */}
        <div className="space-y-3">
          <h4 className="text-xs font-semibold">격자 구조</h4>

          <div className="space-y-2">
            <Label htmlFor="columns" className="text-xs font-medium">
              컬럼 수
            </Label>
            <div className="flex items-center gap-2">
              <Input
                id="columns"
                type="number"
                min={1}
                max={24}
                value={gridSettings.columns}
                onChange={(e) => {
                  const value = parseInt(e.target.value, 10);
                  if (!isNaN(value) && value >= 1 && value <= 24) {
                    updateSetting("columns", value);
                  }
                }}
                className="h-8 text-xs"
              />
              <span className="text-muted-foreground text-xs">/ 24</span>
            </div>
            <Slider
              id="columns-slider"
              min={1}
              max={24}
              step={1}
              value={[gridSettings.columns]}
              onValueChange={([value]) => updateSetting("columns", value)}
              className="w-full"
            />
            <div className="text-muted-foreground flex justify-between text-xs">
              <span>1열</span>
              <span>24열</span>
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="gap" className="text-xs font-medium">
              간격: <span className="text-primary">{gridSettings.gap}px</span>
            </Label>
            <Slider
              id="gap"
              min={0}
              max={40}
              step={2}
              value={[gridSettings.gap]}
              onValueChange={([value]) => updateSetting("gap", value)}
              className="w-full"
            />
            <div className="text-muted-foreground flex justify-between text-xs">
              <span>0px</span>
              <span>40px</span>
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="padding" className="text-xs font-medium">
              여백: <span className="text-primary">{gridSettings.padding}px</span>
            </Label>
            <Slider
              id="padding"
              min={0}
              max={60}
              step={4}
              value={[gridSettings.padding]}
              onValueChange={([value]) => updateSetting("padding", value)}
              className="w-full"
            />
            <div className="text-muted-foreground flex justify-between text-xs">
              <span>0px</span>
              <span>60px</span>
            </div>
          </div>
        </div>

        <Separator />

        {/* 격자 스타일 */}
        <div className="space-y-4">
          <h4 className="font-medium text-gray-900">격자 스타일</h4>

          <div>
            <Label htmlFor="gridColor" className="text-sm font-medium">
              격자 색상
            </Label>
            <div className="mt-1 flex items-center space-x-2">
              <Input
                id="gridColor"
                type="color"
                value={gridSettings.gridColor || "#d1d5db"}
                onChange={(e) => updateSetting("gridColor", e.target.value)}
                className="h-8 w-12 rounded border p-1"
              />
              <Input
                type="text"
                value={gridSettings.gridColor || "#d1d5db"}
                onChange={(e) => updateSetting("gridColor", e.target.value)}
                placeholder="#d1d5db"
                className="flex-1"
              />
            </div>
          </div>

          <div>
            <Label htmlFor="gridOpacity" className="mb-2 block text-sm font-medium">
              격자 투명도: {Math.round((gridSettings.gridOpacity || 0.5) * 100)}%
            </Label>
            <Slider
              id="gridOpacity"
              min={0.1}
              max={1}
              step={0.1}
              value={[gridSettings.gridOpacity || 0.5]}
              onValueChange={([value]) => updateSetting("gridOpacity", value)}
              className="w-full"
            />
            <div className="mt-1 flex justify-between text-xs text-gray-500">
              <span>10%</span>
              <span>100%</span>
            </div>
          </div>
        </div>

        <Separator />

        {/* 미리보기 */}
        <div className="space-y-3">
          <h4 className="font-medium text-gray-900">미리보기</h4>

          <div
            className="rounded-md border border-gray-200 bg-white p-4"
            style={{
              backgroundImage: gridSettings.showGrid
                ? `linear-gradient(to right, ${gridSettings.gridColor || "#d1d5db"} 1px, transparent 1px),
                   linear-gradient(to bottom, ${gridSettings.gridColor || "#d1d5db"} 1px, transparent 1px)`
                : "none",
              backgroundSize: gridSettings.showGrid ? `${100 / gridSettings.columns}% 20px` : "none",
              opacity: gridSettings.gridOpacity || 0.5,
            }}
          >
            <div className="bg-primary/20 flex h-16 items-center justify-center rounded border-2 border-dashed border-blue-300">
              <span className="text-primary text-xs">컴포넌트 예시</span>
            </div>
          </div>
        </div>
      </div>

      {/* 푸터 */}
      <div className="border-t border-gray-200 bg-gray-50 p-3">
        <div className="text-muted-foreground text-xs">💡 격자 설정은 실시간으로 캔버스에 반영됩니다 </div>

        {/* 해상도 및 격자 정보 */}
        {screenResolution && actualGridInfo && (
          <>
            <Separator />
            <div className="space-y-3">
              <h4 className="font-medium text-gray-900">격자 정보</h4>

              <div className="space-y-2 text-xs" style={{ fontSize: "12px" }}>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">해상도:</span>
                  <span className="font-mono">
                    {screenResolution.width} × {screenResolution.height}
                  </span>
                </div>

                <div className="flex justify-between">
                  <span className="text-muted-foreground">컬럼 너비:</span>
                  <span className={`font-mono ${isColumnsTooSmall ? "text-destructive" : "text-gray-900"}`}>
                    {actualGridInfo.columnWidth.toFixed(1)}px
                    {isColumnsTooSmall && " (너무 작음)"}
                  </span>
                </div>

                <div className="flex justify-between">
                  <span className="text-muted-foreground">사용 가능 너비:</span>
                  <span className="font-mono">
                    {(screenResolution.width - gridSettings.padding * 2).toLocaleString()}px
                  </span>
                </div>

                {isColumnsTooSmall && (
                  <div className="rounded-md bg-yellow-50 p-2 text-xs text-yellow-800">
                    💡 컬럼이 너무 작습니다. 컬럼 수를 줄이거나 간격을 줄여보세요.
                  </div>
                )}
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default GridPanel;