ERP-node/frontend/components/pop/PopWorkCard.tsx

"use client";

import React, { useRef, useEffect, useState } from "react";
import { WorkOrder, Process, StatusType } from "./types";
import { STATUS_TEXT } from "./data";

interface PopWorkCardProps {
  workOrder: WorkOrder;
  currentStatus: StatusType;
  selectedProcess: Process | null;
  onAccept: () => void;
  onCancelAccept: () => void;
  onStartProduction: () => void;
  onClick: () => void;
}

export function PopWorkCard({
  workOrder,
  currentStatus,
  selectedProcess,
  onAccept,
  onCancelAccept,
  onStartProduction,
  onClick,
}: PopWorkCardProps) {
  const chipsRef = useRef<HTMLDivElement>(null);
  const [showLeftBtn, setShowLeftBtn] = useState(false);
  const [showRightBtn, setShowRightBtn] = useState(false);

  const progress = ((workOrder.producedQuantity / workOrder.orderQuantity) * 100).toFixed(1);
  const isReturnWork = workOrder.isReturn === true;

  // 공정 스크롤 버튼 표시 여부 확인
  const checkScrollButtons = () => {
    const container = chipsRef.current;
    if (!container) return;

    const isScrollable = container.scrollWidth > container.clientWidth;
    if (isScrollable) {
      const scrollLeft = container.scrollLeft;
      const maxScroll = container.scrollWidth - container.clientWidth;
      setShowLeftBtn(scrollLeft > 5);
      setShowRightBtn(scrollLeft < maxScroll - 5);
    } else {
      setShowLeftBtn(false);
      setShowRightBtn(false);
    }
  };

  // 현재 공정으로 스크롤
  const scrollToCurrentProcess = () => {
    const container = chipsRef.current;
    if (!container || !workOrder.processFlow) return;

    let targetIndex = -1;

    // 내 공정 우선
    if (selectedProcess) {
      targetIndex = workOrder.processFlow.findIndex(
        (step) =>
          step.id === selectedProcess.id &&
          (step.status === "current" || step.status === "pending")
      );
    }

    // 없으면 현재 진행 중인 공정
    if (targetIndex === -1) {
      targetIndex = workOrder.processFlow.findIndex((step) => step.status === "current");
    }

    if (targetIndex === -1) return;

    const chips = container.querySelectorAll(".pop-process-chip");
    if (chips.length > targetIndex) {
      const targetChip = chips[targetIndex] as HTMLElement;
      const scrollPos =
        targetChip.offsetLeft - container.clientWidth / 2 + targetChip.offsetWidth / 2;
      container.scrollLeft = Math.max(0, scrollPos);
    }
  };

  useEffect(() => {
    scrollToCurrentProcess();
    checkScrollButtons();

    const container = chipsRef.current;
    if (container) {
      container.addEventListener("scroll", checkScrollButtons);
      return () => container.removeEventListener("scroll", checkScrollButtons);
    }
  }, [workOrder, selectedProcess]);

  const handleScroll = (direction: "left" | "right", e: React.MouseEvent) => {
    e.stopPropagation();
    const container = chipsRef.current;
    if (!container) return;

    const scrollAmount = 150;
    container.scrollLeft += direction === "left" ? -scrollAmount : scrollAmount;
    setTimeout(checkScrollButtons, 100);
  };

  // 상태 텍스트 결정
  const statusText =
    isReturnWork && currentStatus === "pending-accept" ? "리턴" : STATUS_TEXT[workOrder.status];
  const statusClass = isReturnWork ? "return" : workOrder.status;

  // 완료된 공정 수
  const completedCount = workOrder.processFlow.filter((s) => s.status === "completed").length;
  const totalCount = workOrder.processFlow.length;

  return (
    <div
      className={`pop-work-card ${isReturnWork ? "return-card" : ""}`}
      onClick={onClick}
    >
      {/* 헤더 */}
      <div className="pop-work-card-header">
        <div style={{ display: "flex", alignItems: "center", gap: "var(--spacing-sm)", flex: 1, flexWrap: "wrap" }}>
          <span className="pop-work-number">{workOrder.id}</span>
          {isReturnWork && <span className="pop-return-badge">리턴</span>}
          {workOrder.acceptedQuantity && workOrder.acceptedQuantity > 0 && workOrder.acceptedQuantity < workOrder.orderQuantity && (
            <span className="pop-partial-badge">
              {workOrder.acceptedQuantity}/{workOrder.orderQuantity} 접수
            </span>
          )}
        </div>
        <span className={`pop-work-status ${statusClass}`}>{statusText}</span>

        {/* 액션 버튼 */}
        {currentStatus === "pending-accept" && (
          <div className="pop-work-card-actions">
            <button
              className="pop-btn pop-btn-sm pop-btn-primary"
              onClick={(e) => {
                e.stopPropagation();
                onAccept();
              }}
            >
              접수
            </button>
          </div>
        )}
        {currentStatus === "in-progress" && (
          <div className="pop-work-card-actions">
            <button
              className="pop-btn pop-btn-sm pop-btn-ghost"
              onClick={(e) => {
                e.stopPropagation();
                onCancelAccept();
              }}
            >
              접수취소
            </button>
            <button
              className="pop-btn pop-btn-sm pop-btn-success"
              onClick={(e) => {
                e.stopPropagation();
                onStartProduction();
              }}
            >
              생산진행
            </button>
          </div>
        )}
      </div>

      {/* 리턴 정보 배너 */}
      {isReturnWork && currentStatus === "pending-accept" && (
        <div className="pop-return-banner">
          <span className="pop-return-banner-icon">🔄</span>
          <div>
            <div className="pop-return-banner-title">
              {workOrder.returnFromProcessName} 공정에서 리턴됨
            </div>
            <div className="pop-return-banner-reason">{workOrder.returnReason || "사유 없음"}</div>
          </div>
        </div>
      )}

      {/* 바디 */}
      <div className="pop-work-card-body">
        <div className="pop-work-info-line">
          <div className="pop-work-info-item">
            <span className="pop-work-info-label">품목</span>
            <span className="pop-work-info-value">{workOrder.itemName}</span>
          </div>
          <div className="pop-work-info-item">
            <span className="pop-work-info-label">규격</span>
            <span className="pop-work-info-value">{workOrder.spec}</span>
          </div>
          <div className="pop-work-info-item">
            <span className="pop-work-info-label">지시</span>
            <span className="pop-work-info-value">{workOrder.orderQuantity}</span>
          </div>
          <div className="pop-work-info-item">
            <span className="pop-work-info-label">납기</span>
            <span className="pop-work-info-value">{workOrder.dueDate}</span>
          </div>
        </div>
      </div>

      {/* 공정 타임라인 */}
      <div className="pop-process-timeline">
        <div className="pop-process-bar">
          <div className="pop-process-bar-header">
            <span className="pop-process-bar-label">공정 진행</span>
            <span className="pop-process-bar-count">
              <span>{completedCount}</span>/{totalCount}
            </span>
          </div>
          <div className="pop-process-segments">
            {workOrder.processFlow.map((step, index) => {
              let segmentClass = "";
              if (step.status === "completed") segmentClass = "done";
              else if (step.status === "current") segmentClass = "current";
              if (selectedProcess && step.id === selectedProcess.id) {
                segmentClass += " my-work";
              }
              return <div key={index} className={`pop-process-segment ${segmentClass}`} />;
            })}
          </div>
        </div>

        <div className="pop-process-chips-container">
          <button
            className={`pop-process-scroll-btn left ${!showLeftBtn ? "hidden" : ""}`}
            onClick={(e) => handleScroll("left", e)}
          >
            ‹
          </button>
          <div className="pop-process-chips" ref={chipsRef}>
            {workOrder.processFlow.map((step, index) => {
              let chipClass = "";
              if (step.status === "completed") chipClass = "done";
              else if (step.status === "current") chipClass = "current";
              if (selectedProcess && step.id === selectedProcess.id) {
                chipClass += " my-work";
              }
              return (
                <div key={index} className={`pop-process-chip ${chipClass}`}>
                  <span className="pop-chip-num">{index + 1}</span>
                  {step.name}
                </div>
              );
            })}
          </div>
          <button
            className={`pop-process-scroll-btn right ${!showRightBtn ? "hidden" : ""}`}
            onClick={(e) => handleScroll("right", e)}
          >
            ›
          </button>
        </div>
      </div>

      {/* 진행률 바 */}
      {workOrder.status !== "completed" && (
        <div className="pop-work-progress">
          <div className="pop-progress-info">
            <span className="pop-progress-text">
              {workOrder.producedQuantity} / {workOrder.orderQuantity} EA
            </span>
            <span className="pop-progress-percent">{progress}%</span>
          </div>
          <div className="pop-progress-bar">
            <div className="pop-progress-fill" style={{ width: `${progress}%` }} />
          </div>
        </div>
      )}
    </div>
  );
}