"use client";

import React from "react";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";

export interface StyleConfigPanelProps {
  config: any;
  onChange: (key: string, value: any) => void;
  onNestedChange: (parentKey: string, childKey: string, value: any) => void;
}

/**
 * 스타일 설정 패널: 테이블 스타일 (theme, headerStyle, rowHeight 등)
 */
export const StyleConfigPanel: React.FC<StyleConfigPanelProps> = ({
  config,
  onNestedChange,
}) => {
  const tableStyle = config.tableStyle || {};

  return (
    <div className="space-y-6">
      <div className="space-y-3">
        <div>
          <h3 className="text-sm font-semibold">테이블 스타일</h3>
          <p className="text-muted-foreground text-[10px]">테이블의 시각적 스타일을 설정합니다</p>
        </div>
        <hr className="border-border" />
        <div className="space-y-4">
          <div className="space-y-1">
            <Label htmlFor="tableTheme" className="text-xs">
              테마
            </Label>
            <select
              id="tableTheme"
              value={tableStyle.theme || "default"}
              onChange={(e) =>
                onNestedChange("tableStyle", "theme", e.target.value as "default" | "striped" | "bordered" | "minimal")
              }
              className="h-8 w-full rounded-md border px-2 text-xs"
            >
              <option value="default">기본</option>
              <option value="striped">줄무늬</option>
              <option value="bordered">테두리</option>
              <option value="minimal">미니멀</option>
            </select>
          </div>

          <div className="space-y-1">
            <Label htmlFor="headerStyle" className="text-xs">
              헤더 스타일
            </Label>
            <select
              id="headerStyle"
              value={tableStyle.headerStyle || "default"}
              onChange={(e) =>
                onNestedChange("tableStyle", "headerStyle", e.target.value as "default" | "dark" | "light")
              }
              className="h-8 w-full rounded-md border px-2 text-xs"
            >
              <option value="default">기본</option>
              <option value="dark">다크</option>
              <option value="light">라이트</option>
            </select>
          </div>

          <div className="space-y-1">
            <Label htmlFor="rowHeight" className="text-xs">
              행 높이
            </Label>
            <select
              id="rowHeight"
              value={tableStyle.rowHeight || "normal"}
              onChange={(e) =>
                onNestedChange("tableStyle", "rowHeight", e.target.value as "compact" | "normal" | "comfortable")
              }
              className="h-8 w-full rounded-md border px-2 text-xs"
            >
              <option value="compact">좁게</option>
              <option value="normal">보통</option>
              <option value="comfortable">넓게</option>
            </select>
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="alternateRows"
              checked={tableStyle.alternateRows ?? false}
              onCheckedChange={(checked) => onNestedChange("tableStyle", "alternateRows", checked)}
            />
            <Label htmlFor="alternateRows" className="text-xs">
              교행 색상
            </Label>
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="hoverEffect"
              checked={tableStyle.hoverEffect ?? true}
              onCheckedChange={(checked) => onNestedChange("tableStyle", "hoverEffect", checked)}
            />
            <Label htmlFor="hoverEffect" className="text-xs">
              호버 효과
            </Label>
          </div>

          <div className="space-y-1">
            <Label htmlFor="borderStyle" className="text-xs">
              테두리 스타일
            </Label>
            <select
              id="borderStyle"
              value={tableStyle.borderStyle || "light"}
              onChange={(e) =>
                onNestedChange("tableStyle", "borderStyle", e.target.value as "none" | "light" | "heavy")
              }
              className="h-8 w-full rounded-md border px-2 text-xs"
            >
              <option value="none">없음</option>
              <option value="light">얇게</option>
              <option value="heavy">굵게</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  );
};