// V1 example detail page — ported from EvalReportExamplePage.tsx
import { Page, View, Text } from '@react-pdf/renderer';
import { colors } from '../styles.js';
import { SCORE_THRESHOLDS, getScoreHexColor } from '../scoring.js';
import type { MatrixRow, EvaluatorInfo } from './types.js';

interface EvalReportExamplePageProps {
  exampleNumber: number;
  totalExamples: number;
  pageNumber: number;
  row: MatrixRow;
  evaluators: EvaluatorInfo[];
}

export function EvalReportExamplePage({
  exampleNumber,
  totalExamples,
  pageNumber: _pageNumber,
  row,
  evaluators,
}: EvalReportExamplePageProps) {
  void _pageNumber;
  const passedCount = Object.values(row.cells).filter(c => c.passed).length;
  const totalCount = Object.keys(row.cells).length;
  const passRate = Math.round(row.avgScore * 100);

  const failed = evaluators.filter(e => row.cells[e.key] && !row.cells[e.key].passed);
  const passed = evaluators.filter(e => row.cells[e.key] && row.cells[e.key].passed);

  return (
    <Page size="A4" orientation="landscape" style={{ fontFamily: 'Barlow', fontSize: 7, color: colors.eggplant, backgroundColor: colors.white, padding: 20 }} wrap>
      {/* Header Row */}
      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8, paddingBottom: 6, borderBottomWidth: 1, borderBottomColor: colors.border }} fixed>
        <Text style={{ fontSize: 11, fontWeight: 600, color: colors.iris }}>
          Question {exampleNumber} of {totalExamples}
        </Text>
        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
          <Text style={{ fontSize: 8, color: colors.muted }}>
            {passedCount}/{totalCount} passed
          </Text>
          <View style={{ backgroundColor: passRate >= SCORE_THRESHOLDS.SUCCESS * 100 ? '#dcfce7' : passRate >= SCORE_THRESHOLDS.WARNING * 100 ? '#fef9c3' : '#fee2e2', paddingHorizontal: 8, paddingVertical: 4, borderRadius: 3 }}>
            <Text style={{ fontSize: 12, fontWeight: 700, color: getScoreHexColor(passRate / 100) }}>
              {passRate}%
            </Text>
          </View>
        </View>
      </View>

      {/* FULL Question */}
      <View style={{ marginBottom: 8 }} wrap={false}>
        <Text style={{ fontSize: 6, fontWeight: 700, color: colors.eggplant, marginBottom: 3, textTransform: 'uppercase', letterSpacing: 0.5 }}>Question</Text>
        <View style={{ backgroundColor: colors.background, padding: 6, borderRadius: 3 }}>
          <Text style={{ fontSize: 6, color: colors.eggplant, lineHeight: 1.4 }}>{row.question}</Text>
        </View>
      </View>

      {/* FULL Agent Response */}
      <View style={{ marginBottom: 8 }}>
        <Text style={{ fontSize: 6, fontWeight: 700, color: colors.eggplant, marginBottom: 3, textTransform: 'uppercase', letterSpacing: 0.5 }}>Agent Response</Text>
        <View style={{ backgroundColor: colors.background, padding: 6, borderRadius: 3 }}>
          <Text style={{ fontSize: 5.5, color: colors.eggplant, lineHeight: 1.4 }}>{row.response}</Text>
        </View>
      </View>

      {/* Evaluation Results - Two columns side by side */}
      <View style={{ flexDirection: 'row', gap: 12 }}>
        {/* Failed Rules */}
        <View style={{ flex: 1 }}>
          <Text style={{ fontSize: 6, fontWeight: 700, color: colors.error, marginBottom: 3, textTransform: 'uppercase', letterSpacing: 0.5 }}>
            Failed ({failed.length})
          </Text>
          <View style={{ backgroundColor: '#fef2f2', padding: 6, borderRadius: 3 }}>
            {failed.length === 0 ? (
              <Text style={{ fontSize: 6, color: colors.success }}>All rules passed!</Text>
            ) : (
              failed.map((evaluator, idx) => {
                const cell = row.cells[evaluator.key];
                return (
                  <View key={evaluator.key} style={{ marginBottom: idx < failed.length - 1 ? 6 : 0 }}>
                    <Text style={{ fontSize: 6, fontWeight: 600, color: colors.error, marginBottom: 1 }}>
                      x {evaluator.name} [{evaluator.severity}]
                    </Text>
                    {cell?.comment && (
                      <Text style={{ fontSize: 5, color: colors.muted, lineHeight: 1.3 }}>
                        {cell.comment}
                      </Text>
                    )}
                  </View>
                );
              })
            )}
          </View>
        </View>

        {/* Passed Rules */}
        <View style={{ flex: 1 }}>
          <Text style={{ fontSize: 6, fontWeight: 700, color: colors.success, marginBottom: 3, textTransform: 'uppercase', letterSpacing: 0.5 }}>
            Passed ({passed.length})
          </Text>
          <View style={{ backgroundColor: '#f0fdf4', padding: 6, borderRadius: 3 }}>
            {passed.length === 0 ? (
              <Text style={{ fontSize: 6, color: colors.error }}>No rules passed</Text>
            ) : (
              passed.map((evaluator) => (
                <Text key={evaluator.key} style={{ fontSize: 5.5, color: colors.success, marginBottom: 2 }}>
                  + {evaluator.name}
                </Text>
              ))
            )}
          </View>
        </View>
      </View>

      {/* Footer */}
      <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingTop: 6, borderTopWidth: 0.5, borderTopColor: colors.border, marginTop: 'auto' }} fixed>
        <Text style={{ fontSize: 6, color: colors.muted }}>Indemn Evaluation Report</Text>
        <Text style={{ fontSize: 6, color: colors.muted }} render={({ pageNumber: pn }) => `Page ${pn}`} />
      </View>
    </Page>
  );
}