import type { MetaFunction } from '@remix-run/node';
import { useNavigate } from '@remix-run/react';
import { ContractSearchHero } from '~/components/contract-template/ContractSearchHero';
import styles from '~/styles/pages/contract-template.css?url';

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

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

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

export default function ContractTemplateSearchIndex() {
  const navigate = useNavigate();
  
  // 模拟分类数据
  const categories = [
    { name: '销售合同', icon: 'ri-contract-line', count: 128 },
    { name: '采购合同', icon: 'ri-shopping-cart-line', count: 96 },
    { name: '物流运输', icon: 'ri-truck-line', count: 64 },
    { name: '人事劳务', icon: 'ri-user-settings-line', count: 52 },
    { name: '租赁合同', icon: 'ri-building-line', count: 38 },
    { name: '保密协议', icon: 'ri-shield-check-line', count: 24 }
  ];

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

  const handleCategoryClick = (categoryName: string) => {
    navigate(`/contract-template/list?category=${encodeURIComponent(categoryName)}`);
  };

  return (
    <div className="contract-template-search">
      <ContractSearchHero onSearch={handleSearch} />
      <div className="quick-categories">
        {categories.map((category, index) => (
          <div 
            key={index}
            className="category-card"
            onClick={() => handleCategoryClick(category.name)}
            onKeyDown={(e) => {
              if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                handleCategoryClick(category.name);
              }
            }}
            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>
  );
}