"use client"

import {useEffect, useMemo, useState} from "react"
import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
import {Fingerprint, Globe, Loader2, Lock, Pencil, Plus, Settings, Trash2, UserPlus} from "lucide-react"
import {useRouter} from "next/navigation"
import {motion} from "motion/react"

import {Button} from "@/components/ui/button"
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
import {Switch} from "@/components/ui/switch"
import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
import {useAuth} from "@/components/providers/auth-provider"
import {AuthSourceModal} from "@/components/common/settings/auth-source-modal"
import {AdminService} from "@/lib/services"
import type {AuthSource, SystemConfig} from "@/lib/services/admin"
import {toast} from "sonner"

const SECURITY_KEYS = [
  {
    key: "password_login_enabled",
    title: "允许密码登录",
    description: "关闭后仅保留第三方 OIDC 认证源进行系统登录。",
    icon: Lock,
  },
  {
    key: "registration_enabled",
    title: "允许注册",
    description: "关闭后系统将禁止新用户进行自主账号注册。",
    icon: UserPlus,
  },
  {
    key: "password_register_enabled",
    title: "允许密码注册",
    description: "关闭后只能通过管理员创建或第三方认证关联建号。",
    icon: Fingerprint,
  },
  {
    key: "oidc_login_enabled",
    title: "允许 OIDC 登录",
    description: "关闭后所有的第三方 OIDC 认证登录入口都会被隐藏。",
    icon: Globe,
  },
] as const

type SecurityKey = (typeof SECURITY_KEYS)[number]["key"]

function systemConfigMap(configs: SystemConfig[]) {
  return configs.reduce<Record<string, SystemConfig>>((accumulator, config) => {
    accumulator[config.key] = config
    return accumulator
  }, {})
}

export function SecurityMain() {
  const queryClient = useQueryClient()
  const { user, loading } = useAuth()
  const router = useRouter()
  const [authSourceModalOpen, setAuthSourceModalOpen] = useState(false)
  const [selectedSource, setSelectedSource] = useState<AuthSource | null>(null)

  const systemConfigsQuery = useQuery({
    queryKey: ["admin", "system-configs"],
    queryFn: () => AdminService.listSystemConfigs("system"),
    enabled: !!user?.is_admin,
  })

  const authSourcesQuery = useQuery({
    queryKey: ["auth", "sources"],
    queryFn: () => AdminService.listAuthSources(),
    enabled: !!user?.is_admin,
  })

  const configs = useMemo(
    () => systemConfigMap(systemConfigsQuery.data ?? []),
    [systemConfigsQuery.data],
  )

  useEffect(() => {
    if (!loading && (!user || !user.is_admin)) {
      router.replace("/settings/profile")
    }
  }, [user, loading, router])

  useEffect(() => {
    if (user?.is_admin) {
      void systemConfigsQuery.refetch()
    }
  }, [systemConfigsQuery, user])

  const updateConfigMutation = useMutation({
    mutationFn: async ({ key, value }: { key: SecurityKey; value: boolean }) => {
      const config = configs[key]
      if (!config) {
        throw new Error(`缺少配置项: ${key}`)
      }
      await AdminService.updateSystemConfig(key, {
        value: value ? "true" : "false",
        description: config.description,
      })
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["admin", "system-configs"] })
      toast.success("系统安全配置已更新")
    },
    onError: (error: Error) => {
      toast.error(error.message || "更新配置失败")
    },
  })

  const toggleSourceMutation = useMutation({
    mutationFn: async (source: AuthSource) => {
      await AdminService.toggleAuthSource(source.id, { is_active: !source.is_active })
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["auth", "sources"] })
      await queryClient.invalidateQueries({ queryKey: ["auth", "public-sources"] })
      toast.success("认证源状态已更新")
    },
    onError: (error: Error) => {
      toast.error(error.message || "切换状态失败")
    },
  })

  const deleteSourceMutation = useMutation({
    mutationFn: async (sourceId: string) => {
      await AdminService.deleteAuthSource(sourceId)
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["auth", "sources"] })
      await queryClient.invalidateQueries({ queryKey: ["auth", "public-sources"] })
      toast.success("认证源已删除")
    },
    onError: (error: Error) => {
      toast.error(error.message || "删除认证源失败")
    },
  })

  const handleToggle = (key: SecurityKey, checked: boolean) => {
    updateConfigMutation.mutate({ key, value: checked })
  }

  if (loading || !user || !user.is_admin) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <Loader2 className="size-6 animate-spin text-indigo-500" />
      </div>
    )
  }

  return (
    <motion.div
      initial={{ opacity: 0, y: 15 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.35, ease: "easeOut" }}
      className="py-6 space-y-6 max-w-4xl mx-auto px-4"
    >
      <Tabs defaultValue="security" className="w-full">
        <TabsList className="w-full overflow-x-auto">
          <TabsTrigger value="security" className="px-0 pb-2 text-xs font-semibold">
            系统安全设置
          </TabsTrigger>
          <TabsTrigger value="operation" className="px-0 pb-2 text-xs font-semibold">
            运营设置
          </TabsTrigger>
          <TabsTrigger value="system" className="px-0 pb-2 text-xs font-semibold">
            系统设置
          </TabsTrigger>
          <TabsTrigger value="other" className="px-0 pb-2 text-xs font-semibold">
            其他设置
          </TabsTrigger>
          <TabsTrigger value="info" className="px-0 pb-2 text-xs font-semibold">
            系统信息
          </TabsTrigger>
        </TabsList>

        <TabsContent value="security" className="pt-4">
          <div className="space-y-6">
            {/* 系统登录与注册控制 */}
            <Card className="border border-dashed shadow-sm">
              <CardHeader className="border-b border-dashed pb-4">
                <div className="flex items-center gap-2">
                  <div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-500">
                    <Settings className="size-4" />
                  </div>
                  <div>
                    <CardTitle className="text-base font-semibold">系统安全与注册控制</CardTitle>
                    <CardDescription className="text-xs">配置系统的登录限制与用户自主注册权限</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="pt-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {SECURITY_KEYS.map((item) => {
                    const config = configs[item.key]
                    const checked = config ? config.value === "true" : false
                    const Icon = item.icon
                    return (
                      <div
                        key={item.key}
                        className="flex items-center justify-between gap-4 rounded-xl border border-dashed p-4 bg-card hover:bg-muted/10 hover:border-indigo-500/30 transition-all duration-300 shadow-sm"
                      >
                        <div className="space-y-1">
                          <div className="flex items-center gap-2">
                            {Icon && <Icon className="size-4 text-indigo-500" />}
                            <span className="font-medium text-sm text-foreground">{item.title}</span>
                          </div>
                          <p className="text-xs text-muted-foreground leading-relaxed pr-2">{item.description}</p>
                        </div>
                        <Switch
                          checked={checked}
                          disabled={updateConfigMutation.isPending}
                          onCheckedChange={(value) => handleToggle(item.key, value)}
                        />
                      </div>
                    )
                  })}
                </div>
              </CardContent>
            </Card>

            {/* 认证源配置管理 */}
            <Card className="border border-dashed shadow-sm">
              <CardHeader className="border-b border-dashed pb-4 flex flex-row items-center justify-between gap-4">
                <div className="flex items-center gap-2">
                  <div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-500">
                    <Globe className="size-4" />
                  </div>
                  <div>
                    <CardTitle className="text-base font-semibold">认证源管理</CardTitle>
                    <CardDescription className="text-xs">添加、修改并启用系统自定义的 OIDC 认证源</CardDescription>
                  </div>
                </div>
                <Button
                  type="button"
                  size="sm"
                  onClick={() => {
                    setSelectedSource(null)
                    setAuthSourceModalOpen(true)
                  }}
                  variant="secondary"
                >
                  <Plus className="mr-1.5 size-3.5" />
                  新增认证源
                </Button>
              </CardHeader>
              <CardContent className="pt-6 space-y-3">
                {authSourcesQuery.isPending ? (
                  <div className="flex items-center justify-center p-8">
                    <Loader2 className="size-6 animate-spin text-muted-foreground/50" />
                  </div>
                ) : (authSourcesQuery.data ?? []).length > 0 ? (
                  (authSourcesQuery.data ?? []).map((source) => (
                    <div
                      key={source.id}
                      className="flex items-center justify-between rounded-xl border border-dashed p-4 bg-card hover:bg-muted/10 transition-all duration-300 shadow-sm"
                    >
                      <div className="space-y-1.5">
                        <div className="flex items-center gap-2">
                          <span className="font-semibold text-sm text-foreground">{source.display_name || source.name}</span>
                          <span className={`text-[10px] px-2 py-0.5 rounded-full border font-medium ${
                            source.is_active
                              ? "bg-emerald-500/10 text-emerald-500 border-emerald-500/20"
                              : "bg-amber-500/10 text-amber-500 border-amber-500/20"
                          }`}>
                            {source.is_active ? "已启用" : "已禁用"}
                          </span>
                        </div>
                        <div className="text-xs text-muted-foreground font-mono">
                          标识符: {source.name} · 类型: {source.type.toUpperCase()}
                        </div>
                      </div>
                      <div className="flex items-center gap-4">
                        <span className={`text-xs px-2.5 py-1 rounded-lg border font-medium hidden sm:inline-block ${
                          source.client_secret_configured
                            ? "bg-indigo-500/5 text-indigo-500 border-indigo-500/10"
                            : "bg-rose-500/5 text-rose-500 border-rose-500/10"
                        }`}>
                          {source.client_secret_configured ? "Secret 已配置" : "Secret 未配置"}
                        </span>

                        <div className="flex items-center gap-2">
                          <Switch
                            checked={source.is_active}
                            disabled={toggleSourceMutation.isPending}
                            className="scale-90 mr-2"
                            onCheckedChange={() => toggleSourceMutation.mutate(source)}
                          />
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            className="size-8 text-muted-foreground hover:text-indigo-500 hover:bg-indigo-500/10 rounded-lg transition-colors"
                            onClick={() => {
                              setSelectedSource(source)
                              setAuthSourceModalOpen(true)
                            }}
                          >
                            <Pencil className="size-4" />
                          </Button>
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            className="size-8 text-muted-foreground hover:text-rose-500 hover:bg-rose-500/10 rounded-lg transition-colors"
                            disabled={deleteSourceMutation.isPending}
                            onClick={() => {
                              if (window.confirm(`确定删除认证源「${source.display_name || source.name}」吗？`)) {
                                deleteSourceMutation.mutate(source.id)
                              }
                            }}
                          >
                            <Trash2 className="size-4" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  ))
                ) : (
                  <div className="rounded-xl border border-dashed border-border/50 px-4 py-8 text-center text-xs text-muted-foreground bg-muted/5 flex flex-col items-center justify-center gap-3">
                    <span>暂无配置的认证源，点击上方按钮新增</span>
                    <Button
                      type="button"
                      size="sm"
                      variant="outline"
                      onClick={() => {
                        setSelectedSource(null)
                        setAuthSourceModalOpen(true)
                      }}
                      className="border-dashed"
                    >
                      <Plus className="mr-1.5 size-3.5" />
                      新增认证源
                    </Button>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </TabsContent>
        <TabsContent value="operation" />
        <TabsContent value="system" />
        <TabsContent value="other" />
        <TabsContent value="info" />
      </Tabs>

      <AuthSourceModal
        isOpen={authSourceModalOpen}
        source={selectedSource}
        onClose={() => setAuthSourceModalOpen(false)}
        onChanged={async () => {
          await queryClient.invalidateQueries({ queryKey: ["auth", "sources"] })
          await queryClient.invalidateQueries({ queryKey: ["auth", "public-sources"] })
          await authSourcesQuery.refetch()
        }}
      />
    </motion.div>
  )
}