import { useEffect, useState } from 'react';
import { Button, Descriptions, Drawer, Form, Input, Segmented, Space, Table, Tag, Typography } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useSearchParams } from 'react-router-dom';
import {
  PARTNER_LOG_CATEGORY_OPTIONS,
  PARTNER_STAFF_ROLE_LABELS,
  type PartnerLogCategory,
  type PartnerStaffRole,
} from '@dukang/shared-types';
import { request } from '../lib/api';
import { AdminCellLine } from '../components/AdminCellLine';
import { fmtTime } from '../lib/constants';
import { clientAppLabel, eventNameLabel, formatRef, partnerEventCategoryLabel } from '../lib/display-labels';
import { useAdminList } from '../lib/useAdminList';
import { useAdminListColumns } from '../lib/useAdminListColumns';
import { AdminListHeader } from '../components/AdminListHeader';
import { AdminPrimaryLink } from '../components/AdminPrimaryLink';


type Row = {
  id: string;
  partnerId: string;
  partnerAccountId: string | null;
  accountName: string | null;
  accountPhone: string | null;
  companyName: string | null;
  isSubAccount?: boolean;
  staffRole?: string | null;
  category: PartnerLogCategory | null;
  eventName: string;
  clientApp: string | null;
  refType: string | null;
  refId: string | null;
  extraJson: Record<string, unknown> | null;
  createdAt: string;
};

function summarizeExtra(json: Record<string, unknown> | null) {
  if (!json) return '—';
  const text = JSON.stringify(json);
  return text.length > 80 ? `${text.slice(0, 80)}…` : text;
}

export default function PartnerLogsPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const [form] = Form.useForm();
  const [category, setCategory] = useState(searchParams.get('category') ?? '');
  const [filters, setFilters] = useState<Record<string, string>>(() => ({
    partnerId: searchParams.get('partnerId') ?? '',
    partnerAccountId: searchParams.get('partnerAccountId') ?? '',
    phone: searchParams.get('phone') ?? '',
    companyName: searchParams.get('companyName') ?? '',
    eventName: searchParams.get('eventName') ?? '',
  }));
  const { data, loading, page, pageSize, setPage, setPageSize } = useAdminList<Row>(
    '/admin/logs/partners',
    () => {
      const qs = new URLSearchParams();
      if (filters.partnerId) qs.set('partnerId', filters.partnerId);
      if (filters.partnerAccountId) qs.set('partnerAccountId', filters.partnerAccountId);
      if (filters.phone) qs.set('phone', filters.phone);
      if (filters.companyName) qs.set('companyName', filters.companyName);
      if (filters.eventName) qs.set('eventName', filters.eventName);
      if (category) qs.set('category', category);
      return qs;
    },
    [filters, category],
  );
  const [detail, setDetail] = useState<Record<string, unknown> | null>(null);
  const [drawerOpen, setDrawerOpen] = useState(false);

  useEffect(() => {
    form.setFieldsValue(filters);
  }, [form, filters]);

  const baseColumns: ColumnsType<Row> = [
    { title: '时间', dataIndex: 'createdAt', width: 160, render: fmtTime },
    {
      title: '合伙人',
      width: 180,
      render: (_, r) => (
        r.isSubAccount ? (
          <Tag color="blue">子账号</Tag>
        ) : (
          <AdminCellLine primary={r.companyName} secondary={r.partnerId} />
        )
      ),
    },
    {
      title: '账号',
      width: 150,
      render: (_, r) => (
        <AdminCellLine
          primary={r.accountName}
          secondary={
            r.isSubAccount && r.staffRole
              ? `${r.accountPhone || ''} · ${PARTNER_STAFF_ROLE_LABELS[r.staffRole as PartnerStaffRole] || r.staffRole}`
              : r.accountPhone || r.partnerAccountId
          }
        />
      ),
    },
    {
      title: '分类',
      dataIndex: 'category',
      width: 100,
      render: (v: PartnerLogCategory | null, r) => (
        <Tag>{partnerEventCategoryLabel(r.eventName, v)}</Tag>
      ),
    },
    {
      title: '事件',
      dataIndex: 'eventName',
      width: 180,
      render: (v, row) => (
        <AdminPrimaryLink
          onClick={async () => {
            setDetail(await request(`/admin/logs/partners/${row.id}`));
            setDrawerOpen(true);
          }}
        >
          {eventNameLabel(v)}
        </AdminPrimaryLink>
      ),
    },
    {
      title: '关联',
      width: 120,
      render: (_, r) => formatRef(r.refType, r.refId),
    },
    {
      title: '摘要',
      render: (_, r) => summarizeExtra(r.extraJson),
    },
    {
      title: '操作',
      width: 80,
      render: (_, row) => (
        <Button
          type="link"
          size="small"
          onClick={async () => {
            setDetail(await request(`/admin/logs/partners/${row.id}`));
            setDrawerOpen(true);
          }}
        >
          详情
        </Button>
      ),
    },
  ];

  const { columns, settingsButton, settingsModal } = useAdminListColumns('logs-partners', baseColumns, { page, pageSize });

  return (
    <div>
      {settingsModal}
      <AdminListHeader title="合伙人日志" settings={settingsButton} />
      <Segmented
        options={PARTNER_LOG_CATEGORY_OPTIONS.map((o) => ({ value: o.value, label: o.label }))}
        value={category}
        onChange={(v) => {
          setCategory(String(v));
          setPage(1);
          setSearchParams((prev) => {
            const next = new URLSearchParams(prev);
            if (v) next.set('category', String(v));
            else next.delete('category');
            return next;
          });
        }}
        style={{ marginBottom: 16 }}
      />
      <Form
        form={form}
        layout="inline"
        style={{ marginBottom: 16, flexWrap: 'wrap', gap: 8 }}
        onFinish={(values) => {
          setFilters(values);
          setPage(1);
        }}
      >
        <Form.Item name="phone" label="手机号">
          <Input placeholder="账号手机号" allowClear style={{ width: 140 }} />
        </Form.Item>
        <Form.Item name="companyName" label="公司">
          <Input placeholder="合伙人公司" allowClear style={{ width: 140 }} />
        </Form.Item>
        <Form.Item name="partnerId" label="合伙人 ID">
          <Input placeholder="合伙人 ID" allowClear style={{ width: 120 }} />
        </Form.Item>
        <Form.Item name="eventName" label="事件编码">
          <Input placeholder="事件编码" allowClear style={{ width: 160 }} />
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button
              onClick={() => {
                form.resetFields();
                setFilters({
                  partnerId: '',
                  partnerAccountId: '',
                  phone: '',
                  companyName: '',
                  eventName: '',
                });
                setPage(1);
              }}
            >
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
      <Table
        rowKey="id"
        loading={loading}
        columns={columns}
        dataSource={data?.items ?? []}
        pagination={{
          current: page,
          pageSize,
          total: data?.total ?? 0,
          showSizeChanger: true,
          onChange: (p, ps) => {
            setPage(p);
            setPageSize(ps);
          },
        }}
        scroll={{ x: 'max-content' }}
      />
      <Drawer title="日志详情" open={drawerOpen} onClose={() => setDrawerOpen(false)} width={520}>
        {detail && (
          <Descriptions column={1} bordered size="small">
            <Descriptions.Item label="ID">{String(detail.id ?? '—')}</Descriptions.Item>
            <Descriptions.Item label="合伙人">{String(detail.companyName || detail.partnerId || '—')}</Descriptions.Item>
            <Descriptions.Item label="账号">{String(detail.accountName || detail.accountPhone || '—')}</Descriptions.Item>
            <Descriptions.Item label="分类">{partnerEventCategoryLabel(String(detail.eventName ?? ''), detail.category ? String(detail.category) : null)}</Descriptions.Item>
            <Descriptions.Item label="事件">{eventNameLabel(String(detail.eventName ?? ''))}</Descriptions.Item>
            <Descriptions.Item label="端">{clientAppLabel(detail.clientApp ? String(detail.clientApp) : null)}</Descriptions.Item>
            <Descriptions.Item label="关联">{formatRef(detail.refType ? String(detail.refType) : null, detail.refId ? String(detail.refId) : null)}</Descriptions.Item>
            <Descriptions.Item label="时间">{fmtTime(detail.createdAt ? String(detail.createdAt) : null)}</Descriptions.Item>
            <Descriptions.Item label="参数">
              <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
                {JSON.stringify(detail.extraJson ?? {}, null, 2)}
              </pre>
            </Descriptions.Item>
          </Descriptions>
        )}
      </Drawer>
    </div>
  );
}