import React, { useEffect, useState } from 'react';
import {
    Card, Col, Row, Space, Table, Tag, Typography, Statistic, message, Select, DatePicker, Button, ConfigProvider, Popconfirm
} from 'antd';
import zhCN from 'antd/locale/zh_CN';
import {
    DollarOutlined, CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, ReloadOutlined, UndoOutlined
} from '@ant-design/icons';
import { getPaymentStats, getAdminPaymentOrders, refundPaymentOrder } from '../api';
import { formatDate } from '../utils/formatDate';
import dayjs from 'dayjs';

const { Option } = Select;
const { RangePicker } = DatePicker;

const AdminPaymentStats: React.FC = () => {
    const [loading, setLoading] = useState(false);
    const [stats, setStats] = useState<any>(null);
    const [orderPage, setOrderPage] = useState(1);
    const [orderPageSize, setOrderPageSize] = useState(10);
    const [orderTotal, setOrderTotal] = useState(0);
    const [filters, setFilters] = useState<{
        paymentMethod?: string;
        status?: string;
        startDate: string;
        endDate: string;
    }>({
        startDate: dayjs().format('YYYY-MM-DD'),
        endDate: dayjs().format('YYYY-MM-DD'),
    });

    const load = async () => {
        try {
            setLoading(true);
            const [statsData, ordersData] = await Promise.all([
                getPaymentStats(filters),
                getAdminPaymentOrders({
                    ...filters,
                    page: orderPage,
                    pageSize: orderPageSize,
                }),
            ]);
            setStats({ ...statsData, recent: ordersData.items || [] });
            setOrderTotal(ordersData.total);
        } catch {
            message.error('加载支付统计失败');
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => { load(); }, [filters, orderPage, orderPageSize]);

    const handleOrderPageChange = (p: number, ps: number) => {
        setOrderPage(p);
        setOrderPageSize(ps);
    };

    const handleReset = () => {
        setFilters({
            startDate: dayjs().format('YYYY-MM-DD'),
            endDate: dayjs().format('YYYY-MM-DD'),
        });
    };

    const handleRefund = async (orderNo: string) => {
        try {
            setLoading(true);
            await refundPaymentOrder(orderNo);
            message.success('退款成功');
            await load();
        } catch (e: any) {
            message.error(e?.response?.data?.detail || '退款失败');
        } finally {
            setLoading(false);
        }
    };

    const handleDateChange = (dates: any) => {
        if (dates && dates.length === 2) {
            setFilters(prev => ({
                ...prev,
                startDate: dates[0].format('YYYY-MM-DD'),
                endDate: dates[1].format('YYYY-MM-DD'),
            }));
        }
    };

    const statusConfig: Record<string, { color: string; label: string; icon: React.ReactNode }> = {
        paid: { color: 'green', label: '已支付', icon: <CheckCircleOutlined /> },
        pending: { color: 'gold', label: '待支付', icon: <ClockCircleOutlined /> },
        cancelled: { color: 'default', label: '已取消', icon: <CloseCircleOutlined /> },
        refunded: { color: 'red', label: '已退款', icon: <UndoOutlined /> },
    };

    const methodConfig: Record<string, { color: string; label: string }> = {
        alipay: { color: 'blue', label: '支付宝' },
        wechat: { color: 'green', label: '微信' },
    };

    const columns = [
        { title: '订单号', dataIndex: 'orderNo', key: 'orderNo', width: 200 },
        { title: '用户', dataIndex: 'username', key: 'username', width: 120 },
        {
            title: '支付方式', dataIndex: 'paymentMethod', key: 'paymentMethod', width: 100,
            render: (m: string) => {
                const c = methodConfig[m] || { color: 'default', label: m };
                return <Tag color={c.color}>{c.label}</Tag>;
            },
        },
        {
            title: '金额', dataIndex: 'amount', key: 'amount', width: 100,
            render: (a: number) => <Typography.Text strong style={{ color: '#10b981' }}>¥{a.toFixed(2)}</Typography.Text>,
        },
        { title: '积分', dataIndex: 'credits', key: 'credits', width: 80 },
        {
            title: '状态', dataIndex: 'status', key: 'status', width: 100,
            render: (s: string) => {
                const c = statusConfig[s] || { color: 'default', label: s, icon: null };
                return <Tag color={c.color} icon={c.icon}>{c.label}</Tag>;
            },
        },
        { title: '支付宝交易号', dataIndex: 'tradeNo', key: 'tradeNo', width: 200, render: (v: string) => v || '-' },
        {
            title: '创建时间', dataIndex: 'createdAt', key: 'createdAt', width: 160,
            render: (d: string) => <span className="date-display" style={{ color: '#94a3b8' }}>{d ? formatDate(d) : '-'}</span>,
        },
        {
            title: '支付时间', dataIndex: 'paidAt', key: 'paidAt', width: 160,
            render: (d: string) => <span className="date-display" style={{ color: '#94a3b8' }}>{d ? formatDate(d) : '-'}</span>,
        },
        {
            title: '操作',
            key: 'action',
            width: 120,
            render: (_: any, record: any) => {
                if (record.status === 'paid') {
                    return (
                        <Popconfirm
                            title="确认要退款该订单吗？"
                            description="退款后积分会扣除，金额会原路返回"
                            onConfirm={() => handleRefund(record.orderNo)}
                            okText="确认"
                            cancelText="取消"
                        >
                            <Button type="link" danger size="small" icon={<UndoOutlined />}>
                                退款
                            </Button>
                        </Popconfirm>
                    );
                }
                return null;
            },
        },
    ];

    if (!stats) {
        return <div style={{ padding: 24, color: '#94a3b8' }}>加载中…</div>;
    }

    const paidInfo = stats.byStatus?.paid || { count: 0, amount: 0 };
    const pendingInfo = stats.byStatus?.pending || { count: 0, amount: 0 };
    const cancelledInfo = stats.byStatus?.cancelled || { count: 0, amount: 0 };
    const refundedInfo = stats.byStatus?.refunded || { count: 0, amount: 0 };
    const totalOrders = paidInfo.count + pendingInfo.count + cancelledInfo.count + refundedInfo.count;
    const monthInfo = stats.month || { count: 0, amount: 0 };

    return (
        <ConfigProvider locale={zhCN}>
            <div>
                {/* Summary cards */}
                <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
                    <Col xs={24} sm={12} lg={12}>
                        <Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
                            <Statistic
                                title="今日收入"
                                value={stats.today.paidAmount}
                                precision={2}
                                prefix={<DollarOutlined style={{ color: '#10b981' }} />}
                                suffix="元"
                                valueStyle={{ color: '#10b981', fontWeight: 700 }}
                            />
                            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                                {stats.today.paidCount} 笔订单
                            </Typography.Text>
                        </Card>
                    </Col>
                    <Col xs={24} sm={12} lg={12}>
                        <Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
                            <Statistic
                                title="本月累计"
                                value={monthInfo.paidAmount}
                                precision={2}
                                prefix={<DollarOutlined style={{ color: '#6366f1' }} />}
                                suffix="元"
                                valueStyle={{ color: '#6366f1', fontWeight: 700 }}
                            />
                            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                                {monthInfo.paidCount} 笔订单
                            </Typography.Text>
                        </Card>
                    </Col>
                </Row>

                {/* Status breakdown */}
                <Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5', marginBottom: 16 }}
                    title={<Space><DollarOutlined />订单状态分布</Space>}>
                    <Row gutter={16}>
                        {['paid', 'pending', 'cancelled', 'refunded'].map(s => {
                            const info = stats.byStatus?.[s] || { count: 0, amount: 0 };
                            const c = statusConfig[s];
                            const pct = totalOrders > 0 ? ((info.count / totalOrders) * 100).toFixed(1) : '0.0';
                            return (
                                <Col span={6} key={s}>
                                    <div style={{
                                        padding: 16, borderRadius: 10,
                                        background: '#fafbff', border: '1px solid #f0f0f5',
                                    }}>
                                        <Space>
                                            <Tag color={c.color} icon={c.icon}>{c.label}</Tag>
                                            <Typography.Text type="secondary" style={{ fontSize: 12 }}>{pct}%</Typography.Text>
                                        </Space>
                                        <div style={{ marginTop: 8, fontSize: 20, fontWeight: 700 }}>
                                            {info.count} <span style={{ fontSize: 13, color: '#94a3b8', fontWeight: 400 }}>笔</span>
                                        </div>
                                        <div style={{ fontSize: 13, color: '#64748b', marginTop: 4 }}>
                                            ¥{info.amount.toFixed(2)}
                                        </div>
                                    </div>
                                </Col>
                            );
                        })}
                    </Row>
                </Card>

                {/* Recent orders table */}
                <Card bordered={false} style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}
                    title={<Space><DollarOutlined />订单列表</Space>}>
                    {/* Filters */}
                    <Row gutter={[16, 16]} align="middle" style={{ marginBottom: 24 }}>
                        <Col xs={24} sm={12} md={6}>
                            <span style={{ marginRight: 8 }}>支付方式：</span>
                            <Select
                                placeholder="全部"
                                allowClear
                                style={{ width: 150 }}
                                value={filters.paymentMethod}
                                onChange={(value) => setFilters(prev => ({ ...prev, paymentMethod: value }))}
                            >
                                <Option value="alipay">支付宝</Option>
                                <Option value="wechat">微信</Option>
                            </Select>
                        </Col>
                        <Col xs={24} sm={12} md={6}>
                            <span style={{ marginRight: 8 }}>状态：</span>
                            <Select
                                placeholder="全部"
                                allowClear
                                style={{ width: 150 }}
                                value={filters.status}
                                onChange={(value) => setFilters(prev => ({ ...prev, status: value }))}
                            >
                                <Option value="paid">已支付</Option>
                                <Option value="pending">待支付</Option>
                                <Option value="cancelled">已取消</Option>
                                <Option value="refunded">已退款</Option>
                            </Select>
                        </Col>
                        <Col xs={24} sm={12} md={8}>
                            <span style={{ marginRight: 8 }}>日期范围：</span>
                            <RangePicker
                                value={[
                                    dayjs(filters.startDate),
                                    dayjs(filters.endDate),
                                ]}
                                onChange={handleDateChange}
                            />
                        </Col>
                        <Col xs={24} sm={12} md={4}>
                            <Button icon={<ReloadOutlined />} onClick={handleReset}>
                                重置
                            </Button>
                        </Col>
                    </Row>
                    
                    <Table
                        columns={columns}
                        dataSource={stats.recent || []}
                        rowKey="id"
                        loading={loading}
                        pagination={{
                            current: orderPage,
                            pageSize: orderPageSize,
                            total: orderTotal,
                            onChange: handleOrderPageChange,
                            showSizeChanger: true,
                            showTotal: (t) => `共 ${t} 条`,
                        }}
                        scroll={{ x: 1000 }}
                        size="middle"
                    />
                </Card>
            </div>
        </ConfigProvider>
    );
};

export default AdminPaymentStats;
