import AddOutlined from "@mui/icons-material/AddOutlined";
import DeleteOutlineOutlined from "@mui/icons-material/DeleteOutlineOutlined";
import EditOutlined from "@mui/icons-material/EditOutlined";
import ImageOutlined from "@mui/icons-material/ImageOutlined";
import Checkbox from "@mui/material/Checkbox";
import ListItemText from "@mui/material/ListItemText";
import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";
import { useMemo } from "react";
import { APP_BANNER_DISPLAY_SCOPE_OPTIONS } from "@/features/app-config/constants";
import { useBannerConfigPage } from "@/features/app-config/hooks/useBannerConfigPage.js";
import styles from "@/features/app-config/app-config.module.css";
import {
    AdminFormDialog,
    AdminFormFieldGrid,
    AdminFormSection,
    AdminFormSwitchField,
} from "@/shared/ui/AdminFormDialog.jsx";
import {
    AdminActionIconButton,
    AdminListBody,
    AdminListPage,
    AdminListToolbar,
    AdminRowActions,
} from "@/shared/ui/AdminListLayout.jsx";
import { DataState } from "@/shared/ui/DataState.jsx";
import { DataTable } from "@/shared/ui/DataTable.jsx";
import { createRegionColumnFilter } from "@/shared/ui/RegionFilterControl.jsx";
import { RegionSelect } from "@/shared/ui/RegionSelect.jsx";
import { AppJumpConfigField } from "@/shared/ui/AppJumpConfigField.jsx";
import { createOptionsColumnFilter, createTextColumnFilter } from "@/shared/ui/tableFilters.js";
import { TimeRangeFilter } from "@/shared/ui/TimeRangeFilter.jsx";
import { UploadField } from "@/shared/ui/UploadField.jsx";
import { formatMillis } from "@/shared/utils/time.js";

const statusOptions = [
    ["", "全部状态"],
    ["active", "启用"],
    ["disabled", "关闭"],
    ["expired", "过期"],
];

const displayScopeFilterOptions = [
    ["", "全部范围"],
    ...APP_BANNER_DISPLAY_SCOPE_OPTIONS.map((option) => [option.value, option.label]),
];

const platformOptions = [
    ["", "全部平台"],
    ["android", "安卓"],
    ["ios", "iOS"],
];

export function BannerConfigPage() {
    const page = useBannerConfigPage();
    const items = page.data.items || [];
    const columns = useMemo(() => bannerColumns(page), [page]);

    return (
        <AdminListPage>
            <AdminListToolbar
                actions={
                    page.abilities.canUpdate ? (
                        <AdminActionIconButton label="新增BANNER" primary onClick={page.openCreate}>
                            <AddOutlined fontSize="small" />
                        </AdminActionIconButton>
                    ) : null
                }
            />
            <DataState error={page.error} loading={page.loading} onRetry={page.reload}>
                <AdminListBody>
                    <DataTable
                        columns={columns}
                        items={items}
                        minWidth="1480px"
                        pagination={{
                            itemCount: items.length,
                            page: 1,
                            pageSize: items.length || 1,
                            total: page.data.total ?? items.length,
                        }}
                        rowKey={(item) => item.id}
                    />
                </AdminListBody>
            </DataState>

            <AdminFormDialog
                loading={page.loadingAction === "create" || page.loadingAction === "edit"}
                open={Boolean(page.activeAction)}
                size="large"
                submitDisabled={
                    !page.abilities.canUpdate || page.loadingAction === "create" || page.loadingAction === "edit"
                }
                title={page.editingItem ? "编辑BANNER" : "新增BANNER"}
                onClose={page.closeDialog}
                onSubmit={page.submitBanner}
            >
                <AdminFormSection title="素材">
                    <AdminFormFieldGrid
                        columns={hasDisplayScope(page.form.displayScopes, "room") ? "repeat(2, minmax(0, 1fr))" : "1fr"}
                    >
                        <UploadField
                            disabled={!page.abilities.canUpdate || !page.abilities.canUpload}
                            label="封面图"
                            value={page.form.coverUrl}
                            onChange={(coverUrl) => page.setForm({ coverUrl })}
                        />
                        {hasDisplayScope(page.form.displayScopes, "room") ? (
                            <UploadField
                                disabled={!page.abilities.canUpdate || !page.abilities.canUpload}
                                label="房间内小屏图"
                                value={page.form.roomSmallImageUrl}
                                onChange={(roomSmallImageUrl) => page.setForm({ roomSmallImageUrl })}
                            />
                        ) : null}
                    </AdminFormFieldGrid>
                </AdminFormSection>
                <AdminFormSection title="跳转信息">
                    <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
                        <TextField
                            disabled={!page.abilities.canUpdate}
                            label="平台"
                            required
                            select
                            value={page.form.platform}
                            onChange={(event) => page.setForm({ platform: event.target.value })}
                        >
                            <MenuItem value="android">安卓</MenuItem>
                            <MenuItem value="ios">iOS</MenuItem>
                        </TextField>
                        <AppJumpConfigField
                            appParamLabel="参数（APP公共跳转JSON）"
                            className={styles.formWideField}
                            disabled={!page.abilities.canUpdate}
                            h5Label="参数（H5链接）"
                            paramValue={page.form.param}
                            required
                            typeLabel="类型"
                            typeValue={page.form.bannerType}
                            onChange={({ param, type }) => page.setForm({ bannerType: type, param })}
                        />
                    </AdminFormFieldGrid>
                </AdminFormSection>
                <AdminFormSection title="投放设置">
                    <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
                        <TextField
                            disabled={!page.abilities.canUpdate}
                            label="显示范围"
                            required
                            select
                            slotProps={{
                                select: {
                                    multiple: true,
                                    renderValue: (selected) => displayScopeListLabel(selected),
                                },
                            }}
                            value={page.form.displayScopes}
                            onChange={(event) => {
                                const displayScopes = normalizeSelectedDisplayScopes(event.target.value);
                                page.setForm({
                                    displayScopes,
                                    roomSmallImageUrl: displayScopes.includes("room")
                                        ? page.form.roomSmallImageUrl
                                        : "",
                                });
                            }}
                        >
                            {APP_BANNER_DISPLAY_SCOPE_OPTIONS.map((option) => (
                                <MenuItem key={option.value} value={option.value}>
                                    <Checkbox checked={hasDisplayScope(page.form.displayScopes, option.value)} />
                                    <ListItemText primary={option.label} />
                                </MenuItem>
                            ))}
                        </TextField>
                        <RegionSelect
                            disabled={!page.abilities.canUpdate}
                            emptyLabel="全部区域"
                            loading={page.loadingRegions}
                            options={page.regionOptions}
                            value={page.form.regionId}
                            onChange={(regionId) => page.setForm({ regionId })}
                        />
                        <CountrySelect
                            disabled={!page.abilities.canUpdate || page.loadingCountries}
                            emptyLabel="全部国家"
                            label="国家"
                            options={page.countryOptions}
                            value={page.form.countryCode}
                            onChange={(countryCode) => page.setForm({ countryCode })}
                        />
                        <TextField
                            disabled={!page.abilities.canUpdate}
                            inputProps={{ step: 1 }}
                            label="排序"
                            type="number"
                            value={page.form.sortOrder}
                            onChange={(event) => page.setForm({ sortOrder: event.target.value })}
                        />
                        <TimeRangeFilter
                            className={styles.formWideField}
                            disabled={!page.abilities.canUpdate}
                            label="投放时间区间"
                            value={{ endMs: page.form.endsAtMs, startMs: page.form.startsAtMs }}
                            onChange={(range) => page.setForm({ endsAtMs: range.endMs, startsAtMs: range.startMs })}
                        />
                        <AdminFormSwitchField
                            checked={page.form.status === "active"}
                            checkedLabel="启用"
                            disabled={!page.abilities.canUpdate}
                            label="BANNER 状态"
                            switchProps={{ inputProps: { "aria-label": "BANNER 启用状态" } }}
                            uncheckedLabel={page.form.status === "expired" ? "过期" : "关闭"}
                            onChange={(checked) => page.setForm({ status: checked ? "active" : "disabled" })}
                        />
                    </AdminFormFieldGrid>
                </AdminFormSection>
                <AdminFormSection title="描述">
                    <TextField
                        disabled={!page.abilities.canUpdate}
                        label="描述"
                        multiline
                        minRows={2}
                        value={page.form.description}
                        onChange={(event) => page.setForm({ description: event.target.value })}
                    />
                </AdminFormSection>
            </AdminFormDialog>
        </AdminListPage>
    );
}

function bannerColumns(page) {
    const columns = [
        {
            key: "cover",
            label: "封面图",
            render: (item) => <BannerCover src={item.coverUrl} />,
            width: "minmax(112px, 0.55fr)",
        },
        {
            key: "target",
            label: "类型 / 参数",
            render: (item) => <Stack primary={typeLabel(item.bannerType)} secondary={item.param || "-"} />,
            filter: createTextColumnFilter({
                placeholder: "搜索参数、国家、描述",
                value: page.keyword,
                onChange: page.setKeyword,
            }),
            width: "minmax(260px, 1.3fr)",
        },
        {
            key: "platform",
            label: "平台",
            render: (item) => platformLabel(item.platform),
            filter: createOptionsColumnFilter({
                options: platformOptions,
                placeholder: "搜索平台",
                value: page.platform,
                onChange: page.setPlatform,
            }),
            width: "minmax(110px, 0.6fr)",
        },
        {
            key: "displayScope",
            label: "显示范围",
            render: (item) => displayScopeListLabel(item.displayScopes || item.displayScope),
            filter: createOptionsColumnFilter({
                options: displayScopeFilterOptions,
                placeholder: "搜索显示范围",
                value: page.displayScope,
                onChange: page.setDisplayScope,
            }),
            width: "minmax(120px, 0.65fr)",
        },
        {
            key: "status",
            label: "状态",
            render: (item) => <StatusBadge status={item.status} />,
            filter: createOptionsColumnFilter({
                options: statusOptions,
                placeholder: "搜索状态",
                value: page.status,
                onChange: page.setStatus,
            }),
            width: "minmax(100px, 0.55fr)",
        },
        {
            key: "region",
            label: "区域",
            render: (item) => regionLabel(page.regionOptions, item.regionId),
            filter: createRegionColumnFilter({
                loading: page.loadingRegions,
                options: page.regionOptions,
                value: page.regionId,
                onChange: page.setRegionId,
            }),
            width: "minmax(150px, 0.8fr)",
        },
        {
            key: "country",
            label: "国家",
            render: (item) => countryLabel(page.countryOptions, item.countryCode),
            filter: createOptionsColumnFilter({
                emptyLabel: "全部国家",
                loading: page.loadingCountries,
                options: page.countryOptions,
                placeholder: "搜索国家",
                value: page.countryCode,
                onChange: page.setCountryCode,
            }),
            width: "minmax(150px, 0.8fr)",
        },
        {
            key: "sortOrder",
            label: "排序",
            width: "minmax(80px, 0.4fr)",
        },
        {
            key: "deliveryTime",
            label: "投放时间",
            render: (item) => deliveryTimeLabel(item.startsAtMs, item.endsAtMs),
            width: "minmax(220px, 1fr)",
        },
        {
            key: "description",
            label: "描述",
            render: (item) => item.description || "-",
            width: "minmax(180px, 0.9fr)",
        },
        {
            key: "updatedAtMs",
            label: "更新时间",
            render: (item) => formatMillis(item.updatedAtMs),
            width: "minmax(160px, 0.8fr)",
        },
    ];

    if (!page.abilities.canUpdate) {
        return columns;
    }

    return [
        ...columns,
        {
            key: "actions",
            label: "操作",
            render: (item) => <BannerActions item={item} page={page} />,
            width: "minmax(96px, 0.45fr)",
        },
    ];
}

function BannerCover({ src }) {
    if (!src) {
        return (
            <span className={styles.bannerCoverEmpty}>
                <ImageOutlined fontSize="small" />
            </span>
        );
    }
    return <img alt="" className={styles.bannerCover} src={src} />;
}

function BannerActions({ item, page }) {
    const deleting = page.loadingAction === `delete:${item.id}`;
    return (
        <AdminRowActions>
            <AdminActionIconButton
                disabled={Boolean(page.loadingAction)}
                label="编辑"
                onClick={() => page.openEdit(item)}
            >
                <EditOutlined fontSize="small" />
            </AdminActionIconButton>
            <AdminActionIconButton
                disabled={deleting || Boolean(page.loadingAction)}
                label="删除"
                onClick={() => page.removeBanner(item)}
            >
                <DeleteOutlineOutlined fontSize="small" />
            </AdminActionIconButton>
        </AdminRowActions>
    );
}

function CountrySelect({ className, disabled, emptyLabel, label = "国家", onChange, options, value }) {
    return (
        <TextField
            className={className}
            disabled={disabled}
            label={label}
            select
            size="small"
            value={value || ""}
            onChange={(event) => onChange(event.target.value)}
        >
            <MenuItem value="">{emptyLabel}</MenuItem>
            {options.map((option) => (
                <MenuItem key={option.value} value={option.value}>
                    {option.label}
                </MenuItem>
            ))}
        </TextField>
    );
}

function Stack({ primary, secondary }) {
    return (
        <div className="cell-stack">
            <span>{primary || "-"}</span>
            <span className="muted">{secondary || "-"}</span>
        </div>
    );
}

function StatusBadge({ status }) {
    const tone = status === "active" ? "succeeded" : status === "expired" ? "warning" : "stopped";
    return (
        <span className={`status-badge status-badge--${tone}`}>
            <span className="status-point" />
            {statusLabel(status)}
        </span>
    );
}

function typeLabel(value) {
    return value === "app" ? "APP" : "H5";
}

function platformLabel(value) {
    if (value === "android") {
        return "安卓";
    }
    if (value === "ios") {
        return "iOS";
    }
    return value || "-";
}

function displayScopeLabel(value) {
    return APP_BANNER_DISPLAY_SCOPE_OPTIONS.find((option) => option.value === value)?.label || value || "-";
}

function displayScopeListLabel(value) {
    const values = normalizeSelectedDisplayScopes(value);
    return values.map((scope) => displayScopeLabel(scope)).join("、") || "-";
}

function normalizeSelectedDisplayScopes(value) {
    const values = Array.isArray(value) ? value : String(value || "").split(",");
    const allowed = APP_BANNER_DISPLAY_SCOPE_OPTIONS.map((option) => option.value);
    const seen = new Set(values.map((item) => String(item || "").trim()).filter(Boolean));
    const selected = allowed.filter((scope) => seen.has(scope));
    return selected.length ? selected : ["home"];
}

function hasDisplayScope(value, scope) {
    return normalizeSelectedDisplayScopes(value).includes(scope);
}

function deliveryTimeLabel(startsAtMs, endsAtMs) {
    const start = startsAtMs ? formatMillis(startsAtMs) : "不限";
    const end = endsAtMs ? formatMillis(endsAtMs) : "不限";
    return `${start} - ${end}`;
}

function statusLabel(status) {
    if (status === "active") {
        return "启用";
    }
    if (status === "expired") {
        return "过期";
    }
    return "关闭";
}

function regionLabel(options, value) {
    if (!value) {
        return "全部区域";
    }
    return options.find((option) => option.value === String(value))?.label || `区域 ${value}`;
}

function countryLabel(options, value) {
    if (!value) {
        return "全部国家";
    }
    return options.find((option) => option.value === value)?.label || value;
}
