'use client';

import React from 'react';
import { useReactFlow, useViewport } from '@xyflow/react';
import { Plus, Minus, Scan, Map, List } from 'lucide-react';

interface CanvasViewportControlsProps {
  isMiniMapOpen?: boolean;
  onToggleMiniMap?: () => void;
  onToggleQueuePanel?: () => void;
  isQueuePanelOpen?: boolean;
}

export function CanvasViewportControls({ 
  isMiniMapOpen = false, 
  onToggleMiniMap,
  onToggleQueuePanel,
  isQueuePanelOpen = false
}: CanvasViewportControlsProps) {
  const { zoomIn, zoomOut, zoomTo, fitView } = useReactFlow();
  const { zoom } = useViewport();

  return (
    <div className="absolute bottom-6 left-6 flex items-center justify-between w-[240px] px-3 py-1.5 bg-black/40 backdrop-blur-md border border-white/10 rounded-full shadow-xl z-50 animate-in fade-in slide-in-from-bottom-4 duration-700">
      <button 
        onClick={() => zoomOut({ duration: 300 })} 
        className="p-1 text-muted-foreground hover:text-white transition-colors rounded-full hover:bg-white/10 shrink-0"
      >
        <Minus size={12} strokeWidth={3} />
      </button>
      
      <div className="flex items-center gap-2 min-w-0 flex-1 justify-center px-1">
        <input 
          type="range" 
          min="0.1" 
          max="4" 
          step="0.1" 
          value={zoom} 
          onChange={(e) => zoomTo(parseFloat(e.target.value), { duration: 0 })} 
          className="w-16 h-1 bg-white/20 rounded-full appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-2.5 [&::-webkit-slider-thumb]:h-2.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-lg hover:[&::-webkit-slider-thumb]:scale-125 transition-all shrink-0" 
        />
        <span 
          className="text-[10px] font-bold text-muted-foreground w-8 text-center tabular-nums cursor-pointer hover:text-foreground shrink-0" 
          onClick={() => zoomTo(1, { duration: 300 })} 
          title="Reset Zoom"
        >
          {Math.round(zoom * 100)}%
        </span>
      </div>
      
      <button 
        onClick={() => zoomIn({ duration: 300 })} 
        className="p-1 text-muted-foreground hover:text-white transition-colors rounded-full hover:bg-white/10 shrink-0"
      >
        <Plus size={12} strokeWidth={3} />
      </button>
      
      <div className="w-px h-2.5 bg-white/10 shrink-0 mx-0.5" />
      
      <button 
        onClick={() => fitView({ 
          duration: 300, 
          padding: {
            top: 0.1,
            right: 0.15,
            bottom: 0.15,
            left: 0.12
          },
          minZoom: 0.5, 
          maxZoom: 1.2 
        })} 
        className="p-1 text-muted-foreground hover:text-white transition-colors rounded-full hover:bg-white/10 shrink-0" 
        title="适配视图"
      >
        <Scan size={12} strokeWidth={3} />
      </button>
      
      {onToggleMiniMap && (
        <>
          <div className="w-px h-2.5 bg-white/10 shrink-0 mx-0.5" />
          <button 
            onClick={onToggleMiniMap}
            className={`p-1 transition-colors rounded-full hover:bg-white/10 shrink-0 ${
              isMiniMapOpen ? 'text-white' : 'text-muted-foreground hover:text-white'
            }`}
            title={isMiniMapOpen ? "隐藏小地图" : "显示小地图"}
          >
            <Map size={12} strokeWidth={3} />
          </button>
        </>
      )}

      {onToggleQueuePanel && (
        <>
          <div className="w-px h-2.5 bg-white/10 shrink-0 mx-0.5" />
          <button 
            onClick={onToggleQueuePanel}
            className={`p-1 transition-colors rounded-full hover:bg-white/10 shrink-0 ${
              isQueuePanelOpen ? 'text-white' : 'text-muted-foreground hover:text-white'
            }`}
            title={isQueuePanelOpen ? "隐藏生成队列" : "显示生成队列"}
          >
            <List size={12} strokeWidth={3} />
          </button>
        </>
      )}
    </div>
  );
}
