/**
 * Terminal 工具栏组件
 */
import React from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Search, Trash2, Copy, ZoomIn, ZoomOut, RotateCcw, Loader2, XCircle, Palette, SplitSquareVertical, SplitSquareHorizontal, Plus, ChevronDown } from 'lucide-react';
import type { ConnectionStatus, TerminalToolbarConfig } from './types';
import type { TerminalTheme } from './themes';
import styles from './index.module.less';

interface TerminalToolbarProps {
    config: TerminalToolbarConfig;
    connectionStatus: ConnectionStatus;
    fontSize: number;
    currentTheme?: string;
    themes?: TerminalTheme[];
    compact?: boolean;  // 紧凑模式
    onSearch?: () => void;
    onClear?: () => void;
    onCopy?: () => void;
    onZoomIn?: () => void;
    onZoomOut?: () => void;
    onReconnect?: () => void;
    onThemeChange?: (themeName: string) => void;
    // 分屏操作
    onSplitUp?: () => void;
    onSplitDown?: () => void;
    onSplitLeft?: () => void;
    onSplitRight?: () => void;
    onSplitInGroup?: () => void;
}

export const TerminalToolbar: React.FC<TerminalToolbarProps> = ({
    config,
    connectionStatus,
    fontSize,
    currentTheme,
    themes = [],
    compact = false,
    onSearch,
    onClear,
    onCopy,
    onZoomIn,
    onZoomOut,
    onReconnect,
    onThemeChange,
    onSplitUp,
    onSplitDown,
    onSplitLeft,
    onSplitRight,
    onSplitInGroup,
}) => {
    if (!config.show) return null;

    const getStatusBadge = () => {
        // 紧凑模式：只显示状态圆点
        if (compact) {
            switch (connectionStatus) {
                case 'connecting':
                    return <div className="h-2 w-2 rounded-full bg-yellow-500 animate-pulse" title="连接中" />;
                case 'connected':
                    return <div className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" title="已连接" />;
                case 'reconnecting':
                    return <div className="h-2 w-2 rounded-full bg-orange-500 animate-pulse" title="重连中" />;
                case 'error':
                    return <div className="h-2 w-2 rounded-full bg-red-500" title="连接失败" />;
                case 'disconnected':
                    return <div className="h-2 w-2 rounded-full bg-gray-400" title="已断开" />;
            }
        }

        // 正常模式：显示带文字的Badge
        switch (connectionStatus) {
            case 'connecting':
                return <Badge variant="outline" className="bg-yellow-100 text-yellow-700"><Loader2 className="mr-1 h-3 w-3 animate-spin" />连接中</Badge>;
            case 'connected':
                return <Badge variant="outline" className="bg-emerald-100 text-emerald-700"><div className="mr-1 h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />已连接</Badge>;
            case 'reconnecting':
                return <Badge variant="outline" className="bg-orange-100 text-orange-700"><Loader2 className="mr-1 h-3 w-3 animate-spin" />重连中</Badge>;
            case 'error':
                return <Badge variant="outline" className="bg-red-100 text-red-700"><XCircle className="mr-1 h-3 w-3" />连接失败</Badge>;
            case 'disconnected':
                return <Badge variant="outline" className="bg-gray-100 text-gray-700"><XCircle className="mr-1 h-3 w-3" />已断开</Badge>;
        }
    };

    return (
        <div className={styles.toolbar}>
            {/* 左侧：状态指示器 */}
            <div className={styles.left}>
                {config.showStatus && getStatusBadge()}
                {config.showFontSizeLabel && (
                    <span className={compact ? "text-[12px] text-gray-500 dark:text-gray-400" : "text-xs text-gray-500 dark:text-gray-400"}>
                        {compact ? `${fontSize}px` : `字体 ${fontSize}px`}
                    </span>
                )}
            </div>

            {/* 右侧：所有操作按钮 */}
            <div className={styles.right}>
                {config.showSearch && (
                    <Button
                        size="sm"
                        variant="ghost"
                        className="h-7 px-2"
                        onClick={onSearch}
                        title="搜索 (Ctrl+F)"
                    >
                        <Search className="h-3.5 w-3.5" />
                    </Button>
                )}
                {config.showClear && (
                    <Button
                        size="sm"
                        variant="ghost"
                        className="h-7 px-2"
                        onClick={onClear}
                        title="清屏 (Ctrl+L)"
                    >
                        <Trash2 className="h-3.5 w-3.5" />
                    </Button>
                )}
                {config.showCopy && (
                    <Button
                        size="sm"
                        variant="ghost"
                        className="h-7 px-2"
                        onClick={onCopy}
                        title="复制选中 (Ctrl+C)"
                    >
                        <Copy className="h-3.5 w-3.5" />
                    </Button>
                )}
                {config.showFontSize && (
                    <>
                        <div className="h-4 w-px bg-gray-300 dark:bg-gray-600 mx-1" />
                        <Button
                            size="sm"
                            variant="ghost"
                            className="h-7 px-2"
                            onClick={onZoomOut}
                            title="缩小字体"
                        >
                            <ZoomOut className="h-3.5 w-3.5" />
                        </Button>
                        <Button
                            size="sm"
                            variant="ghost"
                            className="h-7 px-2"
                            onClick={onZoomIn}
                            title="放大字体"
                        >
                            <ZoomIn className="h-3.5 w-3.5" />
                        </Button>
                    </>
                )}
                {/* 主题选择器 */}
                {themes.length > 0 && onThemeChange && (
                    <>
                        <div className="h-4 w-px bg-gray-300 dark:bg-gray-600 mx-1" />
                        <Select value={currentTheme} onValueChange={onThemeChange}>
                            <SelectTrigger className="h-7 w-auto min-w-[100px] text-xs">
                                <Palette className="h-3.5 w-3.5 mr-1" />
                                <SelectValue placeholder="选择主题" />
                            </SelectTrigger>
                            <SelectContent className="z-[9999]">
                                {themes.map((theme) => (
                                    <SelectItem key={theme.name} value={theme.name}>
                                        {theme.label}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </>
                )}
                {/* 分屏菜单 */}
                {(onSplitUp || onSplitDown || onSplitLeft || onSplitRight || onSplitInGroup) && (
                    <>
                        <div className="h-4 w-px bg-gray-300 dark:bg-gray-600 mx-1" />
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button
                                    variant="ghost"
                                    size="sm"
                                    className="h-7 px-2 relative z-50"
                                    title="分屏"
                                >
                                    <SplitSquareVertical className="h-3.5 w-3.5 mr-1" />
                                    <ChevronDown className="h-3 w-3" />
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end" className="z-[9999]">
                                {onSplitUp && (
                                    <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onSplitUp(); }}>
                                        <SplitSquareHorizontal className="h-4 w-4 mr-2" />
                                        向上拆分
                                    </DropdownMenuItem>
                                )}
                                {onSplitDown && (
                                    <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onSplitDown(); }}>
                                        <SplitSquareHorizontal className="h-4 w-4 mr-2" />
                                        向下拆分
                                    </DropdownMenuItem>
                                )}
                                {(onSplitUp || onSplitDown) && (onSplitLeft || onSplitRight) && (
                                    <DropdownMenuSeparator />
                                )}
                                {onSplitLeft && (
                                    <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onSplitLeft(); }}>
                                        <SplitSquareVertical className="h-4 w-4 mr-2" />
                                        向左拆分
                                    </DropdownMenuItem>
                                )}
                                {onSplitRight && (
                                    <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onSplitRight(); }}>
                                        <SplitSquareVertical className="h-4 w-4 mr-2" />
                                        向右拆分
                                    </DropdownMenuItem>
                                )}
                                {onSplitInGroup && (
                                    <>
                                        <DropdownMenuSeparator />
                                        <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onSplitInGroup(); }}>
                                            <Plus className="h-4 w-4 mr-2" />
                                            在组中拆分
                                        </DropdownMenuItem>
                                    </>
                                )}
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </>
                )}
                {(connectionStatus === 'disconnected' || connectionStatus === 'error') && (
                    <>
                        <div className="h-4 w-px bg-gray-300 dark:bg-gray-600 mx-1" />
                        <Button
                            size="sm"
                            variant="outline"
                            className="h-7"
                            onClick={onReconnect}
                        >
                            <RotateCcw className="h-3.5 w-3.5 mr-1" />
                            重连
                        </Button>
                    </>
                )}
                {config.extraActions}
            </div>
        </div>
    );
};