import type { MetaFunction, LoaderFunctionArgs } from '@remix-run/node';
import { useNavigate, useLoaderData } from '@remix-run/react';
import { ContractSearchHero } from '~/components/contract-template/ContractSearchHero';
import { getContractCategoriesWithCount } from '~/api/contract-template/templates';
import type { ContractCategoryWithCount } from '~/api/contract-template/templates';
import styles from '~/styles/pages/contract-template.css?url';
import { getUserSession } from '~/api/login/auth.server';

export const links = () => [
  { rel: 'stylesheet', href: styles }
];

export const meta: MetaFunction = () => {
  return [
    { title: 'AI智能合同模板搜索 - 智慧法务' },
    { 
      name: 'description', 
      content: '使用AI智能搜索快速找到最适合的合同模板，支持自然语言描述搜索。' 
    }
  ];
};

// 面包屑导航配置
export const handle = {
  breadcrumb: "智能搜索"
};

/**
 * 转换分类数据为前端显示格式
 * @param category 分类数据
 * @returns 转换后的分类数据
 */
function transformCategory(category: ContractCategoryWithCount) {
  return {
    id: category.id,
    name: category.name,
    icon: category.icon || 'ri-file-text-line',
    count: category.template_count
  };
}

/**
 * 加载分类数据
 * @returns 分类数据
 */
export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const { handleServerAuth } = await import("~/utils/server-auth-handler");

  return handleServerAuth(async () => {
    // 获取 JWT
    const { frontendJWT } = await getUserSession(request);
    const jwt = frontendJWT || undefined;

    // 使用聚合查询获取分类及其模板数量
    const categoriesResponse = await getContractCategoriesWithCount(jwt);

    // 处理分类数据
    if (categoriesResponse.error) {
      console.error('获取分类失败:', categoriesResponse.error);
      return { categories: [] };
    }

    const categories = categoriesResponse.data || [];

    // 转换分类数据格式
    const categoriesWithCount = categories.map(transformCategory);

    return { categories: categoriesWithCount };
  }, url.pathname);
}

export default function ContractTemplateSearchIndex() {
  const navigate = useNavigate();
  const { categories } = useLoaderData<typeof loader>();

  const handleSearch = (query: string) => {
    if (query.trim()) {
      navigate(`/contract-template/search/results?q=${encodeURIComponent(query)}`);
    }
  };

  /**
   * 处理分类点击事件 - 使用ID而不是名称
   * @param categoryId 分类ID
   */
  const handleCategoryClick = (categoryId: number) => {
    navigate(`/contract-template/list?category_id=${categoryId}`);
  };

  return (
    <div className="contract-template-search">
      <ContractSearchHero onSearch={handleSearch} />
      <div className="quick-categories">
        {categories.map((category, index) => (
          <div 
            key={category.id || index}
            className="category-card"
            onClick={() => handleCategoryClick(category.id)}
            onKeyDown={(e) => {
              if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                handleCategoryClick(category.id);
              }
            }}
            role="button"
            tabIndex={0}
            aria-label={`选择${category.name}分类，共${category.count}个模板`}
          >
            <div className="category-icon">
              <i className={category.icon}></i>
            </div>
            <div className="category-title">{category.name}</div>
            <div className="category-count">{category.count}个模板</div>
          </div>
        ))}
      </div>
    </div>
  );
}