cosmo/frontend/src/pages/admin/MyCelestialBodies.tsx

/**
 * 我的天体（普通用户）
 *
 * 左侧是已关注天体列表，右侧是天体资料与相关天象事件。
 */
import { useCallback, useEffect, useState } from 'react';
import { Button, Card, Col, Descriptions, Empty, Row, Table, Tag } from 'antd';
import { ReloadOutlined, RocketOutlined, StarFilled, StarOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

import { request } from '../../utils/request';
import { useToast } from '../../contexts/ToastContext';
import { AdminPage } from '../../components/admin/AdminPage';

interface FollowedBody {
  id: string;
  name: string;
  name_zh?: string | null;
  type: string;
  is_active: boolean;
  followed_at?: string;
}

interface BodyEvent {
  id: number;
  title: string;
  event_type: string;
  event_time: string;
  description: string;
  details?: Record<string, unknown>;
}

const BODY_TYPE_LABELS: Record<string, string> = {
  star: '恒星',
  planet: '行星',
  dwarf_planet: '矮行星',
  satellite: '卫星',
  comet: '彗星',
  asteroid: '小行星',
  probe: '探测器',
};

const BODY_TYPE_COLORS: Record<string, string> = {
  star: 'gold',
  planet: 'blue',
  dwarf_planet: 'cyan',
  satellite: 'geekblue',
  comet: 'purple',
  asteroid: 'volcano',
  probe: 'magenta',
};

const EVENT_TYPE_LABELS: Record<string, string> = {
  approach: '接近',
  close_approach: '近距离接近',
  eclipse: '食',
  conjunction: '合',
  opposition: '冲',
  transit: '凌',
};

const EVENT_TYPE_COLORS: Record<string, string> = {
  approach: 'blue',
  close_approach: 'magenta',
  eclipse: 'purple',
  conjunction: 'cyan',
  opposition: 'orange',
  transit: 'green',
};

export function MyCelestialBodies() {
  const [loading, setLoading] = useState(false);
  const [bodies, setBodies] = useState<FollowedBody[]>([]);
  const [selectedBody, setSelectedBody] = useState<FollowedBody | null>(null);
  const [events, setEvents] = useState<BodyEvent[]>([]);
  const [eventsLoading, setEventsLoading] = useState(false);
  const toast = useToast();

  const loadEvents = useCallback(async (body: FollowedBody) => {
    setEventsLoading(true);
    try {
      const { data } = await request.get<BodyEvent[]>('/events', { params: { body_id: body.id, limit: 100 } });
      setEvents(data || []);
    } catch {
      toast.error('加载天体事件失败');
      setEvents([]);
    } finally {
      setEventsLoading(false);
    }
  }, [toast]);

  const loadFollowedBodies = useCallback(async () => {
    setLoading(true);
    try {
      const { data } = await request.get<FollowedBody[]>('/social/follows');
      const list = data || [];
      setBodies(list);
      if (list.length > 0) {
        const next = list.find((item) => item.id === selectedBody?.id) ?? list[0];
        setSelectedBody(next);
        await loadEvents(next);
      } else {
        setSelectedBody(null);
        setEvents([]);
      }
    } catch {
      toast.error('加载关注列表失败');
    } finally {
      setLoading(false);
    }
  }, [loadEvents, selectedBody?.id, toast]);

  useEffect(() => {
    void loadFollowedBodies();
    // 仅在首次进入页面时加载关注列表，后续交互自行刷新。
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handleSelectBody = async (body: FollowedBody) => {
    setSelectedBody(body);
    await loadEvents(body);
  };

  const handleUnfollow = async (bodyId: string) => {
    try {
      await request.delete(`/social/follow/${bodyId}`);
      toast.success('已取消关注');
      if (selectedBody?.id === bodyId) {
        setSelectedBody(null);
        setEvents([]);
      }
      await loadFollowedBodies();
    } catch {
      toast.error('取消关注失败');
    }
  };

  const eventColumns: ColumnsType<BodyEvent> = [
    { title: '事件', dataIndex: 'title', key: 'title', ellipsis: true, width: '40%' },
    {
      title: '类型',
      dataIndex: 'event_type',
      key: 'event_type',
      width: 160,
      render: (type: string) => (
        <Tag color={EVENT_TYPE_COLORS[type] || 'default'}>{EVENT_TYPE_LABELS[type] || type}</Tag>
      ),
      filters: Object.entries(EVENT_TYPE_LABELS).map(([value, text]) => ({ text, value })),
      onFilter: (value, record) => record.event_type === value,
    },
    {
      title: '时间',
      dataIndex: 'event_time',
      key: 'event_time',
      width: 180,
      render: (time: string) => new Date(time).toLocaleString('zh-CN'),
      sorter: (a, b) => new Date(a.event_time).getTime() - new Date(b.event_time).getTime(),
    },
  ];

  return (
    <AdminPage
      icon={<StarOutlined />}
      title="我的天体" description="查看已关注天体及其相关天象事件">
      <Row gutter={[16, 16]}>
        <Col xs={24} lg={9} xl={8}>
          <Card
            className="adm-panel adm-scroll-panel"
            title={
              <span className="adm-section-title">
                <StarFilled style={{ color: '#d4a72c' }} />
                关注列表
                <Tag>{bodies.length}</Tag>
              </span>
            }
            extra={<Button size="small" icon={<ReloadOutlined />} onClick={() => void loadFollowedBodies()} loading={loading}>刷新</Button>}
            style={{ height: 520 }}
          >
            {bodies.length === 0 && !loading ? (
              <Empty
                image={Empty.PRESENTED_IMAGE_SIMPLE}
                description="还没有关注任何天体"
                style={{ marginTop: 72 }}
              >
                <div className="adm-cell-sub">在可视化首页点击天体，进入详情后即可关注</div>
              </Empty>
            ) : (
              <div className="adm-list">
                {bodies.map((body) => (
                  <div
                    key={body.id}
                    className={`adm-list-item ${selectedBody?.id === body.id ? 'is-selected' : ''}`}
                    onClick={() => void handleSelectBody(body)}
                  >
                    <StarFilled style={{ color: '#d4a72c', fontSize: 18 }} />
                    <div className="adm-list-item-body">
                      <div className="adm-list-item-title">
                        <span className="adm-cell-strong">{body.name_zh || body.name}</span>
                        <Tag color={BODY_TYPE_COLORS[body.type] || 'default'}>
                          {BODY_TYPE_LABELS[body.type] || body.type}
                        </Tag>
                      </div>
                      <div className="adm-cell-sub">
                        {body.followed_at
                          ? `关注于 ${new Date(body.followed_at).toLocaleDateString('zh-CN')}`
                          : body.name}
                      </div>
                    </div>
                    <Button
                      type="text"
                      danger
                      size="small"
                      onClick={(event) => {
                        event.stopPropagation();
                        void handleUnfollow(body.id);
                      }}
                    >
                      取消关注
                    </Button>
                  </div>
                ))}
              </div>
            )}
          </Card>
        </Col>

        <Col xs={24} lg={15} xl={16}>
          <div className="adm-stack">
            <Card
              className="adm-panel"
              title={
                selectedBody ? (
                  <span className="adm-section-title">
                    <RocketOutlined />
                    {selectedBody.name_zh || selectedBody.name}
                    <Tag color={BODY_TYPE_COLORS[selectedBody.type] || 'default'}>
                      {BODY_TYPE_LABELS[selectedBody.type] || selectedBody.type}
                    </Tag>
                  </span>
                ) : '天体资料'
              }
            >
              {selectedBody ? (
                <Descriptions column={2} size="small" bordered>
                  <Descriptions.Item label="ID">{selectedBody.id}</Descriptions.Item>
                  <Descriptions.Item label="类型">
                    {BODY_TYPE_LABELS[selectedBody.type] || selectedBody.type}
                  </Descriptions.Item>
                  <Descriptions.Item label="中文名">{selectedBody.name_zh || '-'}</Descriptions.Item>
                  <Descriptions.Item label="英文名">{selectedBody.name}</Descriptions.Item>
                  <Descriptions.Item label="状态">
                    <Tag color={selectedBody.is_active ? 'green' : 'default'}>
                      {selectedBody.is_active ? '活跃' : '已归档'}
                    </Tag>
                  </Descriptions.Item>
                  <Descriptions.Item label="关注时间">
                    {selectedBody.followed_at ? new Date(selectedBody.followed_at).toLocaleString('zh-CN') : '-'}
                  </Descriptions.Item>
                </Descriptions>
              ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="请从左侧选择一个天体" />
              )}
            </Card>

            <Card className="adm-panel" title="相关天体事件">
              <Table
                className="adm-table"
                columns={eventColumns}
                dataSource={events}
                rowKey="id"
                loading={eventsLoading}
                size="small"
                pagination={{ pageSize: 10, showSizeChanger: false, showTotal: (count) => `共 ${count} 条` }}
                locale={{
                  emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无相关事件" />,
                }}
                expandable={{
                  expandedRowRender: (record) => (
                    <div style={{ padding: '4px 8px' }}>
                      <div><strong>描述：</strong>{record.description || '-'}</div>
                      {record.details ? (
                        <pre className="adm-detail-pre">{JSON.stringify(record.details, null, 2)}</pre>
                      ) : null}
                    </div>
                  ),
                }}
              />
            </Card>
          </div>
        </Col>
      </Row>
    </AdminPage>
  );
}