import AddCircleOutlineOutlined from "@mui/icons-material/AddCircleOutlineOutlined";
import AssignmentReturnOutlined from "@mui/icons-material/AssignmentReturnOutlined";
import AutoAwesomeOutlined from "@mui/icons-material/AutoAwesomeOutlined";
import EditOutlined from "@mui/icons-material/EditOutlined";
import RestartAltOutlined from "@mui/icons-material/RestartAltOutlined";
import SendOutlined from "@mui/icons-material/SendOutlined";
import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
import MenuItem from "@mui/material/MenuItem";
import Tab from "@mui/material/Tab";
import Tabs from "@mui/material/Tabs";
import TextField from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import { AdminFormDialog, AdminFormSection } from "@/shared/ui/AdminFormDialog.jsx";
import { AdminUserIdentity } from "@/shared/ui/AdminUserIdentity.jsx";
import { Button } from "@/shared/ui/Button.jsx";
import { DataState } from "@/shared/ui/DataState.jsx";
import { DataTable } from "@/shared/ui/DataTable.jsx";
import { IconButton } from "@/shared/ui/IconButton.jsx";
import { formatMillis } from "@/shared/utils/time.js";
import {
    prettyIdSourceLabels,
    prettyIdSourceOptions,
    prettyIdStatusLabels,
    prettyIdStatusOptions,
    prettyLevelTrackOptions,
    prettyPoolStatusLabels,
    prettyPoolStatusOptions,
    prettyRuleOptions,
} from "@/features/app-users/constants.js";
import { usePrettyIdsPage } from "@/features/app-users/hooks/usePrettyIdsPage.js";
import styles from "@/features/app-users/app-users.module.css";

export function AppUserPrettyIdsPage() {
    const page = usePrettyIdsPage();
    const pools = page.poolQuery.data.items || [];
    const prettyIds = page.idQuery.data.items || [];
    const showingPools = page.activeTab === "pools";

    return (
        <section className={styles.root}>
            <div className={`${styles.contentPanel} ${styles.prettyContentPanel}`}>
                <div className={styles.prettyTabsBar}>
                    <Tabs value={page.activeTab} onChange={(_, value) => page.setActiveTab(value)}>
                        <Tab className={styles.prettyTab} label={`靓号列表 ${Number(page.idQuery.data.total || 0)}`} value="ids" />
                        <Tab className={styles.prettyTab} label={`靓号池 ${Number(page.poolQuery.data.total || 0)}`} value="pools" />
                    </Tabs>
                </div>
                {showingPools ? (
                    <PrettyPoolPanel page={page} pools={pools} />
                ) : (
                    <PrettyIDPanel page={page} prettyIds={prettyIds} />
                )}
            </div>

            <PoolDialog page={page} />
            <GenerateDialog page={page} />
            <GrantDialog page={page} />
            <StatusDialog page={page} />
        </section>
    );
}

function PrettyPoolPanel({ page, pools }) {
    return (
        <section className={styles.prettyPane}>
            <PaneHeader
                actions={
                    <>
                        {page.abilities.canPrettyGenerate ? (
                            <Button
                                startIcon={<AutoAwesomeOutlined fontSize="small" />}
                                onClick={() => page.openGenerate(null)}
                            >
                                批量生成
                            </Button>
                        ) : null}
                        {page.abilities.canPrettyUpdate ? (
                            <Button
                                startIcon={<AddCircleOutlineOutlined fontSize="small" />}
                                variant="primary"
                                onClick={page.openCreatePool}
                            >
                                新增池
                            </Button>
                        ) : null}
                    </>
                }
                count={page.poolQuery.data.total}
                title="靓号池"
            />
            <div className={styles.prettyFilters}>
                <TextField
                    className={styles.compactControl}
                    label="等级轨道"
                    select
                    size="small"
                    value={page.poolTrack}
                    onChange={(event) => page.changePoolTrack(event.target.value)}
                >
                    <MenuItem value="">全部等级轨道</MenuItem>
                    {prettyLevelTrackOptions.map(([value, label]) => (
                        <MenuItem key={value} value={value}>
                            {label}
                        </MenuItem>
                    ))}
                </TextField>
                <TextField
                    className={styles.compactControl}
                    label="状态"
                    select
                    size="small"
                    value={page.poolStatus}
                    onChange={(event) => page.changePoolStatus(event.target.value)}
                >
                    {prettyPoolStatusOptions.map(([value, label]) => (
                        <MenuItem key={value || "all"} value={value}>
                            {label}
                        </MenuItem>
                    ))}
                </TextField>
                <Button startIcon={<RestartAltOutlined fontSize="small" />} onClick={page.resetPoolFilters}>
                    重置
                </Button>
            </div>
            <DataState error={page.poolQuery.error} loading={page.poolQuery.loading} onRetry={page.poolQuery.reload}>
                <DataTable
                    className={styles.compactTableFrame}
                    columns={poolColumns(page)}
                    items={pools}
                    minWidth="860px"
                    pagination={
                        page.poolQuery.data.total > 0
                            ? {
                                  page: page.poolPage,
                                  pageSize: page.poolQuery.data.pageSize || 20,
                                  total: page.poolQuery.data.total,
                                  onPageChange: page.setPoolPage,
                              }
                            : undefined
                    }
                    rowKey={(pool) => pool.poolId}
                />
            </DataState>
        </section>
    );
}

function PrettyIDPanel({ page, prettyIds }) {
    return (
        <section className={styles.prettyPane}>
            <PaneHeader
                actions={
                    page.abilities.canPrettyGrant ? (
                        <Button startIcon={<SendOutlined fontSize="small" />} variant="primary" onClick={page.openGrant}>
                            后台发放
                        </Button>
                    ) : null
                }
                count={page.idQuery.data.total}
                title="靓号列表"
            />
            <div className={styles.prettyFilters}>
                <TextField
                    className={styles.search}
                    label="搜索"
                    size="small"
                    value={page.idKeyword}
                    onChange={(event) => page.changeIDKeyword(event.target.value)}
                />
                <TextField
                    className={styles.compactControl}
                    label="靓号池"
                    select
                    size="small"
                    value={page.idPoolId}
                    onChange={(event) => page.changeIDPool(event.target.value)}
                >
                    <MenuItem value="">全部靓号池</MenuItem>
                    {page.poolOptions.map((option) => (
                        <MenuItem key={option.value} value={option.value}>
                            {option.label}
                        </MenuItem>
                    ))}
                </TextField>
                <TextField
                    className={styles.compactControl}
                    label="来源"
                    select
                    size="small"
                    value={page.idSource}
                    onChange={(event) => page.changeIDSource(event.target.value)}
                >
                    {prettyIdSourceOptions.map(([value, label]) => (
                        <MenuItem key={value || "all"} value={value}>
                            {label}
                        </MenuItem>
                    ))}
                </TextField>
                <TextField
                    className={styles.compactControl}
                    label="状态"
                    select
                    size="small"
                    value={page.idStatus}
                    onChange={(event) => page.changeIDStatus(event.target.value)}
                >
                    {prettyIdStatusOptions.map(([value, label]) => (
                        <MenuItem key={value || "all"} value={value}>
                            {label}
                        </MenuItem>
                    ))}
                </TextField>
                <TextField
                    className={styles.userIDControl}
                    label="占用用户"
                    size="small"
                    value={page.assignedUserId}
                    onChange={(event) => page.changeAssignedUserId(event.target.value)}
                />
                <Button startIcon={<RestartAltOutlined fontSize="small" />} onClick={page.resetIDFilters}>
                    重置
                </Button>
            </div>
            <DataState error={page.idQuery.error} loading={page.idQuery.loading} onRetry={page.idQuery.reload}>
                <DataTable
                    className={styles.compactTableFrame}
                    columns={idColumns(page)}
                    items={prettyIds}
                    minWidth="1360px"
                    pagination={
                        page.idQuery.data.total > 0
                            ? {
                                  page: page.idPage,
                                  pageSize: page.idQuery.data.pageSize || 20,
                                  total: page.idQuery.data.total,
                                  onPageChange: page.setIdPage,
                              }
                            : undefined
                    }
                    rowKey={(item) => item.prettyId}
                />
            </DataState>
        </section>
    );
}

function PaneHeader({ actions, count, title }) {
    return (
        <div className={styles.prettyPaneHeader}>
            <div className={styles.prettyPaneTitle}>
                <h2>{title}</h2>
                <span>共 {Number(count || 0)} 条</span>
            </div>
            <div className={styles.toolbarActions}>{actions}</div>
        </div>
    );
}

function poolColumns(page) {
    return [
        {
            key: "pool",
            label: "靓号池",
            width: "minmax(220px, 1.2fr)",
            render: (pool) => (
                <div className={styles.stack}>
                    <span className={styles.primaryText}>{pool.name || "-"}</span>
                    <span className={styles.meta}>{pool.poolId}</span>
                    <span className={styles.meta}>更新 {formatMillis(pool.updatedAtMs || pool.createdAtMs)}</span>
                </div>
            ),
        },
        {
            key: "rule",
            label: "规则 / 等级",
            width: "minmax(160px, 0.9fr)",
            render: (pool) => (
                <div className={styles.stack}>
                    <span>{ruleLabel(pool.ruleType)}</span>
                    <span className={styles.meta}>
                        {trackLabel(pool.levelTrack)} {pool.minLevel}-{pool.maxLevel}
                    </span>
                </div>
            ),
        },
        {
            key: "status",
            label: "状态",
            width: "minmax(110px, 0.6fr)",
            render: (pool) => <StatusBadge labels={prettyPoolStatusLabels} status={pool.status} />,
        },
        {
            key: "actions",
            label: "操作",
            width: "104px",
            render: (pool) => (
                <div className={styles.rowActions}>
                    {page.abilities.canPrettyUpdate ? (
                        <ActionIcon label="编辑" onClick={() => page.openEditPool(pool)}>
                            <EditOutlined fontSize="small" />
                        </ActionIcon>
                    ) : null}
                    {page.abilities.canPrettyGenerate ? (
                        <ActionIcon label="生成" onClick={() => page.openGenerate(pool)}>
                            <AutoAwesomeOutlined fontSize="small" />
                        </ActionIcon>
                    ) : null}
                </div>
            ),
        },
    ];
}

function idColumns(page) {
    return [
        {
            key: "display",
            label: "靓号",
            width: "minmax(130px, 0.7fr)",
            render: (item) => (
                <div className={styles.stack}>
                    <div className={styles.nameLine}>
                        <span className={styles.name}>{item.displayUserId || "-"}</span>
                    </div>
                </div>
            ),
        },
        {
            key: "pool",
            label: "来源 / 池",
            width: "minmax(180px, 0.9fr)",
            render: (item) => (
                <div className={styles.stack}>
                    <span>{prettyIdSourceLabels[item.source] || item.source || "-"}</span>
                    <span className={styles.meta}>{item.pool?.name || item.poolId || "-"}</span>
                </div>
            ),
        },
        {
            key: "status",
            label: "状态",
            width: "minmax(110px, 0.6fr)",
            render: (item) => <StatusBadge labels={prettyIdStatusLabels} status={item.status} />,
        },
        {
            key: "assignedUser",
            label: "占用人",
            width: "minmax(240px, 1.2fr)",
            render: (item) => (
                <AssignedUserCell item={item} />
            ),
        },
        {
            key: "operator",
            label: "操作人",
            width: "minmax(210px, 1fr)",
            render: (item) => <OperatorCell item={item} />,
        },
        {
            key: "time",
            label: "占用 / 释放时间",
            width: "minmax(210px, 1fr)",
            render: (item) => <PrettyIDTimeCell item={item} />,
        },
        {
            key: "actions",
            label: "操作",
            width: "minmax(96px, 0.5fr)",
            render: (item) => {
                const showStatus = page.abilities.canPrettyUpdate && canChangePrettyStatus(item);
                const showRecycle = page.abilities.canPrettyUpdate && canRecyclePrettyID(item);
                if (!showStatus && !showRecycle) {
                    return "-";
                }
                return (
                    <div className={styles.rowActions}>
                        {showStatus ? (
                            <ActionIcon label="状态" onClick={() => page.openStatus(item)}>
                                <SettingsOutlined fontSize="small" />
                            </ActionIcon>
                        ) : null}
                        {showRecycle ? (
                            <ActionIcon
                                disabled={page.loadingAction === `recycle-${item.prettyId}`}
                                label="回收"
                                tone="danger"
                                onClick={() => page.recyclePrettyID(item)}
                            >
                                <AssignmentReturnOutlined fontSize="small" />
                            </ActionIcon>
                        ) : null}
                    </div>
                );
            },
        },
    ];
}

function AssignedUserCell({ item }) {
    const user = assignedUser(item);
    if (!user) {
        return <span className={styles.meta}>-</span>;
    }

    return <AdminUserIdentity openInAppUserDetail user={user} />;
}

function OperatorCell({ item }) {
    const operator = item.operator || {};
    const adminId = operator.adminId || item.updatedByAdminId || item.createdByAdminId;
    if (!operator.userId && !operator.adminId && !operator.name && !operator.account && !adminId) {
        return <span className={styles.meta}>-</span>;
    }
    if ((operator.type || "admin") === "app_user") {
        return <AdminUserIdentity openInAppUserDetail rows={[operator.displayUserId, operator.userId]} user={operator} />;
    }
    return (
        <AdminUserIdentity
            name={operator.account || operator.name || "后台管理员"}
            rows={[operator.name, adminId ? `Admin ID ${adminId}` : "后台管理员"]}
            user={{ ...operator, adminId }}
        />
    );
}

function PrettyIDTimeCell({ item }) {
    return (
        <div className={styles.stack}>
            <span>{item.assignedAtMs ? formatMillis(item.assignedAtMs) : "-"}</span>
            <span className={styles.meta}>{item.releasedAtMs ? `释放 ${formatMillis(item.releasedAtMs)}` : "-"}</span>
        </div>
    );
}

function assignedUser(item) {
    const user = item.assignedUser || null;
    if (!user) {
        return null;
    }
    return {
        ...user,
        displayUserId: user.displayUserId || user.defaultDisplayUserId,
        prettyDisplayUserId: item.displayUserId,
        prettyId: item.prettyId,
        userId: user.userId,
    };
}

function PoolDialog({ page }) {
    const editing = Boolean(page.activePool);
    return (
        <AdminFormDialog
            loading={page.loadingAction === "pool"}
            open={page.activeDialog === "pool"}
            submitDisabled={!page.abilities.canPrettyUpdate || page.loadingAction === "pool"}
            title={editing ? "编辑靓号池" : "新增靓号池"}
            onClose={page.closeDialog}
            onSubmit={page.submitPool}
        >
            <AdminFormSection title="池配置">
                <TextField
                    label="名称"
                    required
                    value={page.poolForm.name}
                    onChange={(event) => page.setPoolForm({ ...page.poolForm, name: event.target.value })}
                />
                <TextField
                    label="等级轨道"
                    required
                    select
                    value={page.poolForm.levelTrack}
                    onChange={(event) => page.setPoolForm({ ...page.poolForm, levelTrack: event.target.value })}
                >
                    {prettyLevelTrackOptions.map(([value, label]) => (
                        <MenuItem key={value} value={value}>
                            {label}
                        </MenuItem>
                    ))}
                </TextField>
                <div className={styles.formGridTwo}>
                    <TextField
                        label="最低等级"
                        required
                        type="number"
                        value={page.poolForm.minLevel}
                        onChange={(event) => page.setPoolForm({ ...page.poolForm, minLevel: event.target.value })}
                    />
                    <TextField
                        label="最高等级"
                        required
                        type="number"
                        value={page.poolForm.maxLevel}
                        onChange={(event) => page.setPoolForm({ ...page.poolForm, maxLevel: event.target.value })}
                    />
                </div>
                <div className={styles.formGridTwo}>
                    <TextField
                        label="规则"
                        required
                        select
                        value={page.poolForm.ruleType}
                        onChange={(event) => page.setPoolForm({ ...page.poolForm, ruleType: event.target.value })}
                    >
                        {prettyRuleOptions.map(([value, label]) => (
                            <MenuItem key={value} value={value}>
                                {label}
                            </MenuItem>
                        ))}
                    </TextField>
                    <TextField
                        label="状态"
                        required
                        select
                        value={page.poolForm.status}
                        onChange={(event) => page.setPoolForm({ ...page.poolForm, status: event.target.value })}
                    >
                        {prettyPoolStatusOptions
                            .filter(([value]) => value)
                            .map(([value, label]) => (
                                <MenuItem key={value} value={value}>
                                    {label}
                                </MenuItem>
                            ))}
                    </TextField>
                </div>
                <TextField
                    label="排序"
                    type="number"
                    value={page.poolForm.sortOrder}
                    onChange={(event) => page.setPoolForm({ ...page.poolForm, sortOrder: event.target.value })}
                />
                <TextField
                    label="规则配置"
                    minRows={3}
                    multiline
                    value={page.poolForm.ruleConfigJson}
                    onChange={(event) => page.setPoolForm({ ...page.poolForm, ruleConfigJson: event.target.value })}
                />
            </AdminFormSection>
        </AdminFormDialog>
    );
}

function GenerateDialog({ page }) {
    return (
        <AdminFormDialog
            loading={page.loadingAction === "generate"}
            open={page.activeDialog === "generate"}
            submitDisabled={!page.abilities.canPrettyGenerate || page.loadingAction === "generate"}
            title="批量生成靓号"
            onClose={page.closeDialog}
            onSubmit={page.submitGenerate}
        >
            <AdminFormSection title="生成配置">
                <TextField
                    label="靓号池"
                    required
                    select
                    value={page.generateForm.poolId}
                    onChange={(event) => page.setGenerateForm({ ...page.generateForm, poolId: event.target.value })}
                >
                    {page.poolOptions.map((option) => (
                        <MenuItem key={option.value} value={option.value}>
                            {option.label}
                        </MenuItem>
                    ))}
                </TextField>
                <TextField
                    label="规则"
                    required
                    select
                    value={page.generateForm.ruleType}
                    onChange={(event) => page.setGenerateForm({ ...page.generateForm, ruleType: event.target.value })}
                >
                    {prettyRuleOptions.map(([value, label]) => (
                        <MenuItem key={value} value={value}>
                            {label}
                        </MenuItem>
                    ))}
                </TextField>
                <TextField
                    label="生成数量"
                    required
                    type="number"
                    value={page.generateForm.count}
                    onChange={(event) => page.setGenerateForm({ ...page.generateForm, count: event.target.value })}
                />
                <TextField
                    label="规则配置"
                    minRows={3}
                    multiline
                    value={page.generateForm.ruleConfigJson}
                    onChange={(event) =>
                        page.setGenerateForm({ ...page.generateForm, ruleConfigJson: event.target.value })
                    }
                />
            </AdminFormSection>
        </AdminFormDialog>
    );
}

function GrantDialog({ page }) {
    return (
        <AdminFormDialog
            loading={page.loadingAction === "grant"}
            open={page.activeDialog === "grant"}
            submitDisabled={!page.abilities.canPrettyGrant || page.loadingAction === "grant"}
            title="后台发放靓号"
            onClose={page.closeDialog}
            onSubmit={page.submitGrant}
        >
            <AdminFormSection title="发放信息">
                <TextField
                    label="用户 ID / 短 ID"
                    required
                    value={page.grantForm.targetUserId}
                    onChange={(event) => page.setGrantForm({ ...page.grantForm, targetUserId: event.target.value })}
                />
                <TextField
                    label="靓号内容"
                    required
                    value={page.grantForm.displayUserId}
                    onChange={(event) => page.setGrantForm({ ...page.grantForm, displayUserId: event.target.value })}
                />
                <TextField
                    label="有效天数"
                    type="number"
                    value={page.grantForm.durationDays}
                    onChange={(event) => page.setGrantForm({ ...page.grantForm, durationDays: event.target.value })}
                />
                <TextField
                    label="原因"
                    value={page.grantForm.reason}
                    onChange={(event) => page.setGrantForm({ ...page.grantForm, reason: event.target.value })}
                />
            </AdminFormSection>
        </AdminFormDialog>
    );
}

function StatusDialog({ page }) {
    return (
        <AdminFormDialog
            loading={page.loadingAction === "status"}
            open={page.activeDialog === "status"}
            submitDisabled={!page.abilities.canPrettyUpdate || page.loadingAction === "status"}
            title="修改靓号状态"
            onClose={page.closeDialog}
            onSubmit={page.submitStatus}
        >
            <AdminFormSection title="状态信息">
                <TextField disabled label="靓号" value={page.activePrettyID?.displayUserId || ""} />
                <TextField
                    label="状态"
                    required
                    select
                    value={page.statusForm.status}
                    onChange={(event) => page.setStatusForm({ ...page.statusForm, status: event.target.value })}
                >
                    {prettyIdStatusOptions
                        .filter(([value]) => ["available", "disabled", "reserved"].includes(value))
                        .map(([value, label]) => (
                            <MenuItem key={value} value={value}>
                                {label}
                            </MenuItem>
                        ))}
                </TextField>
                <TextField
                    label="原因"
                    value={page.statusForm.reason}
                    onChange={(event) => page.setStatusForm({ ...page.statusForm, reason: event.target.value })}
                />
            </AdminFormSection>
        </AdminFormDialog>
    );
}

function ActionIcon({ children, label, ...props }) {
    return (
        <Tooltip arrow title={label}>
            <span>
                <IconButton label={label} {...props}>
                    {children}
                </IconButton>
            </span>
        </Tooltip>
    );
}

function StatusBadge({ labels, status }) {
    return (
        <span className={`status-badge status-badge--${statusTone(status)}`}>
            <span className="status-point" />
            {labels[status] || status || "-"}
        </span>
    );
}

function statusTone(status) {
    if (status === "active" || status === "available") {
        return "running";
    }
    if (status === "assigned" || status === "reserved") {
        return "warning";
    }
    if (status === "released" || status === "deleted") {
        return "stopped";
    }
    return "danger";
}

function trackLabel(track) {
    return prettyLevelTrackOptions.find(([value]) => value === track)?.[1] || track || "-";
}

function ruleLabel(ruleType) {
    return prettyRuleOptions.find(([value]) => value === ruleType)?.[1] || ruleType || "-";
}

function canChangePrettyStatus(item) {
    const assigned = item.assignedUserId;
    const unassigned =
        assigned === 0 || assigned === "0" || assigned === "" || assigned === undefined || assigned === null;
    return ["available", "disabled", "reserved"].includes(item.status) && unassigned;
}

function canRecyclePrettyID(item) {
    const assigned = item.assignedUserId;
    const hasAssignedUser =
        assigned !== 0 && assigned !== "0" && assigned !== "" && assigned !== undefined && assigned !== null;
    return item.status === "assigned" && hasAssignedUser;
}
