import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
import { App, Button, Skeleton } from "antd";
import { Switch } from "@/pages/admin/ui/controls";
import { AlertTriangle, Clapperboard, Coins, ListChecks, MonitorCog, PlugZap, RadioTower, RefreshCw, ShieldCheck, Sparkles } from "lucide-react";

import { cn } from "@/lib/utils";
import { getAdminFeatureAvailability, updateAdminFeatureAvailability } from "@/services/api/auth";
import { useUserStore, type FeatureAvailability } from "@/stores/use-user-store";
import { AdminStatusBadge } from "./admin-ui";

type FeatureKey = "shortDramaEnabled" | "taskCenterEnabled" | "creditsEnabled" | "customChannelsEnabled" | "frontendModelsEnabled" | "pluginCenterEnabled" | "systemPluginsVisibleToUsers";
type FeatureRow = {
    key: FeatureKey;
    title: string;
    description: string;
    icon: ReactNode;
    dependsOn?: FeatureKey;
};

const editableFeatureKeys: FeatureKey[] = ["shortDramaEnabled", "taskCenterEnabled", "creditsEnabled", "customChannelsEnabled", "frontendModelsEnabled", "pluginCenterEnabled", "systemPluginsVisibleToUsers"];

const workspaceFeatureRows: FeatureRow[] = [
    {
        key: "shortDramaEnabled",
        title: "短剧创作",
        description: "开放短剧入口、项目列表与项目详情。关闭不删除已有项目。",
        icon: <Clapperboard className="size-4" aria-hidden="true" />,
    },
    {
        key: "taskCenterEnabled",
        title: "任务中心",
        description: "开放任务记录页面。关闭不会停止生成任务。",
        icon: <ListChecks className="size-4" aria-hidden="true" />,
    },
    {
        key: "creditsEnabled",
        title: "积分计费",
        description: "控制钱包入口及新任务的积分预授权与结算。",
        icon: <Coins className="size-4" aria-hidden="true" />,
    },
    {
        key: "customChannelsEnabled",
        title: "自定义渠道",
        description: "允许用户配置并使用自己的模型渠道。",
        icon: <RadioTower className="size-4" aria-hidden="true" />,
    },
];

const pluginFeatureRows: FeatureRow[] = [
    {
        key: "pluginCenterEnabled",
        title: "插件中心",
        description: "开放插件中心及插件调用能力。",
        icon: <PlugZap className="size-4" aria-hidden="true" />,
    },
    {
        key: "systemPluginsVisibleToUsers",
        title: "系统插件可见性",
        description: "向普通用户展示系统协议插件和管理员上传插件。",
        icon: <ShieldCheck className="size-4" aria-hidden="true" />,
        dependsOn: "pluginCenterEnabled",
    },
];

const modelFeatureRows: FeatureRow[] = [
    {
        key: "frontendModelsEnabled",
        title: "前台模型目录",
        description: "选择前台模型目录，或直接使用系统渠道中的模型。",
        icon: <Sparkles className="size-4" aria-hidden="true" />,
    },
];

const allFeatureRows = [...workspaceFeatureRows, ...pluginFeatureRows, ...modelFeatureRows];
const featureByKey = new Map(allFeatureRows.map((item) => [item.key, item]));

export default function FeatureAvailabilityPanel() {
    const { message, modal } = App.useApp();
    const setGlobalFeatures = useUserStore((state) => state.setFeatures);
    const [savedFeatures, setSavedFeatures] = useState<FeatureAvailability | null>(null);
    const [draftFeatures, setDraftFeatures] = useState<FeatureAvailability | null>(null);
    const [loading, setLoading] = useState(true);
    const [refreshing, setRefreshing] = useState(false);
    const [saving, setSaving] = useState(false);
    const [loadError, setLoadError] = useState("");
    const [saveError, setSaveError] = useState("");
    const requestVersionRef = useRef(0);

    const load = useCallback(
        async (initial = false, announce = false) => {
            const requestVersion = ++requestVersionRef.current;
            if (initial) setLoading(true);
            else setRefreshing(true);
            setLoadError("");
            try {
                const result = await getAdminFeatureAvailability();
                const value = parseFeatureAvailability(result.features);
                if (requestVersion !== requestVersionRef.current) return;
                setSavedFeatures(value);
                setDraftFeatures(value);
                setGlobalFeatures(value);
                setSaveError("");
                if (announce) message.success("已重新读取当前功能状态");
            } catch (error) {
                if (requestVersion !== requestVersionRef.current) return;
                const errorMessage = error instanceof Error ? error.message : "读取功能开放配置失败";
                setLoadError(errorMessage);
                if (!initial) message.error(errorMessage);
            } finally {
                if (requestVersion === requestVersionRef.current) {
                    setLoading(false);
                    setRefreshing(false);
                }
            }
        },
        [message, setGlobalFeatures],
    );

    useEffect(() => {
        void load(true);
        return () => {
            requestVersionRef.current += 1;
        };
    }, [load]);

    const setFeature = async (key: FeatureKey, enabled: boolean) => {
        if (!savedFeatures || saving || savedFeatures[key] === enabled) return;
        const previous = savedFeatures;
        const expected = { ...savedFeatures, [key]: enabled };
        setDraftFeatures(expected);
        setSaving(true);
        setSaveError("");
        try {
            const result = await updateAdminFeatureAvailability(toEditablePayload(expected));
            const value = parseFeatureAvailability(result.features);
            if (!sameEditableFeatures(value, expected)) throw new Error("服务端返回的功能状态与本次保存内容不一致，请重新读取后核对");
            setSavedFeatures(value);
            setDraftFeatures(value);
            setGlobalFeatures(value);
            message.success(`${featureByKey.get(key)?.title || "功能"}已${enabled ? "开启" : "关闭"}`);
        } catch (error) {
            const errorMessage = error instanceof Error ? error.message : "保存功能开放配置失败";
            setDraftFeatures(previous);
            setSaveError(`${errorMessage}。已恢复修改前状态。`);
            message.error(errorMessage);
        } finally {
            setSaving(false);
        }
    };

    const requestFeatureChange = (key: FeatureKey, enabled: boolean) => {
        if (!savedFeatures || saving || savedFeatures[key] === enabled) return;
        if (key === "creditsEnabled" && !enabled) {
            modal.confirm({
                title: "关闭用户积分功能？",
                content: "保存后新创建的任务和系统渠道请求将不再扣减积分；已经冻结的计费订单仍按原规则结算，已有余额和流水继续保留。",
                okText: "确认关闭",
                cancelText: "取消",
                okButtonProps: { danger: true },
                onOk: () => setFeature(key, false),
            });
            return;
        }
        if (key === "frontendModelsEnabled" && !enabled) {
            modal.confirm({
                title: "关闭前台模型功能？",
                content: "关闭后用户将直接使用系统渠道中配置的模型；管理后台仍保留前台模型配置入口，重新开启后即可继续使用。",
                okText: "确认关闭",
                cancelText: "取消",
                okButtonProps: { danger: true },
                onOk: () => setFeature(key, false),
            });
            return;
        }
        void setFeature(key, enabled);
    };

    if (loading && !draftFeatures) {
        return (
            <div className="admin-settings-stack admin-feature-availability" aria-label="正在读取功能开放配置" role="status">
                <div className="admin-feature-command-bar">
                    <Skeleton active title={{ width: 180 }} paragraph={false} />
                </div>
                <div className="admin-feature-board is-loading">
                    {Array.from({ length: 3 }).map((_, index) => (
                        <div key={index} className="admin-feature-domain">
                            <Skeleton active title={{ width: 120 }} paragraph={{ rows: 3 }} />
                        </div>
                    ))}
                </div>
                <div className="admin-feature-loading-card">
                    <Skeleton active paragraph={{ rows: 2 }} />
                </div>
            </div>
        );
    }

    if (!draftFeatures || !savedFeatures) {
        return (
            <div className="admin-settings-stack admin-feature-availability">
                <div className="admin-feature-load-error" role="alert">
                    <span className="admin-feature-load-error-icon">
                        <AlertTriangle className="size-5" aria-hidden="true" />
                    </span>
                    <div>
                        <h2>无法读取功能开放配置</h2>
                        <p>{loadError || "当前没有可显示的配置，请稍后重试。"}</p>
                    </div>
                    <Button icon={<RefreshCw className="size-4" />} loading={loading} onClick={() => void load(true)}>
                        重新读取
                    </Button>
                </div>
            </div>
        );
    }

    const enabledWorkspaceFeatures = workspaceFeatureRows.filter((row) => effectiveFeatureValue(draftFeatures, row.key)).length;
    const enabledPluginFeatures = pluginFeatureRows.filter((row) => effectiveFeatureValue(draftFeatures, row.key)).length;

    return (
        <div className="admin-settings-stack admin-feature-availability">
            <div className="admin-feature-command-bar">
                <div className="admin-feature-command-copy" aria-live="polite">
                    <div className="flex flex-wrap items-center gap-2">
                        <strong>{saving ? "正在保存更改" : "开关切换后立即生效"}</strong>
                        <AdminStatusBadge label={saving ? "提交中" : savedFeatures.configured ? "服务端配置" : "系统默认"} tone={saving ? "warning" : "neutral"} />
                    </div>
                </div>
                <div className="admin-feature-command-actions">
                    <Button icon={<RefreshCw className="size-4" />} loading={refreshing} disabled={saving} onClick={() => void load(false, true)}>
                        刷新状态
                    </Button>
                </div>
            </div>

            {loadError || saveError ? (
                <div className="admin-feature-inline-alert" role="alert">
                    <AlertTriangle className="size-4 shrink-0" aria-hidden="true" />
                    <span>{saveError || `${loadError}。页面仍显示上一次成功读取的状态。`}</span>
                </div>
            ) : null}

            <div className="admin-feature-board" aria-label="功能开放控制台">
                <FeatureDomainPanel
                    title="1. 用户工作台入口"
                    description="先决定普通用户能进入哪些核心工作区"
                    icon={<MonitorCog className="size-4" aria-hidden="true" />}
                    status={<AdminStatusBadge label={`${enabledWorkspaceFeatures}/4 开放`} tone={enabledWorkspaceFeatures === 4 ? "success" : "neutral"} />}
                >
                    {workspaceFeatureRows.map((row) => (
                        <FeatureSettingRow key={row.key} row={row} saved={savedFeatures} draft={draftFeatures} saving={saving} onChange={requestFeatureChange} />
                    ))}
                </FeatureDomainPanel>

                <FeatureDomainPanel
                    title="2. 插件开放范围"
                    description="先开放插件中心，再决定系统插件是否可见"
                    icon={<PlugZap className="size-4" aria-hidden="true" />}
                    status={<AdminStatusBadge label={`${enabledPluginFeatures}/2 生效`} tone={enabledPluginFeatures === 2 ? "success" : "neutral"} />}
                >
                    <FeatureSettingRow row={pluginFeatureRows[0]} saved={savedFeatures} draft={draftFeatures} saving={saving} onChange={requestFeatureChange} step={1} />
                    {draftFeatures.pluginCenterEnabled ? <FeatureSettingRow row={pluginFeatureRows[1]} saved={savedFeatures} draft={draftFeatures} saving={saving} onChange={requestFeatureChange} step={2} /> : null}
                </FeatureDomainPanel>

                <FeatureDomainPanel
                    title="3. 用户模型来源"
                    description="决定用户选模型时读取前台目录还是系统渠道"
                    icon={<Sparkles className="size-4" aria-hidden="true" />}
                    status={<AdminStatusBadge label={draftFeatures.frontendModelsEnabled ? "前台模型目录" : "系统渠道"} tone="info" />}
                >
                    <FeatureSourceRow row={modelFeatureRows[0]} saved={savedFeatures} draft={draftFeatures} saving={saving} onChange={requestFeatureChange} />
                </FeatureDomainPanel>
            </div>
        </div>
    );
}

function FeatureDomainPanel({ title, description, icon, status, children }: { title: string; description: string; icon: ReactNode; status: ReactNode; children: ReactNode }) {
    return (
        <section className="admin-feature-domain">
            <header className="admin-feature-domain-header">
                <span className="admin-feature-domain-icon">{icon}</span>
                <div className="admin-feature-domain-copy min-w-0 flex-1">
                    <h2>{title}</h2>
                    <p>{description}</p>
                </div>
                <div className="admin-feature-domain-status">{status}</div>
            </header>
            <div className="admin-feature-domain-list">{children}</div>
        </section>
    );
}

function FeatureSettingRow({ row, saved, draft, saving, onChange, step }: { row: FeatureRow; saved: FeatureAvailability; draft: FeatureAvailability; saving: boolean; onChange: (key: FeatureKey, enabled: boolean) => void; step?: number }) {
    const changed = saved[row.key] !== draft[row.key];
    const dependencyDisabled = Boolean(row.dependsOn && !draft[row.dependsOn]);
    const enabled = effectiveFeatureValue(draft, row.key);

    return (
        <article className={cn("admin-feature-board-row", changed && "is-dirty", !enabled && "is-off", row.dependsOn && "is-dependent")}>
            <div className="admin-feature-board-row-copy">
                <span className="admin-feature-board-row-icon">{row.icon}</span>
                <span className="admin-feature-board-row-name">
                    {step ? <small>第 {step} 步</small> : null}
                    <strong>{row.title}</strong>
                    <span>{row.description}</span>
                </span>
                {changed ? <span className="admin-feature-board-row-dirty">待保存</span> : null}
            </div>
            <div className="admin-feature-board-row-control">
                <span>{dependencyDisabled ? "依赖未开启" : enabled ? "已开放" : "已关闭"}</span>
                <Switch checked={draft[row.key]} disabled={saving || dependencyDisabled} onChange={(checked) => onChange(row.key, checked)} aria-label={`设置${row.title}，切换后立即保存`} />
            </div>
        </article>
    );
}

function FeatureSourceRow({ row, saved, draft, saving, onChange }: { row: FeatureRow; saved: FeatureAvailability; draft: FeatureAvailability; saving: boolean; onChange: (key: FeatureKey, enabled: boolean) => void }) {
    const changed = saved.frontendModelsEnabled !== draft.frontendModelsEnabled;
    return (
        <article className={cn("admin-feature-board-row is-source", changed && "is-dirty")}>
            <div className="admin-feature-board-row-copy">
                <span className="admin-feature-board-row-icon">{row.icon}</span>
                <span className="admin-feature-board-row-name">
                    <small>模型来源</small>
                    <strong>用户模型目录</strong>
                    <span>{row.description}</span>
                </span>
                {changed ? <span className="admin-feature-board-row-dirty">待保存</span> : null}
            </div>
            <div className="admin-feature-board-source-selector" role="radiogroup" aria-label="选择用户模型目录来源">
                <button type="button" role="radio" aria-checked={!draft.frontendModelsEnabled} disabled={saving} className={cn(!draft.frontendModelsEnabled && "is-selected")} onClick={() => onChange("frontendModelsEnabled", false)}>
                    系统渠道
                </button>
                <button type="button" role="radio" aria-checked={draft.frontendModelsEnabled} disabled={saving} className={cn(draft.frontendModelsEnabled && "is-selected")} onClick={() => onChange("frontendModelsEnabled", true)}>
                    前台目录
                </button>
            </div>
        </article>
    );
}

function effectiveFeatureValue(features: FeatureAvailability, key: FeatureKey) {
    if (key === "systemPluginsVisibleToUsers") return features.pluginCenterEnabled && features.systemPluginsVisibleToUsers;
    return features[key];
}

function toEditablePayload(features: FeatureAvailability) {
    return {
        shortDramaEnabled: features.shortDramaEnabled,
        taskCenterEnabled: features.taskCenterEnabled,
        creditsEnabled: features.creditsEnabled,
        customChannelsEnabled: features.customChannelsEnabled,
        frontendModelsEnabled: features.frontendModelsEnabled,
        pluginCenterEnabled: features.pluginCenterEnabled,
        systemPluginsVisibleToUsers: features.systemPluginsVisibleToUsers,
    };
}

function sameEditableFeatures(left: FeatureAvailability, right: FeatureAvailability) {
    return editableFeatureKeys.every((key) => left[key] === right[key]);
}

function parseFeatureAvailability(value: unknown): FeatureAvailability {
    if (!value || typeof value !== "object") throw new Error("功能开放配置响应格式无效");
    const record = value as Record<string, unknown>;
    for (const key of editableFeatureKeys) {
        if (typeof record[key] !== "boolean") throw new Error("功能开放配置响应缺少有效开关状态");
    }
    return {
        welcomeEnabled: record.welcomeEnabled as boolean,
        shortDramaEnabled: record.shortDramaEnabled as boolean,
        taskCenterEnabled: record.taskCenterEnabled as boolean,
        creditsEnabled: record.creditsEnabled as boolean,
        customChannelsEnabled: record.customChannelsEnabled as boolean,
        frontendModelsEnabled: record.frontendModelsEnabled as boolean,
        pluginCenterEnabled: record.pluginCenterEnabled as boolean,
        systemPluginsVisibleToUsers: record.systemPluginsVisibleToUsers as boolean,
        configured: typeof record.configured === "boolean" ? record.configured : undefined,
        updatedBy: typeof record.updatedBy === "string" ? record.updatedBy : undefined,
        updatedAt: typeof record.updatedAt === "string" ? record.updatedAt : undefined,
    };
}