'use client';

import React, { useState } from 'react';
import { useReactFlow } from '@xyflow/react';
import * as Tooltip from '@radix-ui/react-tooltip';
import { Maximize, ZoomIn, ZoomOut, Undo, Redo, MessageCircle, MousePointer2, Hand, Package, Layout, Book } from 'lucide-react';
import { useFlowStoreActions } from '@/stores/flow-store';
import { useSidebarStore } from '@/stores/sidebar-store';
import useFlowStore from '@/stores/flow-store';
import { getNodeId } from '@/utils/react-flow';
import PostItIcon from '@/components/icons/PostItIcon';

interface FlowControlsProps {
  className?: string;
}

const FlowControls: React.FC<FlowControlsProps> = ({ className = '' }) => {
  const reactFlowInstance = useReactFlow();
  const { undo, redo, canUndo, canRedo, addNode } = useFlowStoreActions();
  const { showComments, toggleComments, floatingPanels, toggleFloatingPanel } = useSidebarStore();
  const { nodes } = useFlowStore();
  const [zoomLevel, setZoomLevel] = useState(100);
  const [activeTool, setActiveTool] = useState<'select' | 'pan'>('select');

  // Count comment thread nodes
  const commentCount = React.useMemo(() => {
    return nodes.filter(node => node.type === 'commentThread').length;
  }, [nodes]);

  // Update zoom level when viewport changes
  React.useEffect(() => {
    const updateZoom = () => {
      const viewport = reactFlowInstance?.getViewport();
      if (viewport) {
        setZoomLevel(Math.round(viewport.zoom * 100));
      }
    };

    // Initial zoom level
    updateZoom();

    // Listen for viewport changes
    const interval = setInterval(updateZoom, 100);
    return () => clearInterval(interval);
  }, [reactFlowInstance]);

  // Handle tool switching - just visual for now
  const handleToolChange = (tool: 'select' | 'pan') => {
    setActiveTool(tool);
  };

  // Handle adding a PostIt note
  const handleAddPostIt = () => {
    const viewport = reactFlowInstance?.getViewport();
    const position = {
      x: (window.innerWidth / 2 - (viewport?.x || 0)) / (viewport?.zoom || 1) - 100,
      y: (window.innerHeight / 2 - (viewport?.y || 0)) / (viewport?.zoom || 1) - 100
    };
    
    const newNode = {
      id: getNodeId('note'),
      type: 'note',
      position,
      data: {
        text: 'Double-click to edit...',
        color: 'yellow'
      }
    };
    
    addNode(newNode);
  };


  return (
    <Tooltip.Provider>
      <div className={className}>
        {/* Custom bottom controls */}
        <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 z-10">
          <div className="bg-white rounded-full px-4 py-2 shadow-lg border border-gray-200 flex items-center space-x-1">
            {/* Tool Selection */}
            <Tooltip.Root>
              <Tooltip.Trigger asChild>
                <button
                  onClick={() => handleToolChange('select')}
                  className={`p-2 rounded-full transition-colors ${
                    activeTool === 'select'
                      ? 'bg-blue-100 text-blue-600'
                      : 'hover:bg-gray-100 text-gray-600'
                  }`}
                >
                  <MousePointer2 className="h-4 w-4" />
                </button>
              </Tooltip.Trigger>
              <Tooltip.Portal>
                <Tooltip.Content
                  className="bg-gray-900 text-white px-2 py-1 rounded text-sm z-50"
                  sideOffset={5}
                >
                  Select Tool
                  <Tooltip.Arrow className="fill-gray-900" />
                </Tooltip.Content>
              </Tooltip.Portal>
            </Tooltip.Root>
            <Tooltip.Root>
              <Tooltip.Trigger asChild>
                <button
                  onClick={() => handleToolChange('pan')}
                  className={`p-2 rounded-full transition-colors ${
                    activeTool === 'pan'
                      ? 'bg-blue-100 text-blue-600'
                      : 'hover:bg-gray-100 text-gray-600'
                  }`}
                >
                  <Hand className="h-4 w-4" />
                </button>
              </Tooltip.Trigger>
              <Tooltip.Portal>
                <Tooltip.Content
                  className="bg-gray-900 text-white px-2 py-1 rounded text-sm z-50"
                  sideOffset={5}
                >
                  Pan Tool
                  <Tooltip.Arrow className="fill-gray-900" />
                </Tooltip.Content>
              </Tooltip.Portal>
            </Tooltip.Root>
          
          <div className="w-px h-6 bg-gray-300 mx-1"></div>
          
          {/* Panel Toggles */}
          <Tooltip.Root>
            <Tooltip.Trigger asChild>
              <button
                onClick={() => toggleFloatingPanel('components')}
                className={`p-2 rounded-full transition-colors ${
                  floatingPanels.components
                    ? 'bg-blue-100 text-blue-600'
                    : 'hover:bg-gray-100 text-gray-600'
                }`}
              >
                <Package className="h-4 w-4" />
              </button>
            </Tooltip.Trigger>
            <Tooltip.Portal>
              <Tooltip.Content
                className="bg-gray-900 text-white px-2 py-1 rounded text-sm z-50"
                sideOffset={5}
              >
                Components
                <Tooltip.Arrow className="fill-gray-900" />
              </Tooltip.Content>
            </Tooltip.Portal>
          </Tooltip.Root>
          <Tooltip.Root>
            <Tooltip.Trigger asChild>
              <button
                onClick={() => toggleFloatingPanel('canvas')}
                className={`p-2 rounded-full transition-colors ${
                  floatingPanels.canvas
                    ? 'bg-blue-100 text-blue-600'
                    : 'hover:bg-gray-100 text-gray-600'
                }`}
              >
                <Layout className="h-4 w-4" />
              </button>
            </Tooltip.Trigger>
            <Tooltip.Portal>
              <Tooltip.Content
                className="bg-gray-900 text-white px-2 py-1 rounded text-sm z-50"
                sideOffset={5}
              >
                Canvas
                <Tooltip.Arrow className="fill-gray-900" />
              </Tooltip.Content>
            </Tooltip.Portal>
          </Tooltip.Root>
          <Tooltip.Root>
            <Tooltip.Trigger asChild>
              <button
                onClick={() => toggleFloatingPanel('catalog')}
                className={`p-2 rounded-full transition-colors ${
                  floatingPanels.catalog
                    ? 'bg-blue-100 text-blue-600'
                    : 'hover:bg-gray-100 text-gray-600'
                }`}
              >
                <Book className="h-4 w-4" />
              </button>
            </Tooltip.Trigger>
            <Tooltip.Portal>
              <Tooltip.Content
                className="bg-gray-900 text-white px-2 py-1 rounded text-sm z-50"
                sideOffset={5}
              >
                EventCatalog Resources
                <Tooltip.Arrow className="fill-gray-900" />
              </Tooltip.Content>
            </Tooltip.Portal>
          </Tooltip.Root>
          
          <div className="w-px h-6 bg-gray-300 mx-1"></div>
          <Tooltip.Root>
            <Tooltip.Trigger asChild>
              <button
                onClick={() => reactFlowInstance?.fitView({ duration: 500 })}
                className="p-2 hover:bg-gray-100 rounded-full transition-colors"
              >
                <Maximize className="h-4 w-4 text-gray-600" />
              </button>
            </Tooltip.Trigger>
            <Tooltip.Portal>
              <Tooltip.Content
                className="bg-gray-900 text-white px-2 py-1 rounded text-sm z-50"
                sideOffset={5}
              >
                Fit View
                <Tooltip.Arrow className="fill-gray-900" />
              </Tooltip.Content>
            </Tooltip.Portal>
          </Tooltip.Root>
          <Tooltip.Root>
            <Tooltip.Trigger asChild>
              <button
                onClick={() => reactFlowInstance?.zoomOut({ duration: 200 })}
                className="p-2 hover:bg-gray-100 rounded-full transition-colors"
              >
                <ZoomOut className="h-4 w-4 text-gray-600" />
              </button>
            </Tooltip.Trigger>
            <Tooltip.Portal>
              <Tooltip.Content
                className="bg-gray-900 text-white px-2 py-1 rounded text-sm z-50"
                sideOffset={5}
              >
                Zoom Out
                <Tooltip.Arrow className="fill-gray-900" />
              </Tooltip.Content>
            </Tooltip.Portal>
          </Tooltip.Root>
          <Tooltip.Root>
            <Tooltip.Trigger asChild>
              <div className="px-2 text-sm text-gray-600 font-medium cursor-default">
                {zoomLevel}%
              </div>
            </Tooltip.Trigger>
            <Tooltip.Portal>
              <Tooltip.Content
                className="bg-gray-900 text-white px-2 py-1 rounded text-sm z-50"
                sideOffset={5}
              >
                Current Zoom Level
                <Tooltip.Arrow className="fill-gray-900" />
              </Tooltip.Content>
            </Tooltip.Portal>
          </Tooltip.Root>
          <Tooltip.Root>
            <Tooltip.Trigger asChild>
              <button
                onClick={() => reactFlowInstance?.zoomIn({ duration: 200 })}
                className="p-2 hover:bg-gray-100 rounded-full transition-colors"
              >
                <ZoomIn className="h-4 w-4 text-gray-600" />
              </button>
            </Tooltip.Trigger>
            <Tooltip.Portal>
              <Tooltip.Content
                className="bg-gray-900 text-white px-2 py-1 rounded text-sm z-50"
                sideOffset={5}
              >
                Zoom In
                <Tooltip.Arrow className="fill-gray-900" />
              </Tooltip.Content>
            </Tooltip.Portal>
          </Tooltip.Root>
          <div className="w-px h-6 bg-gray-300 mx-1"></div>
          <Tooltip.Root>
            <Tooltip.Trigger asChild>
              <button
                onClick={undo}
                disabled={!canUndo()}
                className={`p-2 rounded-full transition-colors ${
                  canUndo() 
                    ? 'hover:bg-gray-100 text-gray-600' 
                    : 'opacity-50 cursor-not-allowed text-gray-400'
                }`}
              >
                <Undo className="h-4 w-4" />
              </button>
            </Tooltip.Trigger>
            <Tooltip.Portal>
              <Tooltip.Content
                className="bg-gray-900 text-white px-2 py-1 rounded text-sm z-50"
                sideOffset={5}
              >
                Undo
                <Tooltip.Arrow className="fill-gray-900" />
              </Tooltip.Content>
            </Tooltip.Portal>
          </Tooltip.Root>
          <Tooltip.Root>
            <Tooltip.Trigger asChild>
              <button
                onClick={redo}
                disabled={!canRedo()}
                className={`p-2 rounded-full transition-colors ${
                  canRedo() 
                    ? 'hover:bg-gray-100 text-gray-600' 
                    : 'opacity-50 cursor-not-allowed text-gray-400'
                }`}
              >
                <Redo className="h-4 w-4" />
              </button>
            </Tooltip.Trigger>
            <Tooltip.Portal>
              <Tooltip.Content
                className="bg-gray-900 text-white px-2 py-1 rounded text-sm z-50"
                sideOffset={5}
              >
                Redo
                <Tooltip.Arrow className="fill-gray-900" />
              </Tooltip.Content>
            </Tooltip.Portal>
          </Tooltip.Root>
          <div className="w-px h-6 bg-gray-300 mx-1"></div>
          <Tooltip.Root>
            <Tooltip.Trigger asChild>
              <button
                onClick={toggleComments}
                className={`p-2 rounded-full transition-colors relative ${
                  showComments 
                    ? 'bg-orange-100 text-orange-600 hover:bg-orange-200' 
                    : 'hover:bg-gray-100 text-gray-400'
                }`}
              >
                <MessageCircle className="h-4 w-4" />
                {commentCount > 0 && (
                  <span className="absolute -top-1 -right-1 bg-orange-500 text-white text-xs font-bold px-1.5 py-0.5 rounded-full min-w-[18px] h-[18px] flex items-center justify-center">
                    {commentCount}
                  </span>
                )}
              </button>
            </Tooltip.Trigger>
            <Tooltip.Portal>
              <Tooltip.Content
                className="bg-gray-900 text-white px-2 py-1 rounded text-sm z-50"
                sideOffset={5}
              >
                {showComments ? "Hide Comments" : "Show Comments"}
                <Tooltip.Arrow className="fill-gray-900" />
              </Tooltip.Content>
            </Tooltip.Portal>
          </Tooltip.Root>
          
          {/* Sticky Note Button */}
          <Tooltip.Root>
            <Tooltip.Trigger asChild>
              <button
                onClick={handleAddPostIt}
                className="p-2 hover:bg-yellow-100 rounded-full transition-colors"
              >
                <PostItIcon size={16} />
              </button>
            </Tooltip.Trigger>
            <Tooltip.Portal>
              <Tooltip.Content
                className="bg-gray-900 text-white px-2 py-1 rounded text-sm z-50"
                sideOffset={5}
              >
                Add Sticky Note
                <Tooltip.Arrow className="fill-gray-900" />
              </Tooltip.Content>
            </Tooltip.Portal>
          </Tooltip.Root>
        </div>
      </div>
    </div>
    </Tooltip.Provider>
  );
};

export default FlowControls;