// V2 eval report cover — ported from EvalReportV2Cover.tsx
import { Page, View, Text, Image } from '@react-pdf/renderer';
import { styles, colors, logoPath } from '../styles.js';
import { getResultsScoreMetrics, getScoreHexColor } from '../scoring.js';
import type { EvaluationResult } from './types.js';

interface EvalReportV2CoverProps {
  customerName: string;
  reportDate: string;
  results: EvaluationResult[];
}

export function EvalReportV2Cover({ customerName, reportDate, results }: EvalReportV2CoverProps) {
  const metrics = getResultsScoreMetrics(results);
  const criteriaRate = metrics.criteriaRate !== null ? Math.round(metrics.criteriaRate * 100) : 0;
  const rubricRate = metrics.rubricRate !== null ? Math.round(metrics.rubricRate * 100) : null;

  const singleTurnCount = results.filter(r => r.item_type === 'single_turn' || r.item_type === undefined).length;
  const scenarioCount = results.filter(r => r.item_type === 'scenario').length;
  const transcriptCount = results.filter(r => r.item_type === 'transcript').length;

  return (
    <Page size="A4" style={[styles.page, { justifyContent: 'center' }]}>
      {/* Logo */}
      <View style={{ alignItems: 'center', marginBottom: 48 }}>
        <Image src={logoPath} style={{ width: 200, height: 46 }} />
      </View>

      {/* Title */}
      <View style={{ alignItems: 'center', marginBottom: 48 }}>
        <Text style={{ fontSize: 28, fontWeight: 700, color: colors.eggplant, marginBottom: 8 }}>
          Evaluation Report
        </Text>
        <Text style={{ fontSize: 16, fontWeight: 500, color: colors.muted }}>
          {customerName}
        </Text>
        <Text style={{ fontSize: 14, fontWeight: 400, color: colors.muted, marginTop: 4 }}>
          {reportDate}
        </Text>
      </View>

      {/* Key Highlights */}
      <View style={[styles.card, { marginHorizontal: 40 }]}>
        <Text style={[styles.sectionTitle, { textAlign: 'center', marginBottom: 16 }]}>
          Key Highlights
        </Text>

        <View style={{ gap: 8 }}>
          {/* Scores - side by side */}
          <View style={{ flexDirection: 'row', justifyContent: 'center', gap: 32, marginBottom: 8 }}>
            {metrics.criteriaTotal > 0 && (
              <View style={{ alignItems: 'center' }}>
                <Text style={{
                  fontSize: 40,
                  fontWeight: 700,
                  color: getScoreHexColor(metrics.criteriaRate),
                }}>
                  {criteriaRate}%
                </Text>
                <Text style={{ fontSize: 12, fontWeight: 500, color: colors.muted }}>
                  Criteria ({metrics.criteriaPassed}/{metrics.criteriaTotal} checks)
                </Text>
              </View>
            )}
            {rubricRate !== null && (
              <View style={{ alignItems: 'center' }}>
                <Text style={{
                  fontSize: 40,
                  fontWeight: 700,
                  color: getScoreHexColor(metrics.rubricRate),
                }}>
                  {rubricRate}%
                </Text>
                <Text style={{ fontSize: 12, fontWeight: 500, color: colors.muted }}>
                  Rubric ({metrics.rubricRulesPassed}/{metrics.rubricRulesTotal} rules)
                </Text>
              </View>
            )}
          </View>

          {/* Item type breakdown */}
          <Text style={styles.bodyText}>
            {'\u2022'} {results.length} test items evaluated
            {(() => {
              const parts: string[] = [];
              if (singleTurnCount > 0) parts.push(`${singleTurnCount} single-turn`);
              if (scenarioCount > 0) parts.push(`${scenarioCount} scenario${scenarioCount > 1 ? 's' : ''}`);
              if (transcriptCount > 0) parts.push(`${transcriptCount} transcript${transcriptCount > 1 ? 's' : ''}`);
              return parts.length > 1 ? ` (${parts.join(', ')})` : parts.length === 1 ? ` (all ${parts[0]})` : '';
            })()}
          </Text>
        </View>
      </View>

      {/* Footer */}
      <View style={[styles.footer, { position: 'absolute', bottom: 40 }]}>
        <Text style={styles.caption}>Powered by Indemn Evals</Text>
        <Text style={styles.caption}>Page 1</Text>
      </View>
    </Page>
  );
}