import React from 'react';
import {
    TestTube,
    Pencil,
    Trash2,
    Loader2,
    Activity,
    AlertCircle,
    HelpCircle,
    Terminal,
    RefreshCw,
    BarChart3,
} from 'lucide-react';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import type { ServerResponse } from '../types';
import { ServerStatusLabels, OsTypeLabels } from '../types';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/zh-cn';

dayjs.extend(relativeTime);
dayjs.locale('zh-cn');

interface ServerTableProps {
    servers: ServerResponse[];
    loading: boolean;
    onTest: (server: ServerResponse) => void;
    onEdit: (server: ServerResponse) => void;
    onDelete: (server: ServerResponse) => void;
    onSSHConnect: (server: ServerResponse) => void;
    onCollectHardware: (server: ServerResponse) => void;
    onMonitor: (server: ServerResponse) => void;
    isTesting?: (serverId: number) => boolean;
    isCollecting?: (serverId: number) => boolean;
    getOsIcon: (osType?: string) => React.ReactNode;
}

export const ServerTable: React.FC<ServerTableProps> = ({
    servers,
    onTest,
    onEdit,
    onDelete,
    onSSHConnect,
    onCollectHardware,
    onMonitor,
    isTesting,
    isCollecting,
    getOsIcon,
}) => {
    const formatTime = (time?: string) => {
        if (!time) return '-';
        return dayjs(time).fromNow();
    };

    const getStatusIcon = (status?: string) => {
        switch (status) {
            case 'ONLINE':
                return <Activity className="h-4 w-4 text-green-600 dark:text-green-400" />;
            case 'OFFLINE':
                return <AlertCircle className="h-4 w-4 text-red-600 dark:text-red-400" />;
            default:
                return <HelpCircle className="h-4 w-4 text-gray-600 dark:text-gray-400" />;
        }
    };

    return (
        <Table minWidth="1200px">
            <TableHeader>
                <TableRow>
                    <TableHead width="80px">ID</TableHead>
                    <TableHead width="180px">服务器名称</TableHead>
                    <TableHead width="150px">IP地址</TableHead>
                    <TableHead width="120px">状态</TableHead>
                    <TableHead width="100px">操作系统</TableHead>
                    <TableHead width="80px">CPU核心</TableHead>
                    <TableHead width="100px">内存(GB)</TableHead>
                    <TableHead width="100px">磁盘(GB)</TableHead>
                    <TableHead width="120px">SSH认证</TableHead>
                    <TableHead width="150px">最后连接</TableHead>
                    <TableHead sticky width="140px" className="text-right">操作</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                {servers.length === 0 ? (
                    <TableRow>
                        <TableCell colSpan={11} className="text-center py-8">
                            <span className="text-muted-foreground">暂无服务器数据</span>
                        </TableCell>
                    </TableRow>
                ) : (
                    servers.map((server) => (
                        <TableRow key={server.id}>
                            <TableCell>
                                <span className="font-mono text-sm text-muted-foreground">{server.id}</span>
                            </TableCell>
                            <TableCell>
                                <div className="flex items-center gap-2">
                                    <span className="font-medium text-foreground">{server.serverName}</span>
                                </div>
                            </TableCell>
                            <TableCell>
                                <span className="font-mono text-sm">{server.hostIp}</span>
                            </TableCell>
                            <TableCell>
                                <div className="flex items-center gap-2">
                                    {getStatusIcon(server.status)}
                                    <Badge className={
                                        server.status === 'ONLINE' ? 'bg-green-500/10 text-green-700 border-green-500/30 dark:text-green-400' :
                                        server.status === 'OFFLINE' ? 'bg-red-500/10 text-red-700 border-red-500/30 dark:text-red-400' :
                                        'bg-gray-500/10 text-gray-700 border-gray-500/30 dark:text-gray-400'
                                    }>
                                        {(server.status && ServerStatusLabels[server.status]?.label) || server.status || '-'}
                                    </Badge>
                                </div>
                            </TableCell>
                            <TableCell>
                                <div className="flex items-center gap-2">
                                    {getOsIcon(server.osType)}
                                    <span className="text-sm">{(server.osType && OsTypeLabels[server.osType]?.label) || server.osType || '-'}</span>
                                </div>
                            </TableCell>
                            <TableCell>
                                <span className="text-sm">{server.cpuCores || '-'}</span>
                            </TableCell>
                            <TableCell>
                                <span className="text-sm">{server.memorySize || '-'}</span>
                            </TableCell>
                            <TableCell>
                                <span className="text-sm">{server.diskSize || '-'}</span>
                            </TableCell>
                            <TableCell>
                                <Badge variant="outline" className="text-xs">
                                    {server.authType === 'PASSWORD' ? '密码' : '密钥'}
                                </Badge>
                            </TableCell>
                            <TableCell>
                                <span className="text-sm text-muted-foreground">{formatTime(server.lastConnectTime)}</span>
                            </TableCell>
                            <TableCell sticky className="text-right">
                                <div className="flex items-center justify-end gap-1">
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <Button
                                                variant="ghost"
                                                size="sm"
                                                onClick={() => onMonitor(server)}
                                                className="h-8 w-8 p-0"
                                            >
                                                <BarChart3 className="h-4 w-4" />
                                            </Button>
                                        </TooltipTrigger>
                                        <TooltipContent>监控数据</TooltipContent>
                                    </Tooltip>
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <Button
                                                variant="ghost"
                                                size="sm"
                                                onClick={() => onSSHConnect(server)}
                                                className="h-8 w-8 p-0"
                                            >
                                                <Terminal className="h-4 w-4" />
                                            </Button>
                                        </TooltipTrigger>
                                        <TooltipContent>SSH连接</TooltipContent>
                                    </Tooltip>
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <Button
                                                variant="ghost"
                                                size="sm"
                                                onClick={() => onTest(server)}
                                                disabled={isTesting?.(server.id) || isCollecting?.(server.id)}
                                                className="h-8 w-8 p-0"
                                            >
                                                {isTesting?.(server.id) ? (
                                                    <Loader2 className="h-4 w-4 animate-spin" />
                                                ) : (
                                                    <TestTube className="h-4 w-4" />
                                                )}
                                            </Button>
                                        </TooltipTrigger>
                                        <TooltipContent>测试连接</TooltipContent>
                                    </Tooltip>
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <Button
                                                variant="ghost"
                                                size="sm"
                                                onClick={() => onCollectHardware(server)}
                                                disabled={isTesting?.(server.id) || isCollecting?.(server.id)}
                                                className="h-8 w-8 p-0"
                                            >
                                                {isCollecting?.(server.id) ? (
                                                    <Loader2 className="h-4 w-4 animate-spin" />
                                                ) : (
                                                    <RefreshCw className="h-4 w-4" />
                                                )}
                                            </Button>
                                        </TooltipTrigger>
                                        <TooltipContent>刷新硬件信息</TooltipContent>
                                    </Tooltip>
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <Button
                                                variant="ghost"
                                                size="sm"
                                                onClick={() => onEdit(server)}
                                                className="h-8 w-8 p-0"
                                            >
                                                <Pencil className="h-4 w-4" />
                                            </Button>
                                        </TooltipTrigger>
                                        <TooltipContent>编辑</TooltipContent>
                                    </Tooltip>
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <Button
                                                variant="ghost"
                                                size="sm"
                                                onClick={() => onDelete(server)}
                                                className="h-8 w-8 p-0 text-destructive hover:text-destructive"
                                            >
                                                <Trash2 className="h-4 w-4" />
                                            </Button>
                                        </TooltipTrigger>
                                        <TooltipContent>删除</TooltipContent>
                                    </Tooltip>
                                </div>
                            </TableCell>
                        </TableRow>
                    ))
                )}
            </TableBody>
        </Table>
    );
};
