import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { cn } from '@/lib/utils';
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 { Progress } from '@/components/ui/progress';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} 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 {
  Rocket,
  Plus,
  Search,
  Play,
  RotateCcw,
  CheckCircle,
  XCircle,
  Clock,
  GitBranch,
  GitCommit,
  User,
  MoreHorizontal,
  Eye,
  Settings,
  History,
  Pause,
  Loader2,
  ArrowLeft,
  ArrowRight,
} from 'lucide-react';
import { releaseApi } from '@/services/api';
import { toast } from 'sonner';

export function AppReleaseManager() {
  const navigate = useNavigate();
  const [searchQuery, setSearchQuery] = useState('');
  const [envFilter, setEnvFilter] = useState<string>('all');
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [releases, setReleases] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedRelease, setSelectedRelease] = useState<any | null>(null);
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [newRelease, setNewRelease] = useState({
    appName: '',
    version: '',
    environment: 'dev',
    commitId: '',
    commitMsg: '',
    description: '',
  });

  const loadData = async () => {
    try {
      setLoading(true);
      const data = await releaseApi.getReleases();
      setReleases(data.list || []);
    } catch (error) {
      console.error('Failed to load releases:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadData();
  }, []);

  const filteredReleases = releases.filter((release) => {
    const matchesSearch =
      (release.app_name || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
      (release.version || '').includes(searchQuery);
    const matchesEnv = envFilter === 'all' || release.environment === envFilter;
    const matchesStatus = statusFilter === 'all' || release.status === statusFilter;
    return matchesSearch && matchesEnv && matchesStatus;
  });

  const getStatusBadge = (status: any) => {
    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 'deploying':
        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>
        );
      case 'building':
        return (
          <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
            <Loader2 className="h-3 w-3 mr-1 animate-spin" />
            构建中
          </Badge>
        );
      case 'rolled_back':
        return (
          <Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
            <RotateCcw className="h-3 w-3 mr-1" />
            已回滚
          </Badge>
        );
      case 'pending':
        return (
          <Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
            <Clock className="h-3 w-3 mr-1" />
            待发布
          </Badge>
        );
      default:
        return null;
    }
  };

  const getEnvBadge = (env: any) => {
    const colors: Record<string, string> = {
      dev: 'border-slate-500/30 text-slate-400 bg-slate-500/10',
      test: 'border-blue-500/30 text-blue-400 bg-blue-500/10',
      staging: 'border-amber-500/30 text-amber-400 bg-amber-500/10',
      prod: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10',
    };
    const labels: Record<string, string> = {
      dev: '开发环境',
      test: '测试环境',
      staging: '预发布',
      prod: '生产环境',
    };
    return (
      <Badge variant="outline" className={colors[env] || colors.dev}>
        {labels[env] || env}
      </Badge>
    );
  };

  const handleRollback = async (id: any) => {
    try {
      await releaseApi.rollbackRelease(id);
      loadData();
    } catch (error) {
      console.error('Failed to rollback release:', error);
    }
  };

  // 新建发布提交（复用 releaseApi.createRelease） // Logan.Li
  const handleCreateRelease = async () => {
    if (!newRelease.appName.trim() || !newRelease.version.trim()) {
      toast.error('请填写应用名称和版本号');
      return;
    }
    setSubmitting(true);
    try {
      await releaseApi.createRelease({
        app_name: newRelease.appName.trim(),
        version: newRelease.version.trim(),
        environment: newRelease.environment,
        commit_id: newRelease.commitId.trim(),
        commit_msg: newRelease.commitMsg.trim(),
        description: newRelease.description.trim(),
      });
      toast.success('发布申请已提交');
      setIsCreateDialogOpen(false);
      setNewRelease({ appName: '', version: '', environment: 'dev', commitId: '', commitMsg: '', description: '' });
      loadData();
    } catch {
      toast.error('创建失败');
    } finally {
      setSubmitting(false);
    }
  };

  // 模拟流水线步骤
  const pipelineSteps = [
    { name: '代码检出', status: 'success', duration: '15s' },
    { name: '依赖安装', status: 'success', duration: '45s' },
    { name: '代码检查', status: 'success', duration: '30s' },
    { name: '单元测试', status: 'success', duration: '2m 15s' },
    { name: '构建镜像', status: 'success', duration: '3m 30s' },
    { name: '推送镜像', status: 'success', duration: '1m 20s' },
    { name: '部署到K8s', status: 'running', duration: '--' },
    { name: '健康检查', status: 'pending', duration: '--' },
  ];

  return (
    <div className="space-y-6">
      {/* Page 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 hover:text-slate-100 hover:bg-slate-800"
            onClick={() => navigate('/pipelines')}
          >
            <Settings className="h-4 w-4 mr-2" />
            流水线配置
          </Button>
          <Button
            className="bg-blue-600 hover:bg-blue-700 text-white"
            onClick={() => setIsCreateDialogOpen(true)}
          >
            <Plus className="h-4 w-4 mr-2" />
            新建发布
          </Button>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="bg-slate-900 border-slate-800">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500">今日发布</p>
                <p className="text-2xl font-bold text-slate-100">{releases.length}</p>
              </div>
              <div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
                <Rocket className="h-5 w-5" />
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-slate-900 border-slate-800">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500">发布成功</p>
                <p className="text-2xl font-bold text-emerald-400">
                  {releases.filter((r) => r.status === 'success').length}
                </p>
              </div>
              <div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
                <CheckCircle className="h-5 w-5" />
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-slate-900 border-slate-800">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500">发布失败</p>
                <p className="text-2xl font-bold text-red-400">
                  {releases.filter((r) => r.status === 'failed').length}
                </p>
              </div>
              <div className="p-3 rounded-lg bg-red-500/10 text-red-400">
                <XCircle className="h-5 w-5" />
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-slate-900 border-slate-800">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500">成功率</p>
                <p className="text-2xl font-bold text-blue-400">
                  {releases.length > 0
                    ? `${Math.round((releases.filter((r) => r.status === 'success').length / releases.length) * 100)}%`
                    : '0%'}
                </p>
              </div>
              <div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
                <History className="h-5 w-5" />
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Filters */}
      <div className="flex items-center gap-3 flex-wrap">
        <div className="relative w-64">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
          <Input
            placeholder="搜索应用名称或版本..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
          />
        </div>
        <Select value={envFilter} onValueChange={setEnvFilter}>
          <SelectTrigger className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200">
            <SelectValue placeholder="环境" />
          </SelectTrigger>
          <SelectContent className="bg-slate-800 border-slate-700">
            <SelectItem value="all">全部环境</SelectItem>
            <SelectItem value="dev">开发环境</SelectItem>
            <SelectItem value="test">测试环境</SelectItem>
            <SelectItem value="staging">预发布</SelectItem>
            <SelectItem value="prod">生产环境</SelectItem>
          </SelectContent>
        </Select>
        <Select value={statusFilter} onValueChange={setStatusFilter}>
          <SelectTrigger className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200">
            <SelectValue placeholder="状态" />
          </SelectTrigger>
          <SelectContent className="bg-slate-800 border-slate-700">
            <SelectItem value="all">全部状态</SelectItem>
            <SelectItem value="success">成功</SelectItem>
            <SelectItem value="failed">失败</SelectItem>
            <SelectItem value="deploying">发布中</SelectItem>
            <SelectItem value="rolled_back">已回滚</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* Releases Table */}
      <Card className="bg-slate-900 border-slate-800">
        <CardContent className="p-0">
          <div className="border-t border-slate-800">
            <Table>
              <TableHeader>
                <TableRow className="border-slate-800 hover:bg-transparent">
                  <TableHead className="text-slate-400">应用名称</TableHead>
                  <TableHead className="text-slate-400">版本</TableHead>
                  <TableHead className="text-slate-400">环境</TableHead>
                  <TableHead className="text-slate-400">状态</TableHead>
                  <TableHead className="text-slate-400">代码</TableHead>
                  <TableHead className="text-slate-400">发布人</TableHead>
                  <TableHead className="text-slate-400">开始时间</TableHead>
                  <TableHead className="text-slate-400 text-right">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {loading ? (
                  <TableRow className="border-slate-800">
                    <TableCell colSpan={8} className="text-center text-slate-500 py-8">
                      <Loader2 className="h-5 w-5 animate-spin inline mr-2" />
                      加载中...
                    </TableCell>
                  </TableRow>
                ) : filteredReleases.map((release) => (
                  <TableRow key={release.id} className="border-slate-800 hover:bg-slate-800/50">
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <Rocket className="h-4 w-4 text-slate-500" />
                        <span className="text-sm font-medium text-slate-200">{release.app_name}</span>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge variant="outline" className="border-slate-700 text-slate-400">
                        {release.version}
                      </Badge>
                    </TableCell>
                    <TableCell>{getEnvBadge(release.environment)}</TableCell>
                    <TableCell>{getStatusBadge(release.status)}</TableCell>
                    <TableCell>
                      <div className="flex items-center gap-1 text-xs text-slate-400">
                        <GitBranch className="h-3 w-3" />
                        <span>{release.branch}</span>
                        <span className="mx-1">·</span>
                        <GitCommit className="h-3 w-3" />
                        <span>{release.commit_id}</span>
                      </div>
                    </TableCell>
                    <TableCell>
                      <span className="text-sm text-slate-300">{release.deployer}</span>
                    </TableCell>
                    <TableCell>
                      <span className="text-sm text-slate-400">
                        {release.created_at ? new Date(release.created_at).toLocaleString() : '--'}
                      </span>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex items-center justify-end gap-1">
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-8 text-slate-400 hover:text-slate-100"
                          onClick={() => setSelectedRelease(release)}
                        >
                          <Eye className="h-4 w-4 mr-1" />
                          详情
                        </Button>
                        {release.status === 'failed' && (
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-8 text-slate-400 hover:text-blue-400"
                            onClick={async () => {
                              try {
                                await releaseApi.deployRelease(release.id);
                                toast.success('已重新触发部署');
                                loadData();
                              } catch {
                                toast.error('重新部署失败');
                              }
                            }}
                          >
                            <RotateCcw className="h-4 w-4 mr-1" />
                            重试
                          </Button>
                        )}
                        {release.status === 'success' && (
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-8 text-slate-400 hover:text-amber-400"
                            onClick={() => handleRollback(release.id)}
                          >
                            <RotateCcw className="h-4 w-4 mr-1" />
                            回滚
                          </Button>
                        )}
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

      {/* Release Detail Dialog */}
      <Dialog open={!!selectedRelease} onOpenChange={() => setSelectedRelease(null)}>
        <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" />
              {selectedRelease?.app_name}
              <Badge variant="outline" className="border-slate-700 text-slate-400">
                {selectedRelease?.version}
              </Badge>
            </DialogTitle>
            <DialogDescription className="text-slate-500">
              环境: {selectedRelease?.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">
                {pipelineSteps.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 {selectedRelease?.app_name}...</p>
                  <p>[10:00:15] Checkout code from branch {selectedRelease?.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>
            {selectedRelease?.status === 'failed' && (
              <Button
                className="bg-blue-600 hover:bg-blue-700 text-white"
                onClick={async () => {
                  try {
                    setSubmitting(true);
                    await releaseApi.deployRelease(selectedRelease.id);
                    toast.success('已重新触发部署');
                    setSelectedRelease(null);
                    loadData();
                  } catch {
                    toast.error('重新部署失败');
                  } finally {
                    setSubmitting(false);
                  }
                }}
                disabled={submitting}
              >
                <RotateCcw className="h-4 w-4 mr-2" />
                重新部署
              </Button>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Create Release Dialog */}
      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
        <DialogContent className="max-w-2xl bg-slate-900 border-slate-800">
          <DialogHeader>
            <DialogTitle className="text-slate-100">新建发布</DialogTitle>
            <DialogDescription className="text-slate-500">创建新的应用版本发布申请</DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div>
              <Label className="text-slate-300">应用名称</Label>
              <Input
                value={newRelease.appName}
                onChange={(e) => setNewRelease({ ...newRelease, appName: e.target.value })}
                placeholder="如：用户中心服务"
                className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label className="text-slate-300">版本号</Label>
                <Input
                  value={newRelease.version}
                  onChange={(e) => setNewRelease({ ...newRelease, version: e.target.value })}
                  placeholder="v1.0.0"
                  className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
                />
              </div>
              <div>
                <Label className="text-slate-300">目标环境</Label>
                <Select
                  value={newRelease.environment}
                  onValueChange={(value) => setNewRelease({ ...newRelease, environment: value })}
                >
                  <SelectTrigger className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent className="bg-slate-800 border-slate-700">
                    <SelectItem value="dev">开发环境</SelectItem>
                    <SelectItem value="test">测试环境</SelectItem>
                    <SelectItem value="staging">预发布</SelectItem>
                    <SelectItem value="prod">生产环境</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label className="text-slate-300">Commit ID</Label>
                <Input
                  value={newRelease.commitId}
                  onChange={(e) => setNewRelease({ ...newRelease, commitId: e.target.value })}
                  placeholder="abc1234"
                  className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
                />
              </div>
              <div>
                <Label className="text-slate-300">提交信息</Label>
                <Input
                  value={newRelease.commitMsg}
                  onChange={(e) => setNewRelease({ ...newRelease, commitMsg: e.target.value })}
                  placeholder="feat: 新增功能"
                  className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
                />
              </div>
            </div>
            <div>
              <Label className="text-slate-300">发布说明</Label>
              <Textarea
                value={newRelease.description}
                onChange={(e) => setNewRelease({ ...newRelease, description: e.target.value })}
                placeholder="描述本次发布的内容..."
                className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" className="border-slate-700 text-slate-300" onClick={() => setIsCreateDialogOpen(false)}>
              取消
            </Button>
            <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={handleCreateRelease} disabled={submitting}>
              {submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Plus className="h-4 w-4 mr-2" />}
              提交申请
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}