---
import DataPassport from "./DataPassport.astro";
import type { Activity } from "../lib/api";
const { items, totalPoints, periodLabel } = Astro.props as { items: Activity[]; totalPoints: number; periodLabel: string };
const sources = [...new Set(items.flatMap(item => item.sources))];
const conflicts = [...new Set(items.flatMap(item => item.source_conflicts))];
const observations = items.reduce((sum, item) => sum + item.catches, 0);
const confidence = items.length ? Math.round(items.reduce((sum, item) => sum + item.confidence_score, 0) / items.length) : null;
const observedAt = items.map(item => item.last_confirmed_at).filter(Boolean).sort().at(-1) ?? null;
const status = observations < 3 ? "insufficient" : "verified";
---
<section class="activity-evidence content-grid" aria-labelledby="activity-evidence-title">
  <div>
    <span class="overline">Доверие к выборке</span>
    <h2 id="activity-evidence-title">Паспорт активности</h2>
    <p>{totalPoints} {totalPoints === 1 ? "точка" : totalPoints < 5 ? "точки" : "точек"} за {periodLabel}. Сводка построена по подтверждённым карточкам этого списка.</p>
  </div>
  <DataPassport sources={sources} observedAt={observedAt} periodLabel={periodLabel} confidence={confidence} sampleSize={observations} sourceConflicts={conflicts} status={status} />
</section>

<style>
  .activity-evidence { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1.1fr); gap: 24px; align-items: start; margin-block: 26px; }
  .activity-evidence h2 { margin: 6px 0 8px; }
  .activity-evidence p { max-width: 470px; margin: 0; color: var(--text-muted); line-height: 1.6; }
  @media (max-width: 720px) { .activity-evidence { grid-template-columns: 1fr; } }
</style>