// Eine Sektion der Referenzansicht: Kopf, Kacheln, Brücke, Zellnachweis.
//
// Das ist die Übersichts-Sektion aus Kap. 21 in der Zusammensetzung, die
// View-Phase V1 verlangt — erstmals als Ganzes und nicht als vier einzelne
// Bausteine. Was sie zeigt, kommt aus `buildReferenceView` und damit aus
// denselben Funktionen, die ein echter Lauf benutzt.
//
// tdd-guard:skip — zusammensetzend; die Bausteine und der Referenzfall sind
// eigens geprüft, die Zusammensetzung über Snapshot-Tests.

import type { ReferenceView } from '@/lib/qaf-differences/internal/reference-case'
import { QafV2Header } from './qaf-v2-header'
import { QafV2KpiTile } from './qaf-v2-kpi-tile'
import { QafV2Waterfall } from './qaf-v2-waterfall'
import { QafV2EvidencePanel } from './qaf-v2-evidence-panel'

interface Props {
  view: ReferenceView
}

export function QafV2ReferenceSection({ view }: Props) {
  const { case: fall, tiles, waterfall, validation, evidence } = view

  return (
    <section className="space-y-4 rounded-[2px] border border-border p-4">
      <p className="text-xs text-muted-foreground">{fall.purposeDe}</p>

      <QafV2Header
        partLabelDe={fall.partLabelDe}
        supplierLabelDe={fall.supplierLabelDe}
        comparisonType={fall.comparisonType}
        comparability={fall.comparability}
        comparabilityReasonsDe={fall.comparabilityReasonsDe}
        files={fall.files}
        contentHash={fall.contentHash}
        validation={validation}
      />

      <div className="grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-5">
        {tiles.map((tile) => (
          <QafV2KpiTile key={tile.key} tile={tile} />
        ))}
      </div>

      <div className="space-y-2">
        <h2 className="font-display text-sm font-bold tracking-tight">Preisbrücke</h2>
        <QafV2Waterfall spec={waterfall} unit="EUR_per_piece" />
      </div>

      <div className="space-y-2">
        <h2 className="font-display text-sm font-bold tracking-tight">
          Zellnachweis · {fall.evidenceForId}
        </h2>
        <QafV2EvidencePanel rows={evidence} defaultOpen />
      </div>
    </section>
  )
}