import React from "react";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Grid3X3 } from "lucide-react";
import { GridSettings } from "@/types/screen-management";

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

/**
 * 격자 설정 패널 (10px 고정 격자)
 * 
 * 사용자 설정:
 * - 격자 표시 ON/OFF
 * - 격자 스냅 ON/OFF
 * 
 * 자동 설정 (변경 불가):
 * - 격자 크기: 10px 고정
 * - 격자 간격: 10px 고정
 */
export function GridPanel({ gridSettings, onGridSettingsChange }: GridPanelProps) {
  const updateSetting = <K extends keyof GridSettings>(key: K, value: GridSettings[K]) => {
    onGridSettingsChange({
      ...gridSettings,
      [key]: value,
    });
  };

  return (
    <Card className="w-full">
      <CardHeader className="space-y-1 pb-3">
        <div className="flex items-center gap-2">
          <Grid3X3 className="h-4 w-4" />
          <CardTitle className="text-base">격자 설정</CardTitle>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* 격자 표시 */}
        <div className="flex items-center justify-between">
          <Label htmlFor="showGrid" className="flex items-center gap-2 text-sm font-medium">
            <Grid3X3 className="h-4 w-4 text-muted-foreground" />
            격자 표시
          </Label>
          <Checkbox
            id="showGrid"
            checked={gridSettings.showGrid ?? false}
            onCheckedChange={(checked) => updateSetting("showGrid", checked as boolean)}
          />
        </div>

        {/* 격자 스냅 */}
        <div className="flex items-center justify-between">
          <Label htmlFor="snapToGrid" className="flex items-center gap-2 text-sm font-medium">
            <Grid3X3 className="h-4 w-4 text-muted-foreground" />
            격자 스냅
          </Label>
          <Checkbox
            id="snapToGrid"
            checked={gridSettings.snapToGrid}
            onCheckedChange={(checked) => updateSetting("snapToGrid", checked as boolean)}
          />
        </div>

        {/* 격자 정보 (읽기 전용) */}
        <div className="mt-4 rounded-md bg-muted p-3 text-xs text-muted-foreground">
          <p className="font-medium mb-1">🔧 격자 시스템</p>
          <ul className="space-y-0.5">
            <li>• 격자 크기: <span className="font-semibold">10px 고정</span></li>
            <li>• 컴포넌트는 10px 단위로 배치됩니다</li>
            <li>• 격자 스냅을 끄면 자유롭게 배치 가능</li>
          </ul>
        </div>
      </CardContent>
    </Card>
  );
}