"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 } from "lucide-react";
import { GridSettings } from "@/types/screen";

interface GridPanelProps {
  gridSettings: GridSettings;
  onGridSettingsChange: (settings: GridSettings) => void;
  onResetGrid: () => void;
}

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

  return (
    <div className="flex h-full flex-col">
      {/* 헤더 */}
      <div className="border-b border-gray-200 p-4">
        <div className="mb-3 flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <Grid3X3 className="h-4 w-4 text-gray-600" />
            <h3 className="font-medium text-gray-900">격자 설정</h3>
          </div>

          <Button size="sm" variant="outline" onClick={onResetGrid} className="flex items-center space-x-1">
            <RotateCcw className="h-3 w-3" />
            <span>초기화</span>
          </Button>
        </div>

        {/* 주요 토글들 */}
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              {gridSettings.showGrid ? (
                <Eye className="h-4 w-4 text-blue-600" />
              ) : (
                <EyeOff className="h-4 w-4 text-gray-400" />
              )}
              <Label htmlFor="showGrid" className="text-sm 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 space-x-2">
              <Zap className="h-4 w-4 text-green-600" />
              <Label htmlFor="snapToGrid" className="text-sm font-medium">
                격자 스냅
              </Label>
            </div>
            <Checkbox
              id="snapToGrid"
              checked={gridSettings.snapToGrid}
              onCheckedChange={(checked) => updateSetting("snapToGrid", checked)}
            />
          </div>
        </div>
      </div>

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

          <div>
            <Label htmlFor="columns" className="mb-2 block text-sm font-medium">
              컬럼 수: {gridSettings.columns}
            </Label>
            <Slider
              id="columns"
              min={1}
              max={24}
              step={1}
              value={[gridSettings.columns]}
              onValueChange={([value]) => updateSetting("columns", value)}
              className="w-full"
            />
            <div className="mt-1 flex justify-between text-xs text-gray-500">
              <span>1</span>
              <span>24</span>
            </div>
          </div>

          <div>
            <Label htmlFor="gap" className="mb-2 block text-sm font-medium">
              간격: {gridSettings.gap}px
            </Label>
            <Slider
              id="gap"
              min={0}
              max={40}
              step={2}
              value={[gridSettings.gap]}
              onValueChange={([value]) => updateSetting("gap", value)}
              className="w-full"
            />
            <div className="mt-1 flex justify-between text-xs text-gray-500">
              <span>0px</span>
              <span>40px</span>
            </div>
          </div>

          <div>
            <Label htmlFor="padding" className="mb-2 block text-sm font-medium">
              여백: {gridSettings.padding}px
            </Label>
            <Slider
              id="padding"
              min={0}
              max={60}
              step={4}
              value={[gridSettings.padding]}
              onValueChange={([value]) => updateSetting("padding", value)}
              className="w-full"
            />
            <div className="mt-1 flex justify-between text-xs text-gray-500">
              <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="flex h-16 items-center justify-center rounded border-2 border-dashed border-blue-300 bg-blue-100">
              <span className="text-xs text-blue-600">컴포넌트 예시</span>
            </div>
          </div>
        </div>
      </div>

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

export default GridPanel;