solution-erp/fe-admin/src/components/pe/AttachmentPreviewDialog.tsx

import { useEffect, useState } from 'react'
import { Loader2, AlertTriangle } from 'lucide-react'
import { Dialog } from '@/components/ui/Dialog'
import { Button } from '@/components/ui/Button'
import { api } from '@/lib/api'

/** Extensions hỗ trợ preview inline (PDF native + images native). Word/Excel
 *  KHÔNG support — user phải download mở local Office. */
const PREVIEWABLE_EXT = ['pdf', 'png', 'jpg', 'jpeg', 'webp', 'gif']

export function isPreviewable(fileName: string): boolean {
  const ext = fileName.toLowerCase().split('.').pop() ?? ''
  return PREVIEWABLE_EXT.includes(ext)
}

type Props = {
  open: boolean
  evaluationId: string
  attachmentId: string
  fileName: string
  onClose: () => void
}

/** Preview file inline qua BE endpoint `/view` (Content-Disposition: inline).
 *  Fetch as blob → object URL → iframe (PDF) hoặc img (image).
 *  Bearer auth qua axios api client (KHÔNG thể set iframe src trực tiếp vì
 *  iframe không inherit Authorization header). */
export function AttachmentPreviewDialog({
  open, evaluationId, attachmentId, fileName, onClose,
}: Props) {
  const [blobUrl, setBlobUrl] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const ext = fileName.toLowerCase().split('.').pop() ?? ''
  const isImage = ['png', 'jpg', 'jpeg', 'webp', 'gif'].includes(ext)

  useEffect(() => {
    if (!open) return
    let cancelled = false
    let currentUrl: string | null = null
    setLoading(true)
    setError(null)

    api.get(`/purchase-evaluations/${evaluationId}/attachments/${attachmentId}/view`, {
      responseType: 'blob',
    })
      .then(res => {
        if (cancelled) return
        currentUrl = window.URL.createObjectURL(res.data as Blob)
        setBlobUrl(currentUrl)
        setLoading(false)
      })
      .catch(err => {
        if (cancelled) return
        setError(err?.message ?? 'Lỗi tải file')
        setLoading(false)
      })

    return () => {
      cancelled = true
      if (currentUrl) window.URL.revokeObjectURL(currentUrl)
      setBlobUrl(null)
    }
  }, [open, evaluationId, attachmentId])

  return (
    <Dialog
      open={open}
      onClose={onClose}
      title={`Xem file: ${fileName}`}
      size="lg"
      footer={<Button variant="outline" onClick={onClose}>Đóng</Button>}
    >
      <div className="h-[70vh] w-full bg-slate-100">
        {loading && (
          <div className="flex h-full items-center justify-center gap-2 text-slate-500">
            <Loader2 className="h-5 w-5 animate-spin" />
            <span>Đang tải file…</span>
          </div>
        )}
        {error && !loading && (
          <div className="flex h-full flex-col items-center justify-center gap-2 px-4 text-center text-red-600">
            <AlertTriangle className="h-8 w-8" />
            <div className="font-medium">Không tải được file</div>
            <div className="text-xs text-red-500">{error}</div>
          </div>
        )}
        {blobUrl && !loading && !error && (
          isImage
            ? <img src={blobUrl} alt={fileName} className="mx-auto h-full object-contain" />
            : <iframe src={blobUrl} title={fileName} className="h-full w-full border-0" />
        )}
      </div>
    </Dialog>
  )
}