/**
 * Cache Statistics Card Component
 */

import type { CacheStats } from '../types';
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import { ConnectionStatus } from './StatusBadge';
import { formatBytes, formatNumber, formatPercentage } from '../utils/formatters';

interface CacheStatsCardProps {
  stats: CacheStats;
}

export function CacheStatsCard({ stats }: CacheStatsCardProps) {
  const hitRate = stats.stats && (stats.stats.hits + stats.stats.misses) > 0
    ? (stats.stats.hits / (stats.stats.hits + stats.stats.misses) * 100)
    : 0;

  return (
    <Card className="p-4">
      <CardHeader className="p-0 pb-3">
        <div className="flex items-center justify-between">
          <h3 className="text-base font-semibold text-text-primary">Cache (Dragonfly)</h3>
          <ConnectionStatus connected={stats.connected} size="md" />
        </div>
      </CardHeader>

      <CardContent className="p-0">
        {stats.connected ? (
          <div className="space-y-3">
            {stats.memoryUsage && (
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <div className="text-sm text-text-secondary">Memory Used</div>
                  <div className="text-lg font-semibold text-text-primary">{formatBytes(stats.memoryUsage.used)}</div>
                </div>
                <div>
                  <div className="text-sm text-text-secondary">Peak Memory</div>
                  <div className="text-lg font-semibold text-text-primary">{formatBytes(stats.memoryUsage.peak)}</div>
                </div>
              </div>
            )}

            {stats.stats && (
              <>
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <div className="text-sm text-text-secondary">Hit Rate</div>
                    <div className="text-lg font-semibold text-text-primary">{formatPercentage(hitRate)}</div>
                  </div>
                  <div>
                    <div className="text-sm text-text-secondary">Total Keys</div>
                    <div className="text-lg font-semibold text-text-primary">{formatNumber(stats.stats.keys)}</div>
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-3 text-sm">
                  <div>
                    <span className="text-text-secondary">Hits:</span> <span className="text-text-primary">{formatNumber(stats.stats.hits)}</span>
                  </div>
                  <div>
                    <span className="text-text-secondary">Misses:</span> <span className="text-text-primary">{formatNumber(stats.stats.misses)}</span>
                  </div>
                  {stats.stats.evictedKeys !== undefined && (
                    <div>
                      <span className="text-text-secondary">Evicted:</span> <span className="text-text-primary">{formatNumber(stats.stats.evictedKeys)}</span>
                    </div>
                  )}
                  {stats.stats.expiredKeys !== undefined && (
                    <div>
                      <span className="text-text-secondary">Expired:</span> <span className="text-text-primary">{formatNumber(stats.stats.expiredKeys)}</span>
                    </div>
                  )}
                </div>
              </>
            )}

            {stats.uptime && (
              <div className="text-sm text-text-secondary">
                Uptime: {Math.floor(stats.uptime / 3600)}h {Math.floor((stats.uptime % 3600) / 60)}m
              </div>
            )}
          </div>
        ) : (
          <div className="text-center py-8 text-text-secondary">
            Cache service is not available
          </div>
        )}
      </CardContent>
    </Card>
  );
}