/**
 * 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, FolderOpen } 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;
    serverName?: string;
    hostIp?: string;
    connectedTime?: Date | null;
    fontSize: number;
    currentTheme?: string;
    themes?: TerminalTheme[];
    compact?: boolean;  // 紧凑模式
    onSearch?: () => void;
    onClear?: () => void;
    onCopy?: () => void;
    onZoomIn?: () => void;
    onZoomOut?: () => void;
    onReconnect?: () => void;
    onThemeChange?: (theme: string) => void;
    onFileManager?: () => void;
    // 分屏操作
    onSplitUp?: () => void;
    onSplitDown?: () => void;
    onSplitLeft?: () => void;
    onSplitRight?: () => void;
    onSplitInGroup?: () => void;
}

export const TerminalToolbar: React.FC<TerminalToolbarProps> = ({
    config,
    connectionStatus,
    serverName,
    hostIp,
    connectedTime,
    fontSize,
    currentTheme,
    themes = [],
    compact = false,
    onSearch,
    onClear,
    onCopy,
    onZoomIn,
    onZoomOut,
    onReconnect,
    onThemeChange,
    onFileManager,
    onSplitUp,
    onSplitDown,
    onSplitLeft,
    onSplitRight,
    onSplitInGroup,
}) => {
    const [, forceUpdate] = React.useState(0);

    // 定期更新连接时长显示
    React.useEffect(() => {
        if (connectionStatus === 'connected' && connectedTime) {
            const timer = setInterval(() => {
                forceUpdate(prev => prev + 1);
            }, 1000); // 每秒更新一次
            return () => clearInterval(timer);
        }
    }, [connectionStatus, connectedTime]);

    if (!config.show) return null;

    // 计算连接时长
    const getConnectionDuration = () => {
        if (!connectedTime) return '';
        const now = new Date();
        const diff = Math.floor((now.getTime() - connectedTime.getTime()) / 1000); // 秒
        const hours = Math.floor(diff / 3600);
        const minutes = Math.floor((diff % 3600) / 60);
        const seconds = diff % 60;
        
        if (hours > 0) {
            return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
    };

    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-green-500 animate-pulse" title={`已连接 ${hostIp ? `- ${hostIp}` : ''}`} />;
                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':
                // 已连接状态：显示IP和连接时长
                return (
                    <Badge variant="outline" className="bg-green-100 text-green-700 flex items-center gap-1.5">
                        <div className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
                        <span>已连接</span>
                        {hostIp && (
                            <>
                                <span className="text-gray-400">|</span>
                                <span className="font-mono text-xs">{hostIp}</span>
                            </>
                        )}
                        {connectedTime && (
                            <>
                                <span className="text-gray-400">|</span>
                                <span className="font-mono text-xs">{getConnectionDuration()}</span>
                            </>
                        )}
                    </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}>
                {/* 文件管理 */}
                {onFileManager && (
                    <Button
                        size="sm"
                        variant="ghost"
                        className="h-7 px-2"
                        onClick={onFileManager}
                        title="文件管理"
                    >
                        <FolderOpen className="h-3.5 w-3.5" />
                    </Button>
                )}
                {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={compact ? "h-7 w-[120px] text-xs" : "h-7 w-[200px] text-xs"}>
                                <Palette className="h-3.5 w-3.5 mr-1" />
                                <SelectValue placeholder="主题" />
                            </SelectTrigger>
                            <SelectContent className="z-[9999]">
                                {themes.map((theme) => {
                                    // 紧凑模式：只显示英文名（去掉括号和中文）
                                    const displayLabel = compact 
                                        ? theme.label.split('（')[0].split('(')[0].trim()
                                        : theme.label;
                                    return (
                                        <SelectItem key={theme.name} value={theme.name}>
                                            {displayLabel}
                                        </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>
    );
};