'use client'
import type { LangGeniusVersionInfo } from '@/context/app-context-types'
import { Button } from '@langgenius/dify-ui/button'
import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
import { RiCloseLine } from '@remixicon/react'
import { useSuspenseQuery } from '@tanstack/react-query'
import dayjs from 'dayjs'
import { useTranslation } from 'react-i18next'
import DifyLogo from '@/app/components/base/logo/dify-logo'
import { IS_CE_EDITION } from '@/config'
import { systemFeaturesQueryOptions } from '@/features/system-features/client'
import Link from '@/next/link'

type IAccountSettingProps = {
  langGeniusVersionInfo: LangGeniusVersionInfo
  onCancel: () => void
}

export default function AccountAbout({ langGeniusVersionInfo, onCancel }: IAccountSettingProps) {
  const { t } = useTranslation()
  const isLatest = langGeniusVersionInfo.current_version === langGeniusVersionInfo.latest_version
  const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())

  return (
    <Dialog
      open
      onOpenChange={(open) => {
        if (!open) onCancel()
      }}
    >
      <DialogContent className="w-[calc(100vw-2rem)]! max-w-[480px]! overflow-hidden! border-none px-6! py-4! text-left align-middle">
        <div className="relative">
          <button
            type="button"
            className="absolute top-0 right-0 flex size-8 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
            aria-label={t(($) => $['operation.close'], { ns: 'common' })}
            onClick={onCancel}
          >
            <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
          </button>
          <div className="flex flex-col items-center gap-4 py-8">
            {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo ? (
              <img
                src={systemFeatures.branding.workspace_logo}
                className="block h-7 w-auto object-contain"
                alt="logo"
              />
            ) : (
              <DifyLogo size="large" className="mx-auto" />
            )}

            <div className="text-center text-xs font-normal text-text-tertiary">
              Version
              {langGeniusVersionInfo?.current_version}
            </div>
            <div className="flex flex-col items-center gap-2 text-center text-xs font-normal text-text-secondary">
              <div>©{dayjs().year()} LangGenius, Inc., Contributors.</div>
              <div className="text-text-accent">
                {IS_CE_EDITION ? (
                  <Link
                    href="https://github.com/langgenius/dify/blob/main/LICENSE"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Open Source License
                  </Link>
                ) : (
                  <>
                    <Link href="https://dify.ai/privacy" target="_blank" rel="noopener noreferrer">
                      Privacy Policy
                    </Link>
                    ,&nbsp;
                    <Link href="https://dify.ai/terms" target="_blank" rel="noopener noreferrer">
                      Terms of Service
                    </Link>
                  </>
                )}
              </div>
            </div>
          </div>
          <div className="-mx-6 mb-4 h-[0.5px] bg-divider-regular" />
          <div className="flex items-center justify-between gap-3">
            <div className="min-w-0 text-xs font-medium text-text-tertiary">
              {isLatest
                ? t(($) => $['about.latestAvailable'], {
                    ns: 'common',
                    version: langGeniusVersionInfo.latest_version,
                  })
                : t(($) => $['about.nowAvailable'], {
                    ns: 'common',
                    version: langGeniusVersionInfo.latest_version,
                  })}
            </div>
            <div className="flex shrink-0 items-center">
              <Button className="mr-2" size="small">
                <Link
                  href="https://github.com/langgenius/dify/releases"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {t(($) => $['about.changeLog'], { ns: 'common' })}
                </Link>
              </Button>
              {!isLatest && !IS_CE_EDITION && (
                <Button variant="primary" size="small">
                  <Link
                    href={langGeniusVersionInfo.release_notes}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    {t(($) => $['about.updateNow'], { ns: 'common' })}
                  </Link>
                </Button>
              )}
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}