/**
 * Phase 3: 批处理模式 - 自定义模板结果表格（3列）
 */

import React, { useState } from 'react';
import { Table, Tag, Modal } from 'antd';
import { CheckCircleOutlined, CloseCircleOutlined, EyeOutlined } from '@ant-design/icons';
import type { BatchResult } from '../../api/batchApi';

interface CustomTableProps {
  results: BatchResult[];
}

export function CustomTable({ results }: CustomTableProps) {
  const [viewingResult, setViewingResult] = useState<BatchResult | null>(null);

  const columns = [
    {
      title: '#',
      dataIndex: 'index',
      key: 'index',
      width: 60,
    },
    {
      title: '文献名称',
      dataIndex: 'document_name',
      key: 'document_name',
      width: 250,
      render: (text: string, record: BatchResult) => (
        <div>
          <div className="doc-name" style={{ marginBottom: 4 }}>{text}</div>
          <div style={{ display: 'flex', gap: 8 }}>
            {record.status === 'failed' ? (
              <Tag color="red" icon={<CloseCircleOutlined />}>失败</Tag>
            ) : (
              <Tag color="green" icon={<CheckCircleOutlined />}>成功</Tag>
            )}
            {record.processing_time_ms && (
              <Tag color="blue">{Math.round(record.processing_time_ms / 1000)}秒</Tag>
            )}
          </div>
        </div>
      ),
    },
    {
      title: '提取结果',
      dataIndex: ['data', 'extracted_text'],
      key: 'extracted_text',
      ellipsis: true,
      render: (text: string, record: BatchResult) => {
        if (record.status === 'failed') {
          return (
            <div className="error-message">
              ❌ {record.error_message || '处理失败'}
            </div>
          );
        }

        const preview = text ? text.substring(0, 200) : '';
        const hasMore = text && text.length > 200;

        return (
          <div className="result-text">
            <div className="text-preview">{preview}</div>
            {hasMore && (
              <>
                <span className="text-ellipsis">...</span>
                <a
                  onClick={() => setViewingResult(record)}
                  className="view-full-link"
                >
                  <EyeOutlined /> 查看完整内容
                </a>
              </>
            )}
          </div>
        );
      },
    },
  ];

  return (
    <>
      <div className="custom-table">
        <Table
          columns={columns}
          dataSource={results}
          rowKey="id"
          pagination={{
            pageSize: 10,
            showSizeChanger: true,
            showTotal: (total) => `共 ${total} 篇文献`,
          }}
          size="middle"
        />
      </div>

      {/* 查看完整内容的模态框 */}
      <Modal
        title={viewingResult?.document_name}
        open={!!viewingResult}
        onCancel={() => setViewingResult(null)}
        footer={null}
        width={800}
        className="result-detail-modal"
      >
        {viewingResult && (
          <div className="result-detail">
            <div className="detail-section">
              <div className="section-title">提取结果：</div>
              <div className="section-content">
                {viewingResult.data?.extracted_text || '无内容'}
              </div>
            </div>

            {viewingResult.processing_time_ms && (
              <div className="detail-meta">
                <Tag color="blue">
                  处理时间: {Math.round(viewingResult.processing_time_ms / 1000)}秒
                </Tag>
                {viewingResult.tokens_used && (
                  <Tag color="green">
                    Token使用: {viewingResult.tokens_used.toLocaleString()}
                  </Tag>
                )}
              </div>
            )}
          </div>
        )}
      </Modal>
    </>
  );
}









