"use client";

import { X, Download } from "lucide-react";

interface DocumentViewModalProps {
  isOpen: boolean;
  onClose: () => void;
  document: {
    name: string;
    label: string;
    downloadUrl: string;
    size?: number;
  } | null;
}

export function DocumentViewModal({ 
  isOpen, 
  onClose, 
  document 
}: DocumentViewModalProps) {
  if (!isOpen || !document) return null;

  const isImage = document.name?.match(/\.(jpg|jpeg|png)$/i);
  const isPdf = document.name?.match(/\.pdf$/i);

  const formatFileSize = (bytes?: number) => {
    if (!bytes && bytes !== 0) return '';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
      <div className="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] flex flex-col overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b bg-gray-50">
          <div className="flex-1 min-w-0">
            <h2 className="text-lg font-semibold truncate">{document.label}</h2>
            <div className="flex items-center gap-3 text-sm text-gray-500 mt-1">
              <span className="truncate">{document.name}</span>
              {document.size && <span>{formatFileSize(document.size)}</span>}
            </div>
          </div>
          <button
            onClick={onClose}
            className="ml-4 p-2 hover:bg-gray-200 rounded-lg transition-colors"
            aria-label="Fermer"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Content */}
        <div className="flex-1 overflow-auto bg-gray-100 p-4">
          {isImage && (
            <div className="flex items-center justify-center h-full">
              <img 
                src={document.downloadUrl} 
                alt={document.name}
                className="max-w-full max-h-full object-contain rounded-lg shadow-lg"
              />
            </div>
          )}
          {isPdf && (
            <iframe
              src={document.downloadUrl}
              className="w-full h-full min-h-[600px] rounded-lg shadow-lg bg-white"
              title={document.name}
            />
          )}
          {!isImage && !isPdf && (
            <div className="flex items-center justify-center h-full">
              <div className="text-center">
                <p className="text-gray-500 mb-4">
                  Prévisualisation non disponible pour ce type de fichier
                </p>
                <a
                  href={document.downloadUrl}
                  download={document.name}
                  className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
                >
                  <Download className="h-4 w-4" />
                  Télécharger le fichier
                </a>
              </div>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="flex items-center justify-between p-4 border-t bg-gray-50">
          <div className="flex-1"></div>
          <a
            href={document.downloadUrl}
            download={document.name}
            className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
          >
            <Download className="h-4 w-4" />
            Télécharger
          </a>
        </div>
      </div>
    </div>
  );
}