/**
 * Phase 3: 批处理模式 - 预设模板结果表格（8列）
 */

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

interface PresetTableProps {
  results: BatchResult[];
}

export function PresetTable({ results }: PresetTableProps) {
  const columns = [
    {
      title: '#',
      dataIndex: 'index',
      key: 'index',
      width: 60,
      align: 'center' as const,
    },
    {
      title: '文献名称',
      dataIndex: 'document_name',
      key: 'document_name',
      width: 120,
      render: (text: string, record: BatchResult) => (
        <div style={{ fontSize: '12px' }}>
          <Tooltip title={text}>
            <div className="doc-name-compact" style={{ marginBottom: 6 }}>
              {text}
            </div>
          </Tooltip>
          {record.status === 'failed' ? (
            <Tag color="red" icon={<CloseCircleOutlined />} style={{ fontSize: '11px' }}>失败</Tag>
          ) : (
            <Tag color="green" icon={<CheckCircleOutlined />} style={{ fontSize: '11px' }}>成功</Tag>
          )}
        </div>
      ),
    },
    {
      title: '研究目的',
      dataIndex: ['data', 'research_purpose'],
      key: 'research_purpose',
      width: 150,
      render: (text: string) => (
        <div className="table-cell-wrap">{text || '-'}</div>
      ),
    },
    {
      title: '研究设计',
      dataIndex: ['data', 'research_design'],
      key: 'research_design',
      width: 100,
      render: (text: string) => (
        <div className="table-cell-wrap">{text || '-'}</div>
      ),
    },
    {
      title: '研究对象',
      dataIndex: ['data', 'research_subjects'],
      key: 'research_subjects',
      width: 200,
      render: (text: string) => (
        <div className="table-cell-wrap">{text || '-'}</div>
      ),
    },
    {
      title: '样本量',
      dataIndex: ['data', 'sample_size'],
      key: 'sample_size',
      width: 100,
      render: (text: string) => (
        <div className="table-cell-wrap">{text || '-'}</div>
      ),
    },
    {
      title: '干预组',
      dataIndex: ['data', 'intervention_group'],
      key: 'intervention_group',
      width: 150,
      render: (text: string) => (
        <div className="table-cell-wrap">{text || '-'}</div>
      ),
    },
    {
      title: '对照组',
      dataIndex: ['data', 'control_group'],
      key: 'control_group',
      width: 150,
      render: (text: string) => (
        <div className="table-cell-wrap">{text || '-'}</div>
      ),
    },
    {
      title: '结果及数据',
      dataIndex: ['data', 'results_data'],
      key: 'results_data',
      width: 300,
      render: (text: string) => (
        <div className="table-cell-wrap">{text || '-'}</div>
      ),
    },
    {
      title: '牛津评级',
      dataIndex: ['data', 'oxford_level'],
      key: 'oxford_level',
      width: 100,
      align: 'center' as const,
      fixed: 'right' as const, // 固定在右侧
      render: (text: string) => {
        const getLevelColor = (level: string) => {
          if (level.startsWith('1')) return 'green';
          if (level.startsWith('2')) return 'blue';
          if (level.startsWith('3')) return 'orange';
          return 'default';
        };

        return text ? (
          <Tag color={getLevelColor(text)}>{text}</Tag>
        ) : (
          '-'
        );
      },
    },
  ];

  return (
    <div className="preset-table">
      <Table
        columns={columns}
        dataSource={results}
        rowKey="id"
        pagination={{
          pageSize: 10,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50'],
          showTotal: (total) => `共 ${total} 篇文献`,
          position: ['bottomLeft'], // 分页器放在左边
        }}
        scroll={{ x: 1400 }}
        size="middle"
        bordered
      />
    </div>
  );
}

