'use client'
import type { AccountSettingTab } from '@/app/components/header/account-setting/constants'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import { ScrollArea } from '@langgenius/dify-ui/scroll-area'
import { useSuspenseQuery } from '@tanstack/react-query'
import { useAtomValue } from 'jotai'
import { useCallback, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import BillingPage from '@/app/components/billing/billing-page'
import CustomPage from '@/app/components/custom/custom-page'
import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
import MenuDialog from '@/app/components/header/account-setting/menu-dialog'
import { workspacePermissionKeysAtom } from '@/context/permission-state'
import { useProviderContext } from '@/context/provider-context'
import {
  isCurrentWorkspaceDatasetOperatorAtom,
  isCurrentWorkspaceManagerAtom,
} from '@/context/workspace-state'
import { systemFeaturesQueryOptions } from '@/features/system-features/client'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
import { hasPermission } from '@/utils/permission'
import AccessRulesPage from './access-rules-page'
import { ApiBasedExtensionPage } from './api-based-extension-page'
import DataSourcePage from './data-source-page-new'
import MembersPage from './members-page'
import ModelProviderPage from './model-provider-page'
import { useResetModelProviderListExpanded } from './model-provider-page/atoms'
import PermissionsPage from './permissions-page'
import PreferencePage from './preference-page'
import WorkflowLogArchivesPage from './workflow-log-archives-page'

const iconClassName = `
  w-4 h-4 mr-2
`

type IAccountSettingProps = {
  onCancelAction: () => void
  activeTab: AccountSettingTab
  onTabChangeAction: (tab: AccountSettingTab) => void
}

type GroupItem = {
  key: AccountSettingTab
  name: string
  title?: string
  description?: string
  icon: React.JSX.Element
  activeIcon: React.JSX.Element
}

export default function AccountSetting({
  onCancelAction,
  activeTab,
  onTabChangeAction,
}: IAccountSettingProps) {
  const resetModelProviderListExpanded = useResetModelProviderListExpanded()
  const { t } = useTranslation()
  const { enableBilling, enableReplaceWebAppLogo } = useProviderContext()
  const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
  const workspacePermissionKeys = useAtomValue(workspacePermissionKeysAtom)
  const isCurrentWorkspaceManager = useAtomValue(isCurrentWorkspaceManagerAtom)
  const isCurrentWorkspaceDatasetOperator = useAtomValue(isCurrentWorkspaceDatasetOperatorAtom)
  const isRbacEnabled = systemFeatures.rbac_enabled
  const canManageWorkspaceRoles =
    isRbacEnabled && hasPermission(workspacePermissionKeys, 'workspace.role.manage')
  const canViewBilling = enableBilling && !isCurrentWorkspaceDatasetOperator
  const canViewWorkflowLogArchives =
    systemFeatures.deployment_edition === 'CLOUD' && isCurrentWorkspaceManager
  // Keep legacy `language` deep links opening Preferences during the tab rename migration.
  const normalizedActiveTab =
    activeTab === ACCOUNT_SETTING_TAB.LANGUAGE ? ACCOUNT_SETTING_TAB.PREFERENCES : activeTab
  const activeMenu = (() => {
    if (normalizedActiveTab === ACCOUNT_SETTING_TAB.BILLING && !canViewBilling)
      return ACCOUNT_SETTING_TAB.PREFERENCES
    if (
      normalizedActiveTab === ACCOUNT_SETTING_TAB.WORKFLOW_LOG_ARCHIVES &&
      !canViewWorkflowLogArchives
    )
      return ACCOUNT_SETTING_TAB.MEMBERS
    if (
      (normalizedActiveTab === ACCOUNT_SETTING_TAB.ROLES_AND_PERMISSIONS ||
        normalizedActiveTab === ACCOUNT_SETTING_TAB.PERMISSION_SET) &&
      !canManageWorkspaceRoles
    )
      return ACCOUNT_SETTING_TAB.MEMBERS
    return normalizedActiveTab
  })()
  const scrollContainerRef = useRef<HTMLDivElement>(null)

  const settingItems: GroupItem[] = [
    {
      key: ACCOUNT_SETTING_TAB.PROVIDER,
      name: t(($) => $['settings.provider'], { ns: 'common' }),
      icon: <span className={cn('i-ri-brain-2-line', iconClassName)} />,
      activeIcon: <span className={cn('i-ri-brain-2-fill', iconClassName)} />,
    },
    {
      key: ACCOUNT_SETTING_TAB.MEMBERS,
      name: t(($) => $['settings.members'], { ns: 'common' }),
      icon: <span className={cn('i-ri-group-2-line', iconClassName)} />,
      activeIcon: <span className={cn('i-ri-group-2-fill', iconClassName)} />,
    },
    {
      key: ACCOUNT_SETTING_TAB.ROLES_AND_PERMISSIONS,
      name: t(($) => $['settings.rolesAndPermissions'], { ns: 'common' }),
      icon: <span className={cn('i-ri-shield-user-line', iconClassName)} />,
      activeIcon: <span className={cn('i-ri-shield-user-fill', iconClassName)} />,
    },
    {
      key: ACCOUNT_SETTING_TAB.PERMISSION_SET,
      name: t(($) => $['settings.permissionSet'], { ns: 'common' }),
      description: t(($) => $['settings.permissionSetDescription'], { ns: 'common' }),
      icon: <span className={cn('i-ri-lock-2-line', iconClassName)} />,
      activeIcon: <span className={cn('i-ri-lock-2-fill', iconClassName)} />,
    },
    {
      key: ACCOUNT_SETTING_TAB.BILLING,
      name: t(($) => $['settings.billing'], { ns: 'common' }),
      description: t(($) => $['plansCommon.receiptInfo'], { ns: 'billing' }),
      icon: <span className={cn('i-ri-money-dollar-circle-line', iconClassName)} />,
      activeIcon: <span className={cn('i-ri-money-dollar-circle-fill', iconClassName)} />,
    },
    {
      key: ACCOUNT_SETTING_TAB.WORKFLOW_LOG_ARCHIVES,
      name: t(($) => $['archives.title'], { ns: 'appLog' }),
      description: t(($) => $['archives.description'], { ns: 'appLog' }),
      icon: <span className={cn('i-ri-archive-drawer-line', iconClassName)} />,
      activeIcon: <span className={cn('i-ri-archive-drawer-fill', iconClassName)} />,
    },
    {
      key: ACCOUNT_SETTING_TAB.DATA_SOURCE,
      name: t(($) => $['settings.dataSource'], { ns: 'common' }),
      icon: <span className={cn('i-ri-database-2-line', iconClassName)} />,
      activeIcon: <span className={cn('i-ri-database-2-fill', iconClassName)} />,
    },
    {
      key: ACCOUNT_SETTING_TAB.API_BASED_EXTENSION,
      name: t(($) => $['settings.customEndpoint'], { ns: 'common' }),
      icon: <span className={cn('i-ri-puzzle-2-line', iconClassName)} />,
      activeIcon: <span className={cn('i-ri-puzzle-2-fill', iconClassName)} />,
    },
    {
      key: ACCOUNT_SETTING_TAB.CUSTOM,
      name: t(($) => $.custom, { ns: 'custom' }),
      icon: <span className={cn('i-ri-color-filter-line', iconClassName)} />,
      activeIcon: <span className={cn('i-ri-color-filter-fill', iconClassName)} />,
    },
    {
      key: ACCOUNT_SETTING_TAB.PREFERENCES,
      name: t(($) => $['settings.preferences'], { ns: 'common' }),
      title: t(($) => $['account.general'], { ns: 'common' }),
      icon: <span className={cn('i-ri-equalizer-2-line', iconClassName)} />,
      activeIcon: <span className={cn('i-ri-equalizer-2-fill', iconClassName)} />,
    },
  ]
  const activeItem = settingItems.find((item) => item.key === activeMenu)

  const visibleSettingItems: GroupItem[] = (() => {
    const visibleTabs: AccountSettingTab[] = []

    visibleTabs.push(ACCOUNT_SETTING_TAB.MEMBERS)

    if (canManageWorkspaceRoles) {
      visibleTabs.push(ACCOUNT_SETTING_TAB.ROLES_AND_PERMISSIONS)
      visibleTabs.push(ACCOUNT_SETTING_TAB.PERMISSION_SET)
    }

    if (canViewBilling) visibleTabs.push(ACCOUNT_SETTING_TAB.BILLING)

    if (enableReplaceWebAppLogo || enableBilling) visibleTabs.push(ACCOUNT_SETTING_TAB.CUSTOM)

    if (canViewWorkflowLogArchives) visibleTabs.push(ACCOUNT_SETTING_TAB.WORKFLOW_LOG_ARCHIVES)

    return visibleTabs
      .map((tab) => settingItems.find((item) => item.key === tab))
      .filter((item): item is GroupItem => Boolean(item))
  })()

  const media = useBreakpoints()
  const isMobile = media === MediaType.mobile
  const preferenceItem = settingItems.find((item) => item.key === ACCOUNT_SETTING_TAB.PREFERENCES)

  const menuItems = [
    {
      key: 'workspace-group',
      name: t(($) => $['settings.workspace'], { ns: 'common' }),
      items: visibleSettingItems,
    },
    {
      key: 'user-group',
      items: preferenceItem ? [preferenceItem] : [],
    },
  ]

  const [searchValue, setSearchValue] = useState<string>('')

  const handleTabChange = useCallback(
    (tab: AccountSettingTab) => {
      if (tab === ACCOUNT_SETTING_TAB.PROVIDER) resetModelProviderListExpanded()

      onTabChangeAction(tab)
    },
    [onTabChangeAction, resetModelProviderListExpanded],
  )

  const handleClose = useCallback(() => {
    resetModelProviderListExpanded()
    onCancelAction()
  }, [onCancelAction, resetModelProviderListExpanded])

  return (
    <MenuDialog show onClose={handleClose}>
      <div className="flex h-screen w-full max-w-full pl-0 sm:pl-[232px]">
        <div className="flex w-[44px] shrink-0 flex-col pr-6 pl-4 sm:w-[224px]">
          <div className="mt-6 mb-8 flex h-[38px] items-center px-3 title-2xl-semi-bold whitespace-nowrap text-text-primary">
            {t(($) => $['settings.settings'], { ns: 'common' })}
          </div>
          <div className="w-full">
            {menuItems.map((menuItem) => (
              <div
                key={menuItem.key}
                className={cn(menuItem.key === 'workspace-group' ? 'mb-2' : 'mt-2')}
              >
                {menuItem.name && !isMobile && (
                  <div className="flex h-7 items-center px-3 system-xs-medium-uppercase text-text-tertiary">
                    {menuItem.name}
                  </div>
                )}
                <div
                  className={cn(
                    menuItem.key === 'user-group' && 'border-t border-divider-subtle pt-3',
                  )}
                >
                  {menuItem.items.map((item) => (
                    <button
                      type="button"
                      key={item.key}
                      className={cn(
                        'mb-0.5 flex h-8 w-full items-center rounded-lg px-3 text-left text-sm',
                        activeMenu === item.key
                          ? 'bg-state-base-active system-sm-semibold text-components-menu-item-text-active'
                          : 'system-sm-medium text-components-menu-item-text',
                      )}
                      aria-label={item.name}
                      title={item.name}
                      onClick={() => {
                        handleTabChange(item.key)
                      }}
                    >
                      {activeMenu === item.key ? item.activeIcon : item.icon}
                      {!isMobile && <div className="truncate">{item.name}</div>}
                    </button>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="relative flex min-h-0 w-[824px] min-w-0">
          <ScrollArea
            ref={scrollContainerRef}
            className="h-full min-h-0 min-w-0 flex-1 bg-components-panel-bg"
            slotClassNames={{
              viewport: 'overscroll-contain overflow-x-hidden',
              content: 'min-h-full min-w-0 w-full max-w-full pb-4',
            }}
          >
            <div className="sticky top-0 z-20 mx-8 flex min-h-[60px] items-end bg-components-panel-bg pt-8 pb-2">
              <div className="min-w-0 flex-1 title-2xl-semi-bold text-text-primary">
                {activeItem?.title ?? activeItem?.name}
                {activeItem?.description && (
                  <div className="mt-1 system-sm-regular wrap-break-word whitespace-normal text-text-tertiary">
                    {activeItem?.description}
                  </div>
                )}
              </div>
              <div className="fixed top-6 right-6 flex shrink-0 flex-col items-center">
                <Button
                  variant="tertiary"
                  size="large"
                  className="px-2"
                  aria-label={t(($) => $['operation.close'], { ns: 'common' })}
                  onClick={handleClose}
                >
                  <span className="i-ri-close-line size-5" />
                </Button>
                <div className="mt-1 system-2xs-medium-uppercase text-text-tertiary">ESC</div>
              </div>
            </div>
            <div className="max-w-full min-w-0 px-4 pt-6 sm:px-8">
              {activeMenu === ACCOUNT_SETTING_TAB.PROVIDER && (
                <ModelProviderPage searchText={searchValue} onSearchTextChange={setSearchValue} />
              )}
              {activeMenu === ACCOUNT_SETTING_TAB.MEMBERS && <MembersPage />}
              {activeMenu === ACCOUNT_SETTING_TAB.ROLES_AND_PERMISSIONS && (
                <PermissionsPage containerRef={scrollContainerRef} />
              )}
              {activeMenu === ACCOUNT_SETTING_TAB.PERMISSION_SET && <AccessRulesPage />}
              {activeMenu === ACCOUNT_SETTING_TAB.BILLING && <BillingPage />}
              {activeMenu === ACCOUNT_SETTING_TAB.WORKFLOW_LOG_ARCHIVES && (
                <WorkflowLogArchivesPage />
              )}
              {activeMenu === ACCOUNT_SETTING_TAB.DATA_SOURCE && <DataSourcePage />}
              {activeMenu === ACCOUNT_SETTING_TAB.API_BASED_EXTENSION && <ApiBasedExtensionPage />}
              {activeMenu === ACCOUNT_SETTING_TAB.CUSTOM && <CustomPage />}
              {activeMenu === ACCOUNT_SETTING_TAB.PREFERENCES && <PreferencePage />}
            </div>
          </ScrollArea>
        </div>
      </div>
    </MenuDialog>
  )
}