/**
 * Celestial Bodies Management Page
 */
import { useState, useEffect } from 'react';
import { Table, Button, message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { request } from '../../utils/request';

interface CelestialBody {
  id: string;
  name: string;
  name_zh: string;
  type: string;
  description: string;
}

export function CelestialBodies() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<CelestialBody[]>([]);

  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    setLoading(true);
    try {
      const { data: result } = await request.get('/celestial/list');
      setData(result.bodies || []);
    } catch (error) {
      message.error('加载数据失败');
    } finally {
      setLoading(false);
    }
  };

  const columns: ColumnsType<CelestialBody> = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width: 100,
    },
    {
      title: '英文名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '中文名',
      dataIndex: 'name_zh',
      key: 'name_zh',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      render: (type: string) => {
        const typeMap: Record<string, string> = {
          star: '恒星',
          planet: '行星',
          dwarf_planet: '矮行星',
          probe: '探测器',
        };
        return typeMap[type] || type;
      },
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      ellipsis: true,
    },
  ];

  return (
    <div>
      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
        <h1>天体数据列表</h1>
        <Button type="primary" onClick={loadData}>
          刷新
        </Button>
      </div>
      <Table
        columns={columns}
        dataSource={data}
        rowKey="id"
        loading={loading}
        pagination={{ pageSize: 20 }}
      />
    </div>
  );
}