/**
 * StorageUsageDisplay Component
 *
 * Visual display of storage quota usage.
 */

import React from 'react';
import { mdiDatabase } from '@mdi/js';
import Icon from '@mdi/react';
import { useStorageQuota } from '../../hooks/useStorageQuota';

interface StorageUsageDisplayProps {
  className?: string;
  showDetails?: boolean;
  compact?: boolean;
}

export function StorageUsageDisplay({
  className = '',
  showDetails = true,
  compact = false,
}: StorageUsageDisplayProps) {
  const {
    usage,
    quota,
    percentUsed,
    isLoading,
    isWarning,
    isCritical,
    isPersisted,
    formatSize,
    requestPersistence,
  } = useStorageQuota();

  if (isLoading) {
    return (
      <div className={`animate-pulse ${className}`}>
        <div className='h-4 bg-gray-200 rounded w-32' />
      </div>
    );
  }

  // Determine color based on usage
  let barColor = 'bg-blue-500';
  let textColor = 'text-gray-600';

  if (isCritical) {
    barColor = 'bg-red-500';
    textColor = 'text-red-600';
  } else if (isWarning) {
    barColor = 'bg-yellow-500';
    textColor = 'text-yellow-600';
  }

  if (compact) {
    return (
      <div
        className={`flex items-center gap-2 ${className}`}
        title={`Storage: ${formatSize(usage)} / ${formatSize(quota)}`}
      >
        <Icon path={mdiDatabase} size={0.6} className={textColor} />
        <div className='w-16 h-1.5 bg-gray-200 rounded-full overflow-hidden'>
          <div
            className={`h-full ${barColor} transition-all duration-300`}
            style={{ width: `${Math.min(percentUsed, 100)}%` }}
          />
        </div>
        <span className={`text-xs ${textColor}`}>
          {Math.round(percentUsed)}%
        </span>
      </div>
    );
  }

  return (
    <div className={`space-y-2 ${className}`}>
      <div className='flex items-center justify-between'>
        <div className='flex items-center gap-2'>
          <Icon path={mdiDatabase} size={0.7} className='text-gray-500' />
          <span className='text-sm font-medium text-gray-700'>Storage</span>
        </div>
        {showDetails && (
          <span className={`text-xs ${textColor}`}>
            {formatSize(usage)} / {formatSize(quota)}
          </span>
        )}
      </div>

      {/* Progress bar */}
      <div className='w-full h-2 bg-gray-200 rounded-full overflow-hidden'>
        <div
          className={`h-full ${barColor} transition-all duration-300`}
          style={{ width: `${Math.min(percentUsed, 100)}%` }}
        />
      </div>

      {/* Status messages */}
      {showDetails && (
        <div className='flex items-center justify-between text-xs'>
          <span className={textColor}>
            {isCritical
              ? 'Storage critically low'
              : isWarning
                ? 'Storage running low'
                : `${Math.round(100 - percentUsed)}% available`}
          </span>
          {!isPersisted && (
            <button
              onClick={requestPersistence}
              className='text-blue-500 hover:text-blue-700'
            >
              Make persistent
            </button>
          )}
          {isPersisted && (
            <span className='text-green-600'>Persistent storage enabled</span>
          )}
        </div>
      )}
    </div>
  );
}

export default StorageUsageDisplay;
