ERP-node/frontend/components/screen/InteractiveScreenViewer.tsx

"use client";

import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Calendar } from "@/components/ui/calendar";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { CalendarIcon } from "lucide-react";
import { format } from "date-fns";
import { ko } from "date-fns/locale";
import { ComponentData } from "@/types/screen";

interface InteractiveScreenViewerProps {
  component: ComponentData;
  allComponents: ComponentData[];
  formData?: Record<string, any>;
  onFormDataChange?: (fieldName: string, value: any) => void;
}

export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = ({
  component,
  allComponents,
  formData: externalFormData,
  onFormDataChange,
}) => {
  const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
  const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});

  // 실제 사용할 폼 데이터 (외부에서 제공된 경우 우선 사용)
  const formData = externalFormData || localFormData;

  // 폼 데이터 업데이트
  const updateFormData = (fieldName: string, value: any) => {
    if (onFormDataChange) {
      // 외부 콜백이 있는 경우 사용
      onFormDataChange(fieldName, value);
    } else {
      // 로컬 상태 업데이트
      setLocalFormData((prev) => ({
        ...prev,
        [fieldName]: value,
      }));
    }
  };

  // 날짜 값 업데이트
  const updateDateValue = (fieldName: string, date: Date | undefined) => {
    setDateValues((prev) => ({
      ...prev,
      [fieldName]: date,
    }));
    updateFormData(fieldName, date ? format(date, "yyyy-MM-dd") : "");
  };

  // 실제 사용 가능한 위젯 렌더링
  const renderInteractiveWidget = (comp: ComponentData) => {
    const { widgetType, label, placeholder, required, readonly, columnName } = comp;
    const fieldName = columnName || comp.id;
    const currentValue = formData[fieldName] || "";

    // 스타일 적용
    const applyStyles = (element: React.ReactElement) => {
      if (!comp.style) return element;

      return React.cloneElement(element, {
        style: {
          ...comp.style,
          // 크기는 부모 컨테이너에서 처리하므로 제거
          width: undefined,
          height: undefined,
        },
      });
    };

    switch (widgetType) {
      case "text":
      case "email":
      case "tel":
        return applyStyles(
          <Input
            type={widgetType === "email" ? "email" : widgetType === "tel" ? "tel" : "text"}
            placeholder={placeholder || "입력하세요..."}
            value={currentValue}
            onChange={(e) => updateFormData(fieldName, e.target.value)}
            disabled={readonly}
            required={required}
            className="h-full w-full"
          />,
        );

      case "number":
      case "decimal":
        return applyStyles(
          <Input
            type="number"
            placeholder={placeholder || "숫자를 입력하세요..."}
            value={currentValue}
            onChange={(e) => updateFormData(fieldName, e.target.valueAsNumber || 0)}
            disabled={readonly}
            required={required}
            className="h-full w-full"
            step={widgetType === "decimal" ? "0.01" : "1"}
          />,
        );

      case "textarea":
      case "text_area":
        return applyStyles(
          <Textarea
            placeholder={placeholder || "내용을 입력하세요..."}
            value={currentValue}
            onChange={(e) => updateFormData(fieldName, e.target.value)}
            disabled={readonly}
            required={required}
            className="h-full w-full resize-none"
            rows={3}
          />,
        );

      case "select":
      case "dropdown":
        return applyStyles(
          <Select
            value={currentValue}
            onValueChange={(value) => updateFormData(fieldName, value)}
            disabled={readonly}
            required={required}
          >
            <SelectTrigger className="h-full w-full">
              <SelectValue placeholder={placeholder || "선택하세요..."} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="option1">옵션 1</SelectItem>
              <SelectItem value="option2">옵션 2</SelectItem>
              <SelectItem value="option3">옵션 3</SelectItem>
            </SelectContent>
          </Select>,
        );

      case "checkbox":
      case "boolean":
        return applyStyles(
          <div className="flex h-full w-full items-center space-x-2">
            <Checkbox
              id={fieldName}
              checked={currentValue === true || currentValue === "true"}
              onCheckedChange={(checked) => updateFormData(fieldName, checked)}
              disabled={readonly}
              required={required}
            />
            <label htmlFor={fieldName} className="text-sm">
              {label || "확인"}
            </label>
          </div>,
        );

      case "radio":
        return applyStyles(
          <div className="h-full w-full space-y-2">
            {["옵션 1", "옵션 2", "옵션 3"].map((option, index) => (
              <div key={index} className="flex items-center space-x-2">
                <input
                  type="radio"
                  id={`${fieldName}_${index}`}
                  name={fieldName}
                  value={option}
                  checked={currentValue === option}
                  onChange={(e) => updateFormData(fieldName, e.target.value)}
                  disabled={readonly}
                  required={required}
                  className="h-4 w-4"
                />
                <label htmlFor={`${fieldName}_${index}`} className="text-sm">
                  {option}
                </label>
              </div>
            ))}
          </div>,
        );

      case "date":
        const dateValue = dateValues[fieldName];
        return applyStyles(
          <Popover>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                className="h-full w-full justify-start text-left font-normal"
                disabled={readonly}
              >
                <CalendarIcon className="mr-2 h-4 w-4" />
                {dateValue ? format(dateValue, "PPP", { locale: ko }) : placeholder || "날짜를 선택하세요"}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0">
              <Calendar
                mode="single"
                selected={dateValue}
                onSelect={(date) => updateDateValue(fieldName, date)}
                initialFocus
              />
            </PopoverContent>
          </Popover>,
        );

      case "datetime":
        return applyStyles(
          <Input
            type="datetime-local"
            placeholder={placeholder || "날짜와 시간을 입력하세요..."}
            value={currentValue}
            onChange={(e) => updateFormData(fieldName, e.target.value)}
            disabled={readonly}
            required={required}
            className="h-full w-full"
          />,
        );

      case "file":
        return applyStyles(
          <Input
            type="file"
            onChange={(e) => {
              const file = e.target.files?.[0];
              updateFormData(fieldName, file);
            }}
            disabled={readonly}
            required={required}
            className="h-full w-full"
          />,
        );

      case "code":
        return applyStyles(
          <Textarea
            placeholder="코드를 입력하세요..."
            value={currentValue}
            onChange={(e) => updateFormData(fieldName, e.target.value)}
            disabled={readonly}
            required={required}
            className="h-full w-full resize-none font-mono text-sm"
            rows={4}
          />,
        );

      case "entity":
        return applyStyles(
          <Select
            value={currentValue}
            onValueChange={(value) => updateFormData(fieldName, value)}
            disabled={readonly}
            required={required}
          >
            <SelectTrigger className="h-full w-full">
              <SelectValue placeholder="엔티티를 선택하세요..." />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="user">사용자</SelectItem>
              <SelectItem value="product">제품</SelectItem>
              <SelectItem value="order">주문</SelectItem>
            </SelectContent>
          </Select>,
        );

      default:
        return applyStyles(
          <Input
            type="text"
            placeholder={placeholder || "입력하세요..."}
            value={currentValue}
            onChange={(e) => updateFormData(fieldName, e.target.value)}
            disabled={readonly}
            required={required}
            className="h-full w-full"
          />,
        );
    }
  };

  // 그룹 컴포넌트 처리
  if (component.type === "group") {
    const children = allComponents.filter((comp) => comp.parentId === component.id);

    return (
      <div className="relative h-full w-full">
        {/* 그룹 내의 자식 컴포넌트들 렌더링 */}
        {children.map((child) => (
          <div
            key={child.id}
            style={{
              position: "absolute",
              left: `${child.position.x - component.position.x}px`,
              top: `${child.position.y - component.position.y}px`,
              width: `${child.size.width}px`,
              height: `${child.size.height}px`,
              zIndex: child.position.z || 1,
            }}
          >
            <InteractiveScreenViewer
              component={child}
              allComponents={allComponents}
              formData={externalFormData}
              onFormDataChange={onFormDataChange}
            />
          </div>
        ))}
      </div>
    );
  }

  // 일반 위젯 컴포넌트
  return (
    <div className="h-full w-full">
      {/* 라벨이 있는 경우 표시 */}
      {component.label && (
        <label className="mb-1 block text-sm font-medium text-gray-700">
          {component.label}
          {component.required && <span className="ml-1 text-red-500">*</span>}
        </label>
      )}

      {/* 실제 위젯 */}
      <div className={component.label ? "flex-1" : "h-full w-full"}>{renderInteractiveWidget(component)}</div>
    </div>
  );
};