// 상세 업무 플로우 다이어그램 - ReactFlow 기반
import React, { useCallback, useMemo, useState } from 'react';
import ReactFlow, {
  Background,
  Controls,
  MiniMap,
  useNodesState,
  useEdgesState,
  MarkerType,
  Position,
  Handle,
} from 'reactflow';
import 'reactflow/dist/style.css';
import {
  FileText, Package, Factory, Truck, DollarSign, ShieldCheck,
  Database, Users, ClipboardList, CheckCircle, AlertTriangle,
  ArrowRight, Box, Settings, Calculator, Search
} from 'lucide-react';

// 커스텀 노드 - 프로세스 박스
const ProcessNode = ({ data }) => {
  const bgColors = {
    sales: 'bg-blue-100 border-blue-500',
    production: 'bg-green-100 border-green-500',
    quality: 'bg-purple-100 border-purple-500',
    shipping: 'bg-orange-100 border-orange-500',
    accounting: 'bg-indigo-100 border-indigo-500',
    master: 'bg-gray-100 border-gray-500',
    decision: 'bg-yellow-100 border-yellow-500',
    start: 'bg-emerald-100 border-emerald-500',
    end: 'bg-red-100 border-red-500',
  };

  const IconMap = {
    FileText, Package, Factory, Truck, DollarSign, ShieldCheck,
    Database, Users, ClipboardList, CheckCircle, AlertTriangle,
    Box, Settings, Calculator, Search
  };

  const Icon = IconMap[data.icon] || FileText;
  const colorClass = bgColors[data.category] || bgColors.master;

  return (
    <div className={`px-4 py-3 rounded-lg border-2 shadow-md ${colorClass} min-w-[160px]`}>
      <Handle type="target" position={Position.Top} className="w-3 h-3 bg-gray-400" />
      <Handle type="target" position={Position.Left} className="w-3 h-3 bg-gray-400" />

      <div className="flex items-center gap-2">
        <Icon className="w-5 h-5 text-gray-700" />
        <span className="font-bold text-sm text-gray-800">{data.label}</span>
      </div>
      {data.description && (
        <p className="text-xs text-gray-600 mt-1">{data.description}</p>
      )}
      {data.menu && (
        <p className="text-xs text-gray-500 mt-1 italic">{data.menu}</p>
      )}

      <Handle type="source" position={Position.Bottom} className="w-3 h-3 bg-gray-400" />
      <Handle type="source" position={Position.Right} className="w-3 h-3 bg-gray-400" />
    </div>
  );
};

// 커스텀 노드 - 분기점 (다이아몬드)
const DecisionNode = ({ data }) => {
  return (
    <div className="relative">
      <Handle type="target" position={Position.Top} className="w-3 h-3 bg-gray-400" />
      <Handle type="target" position={Position.Left} className="w-3 h-3 bg-gray-400" />

      <div
        className="w-24 h-24 bg-yellow-100 border-2 border-yellow-500 shadow-md flex items-center justify-center"
        style={{ transform: 'rotate(45deg)' }}
      >
        <span
          className="text-xs font-bold text-gray-800 text-center px-1"
          style={{ transform: 'rotate(-45deg)', maxWidth: '70px' }}
        >
          {data.label}
        </span>
      </div>

      <Handle type="source" position={Position.Bottom} className="w-3 h-3 bg-gray-400" />
      <Handle type="source" position={Position.Right} className="w-3 h-3 bg-gray-400" />
    </div>
  );
};

// 커스텀 노드 - 시작/종료 (타원)
const TerminalNode = ({ data }) => {
  const isStart = data.type === 'start';
  return (
    <div className={`px-6 py-3 rounded-full border-2 shadow-md ${isStart ? 'bg-emerald-100 border-emerald-500' : 'bg-red-100 border-red-500'}`}>
      <Handle type="target" position={Position.Top} className="w-3 h-3 bg-gray-400" style={{ visibility: isStart ? 'hidden' : 'visible' }} />
      <span className="font-bold text-sm text-gray-800">{data.label}</span>
      <Handle type="source" position={Position.Bottom} className="w-3 h-3 bg-gray-400" style={{ visibility: isStart ? 'visible' : 'hidden' }} />
    </div>
  );
};

// 커스텀 노드 - 데이터/문서 (평행사변형)
const DocumentNode = ({ data }) => {
  return (
    <div className="relative">
      <Handle type="target" position={Position.Top} className="w-3 h-3 bg-gray-400" />
      <Handle type="target" position={Position.Left} className="w-3 h-3 bg-gray-400" />

      <div
        className="px-4 py-2 bg-blue-50 border-2 border-blue-400 shadow-md min-w-[120px]"
        style={{ transform: 'skewX(-10deg)' }}
      >
        <div style={{ transform: 'skewX(10deg)' }}>
          <div className="flex items-center gap-2">
            <FileText className="w-4 h-4 text-blue-600" />
            <span className="font-medium text-sm text-gray-800">{data.label}</span>
          </div>
        </div>
      </div>

      <Handle type="source" position={Position.Bottom} className="w-3 h-3 bg-gray-400" />
      <Handle type="source" position={Position.Right} className="w-3 h-3 bg-gray-400" />
    </div>
  );
};

// 커스텀 노드 - 데이터베이스 (실린더)
const DatabaseNode = ({ data }) => {
  return (
    <div className="relative flex flex-col items-center">
      <Handle type="target" position={Position.Top} className="w-3 h-3 bg-gray-400" />
      <Handle type="target" position={Position.Left} className="w-3 h-3 bg-gray-400" />

      <div className="w-28 bg-gray-100 border-2 border-gray-500 rounded-t-full pt-3 pb-1 text-center">
        <Database className="w-5 h-5 text-gray-600 mx-auto" />
      </div>
      <div className="w-28 bg-gray-100 border-x-2 border-b-2 border-gray-500 rounded-b-lg py-2 text-center -mt-1">
        <span className="text-xs font-medium text-gray-700">{data.label}</span>
      </div>

      <Handle type="source" position={Position.Bottom} className="w-3 h-3 bg-gray-400" />
      <Handle type="source" position={Position.Right} className="w-3 h-3 bg-gray-400" />
    </div>
  );
};

// 노드 타입 매핑
const nodeTypes = {
  process: ProcessNode,
  decision: DecisionNode,
  terminal: TerminalNode,
  document: DocumentNode,
  database: DatabaseNode,
};

// 플로우 타입별 노드/엣지 정의
const flowDefinitions = {
  // 견적-수주-출하 플로우
  'quote-to-shipment': {
    name: '견적 → 수주 → 출하 프로세스',
    nodes: [
      { id: 'start', type: 'terminal', position: { x: 400, y: 0 }, data: { label: '시작', type: 'start' } },
      { id: 'customer-inquiry', type: 'process', position: { x: 370, y: 80 }, data: { label: '고객 문의 접수', icon: 'Users', category: 'sales', menu: '판매관리' } },
      { id: 'quote-create', type: 'process', position: { x: 370, y: 170 }, data: { label: '견적서 작성', icon: 'FileText', category: 'sales', menu: '견적관리 > 견적등록' } },
      { id: 'quote-calc', type: 'process', position: { x: 370, y: 260 }, data: { label: 'BOM/단가 산출', icon: 'Calculator', category: 'sales', description: '자동 계산' } },
      { id: 'quote-doc', type: 'document', position: { x: 600, y: 260 }, data: { label: '견적서' } },
      { id: 'customer-confirm', type: 'decision', position: { x: 380, y: 360 }, data: { label: '고객 승인?' } },
      { id: 'quote-revise', type: 'process', position: { x: 150, y: 380 }, data: { label: '견적 수정', icon: 'FileText', category: 'sales' } },
      { id: 'order-convert', type: 'process', position: { x: 370, y: 500 }, data: { label: '수주 전환', icon: 'Package', category: 'sales', menu: '수주관리 > 수주등록' } },
      { id: 'order-doc', type: 'document', position: { x: 600, y: 500 }, data: { label: '수주확인서' } },
      { id: 'credit-check', type: 'decision', position: { x: 380, y: 600 }, data: { label: '여신 확인' } },
      { id: 'credit-hold', type: 'process', position: { x: 150, y: 620 }, data: { label: '여신 초과\n경리 승인 대기', icon: 'AlertTriangle', category: 'accounting' } },
      { id: 'work-order', type: 'process', position: { x: 370, y: 720 }, data: { label: '작업지시 생성', icon: 'ClipboardList', category: 'production', menu: '생산관리 > 작업지시' } },
      { id: 'production', type: 'process', position: { x: 370, y: 810 }, data: { label: '생산 진행', icon: 'Factory', category: 'production' } },
      { id: 'qc-inspect', type: 'process', position: { x: 370, y: 900 }, data: { label: '품질 검사', icon: 'ShieldCheck', category: 'quality', menu: '품질관리 > 제품검사' } },
      { id: 'qc-decision', type: 'decision', position: { x: 380, y: 1000 }, data: { label: '합격?' } },
      { id: 'qc-fail', type: 'process', position: { x: 150, y: 1020 }, data: { label: '부적합 처리', icon: 'AlertTriangle', category: 'quality' } },
      { id: 'shipment', type: 'process', position: { x: 370, y: 1120 }, data: { label: '출하 처리', icon: 'Truck', category: 'shipping', menu: '판매관리 > 출하관리' } },
      { id: 'shipment-doc', type: 'document', position: { x: 600, y: 1120 }, data: { label: '거래명세서' } },
      { id: 'sales-slip', type: 'process', position: { x: 370, y: 1210 }, data: { label: '매출 전표 생성', icon: 'DollarSign', category: 'accounting', menu: '회계관리 > 매출관리' } },
      { id: 'db-sales', type: 'database', position: { x: 600, y: 1200 }, data: { label: '매출 DB' } },
      { id: 'end', type: 'terminal', position: { x: 400, y: 1320 }, data: { label: '완료', type: 'end' } },
    ],
    edges: [
      { id: 'e1', source: 'start', target: 'customer-inquiry', animated: true },
      { id: 'e2', source: 'customer-inquiry', target: 'quote-create' },
      { id: 'e3', source: 'quote-create', target: 'quote-calc' },
      { id: 'e4', source: 'quote-calc', target: 'quote-doc', type: 'straight', style: { strokeDasharray: '5,5' } },
      { id: 'e5', source: 'quote-calc', target: 'customer-confirm' },
      { id: 'e6', source: 'customer-confirm', target: 'quote-revise', label: 'NO', sourceHandle: 'left' },
      { id: 'e7', source: 'quote-revise', target: 'quote-create', type: 'smoothstep' },
      { id: 'e8', source: 'customer-confirm', target: 'order-convert', label: 'YES' },
      { id: 'e9', source: 'order-convert', target: 'order-doc', type: 'straight', style: { strokeDasharray: '5,5' } },
      { id: 'e10', source: 'order-convert', target: 'credit-check' },
      { id: 'e11', source: 'credit-check', target: 'credit-hold', label: '초과', sourceHandle: 'left' },
      { id: 'e12', source: 'credit-hold', target: 'work-order', type: 'smoothstep', label: '승인 후' },
      { id: 'e13', source: 'credit-check', target: 'work-order', label: '정상' },
      { id: 'e14', source: 'work-order', target: 'production' },
      { id: 'e15', source: 'production', target: 'qc-inspect' },
      { id: 'e16', source: 'qc-inspect', target: 'qc-decision' },
      { id: 'e17', source: 'qc-decision', target: 'qc-fail', label: '불합격', sourceHandle: 'left' },
      { id: 'e18', source: 'qc-fail', target: 'production', type: 'smoothstep', label: '재작업' },
      { id: 'e19', source: 'qc-decision', target: 'shipment', label: '합격' },
      { id: 'e20', source: 'shipment', target: 'shipment-doc', type: 'straight', style: { strokeDasharray: '5,5' } },
      { id: 'e21', source: 'shipment', target: 'sales-slip' },
      { id: 'e22', source: 'sales-slip', target: 'db-sales', type: 'straight', style: { strokeDasharray: '5,5' } },
      { id: 'e23', source: 'sales-slip', target: 'end' },
    ],
  },

  // 생산 프로세스 플로우
  'production-process': {
    name: '생산 프로세스',
    nodes: [
      { id: 'start', type: 'terminal', position: { x: 400, y: 0 }, data: { label: '작업지시 접수', type: 'start' } },
      { id: 'material-check', type: 'decision', position: { x: 410, y: 100 }, data: { label: '자재 확인' } },
      { id: 'material-request', type: 'process', position: { x: 150, y: 120 }, data: { label: '자재 출고 요청', icon: 'Box', category: 'production' } },
      { id: 'cutting', type: 'process', position: { x: 400, y: 220 }, data: { label: '1. 절단 공정', icon: 'Factory', category: 'production', description: '원자재 절단' } },
      { id: 'bending', type: 'process', position: { x: 400, y: 310 }, data: { label: '2. 절곡 공정', icon: 'Factory', category: 'production', description: 'V컷팅 / 절곡' } },
      { id: 'welding', type: 'process', position: { x: 400, y: 400 }, data: { label: '3. 용접 공정', icon: 'Factory', category: 'production', description: '케이스 용접' } },
      { id: 'pqc', type: 'process', position: { x: 620, y: 400 }, data: { label: '중간검사 (PQC)', icon: 'ShieldCheck', category: 'quality' } },
      { id: 'assembly', type: 'process', position: { x: 400, y: 490 }, data: { label: '4. 조립 공정', icon: 'Factory', category: 'production', description: '모터/샤프트 조립' } },
      { id: 'wiring', type: 'process', position: { x: 400, y: 580 }, data: { label: '5. 전장 공정', icon: 'Factory', category: 'production', description: '배선/제어기' } },
      { id: 'fqc', type: 'process', position: { x: 400, y: 670 }, data: { label: '최종검사 (FQC)', icon: 'ShieldCheck', category: 'quality', description: '동작/외관 검사' } },
      { id: 'fqc-decision', type: 'decision', position: { x: 410, y: 770 }, data: { label: '합격?' } },
      { id: 'rework', type: 'process', position: { x: 150, y: 790 }, data: { label: '재작업 지시', icon: 'AlertTriangle', category: 'quality' } },
      { id: 'packaging', type: 'process', position: { x: 400, y: 880 }, data: { label: '6. 포장', icon: 'Box', category: 'shipping' } },
      { id: 'stock-in', type: 'process', position: { x: 400, y: 970 }, data: { label: '완제품 입고', icon: 'Database', category: 'production' } },
      { id: 'db-stock', type: 'database', position: { x: 620, y: 960 }, data: { label: '재고 DB' } },
      { id: 'end', type: 'terminal', position: { x: 400, y: 1070 }, data: { label: '출하 대기', type: 'end' } },
    ],
    edges: [
      { id: 'e1', source: 'start', target: 'material-check', animated: true },
      { id: 'e2', source: 'material-check', target: 'material-request', label: '부족', sourceHandle: 'left' },
      { id: 'e3', source: 'material-request', target: 'cutting', type: 'smoothstep' },
      { id: 'e4', source: 'material-check', target: 'cutting', label: '충분' },
      { id: 'e5', source: 'cutting', target: 'bending' },
      { id: 'e6', source: 'bending', target: 'welding' },
      { id: 'e7', source: 'welding', target: 'pqc', type: 'straight', style: { strokeDasharray: '5,5' } },
      { id: 'e8', source: 'welding', target: 'assembly' },
      { id: 'e9', source: 'assembly', target: 'wiring' },
      { id: 'e10', source: 'wiring', target: 'fqc' },
      { id: 'e11', source: 'fqc', target: 'fqc-decision' },
      { id: 'e12', source: 'fqc-decision', target: 'rework', label: '불합격', sourceHandle: 'left' },
      { id: 'e13', source: 'rework', target: 'cutting', type: 'smoothstep', label: '처음부터' },
      { id: 'e14', source: 'fqc-decision', target: 'packaging', label: '합격' },
      { id: 'e15', source: 'packaging', target: 'stock-in' },
      { id: 'e16', source: 'stock-in', target: 'db-stock', type: 'straight', style: { strokeDasharray: '5,5' } },
      { id: 'e17', source: 'stock-in', target: 'end' },
    ],
  },

  // 구매-입고-검사 플로우
  'purchase-to-stock': {
    name: '구매 → 입고 → 검사 프로세스',
    nodes: [
      { id: 'start', type: 'terminal', position: { x: 400, y: 0 }, data: { label: '자재 소요', type: 'start' } },
      { id: 'mrp', type: 'process', position: { x: 370, y: 80 }, data: { label: 'MRP 산출', icon: 'Calculator', category: 'production', description: '소요량 계산' } },
      { id: 'stock-check', type: 'decision', position: { x: 380, y: 180 }, data: { label: '재고 확인' } },
      { id: 'stock-ok', type: 'process', position: { x: 600, y: 200 }, data: { label: '재고 출고', icon: 'Box', category: 'production' } },
      { id: 'po-create', type: 'process', position: { x: 370, y: 290 }, data: { label: '발주서 작성', icon: 'FileText', category: 'master', menu: '자재관리 > 발주관리' } },
      { id: 'po-doc', type: 'document', position: { x: 150, y: 290 }, data: { label: '발주서' } },
      { id: 'supplier-send', type: 'process', position: { x: 370, y: 380 }, data: { label: '공급업체 발송', icon: 'Users', category: 'master' } },
      { id: 'receive', type: 'process', position: { x: 370, y: 470 }, data: { label: '입고 처리', icon: 'Package', category: 'production', menu: '자재관리 > 입고관리' } },
      { id: 'iqc', type: 'process', position: { x: 370, y: 560 }, data: { label: '수입검사 (IQC)', icon: 'ShieldCheck', category: 'quality', menu: '품질관리 > 수입검사' } },
      { id: 'iqc-decision', type: 'decision', position: { x: 380, y: 660 }, data: { label: '합격?' } },
      { id: 'iqc-fail', type: 'process', position: { x: 150, y: 680 }, data: { label: '반품 처리', icon: 'AlertTriangle', category: 'quality' } },
      { id: 'stock-in', type: 'process', position: { x: 370, y: 780 }, data: { label: '재고 입고', icon: 'Database', category: 'production' } },
      { id: 'db-stock', type: 'database', position: { x: 600, y: 770 }, data: { label: '재고 DB' } },
      { id: 'ap-create', type: 'process', position: { x: 370, y: 870 }, data: { label: '매입 전표 생성', icon: 'DollarSign', category: 'accounting', menu: '회계관리 > 매입관리' } },
      { id: 'end', type: 'terminal', position: { x: 400, y: 970 }, data: { label: '완료', type: 'end' } },
    ],
    edges: [
      { id: 'e1', source: 'start', target: 'mrp', animated: true },
      { id: 'e2', source: 'mrp', target: 'stock-check' },
      { id: 'e3', source: 'stock-check', target: 'stock-ok', label: '재고 있음', sourceHandle: 'right' },
      { id: 'e4', source: 'stock-check', target: 'po-create', label: '재고 부족' },
      { id: 'e5', source: 'po-create', target: 'po-doc', type: 'straight', style: { strokeDasharray: '5,5' } },
      { id: 'e6', source: 'po-create', target: 'supplier-send' },
      { id: 'e7', source: 'supplier-send', target: 'receive' },
      { id: 'e8', source: 'receive', target: 'iqc' },
      { id: 'e9', source: 'iqc', target: 'iqc-decision' },
      { id: 'e10', source: 'iqc-decision', target: 'iqc-fail', label: '불합격', sourceHandle: 'left' },
      { id: 'e11', source: 'iqc-fail', target: 'supplier-send', type: 'smoothstep', label: '재발주' },
      { id: 'e12', source: 'iqc-decision', target: 'stock-in', label: '합격' },
      { id: 'e13', source: 'stock-in', target: 'db-stock', type: 'straight', style: { strokeDasharray: '5,5' } },
      { id: 'e14', source: 'stock-in', target: 'ap-create' },
      { id: 'e15', source: 'ap-create', target: 'end' },
      { id: 'e16', source: 'stock-ok', target: 'end', type: 'smoothstep' },
    ],
  },
};

// 메인 컴포넌트
const DetailedFlowDiagram = ({ flowType = 'quote-to-shipment', onClose }) => {
  const [selectedFlow, setSelectedFlow] = useState(flowType);
  const flowDef = flowDefinitions[selectedFlow];

  const [nodes, setNodes, onNodesChange] = useNodesState(flowDef.nodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(
    flowDef.edges.map(edge => ({
      ...edge,
      markerEnd: { type: MarkerType.ArrowClosed, width: 20, height: 20 },
      style: { strokeWidth: 2, stroke: '#666', ...edge.style },
      labelStyle: { fill: '#333', fontWeight: 600, fontSize: 11 },
      labelBgStyle: { fill: '#fff', fillOpacity: 0.9 },
    }))
  );

  // 플로우 변경 시 노드/엣지 업데이트
  const handleFlowChange = useCallback((newFlow) => {
    setSelectedFlow(newFlow);
    const newDef = flowDefinitions[newFlow];
    setNodes(newDef.nodes);
    setEdges(newDef.edges.map(edge => ({
      ...edge,
      markerEnd: { type: MarkerType.ArrowClosed, width: 20, height: 20 },
      style: { strokeWidth: 2, stroke: '#666', ...edge.style },
      labelStyle: { fill: '#333', fontWeight: 600, fontSize: 11 },
      labelBgStyle: { fill: '#fff', fillOpacity: 0.9 },
    })));
  }, [setNodes, setEdges]);

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
      <div className="bg-white rounded-xl shadow-2xl w-[95vw] h-[90vh] flex flex-col">
        {/* 헤더 */}
        <div className="flex items-center justify-between px-6 py-4 border-b bg-gray-50 rounded-t-xl">
          <div className="flex items-center gap-4">
            <h2 className="text-xl font-bold text-gray-800">상세 업무 플로우 다이어그램</h2>
            <select
              value={selectedFlow}
              onChange={(e) => handleFlowChange(e.target.value)}
              className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
            >
              {Object.entries(flowDefinitions).map(([key, def]) => (
                <option key={key} value={key}>{def.name}</option>
              ))}
            </select>
          </div>
          <button
            onClick={onClose}
            className="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-sm font-medium"
          >
            닫기
          </button>
        </div>

        {/* 범례 */}
        <div className="flex items-center gap-6 px-6 py-3 border-b bg-gray-50 text-xs">
          <span className="font-medium text-gray-700">범례:</span>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 rounded-full bg-emerald-100 border-2 border-emerald-500"></div>
            <span>시작/종료</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-3 bg-blue-100 border-2 border-blue-500 rounded"></div>
            <span>판매</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-3 bg-green-100 border-2 border-green-500 rounded"></div>
            <span>생산</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-3 bg-purple-100 border-2 border-purple-500 rounded"></div>
            <span>품질</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-3 bg-orange-100 border-2 border-orange-500 rounded"></div>
            <span>출하</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-3 bg-indigo-100 border-2 border-indigo-500 rounded"></div>
            <span>회계</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 bg-yellow-100 border-2 border-yellow-500" style={{ transform: 'rotate(45deg) scale(0.7)' }}></div>
            <span>분기점</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-3 bg-blue-50 border-2 border-blue-400" style={{ transform: 'skewX(-10deg)' }}></div>
            <span>문서</span>
          </div>
        </div>

        {/* ReactFlow 영역 */}
        <div className="flex-1">
          <ReactFlow
            nodes={nodes}
            edges={edges}
            onNodesChange={onNodesChange}
            onEdgesChange={onEdgesChange}
            nodeTypes={nodeTypes}
            fitView
            fitViewOptions={{ padding: 0.2 }}
            defaultViewport={{ x: 0, y: 0, zoom: 0.8 }}
            minZoom={0.3}
            maxZoom={2}
          >
            <Background color="#ddd" gap={20} />
            <Controls />
            <MiniMap
              nodeColor={(node) => {
                const colors = {
                  sales: '#93c5fd',
                  production: '#86efac',
                  quality: '#c4b5fd',
                  shipping: '#fed7aa',
                  accounting: '#a5b4fc',
                  master: '#d1d5db',
                };
                return colors[node.data?.category] || '#d1d5db';
              }}
              maskColor="rgba(0,0,0,0.1)"
            />
          </ReactFlow>
        </div>
      </div>
    </div>
  );
};

export default DetailedFlowDiagram;
