import React from 'react';
import { Document, Page, StyleSheet, Text, View } from '@react-pdf/renderer';

import type { IReportData } from '../service/ai-readiness/ai-readiness.interface';

const humanizeIssue = (issue: string): string => {
  switch (issue) {
    case 'short_title':
      return 'Short Titles';
    case 'short_description':
      return 'Short Descriptions';
    case 'missing_image':
    case 'missing_images':
      return 'Missing Images';
    case 'insufficient_attribute_fields':
      return 'Insufficient Attributes';
    case 'incomplete_structured_attributes':
      return 'Incomplete Attributes';
    case 'missing_price':
      return 'Missing Prices';
    case 'missing_category':
      return 'Missing Categories';
    default:
      return issue;
  }
};

// Define styles
const styles = StyleSheet.create({
  page: {
    padding: 30,
    fontSize: 10,
    fontFamily: 'Helvetica',
    backgroundColor: '#ffffff',
  },
  headerPage: {
    padding: 40,
    backgroundColor: '#b7007c',
    minHeight: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  logo: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#ffffff',
    letterSpacing: 3,
    marginBottom: 20,
    opacity: 0.9,
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#ffffff',
    marginBottom: 10,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 14,
    color: '#ffffff',
    opacity: 0.9,
    marginBottom: 25,
    textAlign: 'center',
    maxWidth: 400,
  },
  scoreCircle: {
    width: 140,
    height: 140,
    borderRadius: 70,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 20,
  },
  scoreGreen: {
    backgroundColor: '#28a745',
  },
  scoreYellow: {
    backgroundColor: '#f9a825',
  },
  scoreRed: {
    backgroundColor: '#dc3545',
  },
  scoreValue: {
    fontSize: 42,
    fontWeight: 'bold',
    color: '#ffffff',
  },
  scoreLabel: {
    fontSize: 16,
    color: '#ffffff',
    opacity: 0.85,
  },
  status: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#ffffff',
    marginBottom: 15,
    textAlign: 'center',
  },
  insight: {
    fontSize: 12,
    color: '#ffffff',
    opacity: 0.9,
    marginBottom: 15,
    textAlign: 'center',
    maxWidth: 450,
  },
  date: {
    fontSize: 10,
    color: '#ffffff',
    opacity: 0.7,
  },
  sectionHeader: {
    marginBottom: 15,
    paddingBottom: 8,
    borderBottomWidth: 2,
    borderBottomColor: '#b7007c',
    borderBottomStyle: 'solid',
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#92005e',
    marginBottom: 4,
  },
  sectionSubtitle: {
    fontSize: 10,
    color: '#666666',
  },
  // Blockers
  blockerCard: {
    backgroundColor: '#ffffff',
    borderLeftWidth: 4,
    borderLeftColor: '#dc3545',
    borderLeftStyle: 'solid',
    borderRadius: 4,
    padding: 12,
    marginBottom: 10,
  },
  blockerCardHigh: {
    borderLeftColor: '#ffc107',
  },
  blockerHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  blockerTitle: {
    fontSize: 13,
    fontWeight: 'bold',
    color: '#1a1a2e',
  },
  priorityBadge: {
    paddingHorizontal: 8,
    paddingVertical: 3,
    borderRadius: 3,
    fontSize: 9,
    fontWeight: 'bold',
  },
  priorityUrgent: {
    backgroundColor: '#fdecea',
    color: '#dc3545',
  },
  priorityHigh: {
    backgroundColor: '#fff8e6',
    color: '#d97706',
  },
  blockerStats: {
    flexDirection: 'row',
    gap: 20,
    marginBottom: 8,
    fontSize: 10,
  },
  blockerImpact: {
    fontSize: 10,
    color: '#555555',
    padding: 8,
    backgroundColor: '#fff8e6',
    borderRadius: 4,
    marginBottom: 10,
  },
  examplesRow: {
    flexDirection: 'row',
    gap: 10,
  },
  example: {
    flex: 1,
    padding: 8,
    borderRadius: 4,
    fontSize: 9,
  },
  exampleBad: {
    backgroundColor: '#fdecea',
    borderLeftWidth: 3,
    borderLeftColor: '#dc3545',
    borderLeftStyle: 'solid',
  },
  exampleGood: {
    backgroundColor: '#e8f5e9',
    borderLeftWidth: 3,
    borderLeftColor: '#28a745',
    borderLeftStyle: 'solid',
  },
  exampleLabel: {
    fontWeight: 'bold',
    marginBottom: 3,
  },
  // Categories
  categoriesGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 10,
  },
  categoryCard: {
    width: '31%',
    backgroundColor: '#ffffff',
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderStyle: 'solid',
    borderRadius: 4,
    padding: 10,
    marginBottom: 10,
  },
  categoryHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 6,
  },
  categoryTitle: {
    fontSize: 11,
    fontWeight: 'bold',
    color: '#1a1a2e',
    maxWidth: 80,
  },
  gradeBadge: {
    paddingHorizontal: 6,
    paddingVertical: 3,
    borderRadius: 3,
    fontSize: 9,
    fontWeight: 'bold',
  },
  gradeA: { backgroundColor: '#e8f5e9', color: '#28a745' },
  gradeB: { backgroundColor: '#e3f2fd', color: '#0d6efd' },
  gradeC: { backgroundColor: '#fff8e6', color: '#856404' },
  gradeD: { backgroundColor: '#fdecea', color: '#dc3545' },
  categoryMeta: {
    fontSize: 9,
    color: '#888888',
    marginBottom: 6,
  },
  weaknesses: {
    fontSize: 9,
    marginBottom: 6,
  },
  weaknessItem: {
    color: '#666666',
    marginLeft: 8,
    marginBottom: 2,
  },
  categoryPriority: {
    fontSize: 9,
    padding: 6,
    backgroundColor: '#fff8e6',
    borderRadius: 3,
  },
  // Action Plan
  actionItem: {
    flexDirection: 'row',
    gap: 10,
    padding: 12,
    backgroundColor: '#f8f9fa',
    borderLeftWidth: 4,
    borderLeftColor: '#b7007c',
    borderLeftStyle: 'solid',
    borderRadius: 4,
    marginBottom: 8,
  },
  actionNumber: {
    width: 26,
    height: 26,
    borderRadius: 13,
    backgroundColor: '#b7007c',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  actionNumberText: {
    color: '#ffffff',
    fontSize: 12,
    fontWeight: 'bold',
  },
  actionContent: {
    flex: 1,
  },
  actionTitle: {
    fontSize: 12,
    fontWeight: 'bold',
    color: '#1a1a2e',
    marginBottom: 4,
  },
  actionImpact: {
    fontSize: 10,
    color: '#555555',
    marginBottom: 3,
  },
  actionEffort: {
    fontSize: 9,
    color: '#888888',
  },
  // Stats
  statsRow: {
    flexDirection: 'row',
    gap: 15,
    marginBottom: 20,
  },
  statBox: {
    flex: 1,
    backgroundColor: '#667eea',
    padding: 15,
    borderRadius: 6,
    alignItems: 'center',
  },
  statValue: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#ffffff',
  },
  statLabel: {
    fontSize: 10,
    color: '#ffffff',
    opacity: 0.9,
  },
  // Performance
  performanceSection: {
    backgroundColor: '#f8f9fa',
    borderRadius: 6,
    padding: 15,
    marginBottom: 15,
  },
  performanceTitle: {
    fontSize: 14,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  performanceGrid: {
    flexDirection: 'row',
    gap: 20,
    marginBottom: 10,
  },
  performanceMain: {
    flex: 1,
    alignItems: 'center',
  },
  performanceTime: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  performanceLabel: {
    fontSize: 10,
    color: '#666666',
    marginBottom: 6,
  },
  performanceRating: {
    paddingHorizontal: 8,
    paddingVertical: 3,
    borderRadius: 3,
    fontSize: 9,
    fontWeight: 'bold',
  },
  ratingGood: { backgroundColor: '#e8f5e9', color: '#28a745' },
  ratingWarning: { backgroundColor: '#fff8e6', color: '#d97706' },
  performanceDetails: {
    flex: 1,
    fontSize: 10,
    color: '#555555',
  },
  performanceExplanation: {
    fontSize: 10,
    padding: 10,
    backgroundColor: '#ffffff',
    borderRadius: 4,
  },
  // Missing pages
  missingPagesSection: {
    marginTop: 15,
  },
  missingPagesTitle: {
    fontSize: 12,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  missingPagesList: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 6,
    marginBottom: 8,
  },
  missingPageTag: {
    backgroundColor: '#fdecea',
    color: '#dc3545',
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 3,
    fontSize: 10,
    fontWeight: 'bold',
  },
  missingPagesNote: {
    fontSize: 9,
    color: '#888888',
  },
  // AI Section
  aiSection: {
    marginBottom: 20,
  },
  successRateBox: {
    backgroundColor: '#667eea',
    padding: 18,
    borderRadius: 6,
    alignItems: 'center',
    marginBottom: 12,
  },
  successRateValue: {
    fontSize: 36,
    fontWeight: 'bold',
    color: '#ffffff',
    marginBottom: 6,
  },
  successRateLabel: {
    fontSize: 12,
    color: '#ffffff',
    opacity: 0.9,
    textAlign: 'center',
  },
  explanation: {
    fontSize: 10,
    padding: 12,
    backgroundColor: '#f8f9fa',
    borderRadius: 4,
  },
  // Simulation examples
  examplesList: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 10,
    marginBottom: 15,
  },
  simulationExample: {
    width: '48%',
    backgroundColor: '#ffffff',
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderStyle: 'solid',
    borderRadius: 4,
    padding: 10,
    marginBottom: 10,
  },
  question: {
    fontSize: 11,
    fontWeight: 'bold',
    marginBottom: 6,
  },
  aiResponse: {
    fontSize: 9,
    padding: 8,
    backgroundColor: '#f8f9fa',
    borderRadius: 3,
    marginBottom: 6,
  },
  missingData: {
    fontSize: 9,
    padding: 6,
    backgroundColor: '#fff8e6',
    borderLeftWidth: 2,
    borderLeftColor: '#ffc107',
    borderLeftStyle: 'solid',
    borderRadius: 3,
    marginBottom: 6,
  },
  impactRow: {
    fontSize: 9,
    color: '#666666',
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  impactBadge: {
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 2,
    fontSize: 8,
    fontWeight: 'bold',
  },
  impactHigh: { backgroundColor: '#fdecea', color: '#dc3545' },
  impactMedium: { backgroundColor: '#fff8e6', color: '#d97706' },
  impactLow: { backgroundColor: '#e3f2fd', color: '#0d6efd' },
  improvements: {
    backgroundColor: '#f8f9fa',
    borderLeftWidth: 4,
    borderLeftColor: '#b7007c',
    borderLeftStyle: 'solid',
    borderRadius: 4,
    padding: 12,
  },
  improvementsTitle: {
    fontSize: 12,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  improvementItem: {
    fontSize: 10,
    color: '#555555',
    marginLeft: 10,
    marginBottom: 4,
  },
  // Products
  productsGrid: {
    flexDirection: 'row',
    gap: 20,
  },
  productsColumn: {
    flex: 1,
  },
  productsTitle: {
    fontSize: 13,
    fontWeight: 'bold',
    marginBottom: 10,
    paddingBottom: 6,
    borderBottomWidth: 2,
    borderBottomStyle: 'solid',
  },
  productsTitleGood: {
    color: '#28a745',
    borderBottomColor: '#28a745',
  },
  productsTitleBad: {
    color: '#dc3545',
    borderBottomColor: '#dc3545',
  },
  productCard: {
    padding: 8,
    borderRadius: 3,
    marginBottom: 6,
    borderLeftWidth: 3,
    borderLeftStyle: 'solid',
  },
  productCardGood: {
    backgroundColor: '#e8f5e9',
    borderLeftColor: '#28a745',
  },
  productCardBad: {
    backgroundColor: '#fdecea',
    borderLeftColor: '#dc3545',
  },
  productName: {
    fontSize: 10,
    fontWeight: 'bold',
    color: '#1a1a2e',
    marginBottom: 2,
  },
  productSku: {
    fontSize: 9,
    color: '#888888',
  },
  // Footer
  footer: {
    textAlign: 'center',
    padding: 15,
    backgroundColor: '#f8f9fa',
    borderTopWidth: 1,
    borderTopColor: '#e0e0e0',
    borderTopStyle: 'solid',
    fontSize: 10,
    color: '#888888',
  },
});

const getScoreStyle = (score: number) => {
  if (score >= 70) return styles.scoreGreen;
  if (score >= 50) return styles.scoreYellow;

  return styles.scoreRed;
};

const getGradeStyle = (grade: string) => {
  const g = grade[0].toLowerCase();
  if (g === 'a') return styles.gradeA;
  if (g === 'b') return styles.gradeB;
  if (g === 'c') return styles.gradeC;

  return styles.gradeD;
};

export const AiReadinessPdfDocument = ({
  reportData,
}: {
  reportData: IReportData;
}) => {
  const { overall_assessment, sample_info } = reportData;
  const insightSummary =
    overall_assessment.insight_summary ||
    reportData.ai_conversation_scenarios?.explanation;

  return (
    <Document>
      {/* Page 1: Header */}
      <Page size="A3" orientation="landscape" style={styles.headerPage}>
        <Text style={styles.logo}>RECOMAZE</Text>
        <Text style={styles.title}>AI Discoverability Report</Text>
        <Text style={styles.subtitle}>{overall_assessment.headline}</Text>

        <View
          style={[styles.scoreCircle, getScoreStyle(overall_assessment.score)]}
        >
          <Text style={styles.scoreValue}>{overall_assessment.score}</Text>
          <Text style={styles.scoreLabel}>/100</Text>
        </View>

        <Text style={styles.status}>
          {overall_assessment.ready_for_ai
            ? 'Your catalog is AI-ready!'
            : 'Improvements needed for optimal AI performance'}
        </Text>

        {insightSummary && <Text style={styles.insight}>{insightSummary}</Text>}

        {sample_info && (
          <Text style={styles.date}>
            Products Analyzed: {sample_info.products_analyzed}
            {sample_info.total_products
              ? ` of ${sample_info.total_products} (${sample_info.sample_percentage}%)`
              : ''}
          </Text>
        )}

        <Text style={styles.date}>
          Generated:{' '}
          {new Date(overall_assessment.generated_at).toLocaleDateString()}
        </Text>
      </Page>

      {/* Page 2: Critical Blockers */}
      {reportData.critical_blockers &&
        reportData.critical_blockers.length > 0 && (
          <Page size="A3" orientation="landscape" style={styles.page}>
            <View style={styles.sectionHeader}>
              <Text style={styles.sectionTitle}>Critical Blockers</Text>
              <Text style={styles.sectionSubtitle}>
                Issues preventing AI from answering customer questions
                effectively
              </Text>
            </View>

            {reportData.critical_blockers.map((blocker, idx) => (
              <View
                key={idx}
                style={
                  blocker.priority.toLowerCase() === 'high'
                    ? [styles.blockerCard, styles.blockerCardHigh]
                    : styles.blockerCard
                }
              >
                <View style={styles.blockerHeader}>
                  <Text style={styles.blockerTitle}>
                    {humanizeIssue(blocker.issue)}
                  </Text>
                  <Text
                    style={[
                      styles.priorityBadge,
                      blocker.priority.toLowerCase() === 'urgent'
                        ? styles.priorityUrgent
                        : styles.priorityHigh,
                    ]}
                  >
                    {blocker.priority}
                  </Text>
                </View>

                <View style={styles.blockerStats}>
                  <Text>Affected: {blocker.affected_percentage}%</Text>
                  <Text>Effort: {blocker.effort}</Text>
                </View>

                <Text style={styles.blockerImpact}>{blocker.impact}</Text>

                <View style={styles.examplesRow}>
                  <View style={[styles.example, styles.exampleBad]}>
                    <Text style={styles.exampleLabel}>Bad:</Text>
                    <Text>{blocker.example_bad}</Text>
                  </View>
                  <View style={[styles.example, styles.exampleGood]}>
                    <Text style={styles.exampleLabel}>Good:</Text>
                    <Text>{blocker.example_good}</Text>
                  </View>
                </View>
              </View>
            ))}
          </Page>
        )}

      {/* Page 3: Category Analysis */}
      {reportData.category_analysis &&
        Object.keys(reportData.category_analysis).length > 0 && (
          <Page size="A3" orientation="landscape" style={styles.page}>
            <View style={styles.sectionHeader}>
              <Text style={styles.sectionTitle}>Category Analysis</Text>
              <Text style={styles.sectionSubtitle}>
                Per-category breakdown of AI readiness
              </Text>
            </View>

            <View style={styles.categoriesGrid}>
              {Object.entries(reportData.category_analysis).map(
                ([category, analysis]) => (
                  <View key={category} style={styles.categoryCard}>
                    <View style={styles.categoryHeader}>
                      <Text style={styles.categoryTitle}>{category}</Text>
                      <Text
                        style={[
                          styles.gradeBadge,
                          getGradeStyle(analysis.grade),
                        ]}
                      >
                        {analysis.score}/100
                      </Text>
                    </View>

                    <Text style={styles.categoryMeta}>
                      {analysis.total_products} products
                    </Text>

                    {analysis.weaknesses && analysis.weaknesses.length > 0 && (
                      <View style={styles.weaknesses}>
                        <Text style={{ fontWeight: 'bold' }}>Issues:</Text>
                        {analysis.weaknesses.slice(0, 2).map((w, i) => (
                          <Text key={i} style={styles.weaknessItem}>
                            • {w}
                          </Text>
                        ))}
                      </View>
                    )}

                    <Text style={styles.categoryPriority}>
                      Priority: {analysis.top_priority}
                    </Text>
                  </View>
                )
              )}
            </View>
          </Page>
        )}

      {/* Page 4: Action Plan */}
      {reportData.action_plan?.top_priorities &&
        reportData.action_plan.top_priorities.length > 0 && (
          <Page size="A3" orientation="landscape" style={styles.page}>
            <View style={styles.sectionHeader}>
              <Text style={styles.sectionTitle}>Action Plan</Text>
              <Text style={styles.sectionSubtitle}>
                Prioritized tasks to improve your AI readiness
              </Text>
            </View>

            {reportData.action_plan.top_priorities.map((priority, idx) => (
              <View key={idx} style={styles.actionItem}>
                <View style={styles.actionNumber}>
                  <Text style={styles.actionNumberText}>{idx + 1}</Text>
                </View>
                <View style={styles.actionContent}>
                  <Text style={styles.actionTitle}>{priority.task}</Text>
                  <Text style={styles.actionImpact}>{priority.impact}</Text>
                  <Text style={styles.actionEffort}>
                    Effort: {priority.effort}
                  </Text>
                </View>
              </View>
            ))}
          </Page>
        )}

      {/* Page 5: Website Analysis */}
      {reportData.website_content_analysis && (
        <Page size="A3" orientation="landscape" style={styles.page}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>Website Content Analysis</Text>
          </View>

          <View style={styles.statsRow}>
            <View style={styles.statBox}>
              <Text style={styles.statValue}>
                {reportData.website_content_analysis.pages_found}
              </Text>
              <Text style={styles.statLabel}>Pages Analyzed</Text>
            </View>
            <View style={styles.statBox}>
              <Text style={styles.statValue}>
                {reportData.website_content_analysis.missing_pages.length}
              </Text>
              <Text style={styles.statLabel}>Missing Pages</Text>
            </View>
          </View>

          {reportData.website_content_analysis.performance && (
            <View style={styles.performanceSection}>
              <Text style={styles.performanceTitle}>Page Load Performance</Text>
              <View style={styles.performanceGrid}>
                <View style={styles.performanceMain}>
                  <Text
                    style={[
                      styles.performanceTime,
                      {
                        color:
                          reportData.website_content_analysis.performance.color,
                      },
                    ]}
                  >
                    {
                      reportData.website_content_analysis.performance
                        .average_load_time
                    }
                    s
                  </Text>
                  <Text style={styles.performanceLabel}>Average Load Time</Text>
                  <Text
                    style={[
                      styles.performanceRating,
                      reportData.website_content_analysis.performance.rating ===
                      'good'
                        ? styles.ratingGood
                        : styles.ratingWarning,
                    ]}
                  >
                    {reportData.website_content_analysis.performance.rating.toUpperCase()}
                  </Text>
                </View>
                <View style={styles.performanceDetails}>
                  <Text>
                    Min:{' '}
                    {
                      reportData.website_content_analysis.performance
                        .min_load_time
                    }
                    s
                  </Text>
                  <Text>
                    Max:{' '}
                    {
                      reportData.website_content_analysis.performance
                        .max_load_time
                    }
                    s
                  </Text>
                  <Text>
                    Slow pages:{' '}
                    {
                      reportData.website_content_analysis.performance
                        .slow_pages_count
                    }
                  </Text>
                </View>
              </View>

              <Text style={styles.performanceExplanation}>
                Impact:{' '}
                {reportData.website_content_analysis.performance.explanation}
              </Text>
            </View>
          )}

          {reportData.website_content_analysis.missing_pages.length > 0 && (
            <View style={styles.missingPagesSection}>
              <Text style={styles.missingPagesTitle}>
                Missing Critical Pages:
              </Text>
              <View style={styles.missingPagesList}>
                {reportData.website_content_analysis.missing_pages.map(
                  (p, i) => (
                    <Text key={i} style={styles.missingPageTag}>
                      {p}
                    </Text>
                  )
                )}
              </View>
              <Text style={styles.missingPagesNote}>
                AI cannot answer questions about these topics without this
                content.
              </Text>
            </View>
          )}
        </Page>
      )}

      {/* Page 6: AI Conversation */}
      {(reportData.ai_conversation_scenarios ||
        reportData.ai_response_simulation) && (
        <Page size="A3" orientation="landscape" style={styles.page}>
          {reportData.ai_conversation_scenarios && (
            <View style={styles.aiSection}>
              <View style={styles.sectionHeader}>
                <Text style={styles.sectionTitle}>
                  AI Conversation Success Rate
                </Text>
              </View>

              <View style={styles.successRateBox}>
                <Text style={styles.successRateValue}>
                  {reportData.ai_conversation_scenarios.success_rate}
                </Text>
                <Text style={styles.successRateLabel}>
                  of typical customer questions can be answered by AI
                </Text>
              </View>

              <Text style={styles.explanation}>
                {reportData.ai_conversation_scenarios.explanation}
              </Text>
            </View>
          )}

          {reportData.ai_response_simulation && (
            <View style={styles.aiSection}>
              <View style={styles.sectionHeader}>
                <Text style={styles.sectionTitle}>AI Response Simulation</Text>
                <Text style={styles.sectionSubtitle}>
                  How well can AI answer customer questions?
                </Text>
              </View>

              <View style={styles.successRateBox}>
                <Text style={styles.successRateValue}>
                  {reportData.ai_response_simulation.overall_answerability}
                </Text>
                <Text style={styles.successRateLabel}>
                  of questions can be answered with current data
                </Text>
              </View>

              <Text style={styles.explanation}>
                Summary: {reportData.ai_response_simulation.summary}
              </Text>
            </View>
          )}
        </Page>
      )}

      {/* Page 7: Simulation Examples */}
      {reportData.ai_response_simulation?.simulation_examples &&
        reportData.ai_response_simulation.simulation_examples.length > 0 && (
          <Page size="A3" orientation="landscape" style={styles.page}>
            <View style={styles.sectionHeader}>
              <Text style={styles.sectionTitle}>
                Example Questions & AI Responses
              </Text>
            </View>

            <View style={styles.examplesList}>
              {reportData.ai_response_simulation.simulation_examples.map(
                (ex, idx) => (
                  <View key={idx} style={styles.simulationExample}>
                    <Text style={styles.question}>Q: {ex.question}</Text>
                    <Text style={styles.aiResponse}>
                      AI: {ex.sample_response}
                    </Text>
                    {ex.missing_data && (
                      <Text style={styles.missingData}>
                        Missing: {ex.missing_data}
                      </Text>
                    )}
                    <View style={styles.impactRow}>
                      <Text>Impact: </Text>
                      <Text
                        style={[
                          styles.impactBadge,
                          ex.improvement_impact === 'high'
                            ? styles.impactHigh
                            : ex.improvement_impact === 'medium'
                              ? styles.impactMedium
                              : styles.impactLow,
                        ]}
                      >
                        {ex.improvement_impact.toUpperCase()}
                      </Text>
                    </View>
                  </View>
                )
              )}
            </View>

            {reportData.ai_response_simulation.key_improvements &&
              reportData.ai_response_simulation.key_improvements.length > 0 && (
                <View style={styles.improvements}>
                  <Text style={styles.improvementsTitle}>
                    Key Improvements to Boost AI Responses
                  </Text>
                  {reportData.ai_response_simulation.key_improvements.map(
                    (imp, i) => (
                      <Text key={i} style={styles.improvementItem}>
                        • {imp}
                      </Text>
                    )
                  )}
                </View>
              )}
          </Page>
        )}

      {/* Page 8: Product Examples */}
      {reportData.product_examples && (
        <Page size="A3" orientation="landscape" style={styles.page}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>Product Examples</Text>
          </View>

          <View style={styles.productsGrid}>
            <View style={styles.productsColumn}>
              <Text style={[styles.productsTitle, styles.productsTitleGood]}>
                Well-Optimized Products
              </Text>
              {reportData.product_examples.good_examples.map((ex, idx) => (
                <View
                  key={idx}
                  style={[styles.productCard, styles.productCardGood]}
                >
                  <Text style={styles.productName}>{ex.name}</Text>
                  <Text style={styles.productSku}>SKU: {ex.sku}</Text>
                </View>
              ))}
            </View>

            <View style={styles.productsColumn}>
              <Text style={[styles.productsTitle, styles.productsTitleBad]}>
                Needs Improvement
              </Text>
              {reportData.product_examples.bad_examples.map((ex, idx) => (
                <View
                  key={idx}
                  style={[styles.productCard, styles.productCardBad]}
                >
                  <Text style={styles.productName}>{ex.name}</Text>
                  <Text style={styles.productSku}>SKU: {ex.sku}</Text>
                </View>
              ))}
            </View>
          </View>

          <View style={styles.footer}>
            <Text>Generated by Recomaze AI Discoverability Analysis</Text>
            <Text>www.recomaze.ai</Text>
          </View>
        </Page>
      )}
    </Document>
  );
};

export default AiReadinessPdfDocument;