import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
import type { PipelineTemplate } from '@/models/pipeline'
import { Button } from '@langgenius/dify-ui/button'
import { Textarea } from '@langgenius/dify-ui/textarea'
import { toast } from '@langgenius/dify-ui/toast'
import { RiCloseLine } from '@remixicon/react'
import * as React from 'react'
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import AppIcon from '@/app/components/base/app-icon'
import AppIconPicker from '@/app/components/base/app-icon-picker'
import Input from '@/app/components/base/input'
import { useInvalidCustomizedTemplateList, useUpdateTemplateInfo } from '@/service/use-pipeline'

type EditPipelineInfoProps = {
  onClose: () => void
  pipeline: PipelineTemplate
}

const EditPipelineInfo = ({
  onClose,
  pipeline,
}: EditPipelineInfoProps) => {
  const { t } = useTranslation()
  const [name, setName] = useState(pipeline.name)
  const iconInfo = pipeline.icon
  const [appIcon, setAppIcon] = useState<AppIconSelection>(
    iconInfo.icon_type === 'image'
      ? { type: 'image' as const, url: iconInfo.icon_url || '', fileId: iconInfo.icon || '' }
      : { type: 'emoji' as const, icon: iconInfo.icon || '', background: iconInfo.icon_background || '' },
  )
  const [description, setDescription] = useState(pipeline.description)
  const [showAppIconPicker, setShowAppIconPicker] = useState(false)

  const handleAppNameChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value
    setName(value)
  }, [])

  const handleOpenAppIconPicker = useCallback(() => {
    setShowAppIconPicker(true)
  }, [])

  const handleSelectAppIcon = useCallback((icon: AppIconSelection) => {
    setAppIcon(icon)
  }, [])

  const handleDescriptionChange = useCallback((value: string) => {
    setDescription(value)
  }, [])

  const { mutateAsync: updatePipeline } = useUpdateTemplateInfo()
  const invalidCustomizedTemplateList = useInvalidCustomizedTemplateList()

  const handleSave = useCallback(async () => {
    if (!name) {
      toast.error(t('editPipelineInfoNameRequired', { ns: 'datasetPipeline' }))
      return
    }
    const request = {
      template_id: pipeline.id,
      name,
      icon_info: {
        icon_type: appIcon.type,
        icon: appIcon.type === 'image' ? appIcon.fileId : appIcon.icon,
        icon_background: appIcon.type === 'image' ? undefined : appIcon.background,
        icon_url: appIcon.type === 'image' ? appIcon.url : undefined,
      },
      description,
    }
    await updatePipeline(request, {
      onSuccess: () => {
        invalidCustomizedTemplateList()
        onClose()
      },
    })
  }, [name, appIcon, description, pipeline.id, updatePipeline, invalidCustomizedTemplateList, onClose])

  return (
    <div className="relative flex flex-col">
      {/* Header */}
      <div className="pt-6 pr-14 pb-3 pl-6">
        <span className="title-2xl-semi-bold text-text-primary">
          {t('editPipelineInfo', { ns: 'datasetPipeline' })}
        </span>
      </div>
      <button
        type="button"
        className="absolute top-5 right-5 flex size-8 items-center justify-center"
        onClick={onClose}
      >
        <RiCloseLine className="size-5 text-text-tertiary" />
      </button>
      {/* Form */}
      <div className="flex flex-col gap-y-5 px-6 py-3">
        <div className="flex items-end gap-x-3 self-stretch">
          <div className="flex grow flex-col gap-y-1 pb-1">
            <label className="flex h-6 items-center system-sm-medium text-text-secondary">
              {t('pipelineNameAndIcon', { ns: 'datasetPipeline' })}
            </label>
            <Input
              onChange={handleAppNameChange}
              value={name}
              placeholder={t('knowledgeNameAndIconPlaceholder', { ns: 'datasetPipeline' })}
            />
          </div>
          <AppIcon
            size="xxl"
            onClick={handleOpenAppIconPicker}
            className="cursor-pointer"
            iconType={appIcon.type}
            icon={appIcon.type === 'image' ? appIcon.fileId : appIcon.icon}
            background={appIcon.type === 'image' ? undefined : appIcon.background}
            imageUrl={appIcon.type === 'image' ? appIcon.url : undefined}
            showEditIcon
          />
        </div>
        <div className="flex flex-col gap-y-1">
          <label className="flex h-6 items-center system-sm-medium text-text-secondary">
            {t('knowledgeDescription', { ns: 'datasetPipeline' })}
          </label>
          <Textarea
            aria-label={t('knowledgeDescription', { ns: 'datasetPipeline' })}
            onValueChange={handleDescriptionChange}
            value={description}
            placeholder={t('knowledgeDescriptionPlaceholder', { ns: 'datasetPipeline' })}
          />
        </div>
      </div>
      {/* Actions */}
      <div className="flex items-center justify-end gap-x-2 p-6 pt-5">
        <Button
          variant="secondary"
          onClick={onClose}
        >
          {t('operation.cancel', { ns: 'common' })}
        </Button>
        <Button
          variant="primary"
          onClick={handleSave}
        >
          {t('operation.save', { ns: 'common' })}
        </Button>
      </div>
      {showAppIconPicker && (
        <AppIconPicker
          open={showAppIconPicker}
          initialEmoji={appIcon.type === 'emoji'
            ? { icon: appIcon.icon, background: appIcon.background }
            : undefined}
          onOpenChange={setShowAppIconPicker}
          onSelect={handleSelectAppIcon}
        />
      )}
    </div>
  )
}

export default React.memo(EditPipelineInfo)