import { Activity } from 'lucide-react';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { formatDateTime } from '@/lib/format';

import { CircuitState, ServiceStatusBadge } from './ServiceStatusBadge';

export interface ServiceHealth {
  name: string;
  state: CircuitState;
  displayName: string;
}

export interface ConnectionHealthPanelProps {
  services: ServiceHealth[];
  lastCheckedAt?: string | null;
}

export default function ConnectionHealthPanel({
  services,
  lastCheckedAt,
}: ConnectionHealthPanelProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Activity className="h-5 w-5" />
          External Service Health
        </CardTitle>
        <CardDescription>
          Real-time status of external API connections (Google Search Console, OpenAI, WordPress)
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col gap-4">
          {/* Service List */}
          <div className="space-y-3">
            {services.map((service) => (
              <div
                key={service.name}
                className="flex items-center justify-between rounded-lg border bg-muted/50 p-3"
              >
                <div className="flex items-center gap-3">
                  <div className="font-medium">{service.displayName}</div>
                </div>
                <ServiceStatusBadge state={service.state} />
              </div>
            ))}
          </div>

          {/* Last Checked */}
          {lastCheckedAt && (
            <div className="text-xs text-muted-foreground">
              Last checked {formatDateTime(lastCheckedAt)}
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}