import React from 'react';

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

import KPIRow from './KPIRow';
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, so the
  // "mentioned in N of M prompts" footnote is read from the point matching
  // the selected week (falling back to the most recent one).
  const history = scanHistory?.history ?? [];
  const point =
    history.find(scanPoint => scanPoint?.week_iso === weekIso) ??
    history[history.length - 1] ??
    null;

  return (
    <section className="overflow-hidden rounded-xl border border-gray-200 bg-white">
      <KPIRow
        loading={loading}
        visibilityScore={weeklyReport?.visibility_score ?? 0}
        shareOfVoice={weeklyReport?.share_of_voice ?? 0}
        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}
      />
      <div className="border-t border-gray-100">
        <ScanHistoryChart scanHistory={scanHistory} loading={loading} />
      </div>
    </section>
  );
}

export default OverviewPulse;