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_LOG_CATEGORY_LABELS,
  resolvePartnerLogCategory,
  type PartnerLogCategory,
} from '../lib/partner-log';
import { request } from '../lib/api';
import { fmtTime } from '../lib/constants';
import { useAdminList } from '../lib/useAdminList';

type Row = {
  id: string;
  partnerId: string;
  partnerAccountId: string | null;
  accountName: string | null;
  accountPhone: string | null;
  companyName: 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 columns: ColumnsType<Row> = [
    { title: '时间', dataIndex: 'createdAt', width: 160, render: fmtTime },
    {
      title: '合伙人',
      width: 180,
      render: (_, r) => (
        <div>
          <div>{r.companyName || '—'}</div>
          <div style={{ color: '#999', fontSize: 12 }}>{r.partnerId}</div>
        </div>
      ),
    },
    {
      title: '账号',
      width: 150,
      render: (_, r) => (
        <div>
          <div>{r.accountName || '—'}</div>
          <div style={{ color: '#999', fontSize: 12 }}>{r.accountPhone || r.partnerAccountId || '—'}</div>
        </div>
      ),
    },
    {
      title: '分类',
      dataIndex: 'category',
      width: 100,
      render: (v: PartnerLogCategory | null, r) => (
        <Tag>{PARTNER_LOG_CATEGORY_LABELS[v ?? ''] || resolvePartnerLogCategory(r.eventName) || '其他'}</Tag>
      ),
    },
    { title: '事件', dataIndex: 'eventName', width: 180 },
    {
      title: '关联',
      width: 120,
      render: (_, r) => (r.refType && r.refId ? `${r.refType}#${r.refId}` : '—'),
    },
    {
      title: '摘要',
      ellipsis: true,
      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>
      ),
    },
  ];

  return (
    <div>
      <Typography.Title level={4} style={{ marginBottom: 16 }}>
        合伙人日志
      </Typography.Title>
      <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="partnerId" allowClear style={{ width: 120 }} />
        </Form.Item>
        <Form.Item name="eventName" label="事件名">
          <Input placeholder="partner_sms_login" 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: 1100 }}
      />
      <Drawer title="日志详情" open={drawerOpen} onClose={() => setDrawerOpen(false)} width={520}>
        {detail && (
          <Descriptions column={1} bordered size="small">
            {Object.entries(detail).map(([k, v]) => (
              <Descriptions.Item key={k} label={k}>
                {typeof v === 'object' ? JSON.stringify(v, null, 2) : String(v ?? '—')}
              </Descriptions.Item>
            ))}
          </Descriptions>
        )}
      </Drawer>
    </div>
  );
}