"use client";

import React from "react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { WebTypeComponentProps } from "@/lib/registry/types";
import { WidgetComponent, CodeTypeConfig } from "@/types/screen";

export const CodeWidget: React.FC<WebTypeComponentProps> = ({ component, value, onChange, readonly = false }) => {
  const widget = component as WidgetComponent;
  const { placeholder, required, style } = widget;
  const config = widget.webTypeConfig as CodeTypeConfig | undefined;

  // 사용자가 테두리를 설정했는지 확인
  const hasCustomBorder = style && (style.borderWidth || style.borderStyle || style.borderColor || style.border);

  // 코드 목록 가져오기
  const getCodeOptions = () => {
    if (config?.codeCategory) {
      // 실제 구현에서는 API를 통해 코드 목록을 가져옴
      // 여기서는 예시 데이터 사용
      return [
        { code: "CODE001", name: "코드 1", category: config.codeCategory },
        { code: "CODE002", name: "코드 2", category: config.codeCategory },
        { code: "CODE003", name: "코드 3", category: config.codeCategory },
      ];
    }

    // 기본 코드 옵션들
    return [
      { code: "DEFAULT001", name: "기본 코드 1", category: "DEFAULT" },
      { code: "DEFAULT002", name: "기본 코드 2", category: "DEFAULT" },
      { code: "DEFAULT003", name: "기본 코드 3", category: "DEFAULT" },
    ];
  };

  const codeOptions = getCodeOptions();

  // 선택된 코드 정보 찾기
  const selectedCode = codeOptions.find((option) => option.code === value);

  return (
    <div className="h-full w-full">
      <Select value={value || ""} onValueChange={onChange} disabled={readonly} required={required}>
        <SelectTrigger className={`h-full w-full ${hasCustomBorder ? "!border-0" : ""}`} style={style}>
          <SelectValue placeholder={placeholder || config?.placeholder || "코드를 선택하세요..."} />
        </SelectTrigger>
        <SelectContent>
          {codeOptions.map((option) => (
            <SelectItem key={option.code} value={option.code}>
              <div className="flex items-center space-x-2">
                <Badge variant="outline" className="text-xs">
                  {option.code}
                </Badge>
                <span>{option.name}</span>
              </div>
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      {/* 선택된 코드 정보 표시 */}
      {selectedCode && config?.showDetails && (
        <div className="text-muted-foreground mt-1 text-xs">
          {selectedCode.category} - {selectedCode.code}
        </div>
      )}

      {/* 코드 카테고리 표시 */}
      {config?.codeCategory && (
        <div className="mt-1">
          <Badge variant="secondary" className="text-xs">
            {config.codeCategory}
          </Badge>
        </div>
      )}
    </div>
  );
};

CodeWidget.displayName = "CodeWidget";


