import React from 'react';

import type {
  ScanHistoryResponse,
  WeeklyReportResponse,
} from '../../service/visibility/visibility.interface';

import KPIRow from './KPIRow';
import { pulseNumbers } from './pulse-numbers';
import ScanHistoryChart from './ScanHistoryChart';

interface OverviewPulseProps {
  weeklyReport: WeeklyReportResponse | null;
  scanHistory: ScanHistoryResponse | null;
  weekIso: string;
  loading: boolean;
}

function OverviewPulse({
  weeklyReport,
  scanHistory,
  weekIso,
  loading,
}: OverviewPulseProps): JSX.Element {
  // Prompt counts live on the scan-history row, not the weekly report; a
  // week without its report reads the whole headline from the scan.
  const { score, shareOfVoice, point, scanWeek } = pulseNumbers(
    weeklyReport,
    scanHistory?.history ?? [],
    weekIso
  );

  return (
    <section className="overflow-hidden rounded-xl border border-border bg-card">
      <KPIRow
        loading={loading}
        visibilityScore={score}
        shareOfVoice={shareOfVoice}
        brandRank={weeklyReport?.brand_rank_overall ?? null}
        totalCompetingEntities={weeklyReport?.total_competing_entities ?? null}
        deltaScore={weeklyReport?.delta_score ?? null}
        deltaSov={weeklyReport?.delta_sov ?? null}
        sentimentPositivePct={weeklyReport?.sentiment_positive_pct ?? null}
        sentimentNegativePct={weeklyReport?.sentiment_negative_pct ?? null}
        deltaSentiment={weeklyReport?.delta_sentiment ?? null}
        queriesChecked={point?.queries_checked ?? null}
        brandMentions={point?.brand_mentions ?? null}
        scanWeek={scanWeek}
      />
      <div className="border-t border-border">
        <ScanHistoryChart scanHistory={scanHistory} loading={loading} />
      </div>
    </section>
  );
}

export default OverviewPulse;