import { formatDate } from '@navi/ui';
import type { AnalyticsProvidersDto } from '@navi/types';
import { StatusBadge } from '../DashboardPrimitives';

export interface ProviderHealthTableProps {
  providers: AnalyticsProvidersDto | null;
}

export function ProviderHealthTable({ providers }: ProviderHealthTableProps) {
  if (!providers || providers.failedSyncs.length === 0) {
    return (
      <div className="empty-state">
        <h4>No failed provider syncs</h4>
        <p>Every connected integration is healthy or in a known disabled/demo mode.</p>
      </div>
    );
  }

  return (
    <div className="table-wrap">
      <table className="table">
        <thead>
          <tr>
            <th>Provider</th>
            <th>Category</th>
            <th>Environment</th>
            <th>Health</th>
            <th>Last health check</th>
            <th>Last sync</th>
            <th>Error</th>
          </tr>
        </thead>
        <tbody>
          {providers.failedSyncs.map((row) => (
            <tr key={row.id}>
              <td>{row.name}</td>
              <td>{row.categoryKind}</td>
              <td>{row.environment}</td>
              <td><StatusBadge value={row.healthStatus} /></td>
              <td>{row.lastHealthCheckAt ? formatDate(row.lastHealthCheckAt, 'en', { dateStyle: 'medium', timeStyle: 'short' }) : '—'}</td>
              <td>{row.lastSyncAt ? formatDate(row.lastSyncAt, 'en', { dateStyle: 'medium', timeStyle: 'short' }) : '—'}</td>
              <td className="muted">{row.errorMessage ?? '—'}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}