"use client";

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

interface TableSearchWidgetConfigPanelProps {
  component: any;
  onUpdateProperty: (property: string, value: any) => void;
}

export function TableSearchWidgetConfigPanel({
  component,
  onUpdateProperty,
}: TableSearchWidgetConfigPanelProps) {
  const [localAutoSelect, setLocalAutoSelect] = useState(
    component.componentConfig?.autoSelectFirstTable ?? true
  );
  const [localShowSelector, setLocalShowSelector] = useState(
    component.componentConfig?.showTableSelector ?? true
  );

  useEffect(() => {
    setLocalAutoSelect(component.componentConfig?.autoSelectFirstTable ?? true);
    setLocalShowSelector(component.componentConfig?.showTableSelector ?? true);
  }, [component.componentConfig]);

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <h3 className="text-sm font-semibold">검색 필터 위젯 설정</h3>
        <p className="text-xs text-muted-foreground">
          이 위젯은 화면 내의 테이블들을 자동으로 감지하여 검색, 필터, 그룹 기능을 제공합니다.
        </p>
      </div>

      {/* 첫 번째 테이블 자동 선택 */}
      <div className="flex items-center space-x-2">
        <Checkbox
          id="autoSelectFirstTable"
          checked={localAutoSelect}
          onCheckedChange={(checked) => {
            setLocalAutoSelect(checked as boolean);
            onUpdateProperty("componentConfig.autoSelectFirstTable", checked);
          }}
        />
        <Label htmlFor="autoSelectFirstTable" className="text-xs sm:text-sm cursor-pointer">
          첫 번째 테이블 자동 선택
        </Label>
      </div>

      {/* 테이블 선택 드롭다운 표시 */}
      <div className="flex items-center space-x-2">
        <Checkbox
          id="showTableSelector"
          checked={localShowSelector}
          onCheckedChange={(checked) => {
            setLocalShowSelector(checked as boolean);
            onUpdateProperty("componentConfig.showTableSelector", checked);
          }}
        />
        <Label htmlFor="showTableSelector" className="text-xs sm:text-sm cursor-pointer">
          테이블 선택 드롭다운 표시 (여러 테이블이 있을 때)
        </Label>
      </div>

      <div className="rounded-md bg-muted p-3 text-xs">
        <p className="font-medium mb-1">참고사항:</p>
        <ul className="list-disc list-inside space-y-1 text-muted-foreground">
          <li>테이블 리스트, 분할 패널, 플로우 위젯이 자동 감지됩니다</li>
          <li>여러 테이블이 있으면 드롭다운에서 선택할 수 있습니다</li>
          <li>선택한 테이블의 컬럼 정보가 자동으로 로드됩니다</li>
        </ul>
      </div>
    </div>
  );
}