/**
 * SiteHealthPanel — "Site Health" section of the Dashboard.
 *
 * Extracted from Dashboard.tsx (DEBT-005) — behavior-preserving refactor only.
 * Includes: HealthScoreCard, HealthScoreBreakdown, ConnectionHealthPanel.
 *
 * DASH-ROI-HERO: The "Proven traffic recovered" tile has been extracted to
 * RecoveryHero and hoisted to the top of Dashboard above the action hero.
 * It is no longer rendered here to avoid double-surfacing.
 * The `recoveredTraffic` prop has been removed from this component.
 */
import ConnectionHealthPanel, {
  type ServiceHealth,
} from '@/Components/CircuitBreaker/ConnectionHealthPanel';
import HealthScoreBreakdown from '@/Components/HealthScore/HealthScoreBreakdown';
import HealthScoreCard from '@/Components/HealthScore/HealthScoreCard';
import { Skeleton } from '@/Components/ui/skeleton';

export interface SiteHealthPanelProps {
  healthScore: {
    score: number | null;
    previous_score: number | null;
    status: string;
    trend: string;
    calculated_at: string | null;
    components: {
      traffic_trend: number | null;
      content_quality: number | null;
      recommendation_completion: number | null;
      roi_performance: number | null;
      connection_health: number | null;
    };
  } | null;
  serviceHealth: ServiceHealth[];
  isDataLoading: boolean;
  firstSiteId: string | undefined;
}

export function SiteHealthPanel({
  healthScore,
  serviceHealth,
  isDataLoading,
  firstSiteId,
}: SiteHealthPanelProps) {
  const showSection =
    healthScore || (serviceHealth && serviceHealth.length > 0) || (isDataLoading && !healthScore);

  if (!showSection) return null;

  return (
    <section aria-labelledby="site-health-heading" className="mb-12">
      <h2 id="site-health-heading" className="editorial-rule left mb-4">
        Site Health
      </h2>

      {/* UI-012: skeleton during initial data load when score not yet available */}
      {isDataLoading && !healthScore ? (
        <div className="mb-6">
          <Skeleton className="h-32 rounded-2xl" aria-label="Loading health score" />
        </div>
      ) : healthScore ? (
        <div className="mb-6">
          <HealthScoreCard
            score={healthScore.score}
            previousScore={healthScore.previous_score}
            calculatedAt={healthScore.calculated_at}
            siteId={firstSiteId}
          />
        </div>
      ) : null}

      {healthScore && healthScore.score !== null && (
        <div className="mb-6">
          <HealthScoreBreakdown
            trafficTrendScore={healthScore.components.traffic_trend}
            contentQualityScore={healthScore.components.content_quality}
            recommendationCompletionScore={healthScore.components.recommendation_completion}
            roiPerformanceScore={healthScore.components.roi_performance}
            connectionHealthScore={healthScore.components.connection_health}
          />
        </div>
      )}

      {serviceHealth && serviceHealth.length > 0 && (
        <div>
          {/* INTUX-UX-201: pass siteId so ConnectionHealthPanel can build per-service recovery routes */}
          <ConnectionHealthPanel services={serviceHealth} siteId={firstSiteId} />
        </div>
      )}
    </section>
  );
}