import { useCallback, useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { Card, Descriptions, Drawer, Select, Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { request } from '../lib/api';
import { fmtTime } from '../lib/constants';
import {
  DOMAIN_EVENT_TYPE_LABELS,
  domainParamFieldLabel,
  domainParamValue,
  formatRef,
  zhCode,
  zhLabel,
} from '../lib/display-labels';
import { useAdminListColumns } from '../lib/useAdminListColumns';
import { AdminPrimaryLink } from '../components/AdminPrimaryLink';


type Row = {
  id: string;
  eventType: string;
  refType: string;
  refId: string;
  status?: string | null;
  param1?: string | null;
  param1Desc?: string | null;
  param2?: string | null;
  param2Desc?: string | null;
  param3?: string | null;
  param3Desc?: string | null;
  remark?: string | null;
  createdAt: string;
};

const EVENT_OPTIONS = [
  { value: '', label: '全部领域事件' },
  { value: 'ORDER_STATUS', label: '订单状态' },
  { value: 'BENEFIT_LEDGER', label: '权益流水' },
  { value: 'STORE_AUDIT', label: '门店审核' },
  { value: 'TICKET_COLLAB', label: '工单协作' },
  { value: 'PROMO_TOUCH', label: '推广触达' },
];

export default function DomainEventsPage() {
  const [params, setParams] = useSearchParams();
  const eventType = params.get('eventType') ?? '';
  const refType = params.get('refType') ?? '';
  const refId = params.get('refId') ?? '';
  const [data, setData] = useState<{ items: Row[]; total: number; page: number; pageSize: number } | null>(null);
  const [loading, setLoading] = useState(false);
  const [detail, setDetail] = useState<Row | null>(null);

  const load = useCallback(() => {
    setLoading(true);
    const q = new URLSearchParams();
    if (eventType) q.set('eventType', eventType);
    if (refType) q.set('refType', refType);
    if (refId) q.set('refId', refId);
    q.set('page', params.get('page') ?? '1');
    q.set('pageSize', '20');
    request<{ items: Row[]; total: number; page: number; pageSize: number }>(
      `/admin/logs/domain-events?${q.toString()}`,
    )
      .then(setData)
      .finally(() => setLoading(false));
  }, [eventType, refType, refId, params]);

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

  const baseColumns: ColumnsType<Row> = [
    { title: '时间', dataIndex: 'createdAt', width: 170, render: (v) => fmtTime(v) },
    {
      title: '类型',
      dataIndex: 'eventType',
      width: 130,
      render: (v, r) => (
        <AdminPrimaryLink
          onClick={async () => {
            setDetail(await request<Row>(`/admin/logs/domain-events/${r.id}`));
          }}
        >
          <Tag>{zhLabel(DOMAIN_EVENT_TYPE_LABELS, v)}</Tag>
        </AdminPrimaryLink>
      ),
    },
    { title: '关联', render: (_, r) => formatRef(r.refType, r.refId) },
    { title: '状态', dataIndex: 'status', width: 100, render: (v) => zhCode(v) },
    {
      title: '摘要',
      render: (_, r) => domainParamValue(r.param1Desc, r.param1) !== '—'
        ? domainParamValue(r.param1Desc, r.param1)
        : (r.remark || '—'),
    },
    {
      title: '操作',
      width: 80,
      render: (_, r) => (
        <a
          onClick={async () => {
            setDetail(await request<Row>(`/admin/logs/domain-events/${r.id}`));
          }}
        >
          详情
        </a>
      ),
    },
  ];

  const page = Number(params.get('page') ?? 1);
  const pageSize = data?.pageSize ?? 20;
  const { columns, settingsButton, settingsModal } = useAdminListColumns('logs-domain-events', baseColumns, { page, pageSize });

  return (
    <Card title="领域事件" extra={settingsButton}>
      {settingsModal}
      <Space wrap style={{ marginBottom: 16 }}>
        <Select
          style={{ width: 180 }}
          value={eventType}
          options={EVENT_OPTIONS}
          onChange={(v) => {
            const next = new URLSearchParams(params);
            if (v) next.set('eventType', v);
            else next.delete('eventType');
            next.set('page', '1');
            setParams(next);
          }}
        />
      </Space>
      <Table
        rowKey="id"
        loading={loading}
        columns={columns}
        dataSource={data?.items ?? []}
        pagination={{
          current: data?.page ?? 1,
          pageSize: data?.pageSize ?? 20,
          total: data?.total ?? 0,
          onChange: (p) => {
            const next = new URLSearchParams(params);
            next.set('page', String(p));
            setParams(next);
          },
        }}
      />
      <Drawer open={!!detail} title="事件详情" width={520} onClose={() => setDetail(null)}>
        {detail && (
          <Descriptions column={1} size="small">
            <Descriptions.Item label="ID">{detail.id}</Descriptions.Item>
            <Descriptions.Item label="类型">{zhLabel(DOMAIN_EVENT_TYPE_LABELS, detail.eventType)}</Descriptions.Item>
            <Descriptions.Item label="关联">{formatRef(detail.refType, detail.refId)}</Descriptions.Item>
            <Descriptions.Item label="状态">{zhCode(detail.status)}</Descriptions.Item>
            <Descriptions.Item label={domainParamFieldLabel(detail.param1Desc, 1)}>
              {domainParamValue(detail.param1Desc, detail.param1)}
            </Descriptions.Item>
            <Descriptions.Item label={domainParamFieldLabel(detail.param2Desc, 2)}>
              {domainParamValue(detail.param2Desc, detail.param2)}
            </Descriptions.Item>
            <Descriptions.Item label={domainParamFieldLabel(detail.param3Desc, 3)}>
              {domainParamValue(detail.param3Desc, detail.param3)}
            </Descriptions.Item>
            <Descriptions.Item label="备注">{detail.remark}</Descriptions.Item>
            <Descriptions.Item label="时间">{fmtTime(detail.createdAt)}</Descriptions.Item>
          </Descriptions>
        )}
      </Drawer>
    </Card>
  );
}
