"use client";

import React, { useState } from "react";
import { gql, useMutation } from "@apollo/client";
import { useForm } from "react-hook-form"
import { z } from "zod"
import {
    Settings,
    Globe,
    Palette,
    Shield,
    Users,
    Database,
    Mail,
    FileText,
    Server,
    HardDrive,
    Lock,
    User,
    ToggleLeft,
    RefreshCw,
    Download,
    Upload,
    Save,
    CheckCircle,
    AlertCircle,
    Loader2
} from "lucide-react";
import { AdminPanelConfig } from "@/types/admin-panel";
import { commonConfigSchema, zodErrorsToAdminErrors } from "@/lib/config-zod";
import { SiteOpsConfigType } from "@/types/site-config";
import { ConfigItemType } from "@/hooks/use-site-config";
import { UpdateConfig } from "@/types/config";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";
import { zodResolver } from "@hookform/resolvers/zod";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";


// GraphQL Mutation
const UPDATE_CONFIG_BATCH = gql`
            mutation UpdateConfigBatch($input: [UpdateConfig!]!) {
                updateConfigBatch(input: $input)
    }
            `;

// 创建基于后端数据的动态管理面板配置
export function createDynamicAdminConfig(
    data?: SiteOpsConfigType,
    onSave?: (values: Record<string, any>) => Promise<void>,
    onExport?: () => Promise<void>,
    onImport?: (file: File) => Promise<void>,
    configs?: ConfigItemType[]
): AdminPanelConfig {

    // 从后端数据获取初始值（安全访问嵌套属性）
    const getInitialValues = () => {
        if (!data) return {};

        return {
            // Site 配置
            'site.name': data.site?.info?.name || "MMAP System",
            'site.description': "",
            'site.keywords': "",
            'site.url': "/",
            'site.logo': data.site?.brand?.logo_url || "/images/logo.png",
            'site.copyright': "",
            'site.icp': "",
            'site.icp_url': "",
            'site.color_style': (data.site?.brand?.dark_mode_default ? 'dark' : 'light'),

            // User 配置
            'user.default_avatar': "/images/avatar.png",
            'user.default_role': 'user',
            'user.register_invite_code': data.ops?.features?.invite_code_required ?? false,
            'user.register_email_verification': data.ops?.features?.email_verification ?? false,
            'user.open_login': true,
            'user.open_reset_password': true,

            // Email 配置
            'email.smtp_host': "",
            'email.smtp_port': 465,
            'email.smtp_user': "",
            'email.smtp_password': "",
            'email.smtp_from': "",
            'email.smtp_from_name': "",
            'email.smtp_from_email': "",
            'email.system_template': "default",

            // Blog 配置
            'blog.default_author': "",
            'blog.default_category': "",
            'blog.default_tag': "",
            'blog.open_comment': true,

            // Logging 配置
            'logging.level': 'info',
            'logging.max_files': 10,
            'logging.max_file_size': 10,

            // Cache 配置
            'cache.ttl': 3600,
            'cache.max_size': 1024,

            // Switch 配置
            'switch.open_register': data.ops?.features?.registration_enabled ?? true,
            'switch.open_login': true,
            'switch.open_reset_password': true,
            'switch.open_comment': true,
            'switch.open_like': true,
            'switch.open_share': true,
            'switch.open_view': true
        };
    };

    return {
        header: {
            title: "系统配置管理",
            description: "管理站点配置、运营设置和系统参数",
            breadcrumbs: [
                { label: "首页", href: "/" },
                { label: "管理中心", href: "/admin" },
                { label: "系统配置" }
            ],
            actions: [
                {
                    id: "refresh",
                    label: "刷新数据",
                    icon: <RefreshCw className="h-4 w-4" />,
                    variant: "outline",
                    onClick: () => window.location.reload()
                },
                {
                    id: "export",
                    label: "导出配置",
                    icon: <Download className="h-4 w-4" />,
                    variant: "outline",
                    onClick: onExport || (() => console.log("导出配置"))
                },
                {
                    id: "import",
                    label: "导入配置",
                    icon: <Upload className="h-4 w-4" />,
                    variant: "outline",
                    onClick: () => {
                        const input = document.createElement('input');
                        input.type = 'file';
                        input.accept = '.json';
                        input.onchange = (e) => {
                            const file = (e.target as HTMLInputElement).files?.[0];
                            if (file && onImport) {
                                onImport(file);
                            }
                        };
                        input.click();
                    }
                }
            ]
        },

        tabs: [
            // 内容配置 (Site + Blog)
            {
                id: "content",
                title: "内容配置",
                icon: <Globe className="h-4 w-4" />,
                sections: [
                    {
                        id: "site-basic",
                        title: "站点信息",
                        description: "网站基本信息和设置",
                        icon: <Settings className="h-5 w-5" />,
                        fields: [
                            {
                                id: "site.name",
                                label: "网站名称",
                                description: "显示在浏览器标题栏的网站名称",
                                type: "input",
                                value: data?.site?.info?.name || "MMAP System",
                                placeholder: "请输入网站名称",
                                validation: {
                                    required: true,
                                    minLength: 2,
                                    maxLength: 50
                                }
                            },
                            {
                                id: "site.description",
                                label: "网站描述",
                                description: "网站的简要描述信息",
                                type: "textarea",
                                rows: 3,
                                value: "",
                                placeholder: "请输入网站描述"
                            },
                            {
                                id: "site.keywords",
                                label: "网站关键词",
                                description: "SEO相关的关键词，用逗号分隔",
                                type: "input",
                                value: "",
                                placeholder: "请输入关键词，用逗号分隔"
                            },
                            {
                                id: "site.url",
                                label: "网站地址",
                                description: "网站的主域名地址",
                                type: "input",
                                value: "/",
                                placeholder: "请输入网站地址"
                            }
                        ]
                    },
                    {
                        id: "site-brand",
                        title: "品牌设置",
                        description: "网站品牌形象和主题配置",
                        icon: <Palette className="h-5 w-5" />,
                        fields: [
                            {
                                id: "site.logo",
                                label: "Logo地址",
                                description: "网站Logo图片的URL地址",
                                type: "input",
                                value: data?.site?.brand?.logo_url || "/images/logo.png",
                                placeholder: "请输入Logo URL"
                            },
                            {
                                id: "site.color_style",
                                label: "颜色风格",
                                description: "网站的颜色主题风格",
                                type: "select",
                                value: (data?.site?.brand?.dark_mode_default ? 'dark' : 'light'),
                                options: [
                                    { label: "浅色主题", value: "light" },
                                    { label: "深色主题", value: "dark" }
                                ]
                            }
                        ]
                    },
                    {
                        id: "site-legal",
                        title: "法律信息",
                        description: "网站的法律相关信息",
                        icon: <Shield className="h-5 w-5" />,
                        fields: [
                            {
                                id: "site.copyright",
                                label: "版权信息",
                                description: "网站的版权声明",
                                type: "input",
                                value: "",
                                placeholder: "请输入版权信息"
                            },
                            {
                                id: "site.icp",
                                label: "ICP备案号",
                                description: "网站的ICP备案号码",
                                type: "input",
                                value: "",
                                placeholder: "请输入ICP备案号"
                            },
                            {
                                id: "site.icp_url",
                                label: "ICP备案链接",
                                description: "ICP备案查询链接",
                                type: "input",
                                value: "",
                                placeholder: "请输入ICP备案链接"
                            }
                        ]
                    },
                    {
                        id: "blog-defaults",
                        title: "博客设置",
                        description: "博客功能的默认配置",
                        icon: <FileText className="h-5 w-5" />,
                        fields: [
                            {
                                id: "blog.default_author",
                                label: "默认作者",
                                description: "博客文章的默认作者",
                                type: "input",
                                value: "",
                                placeholder: "请输入默认作者"
                            },
                            {
                                id: "blog.default_category",
                                label: "默认分类",
                                description: "博客文章的默认分类",
                                type: "input",
                                value: "",
                                placeholder: "请输入默认分类"
                            },
                            {
                                id: "blog.default_tag",
                                label: "默认标签",
                                description: "博客文章的默认标签",
                                type: "input",
                                value: "",
                                placeholder: "请输入默认标签"
                            },
                            {
                                id: "blog.open_comment",
                                label: "开放评论",
                                description: "是否允许用户对博客文章进行评论",
                                type: "switch",
                                value: true
                            }
                        ]
                    }
                ]
            },

            // 用户管理 (User + Switch)
            {
                id: "user",
                title: "用户管理",
                icon: <Users className="h-4 w-4" />,
                sections: [
                    {
                        id: "user-defaults",
                        title: "默认设置",
                        description: "用户相关的默认配置",
                        icon: <Settings className="h-5 w-5" />,
                        fields: [
                            {
                                id: "user.default_avatar",
                                label: "默认头像",
                                description: "新用户的默认头像图片",
                                type: "input",
                                value: "/images/avatar.png",
                                placeholder: "请输入默认头像URL"
                            },
                            {
                                id: "user.default_role",
                                label: "默认角色",
                                description: "新用户注册后的默认角色",
                                type: "select",
                                value: 'user',
                                options: [
                                    { label: "普通用户", value: "user" },
                                    { label: "VIP用户", value: "vip" },
                                    { label: "管理员", value: "admin" }
                                ]
                            }
                        ]
                    },
                    {
                        id: "user-registration",
                        title: "注册设置",
                        description: "用户注册相关的配置",
                        icon: <Shield className="h-5 w-5" />,
                        fields: [
                            {
                                id: "user.register_invite_code",
                                label: "需要邀请码",
                                description: "注册时是否需要邀请码",
                                type: "switch",
                                value: data?.ops?.features?.invite_code_required ?? false
                            },
                            {
                                id: "user.register_email_verification",
                                label: "需要邮箱验证",
                                description: "注册后是否需要验证邮箱",
                                type: "switch",
                                value: data?.ops?.features?.email_verification ?? false
                            }
                        ]
                    },
                    {
                        id: "user-access",
                        title: "访问控制",
                        description: "用户访问和登录相关设置",
                        icon: <Lock className="h-5 w-5" />,
                        fields: [
                            {
                                id: "user.open_login",
                                label: "开放登录",
                                description: "是否允许用户登录",
                                type: "switch",
                                value: true
                            },
                            {
                                id: "user.open_reset_password",
                                label: "开放重置密码",
                                description: "是否允许用户重置密码",
                                type: "switch",
                                value: true
                            }
                        ]
                    },
                    {
                        id: "user-features",
                        title: "功能开关",
                        description: "用户相关功能的开关配置",
                        icon: <ToggleLeft className="h-5 w-5" />,
                        fields: [
                            {
                                id: "switch.open_register",
                                label: "开放注册",
                                description: "是否允许新用户注册",
                                type: "switch",
                                value: data?.ops?.features?.registration_enabled ?? true
                            },
                            {
                                id: "switch.open_comment",
                                label: "开放评论",
                                description: "是否允许用户进行评论",
                                type: "switch",
                                value: true
                            },
                            {
                                id: "switch.open_like",
                                label: "开放点赞",
                                description: "是否允许用户进行点赞",
                                type: "switch",
                                value: true
                            },
                            {
                                id: "switch.open_share",
                                label: "开放分享",
                                description: "是否允许用户分享内容",
                                type: "switch",
                                value: true
                            },
                            {
                                id: "switch.open_view",
                                label: "开放查看",
                                description: "是否允许用户查看内容",
                                type: "switch",
                                value: true
                            }
                        ]
                    }
                ]
            },

            // 邮件配置
            {
                id: "email",
                title: "邮件配置",
                icon: <Mail className="h-4 w-4" />,
                sections: [
                    {
                        id: "email-smtp",
                        title: "SMTP设置",
                        description: "邮件服务器的SMTP配置",
                        icon: <Server className="h-5 w-5" />,
                        fields: [
                            {
                                id: "email.smtp_host",
                                label: "SMTP主机",
                                description: "SMTP服务器地址",
                                type: "input",
                                value: "",
                                placeholder: "请输入SMTP主机地址"
                            },
                            {
                                id: "email.smtp_port",
                                label: "SMTP端口",
                                description: "SMTP服务器端口号",
                                type: "number",
                                value: 465,
                                validation: {
                                    required: true,
                                    min: 1,
                                    max: 65535
                                }
                            },
                            {
                                id: "email.smtp_user",
                                label: "SMTP用户名",
                                description: "SMTP服务器登录用户名",
                                type: "input",
                                value: "",
                                placeholder: "请输入SMTP用户名"
                            },
                            {
                                id: "email.smtp_password",
                                label: "SMTP密码",
                                description: "SMTP服务器登录密码",
                                type: "password",
                                value: "",
                                placeholder: "请输入SMTP密码"
                            }
                        ]
                    },
                    {
                        id: "email-sender",
                        title: "发件人设置",
                        description: "邮件发件人相关信息",
                        icon: <User className="h-5 w-5" />,
                        fields: [
                            {
                                id: "email.smtp_from",
                                label: "发件人地址",
                                description: "系统发送邮件的发件人地址",
                                type: "email",
                                value: "",
                                placeholder: "请输入发件人邮箱"
                            },
                            {
                                id: "email.smtp_from_name",
                                label: "发件人姓名",
                                description: "系统发送邮件的发件人姓名",
                                type: "input",
                                value: "",
                                placeholder: "请输入发件人姓名"
                            },
                            {
                                id: "email.smtp_from_email",
                                label: "发件人邮箱",
                                description: "系统发送邮件的发件人邮箱",
                                type: "email",
                                value: "",
                                placeholder: "请输入发件人邮箱"
                            }
                        ]
                    },
                    {
                        id: "email-templates",
                        title: "邮件模板",
                        description: "邮件模板相关配置",
                        icon: <FileText className="h-5 w-5" />,
                        fields: [
                            {
                                id: "email.system_template",
                                label: "系统模板",
                                description: "系统邮件的默认模板",
                                type: "select",
                                value: "default",
                                options: [
                                    { label: "默认模板", value: "default" },
                                    { label: "简洁模板", value: "simple" },
                                    { label: "企业模板", value: "enterprise" }
                                ]
                            }
                        ]
                    }
                ]
            },

            // 系统配置 (Logging + Cache)
            {
                id: "system",
                title: "系统配置",
                icon: <Database className="h-4 w-4" />,
                sections: [
                    {
                        id: "logging-level",
                        title: "日志级别",
                        description: "系统日志的级别设置",
                        icon: <Settings className="h-5 w-5" />,
                        fields: [
                            {
                                id: "logging.level",
                                label: "日志级别",
                                description: "系统记录日志的最低级别",
                                type: "select",
                                value: 'info',
                                options: [
                                    { label: "调试", value: "debug" },
                                    { label: "信息", value: "info" },
                                    { label: "警告", value: "warn" },
                                    { label: "错误", value: "error" },
                                    { label: "致命", value: "fatal" }
                                ]
                            }
                        ]
                    },
                    {
                        id: "logging-files",
                        title: "日志文件管理",
                        description: "日志文件的管理配置",
                        icon: <HardDrive className="h-5 w-5" />,
                        fields: [
                            {
                                id: "logging.max_files",
                                label: "最大文件数",
                                description: "保留的日志文件最大数量",
                                type: "number",
                                value: 10,
                                validation: {
                                    required: true,
                                    min: 1,
                                    max: 100
                                }
                            },
                            {
                                id: "logging.max_file_size",
                                label: "最大文件大小(MB)",
                                description: "单个日志文件的最大大小",
                                type: "number",
                                value: 10,
                                validation: {
                                    required: true,
                                    min: 1,
                                    max: 10240
                                }
                            }
                        ]
                    },
                    {
                        id: "cache-settings",
                        title: "缓存设置",
                        description: "系统缓存的配置参数",
                        icon: <Settings className="h-5 w-5" />,
                        fields: [
                            {
                                id: "cache.ttl",
                                label: "缓存TTL(秒)",
                                description: "缓存的生存时间，单位为秒",
                                type: "number",
                                value: 3600,
                                validation: {
                                    required: true,
                                    min: 1,
                                    max: 86400
                                }
                            },
                            {
                                id: "cache.max_size",
                                label: "最大缓存大小(MB)",
                                description: "缓存的最大内存占用",
                                type: "number",
                                value: 1024,
                                validation: {
                                    required: true,
                                    min: 1,
                                    max: 10000
                                }
                            }
                        ]
                    }
                ]
            }
        ],

        // 配置选项
        autoSave: false, // 禁用自动保存，使用手动保存
        validateOnChange: true,
        onValidate: (values) => {
            const result = commonConfigSchema.safeParse(values);
            return zodErrorsToAdminErrors(result);
        }
    };
}

// 配置更新Hook
export function useConfigUpdate() {
    const [updateConfigBatch, { loading, error, data }] = useMutation(UPDATE_CONFIG_BATCH);

    const updateConfigs = async (configs: Record<string, any>) => {
        try {
            // 将配置对象转换为UpdateConfig数组
            const updateConfigs: UpdateConfig[] = Object.entries(configs).map(([key, value]) => ({
                key,
                value: String(value), // 直接转换为字符串，避免JSON.stringify添加双引号
                description: undefined,
                category: undefined,
                is_editable: true
            }));

            const result = await updateConfigBatch({
                variables: {
                    input: updateConfigs
                }
            });

            if (result.data?.updateConfigBatch === "successed") {
                toast.success("配置更新成功！");
                return true;
            } else {
                toast.error("配置更新失败");
                return false;
            }
        } catch (err) {
            console.error("更新配置失败:", err);
            toast.error("配置更新失败，请检查网络连接");
            return false;
        }
    };

    return {
        updateConfigs,
        loading,
        error,
        data
    };
}

// 配置保存按钮组件
export function ConfigSaveButton({
    onSave,
    loading = false,
    disabled = false
}: {
    onSave: () => void;
    loading?: boolean;
    disabled?: boolean;
}) {
    return (
        <Button
            onClick={onSave}
            disabled={disabled || loading}
            className="flex items-center gap-2"
        >
            {loading ? (
                <>
                    <RefreshCw className="h-4 w-4 animate-spin" />
                    保存中...
                </>
            ) : (
                <>
                    <Save className="h-4 w-4" />
                    保存配置
                </>
            )}
        </Button>
    );
}

// 配置状态指示器
export function ConfigStatusIndicator({
    status,
    message
}: {
    status: 'idle' | 'loading' | 'success' | 'error';
    message?: string;
}) {
    if (status === 'idle') return null;

    return (
        <div className="flex items-center gap-2 p-2 rounded-md">
            {status === 'loading' && (
                <>
                    <RefreshCw className="h-4 w-4 animate-spin text-blue-500" />
                    <span className="text-blue-600">保存中...</span>
                </>
            )}
            {status === 'success' && (
                <>
                    <CheckCircle className="h-4 w-4 text-green-500" />
                    <span className="text-green-600">保存成功</span>
                </>
            )}
            {status === 'error' && (
                <>
                    <AlertCircle className="h-4 w-4 text-red-500" />
                    <span className="text-red-600">{message || '保存失败'}</span>
                </>
            )}
        </div>
    );
}