frontend/src/components/plugin/QuantumVisualization.js

import React, { useEffect, useRef, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { BarChart3, Activity, Zap, Info, Maximize2 } from 'lucide-react';
import PropTypes from 'prop-types';
import FullscreenCircuitViewer from './FullscreenCircuitViewer';

const QuantumVisualization = ({ result, type = 'auto' }) => {
  const [activeVisualization, setActiveVisualization] = useState('circuit');
  const [showFullscreen, setShowFullscreen] = useState(false);

  // Bloch Sphere Visualization
  const BlochSphere = ({ stateVector }) => {
    const canvasRef = useRef(null);

    useEffect(() => {
      if (!canvasRef.current || !stateVector) return;

      const canvas = canvasRef.current;
      const ctx = canvas.getContext('2d');
      const centerX = canvas.width / 2;
      const centerY = canvas.height / 2;
      const radius = Math.min(centerX, centerY) - 20;

      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Draw sphere outline
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
      ctx.strokeStyle = '#e5e7eb';
      ctx.lineWidth = 2;
      ctx.stroke();

      // Draw axes
      ctx.strokeStyle = '#9ca3af';
      ctx.lineWidth = 1;
      
      // X axis
      ctx.beginPath();
      ctx.moveTo(centerX - radius, centerY);
      ctx.lineTo(centerX + radius, centerY);
      ctx.stroke();
      
      // Y axis (vertical)
      ctx.beginPath();
      ctx.moveTo(centerX, centerY - radius);
      ctx.lineTo(centerX, centerY + radius);
      ctx.stroke();

      // Calculate state vector position on Bloch sphere
      if (stateVector && stateVector.length >= 2) {
        const alpha = stateVector[0];
        const beta = stateVector[1];
        
        // Convert to Bloch sphere coordinates
        const theta = 2 * Math.acos(Math.abs(alpha));
        const phi = Math.arg ? Math.arg(beta / alpha) : 0;
        
        const x = radius * Math.sin(theta) * Math.cos(phi);
        const z = radius * Math.cos(theta);

        // Project to 2D (simple projection)
        const projX = centerX + x;
        const projY = centerY - z; // Flip Y for canvas coordinates

        // Draw state vector
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(projX, projY);
        ctx.strokeStyle = '#6366f1';
        ctx.lineWidth = 3;
        ctx.stroke();

        // Draw state point
        ctx.beginPath();
        ctx.arc(projX, projY, 6, 0, 2 * Math.PI);
        ctx.fillStyle = '#6366f1';
        ctx.fill();
      }

      // Add labels
      ctx.fillStyle = '#374151';
      ctx.font = '12px Inter';
      ctx.textAlign = 'center';
      ctx.fillText('|0⟩', centerX, centerY - radius - 10);
      ctx.fillText('|1⟩', centerX, centerY + radius + 20);
      ctx.textAlign = 'left';
      ctx.fillText('|+⟩', centerX + radius + 10, centerY + 5);
      ctx.textAlign = 'right';
      ctx.fillText('|-⟩', centerX - radius - 10, centerY + 5);
    }, [stateVector]);

    return (
      <canvas

        ref={canvasRef}

        width={300}

        height={300}

        className="border border-neutral-200 dark:border-neutral-600 rounded-lg bg-base-100 dark:bg-base-200"

      />
    );
  };

  // Probability Bar Chart
  const ProbabilityChart = ({ probabilities }) => {
    if (!probabilities || typeof probabilities !== 'object') return null;

    const entries = Object.entries(probabilities);
    const maxProb = Math.max(...entries.map(([, prob]) => prob));

    return (
      <div className="space-y-3">

        {entries.map(([state, probability]) => (

          <motion.div

            key={state}

            initial={{ opacity: 0, x: -20 }}

            animate={{ opacity: 1, x: 0 }}

            className="flex items-center gap-3"

          >

            <div className="w-12 text-sm font-mono text-neutral-600">|{state}⟩</div>

            <div className="flex-1 bg-base-200 dark:bg-neutral-800 rounded-full h-6 relative overflow-hidden">

              <motion.div

                initial={{ width: 0 }}

                animate={{ width: `${(probability / maxProb) * 100}%` }}

                transition={{ duration: 0.8, ease: "easeOut" }}

                className="h-full bg-gradient-to-r from-primary-400 to-primary-600 rounded-full"

              />

              <div className="absolute inset-0 flex items-center justify-center text-xs font-medium text-neutral-700">

                {(probability * 100).toFixed(1)}%

              </div>

            </div>

          </motion.div>

        ))}

      </div>
    );
  };

  // Circuit SVG Display
  const CircuitDisplay = ({ circuitSvg }) => {
    const [zoom, setZoom] = useState(1);
    const [isDragging, setIsDragging] = useState(false);
    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
    const [scrollPos, setScrollPos] = useState({ x: 0, y: 0 });
    const containerRef = useRef(null);

    if (!circuitSvg) return null;

    const handleZoomIn = () => setZoom(prev => Math.min(prev + 0.2, 3));
    const handleZoomOut = () => setZoom(prev => Math.max(prev - 0.2, 0.5));
    const handleResetZoom = () => setZoom(1);

    const handleMouseDown = (e) => {
      setIsDragging(true);
      setDragStart({ x: e.clientX, y: e.clientY });
    };

    const handleMouseMove = (e) => {
      if (!isDragging || !containerRef.current) return;
      
      const deltaX = e.clientX - dragStart.x;
      const deltaY = e.clientY - dragStart.y;
      
      containerRef.current.scrollLeft = scrollPos.x - deltaX;
      containerRef.current.scrollTop = scrollPos.y - deltaY;
    };

    const handleMouseUp = () => {
      if (containerRef.current) {
        setScrollPos({
          x: containerRef.current.scrollLeft,
          y: containerRef.current.scrollTop
        });
      }
      setIsDragging(false);
    };

    return (
      <motion.div

        initial={{ opacity: 0, scale: 0.95 }}

        animate={{ opacity: 1, scale: 1 }}

        className="bg-base-100 dark:bg-base-200 p-6 rounded-xl border border-neutral-200 dark:border-neutral-700 overflow-hidden"

      >

        <div className="mb-4 flex items-center justify-between">

          <div>

            <h4 className="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">

              Quantum Circuit Diagram

            </h4>

            <p className="text-xs text-neutral-500 dark:text-neutral-400">

              Scroll or drag to navigate • Use zoom controls for better viewing

            </p>

          </div>

          

          {/* Controls */}

          <div className="flex items-center gap-2">

            {/* Zoom Controls */}

            <div className="flex items-center gap-1 sm:gap-2 bg-base-200 dark:bg-neutral-800 rounded-lg p-1">

              <button

                onClick={handleZoomOut}

                className="p-2 sm:p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded text-neutral-600 dark:text-neutral-400 transition-colors min-h-[44px] sm:min-h-[32px] min-w-[44px] sm:min-w-[32px] flex items-center justify-center"

                title="Zoom Out"

              >

                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">

                  <circle cx="11" cy="11" r="8"/>

                  <path d="M21 21l-4.35-4.35"/>

                  <line x1="8" y1="11" x2="14" y2="11"/>

                </svg>

              </button>

              

              <span className="text-xs text-neutral-600 dark:text-neutral-400 min-w-[3rem] text-center px-1">

                {Math.round(zoom * 100)}%

              </span>

              

              <button

                onClick={handleZoomIn}

                className="p-2 sm:p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded text-neutral-600 dark:text-neutral-400 transition-colors min-h-[44px] sm:min-h-[32px] min-w-[44px] sm:min-w-[32px] flex items-center justify-center"

                title="Zoom In"

              >

                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">

                  <circle cx="11" cy="11" r="8"/>

                  <path d="M21 21l-4.35-4.35"/>

                  <line x1="8" y1="11" x2="14" y2="11"/>

                  <line x1="11" y1="8" x2="11" y2="14"/>

                </svg>

              </button>

              

              <button

                onClick={handleResetZoom}

                className="p-2 sm:p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded text-neutral-600 dark:text-neutral-400 transition-colors text-xs min-h-[44px] sm:min-h-[32px] px-2 sm:px-1"

                title="Reset Zoom"

              >

                <span className="hidden sm:inline">Reset</span>

                <span className="sm:hidden">↺</span>

              </button>

            </div>

            

            {/* Fullscreen Button */}

            <button

              onClick={() => setShowFullscreen(true)}

              className="p-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg transition-colors min-h-[44px] sm:min-h-[40px] min-w-[44px] sm:min-w-[40px] flex items-center justify-center"

              title="View in Fullscreen"

            >

              <Maximize2 size={16} />

            </button>

          </div>

        </div>

        

        <div 

          ref={containerRef}

          className="overflow-auto bg-base-100 dark:bg-neutral-800 rounded-lg border border-neutral-100 dark:border-neutral-600 p-2 sm:p-4 cursor-grab active:cursor-grabbing touch-pan-x touch-pan-y"

          style={{ 

            maxHeight: '400px',

            scrollbarWidth: 'thin',

            scrollbarColor: '#cbd5e1 #f1f5f9',

            WebkitOverflowScrolling: 'touch'

          }}

          onMouseDown={handleMouseDown}

          onMouseMove={handleMouseMove}

          onMouseUp={handleMouseUp}

          onMouseLeave={handleMouseUp}

          onTouchStart={(e) => {

            const touch = e.touches[0];

            handleMouseDown({ clientX: touch.clientX, clientY: touch.clientY });

          }}

          onTouchMove={(e) => {

            const touch = e.touches[0];

            handleMouseMove({ clientX: touch.clientX, clientY: touch.clientY });

          }}

          onTouchEnd={handleMouseUp}

        >

          <div

            dangerouslySetInnerHTML={{ __html: circuitSvg }}

            className="min-w-max transition-transform duration-200"

            style={{ 

              minWidth: 'fit-content',

              display: 'inline-block',

              transform: `scale(${zoom})`,

              transformOrigin: 'top left'

            }}

          />

        </div>

        

        {/* Navigation hints */}

        <div className="mt-3 flex items-center justify-between text-xs text-neutral-400 dark:text-neutral-500">

          <span className="flex items-center gap-1">

            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">

              <path d="M9 11H1m22 0h-8M9 11l3-3m-3 3l3 3"/>

            </svg>

            <span className="hidden sm:inline">Drag to pan • Scroll to navigate</span>

            <span className="sm:hidden">Drag or swipe to navigate</span>

          </span>

          

          <span className="flex items-center gap-1">

            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">

              <circle cx="11" cy="11" r="8"/>

              <path d="M21 21l-4.35-4.35"/>

            </svg>

            Use zoom controls for detail

          </span>

        </div>

      </motion.div>
    );
  };

  const visualizations = [
    {
      id: 'circuit',
      label: 'Circuit',
      icon: <Activity size={16} />,
      component: <CircuitDisplay circuitSvg={result?.output?.circuit_svg} />,
      available: !!result?.output?.circuit_svg,
    },
    {
      id: 'probabilities',
      label: 'Probabilities',
      icon: <BarChart3 size={16} />,
      component: <ProbabilityChart probabilities={result?.output?.probabilities} />,
      available: !!result?.output?.probabilities,
    },
    {
      id: 'bloch',
      label: 'Bloch Sphere',
      icon: <Zap size={16} />,
      component: <BlochSphere stateVector={result?.output?.state_vector} />,
      available: !!result?.output?.state_vector,
    },
  ];

  const availableVisualizations = visualizations.filter(viz => viz.available);

  if (!result || availableVisualizations.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-12 text-neutral-500">

        <Info size={48} className="mb-4 opacity-50" />

        <p className="text-lg font-medium">No visualization data available</p>

        <p className="text-sm">Run a simulation to see results</p>

      </div>
    );
  }

  return (
    <div className="space-y-6">

      {availableVisualizations.length > 1 && (

        <div className="flex gap-2 p-1 bg-base-200 rounded-lg">

          {availableVisualizations.map((viz) => (

            <button

              key={viz.id}

              onClick={() => setActiveVisualization(viz.id)}

              className={`

                flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all

                ${activeVisualization === viz.id

                  ? 'bg-base-100 text-neutral-900 dark:text-neutral-100 shadow-sm'

                  : 'text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-base-100/50'

                }

              `}

            >

              {viz.icon}

              {viz.label}

            </button>

          ))}

        </div>

      )}



      <AnimatePresence mode="wait">

        {availableVisualizations.map((viz) => (

          viz.id === activeVisualization && (

            <motion.div

              key={viz.id}

              initial={{ opacity: 0, y: 20 }}

              animate={{ opacity: 1, y: 0 }}

              exit={{ opacity: 0, y: -20 }}

              transition={{ duration: 0.3 }}

            >

              {viz.component}

            </motion.div>

          )

        ))}

      </AnimatePresence>



      {/* Fullscreen Circuit Viewer */}

      <FullscreenCircuitViewer

        circuitSvg={result?.output?.circuit_svg}

        isOpen={showFullscreen}

        onClose={() => setShowFullscreen(false)}

      />

    </div>
  );
};

QuantumVisualization.propTypes = {
  result: PropTypes.object,
  type: PropTypes.string,
};

export default QuantumVisualization;