import React, { useState, useMemo } from "react";
import {
  Tabs,
  Button,
  message,
  Image,
  Row,
  Col,
  Modal,
  Input,
  Alert,
} 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 } from "packages/common/dist";
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 [description, setDescription] = useState<string>('');

  // 检查是否为域管理员
  const isDomainAdmin = useMemo(() => {
    return hasSomePermissions("MANAGE_DOM_STAFF", "MANAGE_ANY_STAFF"); // 使用权限检查而不是角色名称
  }, [hasSomePermissions]);

  // 获取资源列表
  const {
    data: resources,
    refetch,
  }: { data: ResourceDto[]; refetch: () => void } =
    api.resource.findMany.useQuery({
      where: {
        deletedAt: null,
        postId: null,
      },
      orderBy: {
        createdAt: "desc",
      },
    });
  // 处理资源数据
  const { imageResources, fileResources } = useMemo(() => {
    if (!resources) return { imageResources: [], fileResources: [] };
    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);
        return {
          ...resource,
          url: isImg ? getCompressedImageUrl(original) : original,
          originalUrl: original,
          isImage: isImg,
        };
      })
      .filter(Boolean);

    return {
      imageResources: processedResources.filter((res) => res.isImage),
      fileResources: processedResources.filter((res) => !res.isImage),
    };
  }, [resources]);

  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,
              // description: description.trim(),
              isPublic: true,
            },
          });
        } catch (error) {
          if (
            error instanceof Error &&
            error.message.includes("Unique constraint failed")
          ) {
            console.warn(`文件 ${fileId} 已存在，跳过`);
            continue;
          }
          throw error;
        }
      }
      message.success("上传成功！");
      setFileIds([]);
      // setDescription('');
      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>支持视频、图片、文档、PPT等多种格式文件</p>
        </div>
      </header>

      {!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);
                }}
              />
              {/* {!isDomainAdmin && (
                <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-20 rounded-xl">
                  <span className="text-white font-medium">
                    只有管理员才能使用上传功能
                  </span>
                </div>
              )} */}
            </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">
          {/* 图片资源展示 */}
          {imageResources?.length > 0 && (
            <div className="rounded-xl border p-4 bg-white">
              <h3 className="text-lg font-medium mb-4">图片列表</h3>
              <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>
            </div>
          )}

          {/* 其他文件资源展示 */}
          {fileResources?.length > 0 && (
            <div className="rounded-xl border p-4 bg-white">
              <h3 className="text-lg font-medium mb-4">文件列表</h3>
              <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
                {fileResources.map((resource) => (
                  <div
                    key={resource.url}
                    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>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}