'use client'
import type { FC } from 'react'
import type { RetrievalConfig } from '@/types/app'
import { cn } from '@langgenius/dify-ui/cn'
import { RadioGroup } from '@langgenius/dify-ui/radio'
import { Switch } from '@langgenius/dify-ui/switch'
import { toast } from '@langgenius/dify-ui/toast'
import * as React from 'react'
import { useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import WeightedScore from '@/app/components/app/configuration/dataset-config/params-config/weighted-score'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
import { Infotip } from '@/app/components/base/infotip'
import ScoreThresholdItem from '@/app/components/base/param-item/score-threshold-item'
import TopKItem from '@/app/components/base/param-item/top-k-item'
import RadioCard from '@/app/components/base/radio-card'
import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
import {
  useCurrentProviderAndModel,
  useModelListAndDefaultModel,
} from '@/app/components/header/account-setting/model-provider-page/hooks'
import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
import { DEFAULT_WEIGHTED_SCORE, RerankingModeEnum, WeightedScoreEnum } from '@/models/datasets'
import { RETRIEVE_METHOD } from '@/types/app'
import ProgressIndicator from '../../create/assets/progress-indicator.svg'
import Reranking from '../../create/assets/rerank.svg'

type Props = Readonly<{
  type: RETRIEVE_METHOD
  value: RetrievalConfig
  showMultiModalTip?: boolean
  disabled?: boolean
  onChange: (value: RetrievalConfig) => void
}>

const RetrievalParamConfig: FC<Props> = ({
  type,
  value,
  showMultiModalTip = false,
  disabled = false,
  onChange,
}) => {
  const { t } = useTranslation()
  const canToggleRerankModalEnable = type !== RETRIEVE_METHOD.hybrid
  const isEconomical = type === RETRIEVE_METHOD.keywordSearch
  const isHybridSearch = type === RETRIEVE_METHOD.hybrid
  const { modelList: rerankModelList } = useModelListAndDefaultModel(ModelTypeEnum.rerank)

  const { currentModel } = useCurrentProviderAndModel(rerankModelList, {
    provider: value.reranking_model?.reranking_provider_name ?? '',
    model: value.reranking_model?.reranking_model_name ?? '',
  })

  const handleToggleRerankEnable = useCallback(
    (enable: boolean) => {
      if (disabled) return
      if (enable && !currentModel)
        toast.error(t(($) => $['errorMsg.rerankModelRequired'], { ns: 'workflow' }))
      onChange({
        ...value,
        reranking_enable: enable,
      })
    },
    [currentModel, disabled, onChange, t, value],
  )

  const rerankModel = useMemo(() => {
    return {
      provider_name: value.reranking_model.reranking_provider_name,
      model_name: value.reranking_model.reranking_model_name,
    }
  }, [value.reranking_model])

  const handleChangeRerankMode = (v: RerankingModeEnum) => {
    if (disabled) return
    if (v === value.reranking_mode) return

    const result = {
      ...value,
      reranking_mode: v,
    }

    if (!result.weights && v === RerankingModeEnum.WeightedScore) {
      result.weights = {
        weight_type: WeightedScoreEnum.Customized,
        vector_setting: {
          vector_weight: DEFAULT_WEIGHTED_SCORE.other.semantic,
          embedding_provider_name: '',
          embedding_model_name: '',
        },
        keyword_setting: {
          keyword_weight: DEFAULT_WEIGHTED_SCORE.other.keyword,
        },
      }
    }
    if (v === RerankingModeEnum.RerankingModel && !currentModel)
      toast.error(t(($) => $['errorMsg.rerankModelRequired'], { ns: 'workflow' }))
    onChange(result)
  }

  const rerankingModeOptions = [
    {
      value: RerankingModeEnum.WeightedScore,
      label: t(($) => $['weightedScore.title'], { ns: 'dataset' }),
      tips: t(($) => $['weightedScore.description'], { ns: 'dataset' }),
    },
    {
      value: RerankingModeEnum.RerankingModel,
      label: t(($) => $['modelProvider.rerankModel.key'], { ns: 'common' }),
      tips: t(($) => $['modelProvider.rerankModel.tip'], { ns: 'common' }),
    },
  ]

  return (
    <div>
      {!isEconomical && !isHybridSearch && (
        <div>
          <div className="mb-2 flex items-center space-x-2">
            {canToggleRerankModalEnable && (
              <Switch
                size="md"
                checked={value.reranking_enable}
                onCheckedChange={handleToggleRerankEnable}
                disabled={disabled}
              />
            )}
            <div className="flex items-center">
              <span className="mr-0.5 system-sm-semibold text-text-secondary">
                {t(($) => $['modelProvider.rerankModel.key'], { ns: 'common' })}
              </span>
              <Infotip
                aria-label={t(($) => $['modelProvider.rerankModel.tip'], { ns: 'common' })}
                popupClassName="w-[200px]"
              >
                {t(($) => $['modelProvider.rerankModel.tip'], { ns: 'common' })}
              </Infotip>
            </div>
          </div>
          {value.reranking_enable && (
            <>
              <ModelSelector
                defaultModel={
                  rerankModel && {
                    provider: rerankModel.provider_name,
                    model: rerankModel.model_name,
                  }
                }
                modelList={rerankModelList}
                onSelect={(v) => {
                  if (disabled) return
                  onChange({
                    ...value,
                    reranking_model: {
                      reranking_provider_name: v.provider,
                      reranking_model_name: v.model,
                    },
                  })
                }}
                readonly={disabled}
              />
              {showMultiModalTip && (
                <div className="mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs backdrop-blur-[5px]">
                  <div className="absolute inset-0 bg-dataset-warning-message-bg opacity-40" />
                  <div className="p-1">
                    <AlertTriangle className="size-4 text-text-warning-secondary" />
                  </div>
                  <span className="system-xs-medium text-text-primary">
                    {t(($) => $['form.retrievalSetting.multiModalTip'], { ns: 'datasetSettings' })}
                  </span>
                </div>
              )}
            </>
          )}
        </div>
      )}
      {!isHybridSearch && (
        <div className={cn(!isEconomical && 'mt-4', 'space-between flex space-x-4')}>
          <TopKItem
            className="grow"
            value={value.top_k}
            onChange={(_key, v) => {
              if (disabled) return
              onChange({
                ...value,
                top_k: v,
              })
            }}
            enable={true}
            disabled={disabled}
          />
          {!isEconomical &&
            !(value.search_method === RETRIEVE_METHOD.fullText && !value.reranking_enable) && (
              <ScoreThresholdItem
                className="grow"
                value={value.score_threshold}
                onChange={(_key, v) => {
                  if (disabled) return
                  onChange({
                    ...value,
                    score_threshold: v,
                  })
                }}
                enable={value.score_threshold_enabled}
                hasSwitch={true}
                disabled={disabled}
                onSwitchChange={(_key, v) => {
                  if (disabled) return
                  onChange({
                    ...value,
                    score_threshold_enabled: v,
                  })
                }}
              />
            )}
        </div>
      )}
      {isHybridSearch && (
        <>
          <RadioGroup<RerankingModeEnum>
            aria-label={t(($) => $['modelProvider.rerankModel.key'], { ns: 'common' })}
            value={value.reranking_mode}
            onValueChange={handleChangeRerankMode}
            className="mb-4 flex gap-2"
          >
            {rerankingModeOptions.map((option) => (
              <RadioCard<RerankingModeEnum>
                key={option.value}
                value={option.value}
                icon={
                  <img
                    src={
                      option.value === RerankingModeEnum.WeightedScore
                        ? ProgressIndicator.src
                        : Reranking.src
                    }
                    alt=""
                  />
                }
                title={option.label}
                description={option.tips}
                className="flex-1"
              />
            ))}
          </RadioGroup>
          {value.reranking_mode === RerankingModeEnum.WeightedScore && (
            <WeightedScore
              value={{
                value: [
                  value.weights!.vector_setting.vector_weight,
                  value.weights!.keyword_setting.keyword_weight,
                ],
              }}
              onChange={(v) => {
                if (disabled) return
                onChange({
                  ...value,
                  weights: {
                    ...value.weights!,
                    vector_setting: {
                      ...value.weights!.vector_setting,
                      vector_weight: v.value[0]!,
                    },
                    keyword_setting: {
                      ...value.weights!.keyword_setting,
                      keyword_weight: v.value[1]!,
                    },
                  },
                })
              }}
            />
          )}
          {value.reranking_mode !== RerankingModeEnum.WeightedScore && (
            <>
              <ModelSelector
                defaultModel={
                  rerankModel && {
                    provider: rerankModel.provider_name,
                    model: rerankModel.model_name,
                  }
                }
                modelList={rerankModelList}
                onSelect={(v) => {
                  if (disabled) return
                  onChange({
                    ...value,
                    reranking_model: {
                      reranking_provider_name: v.provider,
                      reranking_model_name: v.model,
                    },
                  })
                }}
                readonly={disabled}
              />
              {showMultiModalTip && (
                <div className="mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs backdrop-blur-[5px]">
                  <div className="absolute inset-0 bg-dataset-warning-message-bg opacity-40" />
                  <div className="p-1">
                    <AlertTriangle className="size-4 text-text-warning-secondary" />
                  </div>
                  <span className="system-xs-medium text-text-primary">
                    {t(($) => $['form.retrievalSetting.multiModalTip'], { ns: 'datasetSettings' })}
                  </span>
                </div>
              )}
            </>
          )}
          <div className={cn(!isEconomical && 'mt-4', 'space-between flex space-x-6')}>
            <TopKItem
              className="grow"
              value={value.top_k}
              onChange={(_key, v) => {
                if (disabled) return
                onChange({
                  ...value,
                  top_k: v,
                })
              }}
              enable={true}
              disabled={disabled}
            />
            <ScoreThresholdItem
              className="grow"
              value={value.score_threshold}
              onChange={(_key, v) => {
                if (disabled) return
                onChange({
                  ...value,
                  score_threshold: v,
                })
              }}
              enable={value.score_threshold_enabled}
              hasSwitch={true}
              disabled={disabled}
              onSwitchChange={(_key, v) => {
                if (disabled) return
                onChange({
                  ...value,
                  score_threshold_enabled: v,
                })
              }}
            />
          </div>
        </>
      )}
    </div>
  )
}
export default React.memo(RetrievalParamConfig)