"use client";

import { useParams } from "next/navigation";
import Link from "next/link";
import { useAdminProject } from "@/lib/hooks/admin/useAdminProjects";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { Skeleton } from "@/components/ui/skeleton";
import {
  ArrowLeft,
  FolderOpen,
  Calendar,
  User,
  FileText,
  Image,
  Film,
  Trash2,
} from "lucide-react";
import { useConfirm } from "@/components/ui/confirm-dialog";
import { useDeleteAdminProject } from "@/lib/hooks/admin/useAdminProjects";
import { useRouter } from "next/navigation";

export default function AdminProjectDetailPage() {
  const params = useParams();
  const router = useRouter();
  const projectId = params.id as string;
  const { confirm, ConfirmDialog } = useConfirm();

  const { data: project, isLoading } = useAdminProject(projectId);
  const deleteMutation = useDeleteAdminProject();

  const handleDelete = () => {
    if (!project) return;
    confirm({
      title: "确认删除项目？",
      description: `确定要删除项目 "${project.name}" 吗？此操作无法撤销。`,
      variant: "destructive",
      onConfirm: () => {
        deleteMutation.mutate(projectId, {
          onSuccess: () => {
            router.push("/admin/projects");
          },
        });
      },
    });
  };

  const getStatusBadge = (status: string) => {
    const variants: Record<
      string,
      { variant: "default" | "secondary" | "destructive" | "outline"; label: string }
    > = {
      active: { variant: "default", label: "进行中" },
      archived: { variant: "secondary", label: "已归档" },
      deleted: { variant: "destructive", label: "已删除" },
    };
    const config = variants[status] || { variant: "outline", label: status };
    return <Badge variant={config.variant}>{config.label}</Badge>;
  };

  if (isLoading) {
    return (
      <div className="container mx-auto py-6 space-y-6">
        <div className="flex items-center gap-4">
          <Skeleton className="h-10 w-10" />
          <Skeleton className="h-8 w-64" />
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Skeleton className="h-40" />
          <Skeleton className="h-40" />
          <Skeleton className="h-40" />
        </div>
      </div>
    );
  }

  if (!project) {
    return (
      <div className="container mx-auto py-6">
        <div className="text-center py-20">
          <h2 className="text-xl font-semibold text-muted-foreground">
            项目不存在或已被删除
          </h2>
          <Button asChild className="mt-4">
            <Link href="/admin/projects">返回项目列表</Link>
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="container mx-auto py-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Button variant="outline" size="icon" asChild>
            <Link href="/admin/projects">
              <ArrowLeft className="h-4 w-4" />
            </Link>
          </Button>
          <div>
            <h1 className="text-2xl font-bold tracking-tight flex items-center gap-2">
              <FolderOpen className="h-6 w-6" />
              {project.name}
            </h1>
            <p className="text-muted-foreground">项目详情与管理</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" asChild>
            <Link href={`/project/${project.id}`}>
              <FolderOpen className="h-4 w-4 mr-2" />
              打开项目
            </Link>
          </Button>
          <Button variant="destructive" onClick={handleDelete}>
            <Trash2 className="h-4 w-4 mr-2" />
            删除项目
          </Button>
        </div>
      </div>

      {/* Info Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              项目状态
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-2">
              {getStatusBadge(project.status)}
              <span className="text-sm text-muted-foreground">
                {project.type === "video" ? "视频项目" : "漫画项目"}
              </span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              项目进度
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <Progress value={project.progress || 0} className="h-2" />
              <span className="text-sm font-medium">{project.progress || 0}%</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              所有者
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-2">
              <User className="h-4 w-4 text-muted-foreground" />
              <div>
                <p className="font-medium">{project.ownerName || "未知用户"}</p>
                {project.ownerEmail && (
                  <p className="text-xs text-muted-foreground">{project.ownerEmail}</p>
                )}
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              创建时间
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-2">
              <Calendar className="h-4 w-4 text-muted-foreground" />
              <span>{new Date(project.createdAt).toLocaleDateString("zh-CN")}</span>
            </div>
            <p className="text-xs text-muted-foreground mt-1">
              更新于 {new Date(project.updatedAt).toLocaleDateString("zh-CN")}
            </p>
          </CardContent>
        </Card>
      </div>

      {/* Content Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg font-medium flex items-center gap-2">
              <FileText className="h-5 w-5" />
              剧集
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">{project.episodesCount || 0}</p>
            <p className="text-sm text-muted-foreground">项目中的剧集数量</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg font-medium flex items-center gap-2">
              <Image className="h-5 w-5" />
              资源
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">{project.assetsCount || 0}</p>
            <p className="text-sm text-muted-foreground">项目中的资源数量</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg font-medium flex items-center gap-2">
              <Film className="h-5 w-5" />
              分镜
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">{project.storyboardsCount || 0}</p>
            <p className="text-sm text-muted-foreground">项目中的分镜数量</p>
          </CardContent>
        </Card>
      </div>

      {/* Description */}
      {project.description && (
        <Card>
          <CardHeader>
            <CardTitle>项目描述</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-muted-foreground whitespace-pre-wrap">
              {project.description}
            </p>
          </CardContent>
        </Card>
      )}

      <ConfirmDialog />
    </div>
  );
}
