'use client'
import type { FC } from 'react'
import type { Collection, Tool } from '@/app/components/tools/types'
import type { ToolWithProvider } from '@/app/components/workflow/types'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import {
  Drawer,
  DrawerBackdrop,
  DrawerContent,
  DrawerPopup,
  DrawerPortal,
  DrawerViewport,
} from '@langgenius/dify-ui/drawer'
import { RiArrowLeftLine, RiCloseLine } from '@remixicon/react'
import * as React from 'react'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import ActionButton from '@/app/components/base/action-button'
import Loading from '@/app/components/base/loading'
import TabSlider from '@/app/components/base/tab-slider-plain'
import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
import Icon from '@/app/components/plugins/card/base/card-icon'
import Description from '@/app/components/plugins/card/base/description'
import OrgInfo from '@/app/components/plugins/card/base/org-info'
import { AuthCategory, PluginAuthInAgent } from '@/app/components/plugins/plugin-auth'
import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
import { CollectionType } from '@/app/components/tools/types'
import { toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
import { useLocale } from '@/context/i18n'
import { getLanguage } from '@/i18n-config/language'
import {
  fetchBuiltInToolList,
  fetchCustomToolList,
  fetchModelToolList,
  fetchWorkflowToolList,
} from '@/service/tools'

type Props = Readonly<{
  showBackButton?: boolean
  collection: Collection | ToolWithProvider
  isBuiltIn?: boolean
  isModel?: boolean
  toolName: string
  setting?: Record<string, any>
  readonly?: boolean
  showReadOnlySettingDetails?: boolean
  onHide: () => void
  onSave?: (value: Record<string, any>) => void
  credentialId?: string
  onAuthorizationItemClick?: (id: string) => void
}>

const SettingBuiltInTool: FC<Props> = ({
  showBackButton = false,
  collection,
  isBuiltIn = true,
  isModel = true,
  toolName,
  setting = {},
  readonly,
  showReadOnlySettingDetails = false,
  onHide,
  onSave,
  credentialId,
  onAuthorizationItemClick,
}) => {
  const locale = useLocale()
  const language = getLanguage(locale)
  const { t } = useTranslation()
  const passedTools = (collection as ToolWithProvider).tools
  const hasPassedTools = passedTools?.length > 0
  const [isLoading, setIsLoading] = useState(!hasPassedTools)
  const [tools, setTools] = useState<Tool[]>(hasPassedTools ? passedTools : [])
  const currTool = tools.find((tool) => tool.name === toolName)
  const formSchemas = currTool ? toolParametersToFormSchemas(currTool.parameters) : []
  const infoSchemas = formSchemas.filter((item) => item.form === 'llm')
  const settingSchemas = formSchemas.filter((item) => item.form !== 'llm')
  const hasSetting = settingSchemas.length > 0
  const showSettingTab = hasSetting && (!readonly || showReadOnlySettingDetails)
  const showSettingAsDetails = readonly && showReadOnlySettingDetails
  const [tempSetting, setTempSetting] = useState(setting)
  const [currType, setCurrType] = useState('info')
  const isInfoActive = currType === 'info'
  useEffect(() => {
    if (!collection || hasPassedTools) return

    ;(async () => {
      setIsLoading(true)
      try {
        const list = await new Promise<Tool[]>((resolve) => {
          ;(async function () {
            if (isModel) resolve(await fetchModelToolList(collection.name))
            else if (isBuiltIn) resolve(await fetchBuiltInToolList(collection.name))
            else if (collection.type === CollectionType.workflow)
              resolve(await fetchWorkflowToolList(collection.id))
            else resolve(await fetchCustomToolList(collection.name))
          })()
        })
        setTools(list)
      } catch {}
      setIsLoading(false)
    })()
    // oxlint-disable-next-line react/exhaustive-deps
  }, [collection?.name, collection?.id, collection?.type])

  useEffect(() => {
    setCurrType(!readonly && hasSetting ? 'setting' : 'info')
  }, [hasSetting])

  const isValid = (() => {
    let valid = true
    settingSchemas.forEach((item) => {
      if (item.required && !tempSetting[item.name]) valid = false
    })
    return valid
  })()

  const getType = (type: string) => {
    if (type === 'number-input') return t(($) => $['setBuiltInTools.number'], { ns: 'tools' })
    if (type === 'text-input') return t(($) => $['setBuiltInTools.string'], { ns: 'tools' })
    if (type === 'checkbox') return 'boolean'
    if (type === 'file') return t(($) => $['setBuiltInTools.file'], { ns: 'tools' })
    return type
  }

  const renderSchemaDetails = (schemas: typeof formSchemas) => (
    <div className="">
      {schemas.length > 0 && (
        <div className="space-y-1 py-2">
          {schemas.map((item) => (
            <div key={item.name} className="py-1">
              <div className="flex items-center gap-2">
                <div className="code-sm-semibold text-text-secondary">{item.label[language]}</div>
                <div className="system-xs-regular text-text-tertiary">{getType(item.type)}</div>
                {item.required && (
                  <div className="system-xs-medium text-text-warning-secondary">
                    {t(($) => $['setBuiltInTools.required'], { ns: 'tools' })}
                  </div>
                )}
              </div>
              {item.human_description && (
                <div className="mt-0.5 system-xs-regular text-text-tertiary">
                  {item.human_description?.[language]}
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  )
  const infoUI = renderSchemaDetails(infoSchemas)
  const settingDetailsUI = renderSchemaDetails(settingSchemas)

  const settingUI = (
    <Form
      value={tempSetting}
      onChange={setTempSetting}
      formSchemas={settingSchemas}
      isEditMode={false}
      showOnVariableMap={{}}
      validating={false}
      readonly={readonly}
    />
  )

  return (
    <Drawer
      open
      modal
      swipeDirection="right"
      onOpenChange={(open) => {
        if (!open) onHide()
      }}
    >
      <DrawerPortal>
        <DrawerBackdrop className="bg-background-overlay" />
        <DrawerViewport>
          <DrawerPopup
            className={cn(
              'justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-6 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-6 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-[420px] data-[swipe-direction=right]:max-w-[420px] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
            )}
          >
            <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
              {isLoading && <Loading type="app" />}
              {!isLoading && (
                <>
                  {/* header */}
                  <div className="relative border-b border-divider-subtle p-4 pb-3">
                    <div className="absolute top-3 right-3">
                      <ActionButton onClick={onHide}>
                        <RiCloseLine className="size-4" />
                      </ActionButton>
                    </div>
                    {showBackButton && (
                      <div
                        className="mb-2 flex cursor-pointer items-center gap-1 system-xs-semibold-uppercase text-text-accent-secondary"
                        onClick={onHide}
                      >
                        <RiArrowLeftLine className="size-4" />
                        {t(($) => $['detailPanel.operation.back'], { ns: 'plugin' })}
                      </div>
                    )}
                    <div className="flex items-center gap-1">
                      <Icon size="tiny" className="size-6" src={collection.icon} />
                      <OrgInfo
                        packageNameClassName="w-auto"
                        orgName={collection.author}
                        packageName={collection.name.split('/').pop() || ''}
                      />
                    </div>
                    <div className="mt-1 system-md-semibold text-text-primary">
                      {currTool?.label[language]}
                    </div>
                    {!!currTool?.description[language] && (
                      <Description
                        className="mt-3 mb-2 h-auto"
                        text={currTool.description[language]}
                        descriptionLineRows={2}
                      ></Description>
                    )}
                    {collection.allow_delete && collection.type === CollectionType.builtIn && (
                      <PluginAuthInAgent
                        pluginPayload={{
                          provider: collection.name,
                          category: AuthCategory.tool,
                          providerType: collection.type,
                          detail: collection as any,
                        }}
                        credentialId={credentialId}
                        onAuthorizationItemClick={onAuthorizationItemClick}
                      />
                    )}
                  </div>
                  {/* form */}
                  <div className="h-full">
                    <div className="flex h-full flex-col">
                      {showSettingTab ? (
                        <TabSlider
                          className="mt-1 shrink-0 px-4"
                          itemClassName="py-3"
                          noBorderBottom
                          value={currType}
                          onChange={(value) => {
                            setCurrType(value)
                          }}
                          options={[
                            {
                              value: 'info',
                              text: t(($) => $['setBuiltInTools.parameters'], { ns: 'tools' })!,
                            },
                            {
                              value: 'setting',
                              text: t(($) => $['setBuiltInTools.setting'], { ns: 'tools' })!,
                            },
                          ]}
                        />
                      ) : (
                        <div className="p-4 pb-1 system-sm-semibold-uppercase text-text-primary">
                          {t(($) => $['setBuiltInTools.parameters'], { ns: 'tools' })}
                        </div>
                      )}
                      <div className="h-0 grow overflow-y-auto px-4">
                        {isInfoActive && infoUI}
                        {!isInfoActive && showSettingAsDetails && settingDetailsUI}
                        {!isInfoActive && !showSettingAsDetails && settingUI}
                        {!readonly && !isInfoActive && (
                          <div className="flex shrink-0 justify-end space-x-2 rounded-b-[10px] bg-components-panel-bg py-2">
                            <Button
                              className="flex h-8 items-center px-3! text-[13px]! font-medium"
                              onClick={onHide}
                            >
                              {t(($) => $['operation.cancel'], { ns: 'common' })}
                            </Button>
                            <Button
                              className="flex h-8 items-center px-3! text-[13px]! font-medium"
                              variant="primary"
                              disabled={!isValid}
                              onClick={() => onSave?.(tempSetting)}
                            >
                              {t(($) => $['operation.save'], { ns: 'common' })}
                            </Button>
                          </div>
                        )}
                      </div>
                      <ReadmeEntrance pluginDetail={collection as any} className="mt-auto" />
                    </div>
                  </div>
                </>
              )}
            </DrawerContent>
          </DrawerPopup>
        </DrawerViewport>
      </DrawerPortal>
    </Drawer>
  )
}
export default React.memo(SettingBuiltInTool)
