import type { ChangeEvent } from 'react'
import {
  RiEditBoxLine,
  RiEqualizer2Line,
  RiExchange2Fill,
  RiImageAddLine,
  RiLayoutLeft2Line,
  RiLoader2Line,
  RiPlayLargeLine,
} from '@remixicon/react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '@/app/components/base/button'
import Divider from '@/app/components/base/divider'
import { BubbleTextMod } from '@/app/components/base/icons/src/vender/solid/communication'
import { getImageUploadErrorMessage, imageUpload } from '@/app/components/base/image-uploader/utils'
import DifyLogo from '@/app/components/base/logo/dify-logo'
import Switch from '@/app/components/base/switch'
import { useToastContext } from '@/app/components/base/toast/context'
import { Plan } from '@/app/components/billing/type'
import { useAppContext } from '@/context/app-context'
import { useGlobalPublicStore } from '@/context/global-public-context'
import { useProviderContext } from '@/context/provider-context'
import {
  updateCurrentWorkspace,
} from '@/service/common'
import { cn } from '@/utils/classnames'

const ALLOW_FILE_EXTENSIONS = ['svg', 'png']

const CustomWebAppBrand = () => {
  const { t } = useTranslation()
  const { notify } = useToastContext()
  const { plan, enableBilling } = useProviderContext()
  const {
    currentWorkspace,
    mutateCurrentWorkspace,
    isCurrentWorkspaceManager,
  } = useAppContext()
  const [fileId, setFileId] = useState('')
  const [imgKey, setImgKey] = useState(() => Date.now())
  const [uploadProgress, setUploadProgress] = useState(0)
  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
  const isSandbox = enableBilling && plan.type === Plan.sandbox
  const uploading = uploadProgress > 0 && uploadProgress < 100
  const webappLogo = currentWorkspace.custom_config?.replace_webapp_logo || ''
  const webappBrandRemoved = currentWorkspace.custom_config?.remove_webapp_brand
  const uploadDisabled = isSandbox || webappBrandRemoved || !isCurrentWorkspaceManager

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]

    if (!file)
      return

    if (file.size > 5 * 1024 * 1024) {
      notify({ type: 'error', message: t('imageUploader.uploadFromComputerLimit', { ns: 'common', size: 5 }) })
      return
    }

    imageUpload({
      file,
      onProgressCallback: (progress) => {
        setUploadProgress(progress)
      },
      onSuccessCallback: (res) => {
        setUploadProgress(100)
        setFileId(res.id)
      },
      onErrorCallback: (error?: any) => {
        const errorMessage = getImageUploadErrorMessage(error, t('imageUploader.uploadFromComputerUploadError', { ns: 'common' }), t as any)
        notify({ type: 'error', message: errorMessage })
        setUploadProgress(-1)
      },
    }, false, '/workspaces/custom-config/webapp-logo/upload')
  }

  const handleApply = async () => {
    await updateCurrentWorkspace({
      url: '/workspaces/custom-config',
      body: {
        remove_webapp_brand: webappBrandRemoved,
        replace_webapp_logo: fileId,
      },
    })
    mutateCurrentWorkspace()
    setFileId('')
    setImgKey(Date.now())
  }

  const handleRestore = async () => {
    await updateCurrentWorkspace({
      url: '/workspaces/custom-config',
      body: {
        remove_webapp_brand: false,
        replace_webapp_logo: '',
      },
    })
    mutateCurrentWorkspace()
  }

  const handleSwitch = async (checked: boolean) => {
    await updateCurrentWorkspace({
      url: '/workspaces/custom-config',
      body: {
        remove_webapp_brand: checked,
      },
    })
    mutateCurrentWorkspace()
  }

  const handleCancel = () => {
    setFileId('')
    setUploadProgress(0)
  }

  return (
    <div className="py-4">
      <div className="mb-2 flex items-center justify-between rounded-xl bg-background-section-burn p-4 text-text-primary system-md-medium">
        {t('webapp.removeBrand', { ns: 'custom' })}
        <Switch
          size="l"
          value={webappBrandRemoved ?? false}
          disabled={isSandbox || !isCurrentWorkspaceManager}
          onChange={handleSwitch}
        />
      </div>
      <div className={cn('flex h-14 items-center justify-between rounded-xl bg-background-section-burn px-4', webappBrandRemoved && 'opacity-30')}>
        <div>
          <div className="text-text-primary system-md-medium">{t('webapp.changeLogo', { ns: 'custom' })}</div>
          <div className="text-text-tertiary system-xs-regular">{t('webapp.changeLogoTip', { ns: 'custom' })}</div>
        </div>
        <div className="flex items-center">
          {(!uploadDisabled && webappLogo && !webappBrandRemoved) && (
            <>
              <Button
                variant="ghost"
                disabled={uploadDisabled || (!webappLogo && !webappBrandRemoved)}
                onClick={handleRestore}
              >
                {t('restore', { ns: 'custom' })}
              </Button>
              <div className="mx-2 h-5 w-[1px] bg-divider-regular"></div>
            </>
          )}
          {
            !uploading && (
              <Button
                className="relative mr-2"
                disabled={uploadDisabled}
              >
                <RiImageAddLine className="mr-1 h-4 w-4" />
                {
                  (webappLogo || fileId)
                    ? t('change', { ns: 'custom' })
                    : t('upload', { ns: 'custom' })
                }
                <input
                  className={cn('absolute inset-0 block w-full text-[0] opacity-0', uploadDisabled ? 'cursor-not-allowed' : 'cursor-pointer')}
                  onClick={e => (e.target as HTMLInputElement).value = ''}
                  type="file"
                  accept={ALLOW_FILE_EXTENSIONS.map(ext => `.${ext}`).join(',')}
                  onChange={handleChange}
                  disabled={uploadDisabled}
                />
              </Button>
            )
          }
          {
            uploading && (
              <Button
                className="relative mr-2"
                disabled={true}
              >
                <RiLoader2Line className="mr-1 h-4 w-4 animate-spin" />
                {t('uploading', { ns: 'custom' })}
              </Button>
            )
          }
          {
            fileId && (
              <>
                <Button
                  className="mr-2"
                  onClick={handleCancel}
                  disabled={webappBrandRemoved || !isCurrentWorkspaceManager}
                >
                  {t('operation.cancel', { ns: 'common' })}
                </Button>
                <Button
                  variant="primary"
                  className="mr-2"
                  onClick={handleApply}
                  disabled={webappBrandRemoved || !isCurrentWorkspaceManager}
                >
                  {t('apply', { ns: 'custom' })}
                </Button>
              </>
            )
          }
        </div>
      </div>
      {uploadProgress === -1 && (
        <div className="mt-2 text-xs text-[#D92D20]">{t('uploadedFail', { ns: 'custom' })}</div>
      )}
      <div className="mb-2 mt-5 flex items-center gap-2">
        <div className="shrink-0 text-text-tertiary system-xs-medium-uppercase">{t('overview.appInfo.preview', { ns: 'appOverview' })}</div>
        <Divider bgStyle="gradient" className="grow" />
      </div>
      <div className="relative mb-2 flex items-center gap-3">
        {/* chat card */}
        <div className="flex h-[320px] grow basis-1/2 overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border-subtle bg-background-default-burn">
          <div className="flex h-full w-[232px] shrink-0 flex-col p-1 pr-0">
            <div className="flex items-center gap-3 p-3 pr-2">
              <div className={cn('inline-flex h-8 w-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-blue-light-solid')}>
                <BubbleTextMod className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
              </div>
              <div className="grow text-text-secondary system-md-semibold">Chatflow App</div>
              <div className="p-1.5">
                <RiLayoutLeft2Line className="h-4 w-4 text-text-tertiary" />
              </div>
            </div>
            <div className="shrink-0 px-4 py-3">
              <Button variant="secondary-accent" className="w-full justify-center">
                <RiEditBoxLine className="mr-1 h-4 w-4" />
                <div className="p-1 opacity-20">
                  <div className="h-2 w-[94px] rounded-sm bg-text-accent-light-mode-only"></div>
                </div>
              </Button>
            </div>
            <div className="grow px-3 pt-5">
              <div className="flex h-8 items-center px-3 py-1">
                <div className="h-2 w-14 rounded-sm bg-text-quaternary opacity-20"></div>
              </div>
              <div className="flex h-8 items-center px-3 py-1">
                <div className="h-2 w-[168px] rounded-sm bg-text-quaternary opacity-20"></div>
              </div>
              <div className="flex h-8 items-center px-3 py-1">
                <div className="h-2 w-[128px] rounded-sm bg-text-quaternary opacity-20"></div>
              </div>
            </div>
            <div className="flex shrink-0 items-center justify-between p-3">
              <div className="p-1.5">
                <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
              </div>
              <div className="flex items-center gap-1.5">
                {!webappBrandRemoved && (
                  <>
                    <div className="text-text-tertiary system-2xs-medium-uppercase">POWERED BY</div>
                    {
                      systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
                        ? <img src={systemFeatures.branding.workspace_logo} alt="logo" className="block h-5 w-auto" />
                        : webappLogo
                          ? <img src={`${webappLogo}?hash=${imgKey}`} alt="logo" className="block h-5 w-auto" />
                          : <DifyLogo size="small" />
                    }
                  </>
                )}
              </div>
            </div>
          </div>
          <div className="flex w-[138px] grow flex-col justify-between p-2 pr-0">
            <div className="flex grow flex-col justify-between rounded-l-2xl border-[0.5px] border-r-0 border-components-panel-border-subtle bg-chatbot-bg pb-4 pl-[22px] pt-16">
              <div className="w-[720px] rounded-2xl border border-divider-subtle bg-chat-bubble-bg px-4 py-3">
                <div className="mb-1 text-text-primary body-md-regular">Hello! How can I assist you today?</div>
                <Button size="small">
                  <div className="h-2 w-[144px] rounded-sm bg-text-quaternary opacity-20"></div>
                </Button>
              </div>
              <div className="flex h-[52px] w-[578px] items-center rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pl-3.5 text-text-placeholder shadow-md backdrop-blur-sm body-lg-regular">Talk to Dify</div>
            </div>
          </div>
        </div>
        {/* workflow card */}
        <div className="flex h-[320px] grow basis-1/2 flex-col overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border-subtle bg-background-default-burn">
          <div className="w-full border-b-[0.5px] border-divider-subtle p-4 pb-0">
            <div className="mb-2 flex items-center gap-3">
              <div className={cn('inline-flex h-8 w-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-indigo-solid')}>
                <RiExchange2Fill className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
              </div>
              <div className="grow text-text-secondary system-md-semibold">Workflow App</div>
              <div className="p-1.5">
                <RiLayoutLeft2Line className="h-4 w-4 text-text-tertiary" />
              </div>
            </div>
            <div className="flex items-center gap-4">
              <div className="flex h-10 shrink-0 items-center border-b-2 border-components-tab-active text-text-primary system-md-semibold-uppercase">RUN ONCE</div>
              <div className="flex h-10 grow items-center border-b-2 border-transparent text-text-tertiary system-md-semibold-uppercase">RUN BATCH</div>
            </div>
          </div>
          <div className="grow bg-components-panel-bg">
            <div className="p-4 pb-1">
              <div className="mb-1 py-2">
                <div className="h-2 w-20 rounded-sm bg-text-quaternary opacity-20"></div>
              </div>
              <div className="h-16 w-full rounded-lg bg-components-input-bg-normal"></div>
            </div>
            <div className="flex items-center justify-between px-4 py-3">
              <Button size="small">
                <div className="h-2 w-10 rounded-sm bg-text-quaternary opacity-20"></div>
              </Button>
              <Button variant="primary" size="small" disabled>
                <RiPlayLargeLine className="mr-1 h-4 w-4" />
                <span>Execute</span>
              </Button>
            </div>
          </div>
          <div className="flex h-12 shrink-0 items-center gap-1.5 bg-components-panel-bg p-4 pt-3">
            {!webappBrandRemoved && (
              <>
                <div className="text-text-tertiary system-2xs-medium-uppercase">POWERED BY</div>
                {
                  systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
                    ? <img src={systemFeatures.branding.workspace_logo} alt="logo" className="block h-5 w-auto" />
                    : webappLogo
                      ? <img src={`${webappLogo}?hash=${imgKey}`} alt="logo" className="block h-5 w-auto" />
                      : <DifyLogo size="small" />
                }
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

export default CustomWebAppBrand
