import { useState, useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  Play, Plus, Search, GitBranch, Clock, CheckCircle, XCircle,
  Loader2, StopCircle, FileText, Trash2, ChevronDown,
  ChevronRight, Rocket, Box, Workflow, Code, Container, ShieldCheck, Tag,
  Globe, ArrowRight, RotateCcw, Layers, History, Server, Network,
} from 'lucide-react';
import { pipelineApi, deployApi } from '@/services/api';
import http from '@/services/http';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { toast } from 'sonner';
import { nameToCode, getStatusBadge } from './pipeline-helpers';

// ====== Fixed stage order (logical pipeline sequence) ======
const STAGE_DEFS = [
  { key: 'checkout',  label: '代码检出', icon: GitBranch, color: '#6366F1', order: 1, needs: ['repo'], desc: '从 Git 仓库拉取代码' },
  { key: 'build',     label: '构建',     icon: Box,       color: '#F59E0B', order: 2, needs: [],        desc: '编译/打包项目' },
  { key: 'test',      label: '测试',     icon: CheckCircle, color: '#10B981', order: 3, needs: [],        desc: '运行单元/集成测试' },
  { key: 'image',     label: '镜像打包', icon: Container, color: '#06B6D4', order: 4, needs: ['registry'], desc: 'Docker 构建 & 推送' },
  { key: 'deploy',    label: '部署',     icon: Rocket,    color: '#EF4444', order: 5, needs: [],        desc: '部署到目标环境' },
  { key: 'verify',    label: '验证',     icon: ShieldCheck, color: '#3B82F6', order: 6, needs: [],        desc: '部署后健康检查' },
].sort((a, b) => a.order - b.order);

interface LogEntry { time: string; level: string; message: string; stage: string; }
function fmtDuration(s: number | undefined): string {
  if (!s) return '-'; if (s < 60) return `${s}s`;
  const m = Math.floor(s / 60); const sec = s % 60; return sec > 0 ? `${m}分${sec}秒` : `${m}分`;
}
function parseStages(raw: any): any[] {
  if (!raw) return []; try { const s = typeof raw === 'string' ? JSON.parse(raw) : raw; return Array.isArray(s) ? s : []; } catch { return []; }
}

export function PipelineManager() {
  const [searchQuery, setSearchQuery] = useState('');
  const [pipelines, setPipelines] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [expanded, setExpanded] = useState<Record<number, boolean>>({});
  const [runs, setRuns] = useState<Record<number, any[]>>({});
  const [loadingRuns, setLoadingRuns] = useState<Record<number, boolean>>({});
  const [envFilter, setEnvFilter] = useState<string>('all');
  const [runningRunMap, setRunningRunMap] = useState<Record<number, any>>({});

  // New pipeline dialog (comprehensive)
  const [newOpen, setNewOpen] = useState(false);
  const [newName, setNewName] = useState('');
  const [newJobName, setNewJobName] = useState('');
  const [newDesc, setNewDesc] = useState('');
  const [newSource, setNewSource] = useState('');
  const [newBranch, setNewBranch] = useState('main');
  const [newDockerfile, setNewDockerfile] = useState('');
  const [selectedStages, setSelectedStages] = useState<string[]>(['checkout', 'build', 'image', 'deploy']);
  const [newRepoId, setNewRepoId] = useState<number | string>('');
  const [newRegistryId, setNewRegistryId] = useState<number | string>('');
  const [newDeployMode, setNewDeployMode] = useState('branch');
  const [newDeployTarget, setNewDeployTarget] = useState('ssh');
  const [newEnvironmentId, setNewEnvironmentId] = useState<number | string>('');
  const [saving, setSaving] = useState(false);

  // Credentials for Git/Docker
  const [gitCredentials, setGitCredentials] = useState<any[]>([]);
  const [dockerCredentials, setDockerCredentials] = useState<any[]>([]);
  const [newGitCredentialId, setNewGitCredentialId] = useState<number | string>('');
  const [newRegistryCredentialId, setNewRegistryCredentialId] = useState<number | string>('');

  // Trigger config
  const [newTriggerMode, setNewTriggerMode] = useState('manual');
  const [newWatchBranches, setNewWatchBranches] = useState('');
  const [newExcludeBranch, setNewExcludeBranch] = useState('');
  const [newCronExpr, setNewCronExpr] = useState('');
  const [newWebhookToken, setNewWebhookToken] = useState('');
  // Env vars: [{ key: '', value: '', desc: '' }]
  const [newEnvVars, setNewEnvVars] = useState<{ key: string; value: string; desc: string }[]>([]);
  // Cache paths
  const [newCachePaths, setNewCachePaths] = useState('');

  // Reference data
  const [repos, setRepos] = useState<any[]>([]);
  const [registries, setRegistries] = useState<any[]>([]);
  const [environments, setEnvironments] = useState<any[]>([]);
  const [servers, setServers] = useState<any[]>([]);
  const [clusters, setClusters] = useState<any[]>([]);

  // Log dialog
  const [logOpen, setLogOpen] = useState(false);
  const [logRun, setLogRun] = useState<any>(null);
  const [logs, setLogs] = useState<LogEntry[]>([]);

  const _confirm = useConfirm();
  const navigate = useNavigate();

  const ENV_TYPES = [
    { key: 'all', label: '全部', icon: Layers, color: '#6B7280' },
    { key: 'production', label: '生产', icon: ShieldCheck, color: '#EF4444' },
    { key: 'testing', label: '测试', icon: CheckCircle, color: '#F59E0B' },
    { key: 'staging', label: '预发布', icon: Globe, color: '#8B5CF6' },
    { key: 'development', label: '开发', icon: Code, color: '#3B82F6' },
  ];

  const loadRefs = useCallback(async () => {
    try {
      const [rR, rReg, rEnv, rCred] = await Promise.all([
        deployApi.getRepos().catch(() => ({ list: [] })),
        deployApi.getRegistries().catch(() => ({ list: [] })),
        deployApi.getEnvironments().catch(() => ({ list: [] })),
        http.get('/credentials', { page_size: 100 }).catch(() => ({ list: [] })),
      ] as const);
      setRepos(Array.isArray((rR as any)?.list) ? (rR as any).list : []);
      setRegistries(Array.isArray((rReg as any)?.list) ? (rReg as any).list : []);
      setEnvironments(Array.isArray((rEnv as any)?.list) ? (rEnv as any).list : []);
      const allCreds: any[] = (rCred as any)?.list || [];
      setGitCredentials(allCreds.filter((c: any) => c.secret_type === 'api'));
      setDockerCredentials(allCreds.filter((c: any) => c.secret_type === 'docker'));
    } catch { /* silent */ }
  }, []);

  const loadPipelines = useCallback(async () => {
    setLoading(true);
    try {
      const data = await pipelineApi.getPipelines();
      setPipelines(Array.isArray(data?.list) ? data.list : []);
    } catch { toast.error('获取流水线列表失败'); }
    finally { setLoading(false); }
  }, []);

  useEffect(() => { loadRefs(); loadPipelines(); }, []);

  useEffect(() => {
    pipelines.forEach(p => {
      if (p.last_status === 'running' && !runningRunMap[p.id]) {
        pipelineApi.getRuns(p.id).then((res: any) => {
          const runsList = res?.list || [];
          const running = runsList.find((r: any) => r.status === 'running' || r.status === 'pending');
          if (running) setRunningRunMap(prev => ({ ...prev, [p.id]: running }));
        }).catch(() => {});
      }
    });
  }, [pipelines]);

  const loadRuns = async (pipelineId: number, code: string) => {
    setLoadingRuns(p => ({ ...p, [pipelineId]: true }));
    try { const res = await pipelineApi.getRuns(code); setRuns(p => ({ ...p, [pipelineId]: (res as any)?.list || [] })); }
    catch { setRuns(p => ({ ...p, [pipelineId]: [] })); }
    finally { setLoadingRuns(p => ({ ...p, [pipelineId]: false })); }
  };
  const toggleExpand = (pipelineId: number, code: string) => {
    if (!expanded[pipelineId]) { loadRuns(pipelineId, code); setExpanded(p => ({ ...p, [pipelineId]: true })); }
    else setExpanded(p => ({ ...p, [pipelineId]: false }));
  };

  const handleCreate = async () => {
    if (!newName.trim()) { toast.error('请输入流水线名称'); return; }
    if (selectedStages.includes('checkout') && !newSource.trim()) { toast.error('代码检出阶段需要填写 Git URL'); return; }
    if (selectedStages.includes('image') && !newRegistryCredentialId) { toast.error('镜像打包阶段需要关联 Docker 凭证'); return; }
    setSaving(true);
    try {
      const stageNames = selectedStages.map(k => STAGE_DEFS.find(s => s.key === k)?.label || k);
      const stages = JSON.stringify(stageNames.map((name, i) => ({
        id: `stage-${i + 1}`, name, type: selectedStages[i] || 'custom', tasks: [],
      })));
      await pipelineApi.createPipeline({
        name: newName, code: nameToCode(newName),
        job_name: newJobName || undefined,
        description: newDesc, source: newSource, branch: newBranch,
        dockerfile: newDockerfile, type: 'deploy', stages,
        deploy_mode: newDeployMode, deploy_target: newDeployTarget,
        environment_id: newEnvironmentId ? Number(newEnvironmentId) : null,
        repo_id: null,
        registry_id: null,
        // 凭证关联
        git_credential_id: newGitCredentialId ? Number(newGitCredentialId) : null,
        registry_credential_id: newRegistryCredentialId ? Number(newRegistryCredentialId) : null,
        // 触发配置
        trigger_mode: newTriggerMode,
        watch_branches: newWatchBranches || undefined,
        exclude_branch: newExcludeBranch || undefined,
        cron_expr: newCronExpr || undefined,
        webhook_token: newWebhookToken || undefined,
        // 环境变量
        variables: newEnvVars.length > 0 ? JSON.stringify(newEnvVars) : undefined,
        // 缓存路径
        cache_paths: newCachePaths || undefined,
      });
      toast.success('流水线已创建');
      setNewOpen(false); resetForm();
      loadPipelines();
    } catch { toast.error('创建失败'); }
    finally { setSaving(false); }
  };
  const resetForm = () => {
    setNewName(''); setNewJobName(''); setNewDesc(''); setNewSource(''); setNewBranch('main');
    setNewDockerfile(''); setSelectedStages(['checkout', 'build', 'image', 'deploy']);
    setNewRepoId(''); setNewRegistryId(''); setNewDeployMode('branch'); setNewDeployTarget('ssh'); setNewEnvironmentId('');
    setNewGitCredentialId(''); setNewRegistryCredentialId('');
    setNewTriggerMode('manual'); setNewWatchBranches(''); setNewExcludeBranch('');
    setNewCronExpr(''); setNewWebhookToken(''); setNewEnvVars([]); setNewCachePaths('');
  };

  const handleTrigger = async (pipelineId: number, code: string) => {
    try { await pipelineApi.triggerPipeline(code); toast.success('已触发'); loadRuns(pipelineId, code); loadPipelines(); }
    catch { toast.error('触发失败'); }
  };
  const handleStop = async (pipelineId: number, code: string, runId: number | string) => {
    const ok = await _confirm({ title: '停止运行', description: '确定要停止此运行吗？', variant: 'destructive' });
    if (!ok) return;
    try { await pipelineApi.stopRun(code, runId); toast.success('已停止'); loadRuns(pipelineId, code); setRunningRunMap(prev => { const n = { ...prev }; delete n[pipelineId]; return n; }); }
    catch { toast.error('停止失败'); }
  };
  const handleStopRunning = async (pipelineId: number, code: string) => {
    const runningRun = runningRunMap[pipelineId];
    if (!runningRun) {
      try {
        const res: any = await pipelineApi.getRuns(code);
        const running = (res?.list || []).find((r: any) => r.status === 'running' || r.status === 'pending');
        if (running) await handleStop(pipelineId, code, running.id);
        else toast.error('未找到运行中的任务');
      } catch { toast.error('停止失败'); }
      return;
    }
    await handleStop(pipelineId, code, runningRun.id);
  };
  const handleViewLog = async (code: string, run: any) => {
    setLogRun(run); setLogOpen(true);
    try { const data = await pipelineApi.getRunLog(code, run.id) as any; setLogs(data?.logs || []); }
    catch { setLogs([]); }
  };
  const handleDelete = async (pipeline: any) => {
    const ok = await _confirm({ title: '删除流水线', description: `确定删除「${pipeline.name}」？`, variant: 'destructive' });
    if (!ok) return;
    try { await pipelineApi.deletePipeline(pipeline.code); toast.success('已删除'); loadPipelines(); }
    catch { toast.error('删除失败'); }
  };

  const filtered = pipelines.filter(p => {
    const matchSearch = (p.name || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
      (p.description || '').toLowerCase().includes(searchQuery.toLowerCase());
    const matchEnv = envFilter === 'all' || (p.environment?.type || '') === envFilter;
    return matchSearch && matchEnv;
  });
  const stats = {
    total: pipelines.length, running: pipelines.filter(p => p.last_status === 'running').length,
    success: pipelines.filter(p => p.last_status === 'success').length,
    failed: pipelines.filter(p => p.last_status === 'failed').length,
  };

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">流水线</h1>
          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">CI/CD 构建 · 部署 · 发布一体化</p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={loadPipelines}>
            <Clock className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />刷新
          </Button>
          <Button onClick={() => setNewOpen(true)}><Plus className="h-4 w-4 mr-2" />新建流水线</Button>
        </div>
      </div>

      <div className="grid grid-cols-4 gap-4">
        {[
          { label: '流水线总数', val: stats.total, icon: Workflow, color: '#3B82F6' },
          { label: '运行中', val: stats.running, icon: Loader2, color: '#3B82F6' },
          { label: '成功', val: stats.success, icon: CheckCircle, color: '#10B981' },
          { label: '失败', val: stats.failed, icon: XCircle, color: '#EF4444' },
        ].map((s, i) => (
          <Card key={i} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
            <CardContent className="p-4 flex items-center justify-between">
              <div><p className="text-[var(--dg-text-secondary)] text-sm">{s.label}</p><p className="text-2xl font-bold text-[var(--dg-text-primary)]">{s.val}</p></div>
              <div className="w-10 h-10 rounded-lg flex items-center justify-center" style={{ backgroundColor: s.color + '20' }}><s.icon className="h-5 w-5" style={{ color: s.color }} /></div>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="flex items-center gap-4">
        <div className="relative max-w-md flex-1">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-secondary)]" />
          <Input placeholder="搜索流水线..." value={searchQuery} onChange={e => setSearchQuery(e.target.value)}
            className="pl-10 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
        </div>
        <div className="flex items-center gap-1 bg-[var(--dg-bg-secondary)] rounded-lg p-1 border border-[var(--dg-border)]">
          {ENV_TYPES.map(et => {
            const active = envFilter === et.key;
            const Icon = et.icon;
            return (
              <button key={et.key} onClick={() => setEnvFilter(et.key)}
                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
                  active ? 'text-white shadow-sm' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'}`}
                style={active ? { backgroundColor: et.color } : {}}>
                <Icon className="h-3.5 w-3.5" />{et.label}
              </button>
            );
          })}
        </div>
      </div>

      {loading ? (
        <div className="flex items-center justify-center py-12"><Loader2 className="h-6 w-6 text-[var(--dg-text-secondary)] animate-spin" /></div>
      ) : filtered.length === 0 ? (
        <div className="text-center py-16 text-[var(--dg-text-secondary)]">
          <Workflow className="h-10 w-10 mx-auto mb-3 opacity-30" />
          <p className="text-sm">暂无流水线</p>
          <Button variant="outline" className="mt-4" onClick={() => setNewOpen(true)}><Plus className="h-4 w-4 mr-1" />创建第一个流水线</Button>
        </div>
      ) : (
        <div className="space-y-3">
          {filtered.map(pipeline => {
            const stages = parseStages(pipeline.stages);
            const pipelineRuns = runs[pipeline.id] || [];
            const isExpanded = expanded[pipeline.id];
            const isLoadingRuns = loadingRuns[pipeline.id];
            const repo = pipeline.repo; const registry = pipeline.registry;
            return (
              <Card key={pipeline.id} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] overflow-hidden">
                <CardContent className="p-0">
                  <div className="px-4 py-3">
                    <div className="flex items-start justify-between">
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 flex-wrap">
                          <h3 className="font-semibold text-[var(--dg-text-primary)]">{pipeline.name}</h3>
                          {getStatusBadge(pipeline.last_status)}
                          <Badge variant="outline" className="text-xs text-[var(--dg-text-secondary)] border-[var(--dg-border)]">
                            {pipeline.run_count > 0 ? `运行 ${pipeline.run_count} 次` : '未执行'}
                          </Badge>
                          {pipeline.job_name && <Badge variant="secondary" className="text-xs font-mono opacity-60">{pipeline.job_name}</Badge>}
                          {pipeline.environment && <Badge style={{backgroundColor: pipeline.environment.color + '20', color: pipeline.environment.color}} className="text-xs">{pipeline.environment.display_name}</Badge>}
                        </div>
                        <p className="text-xs text-[var(--dg-text-secondary)] mt-1 line-clamp-1">{pipeline.description || '暂无描述'}</p>
                        <div className="flex items-center gap-3 mt-1 text-xs text-[var(--dg-text-secondary)] opacity-60">
                          <span className="flex items-center gap-1"><GitBranch className="h-3 w-3" />{pipeline.deploy_mode === 'tag' ? 'Tag发版' : pipeline.branch || 'main'}</span>
                          <span className="flex items-center gap-1">{(pipeline.deploy_target || 'ssh') === 'k8s' ? <><Network className="h-3 w-3" />K8s</> : <><Server className="h-3 w-3" />SSH</>}</span>
                          {repo && <span className="flex items-center gap-1"><Globe className="h-3 w-3" />{repo.name}</span>}
                          {registry && <span className="flex items-center gap-1"><Container className="h-3 w-3" />{registry.name}</span>}
                          {pipeline.last_run_at && <span><Clock className="h-3 w-3 inline mr-0.5" />{new Date(pipeline.last_run_at).toLocaleString('zh-CN')}</span>}
                        </div>
                      </div>
                      <div className="flex items-center gap-1 ml-4 shrink-0">
                        {pipeline.last_status === 'running' ? (
                          <Button variant="destructive" size="sm" className="h-8" onClick={() => handleStopRunning(pipeline.id, pipeline.code)}>
                            <StopCircle className="h-3.5 w-3.5 mr-1" />停止
                          </Button>
                        ) : (
                          <Button variant="default" size="sm" className="h-8" onClick={() => handleTrigger(pipeline.id, pipeline.code)}>
                            <Play className="h-3.5 w-3.5 mr-1" />执行
                          </Button>
                        )}
                        <Button variant="outline" size="sm" className="h-8" onClick={() => navigate(`/pipelines/${pipeline.code || pipeline.id}`)}>编辑</Button>
                        <Button variant="outline" size="sm" className="h-8" onClick={() => navigate(`/pipelines/${pipeline.code || pipeline.id}/runs`)}>
                          <History className="h-3.5 w-3.5 mr-1" />记录</Button>
                        <Button variant="ghost" size="sm" className="h-8" onClick={() => toggleExpand(pipeline.id, pipeline.code)}>
                          {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                        </Button>
                        <Button variant="ghost" size="icon" className="h-8 w-8 text-red-500" onClick={() => handleDelete(pipeline)}><Trash2 className="h-4 w-4" /></Button>
                      </div>
                    </div>
                    {stages.length > 0 && (
                      <div className="flex items-center gap-1 mt-3 flex-wrap">
                        {stages.map((s: any, i: number) => {
                          const def = STAGE_DEFS.find(d => d.label === s.name);
                          const color = def?.color || '#6B7280';
                          const Icon = def?.icon || Tag;
                          return (
                            <div key={i} className="flex items-center">
                              <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs"
                                style={{ borderColor: color + '40', backgroundColor: color + '15', color: color }}>
                                <Icon className="h-3 w-3" />{s.name}
                              </div>
                              {i < stages.length - 1 && <ArrowRight className="h-3 w-3 text-[var(--dg-border)] mx-0.5" />}
                            </div>
                          );
                        })}
                      </div>
                    )}
                  </div>
                  {isExpanded && (
                    <div className="border-t border-[var(--dg-border)]">
                      {isLoadingRuns ? (
                        <div className="flex items-center justify-center py-6"><Loader2 className="h-5 w-5 animate-spin text-[var(--dg-text-secondary)]" /></div>
                      ) : pipelineRuns.length === 0 ? (
                        <div className="py-6 text-center text-[var(--dg-text-secondary)] text-sm">暂无执行记录</div>
                      ) : (
                        <table className="w-full text-sm">
                          <thead className="border-b border-[var(--dg-border)]"><tr className="bg-[var(--dg-bg-tertiary)]">
                            <th className="px-4 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">#</th>
                            <th className="px-4 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">状态</th>
                            <th className="px-4 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">触发人</th>
                            <th className="px-4 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">耗时</th>
                            <th className="px-4 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">时间</th>
                            <th className="px-4 py-2 text-right text-xs font-medium text-[var(--dg-text-secondary)]">操作</th>
                          </tr></thead>
                          <tbody>
                            {pipelineRuns.map((r: any) => (
                              <tr key={r.id} className="border-b border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/50">
                                <td className="px-4 py-2 font-medium text-[var(--dg-text-primary)]">#{r.build_number || r.id}</td>
                                <td className="px-4 py-2">
                                  {r.status === 'success' ? <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30 text-[11px]"><CheckCircle className="h-3 w-3 mr-0.5" />成功</Badge> :
                                   r.status === 'failed' ? <Badge className="bg-red-500/20 text-red-400 border-red-500/30 text-[11px]"><XCircle className="h-3 w-3 mr-0.5" />失败</Badge> :
                                   r.status === 'running' ? <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30 text-[11px]"><Loader2 className="h-3 w-3 animate-spin mr-0.5" />执行中</Badge> :
                                   r.status === 'cancelled' ? <Badge className="bg-yellow-500/20 text-yellow-400 border-yellow-500/30 text-[11px]"><StopCircle className="h-3 w-3 mr-0.5" />已停止</Badge> :
                                   <Badge variant="secondary" className="text-[11px]">{r.status}</Badge>}
                                </td>
                                <td className="px-4 py-2 text-[var(--dg-text-secondary)] text-xs">{r.triggered_by || 'admin'}</td>
                                <td className="px-4 py-2 text-[var(--dg-text-secondary)] text-xs">{fmtDuration(r.duration)}</td>
                                <td className="px-4 py-2 text-[var(--dg-text-secondary)] text-xs">{r.created_at ? new Date(r.created_at).toLocaleString('zh-CN') : '-'}</td>
                                <td className="px-4 py-2 text-right">
                                  <div className="flex items-center justify-end gap-1">
                                    <Button variant="ghost" size="sm" className="h-7 text-xs text-blue-400 hover:text-blue-300" onClick={() => handleViewLog(pipeline.code, r)}><FileText className="h-3.5 w-3.5 mr-1" />日志</Button>
                                    {(r.status === 'running' || r.status === 'pending') && (
                                      <Button variant="ghost" size="sm" className="h-7 text-xs text-red-400 hover:text-red-300" onClick={() => handleStop(pipeline.id, pipeline.code, r.id)}><StopCircle className="h-3.5 w-3.5 mr-1" />停止</Button>
                                    )}
                                  </div>
                                </td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      )}
                    </div>
                  )}
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}

      {/* ══════════ New Pipeline Dialog (Redesigned) ══════════ */}
      <Dialog open={newOpen} onOpenChange={setNewOpen}>
        <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
          <DialogHeader><DialogTitle className="flex items-center gap-2"><Rocket className="h-5 w-5" />新建流水线</DialogTitle></DialogHeader>
          <div className="space-y-4">
            {/* 基本信息 */}
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1">
                <Label>名称 <span className="text-red-400">*</span></Label>
                <Input value={newName} onChange={e => setNewName(e.target.value)} placeholder="例如: demo-jar 后端部署" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9" />
              </div>
              <div className="space-y-1">
                <Label>Job 名称 <span className="text-xs text-[var(--dg-text-secondary)]">(Webhook URL)</span></Label>
                <Input value={newJobName} onChange={e => setNewJobName(e.target.value)} placeholder="cex-admin-server" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9 font-mono text-sm" />
                {newJobName && <p className="text-[10px] text-[var(--dg-text-secondary)] opacity-60">Webhook: POST .../webhook/job/<b>{newJobName}</b></p>}
              </div>
            </div>
            <div className="space-y-1"><Label>描述</Label><Textarea value={newDesc} onChange={e => setNewDesc(e.target.value)} placeholder="流水线描述..." rows={2} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]" /></div>

            {/* 部署模式 & 部署目标 */}
            <div className="grid grid-cols-3 gap-3">
              <div className="space-y-1">
                <Label>部署模式</Label>
                <div className="flex gap-1 bg-[var(--dg-bg-secondary)] rounded-lg p-1 border border-[var(--dg-border)]">
                  {[
                    { key: 'branch', label: '分支', icon: GitBranch },
                    { key: 'tag', label: 'Tag 发版', icon: Tag },
                  ].map(m => {
                    const active = newDeployMode === m.key;
                    return (
                      <button key={m.key} onClick={() => setNewDeployMode(m.key)}
                        className={`flex-1 flex items-center justify-center gap-1 px-2 py-1.5 rounded-md text-xs font-medium transition-all ${
                          active ? 'bg-blue-500 text-white' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'}`}>
                        <m.icon className="h-3.5 w-3.5" />{m.label}
                      </button>
                    );
                  })}
                </div>
              </div>
              <div className="space-y-1">
                <Label>部署目标</Label>
                <div className="flex gap-1 bg-[var(--dg-bg-secondary)] rounded-lg p-1 border border-[var(--dg-border)]">
                  {[
                    { key: 'ssh', label: 'SSH 主机', icon: Server },
                    { key: 'k8s', label: 'K8s 集群', icon: Network },
                  ].map(t => {
                    const active = newDeployTarget === t.key;
                    return (
                      <button key={t.key} onClick={() => setNewDeployTarget(t.key)}
                        className={`flex-1 flex items-center justify-center gap-1 px-2 py-1.5 rounded-md text-xs font-medium transition-all ${
                          active ? 'bg-green-500 text-white' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'}`}>
                        <t.icon className="h-3.5 w-3.5" />{t.label}
                      </button>
                    );
                  })}
                </div>
              </div>
              <div className="space-y-1">
                <Label>环境分组</Label>
                <Select value={String(newEnvironmentId)} onValueChange={v => setNewEnvironmentId(v === '__none' ? '' : v)}>
                  <SelectTrigger className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9"><SelectValue placeholder="选择环境" /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="__none">不指定</SelectItem>
                    {environments.map(env => (
                      <SelectItem key={env.id} value={String(env.id)}>
                        <span className="flex items-center gap-1.5">
                          <span className="w-2 h-2 rounded-full inline-block" style={{ backgroundColor: env.color }} />
                          {env.display_name}
                        </span>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            {/* Git 仓库 & 镜像仓库 (手动输入 + 凭证关联) */}
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1">
                <Label>Git URL {selectedStages.includes('checkout') && <span className="text-red-400">*</span>}</Label>
                <Input value={newSource} onChange={e => setNewSource(e.target.value)}
                  placeholder="https://gitee.com/user/repo.git" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9 font-mono text-xs" />
              </div>
              <div className="space-y-1">
                <Label>分支 / Tag</Label>
                <Input value={newBranch} onChange={e => setNewBranch(e.target.value)}
                  placeholder={newDeployMode === 'tag' ? 'v1.0.0' : 'main'} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9" />
              </div>
              <div className="space-y-1">
                <Label>Git 凭证 <span className="text-xs text-[var(--dg-text-secondary)] opacity-60">(API Token)</span></Label>
                <Select value={String(newGitCredentialId)} onValueChange={v => setNewGitCredentialId(v === '__none' ? '' : v)}>
                  <SelectTrigger className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9"><SelectValue placeholder="选择凭证" /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="__none">不关联</SelectItem>
                    {gitCredentials.map(c => (
                      <SelectItem key={c.id} value={String(c.id)}>
                        <span className="flex items-center gap-1.5"><Globe className="h-3 w-3 opacity-60" />{c.name} {c.summary && <span className="text-[10px] opacity-50">({c.summary})</span>}</span>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {!newGitCredentialId && selectedStages.includes('checkout') && <p className="text-xs text-amber-400">建议关联凭证</p>}
              </div>
              <div className="space-y-1">
                <Label>镜像仓库凭证 {selectedStages.includes('image') && <span className="text-red-400">*</span>}</Label>
                <Select value={String(newRegistryCredentialId)} onValueChange={v => setNewRegistryCredentialId(v === '__none' ? '' : v)}>
                  <SelectTrigger className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9"><SelectValue placeholder="选择 Docker 凭证" /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="__none">不关联</SelectItem>
                    {dockerCredentials.map(c => (
                      <SelectItem key={c.id} value={String(c.id)}>
                        <span className="flex items-center gap-1.5"><Container className="h-3 w-3 opacity-60" />{c.name} {c.summary && <span className="text-[10px] opacity-50">({c.summary})</span>}</span>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {!newRegistryCredentialId && selectedStages.includes('image') && <p className="text-xs text-amber-400">需要关联 Docker 凭证</p>}
              </div>
            </div>
            {/* 镜像命名提示 */}
            {newRegistryCredentialId && newJobName && (
              <div className="p-2.5 rounded-md bg-blue-500/5 border border-blue-500/20 text-xs text-[var(--dg-text-secondary)]">
                <span className="text-blue-400">镜像命名：</span>
                <code className="text-[var(--dg-text-primary)]">{'{registry}'}/{'{namespace}'}/{'{'}{'{JOB_BASE_NAME}'}{'}'}:{'{'}{'{tag}'}{'}'}</code>
                <span className="ml-2 opacity-60">例：</span>
                <code className="opacity-60">harbor.ast1001.com/test/{newJobName}:latest</code>
              </div>
            )}
            <div className="space-y-1"><Label>Dockerfile 路径</Label><Input value={newDockerfile} onChange={e => setNewDockerfile(e.target.value)} placeholder="jar/Dockerfile" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9 font-mono text-xs" /></div>

            {/* Fixed-order stage selector */}
            <div className="space-y-2">
              <Label>发布流程 <span className="text-xs text-[var(--dg-text-secondary)] opacity-70 ml-1">按顺序选择阶段</span></Label>
              <div className="flex flex-wrap gap-2">
                {STAGE_DEFS.map(def => {
                  const active = selectedStages.includes(def.key);
                  return (
                    <Badge key={def.key}
                      className={`cursor-pointer transition-all text-xs px-3 py-1.5 ${active ? 'border-current' : 'border-[var(--dg-border)] opacity-50 hover:opacity-80'}`}
                      style={active ? { backgroundColor: def.color + '20', color: def.color, borderColor: def.color } : {}}
                      onClick={() => setSelectedStages(active ? selectedStages.filter(t => t !== def.key) : [...selectedStages, def.key])}
                      title={def.desc}>
                      <def.icon className="h-3 w-3 mr-1" />{def.label} {def.needs.includes('repo') ? '🔗' : ''}{def.needs.includes('registry') ? '📦' : ''}
                    </Badge>
                  );
                })}
              </div>
              {selectedStages.length > 0 && (
                <div className="flex items-center gap-1 mt-2 flex-wrap">
                  {selectedStages.map((key, i) => {
                    const def = STAGE_DEFS.find(t => t.key === key)!;
                    return (
                      <div key={i} className="flex items-center">
                        <Badge className="text-[10px] px-2 py-0.5" style={{ backgroundColor: def.color + '20', color: def.color, borderColor: def.color + '40' }}>
                          <def.icon className="h-3 w-3 mr-0.5" />{def.label}
                        </Badge>
                        {i < selectedStages.length - 1 && <ArrowRight className="h-3 w-3 text-[var(--dg-border)] mx-0.5" />}
                      </div>
                    );
                  })}
                </div>
              )}
            </div>

            {/* ══════════ 触发配置 ══════════ */}
            <div className="border-t border-[var(--dg-border)] pt-4">
              <Label className="mb-2 block">触发方式</Label>
              <div className="flex gap-1 bg-[var(--dg-bg-secondary)] rounded-lg p-1 border border-[var(--dg-border)]">
                {[
                  { key: 'manual', label: '手动', desc: '手动触发执行' },
                  { key: 'git_push', label: '代码推送', desc: 'Git Push 自动触发' },
                  { key: 'cron', label: '定时', desc: 'Cron 定时执行' },
                  { key: 'webhook', label: 'Webhook', desc: '外部 Webhook 调用' },
                ].map(t => {
                  const active = newTriggerMode === t.key;
                  return (
                    <button key={t.key} onClick={() => setNewTriggerMode(t.key)}
                      className={`flex-1 flex flex-col items-center gap-0.5 px-2 py-2 rounded-md text-xs font-medium transition-all ${
                        active ? 'bg-blue-500 text-white' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'}`}
                      title={t.desc}>
                      {t.label}
                    </button>
                  );
                })}
              </div>

              {/* Git Push 配置 */}
              {newTriggerMode === 'git_push' && (
                <div className="mt-3 space-y-2 p-3 rounded-md bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]">
                  <div className="space-y-1">
                    <Label className="text-xs">监听分支 <span className="text-[var(--dg-text-secondary)] opacity-60">(逗号分隔，支持 * 通配)</span></Label>
                    <Input value={newWatchBranches} onChange={e => setNewWatchBranches(e.target.value)}
                      placeholder="release/*, main" className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] h-8 font-mono text-xs" />
                  </div>
                  <div className="space-y-1">
                    <Label className="text-xs">排除分支 <span className="text-[var(--dg-text-secondary)] opacity-60">(不触发构建)</span></Label>
                    <Input value={newExcludeBranch} onChange={e => setNewExcludeBranch(e.target.value)}
                      placeholder="wip/*, draft/*" className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] h-8 font-mono text-xs" />
                  </div>
                </div>
              )}

              {/* Cron 配置 */}
              {newTriggerMode === 'cron' && (
                <div className="mt-3 space-y-2 p-3 rounded-md bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]">
                  <div className="space-y-1">
                    <Label className="text-xs">Cron 表达式 <span className="text-[var(--dg-text-secondary)] opacity-60">(标准 5 位)</span></Label>
                    <Input value={newCronExpr} onChange={e => setNewCronExpr(e.target.value)}
                      placeholder="0 2 * * *" className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] h-8 font-mono text-xs" />
                  </div>
                  <div className="flex flex-wrap gap-1.5">
                    {[
                      { expr: '*/5 * * * *', label: '每5分钟' },
                      { expr: '0 * * * *', label: '每小时' },
                      { expr: '0 2 * * *', label: '每天2点' },
                      { expr: '0 0 * * 0', label: '每周日' },
                    ].map(c => (
                      <Badge key={c.expr} variant="outline" className="cursor-pointer text-[10px] hover:bg-blue-500/10"
                        onClick={() => setNewCronExpr(c.expr)}>{c.label}</Badge>
                    ))}
                  </div>
                </div>
              )}

              {/* Webhook 配置 */}
              {newTriggerMode === 'webhook' && (
                <div className="mt-3 space-y-2 p-3 rounded-md bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]">
                  <div className="space-y-1">
                    <Label className="text-xs">Webhook Token <span className="text-[var(--dg-text-secondary)] opacity-60">(签名验证，可选)</span></Label>
                    <Input value={newWebhookToken} onChange={e => setNewWebhookToken(e.target.value)}
                      placeholder="随机字符串" className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] h-8 font-mono text-xs" />
                  </div>
                  <p className="text-[10px] text-[var(--dg-text-secondary)] opacity-60">
                    Webhook URL: <code className="text-[var(--dg-blue)]">POST /api/v1/webhook/pipeline/{'{code}'}</code>
                  </p>
                </div>
              )}
            </div>

            {/* ══════════ 环境变量 ══════════ */}
            <div className="border-t border-[var(--dg-border)] pt-4">
              <div className="flex items-center justify-between mb-2">
                <Label>环境变量 <span className="text-xs text-[var(--dg-text-secondary)] opacity-60">(${'{VAR_NAME}'} 引用)</span></Label>
                <Button variant="ghost" size="sm" className="h-7 text-xs"
                  onClick={() => setNewEnvVars([...newEnvVars, { key: '', value: '', desc: '' }])}>
                  <Plus className="h-3 w-3 mr-1" />添加变量
                </Button>
              </div>
              {newEnvVars.length === 0 ? (
                <p className="text-xs text-[var(--dg-text-muted)] py-2">暂无变量，点击"添加变量"新增</p>
              ) : (
                <div className="space-y-2">
                  {newEnvVars.map((v, i) => (
                    <div key={i} className="grid grid-cols-12 gap-2 items-start p-2 rounded-md bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]">
                      <Input value={v.key} onChange={e => {
                        const nv = [...newEnvVars]; nv[i] = { ...nv[i], key: e.target.value }; setNewEnvVars(nv);
                      }} placeholder="变量名" className="col-span-3 h-8 text-xs font-mono bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]" />
                      <Input value={v.value} onChange={e => {
                        const nv = [...newEnvVars]; nv[i] = { ...nv[i], value: e.target.value }; setNewEnvVars(nv);
                      }} placeholder="变量值" className="col-span-4 h-8 text-xs font-mono bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]" />
                      <Input value={v.desc} onChange={e => {
                        const nv = [...newEnvVars]; nv[i] = { ...nv[i], desc: e.target.value }; setNewEnvVars(nv);
                      }} placeholder="说明" className="col-span-4 h-8 text-xs bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]" />
                      <Button variant="ghost" size="icon" className="col-span-1 h-8 w-8 text-red-400"
                        onClick={() => setNewEnvVars(newEnvVars.filter((_, idx) => idx !== i))}>
                        <Trash2 className="h-3.5 w-3.5" />
                      </Button>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* ══════════ 缓存配置 ══════════ */}
            <div className="border-t border-[var(--dg-border)] pt-4">
              <Label className="mb-2 block">构建缓存 <span className="text-xs text-[var(--dg-text-secondary)] opacity-60">(加速后续构建)</span></Label>
              <Input value={newCachePaths} onChange={e => setNewCachePaths(e.target.value)}
                placeholder="node_modules, .m2, target" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-8 text-xs font-mono" />
              <p className="text-[10px] text-[var(--dg-text-secondary)] opacity-50 mt-1">多个路径用逗号分隔，相同的 Key 会命中已有缓存</p>
            </div>
          </div>
          <div className="flex justify-end gap-2 mt-4 pt-4 border-t border-[var(--dg-border)]">
            <Button variant="outline" onClick={() => setNewOpen(false)}>取消</Button>
            <Button onClick={handleCreate} disabled={saving}>
              {saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Rocket className="h-4 w-4 mr-1" />}
              {saving ? '创建中...' : '创建流水线'}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* Log Dialog */}
      <Dialog open={logOpen} onOpenChange={setLogOpen}>
        <DialogContent className="max-w-3xl max-h-[85vh] overflow-y-auto bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
          <DialogHeader><DialogTitle className="flex items-center gap-2"><FileText className="h-5 w-5" />执行日志 #{logRun?.build_number || logRun?.id}</DialogTitle></DialogHeader>
          <div className="space-y-3">
            <div className="flex flex-wrap gap-3 text-sm text-[var(--dg-text-secondary)]">
              <span>触发方式: {logRun?.triggered_by || 'manual'}</span>
              <span>分支: {logRun?.branch || '-'}</span>
              <span>耗时: {fmtDuration(logRun?.duration)}</span>
            </div>
            <div className="bg-slate-950 rounded-md p-3 max-h-[50vh] overflow-y-auto font-mono text-xs">
              {logs.length === 0 ? <div className="text-slate-500 py-4 text-center">暂无日志</div> :
                logs.map((l: LogEntry, i: number) => (
                  <div key={i} className="flex gap-2 py-0.5">
                    <span className="text-slate-500 shrink-0">[{l.time}]</span>
                    <span className={l.level === 'error' ? 'text-red-400' : l.level === 'warn' ? 'text-yellow-400' : l.level === 'success' ? 'text-green-400' : 'text-slate-300'}>
                      {l.level === 'success' ? '✓' : l.level === 'error' ? '✗' : l.level === 'warn' ? '!' : '>'} {l.message}
                    </span>
                  </div>
                ))}
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}