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 {
    Package,
    GitBranch,
    Rocket,
    Server,
    CheckCircle2,
    XCircle,
    TrendingUp,
    Clock,
    History,
    Loader2,
    User,
    FileText,
    Hash,
} from "lucide-react";
import { formatDuration, formatTime, getStatusIcon, getStatusText } from '../utils/dashboardUtils';
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 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">
                <Package className="h-4 w-4 text-muted-foreground shrink-0 mt-0.5" />
                <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" />
                    )}
                    {app.applicationDesc && (
                        <p className="text-[10px] text-muted-foreground mt-1 line-clamp-2">
                            {app.applicationDesc}
                        </p>
                    )}
                </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.branch ? (
                        <code className="truncate font-mono">{app.branch}</code>
                    ) : (
                        <Skeleton className="h-3 w-16" />
                    )}
                </div>

                {/* 工作流 */}
                <div className="flex items-center gap-1.5">
                    <Rocket className="h-3 w-3 shrink-0" />
                    {app.workflowDefinitionName ? (
                        <span className="truncate">{app.workflowDefinitionName}</span>
                    ) : (
                        <Skeleton className="h-3 w-20" />
                    )}
                </div>

                {/* Jenkins */}
                {app.deploySystemName ? (
                    <TooltipProvider>
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <div className="flex items-center gap-1.5 cursor-default">
                                    <Server className="h-3 w-3 shrink-0" />
                                    <span className="truncate">{app.deploySystemName}</span>
                                </div>
                            </TooltipTrigger>
                            {app.deployJob && (
                                <TooltipContent>
                                    <p>{app.deploySystemName} ({app.deployJob})</p>
                                </TooltipContent>
                            )}
                        </Tooltip>
                    </TooltipProvider>
                ) : (
                    <div className="flex items-center gap-1.5">
                        <Server className="h-3 w-3 shrink-0" />
                        <Skeleton className="h-3 w-24" />
                    </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>
                )}

                {/* 最近部署记录 */}
                <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>
                    {app.recentDeployRecords && app.recentDeployRecords.length > 0 ? (
                        <>
                            {/* 显示实际记录（最多2条） */}
                            {app.recentDeployRecords.slice(0, 2).map((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 space-y-1">
                                        {/* 第一行：状态、编号、部署人 */}
                                        <div className="flex items-center gap-2 flex-wrap">
                                            <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>
                                        
                                        {/* 第二行：时间信息（一行显示） */}
                                        {(record.startTime || record.endTime || record.duration) && (
                                            <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground flex-nowrap overflow-hidden">
                                                <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>
                                            </div>
                                        )}
                                        
                                        {/* 第三行：备注 */}
                                        {record.deployRemark && (
                                            <div className="flex items-center gap-1 text-[10px] text-muted-foreground pt-0.5 border-t border-muted/30">
                                                <FileText className="h-2.5 w-2.5 shrink-0" />
                                                <span className="truncate">{record.deployRemark}</span>
                                            </div>
                                        )}
                                    </div>
                                );
                            })}
                            {/* 如果记录少于2条，用骨架屏补充 */}
                            {app.recentDeployRecords.length < 2 && (
                                Array.from({ length: 2 - app.recentDeployRecords.length }).map((_, index) => (
                                    <div key={`skeleton-${index}`} className="p-1.5 rounded-md bg-muted/30 border border-muted/50 space-y-1">
                                        <div className="flex items-center gap-2">
                                            <Skeleton className="h-3.5 w-16" />
                                            <Skeleton className="h-4 w-12" />
                                            <Skeleton className="h-3.5 w-12 ml-auto" />
                                        </div>
                                        <Skeleton className="h-3 w-32" />
                                    </div>
                                ))
                            )}
                        </>
                    ) : (
                        /* 如果没有记录，显示2条骨架记录 */
                        Array.from({ length: 2 }).map((_, index) => (
                            <div key={`skeleton-${index}`} className="p-1.5 rounded-md bg-muted/30 border border-muted/50 space-y-1">
                                <div className="flex items-center gap-2">
                                    <Skeleton className="h-3.5 w-16" />
                                    <Skeleton className="h-4 w-12" />
                                    <Skeleton className="h-3.5 w-12 ml-auto" />
                                </div>
                                <Skeleton className="h-3 w-32" />
                            </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>
    );
};