import React from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/client/components/ui/dialog';
import { Button } from '@/client/components/ui/button';
import { Download, X, File as FileIcon, Image as ImageIcon } from 'lucide-react';
import { cn } from '@/client/lib/utils';

export interface FilePreviewDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  file?: {
    id: number;
    name: string;
    type: string;
    fullUrl: string;
    size?: number;
  };
}

export const FilePreviewDialog: React.FC<FilePreviewDialogProps> = ({
  open,
  onOpenChange,
  file,
}) => {
  if (!file) return null;

  const getFileIcon = (fileType: string) => {
    if (fileType.startsWith('image/')) {
      return <ImageIcon className="h-16 w-16 text-gray-400" />;
    }
    if (fileType.startsWith('video/')) {
      return <FileIcon className="h-16 w-16 text-blue-500" />;
    }
    if (fileType.startsWith('audio/')) {
      return <FileIcon className="h-16 w-16 text-green-500" />;
    }
    if (fileType.includes('pdf')) {
      return <FileIcon className="h-16 w-16 text-red-500" />;
    }
    if (fileType.includes('text') || fileType.includes('word') || fileType.includes('document')) {
      return <FileIcon className="h-16 w-16 text-blue-600" />;
    }
    return <FileIcon className="h-16 w-16 text-gray-400" />;
  };

  const formatFileSize = (bytes?: number) => {
    if (!bytes) return '未知大小';
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  };

  const handleDownload = () => {
    window.open(file.fullUrl, '_blank');
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
        <DialogHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
          <DialogTitle className="text-lg">文件预览 - {file.name}</DialogTitle>
          <Button
            variant="ghost"
            size="icon"
            onClick={() => onOpenChange(false)}
            className="h-8 w-8"
          >
            <X className="h-4 w-4" />
          </Button>
        </DialogHeader>

        <div className="flex-1 overflow-auto">
          <div className="flex flex-col items-center space-y-4">
            {file.type.startsWith('image/') ? (
              <div className="w-full flex justify-center">
                <img
                  src={file.fullUrl}
                  alt={file.name}
                  className="max-w-full max-h-[60vh] object-contain rounded-lg border"
                />
              </div>
            ) : (
              <div className="flex flex-col items-center justify-center p-8 border rounded-lg bg-gray-50 min-h-[300px] w-full">
                {getFileIcon(file.type)}
                <p className="text-lg font-medium mt-4 text-gray-700">{file.name}</p>
                <p className="text-sm text-gray-500 mt-2">
                  {file.type} • {formatFileSize(file.size)}
                </p>
                <p className="text-sm text-gray-400 mt-4 text-center">
                  此文件类型不支持在线预览，请下载后查看
                </p>
              </div>
            )}
          </div>
        </div>

        <div className="flex justify-between items-center pt-4 border-t">
          <div className="text-sm text-gray-500">
            {file.type} • {formatFileSize(file.size)}
          </div>
          <Button onClick={handleDownload} className="gap-2">
            <Download className="h-4 w-4" />
            下载文件
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default FilePreviewDialog;