import type { ModelProviderSummaryResponse } from '@dify/contracts/api/console/workspaces/types.gen'
import type { FC } from 'react'
import type { ModelProvider } from '../declarations'
import type { ModelProviderPluginSummary } from '../index'
import type { ModelProviderQuotaGetPaid } from '../utils'
import { cn } from '@langgenius/dify-ui/cn'
import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
import { useAtomValue } from 'jotai'
import { memo, useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { PluginCategoryEnum } from '@/app/components/plugins/types'
import { workspacePermissionKeysAtom } from '@/context/permission-state'
import { systemFeaturesQueryOptions } from '@/features/system-features/client'
import { useCredentialPermissions } from '@/hooks/use-credential-permissions'
import { renderI18nObject } from '@/i18n/metadata'
import { consoleQuery } from '@/service/console'
import { commonQueryKeys } from '@/service/use-common'
import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
import { hasPermission } from '@/utils/permission'
import { useModelProviderListExpanded, useSetModelProviderListExpanded } from '../atoms'
import { ConfigurationMethodEnum } from '../declarations'
import { useLanguage } from '../hooks'
import ModelBadge from '../model-badge'
import ProviderIcon from '../provider-icon'
import {
  MODEL_PROVIDER_QUOTA_GET_PAID,
  modelTypeFormat,
  normalizeModelProviderModelsResponse,
} from '../utils'
import CredentialPanel from './credential-panel'
import LazyCustomModelActions from './lazy-custom-model-actions'
import ModelList from './model-list'
import ProviderCardActions from './provider-card-actions'

type ProviderAddedCardProps = {
  layout?: 'list' | 'grid'
  notConfigured?: boolean
  provider: ModelProviderSummaryResponse | ModelProvider
  pluginSummary?: ModelProviderPluginSummary
}

const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
  layout = 'list',
  notConfigured,
  provider,
  pluginSummary,
}) => {
  const { t } = useTranslation()
  const {
    data: { deploymentEdition, rbacEnabled },
  } = useSuspenseQuery({
    ...systemFeaturesQueryOptions(),
    select: ({ deployment_edition, rbac_enabled }) => ({
      deploymentEdition: deployment_edition,
      rbacEnabled: rbac_enabled,
    }),
  })
  const language = useLanguage()
  const queryClient = useQueryClient()
  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
  const currentProviderName = provider.provider
  const expanded = useModelProviderListExpanded(currentProviderName)
  const setExpanded = useSetModelProviderListExpanded(currentProviderName)
  const supportsPredefinedModel = provider.configurate_methods.some(
    (method) => method === ConfigurationMethodEnum.predefinedModel,
  )
  const supportsCustomizableModel = provider.configurate_methods.some(
    (method) => method === ConfigurationMethodEnum.customizableModel,
  )
  const systemConfig = provider.system_configuration
  const workspacePermissionKeys = useAtomValue(workspacePermissionKeysAtom)
  const canSetPluginPreferences = hasPermission(
    workspacePermissionKeys,
    'plugin.plugin_preferences',
  )
  const {
    data: modelList = [],
    isFetching: loading,
    isSuccess: hasFetchedModelList,
    refetch: refetchModelList,
  } = useQuery(
    consoleQuery.workspaces.current.modelProviders.byProvider.models.get.queryOptions({
      input: { params: { provider: currentProviderName } },
      enabled: expanded && canSetPluginPreferences,
      refetchOnWindowFocus: false,
      select: normalizeModelProviderModelsResponse,
    }),
  )
  const hasModelList = hasFetchedModelList && !!modelList.length
  const showCollapsedSection = !canSetPluginPreferences || !expanded || !hasFetchedModelList
  const showModelProvider =
    systemConfig.enabled &&
    MODEL_PROVIDER_QUOTA_GET_PAID.includes(currentProviderName as ModelProviderQuotaGetPaid) &&
    deploymentEdition === 'CLOUD'
  const canConfigureModels = hasPermission(workspacePermissionKeys, 'plugin.model_config')
  const { canUseCredential, canCreateCredential, canManageCredential } = useCredentialPermissions()
  const canAccessCredentials = rbacEnabled
    ? canUseCredential || canCreateCredential || canManageCredential
    : canManageCredential
  const showCredential = supportsPredefinedModel && canAccessCredentials
  const showCustomModelActions = supportsCustomizableModel && canConfigureModels

  const refreshModelList = useCallback(
    (targetProviderName: string) => {
      if (targetProviderName !== currentProviderName) return

      if (!expanded) setExpanded(true)

      refetchModelList().catch(() => {})
    },
    [currentProviderName, expanded, refetchModelList, setExpanded],
  )

  const refreshPluginData = useCallback(async () => {
    await Promise.all([
      queryClient.invalidateQueries({
        queryKey: consoleQuery.workspaces.current.modelProviders.summary.get.key(),
      }),
      queryClient.invalidateQueries({ queryKey: commonQueryKeys.modelProviderDetails }),
      invalidateInstalledPluginList(PluginCategoryEnum.model),
    ])
  }, [invalidateInstalledPluginList, queryClient])

  const handleOpenModelList = useCallback(() => {
    if (loading) return

    if (!expanded) {
      setExpanded(true)
      return
    }

    refetchModelList().catch(() => {})
  }, [expanded, loading, refetchModelList, setExpanded])

  const providerLabel = renderI18nObject(provider.label, language)
  const description = renderI18nObject(provider.description || provider.label, language)
  const organization = currentProviderName.split('/')[0]

  if (layout === 'grid') {
    return (
      <div
        className={cn(
          'group relative mb-0 min-h-30 overflow-hidden rounded-xl border-[0.5px] border-divider-regular bg-components-panel-on-panel-item-bg shadow-xs',
          currentProviderName === 'langgenius/openai/openai' && 'bg-third-party-model-bg-openai',
          currentProviderName === 'langgenius/anthropic/anthropic' &&
            'bg-third-party-model-bg-anthropic',
        )}
      >
        <div className="p-4 pb-3">
          <div className="flex min-w-0 items-start gap-3">
            <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-background-default-subtle">
              <img
                alt=""
                src={renderI18nObject(provider.icon_small, language)}
                width={40}
                height={40}
                className="size-10 rounded-lg object-contain"
              />
            </div>
            <div className="min-w-0 flex-1">
              <div className="flex h-5 min-w-0 items-center gap-1">
                <div
                  className="truncate system-md-semibold text-text-secondary"
                  title={providerLabel}
                >
                  {providerLabel}
                </div>
                {pluginSummary && (
                  <ProviderCardActions
                    summary={pluginSummary}
                    providerLabel={providerLabel}
                    onUpdate={refreshPluginData}
                  />
                )}
              </div>
              <div className="mt-0.5 flex h-4 min-w-0 items-center gap-2 system-xs-regular text-text-tertiary">
                <span className="truncate" title={organization}>
                  {organization}
                </span>
              </div>
            </div>
          </div>
          <div className="mt-3 line-clamp-2 h-8 system-xs-regular text-text-tertiary">
            {description}
          </div>
          <div className="mt-3 flex min-w-0 gap-0.5 overflow-hidden">
            {provider.supported_model_types.slice(0, 4).map((modelType) => (
              <ModelBadge key={modelType}>{modelTypeFormat(modelType)}</ModelBadge>
            ))}
          </div>
        </div>
        <div className="absolute right-0 bottom-0 left-0 hidden min-h-20 flex-wrap items-end gap-2 rounded-xl bg-linear-to-t from-components-panel-on-panel-item-bg via-components-panel-on-panel-item-bg to-background-gradient-mask-transparent p-4 group-focus-within:flex group-hover:flex">
          {canSetPluginPreferences && (showModelProvider || !notConfigured) && (
            <button
              type="button"
              className="flex h-8 min-w-0 flex-1 items-center justify-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 system-sm-medium text-components-button-secondary-text shadow-xs outline-hidden hover:bg-components-button-secondary-bg-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
              aria-label={t(($) => $['modelProvider.showModels'], { ns: 'common' })}
              onClick={handleOpenModelList}
            >
              <span className="truncate">
                {hasModelList
                  ? t(($) => $['modelProvider.modelsNum'], { ns: 'common', num: modelList.length })
                  : t(($) => $['modelProvider.showModels'], { ns: 'common' })}
              </span>
              {!loading && (
                <span aria-hidden className="ml-1 i-ri-arrow-right-s-line size-4 shrink-0" />
              )}
              {loading && (
                <span aria-hidden className="ml-1 i-ri-loader-2-line size-3 animate-spin" />
              )}
            </button>
          )}
          {!showModelProvider && notConfigured && (
            <div className="flex h-8 min-w-0 flex-1 items-center justify-center rounded-lg bg-background-default-subtle px-2">
              <span
                aria-hidden
                className="mr-1 i-ri-information-2-fill size-4 shrink-0 text-text-accent"
              />
              <span className="truncate system-xs-medium text-text-secondary">
                {t(($) => $['modelProvider.configureTip'], { ns: 'common' })}
              </span>
            </div>
          )}
          {showCredential && <CredentialPanel provider={provider} />}
          {showCustomModelActions && (
            <div className="flex shrink-0">
              <LazyCustomModelActions provider={provider} />
            </div>
          )}
        </div>
        {!showCollapsedSection && (
          <div className="px-2 pb-2">
            <ModelList
              provider={provider}
              models={modelList}
              onCollapse={() => setExpanded(false)}
              onChange={refreshModelList}
            />
          </div>
        )}
      </div>
    )
  }

  return (
    <div
      data-testid="provider-added-card"
      className={cn(
        'rounded-xl border-[0.5px] border-divider-regular bg-third-party-model-bg-default shadow-xs',
        currentProviderName === 'langgenius/openai/openai' && 'bg-third-party-model-bg-openai',
        currentProviderName === 'langgenius/anthropic/anthropic' &&
          'bg-third-party-model-bg-anthropic',
      )}
    >
      <div className="flex rounded-t-xl py-2 pr-2 pl-3">
        <div className="grow px-1 pt-1 pb-0.5">
          <div className="mb-2 flex items-center gap-1">
            <ProviderIcon provider={provider} />
            {pluginSummary && (
              <ProviderCardActions
                summary={pluginSummary}
                providerLabel={providerLabel}
                onUpdate={refreshPluginData}
              />
            )}
          </div>
          <div className="flex gap-0.5">
            {provider.supported_model_types.map((modelType) => (
              <ModelBadge key={modelType}>{modelTypeFormat(modelType)}</ModelBadge>
            ))}
          </div>
        </div>
        {showCredential && <CredentialPanel provider={provider} />}
      </div>
      {showCollapsedSection && (
        <div className="group flex items-center justify-between border-t border-t-divider-subtle py-1.5 pr-2.75 pl-2 system-xs-medium text-text-tertiary">
          {canSetPluginPreferences && (showModelProvider || !notConfigured) && (
            <button
              type="button"
              className="flex h-6 items-center rounded-lg border-none bg-transparent pr-1.5 pl-1 text-left outline-hidden hover:bg-components-button-ghost-bg-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
              aria-label={t(($) => $['modelProvider.showModels'], { ns: 'common' })}
              onClick={handleOpenModelList}
            >
              {hasModelList
                ? t(($) => $['modelProvider.modelsNum'], { ns: 'common', num: modelList.length })
                : t(($) => $['modelProvider.showModels'], { ns: 'common' })}
              {!loading && <div className="i-ri-arrow-right-s-line size-4" aria-hidden="true" />}
              {loading && <div className="ml-0.5 i-ri-loader-2-line size-3 animate-spin" />}
            </button>
          )}
          {!showModelProvider && notConfigured && (
            <div className="flex h-6 items-center pr-1.5 pl-1">
              <div className="mr-1 i-ri-information-2-fill size-4 text-text-accent" />
              <span className="system-xs-medium text-text-secondary">
                {t(($) => $['modelProvider.configureTip'], { ns: 'common' })}
              </span>
            </div>
          )}
          {showCustomModelActions && (
            <div className="flex grow justify-end">
              <LazyCustomModelActions provider={provider} />
            </div>
          )}
        </div>
      )}
      {!showCollapsedSection && (
        <ModelList
          provider={provider}
          models={modelList}
          onCollapse={() => setExpanded(false)}
          onChange={refreshModelList}
        />
      )}
    </div>
  )
}

export default memo(ProviderAddedCard)