"use client";

import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

interface OrderRegistrationModalConfig {
  buttonText?: string;
  buttonVariant?: "default" | "secondary" | "outline" | "ghost";
  buttonSize?: "default" | "sm" | "lg";
}

interface OrderRegistrationModalConfigPanelProps {
  config: OrderRegistrationModalConfig;
  onConfigChange: (config: OrderRegistrationModalConfig) => void;
}

export function OrderRegistrationModalConfigPanel({
  config,
  onConfigChange,
}: OrderRegistrationModalConfigPanelProps) {
  const [localConfig, setLocalConfig] = useState(config);

  useEffect(() => {
    setLocalConfig(config);
  }, [config]);

  const updateConfig = (updates: Partial<OrderRegistrationModalConfig>) => {
    const newConfig = { ...localConfig, ...updates };
    setLocalConfig(newConfig);
    onConfigChange(newConfig);
  };

  return (
    <div className="space-y-4 p-4">
      <div className="space-y-2">
        <Label className="text-xs sm:text-sm">버튼 텍스트</Label>
        <Input
          value={localConfig.buttonText || "수주 등록"}
          onChange={(e) => updateConfig({ buttonText: e.target.value })}
          placeholder="수주 등록"
          className="h-8 text-xs sm:h-10 sm:text-sm"
        />
      </div>

      <div className="space-y-2">
        <Label className="text-xs sm:text-sm">버튼 스타일</Label>
        <Select
          value={localConfig.buttonVariant || "default"}
          onValueChange={(value: any) => updateConfig({ buttonVariant: value })}
        >
          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="default">기본</SelectItem>
            <SelectItem value="secondary">보조</SelectItem>
            <SelectItem value="outline">외곽선</SelectItem>
            <SelectItem value="ghost">고스트</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="space-y-2">
        <Label className="text-xs sm:text-sm">버튼 크기</Label>
        <Select
          value={localConfig.buttonSize || "default"}
          onValueChange={(value: any) => updateConfig({ buttonSize: value })}
        >
          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="sm">작게</SelectItem>
            <SelectItem value="default">기본</SelectItem>
            <SelectItem value="lg">크게</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="p-4 bg-muted rounded-md text-xs text-muted-foreground">
        <p className="font-medium mb-2">💡 참고사항:</p>
        <ul className="space-y-1 list-disc list-inside">
          <li>버튼 클릭 시 수주 등록 모달이 열립니다</li>
          <li>거래처 검색, 품목 선택 기능 포함</li>
          <li>입력 방식: 거래처 우선/견적서/단가</li>
        </ul>
      </div>
    </div>
  );
}