// V1 evaluation matrix page — ported from EvalReportMatrixPage.tsx
import { Page, View, Text } from '@react-pdf/renderer';
import { styles, colors } from '../styles.js';
import type { MatrixData } from './types.js';

interface EvalReportMatrixPageProps {
  matrixData: MatrixData;
  pageNumber: number;
}

export function EvalReportMatrixPage({ matrixData, pageNumber }: EvalReportMatrixPageProps) {
  const { rows, evaluators, columnAverages } = matrixData;

  const numCol = 25;
  const questionCol = 160;
  const evalCol = 28;
  const scoreCol = 35;

  return (
    <Page size="A4" orientation="landscape" style={[styles.page, { padding: 20 }]}>
      {/* Header */}
      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10, paddingBottom: 6, borderBottomWidth: 1, borderBottomColor: colors.border }}>
        <Text style={{ fontSize: 14, fontWeight: 600, color: colors.iris }}>Evaluation Matrix</Text>
        <Text style={{ fontSize: 8, color: colors.muted }}>Page {pageNumber}</Text>
      </View>

      {/* Matrix Table */}
      <View style={{ flex: 1 }}>
        {/* Table Header */}
        <View style={{ flexDirection: 'row', borderBottomWidth: 1.5, borderBottomColor: colors.eggplant, paddingBottom: 4, marginBottom: 2 }}>
          <View style={{ width: numCol }}>
            <Text style={{ fontSize: 6, fontWeight: 700, color: colors.eggplant }}>#</Text>
          </View>
          <View style={{ width: questionCol }}>
            <Text style={{ fontSize: 6, fontWeight: 700, color: colors.eggplant }}>Question</Text>
          </View>
          {evaluators.map((ev) => (
            <View key={ev.key} style={{ width: evalCol, alignItems: 'center' }}>
              <Text style={{ fontSize: 5, fontWeight: 700, color: ev.severity === 'High' ? '#3a4389' : colors.iris }}>
                {ev.name.split(':')[0]}
              </Text>
            </View>
          ))}
          <View style={{ width: scoreCol, alignItems: 'center' }}>
            <Text style={{ fontSize: 6, fontWeight: 700, color: colors.eggplant }}>Score</Text>
          </View>
        </View>

        {/* Table Rows */}
        {rows.map((row, index) => (
          <View
            key={row.resultId}
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              paddingVertical: 2,
              backgroundColor: index % 2 === 0 ? colors.white : '#f8f8fc',
            }}
          >
            <View style={{ width: numCol }}>
              <Text style={{ fontSize: 5, color: colors.muted }}>{index + 1}</Text>
            </View>
            <View style={{ width: questionCol }}>
              <Text style={{ fontSize: 5, color: colors.eggplant }}>
                {row.question.slice(0, 45)}{row.question.length > 45 ? '...' : ''}
              </Text>
            </View>
            {evaluators.map((ev) => {
              const cell = row.cells[ev.key];
              const hasCellData = cell !== undefined && cell !== null;
              const passed = hasCellData && cell.passed;
              return (
                <View key={ev.key} style={{ width: evalCol, alignItems: 'center', backgroundColor: hasCellData ? (passed ? '#dcfce7' : '#fee2e2') : 'transparent' }}>
                  <Text style={{ fontSize: 6, fontWeight: 700, color: hasCellData ? (passed ? colors.success : colors.error) : colors.muted }}>
                    {hasCellData ? (passed ? 'P' : 'F') : '-'}
                  </Text>
                </View>
              );
            })}
            <View style={{ width: scoreCol, alignItems: 'center' }}>
              <Text style={{ fontSize: 5, fontWeight: 600, color: colors.eggplant }}>
                {Math.round(row.avgScore * 100)}%
              </Text>
            </View>
          </View>
        ))}

        {/* Column Averages Row */}
        <View style={{
          flexDirection: 'row',
          alignItems: 'center',
          paddingVertical: 4,
          borderTopWidth: 1.5,
          borderTopColor: colors.eggplant,
          marginTop: 2,
          backgroundColor: colors.background,
        }}>
          <View style={{ width: numCol }} />
          <View style={{ width: questionCol }}>
            <Text style={{ fontSize: 6, fontWeight: 700, color: colors.eggplant }}>Pass Rate</Text>
          </View>
          {evaluators.map((ev) => (
            <View key={ev.key} style={{ width: evalCol, alignItems: 'center' }}>
              <Text style={{ fontSize: 5, fontWeight: 700, color: colors.eggplant }}>
                {Math.round((columnAverages[ev.key] || 0) * 100)}%
              </Text>
            </View>
          ))}
          <View style={{ width: scoreCol, alignItems: 'center' }}>
            <Text style={{ fontSize: 6, fontWeight: 700, color: colors.iris }}>
              {Math.round(matrixData.overallAverage * 100)}%
            </Text>
          </View>
        </View>
      </View>

      {/* Footer */}
      <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingTop: 8, borderTopWidth: 0.5, borderTopColor: colors.border, marginTop: 8 }}>
        <Text style={{ fontSize: 7, color: colors.muted }}>Indemn Evaluation Report</Text>
        <Text style={{ fontSize: 7, color: colors.muted }}>Page {pageNumber}</Text>
      </View>
    </Page>
  );
}