'use client'
import type { FC } from 'react'
import {
  AlertDialog,
  AlertDialogActions,
  AlertDialogCancelButton,
  AlertDialogConfirmButton,
  AlertDialogContent,
  AlertDialogTitle,
} from '@langgenius/dify-ui/alert-dialog'
import {
  Drawer,
  DrawerBackdrop,
  DrawerCloseButton,
  DrawerContent,
  DrawerPopup,
  DrawerPortal,
  DrawerTitle,
  DrawerViewport,
} from '@langgenius/dify-ui/drawer'
import { toast } from '@langgenius/dify-ui/toast'
import * as React from 'react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { MessageCheckRemove } from '@/app/components/base/icons/src/vender/line/communication'
import AnnotationFull from '@/app/components/billing/annotation-full'
import { useProviderContext } from '@/context/provider-context'
import useTimestamp from '@/hooks/use-timestamp'
import { addAnnotation, editAnnotation } from '@/service/annotation'
import EditItem, { EditItemType } from './edit-item'

type Props = Readonly<{
  isShow: boolean
  onHide: () => void
  appId: string
  messageId?: string
  annotationId?: string
  query: string
  answer: string
  onEdited: (editedQuery: string, editedAnswer: string) => void
  onAdded: (
    annotationId: string,
    authorName: string,
    editedQuery: string,
    editedAnswer: string,
  ) => void
  createdAt?: number
  onRemove: () => void
  onlyEditResponse?: boolean
}>

const EditAnnotationModal: FC<Props> = ({
  isShow,
  onHide,
  query,
  answer,
  onEdited,
  onAdded,
  appId,
  messageId,
  annotationId,
  createdAt,
  onRemove,
  onlyEditResponse,
}) => {
  const { t } = useTranslation()
  const { formatTime } = useTimestamp()
  const { plan, enableBilling } = useProviderContext()
  const isAdd = !annotationId
  const isAnnotationFull =
    enableBilling && plan.usage.annotatedResponse >= plan.total.annotatedResponse
  const handleSave = async (type: EditItemType, editedContent: string) => {
    let postQuery = query
    let postAnswer = answer
    if (type === EditItemType.Query) postQuery = editedContent
    else postAnswer = editedContent
    try {
      if (!isAdd) {
        await editAnnotation(appId, annotationId, {
          message_id: messageId,
          question: postQuery,
          answer: postAnswer,
        })
        onEdited(postQuery, postAnswer)
      } else {
        const res = await addAnnotation(appId, {
          question: postQuery,
          answer: postAnswer,
          message_id: messageId,
        })
        onAdded(res.id, res.account?.name ?? '', postQuery, postAnswer)
      }

      toast.success(t(($) => $['api.actionSuccess'], { ns: 'common' }) as string)
    } catch (error) {
      const fallbackMessage = t(($) => $['api.actionFailed'], { ns: 'common' }) as string
      const message = error instanceof Error && error.message ? error.message : fallbackMessage
      toast.error(message)
      // Re-throw to preserve edit mode behavior for UI components
      throw error
    }
  }
  const [showModal, setShowModal] = useState(false)
  if (!isShow) return null

  return (
    <div>
      <Drawer
        open
        modal
        disablePointerDismissal
        swipeDirection="right"
        onOpenChange={(open) => {
          if (!open) onHide()
        }}
      >
        <DrawerPortal>
          <DrawerBackdrop />
          <DrawerViewport>
            <DrawerPopup className="data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-120 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-xl data-[swipe-direction=right]:border-r-[0.5px] data-[swipe-direction=right]:border-divider-subtle">
              <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
                <div className="shrink-0 border-b border-divider-subtle py-4">
                  <div className="flex h-6 items-center justify-between pr-5 pl-6">
                    <DrawerTitle className="min-w-0 truncate system-xl-semibold text-text-primary">
                      {t(($) => $['editModal.title'], { ns: 'appAnnotation' })}
                    </DrawerTitle>
                    <DrawerCloseButton
                      aria-label={t(($) => $['operation.close'], { ns: 'common' })}
                      className="size-6 rounded-md"
                    />
                  </div>
                </div>
                <div className="min-h-0 flex-1 overflow-y-auto">
                  <div className="space-y-6 p-6 pb-4">
                    <EditItem
                      type={EditItemType.Query}
                      content={query}
                      readonly={(isAdd && isAnnotationFull) || onlyEditResponse}
                      onSave={(editedContent) => handleSave(EditItemType.Query, editedContent)}
                    />
                    <EditItem
                      type={EditItemType.Answer}
                      content={answer}
                      readonly={isAdd && isAnnotationFull}
                      onSave={(editedContent) => handleSave(EditItemType.Answer, editedContent)}
                    />
                    <AlertDialog
                      open={showModal}
                      onOpenChange={(open) => !open && setShowModal(false)}
                    >
                      <AlertDialogContent>
                        <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
                          <AlertDialogTitle
                            title={t(($) => $['feature.annotation.removeConfirm'], {
                              ns: 'appDebug',
                            })}
                            className="w-full truncate title-2xl-semi-bold text-text-primary"
                          >
                            {t(($) => $['feature.annotation.removeConfirm'], { ns: 'appDebug' })}
                          </AlertDialogTitle>
                        </div>
                        <AlertDialogActions>
                          <AlertDialogCancelButton>
                            {t(($) => $['operation.cancel'], { ns: 'common' })}
                          </AlertDialogCancelButton>
                          <AlertDialogConfirmButton
                            tone="destructive"
                            onClick={() => {
                              onRemove()
                              setShowModal(false)
                              onHide()
                            }}
                          >
                            {t(($) => $['operation.confirm'], { ns: 'common' })}
                          </AlertDialogConfirmButton>
                        </AlertDialogActions>
                      </AlertDialogContent>
                    </AlertDialog>
                  </div>
                </div>
                <div className="shrink-0">
                  {isAnnotationFull && (
                    <div className="mt-6 mb-4 px-6">
                      <AnnotationFull />
                    </div>
                  )}

                  {annotationId ? (
                    <div className="flex h-16 items-center justify-between rounded-b-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
                      <div
                        className="flex cursor-pointer items-center space-x-2 pl-3"
                        onClick={() => setShowModal(true)}
                      >
                        <MessageCheckRemove />
                        <div>
                          {t(($) => $['editModal.removeThisCache'], { ns: 'appAnnotation' })}
                        </div>
                      </div>
                      {!!createdAt && (
                        <div>
                          {t(($) => $['editModal.createdAt'], { ns: 'appAnnotation' })}
                          &nbsp;
                          {formatTime(
                            createdAt,
                            t(($) => $.dateTimeFormat, { ns: 'appLog' }) as string,
                          )}
                        </div>
                      )}
                    </div>
                  ) : undefined}
                </div>
              </DrawerContent>
            </DrawerPopup>
          </DrawerViewport>
        </DrawerPortal>
      </Drawer>
    </div>
  )
}
export default React.memo(EditAnnotationModal)
