// Agent card cover page — ported from AgentCardCover.tsx
import { Page, View, Text, Image } from '@react-pdf/renderer';
import { styles, colors, logoPath } from '../styles.js';
import { getScoreHexColor } from '../scoring.js';
import type { LifecycleStage, V1Owner } from './types.js';

export interface AgentCardCoverProps {
  agentName: string;
  description?: string;
  channels: string[];
  generatedDate: string;
  lifecycle?: LifecycleStage;
  owner?: V1Owner;
  evaluationSummary?: {
    criteriaRate: number | null;
    rubricRate: number | null;
    criteriaPassed: number;
    criteriaTotal: number;
    rubricRulesPassed: number;
    rubricRulesTotal: number;
    totalRuns: number;
  };
}

const lifecycleColors: Record<string, { bg: string; text: string }> = {
  prototype: { bg: '#e5e7eb', text: '#4b5563' },
  beta: { bg: '#fef3c7', text: '#92400e' },
  published: { bg: '#d1fae5', text: '#065f46' },
};

export function AgentCardCover({
  agentName,
  description,
  channels,
  generatedDate,
  lifecycle,
  owner,
  evaluationSummary,
}: AgentCardCoverProps) {
  const lc = lifecycle ? lifecycleColors[lifecycle] || lifecycleColors.prototype : null;
  const ownerName = owner
    ? [owner.firstname, owner.lastname].filter(Boolean).join(' ') || owner.email || null
    : null;

  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>

      {/* Badges row: V1 Agent + Lifecycle */}
      <View style={{ flexDirection: 'row', justifyContent: 'center', gap: 8, marginBottom: 16 }}>
        <View
          style={{
            backgroundColor: `${colors.iris}20`,
            paddingHorizontal: 12,
            paddingVertical: 4,
            borderRadius: 4,
          }}
        >
          <Text style={{ fontSize: 10, fontWeight: 500, color: colors.iris }}>
            V1 Agent
          </Text>
        </View>
        {lc && (
          <View
            style={{
              backgroundColor: lc.bg,
              paddingHorizontal: 12,
              paddingVertical: 4,
              borderRadius: 4,
            }}
          >
            <Text style={{ fontSize: 10, fontWeight: 500, color: lc.text }}>
              {lifecycle!.charAt(0).toUpperCase() + lifecycle!.slice(1)}
            </Text>
          </View>
        )}
      </View>

      {/* Title */}
      <View style={{ alignItems: 'center', marginBottom: 8 }}>
        <Text
          style={{
            fontSize: 28,
            fontWeight: 700,
            color: colors.eggplant,
            marginBottom: 8,
            textAlign: 'center',
          }}
        >
          {agentName}
        </Text>
        {description && (
          <Text
            style={{
              fontSize: 14,
              fontWeight: 400,
              color: colors.muted,
              textAlign: 'center',
              maxWidth: 400,
            }}
          >
            {description}
          </Text>
        )}
      </View>

      {/* Owner */}
      {ownerName && (
        <View style={{ alignItems: 'center', marginBottom: 16 }}>
          <Text style={{ fontSize: 10, color: colors.muted }}>
            Owner: {ownerName}
          </Text>
        </View>
      )}

      {/* Channels */}
      {channels.length > 0 && (
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'center',
            gap: 8,
            marginBottom: 32,
          }}
        >
          {channels.map((channel) => (
            <View
              key={channel}
              style={{
                backgroundColor: colors.background,
                paddingHorizontal: 10,
                paddingVertical: 4,
                borderRadius: 4,
              }}
            >
              <Text style={{ fontSize: 10, fontWeight: 500, color: colors.eggplant }}>
                {channel}
              </Text>
            </View>
          ))}
        </View>
      )}

      {/* Evaluation Summary — Dual Scores */}
      <View style={{ alignItems: 'center', marginBottom: 48 }}>
        <View style={[styles.card, { paddingHorizontal: 32, paddingVertical: 20, minWidth: 320 }]}>
          {evaluationSummary && evaluationSummary.totalRuns > 0 ? (
            <View>
              {/* Dual score row */}
              <View style={{ flexDirection: 'row', justifyContent: 'center', gap: 32, marginBottom: 8 }}>
                {/* Criteria score */}
                <View style={{ alignItems: 'center' }}>
                  <Text style={{ fontSize: 10, fontWeight: 500, color: colors.muted, marginBottom: 4 }}>
                    Criteria
                  </Text>
                  {evaluationSummary.criteriaRate !== null ? (
                    <>
                      <Text
                        style={{
                          fontSize: 24,
                          fontWeight: 700,
                          color: getScoreHexColor(evaluationSummary.criteriaRate),
                        }}
                      >
                        {Math.round(evaluationSummary.criteriaRate * 100)}%
                      </Text>
                      <Text style={{ fontSize: 9, color: colors.muted, marginTop: 2 }}>
                        {evaluationSummary.criteriaPassed}/{evaluationSummary.criteriaTotal} checks
                      </Text>
                    </>
                  ) : (
                    <Text style={{ fontSize: 14, color: colors.muted }}>-</Text>
                  )}
                </View>

                {/* Divider */}
                <View style={{ width: 1, backgroundColor: colors.border, marginVertical: 4 }} />

                {/* Rubric score */}
                <View style={{ alignItems: 'center' }}>
                  <Text style={{ fontSize: 10, fontWeight: 500, color: colors.muted, marginBottom: 4 }}>
                    Rubric
                  </Text>
                  {evaluationSummary.rubricRate !== null ? (
                    <>
                      <Text
                        style={{
                          fontSize: 24,
                          fontWeight: 700,
                          color: getScoreHexColor(evaluationSummary.rubricRate),
                        }}
                      >
                        {Math.round(evaluationSummary.rubricRate * 100)}%
                      </Text>
                      <Text style={{ fontSize: 9, color: colors.muted, marginTop: 2 }}>
                        {evaluationSummary.rubricRulesPassed}/{evaluationSummary.rubricRulesTotal} rules
                      </Text>
                    </>
                  ) : (
                    <Text style={{ fontSize: 14, color: colors.muted }}>-</Text>
                  )}
                </View>
              </View>

              {/* Run count */}
              <View style={{ alignItems: 'center' }}>
                <Text style={{ fontSize: 9, fontWeight: 400, color: colors.muted }}>
                  across {evaluationSummary.totalRuns} evaluation run{evaluationSummary.totalRuns !== 1 ? 's' : ''}
                </Text>
              </View>
            </View>
          ) : (
            <View style={{ alignItems: 'center' }}>
              <Text style={{ fontSize: 12, fontWeight: 500, color: colors.muted }}>
                Not yet evaluated
              </Text>
            </View>
          )}
        </View>
      </View>

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