import ContentCopyOutlined from "@mui/icons-material/ContentCopyOutlined";
import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined";
import Pagination from "@mui/material/Pagination";
import { AdminActionIconButton, AdminRowActions } from "@/shared/ui/AdminListLayout.jsx";
import { DataState } from "@/shared/ui/DataState.jsx";
import { DataTable } from "@/shared/ui/DataTable.jsx";
import { SideDrawer } from "@/shared/ui/SideDrawer.jsx";
import { formatMillis } from "@/shared/utils/time.js";
import styles from "@/features/activity-templates/activity-templates.module.css";

export function ActivityTemplateVersionsDrawer({
    abilities,
    data,
    error,
    loading,
    onClone,
    onClose,
    onPageChange,
    onPreview,
    onRetry,
    open,
    page,
    source,
}) {
    const columns = [
        {
            key: "version",
            label: "版本",
            width: "90px",
            render: (version) => <strong>v{version.versionNo}</strong>,
        },
        {
            key: "published",
            label: "发布时间 / 管理员",
            width: "minmax(190px, .85fr)",
            render: (version) => (
                <div className={styles.cellStack}>
                    <span>{formatMillis(version.publishedAtMs)}</span>
                    <small>管理员 #{version.publishedByAdminId || "-"}</small>
                </div>
            ),
        },
        {
            key: "runtime",
            label: "实际运行窗口",
            width: "minmax(210px, .95fr)",
            render: (version) => (
                <div className={styles.cellStack}>
                    <span>{formatMillis(version.runtimeFromMs || version.snapshot.startMs)}</span>
                    <small>至 {formatRuntimeEnd(version)}</small>
                </div>
            ),
        },
        {
            key: "config",
            label: "配置规模",
            width: "minmax(150px, .7fr)",
            render: (version) => (
                <div className={styles.cellStack}>
                    <span>
                        {version.snapshot.gifts.length} 礼物 · {version.snapshot.tasks.length} 任务
                    </span>
                    <small>{version.snapshot.rankRewards.length} 个奖励区间</small>
                </div>
            ),
        },
        {
            key: "actions",
            label: "操作",
            width: "104px",
            render: (version) => (
                <AdminRowActions>
                    <AdminActionIconButton label="查看版本" onClick={() => onPreview(version)}>
                        <VisibilityOutlined fontSize="small" />
                    </AdminActionIconButton>
                    {abilities.canCreate ? (
                        <AdminActionIconButton label="基于版本复制" onClick={() => onClone(version)}>
                            <ContentCopyOutlined fontSize="small" />
                        </AdminActionIconButton>
                    ) : null}
                </AdminRowActions>
            ),
        },
    ];
    const pageCount = Math.max(1, Math.ceil(Number(data.total || 0) / Number(data.pageSize || 20)));

    return (
        <SideDrawer
            className={styles.versionDrawer}
            contentClassName={styles.versionDrawerBody}
            open={open}
            title={`发布版本 · ${source?.name || "-"}`}
            width="detail"
            onClose={onClose}
        >
            <DataState error={error} loading={loading} reportPageLoading={false} onRetry={onRetry}>
                <DataTable
                    columns={columns}
                    items={data.items || []}
                    minWidth="760px"
                    rowKey={(version) => `${version.templateId}-${version.versionNo}`}
                    total={data.total || 0}
                />
                {pageCount > 1 ? (
                    <div className={styles.drawerPagination}>
                        <Pagination
                            count={pageCount}
                            page={page}
                            size="small"
                            onChange={(_, nextPage) => onPageChange(nextPage)}
                        />
                    </div>
                ) : null}
            </DataState>
        </SideDrawer>
    );
}

function formatRuntimeEnd(version) {
    const runtimeToMs = Number(version.runtimeToMs || 0);
    if (runtimeToMs > 0) return formatMillis(runtimeToMs);
    return `未关闭 · 排期至 ${formatMillis(version.snapshot.endMs)}`;
}
