import { useRequest } from '@umijs/max';
import { List, Tag } from 'antd';
import type { FC } from 'react';
import { useMemo } from 'react';
import { queryFriendDynamic } from '../../service';
import { history } from '@umijs/max';

type ActivityItem = {
  id: number;
  actorId: string;
  actorName: string;
  action: string;
  storyInstanceId: string;
  storyInstanceName: string;
  storyItemId: string;
  storyItemName: string;
  remark: string;
  activityTime: number[];
  itemTitle: string;
  itemDescription: string;
  itemLocation: string;
  itemTime: number[];
};

const formatTime = (parts?: number[]) => {
  if (!parts || parts.length < 3) return '';
  const [y, m, d, h = 0, mi = 0, s = 0] = parts;
  const pad = (n: number) => String(n).padStart(2, '0');
  return `${y}-${pad(m)}-${pad(d)} ${pad(h)}:${pad(mi)}:${pad(s)}`;
};

const formatAction = (action: string) => {
  switch (action) {
    case 'create_story_item':
      return '创建故事节点';
    case 'update_story_item':
      return '更新故事节点';
    case 'delete_story_item':
      return '删除故事节点';
    default:
      return action;
  }
};

// 动态 Tab：展示当前用户有权限看到的故事条目动态
const Dynamic: FC = () => {
  const { data, loading } = useRequest(() => queryFriendDynamic());

  const items: ActivityItem[] = useMemo(() => {
    return ((data as any)?.data || data || []) as ActivityItem[];
  }, [data]);

  return (
    <List<ActivityItem>
      size="large"
      itemLayout="vertical"
      loading={loading}
      dataSource={items}
      rowKey={(item) => String(item.id)}
      renderItem={(item) => (
        <List.Item>
          <List.Item.Meta
            title={
              <span>
                {/* 增加点击事件，只允许点击故事实例详情 */}
                <a onClick={() => {
                  history.push(`/timeline/${item.storyInstanceId}`);
                }} style={{ cursor: 'pointer' }} title="点击查看故事实例详情" >
                  <span>
                    {item.actorName} 在{item.storyInstanceName}中<Tag color="blue">{`${formatAction(item.action)}`}</Tag>
                    <span style={{ marginLeft: 8 }}>{item.storyItemName}</span>
                  </span>
                </a>
              </span>
            }
            description={
              <span>
                <Tag color="green">发生时间</Tag>
                <span style={{ marginRight: 16 }}>{formatTime(item.itemTime)}</span>
                <Tag color="purple">记录时间</Tag>
                <span style={{ marginRight: 16 }}>{formatTime(item.activityTime)}</span>
                {item.itemLocation && (
                  <span>
                    <Tag color="gold">地点</Tag>
                    <span>{item.itemLocation}</span>
                  </span>
                )}
              </span>
            }
          />
          <div style={{ marginTop: 8 }}>
            <strong>描述：</strong>
            <span>{item.itemDescription}</span>
          </div>
          {item.remark && (
            <div style={{ marginTop: 4, color: '#888' }}>
              <strong>备注：</strong>
              <span>{item.remark}</span>
            </div>
          )}
        </List.Item>
      )}
    />
  );
};

export default Dynamic;