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="2xl"
      footer={
        <Button
          onClick={onClose}
          variant="primary"
          size="sm"
        >
          Close
        </Button>
      }
    >
      {asset && (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 text-xs font-medium text-ink-900">
          {/* Left Column */}
          <div className="space-y-4">
            <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) && 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-44 rounded-lg overflow-hidden border border-ink-200 shadow-sm bg-ink-50">
                  <img 
                    src={asset.thumbnailUrl} 
                    alt="Asset Banner" 
                    className="w-full h-full object-cover"
                  />
                </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">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>
          </div>

          {/* Right Column */}
          <div className="space-y-4">
            {asset.type === 'case_study' && asset.problemStatement && (
              <div>
                <h4 className="text-[10px] font-bold uppercase tracking-wider text-red-650 font-sans mb-1.5">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.5">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>
            )}

            {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>
        </div>
      )}
    </Modal>
  );
};
