'use client'

import { useState } from 'react'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Eye, Download, FileText, Image as ImageIcon, Video, File } from 'lucide-react'

interface FilePreviewProps {
  fileName: string
  mimeType: string
  downloadUrl: string
}

function getPreviewType(mimeType: string): 'pdf' | 'image' | 'video' | 'unsupported' {
  if (mimeType === 'application/pdf') return 'pdf'
  if (mimeType.startsWith('image/')) return 'image'
  if (mimeType.startsWith('video/')) return 'video'
  return 'unsupported'
}

function getFileIcon(mimeType: string) {
  if (mimeType === 'application/pdf') return FileText
  if (mimeType.startsWith('image/')) return ImageIcon
  if (mimeType.startsWith('video/')) return Video
  return File
}

export function FilePreview({ fileName, mimeType, downloadUrl }: FilePreviewProps) {
  const [open, setOpen] = useState(false)
  const previewType = getPreviewType(mimeType)
  const Icon = getFileIcon(mimeType)
  const canPreview = previewType !== 'unsupported'

  if (!canPreview) {
    return (
      <Button variant="outline" size="sm" asChild>
        <a href={downloadUrl} target="_blank" rel="noopener noreferrer">
          <Download className="mr-2 h-4 w-4" />
          Download
        </a>
      </Button>
    )
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" size="sm">
          <Eye className="mr-2 h-4 w-4" />
          Preview
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-4xl max-h-[90vh]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 truncate">
            <Icon className="h-4 w-4 shrink-0" />
            {fileName}
          </DialogTitle>
        </DialogHeader>
        <div className="overflow-auto">
          {previewType === 'pdf' && (
            <iframe
              src={`${downloadUrl}#toolbar=0`}
              className="w-full h-[70vh] rounded-md"
              title={fileName}
            />
          )}
          {previewType === 'image' && (
            <img
              src={downloadUrl}
              alt={fileName}
              className="w-full h-auto max-h-[70vh] object-contain rounded-md"
            />
          )}
          {previewType === 'video' && (
            <video
              src={downloadUrl}
              controls
              className="w-full max-h-[70vh] rounded-md"
              preload="metadata"
            >
              Your browser does not support the video tag.
            </video>
          )}
        </div>
        <div className="flex justify-end">
          <Button variant="outline" size="sm" asChild>
            <a href={downloadUrl} target="_blank" rel="noopener noreferrer">
              <Download className="mr-2 h-4 w-4" />
              Download
            </a>
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}