import React from 'react';
import { Save, Undo, Redo, ZoomIn, ZoomOut, Maximize2, ArrowLeft } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { 
    Tooltip, 
    TooltipContent, 
    TooltipProvider, 
    TooltipTrigger 
} from '@/components/ui/tooltip';

interface WorkflowToolbarProps {
    title?: string;
    onSave?: () => void;
    onUndo?: () => void;
    onRedo?: () => void;
    onZoomIn?: () => void;
    onZoomOut?: () => void;
    onFitView?: () => void;
    onBack?: () => void;
    canUndo?: boolean;
    canRedo?: boolean;
    zoom?: number;
    className?: string;
}

const WorkflowToolbar: React.FC<WorkflowToolbarProps> = ({
    title = '工作流设计器',
    onSave,
    onUndo,
    onRedo,
    onZoomIn,
    onZoomOut,
    onFitView,
    onBack,
    canUndo = false,
    canRedo = false,
    zoom = 1,
    className = ''
}) => {
    return (
        <TooltipProvider>
            <div 
                className={`workflow-toolbar flex items-center justify-between h-14 px-4 bg-background border-b shadow-sm ${className}`}
            >
                {/* 左侧：返回按钮和标题 */}
                <div className="flex items-center gap-3">
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button 
                                variant="ghost" 
                                size="icon"
                                onClick={onBack}
                                className="text-muted-foreground hover:text-foreground"
                            >
                                <ArrowLeft className="h-4 w-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>返回列表</TooltipContent>
                    </Tooltip>
                    
                    <Separator orientation="vertical" className="h-6" />
                    
                    <h2 className="text-base font-semibold text-foreground m-0">
                        {title}
                    </h2>
                </div>

                {/* 右侧：操作按钮区域 */}
                <div className="flex items-center gap-1.5">
                    {/* 撤销/重做 */}
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button 
                                variant="ghost" 
                                size="icon"
                                onClick={onUndo}
                                disabled={!canUndo}
                            >
                                <Undo className="h-4 w-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>撤销 (Ctrl+Z)</TooltipContent>
                    </Tooltip>
                    
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button 
                                variant="ghost" 
                                size="icon"
                                onClick={onRedo}
                                disabled={!canRedo}
                            >
                                <Redo className="h-4 w-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>重做 (Ctrl+Shift+Z)</TooltipContent>
                    </Tooltip>

                    <Separator orientation="vertical" className="h-6 mx-1" />

                    {/* 视图操作 */}
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button 
                                variant="ghost" 
                                size="icon"
                                onClick={onZoomIn}
                            >
                                <ZoomIn className="h-4 w-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>放大 (+)</TooltipContent>
                    </Tooltip>
                    
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button 
                                variant="ghost" 
                                size="icon"
                                onClick={onZoomOut}
                            >
                                <ZoomOut className="h-4 w-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>缩小 (-)</TooltipContent>
                    </Tooltip>
                    
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button 
                                variant="ghost" 
                                size="icon"
                                onClick={onFitView}
                            >
                                <Maximize2 className="h-4 w-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>适应视图</TooltipContent>
                    </Tooltip>

                    {/* 缩放比例显示 */}
                    <div className="ml-1 px-3 py-1.5 bg-muted text-muted-foreground text-xs font-mono font-semibold rounded-md border min-w-[60px] text-center">
                        {Math.round(zoom * 100)}%
                    </div>

                    <Separator orientation="vertical" className="h-6 mx-2" />

                    {/* 保存按钮（最右侧） */}
                    <Button 
                        onClick={onSave}
                        className="gap-1.5 font-medium shadow-md"
                    >
                        <Save className="h-4 w-4" />
                        保存
                    </Button>
                </div>
            </div>
        </TooltipProvider>
    );
};

export default WorkflowToolbar;
