import {
  Alert,
  Form,
  Input,
  Modal,
  Select,
  Switch,
  Table,
  Tag,
  Tooltip,
  message,
  notification
} from "antd"
import { useState } from "react"
import { useTranslation } from "react-i18next"
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import { useStorage } from "@plasmohq/storage/hook"
import {
  Ban,
  Check,
  KeyRound,
  LogOut,
  Hand,
  Pencil,
  RefreshCw,
  Trash2,
  Trash2Icon,
  ExternalLink
} from "lucide-react"
import { browser } from "wxt/browser"
import { hasValidOAuthTokens } from "@/libs/mcp/oauth"
import { isFireFoxPrivateMode } from "@/utils/is-private-mode"
import {
  addMcpServer,
  deleteMcpServer,
  getAllMcpServers,
  updateMcpServer
} from "@/db/dexie/mcp"
import { getMcpErrorMessage } from "@/libs/mcp/errors"
import { inspectMcpServerTools } from "@/libs/mcp/remote-tools"
import type {
  McpAvailableTool,
  McpServer,
  McpServerInput,
  McpToolExecutionMode
} from "@/libs/mcp/types"
import {
  getMcpToolExecutionMode,
  getMcpServerConfigFingerprint,
  normalizeMcpServerInput
} from "@/libs/mcp/utils"
import { getServerFaviconUrl } from "@/components/Common/McpServerToggle"
import { ToolExecutionModeControl } from "@/components/MCP/ToolExecutionModeControl"

type ValidationSnapshot = {
  fingerprint: string
  cachedTools: McpAvailableTool[]
  toolsLastSyncedAt?: number
  toolsSyncError?: string
}

const isFormValidationError = (
  error: unknown
): error is { errorFields: unknown[] } =>
  typeof error === "object" &&
  error !== null &&
  "errorFields" in error &&
  Array.isArray((error as { errorFields: unknown[] }).errorFields)

const toServerDraft = (values: Partial<McpServerInput>): McpServerInput =>
  normalizeMcpServerInput(values)

const toValidationSnapshot = (
  server: Partial<
    Pick<McpServer, "cachedTools" | "toolsLastSyncedAt" | "toolsSyncError"> &
      McpServerInput
  >
): ValidationSnapshot => ({
  fingerprint: getMcpServerConfigFingerprint(server),
  cachedTools: server.cachedTools || [],
  toolsLastSyncedAt: server.toolsLastSyncedAt,
  toolsSyncError: server.toolsSyncError
})

const formatTimestamp = (value?: number) =>
  value ? new Date(value).toLocaleString() : ""

export const MCPSettingsApp = () => {
  const { t } = useTranslation(["settings", "common"])
  const [mcpHumanInLoop, setMcpHumanInLoop] = useStorage(
    "mcpHumanInLoop",
    false
  )
  const [form] = Form.useForm()
  const queryClient = useQueryClient()
  const [open, setOpen] = useState(false)
  const [editingServer, setEditingServer] = useState<McpServer | null>(null)
  const [validationSnapshot, setValidationSnapshot] =
    useState<ValidationSnapshot | null>(null)
  const authType = Form.useWatch("authType", form)
  const transport = Form.useWatch("transport", form)
  const isExtensionTransport = transport === "extension"
  const watchedValues = Form.useWatch([], form)
  const currentFingerprint = getMcpServerConfigFingerprint(watchedValues || {})

  const { data: servers, isLoading } = useQuery({
    queryKey: ["mcpServers"],
    queryFn: getAllMcpServers
  })

  const addMutation = useMutation({
    mutationFn: addMcpServer,
    onSuccess: async (serverId, variables) => {
      queryClient.invalidateQueries({ queryKey: ["mcpServers"] })
      setOpen(false)
      setEditingServer(null)
      setValidationSnapshot(null)
      form.resetFields()
      message.success(t("mcpSettings.notification.added"))

      // Auto-start OAuth flow after adding an OAuth server
      if (variables.authType === "oauth") {
        const result = await browser.runtime.sendMessage({
          type: "mcp_oauth_start",
          serverId
        })
        if (result?.error) {
          notification.error({
            message: "OAuth Error",
            description: result.error
          })
        }
      }
    }
  })

  const updateMutation = useMutation({
    mutationFn: updateMcpServer,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["mcpServers"] })
      setOpen(false)
      setEditingServer(null)
      setValidationSnapshot(null)
      form.resetFields()
      message.success(t("mcpSettings.notification.updated"))
    }
  })

  const deleteMutation = useMutation({
    mutationFn: deleteMcpServer,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["mcpServers"] })
      message.success(t("mcpSettings.notification.deleted"))
    }
  })

  const validateMutation = useMutation({
    mutationFn: inspectMcpServerTools
  })

  const refreshToolsMutation = useMutation({
    mutationFn: async (server: McpServer) => {
      try {
        const validation = await inspectMcpServerTools(server)
        return await updateMcpServer({
          id: server.id,
          cachedTools: validation.cachedTools,
          toolsLastSyncedAt: validation.toolsLastSyncedAt,
          toolsSyncError: undefined
        })
      } catch (error) {
        await updateMcpServer({
          id: server.id,
          cachedTools: [],
          toolsLastSyncedAt: Date.now(),
          toolsSyncError: getMcpErrorMessage(error)
        })
        throw error
      }
    },
    onSuccess: (server) => {
      queryClient.invalidateQueries({ queryKey: ["mcpServers"] })
      message.success(
        t("mcpSettings.notification.toolsRefreshed", {
          name: server.name
        })
      )
    },
    onError: (error) => {
      queryClient.invalidateQueries({ queryKey: ["mcpServers"] })
      notification.error({
        message: t("mcpSettings.notification.validationFailedTitle"),
        description: getMcpErrorMessage(error)
      })
    }
  })

  const isValidationCurrent =
    validationSnapshot?.fingerprint === currentFingerprint
  const hasValidatedTools = (validationSnapshot?.cachedTools.length ?? 0) > 0
  const isValidationFresh =
    !!validationSnapshot &&
    isValidationCurrent &&
    !validationSnapshot.toolsSyncError &&
    hasValidatedTools
  const isValidationStale =
    !!validationSnapshot &&
    validationSnapshot.fingerprint.length > 0 &&
    validationSnapshot.fingerprint !== currentFingerprint

  const handleUpdateToolExecutionMode = async (
    server: McpServer,
    toolName: string,
    executionMode: McpToolExecutionMode
  ) => {
    const updatedTools = (server.cachedTools || []).map((tool) =>
      tool.name === toolName
        ? {
            ...tool,
            executionMode,
            enabled: executionMode !== "disabled"
          }
        : tool
    )
    await updateMcpServer({ id: server.id, cachedTools: updatedTools })
    queryClient.invalidateQueries({ queryKey: ["mcpServers"] })
  }

  const closeModal = () => {
    setOpen(false)
    setEditingServer(null)
    setValidationSnapshot(null)
    form.resetFields()
  }

  const ensureValidatedTools = async (
    draft: McpServerInput,
    force = false
  ): Promise<ValidationSnapshot> => {
    const fingerprint = getMcpServerConfigFingerprint(draft)

    if (
      !force &&
      validationSnapshot &&
      validationSnapshot.fingerprint === fingerprint &&
      !validationSnapshot.toolsSyncError &&
      validationSnapshot.cachedTools.length > 0
    ) {
      return validationSnapshot
    }

    try {
      const validation = await validateMutation.mutateAsync(draft)
      const snapshot: ValidationSnapshot = {
        fingerprint,
        cachedTools: validation.cachedTools,
        toolsLastSyncedAt: validation.toolsLastSyncedAt,
        toolsSyncError: undefined
      }

      setValidationSnapshot(snapshot)
      return snapshot
    } catch (error) {
      const snapshot: ValidationSnapshot = {
        fingerprint,
        cachedTools: [],
        toolsLastSyncedAt: Date.now(),
        toolsSyncError: getMcpErrorMessage(error)
      }

      setValidationSnapshot(snapshot)
      throw error
    }
  }

  const handleValidateTools = async () => {
    try {
      const values = await form.validateFields()
      const draft = toServerDraft(values)
      const snapshot = await ensureValidatedTools(draft, true)

      message.success(
        t("mcpSettings.notification.validated", {
          count: snapshot.cachedTools.length
        })
      )
    } catch (error) {
      if (isFormValidationError(error)) {
        return
      }

      notification.error({
        message: t("mcpSettings.notification.validationFailedTitle"),
        description: getMcpErrorMessage(error)
      })
    }
  }

  const handleSubmit = async (values: McpServerInput) => {
    const draft = toServerDraft(values)

    // Skip tool validation for OAuth servers that aren't connected yet
    if (draft.authType === "oauth" && !editingServer?.oauthTokens?.accessToken) {
      const payload = {
        ...draft,
        cachedTools: editingServer?.cachedTools || [],
        toolsLastSyncedAt: editingServer?.toolsLastSyncedAt,
        toolsSyncError: undefined
      }

      if (editingServer?.id) {
        updateMutation.mutate({
          id: editingServer.id,
          ...payload,
          oauthMetadata: editingServer.oauthMetadata,
          oauthClientRegistration: editingServer.oauthClientRegistration,
          oauthTokens: editingServer.oauthTokens
        })
      } else {
        addMutation.mutate(payload)
      }
      return
    }

    try {
      const validation = await ensureValidatedTools(draft)
      const payload = {
        ...draft,
        cachedTools: validation.cachedTools,
        toolsLastSyncedAt: validation.toolsLastSyncedAt,
        toolsSyncError: undefined
      }

      if (editingServer?.id) {
        updateMutation.mutate({
          id: editingServer.id,
          ...payload
        })
        return
      }

      addMutation.mutate(payload)
    } catch (error) {
      notification.error({
        message: t("mcpSettings.notification.validationFailedTitle"),
        description: getMcpErrorMessage(error)
      })
    }
  }

  const handleEdit = (server: McpServer) => {
    setEditingServer(server)
    form.setFieldsValue({
      ...server,
      authType: server.authType || "none",
      headers: server.headers || [],
      enabled: server.enabled ?? true
    })
    setValidationSnapshot(toValidationSnapshot(server))
    setOpen(true)
  }

  const handleAdd = () => {
    if (isFireFoxPrivateMode) {
      notification.error({
        message: t("mcpSettings.notification.storageBlockedTitle"),
        description: t("mcpSettings.notification.storageBlockedDescription")
      })
      return
    }

    setEditingServer(null)
    setValidationSnapshot(null)
    form.resetFields()
    form.setFieldsValue({
      transport: "http",
      enabled: true,
      authType: "none",
      headers: []
    })
    setOpen(true)
  }

  const renderValidationAlert = () => {
    if (!validationSnapshot) {
      return (
        <Alert
          type="info"
          showIcon
          message={t("mcpSettings.modal.validation.idle")}
        />
      )
    }

    if (isValidationStale) {
      return (
        <Alert
          type="warning"
          showIcon
          message={t("mcpSettings.modal.validation.stale")}
        />
      )
    }

    if (validationSnapshot.toolsSyncError) {
      return (
        <Alert
          type="error"
          showIcon
          message={t("mcpSettings.modal.validation.failed")}
          description={validationSnapshot.toolsSyncError}
        />
      )
    }

    return (
      <Alert
        type="success"
        showIcon
        message={t("mcpSettings.modal.validation.success", {
          count: validationSnapshot.cachedTools.length
        })}
        description={
          validationSnapshot.toolsLastSyncedAt
            ? t("mcpSettings.modal.validation.syncedAt", {
                value: formatTimestamp(validationSnapshot.toolsLastSyncedAt)
              })
            : undefined
        }
      />
    )
  }

  return (
    <div className="w-full max-w-full overflow-hidden">
      <div className="px-2 sm:px-0">
        <div className="mb-6">
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div className="flex-1">
              <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
                {t("mcpSettings.heading")}
              </h2>
              <p className="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">
                {t("mcpSettings.subheading")}
              </p>
            </div>
            <button
              onClick={handleAdd}
              className="inline-flex items-center justify-center rounded-md border border-transparent bg-black px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-gray-800 focus:outline-none dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100 disabled:opacity-50">
              {t("mcpSettings.addBtn")}
            </button>
          </div>
          <div className="mt-4 rounded-xl border border-amber-200/80 bg-amber-50/70 px-4 py-3 dark:border-amber-500/20 dark:bg-amber-500/10">
            <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
              <div className="min-w-0 flex-1">
                <p className="text-sm font-medium text-gray-900 dark:text-white">
                  {t(
                    "mcpSettings.humanInLoop.label",
                    "Require approval before running MCP tools"
                  )}
                </p>
                <p className="mt-1 text-xs leading-5 text-gray-600 dark:text-gray-300">
                  {t(
                    "mcpSettings.humanInLoop.description",
                    "Recommended for MCP servers with write permissions or other side effects. You can still allow or disable individual tools below."
                  )}
                </p>
              </div>
              <Switch
                checked={mcpHumanInLoop}
                onChange={(checked) => setMcpHumanInLoop(checked)}
              />
            </div>
            <p className="mt-3 text-xs text-amber-700 dark:text-amber-300">
              {mcpHumanInLoop
                ? t(
                    "mcpSettings.humanInLoop.enabledHint",
                    "Human-in-the-loop is enabled. MCP tools will ask for approval before they run."
                  )
                : t(
                    "mcpSettings.humanInLoop.disabledHint",
                    "MCP tools run without approval by default. Turn this on when an MCP server can write files, modify data, send messages, or make other changes."
                  )}
            </p>
          </div>
          <div className="mt-4 border border-b border-gray-200 dark:border-gray-600"></div>
        </div>

        <Table
          rowKey="id"
          loading={isLoading}
          dataSource={servers || []}
          bordered
          scroll={{ x: 980 }}
          expandable={{
            expandedRowRender: (record: McpServer) => {
              const tools = record.cachedTools || []
              if (tools.length === 0) {
                return (
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    {t("mcpSettings.table.toolsUnavailable")}
                  </p>
                )
              }
              return (
                <Table
                  rowKey="name"
                  dataSource={tools}
                  pagination={false}
                  size="small"
                  columns={[
                    {
                      title: t("mcpSettings.table.toolName"),
                      dataIndex: "name",
                      key: "name"
                    },
                    {
                      title: t("mcpSettings.table.actions"),
                      key: "actions",
                      render: (_: unknown, tool: McpAvailableTool) => {
                        const executionMode = getMcpToolExecutionMode(tool)

                        if (!mcpHumanInLoop) {
                          const enabled = executionMode !== "disabled"

                          return (
                            <Tooltip
                              title={
                                enabled
                                  ? t("mcpSettings.actions.disable")
                                  : t("mcpSettings.actions.enable")
                              }>
                              <Switch
                                size="small"
                                checked={enabled}
                                onChange={(checked) =>
                                  handleUpdateToolExecutionMode(
                                    record,
                                    tool.name,
                                    checked ? "human_in_loop" : "disabled"
                                  )
                                }
                              />
                            </Tooltip>
                          )
                        }

                        return (
                          <ToolExecutionModeControl
                            value={executionMode}
                            humanInLoopEnabled={mcpHumanInLoop}
                            onChange={(nextExecutionMode) =>
                              handleUpdateToolExecutionMode(
                                record,
                                tool.name,
                                nextExecutionMode
                              )
                            }
                          />
                        )
                      }
                    }
                  ]}
                />
              )
            },
            rowExpandable: (record: McpServer) =>
              (record.cachedTools || []).length > 0
          }}
          footer={() => (
            <a
              href="https://docs.pageassist.xyz/features/mcp.html"
              target="_blank"
              rel="noopener noreferrer"
              className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
              Learn how to connect MCP servers
              <ExternalLink className="ml-1 inline size-3.5" />
            </a>
          )}
          columns={[
            {
              title: t("mcpSettings.table.name"),
              dataIndex: "name",
              key: "name",
              render: (value: string, record: McpServer) => {
                const faviconUrl = getServerFaviconUrl(record.url)
                return (
                  <div className="flex items-center gap-2">
                    {faviconUrl && (
                      <img
                        src={faviconUrl}
                        alt=""
                        className="h-4 w-4 shrink-0 rounded-sm"
                        onError={(e) => {
                          e.currentTarget.style.display = "none"
                        }}
                      />
                    )}
                    <span>{value}</span>
                  </div>
                )
              }
            },
            {
              title: t("mcpSettings.table.url"),
              dataIndex: "url",
              key: "url",
              width: 200,
              render: (value: string) => (
                <span className="block max-w-[180px] truncate" title={value}>
                  {value}
                </span>
              )
            },

            {
              title: t("mcpSettings.table.auth"),
              dataIndex: "authType",
              key: "authType",
              render: (value: string, record: McpServer) => {
                if (value === "bearer") {
                  return (
                    <Tooltip title={record.bearerToken ? "••••••••" : ""}>
                      <span>{t("mcpSettings.auth.bearer")}</span>
                    </Tooltip>
                  )
                }
                if (value === "oauth") {
                  const connected = hasValidOAuthTokens(record.oauthTokens)
                  return (
                    <Tag color={connected ? "green" : "orange"}>
                      {connected ? "OAuth Connected" : "OAuth Disconnected"}
                    </Tag>
                  )
                }
                return t("mcpSettings.auth.none")
              }
            },
            {
              title: t("mcpSettings.table.actions"),
              key: "actions",
              render: (_, record: McpServer) => (
                <div className="flex items-center gap-3">
                  <Tooltip
                    title={
                      record.enabled
                        ? t("mcpSettings.actions.disable")
                        : t("mcpSettings.actions.enable")
                    }>
                    <Switch
                      size="small"
                      checked={record.enabled}
                      onChange={(checked) =>
                        updateMcpServer({
                          id: record.id,
                          enabled: checked
                        }).then(() =>
                          queryClient.invalidateQueries({
                            queryKey: ["mcpServers"]
                          })
                        )
                      }
                    />
                  </Tooltip>
                  {record.authType === "oauth" && (
                    <Tooltip
                      title={
                        hasValidOAuthTokens(record.oauthTokens)
                          ? "Disconnect OAuth"
                          : "Connect with OAuth"
                      }>
                      <button
                        className={`p-1 ${
                          hasValidOAuthTokens(record.oauthTokens)
                            ? "text-green-600 dark:text-green-400"
                            : "text-orange-500 dark:text-orange-400"
                        }`}
                        onClick={async () => {
                          if (hasValidOAuthTokens(record.oauthTokens)) {
                            await browser.runtime.sendMessage({
                              type: "mcp_oauth_disconnect",
                              serverId: record.id
                            })
                            queryClient.invalidateQueries({
                              queryKey: ["mcpServers"]
                            })
                            message.success("OAuth disconnected")
                          } else {
                            const result = await browser.runtime.sendMessage({
                              type: "mcp_oauth_start",
                              serverId: record.id
                            })
                            if (result?.error) {
                              notification.error({
                                message: "OAuth Error",
                                description: result.error
                              })
                            } else {
                              message.info(
                                "OAuth flow started. Complete authorization in the opened tab."
                              )
                              // Poll for completion
                              const pollInterval = setInterval(async () => {
                                queryClient.invalidateQueries({
                                  queryKey: ["mcpServers"]
                                })
                              }, 2000)
                              setTimeout(
                                () => clearInterval(pollInterval),
                                120_000
                              )
                            }
                          }
                        }}>
                        {hasValidOAuthTokens(record.oauthTokens) ? (
                          <LogOut className="size-4" />
                        ) : (
                          <KeyRound className="size-4" />
                        )}
                      </button>
                    </Tooltip>
                  )}
                  <Tooltip title={t("mcpSettings.actions.refreshTools")}>
                    <button
                      className="p-1 text-gray-700 dark:text-gray-400"
                      disabled={isFireFoxPrivateMode}
                      onClick={() => refreshToolsMutation.mutate(record)}>
                      <RefreshCw
                        className={`size-4 ${
                          refreshToolsMutation.isPending &&
                          refreshToolsMutation.variables?.id === record.id
                            ? "animate-spin"
                            : ""
                        }`}
                      />
                    </button>
                  </Tooltip>
                  <Tooltip title={t("common:edit")}>
                    <button
                      className="p-1 text-gray-700 dark:text-gray-400"
                      disabled={isFireFoxPrivateMode}
                      onClick={() => handleEdit(record)}>
                      <Pencil className="size-4" />
                    </button>
                  </Tooltip>
                  <Tooltip title={t("common:delete")}>
                    <button
                      className="p-1 text-red-500 dark:text-red-400"
                      disabled={isFireFoxPrivateMode}
                      onClick={() => {
                        if (
                          confirm(
                            t("mcpSettings.modal.deleteConfirm", {
                              name: record.name
                            })
                          )
                        ) {
                          deleteMutation.mutate(record.id)
                        }
                      }}>
                      <Trash2 className="size-4" />
                    </button>
                  </Tooltip>
                </div>
              )
            }
          ]}
        />

        <Modal
          open={open}
          title={
            editingServer
              ? t("mcpSettings.modal.titleEdit")
              : t("mcpSettings.modal.titleAdd")
          }
          onCancel={closeModal}
          footer={null}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              transport: "http",
              enabled: true,
              authType: "none",
              headers: []
            }}>
            <Form.Item
              name="name"
              label={t("mcpSettings.modal.name.label")}
              rules={[
                {
                  required: true,
                  message: t("mcpSettings.modal.name.required")
                }
              ]}>
              <Input
                size="large"
                placeholder={t("mcpSettings.modal.name.placeholder")}
              />
            </Form.Item>

            <Form.Item name="transport" label="Transport">
              <Select
                size="large"
                options={[
                  {
                    label: "Streamable HTTP",
                    value: "http"
                  },
                  {
                    label: "Browser extension",
                    value: "extension"
                  }
                ]}
              />
            </Form.Item>

            <Form.Item
              name="url"
              label={
                isExtensionTransport ? "Extension ID" : t("mcpSettings.modal.url.label")
              }
              extra={
                isExtensionTransport
                  ? "The id of the installed extension that exposes the MCP server."
                  : t("mcpSettings.modal.transportNotice.description")
              }
              rules={[
                {
                  required: true,
                  message: isExtensionTransport
                    ? "Extension ID is required"
                    : t("mcpSettings.modal.url.required")
                },
                {
                  validator: async (_, value) => {
                    if (isExtensionTransport) {
                      if (!value || !/^[a-p]{32}$/.test(value.trim())) {
                        throw new Error("Enter a valid 32-character extension id")
                      }
                      return
                    }
                    try {
                      const parsed = new URL(value)
                      if (!["http:", "https:"].includes(parsed.protocol)) {
                        throw new Error()
                      }
                    } catch (error) {
                      throw new Error(t("mcpSettings.modal.url.invalid"))
                    }
                  }
                }
              ]}>
              <Input
                size="large"
                placeholder={
                  isExtensionTransport
                    ? "kaoapbeelphlbjmknbpnpndakmpafnbd"
                    : t("mcpSettings.modal.url.placeholder")
                }
              />
            </Form.Item>

            {!isExtensionTransport ? (
              <Form.Item
                name="authType"
                label={t("mcpSettings.modal.auth.label")}>
                <Select
                  size="large"
                  options={[
                    {
                      label: t("mcpSettings.auth.none"),
                      value: "none"
                    },
                    {
                      label: t("mcpSettings.auth.bearer"),
                      value: "bearer"
                    },
                    {
                      label: "OAuth 2.1",
                      value: "oauth"
                    }
                  ]}
                />
              </Form.Item>
            ) : null}

            {!isExtensionTransport && authType === "bearer" ? (
              <Form.Item
                name="bearerToken"
                label={t("mcpSettings.modal.bearerToken.label")}
                rules={[
                  {
                    required: true,
                    message: t("mcpSettings.modal.bearerToken.required")
                  }
                ]}>
                <Input.Password
                  size="large"
                  placeholder={t("mcpSettings.modal.bearerToken.placeholder")}
                />
              </Form.Item>
            ) : null}

            {!isExtensionTransport && authType === "oauth" ? (
              <p className="mb-4 text-xs text-gray-400 dark:text-gray-500">
                Uses your Page Share URL as the OAuth redirect. You can change it in Manage Share settings.
              </p>
            ) : null}

            <Form.Item
              name="enabled"
              label={t("mcpSettings.modal.enabled.label")}
              valuePropName="checked">
              <Switch />
            </Form.Item>

            {!isExtensionTransport ? (
            <Form.List name="headers">
              {(fields, { add, remove }) => (
                <div className="flex flex-col">
                  <div className="mb-3 flex items-center justify-between">
                    <h3 className="text-sm font-semibold">
                      {t("mcpSettings.modal.headers.label")}
                    </h3>
                    <button
                      type="button"
                      className="rounded-md bg-black px-2 py-1 text-xs text-white dark:bg-white dark:text-black"
                      onClick={() => add()}>
                      {t("mcpSettings.modal.headers.add")}
                    </button>
                  </div>
                  {fields.map((field) => (
                    <div
                      key={field.key}
                      className="mb-3 flex flex-col items-start gap-2 sm:flex-row sm:items-end">
                      <div className="w-full space-y-2 sm:flex sm:space-x-2 sm:space-y-0">
                        <Form.Item
                          label={t("mcpSettings.modal.headers.key.label")}
                          name={[field.name, "key"]}
                          className="mb-0 flex-1">
                          <Input
                            placeholder={t(
                              "mcpSettings.modal.headers.key.placeholder"
                            )}
                          />
                        </Form.Item>
                        <Form.Item
                          label={t("mcpSettings.modal.headers.value.label")}
                          name={[field.name, "value"]}
                          className="mb-0 flex-1">
                          <Input
                            placeholder={t(
                              "mcpSettings.modal.headers.value.placeholder"
                            )}
                          />
                        </Form.Item>
                      </div>
                      <button
                        type="button"
                        className="shrink-0 p-1 text-red-500 dark:text-red-400"
                        onClick={() => remove(field.name)}>
                        <Trash2Icon className="size-4" />
                      </button>
                    </div>
                  ))}
                </div>
              )}
            </Form.List>
            ) : null}

            <button
              type="submit"
              disabled={
                addMutation.isPending ||
                updateMutation.isPending ||
                validateMutation.isPending
              }
              className="mt-4 inline-flex w-full items-center justify-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-gray-700 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">
              {editingServer
                ? t("mcpSettings.modal.update")
                : t("mcpSettings.modal.submit")}
            </button>

            {!isValidationFresh ? (
              <p className="mt-3 text-xs text-gray-500 dark:text-gray-400">
                {t("mcpSettings.modal.validation.saveHint")}
              </p>
            ) : null}
          </Form>
        </Modal>
      </div>
    </div>
  )
}
