import React, { useCallback } from 'react';
import ReactFlow, { 
  MiniMap, 
  Controls, 
  Background, 
  useNodesState, 
  useEdgesState, 
  addEdge 
} from 'reactflow';
import 'reactflow/dist/style.css';

const initialNodes = [
  { 
    id: '1', 
    type: 'input', 
    data: { label: 'Support Ticket' }, 
    position: { x: 50, y: 50 },
    style: { background: '#111827', color: '#fff', border: '1px solid #3B82F6', borderRadius: '12px' }
  },
  { 
    id: '2', 
    data: { label: 'Analyze Sentiment' }, 
    position: { x: 300, y: 50 },
    style: { background: '#111827', color: '#fff', border: '1px solid #8B5CF6', borderRadius: '12px' }
  },
  { 
    id: '3', 
    data: { label: 'Slack Notification' }, 
    position: { x: 550, y: -50 },
    style: { background: '#111827', color: '#fff', border: '1px solid #10B981', borderRadius: '12px' }
  },
  { 
    id: '4', 
    data: { label: 'Zendesk Update' }, 
    position: { x: 550, y: 150 },
    style: { background: '#111827', color: '#fff', border: '1px solid #10B981', borderRadius: '12px' }
  },
  { 
    id: '5', 
    data: { label: 'AI Vision Analysis' }, 
    position: { x: 300, y: 200 },
    style: { background: '#111827', color: '#fff', border: '1px solid #22D3EE', borderRadius: '12px', boxShadow: '0 0 10px rgba(34, 211, 238, 0.3)' }
  },
];

const initialEdges = [
  { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#3B82F6' } },
  { id: 'e2-3', source: '2', target: '3', animated: true, style: { stroke: '#8B5CF6' } },
  { id: 'e2-4', source: '2', target: '4', animated: true, style: { stroke: '#8B5CF6' } },
];

const WorkflowBuilder = () => {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
      >
        <Controls />
        <MiniMap zoomable pannable style={{ background: '#0B1020' }} nodeColor="#3B82F6" />
        <Background color="#1E293B" gap={16} />
      </ReactFlow>
    </div>
  );
};

export default WorkflowBuilder;