import { Button, Table, Tag, Popconfirm, Space } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { Model } from '@/types';
import { useModels, useDeleteModel } from '@/hooks/useModels';

interface ModelTableProps {
  providerId: string;
  onAdd?: () => void;
  onEdit?: (model: Model) => void;
}

export function ModelTable({ providerId, onAdd, onEdit }: ModelTableProps) {
  const { data: models = [], isLoading } = useModels(providerId);
  const deleteModel = useDeleteModel();

  const columns: ColumnsType<Model> = [
    {
      title: '模型名称',
      dataIndex: 'modelName',
      key: 'modelName',
      ellipsis: { showTitle: true },
    },
    {
      title: '状态',
      dataIndex: 'enabled',
      key: 'enabled',
      render: (enabled: boolean) =>
        enabled ? <Tag color="green">启用</Tag> : <Tag color="red">禁用</Tag>,
      width: 80,
    },
    {
      title: '操作',
      key: 'action',
      width: 120,
      render: (_, record) => (
        <Space>
          {onEdit && (
            <Button variant="link" size="small" onClick={() => onEdit(record)}>
              编辑
            </Button>
          )}
          <Popconfirm
            title="确定要删除这个模型吗？"
            onConfirm={() => deleteModel.mutate(record.id)}
            okText="确定"
            cancelText="取消"
          >
            <Button variant="link" color="danger" size="small">
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <div style={{ padding: '8px 16px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
        <span style={{ fontWeight: 500 }}>关联模型 ({models.length})</span>
        {onAdd && (
          <Button variant="link" size="small" onClick={onAdd}>
            添加模型
          </Button>
        )}
      </div>
      <Table<Model>
        columns={columns}
        dataSource={models}
        rowKey="id"
        loading={isLoading}
        pagination={false}
        size="small"
        locale={{ emptyText: '暂无模型，点击上方按钮添加' }}
      />
    </div>
  );
}