// 发布详情弹窗（流水线进度 + 构建日志 + 重新部署） // Logan.Li
import { useState } from 'react';
import { cn } from '@/lib/utils';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Rocket, CheckCircle, Loader2, RotateCcw } from 'lucide-react';
import { releaseApi } from '@/api';
import { toast } from 'sonner';
import { PIPELINE_STEPS } from './releaseHelpers';
import type { JsonData } from '@/types/common';

interface ReleaseDetailDialogProps {
  release: JsonData | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSuccess?: () => void;
}

export function ReleaseDetailDialog({ release, open, onOpenChange, onSuccess }: ReleaseDetailDialogProps) {
  const [submitting, setSubmitting] = useState(false);

  // 重新触发部署 // Logan.Li
  const handleRedeploy = async () => {
    if (!release) return;
    try {
      setSubmitting(true);
      await releaseApi.deployRelease(release.id);
      toast.success('已重新触发部署');
      onOpenChange(false);
      onSuccess?.();
    } catch {
      toast.error('重新部署失败');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl bg-slate-900 border-slate-800">
        <DialogHeader>
          <DialogTitle className="text-slate-100 flex items-center gap-2">
            <Rocket className="h-5 w-5 text-blue-400" />
            {release?.app_name}
            <Badge variant="outline" className="border-slate-700 text-slate-400">
              {release?.version}
            </Badge>
          </DialogTitle>
          <DialogDescription className="text-slate-500">
            环境: {release?.environment}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          {/* Pipeline Steps */}
          <div className="space-y-2">
            <h4 className="text-sm font-medium text-slate-300">发布进度</h4>
            <div className="space-y-2">
              {PIPELINE_STEPS.map((step, index) => (
                <div
                  key={index}
                  className={cn(
                    'flex items-center gap-3 p-3 rounded-lg',
                    step.status === 'success' && 'bg-emerald-500/5',
                    step.status === 'running' && 'bg-blue-500/5',
                    step.status === 'pending' && 'bg-slate-800/50'
                  )}
                >
                  <div
                    className={cn(
                      'w-6 h-6 rounded-full flex items-center justify-center',
                      step.status === 'success' && 'bg-emerald-500/20 text-emerald-400',
                      step.status === 'running' && 'bg-blue-500/20 text-blue-400',
                      step.status === 'pending' && 'bg-slate-700 text-slate-500'
                    )}
                  >
                    {step.status === 'success' ? (
                      <CheckCircle className="h-4 w-4" />
                    ) : step.status === 'running' ? (
                      <Loader2 className="h-4 w-4 animate-spin" />
                    ) : (
                      <span className="text-xs">{index + 1}</span>
                    )}
                  </div>
                  <span className="flex-1 text-sm text-slate-200">{step.name}</span>
                  <span className="text-sm text-slate-500">{step.duration}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Build Logs */}
          <div className="space-y-2">
            <h4 className="text-sm font-medium text-slate-300">构建日志</h4>
            <div className="bg-slate-950 rounded-lg p-4 font-mono text-xs text-slate-400 h-48 overflow-auto">
              <div className="space-y-1">
                <p>[10:00:00] Starting pipeline for {release?.app_name}...</p>
                <p>[10:00:15] Checkout code from branch {release?.branch}</p>
                <p>[10:00:30] Installing dependencies...</p>
                <p className="text-emerald-400">[10:01:15] Dependencies installed successfully</p>
                <p>[10:01:15] Running code analysis...</p>
                <p className="text-emerald-400">[10:01:45] Code analysis passed</p>
                <p>[10:01:45] Running unit tests...</p>
                <p className="text-emerald-400">[10:04:00] All tests passed (156/156)</p>
                <p>[10:04:00] Building Docker image...</p>
                <p className="text-emerald-400">[10:07:30] Image built successfully</p>
                <p>[10:07:30] Pushing image to registry...</p>
                <p className="text-emerald-400">[10:08:50] Image pushed successfully</p>
                <p>[10:08:50] Deploying to Kubernetes...</p>
                <p className="text-blue-400">[10:10:00] Deployment in progress...</p>
              </div>
            </div>
          </div>
        </div>

        <DialogFooter>
          {release?.status === 'failed' && (
            <Button
              className="bg-blue-600 hover:bg-blue-700 text-white"
              onClick={handleRedeploy}
              disabled={submitting}
            >
              <RotateCcw className="h-4 w-4 mr-2" />
              重新部署
            </Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}