import React, { useState, useMemo } from "react";
import {
  Tabs,
  Button,
  message,
  Image,
  Row,
  Col,
  Modal,
  Input,
  Alert,
  Pagination,
} from "antd";
import { TusUploader } from "@web/src/components/common/uploader/TusUploader";
import { SendOutlined, DeleteOutlined, LoginOutlined } from "@ant-design/icons";
import { api } from "@nice/client";
import dayjs from "dayjs";
import { env } from "@web/src/env";
import { getFileIcon } from "@web/src/components/models/post/detail/utils";
import { formatFileSize, getCompressedImageUrl } from "@nice/utils";
import { ResourceDto, RoleName, ResourceType } from "@nice/common";
import { useAuth } from "@web/src/providers/auth-provider";
const { TabPane } = Tabs;

export function VideoContent() {
  const { isAuthenticated, user, hasSomePermissions } = useAuth();
  const [fileIds, setFileIds] = useState<string[]>([]);
  const [uploaderKey, setUploaderKey] = useState<number>(0);
  const [searchTerm, setSearchTerm] = useState("");

  // 分页状态
  const [imagePage, setImagePage] = useState(1);
  const [filePage, setFilePage] = useState(1);
  const pageSize = 12; // 每页显示的数量

  // 检查是否为域管理员
  const isDomainAdmin = useMemo(() => {
    return hasSomePermissions("MANAGE_DOM_STAFF", "MANAGE_ANY_STAFF");
  }, [hasSomePermissions]);

  // 获取资源列表
  const {
    data: resources,
    refetch,
    isLoading,
  }: { data: ResourceDto[]; refetch: () => void; isLoading: boolean } =
    api.resource.findMany.useQuery({
      where: {
        deletedAt: null,
        postId: null,
      },
      orderBy: {
        createdAt: "desc",
      },
    });

  // 处理资源数据
  const { imageResources, fileResources, imagePagination, filePagination } =
    useMemo(() => {
      if (!resources) {
        return {
          imageResources: [],
          fileResources: [],
          imagePagination: { total: 0, data: [] },
          filePagination: { total: 0, data: [] },
        };
      }

      const isImage = (url: string) => /\.(png|jpg|jpeg|gif|webp)$/i.test(url);

      const processedResources = resources
        .map((resource) => {
          if (!resource?.url) return null;
          const original = `http://${env.SERVER_IP}:${env.UPLOAD_PORT}/uploads/${resource.url}`;
          const isImg = isImage(resource.url);

          // 确保 title 存在，优先使用 resource.title，然后是 resource.meta.filename
          const displayTitle =
            resource.title || resource.meta?.filename || "未命名文件";
          // 用于搜索的名称，确保从 meta.filename 获取（如果存在）
          const searchableFilename = resource.meta?.filename || "";

          return {
            ...resource,
            url: isImg ? getCompressedImageUrl(original) : original,
            originalUrl: original,
            isImage: isImg,
            title: displayTitle, // 用于显示
            searchableFilename: searchableFilename, // 用于搜索
          };
        })
        .filter(Boolean);

      // 根据搜索词筛选文件资源 (基于 searchableFilename)
      const filteredFileResources = processedResources.filter(
        (res) =>
          !res.isImage &&
          res.searchableFilename
            .toLowerCase()
            .includes(searchTerm.toLowerCase())
      );

      const allImageResources = processedResources.filter((res) => res.isImage);

      // 分页处理
      const imageStart = (imagePage - 1) * pageSize;
      const fileStart = (filePage - 1) * pageSize;

      return {
        imageResources: allImageResources.slice(
          imageStart,
          imageStart + pageSize
        ),
        fileResources: filteredFileResources.slice(
          fileStart,
          fileStart + pageSize
        ),
        imagePagination: {
          total: allImageResources.length,
          data: allImageResources,
        },
        filePagination: {
          total: filteredFileResources.length,
          data: filteredFileResources,
        },
      };
    }, [resources, imagePage, filePage, searchTerm]); // searchTerm 作为依赖项

  const createMutation = api.resource.create.useMutation({});
  const handleSubmit = async () => {
    if (!isAuthenticated) {
      message.error("请先登录");
      return;
    }

    if (!isDomainAdmin) {
      message.error("只有管理员才能上传文件");
      return;
    }

    if (!fileIds.length) {
      message.error("请先上传文件");
      return;
    }

    try {
      // 逐个上传文件，而不是使用 Promise.all
      for (const fileId of fileIds) {
        try {
          await createMutation.mutateAsync({
            data: {
              fileId,
              isPublic: true,
            },
          });
        } catch (error) {
          if (
            error instanceof Error &&
            error.message.includes("Unique constraint failed")
          ) {
            console.warn(`文件 ${fileId} 已存在，跳过`);
            continue;
          }
          throw error;
        }
      }
      message.success("上传成功！");
      setFileIds([]);
      setUploaderKey((prev) => prev + 1);
      refetch(); // 刷新列表
    } catch (error) {
      console.error("Error uploading:", error);
      message.error("上传失败，请稍后重试");
    }
  };

  // 删除资源
  const deleteMutation = api.resource.softDeleteByIds.useMutation();

  const handleDelete = async (id: string) => {
    if (!isAuthenticated) {
      message.error("请先登录");
      return;
    }

    if (!isDomainAdmin) {
      message.error("只有管理员才能删除文件");
      return;
    }

    console.log("Delete resource id:", id);
    try {
      const confirmed = await new Promise((resolve) => {
        Modal.confirm({
          title: "确认删除",
          content: "确定要删除这个文件吗？此操作不可恢复。",
          okText: "确认",
          cancelText: "取消",
          onOk: () => resolve(true),
          onCancel: () => resolve(false),
        });
      });

      if (!confirmed) return;

      await deleteMutation.mutateAsync({
        ids: [id],
      });
    } catch (error) {
      console.error("Delete error:", error);
      message.error("删除失败，请重试");
    }

    refetch();
    message.success("删除成功");
  };

  return (
    <div className="p-6">
      <header className="rounded-t-xl bg-gradient-to-r from-primary to-primary-400 text-white p-6 relative mb-4">
        <div className="flex flex-col space-b-1">
          {/* <h1>资源上传</h1> */}
          <p>支持视频、excel、文档、ppt等多种格式文件</p>
        </div>
      </header>
      <Input.Search
        placeholder="搜索文件名"
        allowClear
        onSearch={(value) => setSearchTerm(value)}
        onChange={(e) => setSearchTerm(e.target.value)}
        style={{ width: 300 }}
      />
      {!isAuthenticated && (
        <Alert
          message="请先登录"
          description="您需要登录后才能查看和管理文件资源"
          type="warning"
          showIcon
          className="mb-4"
        />
      )}

      {isAuthenticated && !isDomainAdmin && (
        <Alert
          message="权限不足"
          description="只有管理员才能上传和管理文件资源"
          type="warning"
          showIcon
          className="mb-4"
        />
      )}

      {/* 上传区域 */}
      <div className="space-y-4">
        <Tabs defaultActiveKey="1">
          <TabPane>
            <div
              className={`relative rounded-xl border hover:ring-1 ring-white transition-all duration-300 ease-in-out bg-slate-100 ${!isDomainAdmin ? " pointer-events-none" : ""}`}
            >
              <TusUploader
                key={uploaderKey}
                value={fileIds}
                onChange={(value) => {
                  if (!isDomainAdmin) {
                    message.error("只有管理员才能上传文件");
                    return;
                  }
                  setFileIds(value);
                }}
              />
            </div>
          </TabPane>
        </Tabs>
        {isDomainAdmin && fileIds.length > 0 && (
          <div className="flex items-center justify-end gap-2">
            <Button
              type="primary"
              onClick={handleSubmit}
              className="flex items-center space-x-2 bg-primary"
              icon={<SendOutlined />}
            >
              上传
            </Button>
          </div>
        )}

        {/* 文件展示区域 */}
        <div className="space-y-6">
          {/* 图片资源展示 */}
          {/* {imagePagination?.total > 0 && (
            <div className="rounded-xl border p-4 bg-white">
              <div className="flex justify-between items-center mb-4">
                <h3 className="text-lg font-medium">图片列表</h3>
                <span className="text-gray-500 text-sm">
                  共 {imagePagination.total} 张图片
                </span>
              </div> */}

          {/* <Row gutter={[16, 16]}>
                <Image.PreviewGroup>
                  {imageResources.map((resource) => (
                    <Col key={resource.url} xs={12} sm={8} md={6} lg={4}>
                      <div className="relative aspect-square rounded-lg overflow-hidden flex items-center justify-center bg-gray-100">
                        <Image
                          src={resource.url}
                          alt={resource.title}
                          preview={{
                            src: resource.originalUrl,
                          }}
                          className="object-contain w-full h-full"
                        />
                        <div className="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent">
                          <div className="flex items-center justify-between text-white">
                            <span className="text-sm truncate">
                              {resource.title}
                            </span>
                            {isDomainAdmin && (
                              <Button
                                type="text"
                                size="small"
                                className="text-white hover:text-red-500"
                                icon={<DeleteOutlined />}
                                onClick={(e) => {
                                  e.stopPropagation();
                                  handleDelete(resource.id);
                                }}
                              />
                            )}
                          </div>
                        </div>
                      </div>
                    </Col>
                  ))}
                </Image.PreviewGroup>
              </Row> */}

          {/* 图片分页 */}
          {/* {imagePagination.total > pageSize && (
                <div className="flex justify-center mt-6">
                  <Pagination
                    current={imagePage}
                    pageSize={pageSize}
                    total={imagePagination.total}
                    onChange={(page) => setImagePage(page)}
                    showSizeChanger={false}
                  />
                </div>
              )}
            </div>
          )} */}

          {/* 其他文件资源展示 */}
          {isLoading ? (
            <div className="text-center py-8">加载中...</div>
          ) : filePagination?.total > 0 ? (
            <div className="rounded-xl border p-4 bg-white">
              <div className="flex flex-col sm:flex-row justify-between items-center mb-4 gap-4">
                <h3 className="text-lg font-medium">文件列表</h3>
                <span className="text-gray-500 text-sm">
                  共 {filePagination.total} 个文件
                </span>
              </div>

              {fileResources.length > 0 && (
                <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
                  {fileResources.map((resource) => (
                    <div
                      key={resource.id}
                      className="flex items-center p-3 rounded-lg border hover:shadow-md transition-shadow"
                    >
                      <div className="text-primary-600 text-2xl mr-3">
                        {getFileIcon(resource.url)}
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="font-medium truncate">
                          {resource.title}
                        </div>
                        {resource.description && (
                          <div className="text-xs text-gray-500 mt-1">
                            描述: {resource.description}
                          </div>
                        )}
                        <div className="text-xs text-gray-500 flex items-center gap-2">
                          <span>
                            {dayjs(resource.createdAt).format("YYYY-MM-DD")}
                          </span>
                          <span>
                            {resource.meta?.size &&
                              formatFileSize(resource.meta.size)}
                          </span>
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <Button
                          type="text"
                          size="small"
                          onClick={() => window.open(resource.url)}
                        >
                          下载
                        </Button>
                        {isDomainAdmin && (
                          <Button
                            type="text"
                            size="small"
                            danger
                            icon={<DeleteOutlined />}
                            onClick={(e) => {
                              e.stopPropagation();
                              handleDelete(resource.id);
                            }}
                          />
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              )}

              {fileResources.length === 0 && searchTerm && (
                <div className="text-center py-4 text-gray-500">
                  未找到匹配 "{searchTerm}" 的文件。
                </div>
              )}

              {/* 文件分页 */}
              {filePagination.total > pageSize && (
                <div className="flex justify-center mt-6">
                  <Pagination
                    current={filePage}
                    pageSize={pageSize}
                    total={filePagination.total}
                    onChange={(page) => setFilePage(page)}
                    showSizeChanger={false}
                  />
                </div>
              )}
            </div>
          ) : (
            <div className="text-center py-8 text-gray-500">
              {searchTerm ? `未找到匹配"${searchTerm}"的文件` : "暂无文件资源"}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}