"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { ArrowLeft, Download, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Sparkles, User, Building2, Clock, Bot } from "lucide-react";
import { Input } from "@/components/ui/input";
import Image from "next/image";

type FeaturedImage = {
  id: string;
  thumbnailUrl: string;
  originalUrl: string;
  imageSize: string;
  prompt: string;
  modelId: string;
  modelName: string;
  createdAt: string;
  featuredAt: string;
  user: {
    id: string;
    name: string;
    department: string;
  };
};

type Pagination = {
  page: number;
  pageSize: number;
  total: number;
  totalPages: number;
};

export default function FeaturedPage() {
  const router = useRouter();
  const [images, setImages] = useState<FeaturedImage[]>([]);
  const [loading, setLoading] = useState(true);
  const [pagination, setPagination] = useState<Pagination>({
    page: 1,
    pageSize: 24,
    total: 0,
    totalPages: 0,
  });
  const [selectedImage, setSelectedImage] = useState<FeaturedImage | null>(null);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [pageInput, setPageInput] = useState("");

  const fetchImages = async (page: number) => {
    setLoading(true);
    try {
      const res = await fetch(`/api/featured?page=${page}&pageSize=24`);
      const data = await res.json();
      if (data.images) {
        setImages(data.images);
        setPagination(data.pagination);
      }
    } catch (error) {
      console.error("Failed to fetch featured images:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchImages(1);
  }, []);

  const handleImageClick = (image: FeaturedImage) => {
    setSelectedImage(image);
    setDialogOpen(true);
  };

  const handleDownload = async (url: string, prompt: string) => {
    try {
      const response = await fetch(url);
      const blob = await response.blob();
      const blobUrl = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = blobUrl;
      link.download = `featured-${Date.now()}.png`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(blobUrl);
    } catch (error) {
      console.error("Download failed:", error);
    }
  };

  const goToPage = (page: number) => {
    if (page >= 1 && page <= pagination.totalPages) {
      fetchImages(page);
      setPageInput("");
    }
  };

  const handlePageInputSubmit = () => {
    const pageNum = Number.parseInt(pageInput);
    if (!Number.isNaN(pageNum) && pageNum >= 1 && pageNum <= pagination.totalPages) {
      goToPage(pageNum);
    }
  };

  return (
    <div className="container mx-auto p-6 h-full flex flex-col">
      <div className="mb-6 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" onClick={() => router.back()}>
            <ArrowLeft className="h-5 w-5" />
          </Button>
          <div>
            <h1 className="text-2xl font-bold flex items-center gap-2">
              <Sparkles className="h-6 w-6 text-yellow-500" />
              AI智能精选
            </h1>
            <p className="text-sm text-muted-foreground mt-1">
              共 {pagination.total} 张优秀AI作品
            </p>
          </div>
        </div>
      </div>

      {loading ? (
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center py-10 text-muted-foreground">
            <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full mx-auto mb-4" />
            加载中...
          </div>
        </div>
      ) : images.length === 0 ? (
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center py-10 text-muted-foreground">
            <Sparkles className="h-12 w-12 mx-auto mb-4 text-gray-300" />
            <p>暂无精选作品</p>
            <p className="text-sm mt-2">管理员可以在后台标记优秀作品</p>
          </div>
        </div>
      ) : (
        <>
          <div className="flex-1 overflow-y-auto">
            <div className="flex flex-wrap justify-center gap-6 px-4">
              {images.map((img) => (
                <div
                  key={img.id}
                  className="group relative cursor-pointer rounded-lg border bg-muted overflow-hidden transition-all hover:shadow-xl hover:scale-105"
                  style={{ width: "220px", height: "320px", flexShrink: 0 }}
                  onClick={() => handleImageClick(img)}
                >
                  {/* 精选图标 */}
                  <div className="absolute top-2 right-2 z-10">
                    <div className="bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-2 py-1 rounded-full text-xs font-bold flex items-center gap-1 shadow-lg">
                      <Sparkles className="h-3 w-3" />
                      精选
                    </div>
                  </div>

                  <div className="relative w-full h-[200px]">
                    <Image
                      src={img.thumbnailUrl || img.originalUrl}
                      alt={img.prompt || "精选作品"}
                      width={220}
                      height={200}
                      className="object-cover w-full h-full"
                      sizes="220px"
                      quality={75}
                      loading="lazy"
                      placeholder="blur"
                      blurDataURL="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2VlZSIvPjwvc3ZnPg=="
                    />
                  </div>

                  {/* 底部信息区域 */}
                  <div className="absolute bottom-0 left-0 right-0 bg-white dark:bg-gray-900 p-3 h-[120px]">
                    {/* 用户信息 */}
                    <div className="flex items-center gap-2 mb-2">
                      <div className="w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center">
                        <User className="h-3 w-3 text-white" />
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium truncate">{img.user.name}</p>
                        <p className="text-xs text-muted-foreground truncate flex items-center gap-1">
                          <Building2 className="h-3 w-3" />
                          {img.user.department}
                        </p>
                      </div>
                    </div>

                    {/* 提示词 */}
                    <p className="text-xs text-gray-600 dark:text-gray-400 line-clamp-2 mb-2" title={img.prompt}>
                      {img.prompt || "无提示词"}
                    </p>

                    {/* 底部元信息 */}
                    <div className="flex items-center justify-between text-xs text-muted-foreground">
                      <span className="flex items-center gap-1">
                        <Bot className="h-3 w-3" />
                        {img.modelName}
                      </span>
                      <span className="flex items-center gap-1">
                        <Clock className="h-3 w-3" />
                        {new Date(img.createdAt).toLocaleDateString("zh-CN", {
                          month: "short",
                          day: "numeric",
                        })}
                      </span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 分页 */}
          <div className="mt-6">
            <div className="text-center text-sm text-muted-foreground mb-3">
              第 {pagination.page} 页 / 共 {pagination.totalPages} 页
            </div>

            {pagination.totalPages > 1 && (
              <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => goToPage(1)}
                  disabled={pagination.page === 1}
                  title="第一页"
                >
                  <ChevronsLeft className="h-4 w-4" />
                </Button>

                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => goToPage(pagination.page - 1)}
                  disabled={pagination.page === 1}
                >
                  <ChevronLeft className="h-4 w-4" />
                  上一页
                </Button>

                <div className="flex items-center gap-1">
                  {Array.from({ length: pagination.totalPages }, (_, i) => i + 1)
                    .filter((p) => {
                      return (
                        p === 1 ||
                        p === pagination.totalPages ||
                        Math.abs(p - pagination.page) <= 1
                      );
                    })
                    .map((p, idx, arr) => {
                      const showEllipsis = idx > 0 && p - arr[idx - 1] > 1;
                      return (
                        <div key={p} className="flex items-center">
                          {showEllipsis && (
                            <span className="px-2 text-muted-foreground">...</span>
                          )}
                          <Button
                            variant={p === pagination.page ? "default" : "outline"}
                            size="sm"
                            onClick={() => goToPage(p)}
                          >
                            {p}
                          </Button>
                        </div>
                      );
                    })}
                </div>

                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => goToPage(pagination.page + 1)}
                  disabled={pagination.page === pagination.totalPages}
                >
                  下一页
                  <ChevronRight className="h-4 w-4" />
                </Button>

                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => goToPage(pagination.totalPages)}
                  disabled={pagination.page === pagination.totalPages}
                  title="最后一页"
                >
                  <ChevronsRight className="h-4 w-4" />
                </Button>

                <div className="flex items-center gap-2">
                  <Input
                    type="number"
                    min={1}
                    max={pagination.totalPages}
                    value={pageInput}
                    onChange={(e) => setPageInput(e.target.value)}
                    onKeyDown={(e) => e.key === "Enter" && handlePageInputSubmit()}
                    placeholder="跳转"
                    className="w-20 h-8 text-sm"
                  />
                  <Button size="sm" onClick={handlePageInputSubmit}>
                    GO
                  </Button>
                </div>
              </div>
            )}
          </div>
        </>
      )}

      {/* 图片预览对话框 */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="max-w-4xl p-0 overflow-hidden">
          {selectedImage && (
            <div className="flex flex-col">
              {/* 图片 */}
              <div className="relative bg-black flex items-center justify-center min-h-[400px] max-h-[70vh]">
                <Image
                  src={selectedImage.originalUrl}
                  alt={selectedImage.prompt || "精选作品"}
                  width={800}
                  height={600}
                  className="object-contain max-h-[70vh]"
                  quality={90}
                />
                {/* 精选标记 */}
                <div className="absolute top-4 right-4">
                  <div className="bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-3 py-1.5 rounded-full text-sm font-bold flex items-center gap-1.5 shadow-lg">
                    <Sparkles className="h-4 w-4" />
                    精选作品
                  </div>
                </div>
              </div>

              {/* 信息区域 */}
              <div className="p-6 bg-white dark:bg-gray-900">
                <div className="grid grid-cols-2 gap-4 mb-4">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center">
                      <User className="h-5 w-5 text-white" />
                    </div>
                    <div>
                      <p className="font-medium">{selectedImage.user.name}</p>
                      <p className="text-sm text-muted-foreground flex items-center gap-1">
                        <Building2 className="h-3 w-3" />
                        {selectedImage.user.department}
                      </p>
                    </div>
                  </div>
                  <div className="text-right">
                    <p className="text-sm text-muted-foreground">生成时间</p>
                    <p className="font-medium">
                      {new Date(selectedImage.createdAt).toLocaleString("zh-CN")}
                    </p>
                  </div>
                </div>

                <div className="mb-4">
                  <p className="text-sm text-muted-foreground mb-1">提示词</p>
                  <p className="text-sm bg-gray-50 dark:bg-gray-800 p-3 rounded-lg">
                    {selectedImage.prompt || "无提示词"}
                  </p>
                </div>

                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4 text-sm text-muted-foreground">
                    <span className="flex items-center gap-1">
                      <Bot className="h-4 w-4" />
                      {selectedImage.modelName}
                    </span>
                    <span>尺寸: {selectedImage.imageSize || "2K"}</span>
                  </div>
                  <Button
                    onClick={() => handleDownload(selectedImage.originalUrl, selectedImage.prompt)}
                  >
                    <Download className="h-4 w-4 mr-2" />
                    下载原图
                  </Button>
                </div>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}