import React, { useEffect, useMemo, useState } from 'react';
import {
  Button, Card, DatePicker, Input, message, Select, Space, Table, Tag, Typography,
} from 'antd';
import {
  ArrowDownOutlined, ArrowUpOutlined, DownloadOutlined, ReloadOutlined, RollbackOutlined, WalletOutlined,
} from '@ant-design/icons';
import { exportStyledExcel, type StyledExcelColumn } from '../utils/excelExport';
import dayjs from 'dayjs';
import { getCreditRecords } from '../api';
import type { AdminCreditRecord, AdminCreditRecordQueryParams, AdminCreditRecordSummary } from '../types';
import { formatDate } from '../utils/formatDate';

const DEFAULT_SUMMARY: AdminCreditRecordSummary = {
  totalRecharge: 0,
  totalConsume: 0,
  totalRefund: 0,
  transactionCount: 0,
  generationCount: 0,
  generationAttemptCount: 0,
  imageGenerationCount: 0,
  videoGenerationCount: 0,
  imageConsume: 0,
  videoConsume: 0,
  textConsume: 0,
  analysisConsume: 0,
  totalTokens: 0,
  inputTokens: 0,
  outputTokens: 0,
};

const RECORD_TYPE_MAP: Record<string, { text: string; color: string; icon: React.ReactNode }> = {
  recharge: { text: '充值', color: 'green', icon: <ArrowUpOutlined /> },
  consume: { text: '消费', color: 'red', icon: <ArrowDownOutlined /> },
  refund: { text: '回退', color: 'blue', icon: <RollbackOutlined /> },
};

const userScopeOptions = [
  { value: '', label: '全部用户' },
  { value: 'admin', label: '后台用户' },
  { value: 'frontend_internal', label: '前台内部用户' },
  { value: 'frontend_external', label: '前台外部用户' },
];

const recordTypeOptions = [
  { value: '', label: '全部流水' },
  { value: 'recharge', label: '充值' },
  { value: 'consume', label: '消费' },
  { value: 'refund', label: '回退' },
];

const creditSubjectOptions = [
  { value: '', label: '全部积分类型' },
  { value: 'media', label: '图片/视频生成积分' },
  { value: 'text', label: '提词优化积分' },
  { value: 'module', label: '模块功能积分' },
  { value: 'analysis', label: '分析积分' },
  { value: 'split', label: '切片积分' },
  { value: 'admin_adjust', label: '管理员调整' },
  { value: 'recharge', label: '充值积分' },
  { value: 'unknown', label: '历史未知' },
];

const mediaTypeOptions = [
  { value: '', label: '全部媒体' },
  { value: 'image', label: '图片' },
  { value: 'video', label: '视频' },
];

const chargeKindOptions = [
  { value: '', label: '全部扣费子类' },
  { value: 'media', label: '媒体生成' },
  { value: 'text_prompt', label: '提词优化' },
  { value: 'file_parse', label: '文件解析' },
  { value: 'vision_input', label: '图片理解' },
  { value: 'module_create', label: '创建模块项目' },
  { value: 'video_analysis', label: '视频分析' },
  { value: 'video_split', label: '视频切片' },
  { value: 'admin_adjust', label: '管理员调整' },
];

const sourceModuleOptions = [
  { value: '', label: '全部模块' },
  { value: 'ai_creation', label: 'AI创作' },
  { value: 'generation_record', label: '项目记录' },
  { value: 'hot_opening_replicate', label: '爆款开头复刻' },
  { value: 'shot_replicate', label: '拆镜复刻' },
  { value: 'admin', label: '后台管理' },
  { value: 'payment', label: '支付充值' },
  { value: 'unknown', label: '历史未知' },
];

const sourceStepOptions = [
  { value: '', label: '全部步骤' },
  { value: 'image_prompt_optimize', label: '图片提词优化' },
  { value: 'image_generate', label: '图片生成' },
  { value: 'video_prompt_optimize', label: '视频提词优化' },
  { value: 'video_generate', label: '视频生成' },
  { value: 'video_analysis', label: '视频分析' },
];

const billingSceneOptions = [
  { value: '', label: '全部计费场景' },
  { value: 'ai_creation_image_generate', label: 'AI创作图片生成' },
  { value: 'ai_creation_video_generate', label: 'AI创作视频生成' },
  { value: 'generation_record_text_prompt_optimize', label: '项目记录提词优化' },
  { value: 'generation_record_image_generate', label: '项目记录图片生成' },
  { value: 'generation_record_video_generate', label: '项目记录视频生成' },
  { value: 'generation_record_file_parse', label: '项目记录文件解析' },
  { value: 'generation_record_vision_input', label: '项目记录图片理解' },
  { value: 'hot_opening_project_create', label: '爆款开头复刻创建项目' },
  { value: 'hot_opening_image_prompt_optimize', label: '爆款开头复刻图片提词优化' },
  { value: 'hot_opening_image_generate', label: '爆款开头复刻图片生成' },
  { value: 'hot_opening_video_prompt_optimize', label: '爆款开头复刻视频提词优化' },
  { value: 'hot_opening_video_generate', label: '爆款开头复刻视频生成' },
  { value: 'shot_video_analysis', label: '拆镜视频分析' },
  { value: 'shot_original_video_analysis', label: '拆镜复刻原视频分析' },
  { value: 'shot_segment_video_analysis', label: '拆镜复刻片段视频分析' },
  { value: 'shot_video_split', label: '拆镜切片' },
  { value: 'shot_segment_replicate_create', label: '从切片创建复刻项目' },
  { value: 'shot_image_prompt_optimize', label: '拆镜复刻图片提词优化' },
  { value: 'shot_image_generate', label: '拆镜复刻图片生成' },
  { value: 'shot_video_prompt_optimize', label: '拆镜复刻视频提词优化' },
  { value: 'shot_video_generate', label: '拆镜复刻视频生成' },
  { value: 'recharge', label: '充值' },
  { value: 'admin_adjust', label: '管理员调整' },
  { value: 'refund', label: '回退' },
  { value: 'unknown', label: '历史未知' },
];

function n(value: number | undefined | null): string {
  return Number(value || 0).toLocaleString();
}

function engineTypeLabel(type?: string): string {
  if (type === 'model') return '提词/分析模型';
  if (type === 'image') return '图片引擎';
  if (type === 'video') return '视频引擎';
  return '执行配置';
}

function buildScope(scope: string): Pick<AdminCreditRecordQueryParams, 'userType' | 'frontendUserKind'> {
  if (scope === 'admin') return { userType: 'admin' };
  if (scope === 'frontend_internal') return { userType: 'frontend', frontendUserKind: 'internal' };
  if (scope === 'frontend_external') return { userType: 'frontend', frontendUserKind: 'external' };
  return {};
}

const AdminCreditRecords: React.FC = () => {
  const [records, setRecords] = useState<AdminCreditRecord[]>([]);
  const [summary, setSummary] = useState<AdminCreditRecordSummary>(DEFAULT_SUMMARY);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [exporting, setExporting] = useState(false);
  const [exportProgress, setExportProgress] = useState('');
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const [userScope, setUserScope] = useState('');
  const [recordType, setRecordType] = useState('');
  const [creditSubject, setCreditSubject] = useState('');
  const [mediaType, setMediaType] = useState('');
  const [chargeKind, setChargeKind] = useState('');
  const [sourceModule, setSourceModule] = useState('');
  const [sourceStepCode, setSourceStepCode] = useState('');
  const [billingScene, setBillingScene] = useState('');
  const [userNameFilter, setUserNameFilter] = useState('');
  const [dateRange, setDateRange] = useState<[dayjs.Dayjs | null, dayjs.Dayjs | null]>([null, null]);

  const query = useMemo<AdminCreditRecordQueryParams>(() => ({
    page,
    pageSize,
    userName: userNameFilter || undefined,
    recordType: recordType || undefined,
    creditSubject: creditSubject || undefined,
    mediaType: mediaType || undefined,
    chargeKind: chargeKind || undefined,
    sourceModule: sourceModule || undefined,
    sourceStepCode: sourceStepCode || undefined,
    billingScene: billingScene || undefined,
    startDate: dateRange[0]?.format('YYYY-MM-DD'),
    endDate: dateRange[1]?.format('YYYY-MM-DD'),
    ...buildScope(userScope),
  }), [page, pageSize, userNameFilter, recordType, creditSubject, mediaType, chargeKind, sourceModule, sourceStepCode, billingScene, dateRange, userScope]);

  const load = async () => {
    setLoading(true);
    try {
      const res = await getCreditRecords(query);
      setRecords(res.items || []);
      setTotal(res.total || 0);
      setSummary(res.summary || DEFAULT_SUMMARY);
    } catch (e: any) {
      message.error(e?.message || '加载积分记录失败');
    } finally {
      setLoading(false);
    }
  };

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

  const handleReset = () => {
    setUserScope('');
    setRecordType('');
    setCreditSubject('');
    setMediaType('');
    setChargeKind('');
    setSourceModule('');
    setSourceStepCode('');
    setBillingScene('');
    setUserNameFilter('');
    setDateRange([null, null]);
    setPage(1);
  };

  const exportExcel = async () => {
    setExporting(true);
    setExportProgress('准备导出...');
    try {
      const exportPageSize = 500;
      const baseQuery = { ...query, page: 1, pageSize: exportPageSize };
      const first = await getCreditRecords(baseQuery);
      const all: AdminCreditRecord[] = [...(first.items || [])];
      const exportSummary = first.summary || DEFAULT_SUMMARY;
      const totalRows = first.total || 0;
      const totalPages = Math.max(1, Math.ceil(totalRows / exportPageSize));
      setExportProgress(`正在获取 ${all.length} / ${totalRows}`);
      for (let p = 2; p <= totalPages; p += 1) {
        const res = await getCreditRecords({ ...baseQuery, page: p });
        all.push(...(res.items || []));
        setExportProgress(`正在获取 ${Math.min(all.length, totalRows)} / ${totalRows}`);
      }

      const detailColumns: StyledExcelColumn<AdminCreditRecord>[] = [
        { title: '时间', maxWidth: 22, render: (r) => formatDate(r.createdAt || '') },
        { title: '用户', minWidth: 12, maxWidth: 20, render: (r) => r.username || '-' },
        { title: '手机号', minWidth: 13, maxWidth: 18, render: (r) => r.phone || '-' },
        { title: '用户类型', maxWidth: 16, render: (r) => r.userTypeLabel || '-' },
        { title: '前台归类', maxWidth: 18, render: (r) => r.frontendUserKindLabel || '-' },
        { title: '流水类型', maxWidth: 14, align: 'center', render: (r) => r.recordTypeLabel || r.type || '-' },
        { title: '积分类型', maxWidth: 20, render: (r) => r.creditSubjectLabel || '-' },
        { title: '扣费子类', maxWidth: 22, render: (r) => r.chargeKindLabel || '-' },
        { title: '模块', maxWidth: 20, render: (r) => r.sourceModuleLabel || '-' },
        { title: '模块步骤', maxWidth: 22, render: (r) => r.sourceStepCodeLabel || '-' },
        { title: '计费场景', maxWidth: 32, render: (r) => r.billingSceneLabel || '-' },
        { title: '媒体类型', maxWidth: 12, align: 'center', render: (r) => r.mediaTypeLabel || '-' },
        { title: '变动积分', minWidth: 12, maxWidth: 14, align: 'right', numFmt: '#,##0.00', render: (r) => r.amount },
        { title: '变动后余额', minWidth: 12, maxWidth: 14, align: 'right', numFmt: '#,##0.00', render: (r) => r.balanceAfter },
        { title: '实际 Token', minWidth: 12, maxWidth: 14, align: 'right', numFmt: '#,##0', render: (r) => r.totalTokens || 0 },
        { title: '输入 Token', minWidth: 12, maxWidth: 14, align: 'right', numFmt: '#,##0', render: (r) => r.inputTokens || 0 },
        { title: '输出 Token', minWidth: 12, maxWidth: 14, align: 'right', numFmt: '#,##0', render: (r) => r.outputTokens || 0 },
        { title: '执行类型', maxWidth: 18, render: (r) => engineTypeLabel(r.engineType) },
        { title: '执行配置', maxWidth: 28, render: (r) => r.engineName || '-' },
        { title: '供应商', maxWidth: 18, render: (r) => r.engineProvider || '-' },
        { title: '模型版本', maxWidth: 26, render: (r) => r.engineModelName || '-' },
        { title: '关联状态', maxWidth: 14, align: 'center', render: (r) => r.ownerDeleted ? '关联已删除' : '正常' },
        { title: '说明', minWidth: 18, maxWidth: 42, render: (r) => r.description || '' },
        { title: '业务归属类型', maxWidth: 18, render: (r) => r.ownerType || '' },
        { title: '业务归属ID', maxWidth: 28, render: (r) => r.ownerId || '' },
        { title: 'BizKey', maxWidth: 36, render: (r) => r.bizKey || '' },
      ];

      const filename = `积分流水_${dayjs().format('YYYYMMDD_HHmmss')}.xlsx`;
      exportStyledExcel<AdminCreditRecord>({
        filename,
        sheetName: '积分流水',
        title: '积分流水汇总',
        metadataRows: [
          ['筛选时间', `${dateRange[0]?.format('YYYY-MM-DD') || '不限'} 至 ${dateRange[1]?.format('YYYY-MM-DD') || '不限'}`],
          ['导出时间', dayjs().format('YYYY-MM-DD HH:mm:ss')],
          ['导出条数', totalRows],
        ],
        summaryRows: [
          ['总充值', exportSummary.totalRecharge],
          ['总消费', exportSummary.totalConsume],
          ['总回退', exportSummary.totalRefund],
          ['交易笔数', exportSummary.transactionCount],
          ['生成条数', exportSummary.generationCount],
          ['生成尝试次数', exportSummary.generationAttemptCount],
          ['图片生成条数', exportSummary.imageGenerationCount],
          ['视频生成条数', exportSummary.videoGenerationCount],
          ['图片消费积分', exportSummary.imageConsume],
          ['视频消费积分', exportSummary.videoConsume],
          ['提词消费积分', exportSummary.textConsume],
          ['视频分析积分', exportSummary.analysisConsume],
          ['总 Token', exportSummary.totalTokens],
          ['输入 Token', exportSummary.inputTokens],
          ['输出 Token', exportSummary.outputTokens],
        ],
        columns: detailColumns,
        rows: all,
      });
      message.success('Excel 已导出');
    } catch (e: any) {
      message.error(e?.message || '导出失败');
    } finally {
      setExporting(false);
      setExportProgress('');
    }
  };

  const columns = [
    { title: '用户', dataIndex: 'username', width: 130, fixed: 'left' as const, render: (v: string, r: AdminCreditRecord) => <div><Typography.Text strong>{v || '-'}</Typography.Text><div style={{ fontSize: 12, color: '#94a3b8' }}>{r.phone || '-'}</div></div> },
    { title: '用户类型', dataIndex: 'userTypeLabel', width: 120, render: (_: string, r: AdminCreditRecord) => <Tag color={r.userType === 'admin' ? 'orange' : 'blue'}>{r.userTypeLabel || '-'}</Tag> },
    { title: '流水类型', dataIndex: 'recordType', width: 100, render: (v: string, r: AdminCreditRecord) => { const cfg = RECORD_TYPE_MAP[v] || { text: r.recordTypeLabel || v || '-', color: 'default', icon: null }; return <Tag color={cfg.color} icon={cfg.icon}>{cfg.text}</Tag>; } },
    { title: '积分类型', dataIndex: 'creditSubjectLabel', width: 150, render: (v: string) => <Tag>{v || '-'}</Tag> },
    { title: '模块', dataIndex: 'sourceModuleLabel', width: 130, render: (v: string) => v || '-' },
    { title: '步骤/场景', key: 'scene', width: 210, render: (_: any, r: AdminCreditRecord) => <div><div>{r.billingSceneLabel || '-'}</div><div style={{ fontSize: 12, color: '#94a3b8' }}>{r.sourceStepCodeLabel || '-'}</div></div> },
    { title: '媒体', dataIndex: 'mediaTypeLabel', width: 80, render: (v: string) => v ? <Tag color="purple">{v}</Tag> : '-' },
    { title: '变动积分', dataIndex: 'amount', width: 120, sorter: (a: AdminCreditRecord, b: AdminCreditRecord) => a.amount - b.amount, render: (v: number) => <Typography.Text strong style={{ color: v > 0 ? '#10b981' : '#ef4444' }}>{v > 0 ? '+' : ''}{n(v)}</Typography.Text> },
    { title: '余额', dataIndex: 'balanceAfter', width: 110, render: (v: number) => n(v) },
    { title: 'Token', key: 'tokens', width: 140, render: (_: any, r: AdminCreditRecord) => <div><b>{n(r.totalTokens)}</b><div style={{ fontSize: 12, color: '#94a3b8' }}>入 {n(r.inputTokens)} / 出 {n(r.outputTokens)}</div></div> },
    { title: '执行配置', key: 'engine', width: 230, render: (_: any, r: AdminCreditRecord) => <div><Tag color={r.engineType === 'model' ? 'geekblue' : r.engineType === 'image' ? 'purple' : r.engineType === 'video' ? 'cyan' : 'default'}>{engineTypeLabel(r.engineType)}</Tag><div>{r.engineName || '-'}</div><div style={{ fontSize: 12, color: '#94a3b8' }}>{[r.engineProvider, r.engineModelName].filter(Boolean).join(' / ') || '-'}</div></div> },
    { title: '关联状态', dataIndex: 'ownerDeleted', width: 100, render: (v: boolean) => <Tag color={v ? 'red' : 'green'}>{v ? '已删除' : '正常'}</Tag> },
    { title: '说明', dataIndex: 'description', width: 240, ellipsis: true },
    { title: '时间', dataIndex: 'createdAt', width: 160, render: (v: string) => <Typography.Text type="secondary" style={{ fontSize: 12 }}>{formatDate(v)}</Typography.Text> },
  ];

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 16, marginBottom: 16 }}>
        <Card bordered={false} style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}><Space><ArrowUpOutlined style={{ color: '#10b981', fontSize: 22 }} /><div><div style={{ color: '#94a3b8' }}>总充值</div><div style={{ fontSize: 22, fontWeight: 800, color: '#10b981' }}>+{n(summary.totalRecharge)}</div></div></Space></Card>
        <Card bordered={false} style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}><Space><ArrowDownOutlined style={{ color: '#ef4444', fontSize: 22 }} /><div><div style={{ color: '#94a3b8' }}>总消费</div><div style={{ fontSize: 22, fontWeight: 800, color: '#ef4444' }}>-{n(summary.totalConsume)}</div></div></Space></Card>
        <Card bordered={false} style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}><Space><RollbackOutlined style={{ color: '#3b82f6', fontSize: 22 }} /><div><div style={{ color: '#94a3b8' }}>总回退</div><div style={{ fontSize: 22, fontWeight: 800, color: '#3b82f6' }}>+{n(summary.totalRefund)}</div></div></Space></Card>
        <Card bordered={false} style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}><Space><WalletOutlined style={{ color: '#6366f1', fontSize: 22 }} /><div><div style={{ color: '#94a3b8' }}>交易 / 生成</div><div style={{ fontSize: 22, fontWeight: 800 }}>{n(summary.transactionCount)} / {n(summary.generationCount)}</div></div></Space></Card>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 16, marginBottom: 16 }}>
        <Card size="small" bordered={false}>图片生成：{n(summary.imageGenerationCount)} 条 / {n(summary.imageConsume)} 积分</Card>
        <Card size="small" bordered={false}>视频生成：{n(summary.videoGenerationCount)} 条 / {n(summary.videoConsume)} 积分</Card>
        <Card size="small" bordered={false}>提词消费：{n(summary.textConsume)} 积分</Card>
        <Card size="small" bordered={false}>视频分析：{n(summary.analysisConsume)} 积分</Card>
      </div>

      <Card bordered={false} style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 12 }}>
          <Space wrap>
            <Select value={userScope} onChange={(v) => { setPage(1); setUserScope(v); }} style={{ width: 150 }} options={userScopeOptions} />
            <Select value={recordType} onChange={(v) => { setPage(1); setRecordType(v); }} style={{ width: 130 }} options={recordTypeOptions} />
            <Select value={creditSubject} onChange={(v) => { setPage(1); setCreditSubject(v); }} style={{ width: 180 }} options={creditSubjectOptions} />
            <Select value={mediaType} onChange={(v) => { setPage(1); setMediaType(v); }} style={{ width: 110 }} options={mediaTypeOptions} />
            <Select value={chargeKind} onChange={(v) => { setPage(1); setChargeKind(v); }} style={{ width: 150 }} options={chargeKindOptions} />
            <Select value={sourceModule} onChange={(v) => { setPage(1); setSourceModule(v); }} style={{ width: 150 }} options={sourceModuleOptions} />
            <Select value={sourceStepCode} onChange={(v) => { setPage(1); setSourceStepCode(v); }} style={{ width: 150 }} options={sourceStepOptions} />
            <Select value={billingScene} onChange={(v) => { setPage(1); setBillingScene(v); }} style={{ width: 220 }} options={billingSceneOptions} />
            <Input placeholder="用户名/手机号/邮箱" value={userNameFilter} onChange={(e) => { setPage(1); setUserNameFilter(e.target.value); }} style={{ width: 180 }} allowClear />
            <DatePicker.RangePicker value={dateRange} onChange={(dates) => { setPage(1); setDateRange(dates ? [dates[0], dates[1]] : [null, null]); }} placeholder={['开始日期', '结束日期']} style={{ width: 250 }} />
          </Space>
          <Space>
            <Button onClick={handleReset}>重置</Button>
            <Button icon={<ReloadOutlined />} onClick={load}>刷新</Button>
            <Button type="primary" icon={<DownloadOutlined />} loading={exporting} onClick={exportExcel}>下载 Excel</Button>
          </Space>
        </div>
        {exportProgress && <div style={{ marginBottom: 12, color: '#6366f1' }}>{exportProgress}</div>}
        <Table
          columns={columns}
          dataSource={records}
          rowKey="id"
          loading={loading}
          pagination={{
            current: page,
            pageSize,
            total,
            onChange: (p, ps) => { setPage(p); setPageSize(ps); },
            showSizeChanger: true,
            showTotal: (t) => `共 ${t} 条记录`,
          }}
          scroll={{ x: 1900 }}
        />
      </Card>
    </div>
  );
};

export default AdminCreditRecords;
