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

import type { DatasheetModel, DatasheetVoltageTable } from '../model/types';
import { CONFIG } from '../model/utils';
import { styles } from './styles';
import { Header } from './components/Header';
import { Footer } from './components/Footer';
import { Section } from './components/Section';
import { KeyValueGrid } from './components/KeyValueGrid';
import { DenseTable } from './components/DenseTable';

type Assets = {
  logoDataUrl: string | null;
  heroDataUrl: string | null;
  qrDataUrl: string | null;
};

export function DatasheetDocument(props: { model: DatasheetModel; assets: Assets }): React.ReactElement {
  const { model, assets } = props;
  const headerTitle = model.labels.datasheet;

  // Dense tables require compact headers (no wrapping). Use standard abbreviations.
  const firstColLabel = model.locale === 'de' ? 'Adern & QS' : 'Cores & CS';

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <Header title={headerTitle} logoDataUrl={assets.logoDataUrl} qrDataUrl={assets.qrDataUrl} />
        <Footer locale={model.locale} siteUrl={CONFIG.siteUrl} />

        <Text style={styles.h1}>{model.product.name}</Text>
        {model.product.categoriesLine ? <Text style={styles.subhead}>{model.product.categoriesLine}</Text> : null}

        <View style={styles.heroBox}>
          {assets.heroDataUrl ? (
            <Image src={assets.heroDataUrl} style={styles.heroImage} />
          ) : (
            <Text style={styles.noImage}>{model.labels.noImage}</Text>
          )}
        </View>

        {model.product.descriptionText ? (
          <Section title={model.labels.description}>
            <Text style={styles.body}>{model.product.descriptionText}</Text>
          </Section>
        ) : null}

        {model.technicalItems.length ? (
          <Section title={model.labels.technicalData}>
            <KeyValueGrid items={model.technicalItems} />
          </Section>
        ) : null}
      </Page>

      {/*
        Render all voltage sections in a single flow so React-PDF can paginate naturally.
        This avoids hard page breaks that waste remaining whitespace at the bottom of a page.
      */}
      <Page size="A4" style={styles.page}>
        <Header title={headerTitle} logoDataUrl={assets.logoDataUrl} qrDataUrl={assets.qrDataUrl} />
        <Footer locale={model.locale} siteUrl={CONFIG.siteUrl} />

        {model.voltageTables.map((t: DatasheetVoltageTable) => (
          <View key={t.voltageLabel}>
            <Section
              title={`${model.labels.crossSection} — ${t.voltageLabel}`}
              // Prevent orphaned voltage headings at page bottom; let the rest flow.
              minPresenceAhead={140}
            >
              {t.metaItems.length ? <KeyValueGrid items={t.metaItems} /> : null}
            </Section>

            <DenseTable table={{ columns: t.columns, rows: t.rows }} firstColLabel={firstColLabel} />
          </View>
        ))}
      </Page>
    </Document>
  );
}
