import React, { useCallback } from 'react';
import {
  Grid,
  Clock,
  TrendingUp,
  ExternalLink
} from 'lucide-react';
import { SimilaritySearchResultsProps } from '../../types/similaritySearch';
import { SimilaritySearchCard } from './SimilaritySearchCard';
import SimilaritySearchService from '../../services/similaritySearchService';

/**
 * 相似度检索结果展示组件
 * 遵循 Tauri 开发规范的组件设计原则
 */
export const SimilaritySearchResults: React.FC<SimilaritySearchResultsProps> = ({
  results,
  totalResults,
  currentPage,
  maxResultsPerPage,
  isLoading,
  onPageChange,
  onResultSelect,
}) => {
  // 计算分页信息
  const totalPages = SimilaritySearchService.getTotalPages(totalResults, maxResultsPerPage);
  const pageInfo = SimilaritySearchService.getPageRangeInfo(currentPage, maxResultsPerPage, totalResults);

  // 处理结果选择
  const handleResultSelect = useCallback((result: any) => {
    if (onResultSelect) {
      onResultSelect(result);
    }
  }, [onResultSelect]);



  if (isLoading) {
    return (
      <div className="card h-full flex flex-col items-center justify-center p-8 animate-fade-in">
        <div className="icon-container primary w-16 h-16 mb-6">
          <TrendingUp className="w-8 h-8 animate-pulse" />
        </div>
        <h3 className="text-xl font-semibold text-high-emphasis mb-2">正在搜索...</h3>
        <p className="text-medium-emphasis">AI正在为您寻找最相似的内容</p>
        
        {/* 加载动画 */}
        <div className="mt-6 flex space-x-2">
          {[0, 1, 2].map((i) => (
            <div
              key={i}
              className="w-2 h-2 bg-primary-500 rounded-full animate-bounce"
              style={{ animationDelay: `${i * 0.1}s` }}
            ></div>
          ))}
        </div>
      </div>
    );
  }

  if (results.length === 0) {
    return (
      <div className="card h-full flex flex-col items-center justify-center text-center p-8 animate-fade-in">
        <div className="icon-container gray w-16 h-16 mb-6">
          <Grid className="w-8 h-8" />
        </div>
        <h3 className="text-xl font-semibold text-high-emphasis mb-2">暂无搜索结果</h3>
        <p className="text-medium-emphasis max-w-md">
          没有找到匹配的内容，请尝试：
        </p>
        <ul className="text-sm text-medium-emphasis mt-3 space-y-1">
          <li>• 使用不同的关键词</li>
          <li>• 降低相关性阈值</li>
          <li>• 尝试更通用的搜索词</li>
        </ul>
      </div>
    );
  }

  return (
    <div className="space-y-6 animate-fade-in">
      {/* 结果统计 */}
      <div className="card p-4 bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="icon-container green w-8 h-8 shadow-sm">
              <TrendingUp className="w-4 h-4" />
            </div>
            <div>
              <h3 className="text-sm font-semibold text-green-900">
                🎯 找到 {totalResults} 个相似结果
              </h3>
              <p className="text-xs text-green-700">
                显示第 {pageInfo.start}-{pageInfo.end} 个结果
              </p>
            </div>
          </div>

          <div className="flex items-center gap-2 text-xs text-green-600 bg-white px-3 py-1.5 rounded-full border border-green-200">
            <Clock className="w-3 h-3" />
            <span>按相关性排序</span>
          </div>
        </div>
      </div>

      {/* 结果网格 */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
        {results.map((result, index) => (
          <SimilaritySearchCard
            key={result.id || index}
            result={result}
            onSelect={handleResultSelect}
            showScore={true}
            compact={true}
          />
        ))}
      </div>

      {/* 分页控制 */}
      {totalPages > 1 && (
        <div className="card p-4">
          <div className="flex items-center justify-between">
            <div className="text-sm text-medium-emphasis">
              第 {currentPage} 页，共 {totalPages} 页
            </div>
            
            <div className="flex items-center gap-2">
              <button
                onClick={() => onPageChange(currentPage - 1)}
                disabled={currentPage <= 1}
                className="btn btn-secondary btn-sm disabled:opacity-50 disabled:cursor-not-allowed"
              >
                上一页
              </button>
              
              <div className="flex items-center gap-1">
                {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                  const page = i + 1;
                  return (
                    <button
                      key={page}
                      onClick={() => onPageChange(page)}
                      className={`w-8 h-8 text-sm rounded-lg transition-colors duration-200 ${
                        currentPage === page
                          ? 'bg-primary-500 text-white'
                          : 'text-gray-600 hover:bg-gray-100'
                      }`}
                    >
                      {page}
                    </button>
                  );
                })}
              </div>
              
              <button
                onClick={() => onPageChange(currentPage + 1)}
                disabled={currentPage >= totalPages}
                className="btn btn-secondary btn-sm disabled:opacity-50 disabled:cursor-not-allowed"
              >
                下一页
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 结果操作提示 */}
      <div className="card p-4 bg-blue-50 border-blue-200">
        <div className="flex items-start gap-3">
          <div className="icon-container blue w-6 h-6 mt-0.5">
            <ExternalLink className="w-3 h-3" />
          </div>
          <div className="flex-1">
            <h4 className="text-sm font-medium text-blue-900 mb-1">操作提示</h4>
            <p className="text-xs text-blue-700">
              点击结果卡片查看详细信息，或使用外部链接在新窗口中打开
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SimilaritySearchResults;
