import { useState, useCallback, useEffect } from 'react';
import {
  ReactFlow,
  addEdge,
  Controls,
  Background,
  BackgroundVariant,
  SelectionMode
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import { FiUser, FiMail, FiCheckCircle, FiList } from 'react-icons/fi';
import { FaShuffle } from 'react-icons/fa6';
import '../assets/css/style.css';
import Tabbar from './Tabbar.tsx';
import ShowPopup from './ShowPopup.tsx';
import { v4 as uuidv4 } from 'uuid';

const initialNodes = [
  {
    key: 'customer-sign',
    id: '1',
    type: 'input',
    data: {
      label: (
        <div className='step'>
          <div className='left'>
            <img
              src='/src/assets/icons/icon-user.svg'
              width='24px'
              height='24px'
              alt=''
            />
          </div>
          <div className='right'>Customer signs up to</div>
        </div>
      )
    },
    position: { x: 250, y: 100 }
  },
  {
    id: '2',
    data: { label: 'Add Note' },
    position: { x: 250, y: 250 }
  }
];

// Nội dung cho mỗi node
const nodeContents = {
  'send-email': `
    <label for="email-subject">Subject:</label>
    <input type="text" id="email-subject" name="email-subject" placeholder="Enter subject">
    <label for="email-body">Body:</label>
    <textarea id="email-body" name="email-body" rows="4" placeholder="Enter email body"></textarea>
  `,
  'customer-sign': `
    <label for="customer-name">Customer Name:</label>
    <input type="text" id="customer-name" name="customer-name" placeholder="Enter customer name">
    <label for="customer-email">Customer Email:</label>
    <input type="email" id="customer-email" name="customer-email" placeholder="Enter customer email">
  `,
  ifelse: `
    <label for="reply-status">Reply Status:</label>
    <select id="reply-status" name="reply-status">
      <option value="replied">Replied</option>
      <option value="not-replied">Not Replied</option>
    </select>
  `,
  'contact-exists': `
    <label for="contact-id">Contact ID:</label>
    <input type="text" id="contact-id" name="contact-id" placeholder="Enter contact ID">
  `,
  'send-survey': `
    <label for="survey-question">Survey Question:</label>
    <input type="text" id="survey-question" name="survey-question" placeholder="Enter survey question">
    <label for="survey-options">Options (comma-separated):</label>
    <input type="text" id="survey-options" name="survey-options" placeholder="Option 1, Option 2, ...">
  `
};

const NoteFlow = () => {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState([
    { id: 'e1-2', source: '1', target: '2' } // Kết nối node "Add Note" với node mặc định ban đầu
  ]);
  const [showTabBar, setShowTabBar] = useState(false);
  const [lastNodeId, setLastNodeId] = useState('1');
  const [nodeToDelete, setNodeToDelete] = useState(null);
  const [showPopup, setShowPopup] = useState(false);
  const [selectedNodeContent, setSelectedNodeContent] = useState('');

  const handleAddNoteClick = () => {
    setShowTabBar(true);
    const handleNodeSelect = (selectedNode) => {
      addNodeBetween(selectedNode, sourceId, targetId);
    };
    setAddNodeCallback(() => addNodeBetweenWithIds);
  };

  const onNodeClick = (event, node) => {
    if (node.id === '2') {
      // Check if the clicked node is "Add Note"
      setShowTabBar(true);
    } else {
      // Hiển thị popup khi click vào bất kỳ node nào
      const content = nodeContents[node.key]; // Lấy nội dung tương ứng của node
      setSelectedNodeContent(content); // Cập nhật nội dung cho popup
      setShowPopup(true); // Mở popup
    }
  };

  const onNodeContextMenu = useCallback((event, node) => {
    event.preventDefault(); // Ngăn không cho menu chuột phải mặc định hiện ra
    setNodeToDelete(node);
  }, []);

  const handleNodeDelete = () => {
    if (nodeToDelete) {
      setNodes((nds) => nds.filter((node) => node.id !== nodeToDelete.id));
      setEdges((eds) =>
        eds.filter(
          (edge) =>
            edge.source !== nodeToDelete.id && edge.target !== nodeToDelete.id
        )
      );
      setNodeToDelete(null);
    }
  };

  // Function to get a unique y position
  const getUniqueYPosition = (xPosition, baseY, spacing) => {
    const existingYPositions = nodes
      .filter((node) => node.position.x === xPosition)
      .map((node) => node.position.y);

    let newYPosition = baseY;

    while (existingYPositions.includes(newYPosition)) {
      newYPosition += spacing;
    }

    return newYPosition;
  };

  const getNextYPosition = (xPosition, spacing) => {
    const nodesInColumn = nodes.filter((node) => node.position.x === xPosition);
    if (nodesInColumn.length === 0) return 0; // Return 0 if there are no nodes

    const lastNode = nodesInColumn[nodesInColumn.length - 1];
    return lastNode.position.y + spacing;
  };

  const addNode = (option) => {
    const newNodeId = uuidv4(); // Generate a unique ID for the new node
    const addNoteNode = nodes.find((node) => node.id === '2');
    const initialX = addNoteNode.position.x;
    const nextY =
      nodes.length > 2
        ? getNextYPosition(initialX, 130)
        : addNoteNode.position.y;

    if (option.id === '4') {
      // Handle specific option case
      setNodes((nds) => nds.filter((node) => node.id !== '2'));

      const repliedNode = {
        id: newNodeId,
        key: option.key,
        data: { label: option.htmlNode },
        position: { x: option.position.x, y: nextY }
      };

      const yesNode = {
        id: uuidv4(),
        type: 'output',
        key: 'contact-exists',
        data: {
          label: (
            <div className='step'>
              <div className='left'>
                <img
                  src='/src/assets/icons/icon-check.svg'
                  width='24px'
                  height='24px'
                  alt=''
                />
              </div>
              <div className='right'>Contact Exists</div>
            </div>
          )
        },
        position: { x: option.position.x - 150, y: nextY + 150 }
      };

      const noNode = {
        id: uuidv4(),
        type: 'output',
        key: 'send-survey',
        data: {
          label: (
            <div className='step'>
              <div className='left'>
                <img
                  src='/src/assets/icons/icon-list.svg'
                  width='24px'
                  height='24px'
                  alt=''
                />
              </div>
              <div className='right'>Send survey</div>
            </div>
          )
        },
        position: { x: option.position.x + 150, y: nextY + 150 }
      };

      setNodes((nds) => [...nds, repliedNode, yesNode, noNode]);

      setEdges((eds) => [
        ...eds,
        {
          id: uuidv4(),
          source: repliedNode.id,
          target: yesNode.id,
          label: 'yes',
          animated: false
        },
        {
          id: uuidv4(),
          source: repliedNode.id,
          target: noNode.id,
          label: 'no',
          animated: false
        },
        { id: uuidv4(), source: lastNodeId, target: repliedNode.id }
      ]);
    } else {
      // Add new node logic
      if (addNoteNode) {
        const initialX = addNoteNode.position.x;
        setNodes((nds) =>
          nds.map((node) =>
            node.id === '2'
              ? {
                  ...node,
                  position: {
                    x: initialX,
                    y: nextY + 130
                  }
                }
              : node
          )
        );
      }
      const newNode = {
        id: newNodeId,
        key: option.key,
        data: { label: option.htmlNode },
        position: {
          x: option.position.x,
          y: nodes.length > 2 ? nextY : addNoteNode.position.y
        }
      };

      console.log(getNextYPosition(option.position.x, 130));

      setNodes((nds) => [...nds, newNode]);

      setEdges((eds) => [
        ...eds,
        {
          id: uuidv4(),
          source: lastNodeId,
          target: newNodeId
        }
      ]);

      setLastNodeId(newNodeId);
    }

    setShowTabBar(false);
  };

  const hidePopup = () => {
    setShowPopup(false);
  };

  const addPopup = (node) => {
    const content = nodeContents[node.id]; // Lấy nội dung từ nodeContents dựa trên ID node
    setSelectedNodeContent(content); // Cập nhật nội dung được chọn
  };

  return (
    <div style={{ height: '100vh', width: '100%', position: 'relative' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodeClick={onNodeClick}
        onNodeContextMenu={onNodeContextMenu}
        panOnScroll
        selectionOnDrag
        selectionMode={SelectionMode.Partial}
      >
        <Controls />
        <Background variant={BackgroundVariant.Lines} color='#ccccc' />
      </ReactFlow>

      {showTabBar && <Tabbar addNode={addNode} />}

      {nodeToDelete && (
        <div
          style={{
            position: 'absolute',
            top: nodeToDelete.position.y - 12,
            left: nodeToDelete.position.x + 260,
            zIndex: 10
          }}
        >
          <button
            onClick={handleNodeDelete}
            style={{
              background: 'red',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            X
          </button>
        </div>
      )}
      {showPopup && (
        <ShowPopup
          selectedNodeContent={selectedNodeContent}
          hidePopup={() => setShowPopup(false)}
        />
      )}
    </div>
  );
};

export default NoteFlow;