// SPDX-FileCopyrightText: 2025 Weibo, Inc.
//
// SPDX-License-Identifier: Apache-2.0

'use client'

import React, { useCallback, useState } from 'react'
import { Download, X, ZoomIn, ZoomOut, RotateCw, Loader2, Eye } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
  formatFileSize,
  getFileIcon,
  downloadAttachment,
  isImageExtension,
  isHtmlExtension,
} from '@/apis/attachments'
import type { Attachment } from '@/types/api'
import { useAttachmentImage } from '@/hooks/useAttachmentImage'
import { FilePreviewDialog } from '@/components/common/FilePreview'
import { useTranslation } from '@/hooks/useTranslation'

interface AttachmentPreviewProps {
  /** Attachment data */
  attachment: Attachment
  /** Whether to show download button */
  showDownload?: boolean
  /** Compact mode (smaller size) */
  compact?: boolean
  /** Share token for public access (no login required) */
  shareToken?: string
}

/**
 * Full screen image preview modal component
 */
function ImageLightbox({
  src,
  alt,
  onClose,
  onDownload,
}: {
  src: string
  alt: string
  onClose: () => void
  onDownload: () => void
}) {
  const { t } = useTranslation('common')
  const [scale, setScale] = useState(1)
  const [rotation, setRotation] = useState(0)

  const handleZoomIn = useCallback(() => {
    setScale(prev => Math.min(prev + 0.25, 3))
  }, [])

  const handleZoomOut = useCallback(() => {
    setScale(prev => Math.max(prev - 0.25, 0.5))
  }, [])

  const handleRotate = useCallback(() => {
    setRotation(prev => (prev + 90) % 360)
  }, [])

  const handleBackdropClick = useCallback(
    (e: React.MouseEvent) => {
      if (e.target === e.currentTarget) {
        onClose()
      }
    },
    [onClose]
  )

  // Handle keyboard events
  React.useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      switch (e.key) {
        case 'Escape':
          onClose()
          break
        case '+':
        case '=':
          handleZoomIn()
          break
        case '-':
          handleZoomOut()
          break
        case 'r':
        case 'R':
          handleRotate()
          break
      }
    }

    window.addEventListener('keydown', handleKeyDown)
    // Prevent body scroll when lightbox is open
    document.body.style.overflow = 'hidden'

    return () => {
      window.removeEventListener('keydown', handleKeyDown)
      document.body.style.overflow = ''
    }
  }, [onClose, handleZoomIn, handleZoomOut, handleRotate])

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
      onClick={handleBackdropClick}
    >
      {/* Toolbar */}
      <div className="absolute top-4 right-4 flex items-center gap-2 z-10">
        <Button
          variant="ghost"
          size="icon"
          onClick={handleZoomOut}
          className="h-10 w-10 bg-black/50 hover:bg-black/70 text-white"
          title={`${t('actions.zoom_out')} (-)`}
        >
          <ZoomOut className="h-5 w-5" />
        </Button>
        <span className="text-white text-sm bg-black/50 px-2 py-1 rounded">
          {Math.round(scale * 100)}%
        </span>
        <Button
          variant="ghost"
          size="icon"
          onClick={handleZoomIn}
          className="h-10 w-10 bg-black/50 hover:bg-black/70 text-white"
          title={`${t('actions.zoom_in')} (+)`}
        >
          <ZoomIn className="h-5 w-5" />
        </Button>
        <Button
          variant="ghost"
          size="icon"
          onClick={handleRotate}
          className="h-10 w-10 bg-black/50 hover:bg-black/70 text-white"
          title={`${t('actions.rotate')} (R)`}
        >
          <RotateCw className="h-5 w-5" />
        </Button>
        <Button
          variant="ghost"
          size="icon"
          onClick={onDownload}
          className="h-10 w-10 bg-black/50 hover:bg-black/70 text-white"
          title={t('actions.download')}
        >
          <Download className="h-5 w-5" />
        </Button>
        <Button
          variant="ghost"
          size="icon"
          onClick={onClose}
          className="h-10 w-10 bg-black/50 hover:bg-black/70 text-white"
          title={`${t('actions.close')} (Esc)`}
        >
          <X className="h-5 w-5" />
        </Button>
      </div>

      {/* Image container */}
      <div className="max-w-[90vw] max-h-[90vh] overflow-auto">
        <img
          src={src}
          alt={alt}
          className="transition-transform duration-200 ease-out"
          style={{
            transform: `scale(${scale}) rotate(${rotation}deg)`,
            maxWidth: scale === 1 ? '90vw' : 'none',
            maxHeight: scale === 1 ? '90vh' : 'none',
          }}
          draggable={false}
        />
      </div>

      {/* Filename at bottom */}
      <div className="absolute bottom-4 left-1/2 -translate-x-1/2 text-white text-sm bg-black/50 px-4 py-2 rounded-lg">
        {alt}
      </div>
    </div>
  )
}

export default function AttachmentPreview({
  attachment,
  showDownload = true,
  compact = false,
  shareToken,
}: AttachmentPreviewProps) {
  const { t } = useTranslation('common')
  const [showLightbox, setShowLightbox] = useState(false)
  const [showPreviewDialog, setShowPreviewDialog] = useState(false)

  const handleDownload = useCallback(async () => {
    try {
      await downloadAttachment(attachment.id, attachment.filename, shareToken)
    } catch (err) {
      console.error('Failed to download attachment:', err)
    }
  }, [attachment.id, attachment.filename, shareToken])

  const handleImageClick = useCallback(() => {
    setShowLightbox(true)
  }, [])

  const handleCloseLightbox = useCallback(() => {
    setShowLightbox(false)
  }, [])

  const handlePreviewClick = useCallback(() => {
    setShowPreviewDialog(true)
  }, [])

  const handleClosePreviewDialog = useCallback(() => {
    setShowPreviewDialog(false)
  }, [])

  const icon = getFileIcon(attachment.file_extension)
  const isImage = isImageExtension(attachment.file_extension)
  const isHtml = isHtmlExtension(attachment.file_extension)

  // Use authenticated image fetching
  const {
    blobUrl: imageUrl,
    isLoading: imageLoading,
    error: imageError,
  } = useAttachmentImage(attachment.id, isImage, shareToken)

  // Render image preview for image types
  if (isImage && !imageError) {
    // Show loading state while fetching image
    if (imageLoading) {
      if (compact) {
        return (
          <div className="inline-flex items-center justify-center h-12 w-12 rounded-md border border-border bg-muted">
            <Loader2 className="h-4 w-4 animate-spin text-text-muted" />
          </div>
        )
      }
      return (
        <div className="flex items-center justify-center max-w-[300px] max-h-[200px] min-h-[100px] rounded-lg border border-border bg-muted mb-2">
          <Loader2 className="h-6 w-6 animate-spin text-text-muted" />
        </div>
      )
    }

    // Show image preview once loaded
    if (imageUrl) {
      if (compact) {
        return (
          <>
            <div
              className="inline-block cursor-pointer rounded-md overflow-hidden border border-border hover:border-primary transition-colors"
              onClick={handleImageClick}
              title={attachment.filename}
            >
              <img src={imageUrl} alt={attachment.filename} className="h-12 w-12 object-cover" />
            </div>
            {showLightbox && (
              <ImageLightbox
                src={imageUrl}
                alt={attachment.filename}
                onClose={handleCloseLightbox}
                onDownload={handleDownload}
              />
            )}
          </>
        )
      }

      return (
        <>
          <div className="relative group mb-2 max-w-full">
            <div
              className="cursor-pointer rounded-lg overflow-hidden border border-border hover:border-primary transition-colors"
              onClick={handleImageClick}
            >
              <img
                src={imageUrl}
                alt={attachment.filename}
                className="max-w-full max-h-[200px] object-contain bg-muted"
              />
            </div>
            {/* Overlay with filename and actions */}
            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-2 opacity-0 group-hover:opacity-100 transition-opacity">
              <div className="flex items-center justify-between gap-2">
                <span
                  className="text-white text-xs truncate flex-1 min-w-0"
                  title={attachment.filename}
                >
                  {attachment.filename}
                </span>
                {showDownload && (
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    onClick={e => {
                      e.stopPropagation()
                      handleDownload()
                    }}
                    className="h-6 w-6 text-white hover:bg-white/20 flex-shrink-0"
                    title={t('actions.download')}
                  >
                    <Download className="h-4 w-4" />
                  </Button>
                )}
              </div>
            </div>
          </div>
          {showLightbox && (
            <ImageLightbox
              src={imageUrl}
              alt={attachment.filename}
              onClose={handleCloseLightbox}
              onDownload={handleDownload}
            />
          )}
        </>
      )
    }
  }

  // HTML files - show preview button
  if (isHtml) {
    if (compact) {
      return (
        <>
          <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-muted rounded-md border border-border text-xs">
            <span>{icon}</span>
            <span className="truncate max-w-[120px]" title={attachment.filename}>
              {attachment.filename}
            </span>
            <Button
              type="button"
              variant="ghost"
              size="icon"
              onClick={handlePreviewClick}
              className="h-4 w-4 p-0 hover:bg-transparent"
              title={t('actions.preview')}
            >
              <Eye className="h-3 w-3 text-text-muted" />
            </Button>
            {showDownload && (
              <Button
                type="button"
                variant="ghost"
                size="icon"
                onClick={handleDownload}
                className="h-4 w-4 p-0 hover:bg-transparent"
                title={t('actions.download')}
              >
                <Download className="h-3 w-3 text-text-muted" />
              </Button>
            )}
          </div>
          <FilePreviewDialog
            open={showPreviewDialog}
            onClose={handleClosePreviewDialog}
            attachmentId={attachment.id}
            filename={attachment.filename}
            mimeType={attachment.mime_type}
            fileSize={attachment.file_size}
            shareToken={shareToken}
            canShare={!shareToken}
          />
        </>
      )
    }

    return (
      <>
        <div className="flex items-center gap-3 p-3 bg-muted rounded-lg border border-border mb-2 max-w-full">
          <span className="text-2xl flex-shrink-0">{icon}</span>
          <div className="flex-1 min-w-0 overflow-hidden">
            <div className="font-medium text-sm truncate" title={attachment.filename}>
              {attachment.filename}
            </div>
            <div className="text-xs text-text-muted">
              {formatFileSize(attachment.file_size)}
              <button
                type="button"
                onClick={handlePreviewClick}
                className="ml-2 text-link hover:underline"
              >
                {t('attachment.click_to_preview')}
              </button>
              {showDownload && (
                <button
                  type="button"
                  onClick={handleDownload}
                  className="ml-2 text-link hover:underline"
                >
                  {t('actions.download')}
                </button>
              )}
            </div>
          </div>
        </div>
        <FilePreviewDialog
          open={showPreviewDialog}
          onClose={handleClosePreviewDialog}
          attachmentId={attachment.id}
          filename={attachment.filename}
          mimeType={attachment.mime_type}
          fileSize={attachment.file_size}
          shareToken={shareToken}
          canShare={!shareToken}
        />
      </>
    )
  }

  // Fallback to original file icon display for non-image types or image load errors
  if (compact) {
    return (
      <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-muted rounded-md border border-border text-xs">
        <span>{icon}</span>
        <span className="truncate max-w-[120px]" title={attachment.filename}>
          {attachment.filename}
        </span>
        {showDownload && (
          <Button
            type="button"
            variant="ghost"
            size="icon"
            onClick={handleDownload}
            className="h-4 w-4 p-0 hover:bg-transparent"
            title={t('actions.download')}
          >
            <Download className="h-3 w-3 text-text-muted" />
          </Button>
        )}
      </div>
    )
  }

  return (
    <div className="flex items-center gap-3 p-3 bg-muted rounded-lg border border-border mb-2 max-w-full">
      <span className="text-2xl flex-shrink-0">{icon}</span>
      <div className="flex-1 min-w-0 overflow-hidden">
        <div className="font-medium text-sm truncate" title={attachment.filename}>
          {attachment.filename}
        </div>
        <div className="text-xs text-text-muted">
          {formatFileSize(attachment.file_size)}
          {showDownload && (
            <button
              type="button"
              onClick={handleDownload}
              className="ml-2 text-link hover:underline"
            >
              {t('attachment.click_to_download')}
            </button>
          )}
        </div>
      </div>
    </div>
  )
}
