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

import React from 'react';
import type { Asset } from '../../../types/assets';
import Modal from '../../../components/ui/Modal';
import Button from '../../../components/ui/Button';

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 (
    <Modal
      isOpen={isOpen && !!asset}
      onClose={onClose}
      title="Asset Details"
      size="md"
      footer={
        <Button
          onClick={onClose}
          variant="primary"
          size="sm"
        >
          Close
        </Button>
      }
    >
      {asset && (
        <div className="space-y-4 text-xs font-medium text-ink-900">
          <div>
            <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">Title</h4>
            <p className="text-sm font-extrabold text-ink-900 mt-1 font-sans">{asset.title}</p>
          </div>

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

          {asset.type === 'case_study' && asset.thumbnailUrl && (
            <div>
              <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans mb-1.5">Banner Image</h4>
              <div className="w-full h-40 rounded-lg overflow-hidden border border-ink-200 shadow-sm bg-ink-50">
                <img 
                  src={asset.thumbnailUrl} 
                  alt="Case Study Banner" 
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          )}

          {asset.type === 'case_study' && asset.problemStatement && (
            <div>
              <h4 className="text-[10px] font-bold uppercase tracking-wider text-red-600 font-sans mb-1">Problem / Challenge</h4>
              <p className="text-ink-700 leading-relaxed font-sans whitespace-pre-wrap text-xs bg-red-500/[0.02] border border-red-500/10 p-3 rounded-lg shadow-sm">
                {asset.problemStatement}
              </p>
            </div>
          )}

          {asset.type === 'case_study' && asset.solution && (
            <div>
              <h4 className="text-[10px] font-bold uppercase tracking-wider text-emerald-650 font-sans mb-1">Suggested Solution</h4>
              <p className="text-ink-700 leading-relaxed font-sans whitespace-pre-wrap text-xs bg-emerald-500/[0.02] border border-emerald-500/10 p-3 rounded-lg shadow-sm">
                {asset.solution}
              </p>
            </div>
          )}

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

          {asset.tags.length > 0 && (
            <div>
              <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">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 font-sans">
                    {tag}
                  </span>
                ))}
              </div>
            </div>
          )}

          {userRole === 'ADMIN' && asset.sharedWith && (
            <div>
              <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">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 font-sans">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 font-sans">
                      {sw.organization?.name || 'Unknown Organization'} {sw.user ? `(${sw.user.email})` : '(Entire Org)'}
                    </span>
                  ))
                )}
              </div>
            </div>
          )}
        </div>
      )}
    </Modal>
  );
};