import { useMemo, useState } from 'react'
import { keepPreviousData, useQuery } from '@tanstack/react-query'
import {
  Alert,
  AutoComplete,
  Button,
  InputNumber,
  Space,
  Tag,
  Typography,
  type TableColumnsType,
} from 'antd'
import { EyeOutlined, ReloadOutlined, SafetyCertificateOutlined } from '@ant-design/icons'

import { fetchAdminAuditLogs } from '@/features/admin/api'
import { AdminPageHeader } from '@/features/admin/components/AdminPageHeader'
import { DataTable } from '@/features/admin/components/DataTable'
import { DetailDrawer, type DetailSection } from '@/features/admin/components/DetailDrawer'
import { FilterBar, FilterField } from '@/features/admin/components/FilterBar'
import {
  auditActionMap,
  auditActionOptions,
  auditActorTypeMap,
  auditBizTypeMap,
  auditBizTypeOptions,
} from '@/features/admin/labels'
import type { AdminAuditLog, AdminAuditQuery } from '@/features/admin/types'
import { useAdminSessionStore } from '@/stores/adminSession'
import { formatDateTime, formatText } from '@/shared/utils/format'

const emptyFilters: AdminAuditQuery = {
  actor_id: undefined,
  action: '',
  biz_type: '',
}

function parseDetail(detail: unknown): unknown {
  if (typeof detail !== 'string') return detail
  const text = detail.trim()
  if (!text) return null
  try {
    return JSON.parse(text)
  } catch {
    return text
  }
}

function normalizeDetail(detail: unknown): string {
  const parsed = parseDetail(detail)
  if (parsed == null) return '—'
  if (typeof parsed === 'string') return parsed
  try {
    return JSON.stringify(parsed, null, 2)
  } catch {
    return String(parsed)
  }
}

function summarizeValue(value: unknown): string {
  if (value == null) return 'null'
  if (typeof value === 'string') return value
  if (typeof value === 'number' || typeof value === 'boolean') return String(value)
  try {
    return JSON.stringify(value)
  } catch {
    return String(value)
  }
}

function summarizeDetail(detail: unknown): string {
  const parsed = parseDetail(detail)
  if (parsed == null) return '—'
  if (typeof parsed === 'object' && !Array.isArray(parsed)) {
    const entries = Object.entries(parsed as Record<string, unknown>)
    if (entries.length === 0) return '{}'
    return entries
      .slice(0, 4)
      .map(([key, value]) => `${key}: ${summarizeValue(value)}`)
      .join(' · ')
  }
  const text = summarizeValue(parsed)
  return text.length > 120 ? `${text.slice(0, 120)}…` : text
}

function actorName(row: AdminAuditLog) {
  return row.actor_nickname || row.actor_username || `ID ${row.actor_id}`
}

function actorTypeLabel(value?: string | null) {
  if (!value) return '未知来源'
  return auditActorTypeMap[value] ?? value
}

function bizTypeLabel(value?: string | null) {
  if (!value) return '未关联业务'
  return auditBizTypeMap[value] ?? value
}

function buildColumns(onOpen: (row: AdminAuditLog) => void): TableColumnsType<AdminAuditLog> {
  return [
    {
      title: '时间 / 编号',
      dataIndex: 'created_at',
      width: 180,
      fixed: 'left',
      render: (_, row) => (
        <div className="admin-stack">
          <strong>{formatDateTime(row.created_at)}</strong>
          <span className="admin-mono">#{row.id}</span>
        </div>
      ),
    },
    {
      title: '操作人',
      key: 'actor',
      width: 210,
      render: (_, row) => (
        <div className="admin-stack">
          <button type="button" className="admin-order-link" onClick={() => onOpen(row)}>
            {actorName(row)}
          </button>
          <span>
            {actorTypeLabel(row.actor_type)}
            {row.actor_username ? ` · ${row.actor_username}` : ''}
          </span>
          <span className="admin-mono">ID {row.actor_id}</span>
        </div>
      ),
    },
    {
      title: '动作',
      dataIndex: 'action',
      width: 230,
      render: (_, row) => (
        <div className="admin-stack">
          <strong>{auditActionMap[row.action] ?? row.action}</strong>
          <span className="admin-mono">{row.action}</span>
        </div>
      ),
    },
    {
      title: '业务对象',
      key: 'biz',
      width: 150,
      render: (_, row) => (
        <div className="admin-stack">
          <span>{bizTypeLabel(row.biz_type)}</span>
          <span className="admin-mono">{row.biz_id != null ? `#${row.biz_id}` : '无关联 ID'}</span>
        </div>
      ),
    },
    {
      title: 'IP',
      dataIndex: 'ip',
      width: 140,
      render: value => <span className="admin-mono">{formatText(value)}</span>,
    },
    {
      title: '变更摘要',
      key: 'summary',
      width: 320,
      render: (_, row) => (
        <Typography.Text type="secondary" ellipsis={{ tooltip: summarizeDetail(row.detail) }}>
          <span className="admin-audit-summary">{summarizeDetail(row.detail)}</span>
        </Typography.Text>
      ),
    },
    {
      title: '操作',
      key: 'actions',
      width: 92,
      fixed: 'right',
      render: (_, row) => (
        <Button type="link" size="small" icon={<EyeOutlined />} onClick={() => onOpen(row)}>
          详情
        </Button>
      ),
    },
  ]
}

function buildSections(row: AdminAuditLog): DetailSection[] {
  return [
    {
      key: 'actor',
      title: '操作信息',
      icon: <SafetyCertificateOutlined />,
      fields: [
        {
          key: 'time',
          label: '发生时间',
          value: formatDateTime(row.created_at),
        },
        {
          key: 'log_id',
          label: '日志编号',
          value: <span className="admin-mono">#{row.id}</span>,
        },
        {
          key: 'actor',
          label: '操作人',
          value: (
            <div className="admin-stack">
              <strong>{actorName(row)}</strong>
              <span>{actorTypeLabel(row.actor_type)}</span>
            </div>
          ),
        },
        {
          key: 'actor_id',
          label: '操作人 ID',
          value: <span className="admin-mono">{row.actor_id}</span>,
        },
        {
          key: 'action',
          label: '动作',
          value: (
            <div className="admin-stack">
              <strong>{auditActionMap[row.action] ?? row.action}</strong>
              <span className="admin-mono">{row.action}</span>
            </div>
          ),
        },
        {
          key: 'biz',
          label: '业务对象',
          value: (
            <div className="admin-stack">
              <strong>{bizTypeLabel(row.biz_type)}</strong>
              <span className="admin-mono">{row.biz_id != null ? `#${row.biz_id}` : '—'}</span>
            </div>
          ),
        },
      ],
    },
    {
      key: 'request',
      title: '请求信息',
      fields: [
        {
          key: 'ip',
          label: '来源 IP',
          value: <span className="admin-mono">{formatText(row.ip)}</span>,
        },
        {
          key: 'user_agent',
          label: 'User-Agent',
          span: 2,
          value: <span className="admin-audit-ua">{formatText(row.user_agent)}</span>,
        },
      ],
    },
    {
      key: 'detail',
      title: '变更明细',
      fields: [
        {
          key: 'json',
          label: '原始 JSON',
          span: 2,
          value: <pre className="admin-detail__pre admin-detail__pre--tall">{normalizeDetail(row.detail)}</pre>,
        },
      ],
    },
  ]
}

export function AdminAuditLogsPage() {
  const [draft, setDraft] = useState<AdminAuditQuery>(emptyFilters)
  const [applied, setApplied] = useState<AdminAuditQuery>(emptyFilters)
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(20)
  const [selected, setSelected] = useState<AdminAuditLog | null>(null)
  const [detailOpen, setDetailOpen] = useState(false)
  const permissions = useAdminSessionStore(state => state.admin?.permissions)
  const canView = Boolean(
    permissions?.includes('*') || permissions?.includes('audit_log:view')
  )

  const { data, isPending, isFetching, isError, error, refetch } = useQuery({
    queryKey: ['admin-audit-logs', applied, page, pageSize],
    queryFn: () => fetchAdminAuditLogs({ ...applied, page, page_size: pageSize }),
    placeholderData: keepPreviousData,
    enabled: canView,
  })

  const columns = useMemo(
    () =>
      buildColumns(row => {
        setSelected(row)
        setDetailOpen(true)
      }),
    []
  )

  const patchFilter = (patch: Partial<AdminAuditQuery>) => {
    setDraft(current => ({ ...current, ...patch }))
  }

  const applyFilters = () => {
    setApplied({ ...draft })
    setPage(1)
  }

  const resetFilters = () => {
    setDraft(emptyFilters)
    setApplied(emptyFilters)
    setPage(1)
  }

  const hasActiveFilters = Boolean(draft.actor_id || draft.action || draft.biz_type)
  const errorText = error instanceof Error ? error.message : '请稍后重试或重新登录后台。'

  return (
    <div className="admin-page">
      <AdminPageHeader
        eyebrow="JIEYOU OPS · 系统"
        title="审计日志"
        description="追踪后台高风险操作、资金变更与关键配置调整，保留操作前后的完整明细。"
        meta={
          <Space size={8} wrap>
            <Tag color="geekblue">共 {data?.total ?? 0} 条</Tag>
            {isFetching && !isPending ? <Tag color="processing">正在更新</Tag> : null}
            <Tag>只读</Tag>
          </Space>
        }
        extra={
          <Button
            icon={<ReloadOutlined />}
            onClick={() => void refetch()}
            loading={isFetching}
            disabled={!canView}
          >
            刷新数据
          </Button>
        }
      />

      {!canView ? (
        <Alert
          type="warning"
          showIcon
          className="admin-table-alert"
          message="当前账号没有审计日志查看权限"
          description="需要 audit_log:view 权限才能读取后台操作记录，请联系超级管理员分配角色。"
        />
      ) : null}

      <FilterBar
        onSearch={applyFilters}
        onReset={hasActiveFilters ? resetFilters : undefined}
        loading={isFetching}
      >
        <FilterField label="管理员 ID" width={160}>
          <InputNumber
            min={1}
            precision={0}
            style={{ width: '100%' }}
            placeholder="如 1"
            value={draft.actor_id}
            onChange={value =>
              patchFilter({ actor_id: typeof value === 'number' ? value : undefined })
            }
          />
        </FilterField>
        <FilterField label="动作" width={270}>
          <AutoComplete
            allowClear
            value={draft.action || undefined}
            options={auditActionOptions}
            placeholder="如 order.admin_close"
            filterOption={(input, option) =>
              String(option?.value ?? '').includes(input) ||
              String(option?.label ?? '').includes(input)
            }
            onChange={value => patchFilter({ action: value ?? '' })}
          />
        </FilterField>
        <FilterField label="业务类型" width={200}>
          <AutoComplete
            allowClear
            value={draft.biz_type || undefined}
            options={auditBizTypeOptions}
            placeholder="如 order"
            filterOption={(input, option) =>
              String(option?.value ?? '').includes(input) ||
              String(option?.label ?? '').includes(input)
            }
            onChange={value => patchFilter({ biz_type: value ?? '' })}
          />
        </FilterField>
      </FilterBar>

      {isError ? (
        <Alert
          type="error"
          showIcon
          className="admin-table-alert"
          message="审计日志没有加载出来"
          description={errorText}
          action={
            <Button size="small" onClick={() => void refetch()}>
              重试
            </Button>
          }
        />
      ) : null}

      <DataTable<AdminAuditLog>
        title={<span>操作记录</span>}
        extra={
          <Typography.Text type="secondary">
            {data ? `第 ${data.page} 页 · 当前 ${data.items.length} 条` : '加载中'}
          </Typography.Text>
        }
        rowKey="id"
        columns={columns}
        dataSource={data?.items ?? []}
        loading={isFetching}
        total={data?.total ?? 0}
        page={data?.page ?? page}
        pageSize={data?.page_size ?? pageSize}
        onPageChange={(nextPage, nextPageSize) => {
          setPage(nextPageSize !== pageSize ? 1 : nextPage)
          setPageSize(nextPageSize)
        }}
        onRowClick={row => {
          setSelected(row)
          setDetailOpen(true)
        }}
        emptyDescription={canView ? '没有匹配的审计记录' : '当前账号没有查看权限'}
      />

      <DetailDrawer
        open={detailOpen}
        onClose={() => setDetailOpen(false)}
        title={selected ? auditActionMap[selected.action] ?? selected.action : '审计详情'}
        subtitle={
          selected
            ? `#${selected.id} · ${formatDateTime(selected.created_at)} · ${actorName(selected)}`
            : undefined
        }
        tags={
          selected ? (
            <Space size={6} wrap>
              <Tag color="geekblue">{bizTypeLabel(selected.biz_type)}</Tag>
              <Tag>{actorTypeLabel(selected.actor_type)}</Tag>
            </Space>
          ) : undefined
        }
        sections={selected ? buildSections(selected) : []}
        width={820}
        emptyDescription="没有可展示的审计详情"
      />
    </div>
  )
}