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

interface DatabaseCardProps {
  database: DatabaseStats;
}

export function DatabaseCard({ database }: DatabaseCardProps) {
  const getDbIcon = (type: string) => {
    switch (type) {
      case 'postgres':
        return '🐘';
      case 'mongodb':
        return '🍃';
      case 'questdb':
        return '⚡';
      default:
        return '💾';
    }
  };

  return (
    <Card className="p-4">
      <CardHeader className="p-0 pb-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <span className="text-2xl">{getDbIcon(database.type)}</span>
            <h4 className="font-semibold text-text-primary">{database.name}</h4>
          </div>
          <ConnectionStatus connected={database.connected} />
        </div>
      </CardHeader>

      <CardContent className="p-0">
        {database.connected ? (
          <div className="space-y-2">
            {database.latency !== undefined && (
              <div>
                <div className="text-sm text-text-secondary">Latency</div>
                <div className="text-base font-semibold text-text-primary">{database.latency}ms</div>
              </div>
            )}

            {database.pool && (
              <div>
                <div className="text-sm text-text-secondary mb-1">Connection Pool</div>
                <div className="grid grid-cols-2 gap-2 text-xs">
                  <div>
                    <span className="text-text-secondary">Active:</span>{' '}
                    <span className="text-text-primary">{database.pool.active}</span>
                  </div>
                  <div>
                    <span className="text-text-secondary">Idle:</span>{' '}
                    <span className="text-text-primary">{database.pool.idle}</span>
                  </div>
                  <div>
                    <span className="text-text-secondary">Size:</span>{' '}
                    <span className="text-text-primary">{database.pool.size}</span>
                  </div>
                  <div>
                    <span className="text-text-secondary">Max:</span>{' '}
                    <span className="text-text-primary">{database.pool.max}</span>
                  </div>
                </div>
                
                {database.pool.max > 0 && (
                  <div className="mt-2">
                    <div className="w-full bg-surface-tertiary rounded-full h-2">
                      <div
                        className="bg-primary-500 h-2 rounded-full transition-all"
                        style={{ width: `${(database.pool.size / database.pool.max) * 100}%` }}
                      />
                    </div>
                    <div className="text-xs text-text-muted mt-1">
                      {formatPercentage((database.pool.size / database.pool.max) * 100, 0)} utilized
                    </div>
                  </div>
                )}
              </div>
            )}

            {database.type === 'mongodb' && database.stats && (
              <div className="text-xs text-text-secondary">
                <div>Version: <span className="text-text-primary">{database.stats.version}</span></div>
                {database.stats.connections && (
                  <div>
                    Connections:{' '}
                    <span className="text-text-primary">
                      {database.stats.connections.current}/{database.stats.connections.available}
                    </span>
                  </div>
                )}
              </div>
            )}
          </div>
        ) : (
          <div className="text-center py-4 text-text-secondary">
            Database is not available
          </div>
        )}
      </CardContent>
    </Card>
  );
}