import { useState, useEffect } from "react";
import { useSearchParams, useNavigate, useLoaderData, useRevalidator } from "@remix-run/react";
import { ClientLoaderFunctionArgs, MetaFunction } from "@remix-run/react";
import { Table } from "~/components/ui/Table";
import { Card } from "~/components/ui/Card";
import { Button } from "~/components/ui/Button";
import { Pagination } from "~/components/ui/Pagination";
import { FilterPanel, FilterSelect, SearchFilter } from "~/components/ui/FilterPanel";
import { toastService } from "~/components/ui/Toast";
import { messageService } from "~/components/ui/MessageModal";
import { usePermission } from "~/hooks/usePermission";
import {
  getEntryModules,
  deleteEntryModule,
  type EntryModule,
  type EntryModuleSearchParams
} from "~/api/entry-modules/entry-modules";
import entryModulesStyles from "~/styles/pages/entry-modules.css?url";
import { DOCUMENT_URL } from "~/config/api-config";

// 引入CSS样式
export function links() {
  return [
    { rel: "stylesheet", href: entryModulesStyles }
  ];
}

// 页面元数据
export const meta: MetaFunction = () => {
  return [
    { title: "入口模块管理 - 中国烟草AI合同及卷宗审核系统" },
    { name: "description", content: "管理入口模块，包括查看、编辑和删除入口模块" },
  ];
};

// 面包屑配置
export const handle = {
  breadcrumb: "入口模块管理"
};


// 定义加载器返回的数据类型
interface LoaderData {
  modules: EntryModule[];
  total: number;
  pageSize: number;
  currentPage: number;
  error?: string;
  accessDenied?: boolean;
}

function resolveModuleLogoUrl(path?: string | null): string | null {
  if (!path) {
    return null;
  }

  if (path.startsWith("/images/") || path.startsWith("http://") || path.startsWith("https://")) {
    return path;
  }

  return `${DOCUMENT_URL}${path}`;
}

// 🔑 客户端加载函数 - 在浏览器端执行，axios-client 会自动添加 JWT
export async function clientLoader({ request }: ClientLoaderFunctionArgs) {
  try {
    const url = new URL(request.url);
    const name = url.searchParams.get('name') || undefined;
    const area = url.searchParams.get('area') || undefined;
    const page = parseInt(url.searchParams.get('page') || '1', 10);
    const pageSize = parseInt(url.searchParams.get('pageSize') || '10', 10);

    // 构建搜索参数（注意：API使用page_size而不是pageSize）
    const searchParams: EntryModuleSearchParams = {
      name,
      area,
      page,
      page_size: pageSize  // API使用page_size
    };

    // ✅ 不需要传递 JWT，axios-client 会自动从 localStorage 读取并添加
    const modulesResponse = await getEntryModules(searchParams);

    if (modulesResponse.error) {
      console.error("❌ [clientLoader] 获取入口模块失败:", modulesResponse.error);
      throw new Error(modulesResponse.error);
    }

    const modulesResult = modulesResponse.data?.modules || [];
    const totalCount = modulesResponse.data?.total || modulesResult.length;

    return {
      modules: modulesResult,
      total: totalCount,
      pageSize,
      currentPage: page,
      accessDenied: false,
    };
  } catch (error) {
    const errorMessage = error instanceof Error ? error.message : "加载入口模块列表失败";
    console.error("加载入口模块列表失败:", error);
    return {
      modules: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      error: errorMessage,
      accessDenied: errorMessage.includes('无权限') || errorMessage.includes('权限') || errorMessage.includes('403'),
    };
  }
}

// 地区选项
const AREA_OPTIONS = [
  { value: "梅州", label: "梅州" },
  { value: "云浮", label: "云浮" },
  { value: "揭阳", label: "揭阳" },
  { value: "潮州", label: "潮州" },
  { value: "省局", label: "省局" }
];

// 入口模块列表组件
export default function EntryModulesList() {
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const [isDeleting, setIsDeleting] = useState(false);
  const revalidator = useRevalidator();

  // 记录加载失败的图片ID
  const [failedImages, setFailedImages] = useState<Set<number>>(new Set());

  // 获取加载器数据
  const loaderData = useLoaderData<LoaderData>();
  const { modules, total, error, accessDenied } = loaderData;

  // ✅ 使用权限 Hook
  const { canCreate, canUpdate, canDelete, canView } = usePermission();
  const canCreateModule = canCreate('entry_module');
  const canUpdateModule = canUpdate('entry_module');
  const canDeleteModule = canDelete('entry_module');
  const canViewModule = canView('entry_module');

  // 获取搜索参数
  const name = searchParams.get('name') || '';
  const area = searchParams.get('area') || '';
  const currentPage = parseInt(searchParams.get('page') || String(1), 10);
  const pageSize = parseInt(searchParams.get('pageSize') || String(10), 10);

  // 处理loader加载数据的时候的错误
  useEffect(() => {
    if (error) {
      if (accessDenied) {
        toastService.warning('您当前只有入口模块页面可见权限，没有列表读取权限');
        return;
      }
      toastService.error(error);
    }
  }, [error, accessDenied]);

  // 处理名称搜索
  const handleNameSearch = (value: string) => {
    const newParams = new URLSearchParams(searchParams);
    if (value) {
      newParams.set('name', value);
    } else {
      newParams.delete('name');
    }
    newParams.set('page', '1');
    setSearchParams(newParams);
  };

  // 处理筛选变更
  const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const { name, value } = e.target;
    const newParams = new URLSearchParams(searchParams);

    if (value) {
      newParams.set(name, value);
    } else {
      newParams.delete(name);
    }

    // 切换筛选条件时，重置到第一页
    newParams.set('page', '1');

    setSearchParams(newParams);
  };

  // 处理重置筛选
  const handleReset = () => {
    const nameInput = document.querySelector('input[placeholder="请输入入口模块名称"]');
    if (nameInput) {
      (nameInput as HTMLInputElement).value = '';
    }

    // 重置所有筛选条件
    setSearchParams(new URLSearchParams());
  };

  // 处理删除入口模块
  const handleDelete = async (id: number) => {
    // ✅ 检查删除权限
    if (!canDeleteModule) {
      toastService.warning('您没有删除权限');
      return;
    }

    messageService.show({
      title: "确认删除",
      message: "确定要删除该入口模块吗？此操作不可撤销。",
      type: "warning",
      confirmText: "删除",
      cancelText: "取消",
      confirmDelay: 3,
      onConfirm: async () => {
        setIsDeleting(true);

        try {
          // 直接调用 API 删除函数
          const result = await deleteEntryModule(id);

          if (result.success) {
            toastService.success('删除成功！');
            // 重新验证数据，刷新表格
            revalidator.revalidate();
          } else {
            toastService.error(`删除失败: ${result.error || '未知错误'}`);
          }
        } catch (error) {
          console.error('删除入口模块失败:', error);
          toastService.error(`删除失败: ${error instanceof Error ? error.message : '未知错误'}`);
        } finally {
          setIsDeleting(false);
        }
      }
    });
  };

  // 处理编辑入口模块
  const handleEdit = (id: number) => {
    navigate(`/entry-modules/new?id=${id}`);
  };

  // 处理分页变更
  const handlePageChange = (page: number) => {
    const newParams = new URLSearchParams(searchParams);
    newParams.set('page', page.toString());
    setSearchParams(newParams);
  };

  // 处理每页条数变更
  const handlePageSizeChange = (size: number) => {
    const newParams = new URLSearchParams(searchParams);
    newParams.set('pageSize', size.toString());
    newParams.set('page', '1');
    setSearchParams(newParams);
  };

  // 表格列定义
  const columns = [
    {
      key: 'name',
      title: '模块名称',
      width: '200px',
      render: (_: any, record: EntryModule) => (
        <span className="font-medium text-gray-900">{record.name}</span>
      )
    },
    {
      key: 'description',
      title: '描述',
      width: '250px',
      render: (_: any, record: EntryModule) => (
        <span className="text-gray-600">{record.description || '-'}</span>
      )
    },
    {
      key: 'logo',
      title: 'Logo图片',
      width: '150px',
      render: (_: any, record: EntryModule) => {
        const logoUrl = resolveModuleLogoUrl(record.path);
        if (!logoUrl) {
          return <span className="text-gray-400">未上传</span>;
        }
        const hasFailed = failedImages.has(record.id!);

        return (
          <div className="flex items-center">
            {!hasFailed ? (
              <>
                <a
                  href={logoUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="ml-2 text-blue-600 hover:underline text-sm"
                >
                  <div className="h-10 w-10 bg-gray-100 rounded flex items-center justify-center overflow-hidden">
                    <img
                      src={logoUrl}
                      alt={record.name}
                      className="h-full w-full object-contain"
                      onError={() => {
                        // 使用 React 状态管理加载失败的图片
                        setFailedImages(prev => new Set(prev).add(record.id!));
                      }}
                    />
                  </div>
                </a>
              </>
            ) : (
              <div className="flex items-center">
                <div className="h-8 w-8 bg-red-50 border border-red-200 rounded flex items-center justify-center">
                  <i className="ri-image-line text-red-400 text-lg"></i>
                </div>
                <span className="ml-2 text-red-500 text-sm">加载失败</span>
              </div>
            )}
          </div>
        );
      }
    },
    {
      key: 'areas',
      title: '适用地区',
      width: '200px',
      render: (_: any, record: EntryModule) => (
        <div className="flex flex-wrap gap-1">
          {record.areas && record.areas.length > 0 ? (
            record.areas
              .filter(areaConfig => areaConfig.enabled !== false)  // 只显示启用的地区
              .sort((a, b) => a.sort_order - b.sort_order)  // 按排序号排序
              .map((areaConfig, index) => (
                <span
                  key={index}
                  className="inline-block px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded"
                >
                  {areaConfig.area}
                </span>
              ))
          ) : (
            <span className="text-gray-400">未设置</span>
          )}
        </div>
      )
    },
    {
      key: 'created_at',
      title: '创建时间',
      width: '180px',
      render: (_: any, record: EntryModule) =>
        record.created_at ? new Date(record.created_at).toLocaleString('zh-CN') : '-'
    },
    {
      key: 'actions',
      title: '操作',
      width: '180px',
      render: (_: any, record: EntryModule) => (
        <div className="operations-cell">
          { canViewModule &&
            <button
              onClick={() => handleEdit(record.id!)}
              className="operation-btn"
              title="查看/编辑入口模块"
            >
              <i className="ri-edit-line"></i> {canUpdateModule ? '编辑' : '查看'}
            </button>
          }
          {canDeleteModule && (
            <button
              type="button"
              className="operation-btn !text-[--color-error]"
              onClick={() => handleDelete(record.id!)}
              disabled={isDeleting}
              title="删除入口模块"
            >
              <i className="ri-delete-bin-line"></i> 删除
            </button>
          )}
        </div>
      )
    }
  ];

  return (
    <div className="entry-modules-page">
      <Card>
        {/* 页面头部 */}
        <div className="page-header">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">入口模块管理</h1>
            <p className="text-sm text-gray-600 mt-1">管理系统入口模块，包括Logo图片和适用地区设置</p>
          </div>
          {/* ✅ 仅在有创建权限时显示新建按钮 */}
          {canCreateModule && (
            <Button
              type="primary"
              icon="ri-add-line"
              to="/entry-modules/new"
            >
              新建入口模块
            </Button>
          )}
        </div>

        {/* 筛选面板 */}
        <FilterPanel onReset={handleReset}>
          <FilterSelect
            label="适用地区"
            name="area"
            value={area}
            options={AREA_OPTIONS}
            onChange={handleFilterChange}
          />
          <SearchFilter
            label="模块名称"
            placeholder="请输入入口模块名称"
            value={name}
            onSearch={handleNameSearch}
            className="filter-item-wide"
          />
        </FilterPanel>

        {accessDenied ? (
          <div className="empty-state" style={{ padding: '64px 24px', textAlign: 'center' }}>
            <div style={{ fontSize: 40, color: '#faad14', marginBottom: 12 }}>
              <i className="ri-lock-line"></i>
            </div>
            <div style={{ fontSize: 18, fontWeight: 600, color: '#1f2937', marginBottom: 8 }}>
              当前账号没有入口模块列表权限
            </div>
            <div style={{ fontSize: 14, color: '#6b7280' }}>
              请在“角色权限管理”中为当前角色授予 `entry_module:list:read` 及相关权限后再访问。
            </div>
          </div>
        ) : (
          <Table
            columns={columns}
            dataSource={modules || []}
            rowKey="id"
            loading={false}
            emptyText="暂无入口模块数据"
          />
        )}

        {/* 分页 */}
        {!accessDenied && total > 0 && (
          <Pagination
            // pageSizeOptions={[10,20]}
            currentPage={currentPage}
            pageSize={pageSize}
            total={total}
            onChange={handlePageChange}
            onPageSizeChange={handlePageSizeChange}
          />
        )}
      </Card>
    </div>
  );
}