"use client";

import React, { useState, useEffect } from "react";
import { X } from "lucide-react";

interface PopSettingsModalProps {
  isOpen: boolean;
  selectionMode: "single" | "multi";
  completionAction: "close" | "stay";
  onSave: (selectionMode: "single" | "multi", completionAction: "close" | "stay") => void;
  onClose: () => void;
}

export function PopSettingsModal({
  isOpen,
  selectionMode,
  completionAction,
  onSave,
  onClose,
}: PopSettingsModalProps) {
  const [tempSelectionMode, setTempSelectionMode] = useState(selectionMode);
  const [tempCompletionAction, setTempCompletionAction] = useState(completionAction);

  useEffect(() => {
    setTempSelectionMode(selectionMode);
    setTempCompletionAction(completionAction);
  }, [selectionMode, completionAction, isOpen]);

  const handleSave = () => {
    onSave(tempSelectionMode, tempCompletionAction);
  };

  if (!isOpen) return null;

  return (
    <div className="pop-modal-overlay active" onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className="pop-modal">
        <div className="pop-modal-header">
          <h2 className="pop-modal-title">설정</h2>
          <button className="pop-modal-close" onClick={onClose}>
            <X size={16} />
          </button>
        </div>

        <div className="pop-modal-body">
          {/* 선택 모드 */}
          <div className="pop-settings-section">
            <h3 className="pop-settings-title">설비/공정 선택 모드</h3>
            <div className="pop-mode-options">
              <label className="pop-mode-option">
                <input
                  type="radio"
                  name="selectionMode"
                  value="single"
                  checked={tempSelectionMode === "single"}
                  onChange={() => setTempSelectionMode("single")}
                />
                <div className="pop-mode-info">
                  <div className="pop-mode-name">단일 선택 모드</div>
                  <div className="pop-mode-desc">
                    설비와 공정을 선택하여 해당 작업만 표시합니다.
                  </div>
                </div>
              </label>
              <label className="pop-mode-option">
                <input
                  type="radio"
                  name="selectionMode"
                  value="multi"
                  checked={tempSelectionMode === "multi"}
                  onChange={() => setTempSelectionMode("multi")}
                />
                <div className="pop-mode-info">
                  <div className="pop-mode-name">다중 선택 모드</div>
                  <div className="pop-mode-desc">
                    모든 설비/공정의 작업을 표시합니다.
                  </div>
                </div>
              </label>
            </div>
          </div>

          <div className="pop-settings-divider" />

          {/* 완료 후 동작 */}
          <div className="pop-settings-section">
            <h3 className="pop-settings-title">작업 완료 후 동작</h3>
            <div className="pop-mode-options">
              <label className="pop-mode-option">
                <input
                  type="radio"
                  name="completionAction"
                  value="close"
                  checked={tempCompletionAction === "close"}
                  onChange={() => setTempCompletionAction("close")}
                />
                <div className="pop-mode-info">
                  <div className="pop-mode-name">패널 닫기</div>
                  <div className="pop-mode-desc">
                    작업 완료 시 생산진행 패널을 자동으로 닫습니다.
                  </div>
                </div>
              </label>
              <label className="pop-mode-option">
                <input
                  type="radio"
                  name="completionAction"
                  value="stay"
                  checked={tempCompletionAction === "stay"}
                  onChange={() => setTempCompletionAction("stay")}
                />
                <div className="pop-mode-info">
                  <div className="pop-mode-name">패널 유지</div>
                  <div className="pop-mode-desc">
                    작업 완료 후에도 패널을 유지합니다.
                  </div>
                </div>
              </label>
            </div>
          </div>
        </div>

        <div className="pop-modal-footer">
          <button className="pop-btn pop-btn-outline" style={{ flex: 1 }} onClick={onClose}>
            취소
          </button>
          <button className="pop-btn pop-btn-primary" style={{ flex: 1 }} onClick={handleSave}>
            저장
          </button>
        </div>
      </div>
    </div>
  );
}