Sankofa/portal/src/components/dashboard/PhoenixHealthTile.tsx

'use client';

import { Activity, CheckCircle, AlertCircle } from 'lucide-react';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
import { usePhoenixHealthSummary } from '@/hooks/usePhoenixRailing';

export function PhoenixHealthTile() {
  const { data, isLoading, error } = usePhoenixHealthSummary();

  if (isLoading) {
    return (
      <Card className="bg-gray-800 border-gray-700">
        <CardHeader>
          <CardTitle className="text-white flex items-center gap-2">
            <Activity className="h-5 w-5 text-orange-500" />
            Phoenix Health
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-center text-gray-400 py-4">Loading...</div>
        </CardContent>
      </Card>
    );
  }

  if (error) {
    return (
      <Card className="bg-gray-800 border-gray-700">
        <CardHeader>
          <CardTitle className="text-white flex items-center gap-2">
            <Activity className="h-5 w-5 text-orange-500" />
            Phoenix Health
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-center text-red-400 py-4">Error loading health (check PHOENIX_RAILING_URL)</div>
        </CardContent>
      </Card>
    );
  }

  const status = data?.status ?? 'unknown';
  const hosts = data?.hosts ?? [];
  const alerts = data?.alerts ?? [];

  return (
    <Card className="bg-gray-800 border-gray-700">
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-white flex items-center gap-2">
            <Activity className="h-5 w-5 text-orange-500" />
            Phoenix Health (Railing)
          </CardTitle>
          <span
            className={`px-3 py-1 rounded-full text-xs font-semibold ${
              status === 'healthy' ? 'bg-green-500/20 text-green-400' :
              status === 'degraded' ? 'bg-yellow-500/20 text-yellow-400' :
              'bg-red-500/20 text-red-400'
            }`}
          >
            {status}
          </span>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-2 text-sm">
          <div className="flex items-center gap-2">
            <CheckCircle className="h-4 w-4 text-green-400" />
            <span>Hosts: {hosts.length}</span>
          </div>
          {alerts.length > 0 && (
            <div className="flex items-center gap-2 text-yellow-400">
              <AlertCircle className="h-4 w-4" />
              <span>Alerts: {alerts.length}</span>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}