'use client'

import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
import type { App } from '@/models/explore'
import { cn } from '@langgenius/dify-ui/cn'
import { toast } from '@langgenius/dify-ui/toast'
import { RiRobot2Line } from '@remixicon/react'
import { useSuspenseQuery } from '@tanstack/react-query'
import { useDebounceFn } from 'ahooks'
import { useAtomValue } from 'jotai'
import * as React from 'react'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import AppTypeSelector from '@/app/components/app/type-selector'
import { useSetNeedRefreshAppList } from '@/app/components/apps/storage'
import Divider from '@/app/components/base/divider'
import Input from '@/app/components/base/input'
import Loading from '@/app/components/base/loading'
import CreateAppModal from '@/app/components/explore/create-app-modal'
import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
import { userProfileIdAtom } from '@/context/account-state'
import { workspacePermissionKeysAtom } from '@/context/permission-state'
import { systemFeaturesQueryOptions } from '@/features/system-features/client'
import { DSLImportMode } from '@/models/app'
import { useRouter } from '@/next/navigation'
import { importDSL } from '@/service/apps'
import { fetchAppDetail } from '@/service/explore'
import { useInvalidateAppList } from '@/service/use-apps'
import { useExploreAppList } from '@/service/use-explore'
import { AppModeEnum } from '@/types/app'
import { getRedirection } from '@/utils/app-redirection'
import { trackCreateApp } from '@/utils/create-app-tracking'
import { hasPermission } from '@/utils/permission'
import AppCard from '../app-card'
import Sidebar, { AppCategories, AppCategoryLabel } from './sidebar'

type AppsProps = {
  onSuccess?: () => void
  onCreateFromBlank?: () => void
}

// export enum PageType {
//   EXPLORE = 'explore',
//   CREATE = 'create',
// }

const Apps = ({ onSuccess, onCreateFromBlank }: AppsProps) => {
  const { t } = useTranslation()
  const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
  const currentUserId = useAtomValue(userProfileIdAtom)
  const workspacePermissionKeys = useAtomValue(workspacePermissionKeysAtom)
  const isRbacEnabled = systemFeatures.rbac_enabled
  const canCreateAppFromTemplate = hasPermission(
    workspacePermissionKeys,
    'app.create_and_management',
  )
  const { push } = useRouter()
  const invalidateAppList = useInvalidateAppList()
  const allCategoriesEn = AppCategories.RECOMMENDED

  const setNeedRefresh = useSetNeedRefreshAppList()

  const [keywords, setKeywords] = useState('')
  const [searchKeywords, setSearchKeywords] = useState('')

  const { run: handleSearch } = useDebounceFn(
    () => {
      setSearchKeywords(keywords)
    },
    { wait: 500 },
  )

  const handleKeywordsChange = (value: string) => {
    setKeywords(value)
    handleSearch()
  }

  const [currentType, setCurrentType] = useState<AppModeEnum[]>([])
  const [currCategory, setCurrCategory] = useState<AppCategories | string>(allCategoriesEn)

  const { data, isLoading } = useExploreAppList()

  const visibleCategories = useMemo(() => {
    if (!data) return []

    const categoriesWithApps = new Set<string>()
    data.allList.forEach((app) => {
      app.categories.forEach((category) => categoriesWithApps.add(category))
    })

    return data.categories.filter((category) => categoriesWithApps.has(category))
  }, [data])

  const activeCategory = visibleCategories.includes(currCategory) ? currCategory : allCategoriesEn

  const filteredList = useMemo(() => {
    if (!data) return []
    const { allList } = data
    const filteredByCategory = allList.filter((item) => {
      if (activeCategory === allCategoriesEn) return true
      return item.categories?.includes(activeCategory) ?? false
    })
    if (currentType.length === 0) return filteredByCategory
    return filteredByCategory.filter((item) => {
      if (currentType.includes(AppModeEnum.CHAT) && item.app.mode === AppModeEnum.CHAT) return true
      if (
        currentType.includes(AppModeEnum.ADVANCED_CHAT) &&
        item.app.mode === AppModeEnum.ADVANCED_CHAT
      )
        return true
      if (currentType.includes(AppModeEnum.AGENT_CHAT) && item.app.mode === AppModeEnum.AGENT_CHAT)
        return true
      if (currentType.includes(AppModeEnum.COMPLETION) && item.app.mode === AppModeEnum.COMPLETION)
        return true
      if (currentType.includes(AppModeEnum.WORKFLOW) && item.app.mode === AppModeEnum.WORKFLOW)
        return true
      return false
    })
  }, [currentType, activeCategory, allCategoriesEn, data])

  const searchFilteredList = useMemo(() => {
    if (!searchKeywords || !filteredList || filteredList.length === 0) return filteredList

    const lowerCaseSearchKeywords = searchKeywords.toLowerCase()

    return filteredList.filter(
      (item) =>
        item.app && item.app.name && item.app.name.toLowerCase().includes(lowerCaseSearchKeywords),
    )
  }, [searchKeywords, filteredList])

  const [currApp, setCurrApp] = React.useState<App | null>(null)
  const [isShowCreateModal, setIsShowCreateModal] = React.useState(false)
  const { handleCheckPluginDependencies } = usePluginDependencies()
  const onCreate: CreateAppModalProps['onConfirm'] = async ({
    name,
    icon_type,
    icon,
    icon_background,
    description,
  }) => {
    const { export_data, mode } = await fetchAppDetail(currApp?.app.id as string)
    try {
      const app = await importDSL({
        mode: DSLImportMode.YAML_CONTENT,
        yaml_content: export_data,
        name,
        icon_type,
        icon,
        icon_background,
        description,
      })
      trackCreateApp({ source: 'studio_template_list', appMode: mode, templateId: currApp?.app_id })

      setIsShowCreateModal(false)
      toast.success(t(($) => $['newApp.appCreated'], { ns: 'app' }))
      if (onSuccess) onSuccess()
      if (app.app_id) await handleCheckPluginDependencies(app.app_id)
      setNeedRefresh('1')
      invalidateAppList()
      if (app.app_id) {
        getRedirection(
          { id: app.app_id, mode: app.app_mode, permission_keys: app.permission_keys },
          push,
          {
            currentUserId,
            resourceMaintainer: currentUserId,
            workspacePermissionKeys,
            isRbacEnabled,
          },
        )
      }
    } catch {
      toast.error(t(($) => $['newApp.appCreateFailed'], { ns: 'app' }))
    }
  }

  if (isLoading) {
    return (
      <div className="flex h-full items-center">
        <Loading type="area" />
      </div>
    )
  }

  return (
    <div className="flex h-full flex-col">
      <div className="flex items-center justify-between border-b border-divider-burn py-3">
        <div className="min-w-[180px] pl-5">
          <span className="title-xl-semi-bold text-text-primary">
            {t(($) => $['newApp.startFromTemplate'], { ns: 'app' })}
          </span>
        </div>
        <div className="flex max-w-[548px] flex-1 items-center rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-1.5 shadow-md">
          <AppTypeSelector value={currentType} onChange={setCurrentType} />
          <div className="h-[14px]">
            <Divider type="vertical" />
          </div>
          <Input
            showClearIcon
            wrapperClassName="w-full flex-1"
            className="bg-transparent hover:border-transparent hover:bg-transparent focus:border-transparent focus:bg-transparent focus:shadow-none"
            placeholder={
              t(($) => $['newAppFromTemplate.searchAllTemplate'], { ns: 'app' }) as string
            }
            value={keywords}
            onChange={(e) => handleKeywordsChange(e.target.value)}
            onClear={() => handleKeywordsChange('')}
          />
        </div>
        <div className="h-8 w-[180px]"></div>
      </div>
      <div className="relative flex flex-1 overflow-y-auto">
        {!searchKeywords && (
          <div className="h-full w-[200px] p-4">
            <Sidebar
              current={activeCategory as AppCategories}
              categories={visibleCategories}
              onClick={(category) => {
                setCurrCategory(category)
              }}
              onCreateFromBlank={onCreateFromBlank}
            />
          </div>
        )}
        <div className="h-full flex-1 shrink-0 grow overflow-auto border-l border-divider-burn p-6 pt-2">
          {searchFilteredList && searchFilteredList.length > 0 && (
            <>
              <div className="pt-4 pb-1">
                {searchKeywords ? (
                  <p className="title-md-semi-bold text-text-tertiary">
                    {searchFilteredList.length > 1
                      ? t(($) => $['newApp.foundResults'], {
                          ns: 'app',
                          count: searchFilteredList.length,
                        })
                      : t(($) => $['newApp.foundResult'], {
                          ns: 'app',
                          count: searchFilteredList.length,
                        })}
                  </p>
                ) : (
                  <div className="flex h-[22px] items-center">
                    <AppCategoryLabel
                      category={activeCategory as AppCategories}
                      className="title-md-semi-bold text-text-primary"
                    />
                  </div>
                )}
              </div>
              <div
                className={cn(
                  'grid shrink-0 grid-cols-[repeat(auto-fill,minmax(296px,1fr))] content-start gap-3',
                )}
              >
                {searchFilteredList.map((app) => (
                  <AppCard
                    key={app.app_id}
                    app={app}
                    canCreate={canCreateAppFromTemplate}
                    onCreate={() => {
                      setCurrApp(app)
                      setIsShowCreateModal(true)
                    }}
                  />
                ))}
              </div>
            </>
          )}
          {(!searchFilteredList || searchFilteredList.length === 0) && <NoTemplateFound />}
        </div>
      </div>
      {isShowCreateModal && (
        <CreateAppModal
          appIconType={currApp?.app.icon_type || 'emoji'}
          appIcon={currApp?.app.icon || ''}
          appIconBackground={currApp?.app.icon_background || ''}
          appIconUrl={currApp?.app.icon_url}
          appName={currApp?.app.name || ''}
          appDescription={currApp?.app.description || ''}
          show={isShowCreateModal}
          onConfirm={onCreate}
          onHide={() => setIsShowCreateModal(false)}
        />
      )}
    </div>
  )
}

export default React.memo(Apps)

function NoTemplateFound() {
  const { t } = useTranslation()
  return (
    <div className="w-full rounded-lg bg-workflow-process-bg p-4">
      <div className="mb-2 inline-flex size-8 items-center justify-center rounded-lg bg-components-card-bg shadow-lg">
        <RiRobot2Line className="size-5 text-text-tertiary" />
      </div>
      <p className="title-md-semi-bold text-text-primary">
        {t(($) => $['newApp.noTemplateFound'], { ns: 'app' })}
      </p>
      <p className="system-sm-regular text-text-tertiary">
        {t(($) => $['newApp.noTemplateFoundTip'], { ns: 'app' })}
      </p>
    </div>
  )
}
