import React, { useState, useEffect } from 'react';
import { Table, Tag, Button, message } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

// 消耗记录数据类型
interface ConsumptionRecord {
  id: string;
  authorizationId: string;
  amount: number;
  type: string;
  description: string;
  createdAt: string;
}

// 模拟消耗记录数据
const mockConsumptionRecords: ConsumptionRecord[] = [
  { id: 'C001', authorizationId: '1867060028363785', amount: 100, type: 'video', description: '视频生成消耗', createdAt: '2024-01-15 10:30:00' },
  { id: 'C002', authorizationId: '1867060028363785', amount: 50, type: 'audio', description: '音频转换消耗', createdAt: '2024-01-15 11:20:00' },
  { id: 'C003', authorizationId: '1867059808785418', amount: 200, type: 'video', description: '视频生成消耗', createdAt: '2024-01-14 14:45:00' },
  { id: 'C004', authorizationId: '1867060028363785', amount: 75, type: 'image', description: '图片处理消耗', createdAt: '2024-01-14 09:15:00' },
  { id: 'C005', authorizationId: '1867059757929740', amount: 150, type: 'video', description: '视频生成消耗', createdAt: '2024-01-13 16:00:00' },
];

// 消耗类型配置
const consumptionTypeConfig = {
  video: { label: '视频生成', color: 'blue' },
  audio: { label: '音频转换', color: 'purple' },
  image: { label: '图片处理', color: 'green' },
};

// 表头配置
const columns = [
  { title: '序号', dataIndex: 'index', key: 'index', width: 80, fixed: 'left' as const, render: (text: number) => <span style={{ color: '#94a3b8' }}>{text}</span> },
  { title: '消耗ID', dataIndex: 'id', key: 'id', ellipsis: true, render: (text: string) => <span style={{ fontWeight: 500, color: '#1e293b' }}>{text}</span> },
  { title: '授权ID', dataIndex: 'authorizationId', key: 'authorizationId', ellipsis: true },
  { 
    title: '消耗类型', 
    dataIndex: 'type', 
    key: 'type', 
    width: 120,
    render: (text: string) => {
      const config = consumptionTypeConfig[text as keyof typeof consumptionTypeConfig];
      return <Tag color={config?.color}>{config?.label}</Tag>;
    }
  },
  { 
    title: '消耗金额', 
    dataIndex: 'amount', 
    key: 'amount', 
    width: 120,
    render: (text: number) => <span style={{ color: '#ef4444', fontWeight: 500 }}>{text} 元</span>
  },
  { title: '消耗描述', dataIndex: 'description', key: 'description', ellipsis: true },
  { title: '消耗时间', dataIndex: 'createdAt', key: 'createdAt', width: 160, fixed: 'right' as const },
];

const ConsumePage: React.FC = () => {
  const navigate = useNavigate();
  const [consumptionRecords, setConsumptionRecords] = useState<ConsumptionRecord[]>(mockConsumptionRecords);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    // 模拟异步获取数据
    setTimeout(() => {
      setConsumptionRecords(mockConsumptionRecords);
      setLoading(false);
    }, 500);
  }, []);

  const tableData = consumptionRecords.map((item, index) => ({
    ...item,
    index: index + 1,
    key: item.id,
  }));

  const handleBack = () => {
    navigate('/authorization');
  };

  return (
    <div style={{ padding: 24, minHeight: '94vh', background: '#f8fafc' }}>
      {/* 页面标题和返回按钮 */}
      <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center', gap: 16 }}>
        <Button
          type="text"
          icon={<ArrowLeftOutlined />}
          onClick={handleBack}
          style={{ padding: 0, color: '#6366f1', fontSize: 14 }}
        >
          返回
        </Button>
        <h1 style={{ fontSize: 24, fontWeight: 600, color: '#1e293b', marginBottom: 8 }}>
          消耗记录
        </h1>
      </div>

      {/* 表格 */}
      <div style={{ background: '#fff', borderRadius: 12, boxShadow: '0 1px 3px rgba(0,0,0,0.05)' }}>
        <Table
          dataSource={tableData}
          columns={columns}
          loading={loading}
          pagination={{
            pageSize: 10,
            showSizeChanger: true,
            showTotal: (total) => `共 ${total} 条记录`,
          }}
          rowKey="id"
          bordered={false}
          style={{ padding: 16 }}
          scroll={{ x: 'max-content' }}
        />
      </div>
    </div>
  );
};

export default ConsumePage;
