import AddOutlined from "@mui/icons-material/AddOutlined";
import { useMemo, useState } from "react";
import { AdminFilterSelect, AdminListToolbar } from "@/shared/ui/AdminListLayout.jsx";
import { Button } from "@/shared/ui/Button.jsx";
import { DataTable } from "@/shared/ui/DataTable.jsx";
import { TimeText } from "@/shared/ui/TimeText.jsx";
import { formatNumber, formatPercent } from "../format.js";
import { OpsStatusBadge } from "./OpsStatusBadge.jsx";

export function ConfigsView({ apps, luckyGifts, onCreate, onEdit, saving }) {
    const [appFilter, setAppFilter] = useState("");

    const appOptions = useMemo(
        () =>
            apps.map((item) => [
                item.app_code ?? item.appCode,
                `${item.app_name ?? item.appName ?? ""} (${item.app_code ?? item.appCode})`,
            ]),
        [apps],
    );
    // 配置列表已在 dashboard 阶段跨应用拉全，应用筛选只做前端过滤，避免重复扇出请求。
    const items = useMemo(
        () => (appFilter ? luckyGifts.filter((config) => config.app_code === appFilter) : luckyGifts),
        [appFilter, luckyGifts],
    );

    const columns = useMemo(() => buildColumns({ onEdit, saving }), [onEdit, saving]);

    return (
        <div className="ops-view">
            <AdminListToolbar
                actions={
                    <Button
                        disabled={saving}
                        startIcon={<AddOutlined fontSize="small" />}
                        variant="primary"
                        onClick={onCreate}
                    >
                        添加配置
                    </Button>
                }
                filters={
                    <AdminFilterSelect
                        label="应用"
                        options={[["", "全部应用"], ...appOptions]}
                        value={appFilter}
                        onChange={setAppFilter}
                    />
                }
            />
            <DataTable
                columns={columns}
                emptyLabel="暂无幸运礼物配置"
                items={items}
                minWidth="1260px"
                rowKey={(item) => `${item.app_code}:${item.pool_id}:${item.rule_version}`}
                title="幸运礼物配置"
                total={items.length}
            />
        </div>
    );
}

function buildColumns({ onEdit, saving }) {
    return [
        { key: "app_code", label: "应用", width: "minmax(88px, 0.7fr)" },
        { key: "pool_id", label: "奖池", width: "minmax(110px, 0.9fr)" },
        {
            key: "rule_version",
            label: "版本",
            render: (item) => (item.is_default ? "-" : `v${item.rule_version}`),
            width: "minmax(72px, 0.5fr)",
        },
        {
            key: "strategy_version",
            label: "策略",
            // 升级前的不可变版本可能没有该字段，owner 会按 fixed_v2 解释；列表保持同一兼容口径，
            // 不能把空值展示成 dynamic_v3，避免运营误判已完成策略切换。
            render: (item) => item.strategy_version || "fixed_v2",
            width: "minmax(112px, 0.8fr)",
        },
        {
            key: "enabled",
            label: "状态",
            render: (item) => {
                // 默认草稿是服务端为未配置奖池生成的占位，不参与线上抽奖，必须与"停用"区分开。
                if (item.is_default) {
                    return <OpsStatusBadge label="默认草稿" tone="warning" />;
                }
                return item.enabled ? (
                    <OpsStatusBadge label="已启用" tone="succeeded" />
                ) : (
                    <OpsStatusBadge label="已停用" />
                );
            },
            width: "minmax(128px, 0.8fr)",
        },
        { key: "target_rtp_percent", label: "目标 RTP", render: (item) => formatPercent(item.target_rtp_percent) },
        { key: "pool_rate_percent", label: "公共奖池", render: (item) => formatPercent(item.pool_rate_percent) },
        {
            key: "profit_anchor_rate",
            label: "平台 / 主播",
            render: (item) => `${formatPercent(item.profit_rate_percent)} / ${formatPercent(item.anchor_rate_percent)}`,
            width: "minmax(144px, 1fr)",
        },
        { key: "control_band_percent", label: "控制带宽", render: (item) => formatPercent(item.control_band_percent) },
        {
            key: "settlement_window_wager",
            label: "结算窗口流水",
            render: (item) => formatNumber(item.settlement_window_wager),
        },
        {
            key: "created_at_ms",
            label: "发布时间",
            render: (item) => (item.is_default ? "-" : <TimeText value={item.created_at_ms} />),
            width: "minmax(176px, 1.1fr)",
        },
        {
            key: "actions",
            label: "操作",
            render: (item) => (
                <Button disabled={saving} size="small" onClick={() => onEdit(item)}>
                    {item.is_default ? "发布配置" : "新增版本"}
                </Button>
            ),
        },
    ];
}