import { useState } from 'react';
import { Tag, Drawer, Descriptions } from 'antd';
import { ProTable, type ProColumns } from '@ant-design/pro-components';
import PageContainer from '@/components/common/PageContainer';
import { externalCallLogApi, ExternalCallLogResp } from '@/api/externalCallLog';

export default function ExternalCallLogList() {
  const [detail, setDetail] = useState<ExternalCallLogResp | null>(null);

  const columns: ProColumns<ExternalCallLogResp>[] = [
    { title: '호출시각', dataIndex: 'calledAt', width: 170, valueType: 'dateTime' },
    {
      title: '종류', dataIndex: 'callType', width: 90, valueType: 'select',
      valueEnum: { BANK: { text: '펌뱅킹' }, MESSAGE: { text: 'SMS/카카오' } },
      render: (_, r) => (
        <Tag color={r.callType === 'BANK' ? 'geekblue' : 'magenta'}>{r.callType}</Tag>
      ),
    },
    { title: '구현체', dataIndex: 'adapterClass', width: 200, search: false, ellipsis: true },
    { title: '메서드', dataIndex: 'methodName', width: 140 },
    {
      title: '대상', dataIndex: 'targetRefType', width: 160, search: false,
      render: (_, r) =>
        r.targetRefType ? `${r.targetRefType}#${r.targetRefId ?? ''}` : '-',
    },
    {
      title: '결과', dataIndex: 'success', width: 80,
      valueType: 'select',
      valueEnum: { true: { text: '성공' }, false: { text: '실패' } },
      render: (_, r) => (
        <Tag color={r.success ? 'success' : 'error'}>{r.success ? 'SUCCESS' : 'FAIL'}</Tag>
      ),
    },
    { title: '코드', dataIndex: 'resultCode', width: 90, search: false },
    {
      title: '소요(ms)', dataIndex: 'durationMs', width: 90, align: 'right', search: false,
    },
    {
      title: '메시지', dataIndex: 'resultMessage', ellipsis: true, search: false,
      render: (_, r) => r.errorMessage ?? r.resultMessage ?? '-',
    },
  ];

  return (
    <PageContainer
      title="외부연동 호출이력"
      description="펌뱅킹·SMS·카카오 어댑터 호출 감사 (AOP 자동 영속화)"
    >
      <ProTable<ExternalCallLogResp>
        rowKey="logId"
        columns={columns}
        dateFormatter="string"
        scroll={{ x: 1300 }}
        request={async (params) => {
          const { current, pageSize, ...rest } = params as any;
          const res = await externalCallLogApi.list({
            ...rest, pageNum: current, pageSize,
          });
          return { data: res.list, total: res.total, success: true };
        }}
        onRow={(record) => ({ onClick: () => setDetail(record), style: { cursor: 'pointer' } })}
        pagination={{ pageSize: 50, showTotal: (t) => `총 ${t.toLocaleString()}건` }}
        search={{
          labelWidth: 'auto', searchText: '검색', resetText: '초기화',
          collapsed: false, collapseRender: false,
        }}
      />

      <Drawer
        title={`호출 #${detail?.logId ?? ''}`}
        width={640}
        open={!!detail}
        onClose={() => setDetail(null)}
        destroyOnClose
      >
        {detail && (
          <Descriptions column={1} size="small" bordered>
            <Descriptions.Item label="호출시각">{detail.calledAt}</Descriptions.Item>
            <Descriptions.Item label="종류">{detail.callType}</Descriptions.Item>
            <Descriptions.Item label="구현체">{detail.adapterClass}</Descriptions.Item>
            <Descriptions.Item label="메서드">{detail.methodName}</Descriptions.Item>
            <Descriptions.Item label="대상">
              {detail.targetRefType ? `${detail.targetRefType}#${detail.targetRefId ?? ''}` : '-'}
            </Descriptions.Item>
            <Descriptions.Item label="결과">
              <Tag color={detail.success ? 'success' : 'error'}>
                {detail.success ? 'SUCCESS' : 'FAIL'}
              </Tag>
            </Descriptions.Item>
            <Descriptions.Item label="코드">{detail.resultCode ?? '-'}</Descriptions.Item>
            <Descriptions.Item label="메시지">{detail.resultMessage ?? '-'}</Descriptions.Item>
            <Descriptions.Item label="소요(ms)">{detail.durationMs ?? '-'}</Descriptions.Item>
            <Descriptions.Item label="요청">
              <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
                {detail.requestSummary ?? '-'}
              </pre>
            </Descriptions.Item>
            <Descriptions.Item label="응답">
              <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
                {detail.responseSummary ?? '-'}
              </pre>
            </Descriptions.Item>
            {detail.errorClass && (
              <Descriptions.Item label="예외">
                {detail.errorClass}: {detail.errorMessage ?? ''}
              </Descriptions.Item>
            )}
          </Descriptions>
        )}
      </Drawer>
    </PageContainer>
  );
}
