import { useCallback, useEffect, useState } from 'react'

import { Alert, AlertDescription } from '@/components/ui/alert'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { KeyValueEditor } from '@/components/ui/key-value-editor'
import { ScrollArea } from '@/components/ui/scroll-area'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Switch } from '@/components/ui/switch'
import { Textarea } from '@/components/ui/textarea'
import { DynamicConfigForm } from '@/components/dynamic-form'
import { RestartOverlay } from '@/components/restart-overlay'
import { useToast } from '@/hooks/use-toast'
import { getBotConfig, getBotConfigSchema, updateBotConfigSection } from '@/lib/config-api'
import { fieldHooks } from '@/lib/field-hooks'
import { RestartProvider, useRestart } from '@/lib/restart-context'
import type { ConfigSchema } from '@/types/config-schema'
import { Copy, Info, Plus, Power, Save, Server, Trash2 } from 'lucide-react'

import { MCPRootItemsHook } from './config/bot/hooks'

type ConfigSectionData = Record<string, unknown>
type MCPTransport = 'stdio' | 'streamable_http'

interface MCPAuthorization {
  mode: 'none' | 'bearer'
  bearer_token: string
}

interface MCPServerConfig {
  name: string
  enabled: boolean
  transport: MCPTransport
  command: string
  args: string[]
  env: Record<string, string>
  url: string
  headers: Record<string, string>
  http_timeout_seconds: number
  read_timeout_seconds: number
  authorization: MCPAuthorization
}

const DEFAULT_MCP_SERVER: MCPServerConfig = {
  name: '',
  enabled: true,
  transport: 'stdio',
  command: '',
  args: [],
  env: {},
  url: '',
  headers: {},
  http_timeout_seconds: 30,
  read_timeout_seconds: 300,
  authorization: {
    mode: 'none',
    bearer_token: '',
  },
}

function asStringMap(value: unknown): Record<string, string> {
  if (!value || typeof value !== 'object' || Array.isArray(value)) {
    return {}
  }

  return Object.fromEntries(
    Object.entries(value as Record<string, unknown>).map(([key, itemValue]) => [
      key,
      String(itemValue ?? ''),
    ]),
  )
}

function normalizeMCPServer(value: unknown, index: number): MCPServerConfig {
  const source =
    value && typeof value === 'object' && !Array.isArray(value)
      ? (value as Record<string, unknown>)
      : {}
  const auth =
    source.authorization &&
    typeof source.authorization === 'object' &&
    !Array.isArray(source.authorization)
      ? (source.authorization as Record<string, unknown>)
      : {}
  const transport = source.transport === 'streamable_http' ? 'streamable_http' : 'stdio'

  return {
    ...DEFAULT_MCP_SERVER,
    name: typeof source.name === 'string' ? source.name : `mcp-server-${index + 1}`,
    enabled: typeof source.enabled === 'boolean' ? source.enabled : DEFAULT_MCP_SERVER.enabled,
    transport,
    command: typeof source.command === 'string' ? source.command : '',
    args: Array.isArray(source.args) ? source.args.map((item) => String(item ?? '')) : [],
    env: asStringMap(source.env),
    url: typeof source.url === 'string' ? source.url : '',
    headers: asStringMap(source.headers),
    http_timeout_seconds:
      typeof source.http_timeout_seconds === 'number'
        ? source.http_timeout_seconds
        : DEFAULT_MCP_SERVER.http_timeout_seconds,
    read_timeout_seconds:
      typeof source.read_timeout_seconds === 'number'
        ? source.read_timeout_seconds
        : DEFAULT_MCP_SERVER.read_timeout_seconds,
    authorization: {
      mode: auth.mode === 'bearer' ? 'bearer' : 'none',
      bearer_token: typeof auth.bearer_token === 'string' ? auth.bearer_token : '',
    },
  }
}

function normalizeMCPServers(value: unknown): MCPServerConfig[] {
  if (!Array.isArray(value)) {
    return []
  }

  return value.map((item, index) => normalizeMCPServer(item, index))
}

function updateNestedValue(
  target: ConfigSectionData | null | undefined,
  pathSegments: string[],
  value: unknown
): ConfigSectionData {
  const currentTarget = target && typeof target === 'object' && !Array.isArray(target) ? target : {}
  const [currentPath, ...restPath] = pathSegments

  if (!currentPath) {
    return currentTarget
  }

  if (restPath.length === 0) {
    return {
      ...currentTarget,
      [currentPath]: value,
    }
  }

  return {
    ...currentTarget,
    [currentPath]: updateNestedValue(currentTarget[currentPath] as ConfigSectionData | undefined, restPath, value),
  }
}

function MCPServersBlockEditor({
  servers,
  onChange,
}: {
  servers: MCPServerConfig[]
  onChange: (servers: MCPServerConfig[]) => void
}) {
  const updateServer = (index: number, patch: Partial<MCPServerConfig>) => {
    onChange(servers.map((server, serverIndex) => (
      serverIndex === index ? { ...server, ...patch } : server
    )))
  }

  const updateAuthorization = (index: number, patch: Partial<MCPAuthorization>) => {
    const server = servers[index]
    if (!server) {
      return
    }
    updateServer(index, {
      authorization: {
        ...server.authorization,
        ...patch,
      },
    })
  }

  const addServer = () => {
    onChange([
      ...servers,
      {
        ...DEFAULT_MCP_SERVER,
        name: `mcp-server-${servers.length + 1}`,
      },
    ])
  }

  const duplicateServer = (index: number) => {
    const server = servers[index]
    if (!server) {
      return
    }
    const nextServer = {
      ...server,
      name: `${server.name || 'mcp-server'}-copy`,
      args: [...server.args],
      env: { ...server.env },
      headers: { ...server.headers },
      authorization: { ...server.authorization },
    }
    onChange([
      ...servers.slice(0, index + 1),
      nextServer,
      ...servers.slice(index + 1),
    ])
  }

  const removeServer = (index: number) => {
    onChange(servers.filter((_, serverIndex) => serverIndex !== index))
  }

  return (
    <Card>
      <CardHeader className="space-y-3">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div className="space-y-1">
            <div className="flex items-center gap-2">
              <Server className="h-5 w-5 text-muted-foreground" />
              <CardTitle className="text-lg">MCP 服务</CardTitle>
              <Badge variant="secondary" className="text-xs">
                {servers.length} 个
              </Badge>
            </div>
            <CardDescription>
              这里会写入 mcp.servers。stdio 用命令启动本地服务，streamable_http 连接远程 MCP 端点。
            </CardDescription>
          </div>
          <Button type="button" size="sm" onClick={addServer}>
            <Plus className="mr-1 h-4 w-4" />
            添加服务
          </Button>
        </div>
      </CardHeader>
      <CardContent className="space-y-3">
        {servers.length === 0 ? (
          <div className="rounded-lg border border-dashed bg-muted/20 px-4 py-8 text-center text-sm text-muted-foreground">
            尚未配置 MCP 服务。添加一个服务后，MaiSaka 可以调用它暴露的工具。
          </div>
        ) : (
          servers.map((server, index) => (
            <Card key={`${server.name}-${index}`} className="border-border/70 bg-muted/20 shadow-none">
              <CardHeader className="space-y-3 px-4 py-3">
                <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                  <div className="flex min-w-0 flex-1 items-center gap-3">
                    <Switch
                      checked={server.enabled}
                      onCheckedChange={(enabled) => updateServer(index, { enabled })}
                    />
                    <div className="min-w-0 flex-1">
                      <Input
                        value={server.name}
                        onChange={(event) => updateServer(index, { name: event.target.value })}
                        placeholder="服务名称，必须唯一"
                        className="h-8 font-medium"
                      />
                    </div>
                    <Badge variant={server.enabled ? 'default' : 'secondary'} className="shrink-0 text-[10px]">
                      {server.enabled ? '启用' : '禁用'}
                    </Badge>
                  </div>
                  <div className="flex shrink-0 items-center gap-2">
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8"
                      onClick={() => duplicateServer(index)}
                      title="复制服务"
                    >
                      <Copy className="h-4 w-4" />
                    </Button>
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8 text-destructive hover:text-destructive"
                      onClick={() => removeServer(index)}
                      title="删除服务"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="space-y-4 px-4 pb-4 pt-0">
                <div className="grid gap-3 md:grid-cols-[12rem_1fr]">
                  <div className="space-y-1.5">
                    <label className="text-xs font-medium text-muted-foreground">传输方式</label>
                    <Select
                      value={server.transport}
                      onValueChange={(transport) => updateServer(index, { transport: transport as MCPTransport })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="stdio">stdio</SelectItem>
                        <SelectItem value="streamable_http">streamable_http</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  {server.transport === 'stdio' ? (
                    <div className="space-y-1.5">
                      <label className="text-xs font-medium text-muted-foreground">启动命令</label>
                      <Input
                        value={server.command}
                        onChange={(event) => updateServer(index, { command: event.target.value })}
                        placeholder="例如 uvx、npx、python"
                      />
                    </div>
                  ) : (
                    <div className="space-y-1.5">
                      <label className="text-xs font-medium text-muted-foreground">服务 URL</label>
                      <Input
                        value={server.url}
                        onChange={(event) => updateServer(index, { url: event.target.value })}
                        placeholder="https://example.com/mcp"
                      />
                    </div>
                  )}
                </div>

                {server.transport === 'stdio' ? (
                  <div className="grid gap-3 lg:grid-cols-2">
                    <div className="space-y-1.5">
                      <label className="text-xs font-medium text-muted-foreground">命令参数</label>
                      <Textarea
                        value={server.args.join('\n')}
                        onChange={(event) => updateServer(index, {
                          args: event.target.value
                            .split('\n')
                            .map((line) => line.trim())
                            .filter((line) => line.length > 0),
                        })}
                        rows={4}
                        placeholder="每行一个参数"
                      />
                    </div>
                    <div className="space-y-1.5">
                      <label className="text-xs font-medium text-muted-foreground">环境变量</label>
                      <KeyValueEditor
                        value={server.env}
                        onChange={(env) => updateServer(index, { env: asStringMap(env) })}
                      />
                    </div>
                  </div>
                ) : (
                  <div className="space-y-3">
                    <div className="grid gap-3 md:grid-cols-2">
                      <div className="space-y-1.5">
                        <label className="text-xs font-medium text-muted-foreground">认证模式</label>
                        <Select
                          value={server.authorization.mode}
                          onValueChange={(mode) => updateAuthorization(index, { mode: mode as MCPAuthorization['mode'] })}
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="none">none</SelectItem>
                            <SelectItem value="bearer">bearer</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      {server.authorization.mode === 'bearer' && (
                        <div className="space-y-1.5">
                          <label className="text-xs font-medium text-muted-foreground">Bearer Token</label>
                          <Input
                            type="password"
                            value={server.authorization.bearer_token}
                            onChange={(event) => updateAuthorization(index, { bearer_token: event.target.value })}
                            placeholder="HTTP Bearer Token"
                          />
                        </div>
                      )}
                    </div>
                    <div className="space-y-1.5">
                      <label className="text-xs font-medium text-muted-foreground">请求 Headers</label>
                      <KeyValueEditor
                        value={server.headers}
                        onChange={(headers) => updateServer(index, { headers: asStringMap(headers) })}
                      />
                    </div>
                  </div>
                )}

                <div className="grid gap-3 md:grid-cols-2">
                  <div className="space-y-1.5">
                    <label className="text-xs font-medium text-muted-foreground">HTTP 请求超时（秒）</label>
                    <Input
                      type="number"
                      min={0.1}
                      step={0.1}
                      value={server.http_timeout_seconds}
                      onChange={(event) => updateServer(index, {
                        http_timeout_seconds: Number.parseFloat(event.target.value) || 0.1,
                      })}
                    />
                  </div>
                  <div className="space-y-1.5">
                    <label className="text-xs font-medium text-muted-foreground">会话读取超时（秒）</label>
                    <Input
                      type="number"
                      min={0.1}
                      step={0.1}
                      value={server.read_timeout_seconds}
                      onChange={(event) => updateServer(index, {
                        read_timeout_seconds: Number.parseFloat(event.target.value) || 0.1,
                      })}
                    />
                  </div>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </CardContent>
    </Card>
  )
}

export function MCPSettingsPage() {
  return (
    <RestartProvider>
      <MCPSettingsPageContent />
    </RestartProvider>
  )
}

function MCPSettingsPageContent() {
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
  const [mcpConfig, setMcpConfig] = useState<ConfigSectionData>({})
  const [mcpSchema, setMcpSchema] = useState<ConfigSchema | null>(null)
  const { toast } = useToast()
  const { triggerRestart, isRestarting } = useRestart()

  useEffect(() => {
    const hookEntries = [
      ['mcp.client.roots.items', MCPRootItemsHook],
    ] as const

    for (const [fieldPath, hookComponent] of hookEntries) {
      fieldHooks.register(fieldPath, hookComponent, 'replace')
    }

    return () => {
      for (const [fieldPath] of hookEntries) {
        fieldHooks.unregister(fieldPath)
      }
    }
  }, [])

  const loadConfig = useCallback(async () => {
    try {
      setLoading(true)
      const [configResult, schemaResult] = await Promise.all([getBotConfig(), getBotConfigSchema()])

      if (!configResult.success) {
        toast({
          title: '加载失败',
          description: configResult.error,
          variant: 'destructive',
        })
        return
      }

      if (!schemaResult.success) {
        toast({
          title: '加载失败',
          description: schemaResult.error,
          variant: 'destructive',
        })
        return
      }

      const configPayload = configResult.data as { config?: Record<string, unknown> } & Record<string, unknown>
      const fullConfig = (configPayload.config ?? configPayload) as Record<string, unknown>
      const schemaPayload = schemaResult.data as { schema?: ConfigSchema } & ConfigSchema
      const fullSchema = (schemaPayload.schema ?? schemaPayload) as ConfigSchema

      setMcpConfig((fullConfig.mcp ?? {}) as ConfigSectionData)
      setMcpSchema(fullSchema.nested?.mcp ?? null)
      setHasUnsavedChanges(false)
    } catch (error) {
      console.error('加载 MCP 设置失败:', error)
      toast({
        title: '加载失败',
        description: (error as Error).message,
        variant: 'destructive',
      })
    } finally {
      setLoading(false)
    }
  }, [toast])

  useEffect(() => {
    void loadConfig()
  }, [loadConfig])

  const saveConfig = useCallback(async (): Promise<boolean> => {
    try {
      setSaving(true)
      const result = await updateBotConfigSection('mcp', mcpConfig)

      if (!result.success) {
        toast({
          title: '保存失败',
          description: result.error,
          variant: 'destructive',
        })
        return false
      }

      setHasUnsavedChanges(false)
      toast({
        title: '保存成功',
        description: 'MCP 设置已保存，重启后生效。',
      })
      return true
    } catch (error) {
      console.error('保存 MCP 设置失败:', error)
      toast({
        title: '保存失败',
        description: (error as Error).message,
        variant: 'destructive',
      })
      return false
    } finally {
      setSaving(false)
    }
  }, [mcpConfig, toast])

  const saveAndRestart = useCallback(async () => {
    const saved = await saveConfig()
    if (!saved) {
      return
    }
    await triggerRestart({ delay: 500 })
  }, [saveConfig, triggerRestart])

  const formSchema: ConfigSchema | null = mcpSchema
    ? {
        className: 'MCPSettings',
        classDoc: 'MCP 设置',
        fields: [],
        nested: {
          mcp: {
            ...mcpSchema,
            fields: mcpSchema.fields.filter((field) => field.name !== 'servers'),
            nested: mcpSchema.nested
              ? Object.fromEntries(
                  Object.entries(mcpSchema.nested).filter(([key]) => key !== 'servers'),
                )
              : undefined,
          },
        },
      }
    : null
  const mcpServers = normalizeMCPServers(mcpConfig.servers)

  return (
    <ScrollArea className="h-full">
      <div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div className="min-w-0">
            <h1 className="text-xl sm:text-2xl md:text-3xl font-bold">MCP 设置</h1>
            <p className="text-muted-foreground mt-1 text-xs sm:text-sm">
              管理 MCP 客户端能力与服务器连接配置
            </p>
          </div>
          <div className="flex gap-2">
            <Button
              onClick={saveConfig}
              disabled={loading || saving || !hasUnsavedChanges || isRestarting}
              size="sm"
              variant="outline"
              className="w-24"
            >
              <Save className="h-4 w-4" strokeWidth={2} fill="none" />
              <span className="ml-1 text-xs sm:text-sm">{saving ? '保存中' : hasUnsavedChanges ? '保存' : '已保存'}</span>
            </Button>
            <Button
              onClick={saveAndRestart}
              disabled={loading || saving || isRestarting}
              size="sm"
              className="w-28"
            >
              <Power className="h-4 w-4" />
              <span className="ml-1 text-xs sm:text-sm">{isRestarting ? '重启中' : '保存重启'}</span>
            </Button>
          </div>
        </div>

        <Alert>
          <Info className="h-4 w-4" />
          <AlertDescription>
            MCP 设置保存后需要重启麦麦才会生效。这里与主程序配置中的 MCP 栏目使用同一份配置。
          </AlertDescription>
        </Alert>

        {loading && (
          <div className="flex h-64 items-center justify-center text-sm text-muted-foreground">
            加载中...
          </div>
        )}

        {!loading && (
          <MCPServersBlockEditor
            servers={mcpServers}
            onChange={(servers) => {
              setMcpConfig((currentConfig) => ({
                ...currentConfig,
                servers,
              }))
              setHasUnsavedChanges(true)
            }}
          />
        )}

        {!loading && formSchema && (
          <DynamicConfigForm
            schema={formSchema}
            values={{ mcp: mcpConfig }}
            onChange={(fieldPath, value) => {
              const [, ...restPath] = fieldPath.split('.')
              const nextConfig = restPath.length === 0
                ? (value as ConfigSectionData)
                : updateNestedValue(mcpConfig, restPath, value)

              setMcpConfig(nextConfig)
              setHasUnsavedChanges(true)
            }}
            hooks={fieldHooks}
          />
        )}

        {!loading && !formSchema && (
          <Alert>
            <Info className="h-4 w-4" />
            <AlertDescription>当前配置 schema 中没有找到 MCP 设置。</AlertDescription>
          </Alert>
        )}

        <RestartOverlay />
      </div>
    </ScrollArea>
  )
}