"use client";

import { useState, useEffect } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Palette, Type, Square, Box } from "lucide-react";
import { ComponentStyle } from "@/types/screen";

interface StyleEditorProps {
  style: ComponentStyle;
  onStyleChange: (style: ComponentStyle) => void;
  className?: string;
}

export default function StyleEditor({ style, onStyleChange, className }: StyleEditorProps) {
  const [localStyle, setLocalStyle] = useState<ComponentStyle>(style || {});

  useEffect(() => {
    setLocalStyle(style || {});
  }, [style]);

  const handleStyleChange = (property: keyof ComponentStyle, value: any) => {
    const newStyle = { ...localStyle, [property]: value };
    setLocalStyle(newStyle);
    onStyleChange(newStyle);
  };

  return (
    <div className={`space-y-6 p-4 ${className}`}>
      {/* 여백 섹션 */}
      <div className="space-y-4">
        <div className="flex items-center gap-2">
          <Box className="h-4 w-4 text-blue-600" />
          <h3 className="font-semibold text-gray-900">여백</h3>
        </div>
        <Separator />
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="margin">외부 여백</Label>
              <Input
                id="margin"
                type="text"
                placeholder="10px, 1rem"
                value={localStyle.margin || ""}
                onChange={(e) => handleStyleChange("margin", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="padding">내부 여백</Label>
              <Input
                id="padding"
                type="text"
                placeholder="10px, 1rem"
                value={localStyle.padding || ""}
                onChange={(e) => handleStyleChange("padding", e.target.value)}
              />
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="gap">간격</Label>
              <Input
                id="gap"
                type="text"
                placeholder="10px, 1rem"
                value={localStyle.gap || ""}
                onChange={(e) => handleStyleChange("gap", e.target.value)}
              />
            </div>
          </div>
        </div>
      </div>

      {/* 테두리 섹션 */}
      <div className="space-y-4">
        <div className="flex items-center gap-2">
          <Square className="h-4 w-4 text-green-600" />
          <h3 className="font-semibold text-gray-900">테두리</h3>
        </div>
        <Separator />
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="borderWidth">테두리 두께</Label>
              <Input
                id="borderWidth"
                type="text"
                placeholder="1px, 2px"
                value={localStyle.borderWidth || ""}
                onChange={(e) => handleStyleChange("borderWidth", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="borderStyle">테두리 스타일</Label>
              <Select
                value={localStyle.borderStyle || "solid"}
                onValueChange={(value) => handleStyleChange("borderStyle", value)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="solid">실선</SelectItem>
                  <SelectItem value="dashed">파선</SelectItem>
                  <SelectItem value="dotted">점선</SelectItem>
                  <SelectItem value="none">없음</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="borderColor">테두리 색상</Label>
              <Input
                id="borderColor"
                type="color"
                value={localStyle.borderColor || "#000000"}
                onChange={(e) => handleStyleChange("borderColor", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="borderRadius">모서리 둥글기</Label>
              <Input
                id="borderRadius"
                type="text"
                placeholder="5px, 10px"
                value={localStyle.borderRadius || ""}
                onChange={(e) => handleStyleChange("borderRadius", e.target.value)}
              />
            </div>
          </div>
        </div>
      </div>

      {/* 배경 섹션 */}
      <div className="space-y-4">
        <div className="flex items-center gap-2">
          <Palette className="h-4 w-4 text-purple-600" />
          <h3 className="font-semibold text-gray-900">배경</h3>
        </div>
        <Separator />
        <div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="backgroundColor">배경 색상</Label>
            <Input
              id="backgroundColor"
              type="color"
              value={localStyle.backgroundColor || "#ffffff"}
              onChange={(e) => handleStyleChange("backgroundColor", e.target.value)}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="backgroundImage">배경 이미지</Label>
            <Input
              id="backgroundImage"
              type="text"
              placeholder="url('image.jpg')"
              value={localStyle.backgroundImage || ""}
              onChange={(e) => handleStyleChange("backgroundImage", e.target.value)}
            />
          </div>
        </div>
      </div>

      {/* 텍스트 섹션 */}
      <div className="space-y-4">
        <div className="flex items-center gap-2">
          <Type className="h-4 w-4 text-orange-600" />
          <h3 className="font-semibold text-gray-900">텍스트</h3>
        </div>
        <Separator />
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="color">텍스트 색상</Label>
              <Input
                id="color"
                type="color"
                value={localStyle.color || "#000000"}
                onChange={(e) => handleStyleChange("color", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="fontSize">글자 크기</Label>
              <Input
                id="fontSize"
                type="text"
                placeholder="14px, 1rem"
                value={localStyle.fontSize || ""}
                onChange={(e) => handleStyleChange("fontSize", e.target.value)}
              />
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="fontWeight">글자 굵기</Label>
              <Select
                value={localStyle.fontWeight || "normal"}
                onValueChange={(value) => handleStyleChange("fontWeight", value)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="normal">보통</SelectItem>
                  <SelectItem value="bold">굵게</SelectItem>
                  <SelectItem value="100">100</SelectItem>
                  <SelectItem value="400">400</SelectItem>
                  <SelectItem value="500">500</SelectItem>
                  <SelectItem value="600">600</SelectItem>
                  <SelectItem value="700">700</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="textAlign">텍스트 정렬</Label>
              <Select
                value={localStyle.textAlign || "left"}
                onValueChange={(value) => handleStyleChange("textAlign", value)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="left">왼쪽</SelectItem>
                  <SelectItem value="center">가운데</SelectItem>
                  <SelectItem value="right">오른쪽</SelectItem>
                  <SelectItem value="justify">양쪽</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
