Tech4biz-channel/Channel-Frontend/src/features/assets/components/AssetDetailsModal.tsx

import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X } from 'lucide-react';
import type { Asset } from '../../../types/assets';

interface AssetDetailsModalProps {
  isOpen: boolean;
  onClose: () => void;
  asset: Asset | null;
  userRole: string | undefined;
}

export const AssetDetailsModal: React.FC<AssetDetailsModalProps> = ({
  isOpen,
  onClose,
  asset,
  userRole
}) => {
  const formatBytes = (bytes: number, decimals = 2) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
  };

  return (
    <AnimatePresence>
      {isOpen && asset && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
            className="absolute inset-0 bg-ink-950/40 backdrop-blur-sm"
          />
          <motion.div 
            initial={{ opacity: 0, scale: 0.95, y: 10 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.95, y: 10 }}
            className="relative bg-ink-0 border border-ink-200 rounded-2xl p-6 max-w-md w-full shadow-xl z-10 space-y-5 text-ink-900"
          >
            <div className="flex justify-between items-center pb-3 border-b border-ink-100">
              <h3 className="text-base font-bold text-ink-900">Asset Details</h3>
              <button 
                onClick={onClose}
                className="p-1 rounded-lg text-ink-400 hover:text-ink-900 hover:bg-ink-50 transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-4 text-xs font-medium">
              <div>
                <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500">Title</h4>
                <p className="text-sm font-extrabold text-ink-900 mt-1">{asset.title}</p>
              </div>

              {asset.description && (
                <div>
                  <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500">Description</h4>
                  <p className="text-ink-700 mt-1 leading-relaxed">{asset.description}</p>
                </div>
              )}

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500">Category</h4>
                  <p className="text-ink-900 mt-1 font-bold">{asset.categoryId || 'General'}</p>
                </div>
                <div>
                  <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500">Subcategory</h4>
                  <p className="text-ink-900 mt-1 font-bold">{asset.subcategory || '-'}</p>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500">File Size</h4>
                  <p className="text-ink-900 mt-1 font-bold">{asset.type === 'url' ? 'N/A' : formatBytes(asset.size)}</p>
                </div>
                <div>
                  <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500">File Type</h4>
                  <p className="text-ink-900 mt-1 font-bold">{asset.type}</p>
                </div>
              </div>

              {asset.tags.length > 0 && (
                <div>
                  <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500">Tags</h4>
                  <div className="flex flex-wrap gap-1.5 mt-1.5">
                    {asset.tags.map(tag => (
                      <span key={tag} className="px-2 py-0.5 rounded bg-ink-50 border border-ink-200 text-[10px] font-bold text-ink-600">
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
              )}

              {userRole === 'ADMIN' && asset.sharedWith && (
                <div>
                  <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500">Shared With</h4>
                  <div className="flex flex-wrap gap-1.5 mt-1.5">
                    {asset.sharedWith.length === 0 ? (
                      <span className="text-ink-500 font-semibold italic">Not shared with any organization</span>
                    ) : (
                      asset.sharedWith.map(sw => (
                        <span key={sw.userId ? `${sw.organizationId}-${sw.userId}` : sw.organizationId} className="px-2 py-0.5 rounded bg-ink-900 text-ink-0 text-[10px] font-bold">
                          {sw.organization?.name || 'Unknown Organization'} {sw.user ? `(${sw.user.email})` : '(Entire Org)'}
                        </span>
                      ))
                    )}
                  </div>
                </div>
              )}
            </div>

            <div className="pt-3.5 border-t border-ink-100 flex justify-end">
              <button
                onClick={onClose}
                className="px-5 py-2 rounded-lg bg-ink-900 text-ink-0 text-xs font-bold hover:bg-ink-800 transition-colors shadow-sm"
              >
                Close
              </button>
            </div>
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  );
};