'use client'

import { FileX, ExternalLink, FileArchive, FileCode, Database } from 'lucide-react'
import { cn } from '@/lib/utils'

interface BinaryPreviewProps {
  fileName: string
  onOpenExternal?: () => void
}

/**
 * Binary file preview — shows a friendly message with file type info
 * and an "Open with default application" button.
 */
export function BinaryPreview({ fileName, onOpenExternal }: BinaryPreviewProps) {
  const ext = fileName.split('.').pop()?.toLowerCase() || ''

  // Determine icon based on extension
  const getIcon = () => {
    if (['zip', 'tar', 'gz', 'tgz', 'bz2', 'rar', '7z'].includes(ext)) {
      return <FileArchive size={40} className="text-amber" />
    }
    if (['db', 'sqlite', 'sqlite3'].includes(ext)) {
      return <Database size={40} className="text-coral" />
    }
    if (['woff', 'woff2', 'ttf', 'otf', 'eot'].includes(ext)) {
      return <FileCode size={40} className="text-indigo" />
    }
    return <FileX size={40} className="text-muted" />
  }

  const getDescription = () => {
    if (['zip', 'tar', 'gz', 'tgz', 'bz2', 'rar', '7z'].includes(ext)) {
      return 'Archive file'
    }
    if (['doc', 'docx'].includes(ext)) return 'Microsoft Word document'
    if (['xls', 'xlsx'].includes(ext)) return 'Microsoft Excel spreadsheet'
    if (['ppt', 'pptx'].includes(ext)) return 'Microsoft PowerPoint presentation'
    if (['db', 'sqlite', 'sqlite3'].includes(ext)) return 'Database file'
    if (['woff', 'woff2', 'ttf', 'otf', 'eot'].includes(ext)) return 'Font file'
    return 'Binary file'
  }

  return (
    <div className="flex flex-col items-center justify-center h-full gap-4 p-8 bg-surface-2">
      <div className="w-20 h-20 rounded-2xl bg-surface-active flex items-center justify-center">
        {getIcon()}
      </div>
      <div className="text-center">
        <p className="text-[14px] font-medium text-primary mb-1">{getDescription()}</p>
        <p className="text-[12px] text-muted">{fileName}</p>
      </div>
      <p className="text-[12px] text-tertiary text-center max-w-[280px]">
        This file type cannot be previewed. Open it with your default application.
      </p>
      {onOpenExternal && (
        <button
          onClick={onOpenExternal}
          className={cn(
            'flex items-center gap-2 px-4 py-2 rounded-lg text-[13px] font-medium',
            'bg-surface-active text-primary hover:bg-surface-hover transition-colors',
            'border border-subtle'
          )}
        >
          <ExternalLink size={14} />
          <span>Open with default app</span>
        </button>
      )}
    </div>
  )
}