// V1 eval report cover — ported from EvalReportCover.tsx
import { Page, View, Text, Image } from '@react-pdf/renderer';
import { styles, colors, logoPath } from '../styles.js';

interface EvalReportCoverProps {
  customerName: string;
  reportDate: string;
  highlights: {
    totalQuestions: number;
    totalRules: number;
    overallScore: number;
    highSeverityScore: number;
    mediumSeverityScore: number;
    highCount: number;
    mediumCount: number;
  };
}

export function EvalReportCover({ customerName, reportDate, highlights }: EvalReportCoverProps) {
  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 }}>
          <Text style={styles.bodyText}>
            {'\u2022'} {highlights.totalQuestions} questions evaluated against {highlights.totalRules} rules
          </Text>
          <Text style={styles.bodyText}>
            {'\u2022'} Overall weighted score: <Text style={{ fontWeight: 600 }}>{Math.round(highlights.overallScore * 100)}%</Text>
          </Text>
          <Text style={styles.bodyText}>
            {'\u2022'} High severity compliance ({highlights.highCount} rules): <Text style={{ fontWeight: 600 }}>{Math.round(highlights.highSeverityScore * 100)}%</Text>
          </Text>
          <Text style={styles.bodyText}>
            {'\u2022'} Medium severity compliance ({highlights.mediumCount} rules): <Text style={{ fontWeight: 600 }}>{Math.round(highlights.mediumSeverityScore * 100)}%</Text>
          </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>
  );
}