"use client";

import { useReportDesigner } from "@/contexts/ReportDesignerContext";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Slider } from "@/components/ui/slider";

export function GridSettingsPanel() {
  const { gridConfig, updateGridConfig } = useReportDesigner();

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm">그리드 설정</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* 그리드 표시 */}
        <div className="flex items-center justify-between">
          <Label className="text-xs">그리드 표시</Label>
          <Switch checked={gridConfig.visible} onCheckedChange={(visible) => updateGridConfig({ visible })} />
        </div>

        {/* 스냅 활성화 */}
        <div className="flex items-center justify-between">
          <Label className="text-xs">그리드 스냅</Label>
          <Switch checked={gridConfig.snapToGrid} onCheckedChange={(snapToGrid) => updateGridConfig({ snapToGrid })} />
        </div>

        {/* 프리셋 */}
        <div className="space-y-2">
          <Label className="text-xs">프리셋</Label>
          <Select
            onValueChange={(value) => {
              const presets: Record<string, { cellWidth: number; cellHeight: number }> = {
                fine: { cellWidth: 10, cellHeight: 10 },
                medium: { cellWidth: 20, cellHeight: 20 },
                coarse: { cellWidth: 50, cellHeight: 50 },
              };
              updateGridConfig(presets[value]);
            }}
          >
            <SelectTrigger className="h-8">
              <SelectValue placeholder="그리드 크기 선택" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="fine">세밀 (10x10)</SelectItem>
              <SelectItem value="medium">중간 (20x20)</SelectItem>
              <SelectItem value="coarse">넓음 (50x50)</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* 셀 너비 */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label className="text-xs">셀 너비</Label>
            <span className="text-xs text-gray-500">{gridConfig.cellWidth}px</span>
          </div>
          <Slider
            value={[gridConfig.cellWidth]}
            onValueChange={([value]) => updateGridConfig({ cellWidth: value })}
            min={5}
            max={100}
            step={5}
            className="w-full"
          />
        </div>

        {/* 셀 높이 */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label className="text-xs">셀 높이</Label>
            <span className="text-xs text-gray-500">{gridConfig.cellHeight}px</span>
          </div>
          <Slider
            value={[gridConfig.cellHeight]}
            onValueChange={([value]) => updateGridConfig({ cellHeight: value })}
            min={5}
            max={100}
            step={5}
            className="w-full"
          />
        </div>

        {/* 그리드 투명도 */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label className="text-xs">투명도</Label>
            <span className="text-xs text-gray-500">{Math.round(gridConfig.gridOpacity * 100)}%</span>
          </div>
          <Slider
            value={[gridConfig.gridOpacity * 100]}
            onValueChange={([value]) => updateGridConfig({ gridOpacity: value / 100 })}
            min={10}
            max={100}
            step={10}
            className="w-full"
          />
        </div>

        {/* 그리드 색상 */}
        <div className="space-y-2">
          <Label className="text-xs">그리드 색상</Label>
          <div className="flex gap-2">
            <Input
              type="color"
              value={gridConfig.gridColor}
              onChange={(e) => updateGridConfig({ gridColor: e.target.value })}
              className="h-8 w-16 cursor-pointer"
            />
            <Input
              type="text"
              value={gridConfig.gridColor}
              onChange={(e) => updateGridConfig({ gridColor: e.target.value })}
              className="h-8 flex-1 font-mono text-xs"
              placeholder="#e5e7eb"
            />
          </div>
        </div>

        {/* 그리드 정보 */}
        <div className="rounded border bg-gray-50 p-2 text-xs text-gray-600">
          <div className="flex justify-between">
            <span>행:</span>
            <span className="font-mono">{gridConfig.rows}</span>
          </div>
          <div className="flex justify-between">
            <span>열:</span>
            <span className="font-mono">{gridConfig.columns}</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}