import React, { useState } from 'react';
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import {
    GitBranch,
    Rocket,
    CheckCircle2,
    XCircle,
    TrendingUp,
    Clock,
    History,
    Loader2,
    User,
    FileText,
    Hash,
} from "lucide-react";
import { formatDuration, formatTime, getStatusIcon, getStatusText } from '../utils/dashboardUtils';
import { getLanguageIcon } from '../utils/languageIcons';
import type { ApplicationConfig, DeployEnvironment, DeployRecord } from '../types';
import { DeployFlowGraphModal } from './DeployFlowGraphModal';
import DeploymentFormModal from './DeploymentFormModal';

interface ApplicationCardProps {
    app: ApplicationConfig;
    environment: DeployEnvironment;
    teamId: number;
    onDeploy: (app: ApplicationConfig, remark: string) => void;
    isDeploying: boolean;
}

export const ApplicationCard: React.FC<ApplicationCardProps> = ({
    app,
    environment,
    teamId,
    onDeploy,
    isDeploying,
}) => {
    const [selectedDeployRecordId, setSelectedDeployRecordId] = useState<number | null>(null);
    const [flowModalOpen, setFlowModalOpen] = useState(false);
    const [deployDialogOpen, setDeployDialogOpen] = useState(false);

    // 获取语言图标配置
    const languageConfig = getLanguageIcon(app.language);

    const handleDeployRecordClick = (record: DeployRecord) => {
        setSelectedDeployRecordId(record.id);
        setFlowModalOpen(true);
    };

    return (
        <div className="flex flex-col p-3 rounded-lg border hover:bg-accent/50 transition-colors">
            {/* 应用基本信息 - 固定高度确保一致性 */}
            <div className="flex items-start gap-2 mb-3 min-h-[54px]">
                <TooltipProvider>
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <span 
                                className="shrink-0 mt-0.5 flex items-center justify-center"
                                style={{ 
                                    fontSize: '16px', 
                                    color: languageConfig.color,
                                    width: '16px',
                                    height: '16px'
                                }}
                            >
                                {languageConfig.icon}
                            </span>
                        </TooltipTrigger>
                        <TooltipContent>
                            <p>{languageConfig.label}</p>
                        </TooltipContent>
                    </Tooltip>
                </TooltipProvider>
                <div className="flex-1 min-w-0">
                    {app.applicationName ? (
                        <h4 className="font-semibold text-sm mb-1 truncate">{app.applicationName}</h4>
                    ) : (
                        <Skeleton className="h-4 w-24 mb-1" />
                    )}
                    {app.applicationCode ? (
                        <code className="text-xs text-muted-foreground truncate block">
                            {app.applicationCode}
                        </code>
                    ) : (
                        <Skeleton className="h-3 w-20" />
                    )}
                    {/* 应用描述 - 固定单行显示，超出省略 */}
                    <div className="mt-1 h-[14px]">
                        {app.applicationDesc ? (
                            <p className="text-[10px] text-muted-foreground truncate">
                                {app.applicationDesc}
                            </p>
                        ) : (
                            <Skeleton className="h-3 w-full" />
                        )}
                    </div>
                </div>
            </div>

            {/* Git/工作流/系统信息 */}
            <div className="space-y-1.5 mb-3 text-xs text-muted-foreground">
                {/* 分支 */}
                <div className="flex items-center gap-1.5">
                    <GitBranch className="h-3 w-3 shrink-0" />
                    {app.sourceBranch ? (
                        <code className="truncate font-mono">{app.sourceBranch}</code>
                    ) : (
                        <span className="text-amber-600 italic font-medium">未配置分支</span>
                    )}
                </div>

            </div>

            {/* 部署统计信息 */}
            <div className="mb-3 pt-2 border-t border-dashed">
                <div className="grid grid-cols-4 gap-1 mb-2 text-xs">
                    {/* 总次数 */}
                    <div className="text-center">
                        {app.deployStatistics ? (
                            <>
                                <div className="flex items-center justify-center gap-0.5">
                                    <TrendingUp className="h-3 w-3 text-muted-foreground" />
                                    <span className="font-semibold">{app.deployStatistics.totalCount ?? 0}</span>
                                </div>
                                <div className="text-[10px] text-muted-foreground">总数</div>
                            </>
                        ) : (
                            <>
                                <Skeleton className="h-4 w-8 mx-auto mb-1" />
                                <Skeleton className="h-3 w-12 mx-auto" />
                            </>
                        )}
                    </div>

                    {/* 成功次数 */}
                    <div className="text-center">
                        {app.deployStatistics ? (
                            <>
                                <div className="flex items-center justify-center gap-0.5">
                                    <CheckCircle2 className="h-3 w-3 text-green-600" />
                                    <span className="font-semibold text-green-600">{app.deployStatistics.successCount ?? 0}</span>
                                </div>
                                <div className="text-[10px] text-muted-foreground">成功</div>
                            </>
                        ) : (
                            <>
                                <Skeleton className="h-4 w-8 mx-auto mb-1" />
                                <Skeleton className="h-3 w-12 mx-auto" />
                            </>
                        )}
                    </div>

                    {/* 失败次数 */}
                    <div className="text-center">
                        {app.deployStatistics ? (
                            <>
                                <div className="flex items-center justify-center gap-0.5">
                                    <XCircle className="h-3 w-3 text-red-600" />
                                    <span className="font-semibold text-red-600">{app.deployStatistics.failedCount ?? 0}</span>
                                </div>
                                <div className="text-[10px] text-muted-foreground">失败</div>
                            </>
                        ) : (
                            <>
                                <Skeleton className="h-4 w-8 mx-auto mb-1" />
                                <Skeleton className="h-3 w-12 mx-auto" />
                            </>
                        )}
                    </div>

                    {/* 运行中次数 */}
                    <div className="text-center">
                        {app.deployStatistics ? (
                            <>
                                <div className="flex items-center justify-center gap-0.5">
                                    <Loader2 className="h-3 w-3 text-blue-600" />
                                    <span className="font-semibold text-blue-600">{app.deployStatistics.runningCount ?? 0}</span>
                                </div>
                                <div className="text-[10px] text-muted-foreground">运行中</div>
                            </>
                        ) : (
                            <>
                                <Skeleton className="h-4 w-8 mx-auto mb-1" />
                                <Skeleton className="h-3 w-12 mx-auto" />
                            </>
                        )}
                    </div>
                </div>

                {/* 最近部署信息 */}
                {app.deployStatistics ? (
                    <div className="flex items-center gap-1 text-[10px] text-muted-foreground flex-wrap">
                        <Clock className="h-3 w-3 shrink-0" />
                        {app.deployStatistics.lastDeployTime ? (
                            <>
                                <span>最近: {formatTime(app.deployStatistics.lastDeployTime)}</span>
                                {app.deployStatistics.lastDeployBy ? (
                                    <span>by {app.deployStatistics.lastDeployBy}</span>
                                ) : (
                                    <Skeleton className="h-3 w-16" />
                                )}
                                {app.deployStatistics.latestStatus ? (() => {
                                    const { icon: StatusIcon, color } = getStatusIcon(app.deployStatistics.latestStatus);
                                    return (
                                        <span className={cn("flex items-center gap-0.5", color)}>
                                            <StatusIcon className={cn("h-3 w-3", app.deployStatistics.latestStatus === 'RUNNING' && "animate-spin")} />
                                            {getStatusText(app.deployStatistics.latestStatus)}
                                        </span>
                                    );
                                })() : (
                                    <Skeleton className="h-3 w-12" />
                                )}
                            </>
                        ) : (
                            <Skeleton className="h-3 w-32" />
                        )}
                    </div>
                ) : (
                    <div className="flex items-center gap-1 text-[10px]">
                        <Clock className="h-3 w-3 shrink-0" />
                        <Skeleton className="h-3 w-32" />
                    </div>
                )}

                {/* 最近部署记录 - 固定显示2条槽位 */}
                <div className="mt-2 space-y-2">
                    <div className="flex items-center gap-1 text-[10px] font-medium text-muted-foreground mb-1">
                        <History className="h-3 w-3" />
                        <span>最近记录</span>
                    </div>
                    {/* 始终显示2条记录槽位，确保卡片高度一致 */}
                    {Array.from({ length: 2 }).map((_, index) => {
                        const record = app.recentDeployRecords?.[index];
                        
                        if (record) {
                            // 显示实际记录 - 固定高度确保一致性
                            const { icon: StatusIcon, color } = getStatusIcon(record.status);
                            return (
                                <div key={record.id} className="p-1.5 rounded-md bg-muted/30 border border-muted/50 h-[68px] flex flex-col justify-between overflow-hidden">
                                    {/* 第一行：状态、编号、部署人 */}
                                    <div className="flex items-center gap-2 flex-wrap min-h-[18px]">
                                        <div className="flex items-center gap-1">
                                            <StatusIcon className={cn("h-3.5 w-3.5 shrink-0", color, record.status === 'RUNNING' && "animate-spin")} />
                                            <span className={cn("text-[10px] font-semibold", color)}>{getStatusText(record.status)}</span>
                                        </div>
                                        <button
                                            onClick={() => handleDeployRecordClick(record)}
                                            className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-background/50 hover:bg-background/80 transition-colors cursor-pointer"
                                            title="点击查看工作流详情"
                                        >
                                            <Hash className="h-2.5 w-2.5 text-muted-foreground" />
                                            <span className="text-[10px] text-muted-foreground font-mono hover:text-primary transition-colors">
                                                {record.id}
                                            </span>
                                        </button>
                                        {record.deployBy && (
                                            <div className="flex items-center gap-1">
                                                <User className="h-2.5 w-2.5 text-muted-foreground" />
                                                <span className="text-[10px] text-muted-foreground">{record.deployBy}</span>
                                            </div>
                                        )}
                                    </div>
                                    
                                    {/* 第二行：时间信息（一行显示） */}
                                    <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground flex-nowrap overflow-hidden min-h-[16px]">
                                        {(record.startTime || record.endTime || record.duration) ? (
                                            <>
                                                <Clock className="h-2.5 w-2.5 shrink-0" />
                                                <div className="flex items-center gap-1 flex-nowrap min-w-0">
                                                    {record.startTime && (
                                                        <span className="whitespace-nowrap">{formatTime(record.startTime)}</span>
                                                    )}
                                                    {record.endTime && (
                                                        <>
                                                            <span className="px-0.5 shrink-0">→</span>
                                                            <span className="whitespace-nowrap">{formatTime(record.endTime)}</span>
                                                        </>
                                                    )}
                                                    {record.duration && (
                                                        <>
                                                            <span className="px-0.5 text-muted-foreground/50 shrink-0">•</span>
                                                            <span className="font-medium whitespace-nowrap">{formatDuration(record.duration)}</span>
                                                        </>
                                                    )}
                                                </div>
                                            </>
                                        ) : (
                                            <span className="text-muted-foreground/50">-</span>
                                        )}
                                    </div>
                                    
                                    {/* 第三行：备注（固定高度，超出截断） */}
                                    <div className="flex items-center gap-1 text-[10px] text-muted-foreground pt-0.5 border-t border-muted/30 min-h-[18px]">
                                        {record.deployRemark ? (
                                            <>
                                                <FileText className="h-2.5 w-2.5 shrink-0" />
                                                <span className="truncate">{record.deployRemark}</span>
                                            </>
                                        ) : (
                                            <span className="text-muted-foreground/50">-</span>
                                        )}
                                    </div>
                                </div>
                            );
                        } else {
                            // 显示骨架屏占位 - 固定高度与实际记录一致
                            return (
                                <div key={`skeleton-${index}`} className="p-1.5 rounded-md bg-muted/30 border border-muted/50 h-[68px] flex flex-col justify-between">
                                    {/* 第一行：状态、编号、部署人 */}
                                    <div className="flex items-center gap-2 min-h-[18px]">
                                        <Skeleton className="h-3.5 w-16" />
                                        <Skeleton className="h-4 w-12" />
                                        <Skeleton className="h-3.5 w-12 ml-auto" />
                                    </div>
                                    {/* 第二行：时间信息 */}
                                    <div className="min-h-[16px]">
                                        <Skeleton className="h-3 w-32" />
                                    </div>
                                    {/* 第三行：备注 */}
                                    <div className="min-h-[18px] pt-0.5 border-t border-muted/30">
                                        <Skeleton className="h-3 w-24" />
                                    </div>
                                </div>
                            );
                        }
                    })}
                </div>
            </div>

            {/* 部署按钮 */}
            <TooltipProvider>
                <Tooltip>
                    <TooltipTrigger asChild>
                        <div className="w-full">
                            <Button
                                onClick={() => setDeployDialogOpen(true)}
                                disabled={!environment.enabled || !environment.canDeploy || isDeploying || app.isDeploying}
                                size="sm"
                                className={cn(
                                    'w-full text-xs h-8',
                                    environment.requiresApproval && 'bg-amber-600 hover:bg-amber-700'
                                )}
                            >
                                {(isDeploying || app.isDeploying) ? (
                                    <>
                                        <Loader2 className="h-3 w-3 mr-1 animate-spin" />
                                        部署中
                                    </>
                                ) : (
                                    <>
                                        <Rocket className="h-3 w-3 mr-1" />
                                        {environment.requiresApproval ? '申请部署' : '立即部署'}
                                    </>
                                )}
                            </Button>
                        </div>
                    </TooltipTrigger>
                    {!environment.canDeploy && (
                        <TooltipContent>
                            <p>您没有部署权限</p>
                        </TooltipContent>
                    )}
                </Tooltip>
            </TooltipProvider>

            {/* 部署表单对话框 */}
            <DeploymentFormModal
                open={deployDialogOpen}
                onClose={() => setDeployDialogOpen(false)}
                app={app}
                environment={environment}
                teamId={teamId}
                onSuccess={() => {
                    // 部署成功后，触发父组件的 onDeploy 回调（用于刷新数据）
                    onDeploy(app, '');
                }}
            />

            {/* 部署流程图模态框 */}
            <DeployFlowGraphModal
                open={flowModalOpen}
                deployRecordId={selectedDeployRecordId}
                onOpenChange={setFlowModalOpen}
            />
        </div>
    );
};

