import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Progress } from '@/components/ui/progress';
import { ScrollArea } from '@/components/ui/scroll-area';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Play,
  Plus,
  Search,
  Settings,
  GitBranch,
  GitCommit,
  Clock,
  CheckCircle,
  XCircle,
  Loader2,
  MoreHorizontal,
  Edit,
  Trash2,
  Copy,
  Eye,
  Terminal,
  Pause,
  RotateCw,
  History,
  ChevronRight,
  ChevronDown,
  FileCode,
  Workflow,
} from 'lucide-react';
import { pipelines, pipelineExecutions, releases } from '@/mocks/data';

interface PipelineStage {
  id: string;
  name: string;
  status: 'pending' | 'running' | 'success' | 'failed' | 'skipped';
  duration: string;
  logs: string[];
}

interface Pipeline {
  id: string;
  name: string;
  description: string;
  repository: string;
  branch: string;
  stages: PipelineStage[];
  lastRun: string;
  lastStatus: 'success' | 'failed' | 'running' | 'never';
  triggerType: 'manual' | 'auto';
  createdAt: string;
}

const mockPipelines: Pipeline[] = [
  {
    id: 'pipe-001',
    name: 'frontend-build-and-deploy',
    description: '前端项目构建与部署',
    repository: 'https://gitlab.company.com/frontend/app.git',
    branch: 'main',
    stages: [
      { id: 'stage-1', name: '代码检出', status: 'success', duration: '15s', logs: ['检出代码...', '代码检出完成'] },
      { id: 'stage-2', name: '依赖安装', status: 'success', duration: '45s', logs: ['安装依赖...', '依赖安装完成'] },
      { id: 'stage-3', name: '代码检查', status: 'success', duration: '30s', logs: ['执行 ESLint...', '代码检查通过'] },
      { id: 'stage-4', name: '构建打包', status: 'success', duration: '2m 15s', logs: ['开始构建...', '构建完成'] },
      { id: 'stage-5', name: '部署到测试环境', status: 'success', duration: '30s', logs: ['部署中...', '部署完成'] },
    ],
    lastRun: '2025-04-14 10:30:00',
    lastStatus: 'success',
    triggerType: 'auto',
    createdAt: '2025-01-15',
  },
  {
    id: 'pipe-002',
    name: 'backend-api-deploy',
    description: '后端API服务部署',
    repository: 'https://gitlab.company.com/backend/api.git',
    branch: 'develop',
    stages: [
      { id: 'stage-1', name: '代码检出', status: 'success', duration: '12s', logs: [] },
      { id: 'stage-2', name: '单元测试', status: 'success', duration: '1m 30s', logs: [] },
      { id: 'stage-3', name: '构建镜像', status: 'running', duration: '45s', logs: ['构建Docker镜像...'] },
      { id: 'stage-4', name: '推送镜像', status: 'pending', duration: '-', logs: [] },
      { id: 'stage-5', name: '部署到K8s', status: 'pending', duration: '-', logs: [] },
    ],
    lastRun: '2025-04-14 11:15:00',
    lastStatus: 'running',
    triggerType: 'manual',
    createdAt: '2025-02-01',
  },
  {
    id: 'pipe-003',
    name: 'database-migration',
    description: '数据库迁移脚本执行',
    repository: 'https://gitlab.company.com/database/migrations.git',
    branch: 'main',
    stages: [
      { id: 'stage-1', name: '代码检出', status: 'success', duration: '10s', logs: [] },
      { id: 'stage-2', name: '数据库备份', status: 'success', duration: '2m 00s', logs: [] },
      { id: 'stage-3', name: '执行迁移', status: 'failed', duration: '15s', logs: ['迁移失败: 表已存在'] },
    ],
    lastRun: '2025-04-14 09:00:00',
    lastStatus: 'failed',
    triggerType: 'manual',
    createdAt: '2025-01-20',
  },
];

const pipelineTemplates = [
  { id: 'template-1', name: 'Node.js 项目', description: '适用于 Node.js 前端项目', stages: ['代码检出', '依赖安装', '代码检查', '构建打包', '部署'] },
  { id: 'template-2', name: 'Go 项目', description: '适用于 Go 后端项目', stages: ['代码检出', '单元测试', '构建', '构建镜像', '部署'] },
  { id: 'template-3', name: 'Java 项目', description: '适用于 Java Spring Boot 项目', stages: ['代码检出', 'Maven构建', '单元测试', '打包', '部署'] },
  { id: 'template-4', name: 'Python 项目', description: '适用于 Python 项目', stages: ['代码检出', '依赖安装', '代码检查', '测试', '部署'] },
];

export function PipelineManager() {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedPipeline, setSelectedPipeline] = useState<Pipeline | null>(null);
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
  const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false);
  const [isRunDialogOpen, setIsRunDialogOpen] = useState(false);
  const [activeStage, setActiveStage] = useState<string | null>(null);
  const [newPipeline, setNewPipeline] = useState({
    name: '',
    description: '',
    repository: '',
    branch: 'main',
    template: '',
  });

  const filteredPipelines = mockPipelines.filter(
    (p) =>
      p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      p.description.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const getStatusBadge = (status: Pipeline['lastStatus']) => {
    switch (status) {
      case 'success':
        return (
          <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
            <CheckCircle className="h-3 w-3 mr-1" />
            成功
          </Badge>
        );
      case 'failed':
        return (
          <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
            <XCircle className="h-3 w-3 mr-1" />
            失败
          </Badge>
        );
      case 'running':
        return (
          <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10 animate-pulse">
            <Loader2 className="h-3 w-3 mr-1 animate-spin" />
            运行中
          </Badge>
        );
      default:
        return (
          <Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
            从未运行
          </Badge>
        );
    }
  };

  const getStageStatusIcon = (status: PipelineStage['status']) => {
    switch (status) {
      case 'success':
        return <CheckCircle className="h-4 w-4 text-emerald-400" />;
      case 'failed':
        return <XCircle className="h-4 w-4 text-red-400" />;
      case 'running':
        return <Loader2 className="h-4 w-4 text-blue-400 animate-spin" />;
      case 'skipped':
        return <span className="text-slate-500 text-xs">跳过</span>;
      default:
        return <span className="text-slate-600 text-xs">待执行</span>;
    }
  };

  const handleCreatePipeline = () => {
    // Mock create
    setIsCreateDialogOpen(false);
    setNewPipeline({ name: '', description: '', repository: '', branch: 'main', template: '' });
  };

  const handleRunPipeline = () => {
    setIsRunDialogOpen(false);
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-100">流水线管理</h1>
          <p className="text-sm text-slate-500 mt-1">CI/CD 流水线配置与管理</p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" className="border-slate-700 text-slate-300">
            <History className="h-4 w-4 mr-2" />
            执行历史
          </Button>
          <Button className="bg-blue-600 hover:bg-blue-700" onClick={() => setIsCreateDialogOpen(true)}>
            <Plus className="h-4 w-4 mr-2" />
            新建流水线
          </Button>
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-4 gap-4">
        <Card className="bg-slate-800 border-slate-700">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-slate-400 text-sm">流水线总数</p>
                <p className="text-2xl font-bold text-slate-100">{mockPipelines.length}</p>
              </div>
              <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
                <Workflow className="h-5 w-5 text-blue-400" />
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-slate-800 border-slate-700">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-slate-400 text-sm">运行中</p>
                <p className="text-2xl font-bold text-blue-400">
                  {mockPipelines.filter((p) => p.lastStatus === 'running').length}
                </p>
              </div>
              <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
                <Loader2 className="h-5 w-5 text-blue-400" />
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-slate-800 border-slate-700">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-slate-400 text-sm">今日成功</p>
                <p className="text-2xl font-bold text-emerald-400">12</p>
              </div>
              <div className="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center">
                <CheckCircle className="h-5 w-5 text-emerald-400" />
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-slate-800 border-slate-700">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-slate-400 text-sm">今日失败</p>
                <p className="text-2xl font-bold text-red-400">2</p>
              </div>
              <div className="w-10 h-10 rounded-lg bg-red-500/20 flex items-center justify-center">
                <XCircle className="h-5 w-5 text-red-400" />
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Filters */}
      <div className="flex items-center gap-4">
        <div className="relative flex-1 max-w-md">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
          <Input
            placeholder="搜索流水线..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10 bg-slate-800 border-slate-700 text-slate-100"
          />
        </div>
      </div>

      {/* Pipeline List */}
      <div className="space-y-4">
        {filteredPipelines.map((pipeline) => (
          <Card key={pipeline.id} className="bg-slate-800 border-slate-700">
            <CardContent className="p-4">
              <div className="flex items-start justify-between">
                <div className="flex-1">
                  <div className="flex items-center gap-3">
                    <h3 className="font-medium text-slate-100">{pipeline.name}</h3>
                    {getStatusBadge(pipeline.lastStatus)}
                    <Badge variant="outline" className="border-slate-700 text-slate-400">
                      {pipeline.triggerType === 'auto' ? '自动触发' : '手动触发'}
                    </Badge>
                  </div>
                  <p className="text-sm text-slate-400 mt-1">{pipeline.description}</p>
                  <div className="flex items-center gap-4 mt-2 text-xs text-slate-500">
                    <span className="flex items-center gap-1">
                      <GitBranch className="h-3 w-3" />
                      {pipeline.branch}
                    </span>
                    <span className="flex items-center gap-1">
                      <Clock className="h-3 w-3" />
                      上次运行: {pipeline.lastRun}
                    </span>
                  </div>

                  {/* Pipeline Stages */}
                  <div className="mt-4">
                    <div className="flex items-center gap-2">
                      {pipeline.stages.map((stage, index) => (
                        <div key={stage.id} className="flex items-center">
                          <div
                            className={`flex items-center gap-1 px-2 py-1 rounded text-xs ${
                              stage.status === 'success'
                                ? 'bg-emerald-500/20 text-emerald-400'
                                : stage.status === 'failed'
                                ? 'bg-red-500/20 text-red-400'
                                : stage.status === 'running'
                                ? 'bg-blue-500/20 text-blue-400'
                                : 'bg-slate-700 text-slate-400'
                            }`}
                          >
                            {getStageStatusIcon(stage.status)}
                            <span className="ml-1">{stage.name}</span>
                          </div>
                          {index < pipeline.stages.length - 1 && (
                            <ChevronRight className="h-4 w-4 text-slate-600 mx-1" />
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                <div className="flex items-center gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    className="border-emerald-600 text-emerald-400 hover:bg-emerald-600/20"
                    onClick={() => {
                      setSelectedPipeline(pipeline);
                      setIsRunDialogOpen(true);
                    }}
                  >
                    <Play className="h-4 w-4 mr-1" />
                    执行
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8 text-slate-400 hover:text-blue-400"
                    onClick={() => {
                      setSelectedPipeline(pipeline);
                      setIsDetailDialogOpen(true);
                    }}
                  >
                    <Eye className="h-4 w-4" />
                  </Button>
                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400">
                    <Edit className="h-4 w-4" />
                  </Button>
                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-red-400">
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Create Pipeline Dialog */}
      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
        <DialogContent className="max-w-2xl bg-slate-900 border-slate-700 text-slate-100">
          <DialogHeader>
            <DialogTitle>新建流水线</DialogTitle>
            <DialogDescription className="text-slate-500">配置新的 CI/CD 流水线</DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div>
              <Label className="text-slate-300">流水线名称</Label>
              <Input
                value={newPipeline.name}
                onChange={(e) => setNewPipeline({ ...newPipeline, name: e.target.value })}
                placeholder="例如: frontend-build"
                className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
              />
            </div>
            <div>
              <Label className="text-slate-300">描述</Label>
              <Textarea
                value={newPipeline.description}
                onChange={(e) => setNewPipeline({ ...newPipeline, description: e.target.value })}
                placeholder="流水线描述..."
                className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
              />
            </div>
            <div>
              <Label className="text-slate-300">代码仓库</Label>
              <Input
                value={newPipeline.repository}
                onChange={(e) => setNewPipeline({ ...newPipeline, repository: e.target.value })}
                placeholder="https://gitlab.company.com/project/repo.git"
                className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
              />
            </div>
            <div>
              <Label className="text-slate-300">默认分支</Label>
              <Input
                value={newPipeline.branch}
                onChange={(e) => setNewPipeline({ ...newPipeline, branch: e.target.value })}
                placeholder="main"
                className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
              />
            </div>
            <div>
              <Label className="text-slate-300">选择模板</Label>
              <div className="grid grid-cols-2 gap-3 mt-1">
                {pipelineTemplates.map((template) => (
                  <Card
                    key={template.id}
                    className={`cursor-pointer transition-all ${
                      newPipeline.template === template.id
                        ? 'border-blue-500 ring-1 ring-blue-500/30 bg-slate-800'
                        : 'border-slate-700 hover:border-slate-600 bg-slate-800/50'
                    }`}
                    onClick={() => setNewPipeline({ ...newPipeline, template: template.id })}
                  >
                    <CardContent className="p-3">
                      <p className="font-medium text-slate-200">{template.name}</p>
                      <p className="text-xs text-slate-500">{template.description}</p>
                      <div className="flex flex-wrap gap-1 mt-2">
                        {template.stages.slice(0, 3).map((stage) => (
                          <Badge key={stage} variant="secondary" className="bg-slate-700 text-slate-300 text-xs">
                            {stage}
                          </Badge>
                        ))}
                        {template.stages.length > 3 && (
                          <Badge variant="secondary" className="bg-slate-700 text-slate-300 text-xs">
                            +{template.stages.length - 3}
                          </Badge>
                        )}
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)} className="border-slate-700 text-slate-300">
              取消
            </Button>
            <Button className="bg-blue-600 hover:bg-blue-700" onClick={handleCreatePipeline}>
              创建流水线
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Pipeline Detail Dialog */}
      <Dialog open={isDetailDialogOpen} onOpenChange={setIsDetailDialogOpen}>
        <DialogContent className="max-w-4xl bg-slate-900 border-slate-700 text-slate-100">
          <DialogHeader>
            <DialogTitle>{selectedPipeline?.name}</DialogTitle>
            <DialogDescription className="text-slate-500">{selectedPipeline?.description}</DialogDescription>
          </DialogHeader>
          {selectedPipeline && (
            <div className="space-y-4">
              <Tabs defaultValue="stages">
                <TabsList className="bg-slate-800 border border-slate-700">
                  <TabsTrigger value="stages" className="data-[state=active]:bg-slate-700">
                    执行阶段
                  </TabsTrigger>
                  <TabsTrigger value="config" className="data-[state=active]:bg-slate-700">
                    配置
                  </TabsTrigger>
                  <TabsTrigger value="history" className="data-[state=active]:bg-slate-700">
                    历史记录
                  </TabsTrigger>
                </TabsList>
                <TabsContent value="stages" className="mt-4">
                  <div className="space-y-2">
                    {selectedPipeline.stages.map((stage, index) => (
                      <div
                        key={stage.id}
                        className={`p-3 rounded-lg border cursor-pointer transition-all ${
                          activeStage === stage.id
                            ? 'border-blue-500 bg-blue-500/10'
                            : 'border-slate-700 hover:border-slate-600 bg-slate-800/50'
                        }`}
                        onClick={() => setActiveStage(activeStage === stage.id ? null : stage.id)}
                      >
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-3">
                            <span className="text-slate-500 w-6">{index + 1}</span>
                            {getStageStatusIcon(stage.status)}
                            <span className="text-slate-200">{stage.name}</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <span className="text-xs text-slate-500">{stage.duration}</span>
                            <ChevronDown
                              className={`h-4 w-4 text-slate-500 transition-transform ${
                                activeStage === stage.id ? 'rotate-180' : ''
                              }`}
                            />
                          </div>
                        </div>
                        {activeStage === stage.id && stage.logs.length > 0 && (
                          <div className="mt-3 p-3 bg-slate-900 rounded font-mono text-xs text-slate-400">
                            {stage.logs.map((log, i) => (
                              <div key={i}>{log}</div>
                            ))}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </TabsContent>
                <TabsContent value="config" className="mt-4">
                  <div className="space-y-4">
                    <div>
                      <Label className="text-slate-400">代码仓库</Label>
                      <p className="text-slate-200">{selectedPipeline.repository}</p>
                    </div>
                    <div>
                      <Label className="text-slate-400">默认分支</Label>
                      <p className="text-slate-200">{selectedPipeline.branch}</p>
                    </div>
                    <div>
                      <Label className="text-slate-400">触发方式</Label>
                      <p className="text-slate-200">
                        {selectedPipeline.triggerType === 'auto' ? '自动触发' : '手动触发'}
                      </p>
                    </div>
                  </div>
                </TabsContent>
                <TabsContent value="history" className="mt-4">
                  <div className="text-slate-500 text-center py-8">历史执行记录将在这里显示</div>
                </TabsContent>
              </Tabs>
            </div>
          )}
        </DialogContent>
      </Dialog>

      {/* Run Pipeline Dialog */}
      <Dialog open={isRunDialogOpen} onOpenChange={setIsRunDialogOpen}>
        <DialogContent className="bg-slate-900 border-slate-700 text-slate-100">
          <DialogHeader>
            <DialogTitle>执行流水线</DialogTitle>
            <DialogDescription className="text-slate-500">{selectedPipeline?.name}</DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div>
              <Label className="text-slate-300">分支</Label>
              <Input defaultValue={selectedPipeline?.branch} className="bg-slate-800 border-slate-700 text-slate-100 mt-1" />
            </div>
            <div>
              <Label className="text-slate-300">Commit ID (可选)</Label>
              <Input placeholder="留空则使用最新提交" className="bg-slate-800 border-slate-700 text-slate-100 mt-1" />
            </div>
            <div>
              <Label className="text-slate-300">环境变量 (可选)</Label>
              <Textarea
                placeholder="KEY=value&#10;KEY2=value2"
                className="bg-slate-800 border-slate-700 text-slate-100 mt-1 font-mono text-sm"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsRunDialogOpen(false)} className="border-slate-700 text-slate-300">
              取消
            </Button>
            <Button className="bg-emerald-600 hover:bg-emerald-700" onClick={handleRunPipeline}>
              <Play className="h-4 w-4 mr-2" />
              开始执行
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}