import CloseOutlined from "@mui/icons-material/CloseOutlined";
import Drawer from "@mui/material/Drawer";
import IconButton from "@mui/material/IconButton";
import { DataState } from "@/shared/ui/DataState.jsx";
import { DataTable } from "@/shared/ui/DataTable.jsx";
import { TimeText } from "@/shared/ui/TimeText.jsx";
import styles from "@/features/red-packets/red-packets.module.css";

const claimColumns = [
    {
        key: "userId",
        label: "用户",
        width: "minmax(120px, 0.7fr)",
        render: (claim) => claim.userId || "-",
    },
    {
        key: "amount",
        label: "金额",
        width: "minmax(120px, 0.7fr)",
        render: (claim) => `${formatNumber(claim.amount)} 金币`,
    },
    {
        key: "status",
        label: "状态",
        width: "minmax(100px, 0.55fr)",
        render: (claim) => claimStatusLabel(claim.status),
    },
    {
        key: "createdAt",
        label: "领取时间",
        width: "minmax(180px, 0.9fr)",
        render: (claim) => <TimeText value={claim.createdAtMs} />,
    },
];

export function RedPacketDetailDrawer({ loading, onClose, open, packet }) {
    return (
        <Drawer anchor="right" open={open} onClose={onClose}>
            <div className="form-drawer">
                <div className="form-drawer__section-title">
                    <h2>红包详情</h2>
                    <IconButton aria-label="关闭" size="small" onClick={onClose}>
                        <CloseOutlined fontSize="small" />
                    </IconButton>
                </div>
                <DataState loading={loading} reportPageLoading={false}>
                    {packet ? (
                        <div className={styles.detailPanel}>
                            <InfoRow label="红包 ID" value={packet.packetId} />
                            <InfoRow label="房间" value={packet.roomId || "-"} />
                            <InfoRow label="发送人" value={packet.senderUserId || "-"} />
                            <InfoRow label="类型" value={packetTypeLabel(packet.packetType)} />
                            <InfoRow label="状态" value={packetStatusLabel(packet.status)} />
                            <InfoRow label="金额" value={`${formatNumber(packet.totalAmount)} 金币`} />
                            <InfoRow label="剩余" value={`${formatNumber(packet.remainingAmount)} / ${packet.remainingCount} 个`} />
                            <InfoRow
                                label="已领"
                                value={`${formatNumber(packet.totalAmount - packet.remainingAmount)} / ${
                                    packet.packetCount - packet.remainingCount
                                } 个`}
                            />
                            <InfoRow
                                label="退款"
                                value={
                                    packet.refundStatus
                                        ? `${packetStatusLabel(packet.refundStatus)} ${formatNumber(packet.refundAmount)} 金币`
                                        : "-"
                                }
                            />
                            <InfoRow label="开启时间" value={<TimeText value={packet.openAtMs} />} />
                            <InfoRow label="过期时间" value={<TimeText value={packet.expiresAtMs} />} />
                            <DataTable
                                columns={claimColumns}
                                emptyLabel="暂无领取记录"
                                fixedEdges={false}
                                items={packet.claims || []}
                                minWidth="620px"
                                rowKey={(claim) => claim.claimId}
                            />
                        </div>
                    ) : null}
                </DataState>
            </div>
        </Drawer>
    );
}

function InfoRow({ label, value }) {
    return (
        <div className={styles.summaryItem}>
            <span className={styles.summaryLabel}>{label}</span>
            <span className={styles.summaryValue}>{value}</span>
        </div>
    );
}

function packetTypeLabel(type) {
    return String(type || "").toLowerCase() === "delayed" ? "延时红包" : "即时红包";
}

function packetStatusLabel(status) {
    const labels = {
        active: "进行中",
        finished: "已抢完",
        refunded: "已退款",
        waiting_open: "待开启",
    };
    return labels[String(status || "").toLowerCase()] || status || "-";
}

function claimStatusLabel(status) {
    return status === "claimed" ? "已领取" : status || "-";
}

function formatNumber(value) {
    return new Intl.NumberFormat("zh-CN").format(Number(value || 0));
}
