// 유저플로우 네비게이터 - 와이어프레임 스타일 (상세 조작 단계 포함)
import React, { useState, useMemo } from 'react';

const UserFlowNavigator = ({ onClose, onNavigate }) => {
  // 화면명 → view 값 매핑
  const screenToViewMap = {
    '견적관리': { menu: 'quote', view: 'quote-list' },
    '견적 목록': { menu: 'quote', view: 'quote-list' },
    '견적 등록': { menu: 'quote', view: 'quote-register' },
    '수주관리': { menu: 'order', view: 'order-list' },
    '수주 목록': { menu: 'order', view: 'order-list' },
    '수주 등록': { menu: 'order', view: 'order-register' },
    '수주 상세': { menu: 'order', view: 'order-detail' },
    '작업지시관리': { menu: 'work-order', view: 'work-order-list' },
    '작업지시 목록': { menu: 'work-order', view: 'work-order-list' },
    '작업자 화면': { menu: 'work-result', view: 'work-result-list' },
    '작업실적': { menu: 'work-result', view: 'work-result-list' },
    '자재투입': { menu: 'material', view: 'material-input-list' },
    '품질검사': { menu: 'inspection', view: 'inspection-list' },
    '검사등록 화면': { menu: 'inspection', view: 'inspection-register' },
    '부적합처리': { menu: 'defect', view: 'defect-list' },
    '부적합처리 등록': { menu: 'defect', view: 'defect-register' },
    '출하관리': { menu: 'shipment', view: 'shipment-list' },
    '출하 목록': { menu: 'shipment', view: 'shipment-list' },
    '매출관리': { menu: 'sales', view: 'sales-list' },
    '세금계산서': { menu: 'tax-invoice', view: 'tax-invoice-list' },
    '수금관리': { menu: 'collection', view: 'collection-list' },
    '품목기준관리': { menu: 'item-master', view: 'item-master-list' },
    '문서양식관리': { menu: 'document-template', view: 'document-template-list' },
    '절곡 작업일지': { menu: 'work-log', view: 'folding-work-log' },
    '생산현황': { menu: 'production-dashboard', view: 'production-dashboard-list' },
  };

  // 화면 이동 핸들러
  const handleNavigateToScreen = (screenName) => {
    const mapping = screenToViewMap[screenName];
    if (mapping && onNavigate) {
      onNavigate(mapping.menu, mapping.view);
      onClose();
    }
  };
  const [startPoint, setStartPoint] = useState(null);
  const [endPoint, setEndPoint] = useState(null);
  const [showFlow, setShowFlow] = useState(false);

  // 모든 업무 노드 정의
  const allNodes = {
    // 판매/수주
    quotation: { id: 'quotation', name: '견적', category: '판매' },
    order: { id: 'order', name: '수주', category: '판매' },

    // 생산관리
    productionPlan: { id: 'productionPlan', name: '생산계획', category: '생산관리' },
    workOrder: { id: 'workOrder', name: '작업지시', category: '생산관리' },
    materialInput: { id: 'materialInput', name: '자재투입', category: '생산관리' },
    foldingWorkLog: { id: 'foldingWorkLog', name: '절곡작업일지', category: '생산관리' },

    // 생산공정
    production: { id: 'production', name: '생산', category: '생산공정' },
    workResult: { id: 'workResult', name: '작업실적', category: '생산공정' },

    // 품질관리
    inspection: { id: 'inspection', name: '품질검사', category: '품질' },
    defectProcess: { id: 'defectProcess', name: '부적합처리', category: '품질' },

    // 출하/물류
    packaging: { id: 'packaging', name: '포장', category: '출하' },
    shipping: { id: 'shipping', name: '출하', category: '출하' },

    // 회계/정산
    salesSlip: { id: 'salesSlip', name: '매출전표', category: '회계' },
    collection: { id: 'collection', name: '수금', category: '회계' },

    // 기준정보
    itemMaster: { id: 'itemMaster', name: '품목기준관리', category: '기준정보' },
    documentTemplate: { id: 'documentTemplate', name: '문서양식관리', category: '기준정보' },
  };

  // 상세 플로우 경로 정의 (버튼, 입력필드, 액션 포함)
  const flowPaths = {
    // 견적 → 수주
    'quotation-order': {
      name: '견적에서 수주까지',
      steps: [
        {
          type: 'screen',
          screen: '견적관리',
          menu: '판매관리 > 견적관리',
          actions: [
            { type: 'button', label: '[신규] 버튼 클릭', result: '견적 등록 화면 열림' },
            { type: 'input', fields: ['거래처 선택', '현장 선택', '납기일 입력'] },
            { type: 'input', fields: ['품목 추가 (제품유형, 폭, 높이, 수량, 단가)'] },
            { type: 'button', label: '[저장] 버튼 클릭', result: '견적서 저장 완료' },
            { type: 'button', label: '[견적서 출력] 버튼 클릭', result: '견적서 PDF 생성 (선택)' },
          ]
        },
        {
          type: 'decision',
          question: '고객 승인 여부',
          yes: '수주 전환 진행',
          no: '견적 수정 또는 취소'
        },
        {
          type: 'screen',
          screen: '견적관리',
          menu: '판매관리 > 견적관리',
          actions: [
            { type: 'select', label: '승인된 견적 행 선택' },
            { type: 'button', label: '[수주전환] 버튼 클릭', result: '수주전환 확인 팝업' },
            { type: 'button', label: '[확인] 버튼 클릭', result: '수주 자동 생성' },
          ]
        },
        {
          type: 'result',
          message: '수주 등록 완료',
          next: '수주관리 화면에서 확인 가능'
        }
      ]
    },

    // 수주 → 작업지시
    'order-workOrder': {
      name: '수주에서 작업지시까지',
      steps: [
        {
          type: 'screen',
          screen: '수주관리',
          menu: '판매관리 > 수주관리',
          actions: [
            { type: 'select', label: '수주 행 선택' },
            { type: 'button', label: '[상세보기] 버튼 클릭', result: '수주 상세 패널 열림' },
          ]
        },
        {
          type: 'decision',
          question: '입금확인 / 외상승인',
          yes: '생산지시 가능',
          no: '회계팀 승인 대기'
        },
        {
          type: 'screen',
          screen: '수주관리',
          menu: '판매관리 > 수주관리',
          actions: [
            { type: 'button', label: '[생산지시] 버튼 클릭', result: '생산지시 확인 팝업' },
            { type: 'checkbox', label: '공정 선택 (스크린/슬랫/절곡)' },
            { type: 'button', label: '[확인] 버튼 클릭', result: '작업지시 자동 생성' },
          ]
        },
        {
          type: 'auto',
          message: '시스템 자동 처리',
          details: [
            '수주 품목별 작업지시 자동 생성',
            '공정별 분리 (스크린/슬랫/절곡)',
            '작업지시번호 자동 채번'
          ]
        },
        {
          type: 'screen',
          screen: '작업지시관리',
          menu: '생산관리 > 작업지시관리',
          actions: [
            { type: 'select', label: '미배정 작업지시 선택' },
            { type: 'input', fields: ['담당자 배정 (팀/개인 선택)'] },
            { type: 'button', label: '[배정저장] 버튼 클릭', result: '담당자 배정 완료' },
          ]
        },
        {
          type: 'result',
          message: '작업지시 생성 및 배정 완료',
          next: '작업자 화면에 작업지시 표시됨'
        }
      ]
    },

    // 작업지시 → 작업실적
    'workOrder-workResult': {
      name: '작업지시에서 작업실적까지',
      steps: [
        {
          type: 'screen',
          screen: '작업자 화면',
          menu: '생산관리 > 작업자 화면',
          actions: [
            { type: 'view', label: '배정된 작업지시 목록 확인' },
            { type: 'select', label: '작업할 작업지시 선택' },
          ]
        },
        {
          type: 'screen',
          screen: '자재투입',
          menu: '생산관리 > 자재투입',
          actions: [
            { type: 'button', label: '[자재불출] 버튼 클릭', result: '불출 화면 열림' },
            { type: 'input', fields: ['자재 선택', '불출수량 입력'] },
            { type: 'button', label: '[불출확인] 버튼 클릭', result: '자재 투입 완료' },
          ]
        },
        {
          type: 'screen',
          screen: '작업자 화면',
          menu: '생산관리 > 작업자 화면',
          actions: [
            { type: 'button', label: '[작업시작] 버튼 클릭', result: '작업 시작 시간 기록' },
            { type: 'info', label: '실제 생산 작업 수행' },
            { type: 'button', label: '[작업완료] 버튼 클릭', result: '실적 입력 팝업' },
          ]
        },
        {
          type: 'screen',
          screen: '실적등록 팝업',
          menu: '생산관리 > 작업자 화면 > 실적등록',
          actions: [
            { type: 'input', fields: ['생산수량', '양품수량', '불량수량'] },
            { type: 'input', fields: ['작업시간', '비고사항 (선택)'] },
            { type: 'button', label: '[저장] 버튼 클릭', result: '작업실적 저장' },
          ]
        },
        {
          type: 'result',
          message: '작업실적 등록 완료',
          next: '품질검사 대기 상태로 변경'
        }
      ]
    },

    // 작업실적 → 출하
    'workResult-shipping': {
      name: '작업실적에서 출하까지',
      steps: [
        {
          type: 'screen',
          screen: '품질검사',
          menu: '품질관리 > 중간검사 / 제품검사',
          actions: [
            { type: 'view', label: '검사대기 목록 확인' },
            { type: 'select', label: '검사할 항목 선택' },
            { type: 'button', label: '[검사등록] 버튼 클릭', result: '검사 입력 화면' },
          ]
        },
        {
          type: 'screen',
          screen: '검사등록 화면',
          menu: '품질관리 > 검사등록',
          actions: [
            { type: 'input', fields: ['검사항목별 측정값 입력'] },
            { type: 'input', fields: ['검사결과 (합격/불합격) 선택'] },
            { type: 'button', label: '[저장] 버튼 클릭', result: '검사결과 저장' },
          ]
        },
        {
          type: 'decision',
          question: '검사 합격 여부',
          yes: '포장/출하 진행',
          no: '부적합 처리 (재작업/폐기)'
        },
        {
          type: 'screen',
          screen: '출하관리',
          menu: '출하관리 > 출하등록',
          actions: [
            { type: 'button', label: '[신규출하] 버튼 클릭', result: '출하 등록 화면' },
            { type: 'input', fields: ['수주 선택', '출하품목 선택'] },
            { type: 'input', fields: ['출하수량', '배송정보 입력'] },
            { type: 'button', label: '[저장] 버튼 클릭', result: '출하 등록 완료' },
          ]
        },
        {
          type: 'screen',
          screen: '출하관리',
          menu: '출하관리 > 출하관리',
          actions: [
            { type: 'select', label: '출하 건 선택' },
            { type: 'button', label: '[출하확정] 버튼 클릭', result: '출하 상태 변경' },
            { type: 'button', label: '[거래명세서 출력] 버튼 클릭', result: '문서 출력 (선택)' },
          ]
        },
        {
          type: 'result',
          message: '출하 완료',
          next: '배송 진행, 매출 처리 대기'
        }
      ]
    },

    // 출하 → 수금
    'shipping-collection': {
      name: '출하에서 수금까지',
      steps: [
        {
          type: 'screen',
          screen: '출하관리',
          menu: '출하관리 > 출하관리',
          actions: [
            { type: 'select', label: '배송완료 건 선택' },
            { type: 'button', label: '[납품확인] 버튼 클릭', result: '납품 상태 변경' },
          ]
        },
        {
          type: 'screen',
          screen: '매출관리',
          menu: '회계관리 > 매출관리',
          actions: [
            { type: 'button', label: '[매출전표생성] 버튼 클릭', result: '전표 생성 화면' },
            { type: 'input', fields: ['출하 건 선택', '매출일자 입력'] },
            { type: 'button', label: '[저장] 버튼 클릭', result: '매출전표 생성' },
          ]
        },
        {
          type: 'screen',
          screen: '세금계산서',
          menu: '회계관리 > 세금계산서',
          actions: [
            { type: 'select', label: '매출전표 선택' },
            { type: 'button', label: '[세금계산서 발행] 버튼 클릭', result: '발행 처리' },
          ]
        },
        {
          type: 'screen',
          screen: '수금관리',
          menu: '회계관리 > 수금관리',
          actions: [
            { type: 'button', label: '[수금등록] 버튼 클릭', result: '수금 입력 화면' },
            { type: 'input', fields: ['거래처 선택', '수금금액', '수금일자'] },
            { type: 'input', fields: ['수금방법 (현금/계좌이체/어음)'] },
            { type: 'button', label: '[저장] 버튼 클릭', result: '수금 등록 완료' },
          ]
        },
        {
          type: 'result',
          message: '수금 완료',
          next: '거래처 미수금 차감 처리됨'
        }
      ]
    },

    // 견적 → 출하 (전체 프로세스)
    'quotation-shipping': {
      name: '견적에서 출하까지 (전체)',
      steps: [
        {
          type: 'phase',
          name: '1단계: 견적',
          screen: '견적관리',
          actions: [
            { type: 'button', label: '[신규] → 견적정보 입력 → [저장]' },
          ]
        },
        {
          type: 'phase',
          name: '2단계: 수주전환',
          screen: '견적관리',
          actions: [
            { type: 'button', label: '견적 선택 → [수주전환] → [확인]' },
          ]
        },
        {
          type: 'phase',
          name: '3단계: 생산지시',
          screen: '수주관리',
          actions: [
            { type: 'button', label: '수주 선택 → [생산지시] → 공정선택 → [확인]' },
          ]
        },
        {
          type: 'phase',
          name: '4단계: 담당자 배정',
          screen: '작업지시관리',
          actions: [
            { type: 'button', label: '작업지시 선택 → 담당자 선택 → [배정저장]' },
          ]
        },
        {
          type: 'phase',
          name: '5단계: 자재투입',
          screen: '자재투입',
          actions: [
            { type: 'button', label: '[자재불출] → 자재/수량 선택 → [불출확인]' },
          ]
        },
        {
          type: 'phase',
          name: '6단계: 생산작업',
          screen: '작업자 화면',
          actions: [
            { type: 'button', label: '[작업시작] → 작업수행 → [작업완료] → 실적입력 → [저장]' },
          ]
        },
        {
          type: 'phase',
          name: '7단계: 품질검사',
          screen: '품질검사',
          actions: [
            { type: 'button', label: '검사대상 선택 → [검사등록] → 측정값 입력 → [저장]' },
          ]
        },
        {
          type: 'phase',
          name: '8단계: 출하',
          screen: '출하관리',
          actions: [
            { type: 'button', label: '[신규출하] → 출하정보 입력 → [저장] → [출하확정]' },
          ]
        },
        {
          type: 'result',
          message: '전체 프로세스 완료',
          next: '매출/수금 처리로 이동'
        }
      ]
    },

    // 부적합처리 → 재작업
    'defectProcess-workOrder': {
      name: '부적합 처리에서 재작업까지',
      steps: [
        {
          type: 'screen',
          screen: '품질검사',
          menu: '품질관리 > 검사관리',
          actions: [
            { type: 'input', fields: ['검사결과: 불합격 선택'] },
            { type: 'button', label: '[저장] 버튼 클릭', result: '불합격 판정 저장' },
          ]
        },
        {
          type: 'screen',
          screen: '부적합처리',
          menu: '품질관리 > 부적합처리',
          actions: [
            { type: 'select', label: '부적합 항목 선택' },
            { type: 'button', label: '[처리등록] 버튼 클릭', result: '처리 화면 열림' },
          ]
        },
        {
          type: 'screen',
          screen: '부적합처리 등록',
          menu: '품질관리 > 부적합처리',
          actions: [
            { type: 'input', fields: ['불량유형 선택', '원인분석 입력'] },
            { type: 'input', fields: ['처리방법 선택 (재작업/폐기/특채)'] },
            { type: 'button', label: '[저장] 버튼 클릭', result: '부적합 처리 등록' },
          ]
        },
        {
          type: 'decision',
          question: '재작업 가능 여부',
          yes: '재작업 지시 생성',
          no: '폐기 처리'
        },
        {
          type: 'screen',
          screen: '부적합처리',
          menu: '품질관리 > 부적합처리',
          actions: [
            { type: 'button', label: '[재작업지시] 버튼 클릭', result: '재작업 지시 생성 팝업' },
            { type: 'input', fields: ['재작업 내용', '담당자 선택'] },
            { type: 'button', label: '[확인] 버튼 클릭', result: '재작업 지시 생성' },
          ]
        },
        {
          type: 'result',
          message: '재작업 지시 생성 완료',
          next: '작업자 화면에 재작업 지시 표시'
        }
      ]
    },

    // 작업지시 → 절곡작업일지 (NEW)
    'workOrder-foldingWorkLog': {
      name: '작업지시에서 절곡 작업일지까지',
      steps: [
        {
          type: 'screen',
          screen: '작업지시관리',
          menu: '생산관리 > 작업지시관리',
          actions: [
            { type: 'view', label: '절곡 공정 작업지시 목록 확인' },
            { type: 'select', label: '절곡 작업지시 행 선택' },
            { type: 'button', label: '[작업일지] 버튼 클릭', result: '작업일지 화면 열림' },
          ]
        },
        {
          type: 'auto',
          message: '시스템 자동 매핑',
          details: [
            '품목기준관리 > 부품 > 절곡 부품 데이터 연동',
            '품목코드에 따른 전개도 이미지/치수 자동 로드',
            '문서양식관리 > 절곡 작업일지(WL-FLD) 양식 적용'
          ]
        },
        {
          type: 'screen',
          screen: '절곡 작업일지',
          menu: '생산관리 > 작업일지 > 절곡',
          actions: [
            { type: 'view', label: '헤더정보: 거래처, 현장, 작업일자, LOT No 확인' },
            { type: 'view', label: '작업내역 테이블 확인 (세부품명, 재질, LOT NO, 길이/규격, 수량)' },
          ]
        },
        {
          type: 'workLogPreview',
          title: '절곡 작업일지 샘플 미리보기',
          docNo: 'WL-FLD-241215-01',
          sections: [
            { id: 'header', title: '헤더 정보', fields: ['거래처: (주)신한건설', '현장: 강남역 오피스텔 신축공사', '작업일자: 2024-12-15', 'LOT No: LOT-FLD-2024-12-001'] },
            { id: 'wall-type', title: '1.1 벽면형 [120·70]', items: ['엘바 (E.G.I 1.6T) - 3000mm x 4EA', '하장바 (E.G.I 1.6T) - 3000mm x 2EA', '짜부가스켓 (E.G.I 0.8T) - 3000mm x 4EA'] },
            { id: 'bottom-finish', title: '2. 하단마감재 [60·40]', items: ['50평철 (E.G.I 1.2T) - 3000mm x 2EA'] },
            { id: 'case', title: '3.1 케이스 [500*330]', items: ['500*380전면판 (E.G.I 1.6T) - 3000mm x 1EA', 'S/BOX 린텔박스 (E.G.I 1.6T) - 2438mm x 1EA', '밑면 점검구 (E.G.I 0.8T) - 3000mm x 1EA'] },
            { id: 'smoke-barrier', title: '4. 연기차단재', items: ['연기차단 플레이트 (STS 0.5T) - 2500mm x 2EA'] },
          ]
        },
        {
          type: 'screen',
          screen: '전개도 상세',
          menu: '생산관리 > 작업일지 > 전개도',
          actions: [
            { type: 'view', label: '전개도 이미지 표시 (품목기준관리에서 연동)' },
            { type: 'view', label: '치수정보 테이블: 입력값, 비율, 비율적용후, 합계' },
            { type: 'info', label: '절곡 작업자가 참조하여 작업 수행' },
          ]
        },
        {
          type: 'developedViewPreview',
          title: '전개도 샘플 데이터',
          items: [
            {
              itemName: '하장바',
              material: 'E.G.I 1.6T',
              dimensions: [
                { input: 15, rate: -1, afterRate: 28, sum: 67 },
                { input: '-', rate: '-', afterRate: '-', sum: 126 },
                { input: '-', rate: '-', afterRate: '-', sum: 165 },
                { input: '-', rate: '-', afterRate: '-', sum: 178 },
                { input: '-', rate: '-', afterRate: '-', sum: 193 },
              ],
              angles: ['각도']
            },
            {
              itemName: '500*380전면판',
              material: 'E.G.I 1.6T',
              dimensions: [
                { input: 17, rate: -1, afterRate: 71, sum: 120 },
                { input: '-', rate: '-', afterRate: '-', sum: '499 (A")' },
                { input: '-', rate: '-', afterRate: '-', sum: 553 },
                { input: '-', rate: '-', afterRate: 568, sum: 588 },
              ],
              angles: ['각도', '각도']
            },
          ]
        },
        {
          type: 'screen',
          screen: '절곡 작업일지',
          menu: '생산관리 > 작업일지 > 절곡',
          actions: [
            { type: 'input', fields: ['실제 생산수량 입력', '불량수량 입력 (있는 경우)'] },
            { type: 'input', fields: ['작업자 서명/확인', '비고사항 입력'] },
            { type: 'button', label: '[저장] 버튼 클릭', result: '작업일지 저장' },
            { type: 'button', label: '[인쇄] 버튼 클릭', result: '작업일지 출력 (선택)' },
          ]
        },
        {
          type: 'result',
          message: '절곡 작업일지 작성 완료',
          next: '품질검사 및 실적 등록 진행'
        }
      ]
    },

    // 품목기준관리 → 절곡작업일지 (데이터 연동 확인용)
    'itemMaster-foldingWorkLog': {
      name: '품목기준에서 절곡 작업일지 데이터 연동',
      steps: [
        {
          type: 'screen',
          screen: '품목기준관리',
          menu: '기준정보 > 품목기준관리',
          actions: [
            { type: 'select', label: '부품 탭 선택' },
            { type: 'select', label: '절곡 부품 카테고리 필터링' },
            { type: 'view', label: '절곡 부품 목록 확인 (엘바, 하장바, 전면판 등)' },
          ]
        },
        {
          type: 'screen',
          screen: '절곡 부품 상세',
          menu: '기준정보 > 품목기준관리 > 부품상세',
          actions: [
            { type: 'select', label: '부품 행 선택 후 [상세보기]' },
            { type: 'view', label: '전개도 섹션 확인' },
          ]
        },
        {
          type: 'developedViewDetail',
          title: '전개도 상세 정보',
          fields: [
            { label: '품목코드', value: 'SD31' },
            { label: '품목명', value: '하장바' },
            { label: '재질', value: 'E.G.I 1.6T' },
            { label: '분류', value: '가이드레일(측면형)' },
          ],
          dimensionTable: {
            headers: ['입력값', '비율', '비율적용후', '합계'],
            rows: [
              [15, -1, 28, 67],
              ['-', '-', '-', 126],
              ['-', '-', '-', 165],
              ['-', '-', '-', 178],
              ['-', '-', '-', 193],
            ]
          }
        },
        {
          type: 'auto',
          message: '작업일지 연동 구조',
          details: [
            '품목코드로 절곡 부품 조회',
            '전개도 이미지 및 치수 데이터 로드',
            '문서양식(WL-FLD)의 TBL-WORKLOG-FOLD 블록에 매핑',
            '작업지시 분리 시 자동으로 작업일지에 데이터 연동'
          ]
        },
        {
          type: 'screen',
          screen: '문서양식관리',
          menu: '기준정보 > 문서양식관리',
          actions: [
            { type: 'select', label: '절곡 작업일지(WL-FLD) 양식 선택' },
            { type: 'view', label: '양식 구조 확인: TBL-WORKLOG-FOLD 블록' },
          ]
        },
        {
          type: 'result',
          message: '데이터 연동 구조 확인 완료',
          next: '작업지시 분리 시 자동 연동됨'
        }
      ]
    },

    // 절곡작업일지 → 작업실적
    'foldingWorkLog-workResult': {
      name: '절곡 작업일지에서 작업실적까지',
      steps: [
        {
          type: 'screen',
          screen: '절곡 작업일지',
          menu: '생산관리 > 작업일지 > 절곡',
          actions: [
            { type: 'view', label: '작성된 작업일지 확인' },
            { type: 'button', label: '[작업완료] 버튼 클릭', result: '실적 등록 팝업' },
          ]
        },
        {
          type: 'screen',
          screen: '실적등록 팝업',
          menu: '생산관리 > 작업일지 > 실적등록',
          actions: [
            { type: 'input', fields: ['생산수량', '양품수량', '불량수량'] },
            { type: 'input', fields: ['총 중량(kg)', '작업시간'] },
            { type: 'button', label: '[저장] 버튼 클릭', result: '작업실적 저장' },
          ]
        },
        {
          type: 'auto',
          message: '자동 처리 항목',
          details: [
            '작업일지 기준 실적 데이터 생성',
            '재고 수량 반영 (완제품/반제품)',
            '품질검사 대기 상태로 전환'
          ]
        },
        {
          type: 'result',
          message: '작업실적 등록 완료',
          next: '품질검사 진행'
        }
      ]
    },
  };

  // 카테고리별 노드 그룹핑
  const nodesByCategory = useMemo(() => {
    const grouped = {};
    Object.values(allNodes).forEach(node => {
      if (!grouped[node.category]) {
        grouped[node.category] = [];
      }
      grouped[node.category].push(node);
    });
    return grouped;
  }, []);

  // 선택된 경로 찾기
  const selectedPath = useMemo(() => {
    if (!startPoint || !endPoint) return null;
    const key = `${startPoint}-${endPoint}`;
    return flowPaths[key] || null;
  }, [startPoint, endPoint]);

  // 가능한 도착점 찾기
  const availableEndPoints = useMemo(() => {
    if (!startPoint) return [];
    return Object.keys(flowPaths)
      .filter(key => key.startsWith(startPoint + '-'))
      .map(key => key.split('-')[1]);
  }, [startPoint]);

  const handleStartSelect = (nodeId) => {
    setStartPoint(nodeId);
    setEndPoint(null);
    setShowFlow(false);
  };

  const handleEndSelect = (nodeId) => {
    setEndPoint(nodeId);
    setShowFlow(false);
  };

  const handleShowFlow = () => {
    if (startPoint && endPoint && selectedPath) {
      setShowFlow(true);
    }
  };

  const handleReset = () => {
    setStartPoint(null);
    setEndPoint(null);
    setShowFlow(false);
  };

  // 스텝 렌더링
  const renderStep = (step, index) => {
    // 화면/스크린 타입
    if (step.type === 'screen') {
      const canNavigate = screenToViewMap[step.screen];
      return (
        <div key={index} className="mb-6">
          {/* 화면 헤더 */}
          <div className="border-2 border-gray-800 bg-gray-100 p-3">
            <div className="flex items-center justify-between border-b border-gray-400 pb-2 mb-2">
              <div className="flex items-center gap-2">
                <span className="font-bold text-gray-800">{step.screen}</span>
                {canNavigate && (
                  <button
                    onClick={() => handleNavigateToScreen(step.screen)}
                    className="px-2 py-0.5 text-xs border border-gray-600 bg-white hover:bg-gray-800 hover:text-white transition-colors"
                    title="이 화면으로 이동"
                  >
                    → 화면이동
                  </button>
                )}
              </div>
              <span className="text-xs text-gray-500 bg-white px-2 py-1 border border-gray-300">{step.menu}</span>
            </div>

            {/* 액션 목록 */}
            <div className="space-y-2">
              {step.actions.map((action, aIdx) => (
                <div key={aIdx} className="flex items-start gap-2">
                  {action.type === 'button' && (
                    <div className="flex items-center gap-2 w-full">
                      <div className="w-6 h-6 border border-gray-600 bg-white flex items-center justify-center text-xs font-bold">
                        {aIdx + 1}
                      </div>
                      <div className="flex-1 border border-gray-500 bg-white px-3 py-1.5 text-sm">
                        <span className="font-medium text-gray-800">{action.label}</span>
                      </div>
                      {action.result && (
                        <>
                          <span className="text-gray-400">→</span>
                          <div className="text-xs text-gray-600 bg-gray-50 px-2 py-1 border border-dashed border-gray-400">
                            {action.result}
                          </div>
                        </>
                      )}
                    </div>
                  )}

                  {action.type === 'input' && (
                    <div className="flex items-start gap-2 w-full">
                      <div className="w-6 h-6 border border-gray-600 bg-white flex items-center justify-center text-xs font-bold">
                        {aIdx + 1}
                      </div>
                      <div className="flex-1">
                        <div className="text-xs text-gray-500 mb-1">입력 필드:</div>
                        <div className="flex flex-wrap gap-1">
                          {action.fields.map((field, fIdx) => (
                            <div key={fIdx} className="border border-gray-400 bg-white px-2 py-1 text-xs">
                              <span className="text-gray-400">[</span>
                              <span className="text-gray-700">{field}</span>
                              <span className="text-gray-400">]</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  )}

                  {action.type === 'select' && (
                    <div className="flex items-center gap-2 w-full">
                      <div className="w-6 h-6 border border-gray-600 bg-white flex items-center justify-center text-xs font-bold">
                        {aIdx + 1}
                      </div>
                      <div className="border border-gray-400 bg-white px-3 py-1.5 text-sm flex items-center gap-2">
                        <div className="w-4 h-4 border border-gray-500"></div>
                        <span className="text-gray-700">{action.label}</span>
                      </div>
                    </div>
                  )}

                  {action.type === 'checkbox' && (
                    <div className="flex items-center gap-2 w-full">
                      <div className="w-6 h-6 border border-gray-600 bg-white flex items-center justify-center text-xs font-bold">
                        {aIdx + 1}
                      </div>
                      <div className="border border-gray-400 bg-white px-3 py-1.5 text-sm flex items-center gap-2">
                        <div className="w-4 h-4 border border-gray-500 flex items-center justify-center text-xs">✓</div>
                        <span className="text-gray-700">{action.label}</span>
                      </div>
                    </div>
                  )}

                  {action.type === 'view' && (
                    <div className="flex items-center gap-2 w-full">
                      <div className="w-6 h-6 border border-gray-600 bg-white flex items-center justify-center text-xs font-bold">
                        {aIdx + 1}
                      </div>
                      <div className="border border-dashed border-gray-400 bg-gray-50 px-3 py-1.5 text-sm text-gray-600">
                        {action.label}
                      </div>
                    </div>
                  )}

                  {action.type === 'info' && (
                    <div className="flex items-center gap-2 w-full">
                      <div className="w-6 h-6 border border-gray-600 bg-gray-200 flex items-center justify-center text-xs font-bold">
                        ~
                      </div>
                      <div className="border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-600 italic">
                        {action.label}
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>

          {/* 화살표 */}
          <div className="flex justify-center py-2">
            <div className="flex flex-col items-center">
              <div className="w-0.5 h-6 bg-gray-600"></div>
              <div className="w-0 h-0 border-l-4 border-r-4 border-t-6 border-l-transparent border-r-transparent border-t-gray-600"></div>
            </div>
          </div>
        </div>
      );
    }

    // 판단/분기 타입
    if (step.type === 'decision') {
      return (
        <div key={index} className="mb-6 flex flex-col items-center">
          <div className="relative">
            <div className="w-40 h-40 border-2 border-gray-800 bg-white transform rotate-45"></div>
            <div className="absolute inset-0 flex items-center justify-center">
              <span className="text-sm font-bold text-gray-800 text-center">{step.question}</span>
            </div>
          </div>
          <div className="flex gap-12 mt-3">
            <div className="text-center">
              <div className="border border-gray-600 bg-white px-3 py-1 text-sm font-bold">Y</div>
              <div className="text-xs text-gray-600 mt-1">{step.yes}</div>
            </div>
            <div className="text-center">
              <div className="border border-gray-600 bg-white px-3 py-1 text-sm font-bold">N</div>
              <div className="text-xs text-gray-600 mt-1">{step.no}</div>
            </div>
          </div>

          {/* 화살표 */}
          <div className="flex justify-center py-2 mt-2">
            <div className="flex flex-col items-center">
              <div className="w-0.5 h-6 bg-gray-600"></div>
              <div className="w-0 h-0 border-l-4 border-r-4 border-t-6 border-l-transparent border-r-transparent border-t-gray-600"></div>
            </div>
          </div>
        </div>
      );
    }

    // 자동 처리 타입
    if (step.type === 'auto') {
      return (
        <div key={index} className="mb-6">
          <div className="border-2 border-dashed border-gray-500 bg-gray-50 p-3">
            <div className="text-sm font-bold text-gray-700 mb-2 flex items-center gap-2">
              <span className="w-5 h-5 border border-gray-500 rounded-full flex items-center justify-center text-xs">A</span>
              {step.message}
            </div>
            <ul className="space-y-1">
              {step.details.map((detail, dIdx) => (
                <li key={dIdx} className="text-xs text-gray-600 flex items-center gap-2">
                  <span className="w-1 h-1 bg-gray-400"></span>
                  {detail}
                </li>
              ))}
            </ul>
          </div>

          {/* 화살표 */}
          <div className="flex justify-center py-2">
            <div className="flex flex-col items-center">
              <div className="w-0.5 h-6 bg-gray-600"></div>
              <div className="w-0 h-0 border-l-4 border-r-4 border-t-6 border-l-transparent border-r-transparent border-t-gray-600"></div>
            </div>
          </div>
        </div>
      );
    }

    // 단계별 요약 (전체 프로세스용)
    if (step.type === 'phase') {
      const canNavigate = screenToViewMap[step.screen];
      return (
        <div key={index} className="mb-4">
          <div className="border border-gray-600 bg-white">
            <div className="bg-gray-200 px-3 py-1 border-b border-gray-400 flex justify-between items-center">
              <span className="font-bold text-sm text-gray-800">{step.name}</span>
              <div className="flex items-center gap-2">
                <span className="text-xs text-gray-500">{step.screen}</span>
                {canNavigate && (
                  <button
                    onClick={() => handleNavigateToScreen(step.screen)}
                    className="px-1.5 py-0.5 text-xs border border-gray-500 bg-white hover:bg-gray-800 hover:text-white transition-colors"
                    title="이 화면으로 이동"
                  >
                    →
                  </button>
                )}
              </div>
            </div>
            <div className="px-3 py-2">
              {step.actions.map((action, aIdx) => (
                <div key={aIdx} className="text-sm text-gray-700">
                  {action.label}
                </div>
              ))}
            </div>
          </div>

          {/* 화살표 */}
          <div className="flex justify-center py-1">
            <div className="flex flex-col items-center">
              <div className="w-0.5 h-4 bg-gray-500"></div>
              <div className="w-0 h-0 border-l-3 border-r-3 border-t-4 border-l-transparent border-r-transparent border-t-gray-500"></div>
            </div>
          </div>
        </div>
      );
    }

    // 결과 타입
    if (step.type === 'result') {
      return (
        <div key={index} className="mb-4">
          <div className="border-2 border-gray-800 bg-gray-800 text-white p-3 text-center">
            <div className="font-bold">{step.message}</div>
            <div className="text-sm text-gray-300 mt-1">{step.next}</div>
          </div>
        </div>
      );
    }

    // 절곡 작업일지 미리보기 타입
    if (step.type === 'workLogPreview') {
      return (
        <div key={index} className="mb-6">
          <div className="border-2 border-gray-700 bg-white">
            <div className="bg-gray-800 text-white px-3 py-2 text-sm font-bold">
              {step.title} [{step.docNo}]
            </div>
            <div className="p-3 space-y-3">
              {step.sections.map((section, sIdx) => (
                <div key={sIdx} className="border border-gray-300">
                  <div className="bg-gray-100 px-2 py-1 text-xs font-bold border-b border-gray-300">
                    {section.title}
                  </div>
                  <div className="p-2">
                    {section.fields && (
                      <div className="grid grid-cols-2 gap-1 text-xs">
                        {section.fields.map((field, fIdx) => (
                          <div key={fIdx} className="text-gray-600">{field}</div>
                        ))}
                      </div>
                    )}
                    {section.items && (
                      <ul className="space-y-0.5 text-xs text-gray-600">
                        {section.items.map((item, iIdx) => (
                          <li key={iIdx} className="flex items-center gap-1">
                            <span className="w-1 h-1 bg-gray-400"></span>
                            {item}
                          </li>
                        ))}
                      </ul>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 화살표 */}
          <div className="flex justify-center py-2">
            <div className="flex flex-col items-center">
              <div className="w-0.5 h-6 bg-gray-600"></div>
              <div className="w-0 h-0 border-l-4 border-r-4 border-t-6 border-l-transparent border-r-transparent border-t-gray-600"></div>
            </div>
          </div>
        </div>
      );
    }

    // 전개도 미리보기 타입
    if (step.type === 'developedViewPreview') {
      return (
        <div key={index} className="mb-6">
          <div className="border-2 border-gray-700 bg-white">
            <div className="bg-gray-700 text-white px-3 py-2 text-sm font-bold">
              {step.title}
            </div>
            <div className="p-3 space-y-4">
              {step.items.map((item, iIdx) => (
                <div key={iIdx} className="border border-gray-300">
                  <div className="bg-gray-100 px-2 py-1 text-xs font-bold border-b border-gray-300 flex justify-between">
                    <span>{item.itemName}</span>
                    <span className="text-gray-500">{item.material}</span>
                  </div>
                  <div className="p-2">
                    <table className="w-full text-xs border-collapse">
                      <thead>
                        <tr className="bg-gray-50">
                          <th className="border border-gray-300 px-1 py-0.5">입력값</th>
                          <th className="border border-gray-300 px-1 py-0.5">비율</th>
                          <th className="border border-gray-300 px-1 py-0.5">비율적용후</th>
                          <th className="border border-gray-300 px-1 py-0.5">합계</th>
                        </tr>
                      </thead>
                      <tbody>
                        {item.dimensions.map((dim, dIdx) => (
                          <tr key={dIdx}>
                            <td className="border border-gray-300 px-1 py-0.5 text-center">{dim.input}</td>
                            <td className="border border-gray-300 px-1 py-0.5 text-center">{dim.rate}</td>
                            <td className="border border-gray-300 px-1 py-0.5 text-center">{dim.afterRate}</td>
                            <td className="border border-gray-300 px-1 py-0.5 text-center font-medium">{dim.sum}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                    {item.angles && item.angles.length > 0 && (
                      <div className="mt-1 text-xs text-gray-500">
                        각도: {item.angles.join(', ')}
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 화살표 */}
          <div className="flex justify-center py-2">
            <div className="flex flex-col items-center">
              <div className="w-0.5 h-6 bg-gray-600"></div>
              <div className="w-0 h-0 border-l-4 border-r-4 border-t-6 border-l-transparent border-r-transparent border-t-gray-600"></div>
            </div>
          </div>
        </div>
      );
    }

    // 전개도 상세 정보 타입
    if (step.type === 'developedViewDetail') {
      return (
        <div key={index} className="mb-6">
          <div className="border-2 border-gray-700 bg-white">
            <div className="bg-gray-600 text-white px-3 py-2 text-sm font-bold">
              {step.title}
            </div>
            <div className="p-3">
              {/* 필드 정보 */}
              <div className="grid grid-cols-2 gap-2 mb-3">
                {step.fields.map((field, fIdx) => (
                  <div key={fIdx} className="flex text-xs">
                    <span className="font-medium text-gray-600 w-20">{field.label}:</span>
                    <span className="text-gray-800">{field.value}</span>
                  </div>
                ))}
              </div>
              {/* 치수 테이블 */}
              {step.dimensionTable && (
                <table className="w-full text-xs border-collapse">
                  <thead>
                    <tr className="bg-gray-100">
                      {step.dimensionTable.headers.map((header, hIdx) => (
                        <th key={hIdx} className="border border-gray-300 px-2 py-1">{header}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {step.dimensionTable.rows.map((row, rIdx) => (
                      <tr key={rIdx}>
                        {row.map((cell, cIdx) => (
                          <td key={cIdx} className="border border-gray-300 px-2 py-1 text-center">{cell}</td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
            </div>
          </div>

          {/* 화살표 */}
          <div className="flex justify-center py-2">
            <div className="flex flex-col items-center">
              <div className="w-0.5 h-6 bg-gray-600"></div>
              <div className="w-0 h-0 border-l-4 border-r-4 border-t-6 border-l-transparent border-r-transparent border-t-gray-600"></div>
            </div>
          </div>
        </div>
      );
    }

    return null;
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white border-2 border-gray-800 w-full max-w-4xl max-h-[90vh] flex flex-col">
        {/* 헤더 - 와이어프레임 스타일 */}
        <div className="border-b-2 border-gray-800 p-4 bg-gray-100">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-lg font-bold text-gray-800">USER FLOW NAVIGATOR</h2>
              <p className="text-sm text-gray-600">업무 흐름 및 조작 가이드</p>
            </div>
            <button
              onClick={onClose}
              className="w-8 h-8 border-2 border-gray-800 bg-white hover:bg-gray-200 flex items-center justify-center font-bold"
            >
              X
            </button>
          </div>
        </div>

        {/* 선택 영역 */}
        <div className="p-4 border-b border-gray-400 bg-gray-50">
          <div className="flex items-end gap-4 flex-wrap">
            {/* 출발점 */}
            <div className="flex-1 min-w-[180px]">
              <label className="block text-xs font-bold text-gray-700 mb-1">FROM (출발점)</label>
              <select
                value={startPoint || ''}
                onChange={(e) => handleStartSelect(e.target.value)}
                className="w-full p-2 border-2 border-gray-600 bg-white text-sm focus:outline-none focus:border-gray-800"
              >
                <option value="">-- 선택 --</option>
                {Object.entries(nodesByCategory).map(([category, nodes]) => (
                  <optgroup key={category} label={`[${category}]`}>
                    {nodes.map(node => (
                      <option key={node.id} value={node.id}>{node.name}</option>
                    ))}
                  </optgroup>
                ))}
              </select>
            </div>

            <div className="text-2xl text-gray-400 pb-2">→</div>

            {/* 도착점 */}
            <div className="flex-1 min-w-[180px]">
              <label className="block text-xs font-bold text-gray-700 mb-1">TO (도착점)</label>
              <select
                value={endPoint || ''}
                onChange={(e) => handleEndSelect(e.target.value)}
                disabled={!startPoint}
                className="w-full p-2 border-2 border-gray-600 bg-white text-sm focus:outline-none focus:border-gray-800 disabled:bg-gray-200 disabled:text-gray-400"
              >
                <option value="">-- 선택 --</option>
                {availableEndPoints.map(nodeId => {
                  const node = allNodes[nodeId];
                  return <option key={nodeId} value={nodeId}>{node?.name}</option>;
                })}
              </select>
            </div>

            {/* 버튼 */}
            <div className="flex gap-2">
              <button
                onClick={handleShowFlow}
                disabled={!selectedPath}
                className="px-4 py-2 border-2 border-gray-800 bg-gray-800 text-white font-bold text-sm hover:bg-gray-700 disabled:bg-gray-300 disabled:border-gray-300 disabled:text-gray-500"
              >
                SHOW FLOW
              </button>
              <button
                onClick={handleReset}
                className="px-4 py-2 border-2 border-gray-600 bg-white font-bold text-sm hover:bg-gray-100"
              >
                RESET
              </button>
            </div>
          </div>

          {/* 경로 정보 */}
          {selectedPath && (
            <div className="mt-3 p-2 border border-gray-400 bg-white text-sm">
              <span className="font-bold text-gray-700">{selectedPath.name}</span>
              <span className="text-gray-500 ml-2">({selectedPath.steps.length} steps)</span>
            </div>
          )}
        </div>

        {/* 플로우 표시 영역 */}
        <div className="flex-1 overflow-auto p-6 bg-white">
          {!showFlow ? (
            <div className="h-full flex flex-col items-center justify-center text-gray-400">
              <div className="border-2 border-dashed border-gray-300 p-8 text-center">
                <div className="text-lg mb-2">FLOW PREVIEW AREA</div>
                <div className="text-sm">출발점과 도착점 선택 후 [SHOW FLOW] 클릭</div>
              </div>

              {/* 빠른 선택 가이드 */}
              <div className="mt-8 grid grid-cols-3 gap-2 text-xs">
                {[
                  ['견적', '수주'],
                  ['수주', '작업지시'],
                  ['작업지시', '작업실적'],
                  ['작업실적', '출하'],
                  ['출하', '수금'],
                  ['견적', '출하'],
                  ['작업지시', '절곡작업일지'],
                  ['품목기준관리', '절곡작업일지'],
                  ['절곡작업일지', '작업실적'],
                ].map(([from, to], idx) => (
                  <div key={idx} className="border border-gray-300 p-2 text-center bg-gray-50">
                    <span className="text-gray-600">{from}</span>
                    <span className="text-gray-400 mx-1">→</span>
                    <span className="text-gray-600">{to}</span>
                  </div>
                ))}
              </div>
            </div>
          ) : (
            <div className="max-w-2xl mx-auto">
              {/* 플로우 제목 */}
              <div className="text-center mb-6 pb-4 border-b-2 border-gray-800">
                <h3 className="text-lg font-bold text-gray-800">{selectedPath.name}</h3>
                <div className="flex items-center justify-center gap-4 mt-2 text-sm">
                  <span className="border border-gray-600 px-3 py-1 bg-gray-100">{allNodes[startPoint]?.name}</span>
                  <span className="text-gray-400">→</span>
                  <span className="border border-gray-600 px-3 py-1 bg-gray-100">{allNodes[endPoint]?.name}</span>
                </div>
              </div>

              {/* 시작점 */}
              <div className="flex justify-center mb-4">
                <div className="w-24 h-8 border-2 border-gray-800 rounded-full bg-white flex items-center justify-center text-sm font-bold">
                  START
                </div>
              </div>
              <div className="flex justify-center mb-4">
                <div className="flex flex-col items-center">
                  <div className="w-0.5 h-4 bg-gray-600"></div>
                  <div className="w-0 h-0 border-l-4 border-r-4 border-t-6 border-l-transparent border-r-transparent border-t-gray-600"></div>
                </div>
              </div>

              {/* 스텝들 */}
              {selectedPath.steps.map((step, index) => renderStep(step, index))}

              {/* 종료점 */}
              <div className="flex justify-center mt-2">
                <div className="w-24 h-8 border-2 border-gray-800 rounded-full bg-gray-800 text-white flex items-center justify-center text-sm font-bold">
                  END
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default UserFlowNavigator;
