"use client";

import React from "react";
import { X, Info } from "lucide-react";
import { WorkOrder } from "./types";

interface PopAcceptModalProps {
  isOpen: boolean;
  workOrder: WorkOrder | null;
  quantity: number;
  onQuantityChange: (qty: number) => void;
  onConfirm: (quantity: number) => void;
  onClose: () => void;
}

export function PopAcceptModal({
  isOpen,
  workOrder,
  quantity,
  onQuantityChange,
  onConfirm,
  onClose,
}: PopAcceptModalProps) {
  if (!isOpen || !workOrder) return null;

  const acceptedQty = workOrder.acceptedQuantity || 0;
  const remainingQty = workOrder.orderQuantity - acceptedQty;

  const handleAdjust = (delta: number) => {
    const newQty = Math.max(1, Math.min(quantity + delta, remainingQty));
    onQuantityChange(newQty);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = parseInt(e.target.value) || 0;
    const newQty = Math.max(0, Math.min(val, remainingQty));
    onQuantityChange(newQty);
  };

  const handleConfirm = () => {
    if (quantity > 0) {
      onConfirm(quantity);
    }
  };

  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-accept-modal-content">
            {/* 작업지시 정보 */}
            <div className="pop-accept-work-info">
              <div className="work-id">{workOrder.id}</div>
              <div className="work-name">
                {workOrder.itemName} ({workOrder.spec})
              </div>
              <div style={{ marginTop: "var(--spacing-sm)", fontSize: "var(--text-xs)", color: "rgb(var(--text-muted))" }}>
                지시수량: {workOrder.orderQuantity} EA | 기 접수: {acceptedQty} EA
              </div>
            </div>

            {/* 수량 입력 */}
            <div>
              <label className="pop-form-label">접수 수량</label>
              <div className="pop-quantity-input-wrapper">
                <button className="pop-qty-btn minus" onClick={() => handleAdjust(-10)}>
                  -10
                </button>
                <button className="pop-qty-btn minus" onClick={() => handleAdjust(-1)}>
                  -1
                </button>
                <input
                  type="number"
                  className="pop-qty-input"
                  value={quantity}
                  onChange={handleInputChange}
                  min={1}
                  max={remainingQty}
                />
                <button className="pop-qty-btn" onClick={() => handleAdjust(1)}>
                  +1
                </button>
                <button className="pop-qty-btn" onClick={() => handleAdjust(10)}>
                  +10
                </button>
              </div>
              <div className="pop-qty-hint">미접수 수량: {remainingQty} EA</div>
            </div>

            {/* 분할접수 안내 */}
            {quantity < remainingQty && (
              <div className="pop-accept-info-box">
                <span className="info-icon">
                  <Info size={20} />
                </span>
                <div>
                  <div className="info-title">분할 접수</div>
                  <div className="info-desc">
                    {quantity}EA 접수 후 {remainingQty - quantity}EA가 접수대기 상태로 남습니다.
                  </div>
                </div>
              </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={handleConfirm}
            disabled={quantity <= 0}
          >
            접수 ({quantity} EA)
          </button>
        </div>
      </div>
    </div>
  );
}