sam-react-prod/src/components/production/WorkerScreen/ProcessDetailSection.tsx

'use client';

/**
 * 공정상세 섹션 컴포넌트
 *
 * 기획 화면에 맞춘 레이아웃:
 * - 자재 투입 필요 섹션 (흰색 박스, 검은색 전체너비 버튼)
 * - 공정 단계 (N단계) + N/N 완료
 * - 숫자 뱃지 + 공정명 + 검사 뱃지 + 진행률
 * - 검사 항목: 검사 요청 버튼
 * - 상세 정보: 위치, 규격, LOT, 자재
 */

import { useState } from 'react';
import { ChevronDown } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { cn } from '@/lib/utils';
import type { ProcessStep, ProcessStepItem } from './types';

// Mock 공정 단계 데이터 (기획서 기준 8단계)
const MOCK_PROCESS_STEPS: ProcessStep[] = [
  {
    id: 'step-1',
    stepNo: 1,
    name: '자재투입',
    completed: 0,
    total: 3,
    items: [
      {
        id: 'item-1-1',
        itemNo: '#1',
        location: '1층 1호-A',
        isPriority: true,
        spec: 'W2500 × H3000',
        material: '스크린 원단',
        lot: 'LOT-스크-2025-001',
      },
      {
        id: 'item-1-2',
        itemNo: '#2',
        location: '1층 2호-B',
        isPriority: false,
        spec: 'W2600 × H3120',
        material: '스크린 원단',
        lot: 'LOT-스크-2025-002',
      },
      {
        id: 'item-1-3',
        itemNo: '#3',
        location: '2층 3호-C',
        isPriority: false,
        spec: 'W2700 × H3240',
        material: '스크린 원단',
        lot: 'LOT-스크-2025-003',
      },
    ],
  },
  {
    id: 'step-2',
    stepNo: 2,
    name: '절단매수확인',
    completed: 0,
    total: 3,
    items: [],
  },
  {
    id: 'step-3',
    stepNo: 3,
    name: '원단 절단',
    completed: 3,
    total: 3,
    items: [],
  },
  {
    id: 'step-4',
    stepNo: 4,
    name: '절단 Check',
    isInspection: true,
    completed: 0,
    total: 3,
    items: [],
  },
  {
    id: 'step-5',
    stepNo: 5,
    name: '미싱',
    completed: 1,
    total: 3,
    items: [
      {
        id: 'item-5-1',
        itemNo: '#1',
        location: '1층 1호-A',
        isPriority: true,
        spec: 'W2500 × H3000',
        material: '스크린 원단',
        lot: 'LOT-스크-2025-001',
      },
      {
        id: 'item-5-2',
        itemNo: '#2',
        location: '1층 2호-B',
        isPriority: false,
        spec: 'W2600 × H3120',
        material: '스크린 원단',
        lot: 'LOT-스크-2025-002',
      },
      {
        id: 'item-5-3',
        itemNo: '#3',
        location: '2층 3호-C',
        isPriority: false,
        spec: 'W2700 × H3240',
        material: '스크린 원단',
        lot: 'LOT-스크-2025-003',
      },
    ],
  },
  {
    id: 'step-6',
    stepNo: 6,
    name: '앤드락 작업',
    completed: 0,
    total: 3,
    items: [],
  },
  {
    id: 'step-7',
    stepNo: 7,
    name: '중간검사',
    isInspection: true,
    completed: 0,
    total: 3,
    items: [],
  },
  {
    id: 'step-8',
    stepNo: 8,
    name: '포장',
    completed: 0,
    total: 3,
    items: [],
  },
];

interface ProcessDetailSectionProps {
  isExpanded: boolean;
  materialRequired: boolean;
  onMaterialInput: () => void;
}

export function ProcessDetailSection({
  isExpanded,
  materialRequired,
  onMaterialInput,
}: ProcessDetailSectionProps) {
  const [steps, setSteps] = useState<ProcessStep[]>(MOCK_PROCESS_STEPS);
  const [expandedSteps, setExpandedSteps] = useState<Set<string>>(new Set(['step-1']));
  const [inspectionDialogOpen, setInspectionDialogOpen] = useState(false);
  const [inspectionStepName, setInspectionStepName] = useState('');
  const [pendingInspectionStepId, setPendingInspectionStepId] = useState<string | null>(null);

  const totalSteps = steps.length;
  const completedSteps = steps.filter((s) => s.completed === s.total).length;

  const toggleStep = (stepId: string) => {
    setExpandedSteps((prev) => {
      const next = new Set(prev);
      if (next.has(stepId)) {
        next.delete(stepId);
      } else {
        next.add(stepId);
      }
      return next;
    });
  };

  // 검사 요청 핸들러
  const handleInspectionRequest = (step: ProcessStep) => {
    setInspectionStepName(step.name);
    setPendingInspectionStepId(step.id);
    setInspectionDialogOpen(true);
  };

  // 검사 요청 확인 후 완료 처리
  const handleInspectionConfirm = () => {
    if (pendingInspectionStepId) {
      setSteps((prev) =>
        prev.map((step) =>
          step.id === pendingInspectionStepId
            ? { ...step, completed: step.total }
            : step
        )
      );
      // 다음 단계 펼치기
      const stepIndex = steps.findIndex((s) => s.id === pendingInspectionStepId);
      if (stepIndex < steps.length - 1) {
        setExpandedSteps((prev) => new Set([...prev, steps[stepIndex + 1].id]));
      }
    }
    setInspectionDialogOpen(false);
    setPendingInspectionStepId(null);
  };

  if (!isExpanded) return null;

  return (
    <div className="mt-4 pt-4 border-t border-gray-200 space-y-4">
      {/* 자재 투입 필요 섹션 */}
      {materialRequired && (
        <div className="border border-gray-200 rounded-lg p-4">
          <p className="text-sm font-medium text-gray-900 mb-3">자재 투입 필요</p>
          <Button
            onClick={onMaterialInput}
            className="w-full bg-gray-900 hover:bg-gray-800 text-white font-medium py-3 rounded-lg"
          >
            자재 투입하기
          </Button>
        </div>
      )}

      {/* 공정 단계 헤더 */}
      <div className="flex items-center justify-between">
        <h4 className="text-sm font-semibold text-gray-900">
          공정 단계 ({totalSteps}단계)
        </h4>
        <span className="text-sm text-gray-500">
          {completedSteps} / {totalSteps} 완료
        </span>
      </div>

      {/* 공정 단계 목록 */}
      <div className="space-y-2">
        {steps.map((step) => (
          <ProcessStepCard
            key={step.id}
            step={step}
            isExpanded={expandedSteps.has(step.id)}
            onToggle={() => toggleStep(step.id)}
            onInspectionRequest={() => handleInspectionRequest(step)}
          />
        ))}
      </div>

      {/* 검사 요청 완료 다이얼로그 */}
      <AlertDialog open={inspectionDialogOpen} onOpenChange={setInspectionDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>검사 요청 완료</AlertDialogTitle>
            <AlertDialogDescription>
              {inspectionStepName} 검사 요청이 품질팀에 전송되었습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogAction
              onClick={handleInspectionConfirm}
              className="bg-gray-900 hover:bg-gray-800"
            >
              확인
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}

// ===== 하위 컴포넌트 =====

interface ProcessStepCardProps {
  step: ProcessStep;
  isExpanded: boolean;
  onToggle: () => void;
  onInspectionRequest: () => void;
}

function ProcessStepCard({ step, isExpanded, onToggle, onInspectionRequest }: ProcessStepCardProps) {
  const isCompleted = step.completed === step.total;
  const hasItems = step.items.length > 0;

  return (
    <div
      className={cn(
        'border rounded-lg overflow-hidden',
        isCompleted ? 'bg-gray-50 border-gray-300' : 'bg-white border-gray-200'
      )}
    >
      {/* 헤더 */}
      <div
        onClick={onToggle}
        className="flex items-center justify-between p-3 cursor-pointer"
      >
        <div className="flex items-center gap-3">
          {/* 숫자 뱃지 */}
          <div
            className={cn(
              'flex items-center justify-center w-7 h-7 rounded-full text-sm font-medium',
              isCompleted
                ? 'bg-gray-400 text-white'
                : 'bg-gray-900 text-white'
            )}
          >
            {step.stepNo}
          </div>
          {/* 공정명 + 검사 뱃지 */}
          <div className="flex items-center gap-2">
            <span className="text-sm font-medium text-gray-900">{step.name}</span>
            {step.isInspection && (
              <Badge
                variant="secondary"
                className="text-xs bg-gray-200 text-gray-700 px-2 py-0.5"
              >
                검사
              </Badge>
            )}
          </div>
        </div>
        {/* 진행률 + 완료 표시 */}
        <div className="flex items-center gap-2">
          {isCompleted && (
            <span className="text-xs font-medium text-gray-600">완료</span>
          )}
          <span className="text-sm text-gray-500">
            {step.completed}/{step.total}
          </span>
          {(hasItems || step.isInspection) && (
            <ChevronDown
              className={cn(
                'h-4 w-4 text-gray-400 transition-transform',
                isExpanded && 'rotate-180'
              )}
            />
          )}
        </div>
      </div>

      {/* 검사 요청 버튼 (검사 항목일 때만) */}
      {step.isInspection && !isCompleted && isExpanded && (
        <div className="px-3 pb-3">
          <Button
            onClick={(e) => {
              e.stopPropagation();
              onInspectionRequest();
            }}
            className="w-full bg-gray-900 hover:bg-gray-800 text-white font-medium py-2.5 rounded-lg"
          >
            검사 요청
          </Button>
        </div>
      )}

      {/* 상세 항목 리스트 */}
      {hasItems && isExpanded && (
        <div className="border-t border-gray-100">
          {step.items.map((item, index) => (
            <ProcessStepItemCard
              key={item.id}
              item={item}
              index={index + 1}
              isCompleted={index < step.completed}
            />
          ))}
        </div>
      )}
    </div>
  );
}

interface ProcessStepItemCardProps {
  item: ProcessStepItem;
  index: number;
  isCompleted: boolean;
}

function ProcessStepItemCard({ item, index, isCompleted }: ProcessStepItemCardProps) {
  return (
    <div className="flex gap-3 p-3 border-b border-gray-50 last:border-b-0">
      {/* 인덱스 뱃지 */}
      <div
        className={cn(
          'flex items-center justify-center w-7 h-7 rounded-lg text-sm font-bold flex-shrink-0',
          isCompleted
            ? 'bg-gray-300 text-gray-600'
            : 'bg-gray-100 text-gray-900'
        )}
      >
        {index}
      </div>

      {/* 상세 정보 */}
      <div className="flex-1 min-w-0">
        {/* 첫 번째 줄: #N + 위치 + 선행생산 + 완료 */}
        <div className="flex items-center gap-2 mb-1.5">
          <span className="text-sm font-semibold text-gray-900">{item.itemNo}</span>
          <Badge
            variant="outline"
            className="text-xs bg-gray-100 border-gray-300 text-gray-700 px-2 py-0.5"
          >
            {item.location}
          </Badge>
          {item.isPriority && (
            <Badge className="text-xs bg-yellow-400 hover:bg-yellow-400 text-yellow-900 px-2 py-0.5">
              선행 생산
            </Badge>
          )}
          {isCompleted && (
            <span className="text-xs font-medium text-gray-500 ml-auto">완료</span>
          )}
        </div>

        {/* 두 번째 줄: 규격 + 자재 */}
        <div className="flex items-center justify-between text-xs text-gray-600">
          <span>규격: {item.spec}</span>
          <span>자재: {item.material}</span>
        </div>

        {/* 세 번째 줄: LOT */}
        <div className="text-xs text-gray-500 mt-0.5">
          LOT: {item.lot}
        </div>
      </div>
    </div>
  );
}