/**
 * System Health Card Component
 */

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

interface SystemHealthCardProps {
  health: SystemHealth;
}

export function SystemHealthCard({ health }: SystemHealthCardProps) {
  const statusVariant = {
    healthy: 'success' as const,
    degraded: 'warning' as const,
    unhealthy: 'danger' as const,
  }[health.status];

  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">System Health</h3>
          <StatusBadge variant={statusVariant} size="md">
            {health.status.toUpperCase()}
          </StatusBadge>
        </div>
      </CardHeader>

      <CardContent className="p-0 space-y-3">
        <div>
          <div className="text-sm text-text-secondary">Uptime</div>
          <div className="text-xl font-semibold text-text-primary">{formatUptime(health.uptime)}</div>
        </div>

        <div>
          <div className="text-sm text-text-secondary">System Memory</div>
          <div className="mt-1">
            <div className="flex justify-between text-sm text-text-primary">
              <span>{formatBytes(health.memory.used)} / {formatBytes(health.memory.total)}</span>
              <span>{formatPercentage(health.memory.percentage)}</span>
            </div>
            <div className="mt-1 w-full bg-surface-tertiary rounded-full h-2">
              <div
                className="bg-primary-500 h-2 rounded-full transition-all"
                style={{ width: `${Math.min(health.memory.percentage, 100)}%` }}
              />
            </div>
          </div>
          {health.memory.available !== undefined && (
            <div className="mt-2 text-xs text-text-muted">
              Available: {formatBytes(health.memory.available)} (excludes cache/buffers)
            </div>
          )}
          {health.memory.heap && (
            <div className="mt-1 text-xs text-text-muted">
              Node.js Heap: {formatBytes(health.memory.heap.used)} / {formatBytes(health.memory.heap.total)}
            </div>
          )}
        </div>

        {health.cpu && (
          <div>
            <div className="text-sm text-text-secondary">CPU Usage</div>
            <div className="flex items-center justify-between">
              <div className="text-lg font-semibold text-text-primary">{health.cpu.usage}%</div>
              {health.cpu.cores && (
                <span className="text-sm text-text-secondary">{health.cpu.cores} cores</span>
              )}
            </div>
            {health.cpu.loadAverage && (
              <div className="text-xs text-text-muted mt-1">
                Load: {health.cpu.loadAverage.map(l => l.toFixed(2)).join(', ')}
              </div>
            )}
          </div>
        )}

        {health.errors && health.errors.length > 0 && (
          <div>
            <div className="text-sm text-text-secondary mb-2">Issues</div>
            <ul className="space-y-1">
              {health.errors.map((error, index) => (
                <li key={index} className="text-sm text-danger">
                  • {error}
                </li>
              ))}
            </ul>
          </div>
        )}

        <div className="text-xs text-text-muted">
          Last updated: {new Date(health.timestamp).toLocaleTimeString()}
        </div>
      </CardContent>
    </Card>
  );
}