import * as React from 'react';
import { Document, Page, View, Text, StyleSheet } from '@react-pdf/renderer';
import { ProductData, ProductDatasheetPage } from './pdf-datasheet';

const styles = StyleSheet.create({
  cover: {
    backgroundColor: '#001a4d', // Navy
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    color: '#FFFFFF',
    padding: 40,
  },
  logoContainer: {
    marginBottom: 40,
  },
  logoText: {
    fontSize: 64,
    fontWeight: 700,
    letterSpacing: 4,
  },
  title: {
    fontSize: 32,
    fontWeight: 700,
    textTransform: 'uppercase',
    letterSpacing: 2,
    marginBottom: 20,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 16,
    color: '#82ed20', // Accent Green
    textTransform: 'uppercase',
    letterSpacing: 4,
    marginBottom: 60,
  },
  footer: {
    position: 'absolute',
    bottom: 60,
    fontSize: 10,
    textTransform: 'uppercase',
    letterSpacing: 2,
    color: '#e5e7eb',
  },
  accentBar: {
    width: 60,
    height: 4,
    backgroundColor: '#82ed20',
    marginBottom: 40,
  },
});

interface PDFBrochureProps {
  products: ProductData[];
  locale: 'en' | 'de';
  title?: string;
  subtitle?: string;
}

export const PDFBrochure: React.FC<PDFBrochureProps> = ({
  products,
  locale,
  title = locale === 'de' ? 'Produktkatalog' : 'Product Catalog',
  subtitle = '2026',
}) => {
  const dateStr = new Date().toLocaleDateString(locale === 'en' ? 'en-US' : 'de-DE', {
    year: 'numeric',
    month: 'long',
  });

  return (
    <Document>
      {/* Cover Page */}
      <Page size="A4" style={styles.cover}>
        <View style={styles.logoContainer}>
          <Text style={styles.logoText}>KLZ</Text>
        </View>
        <View style={styles.accentBar} />
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.subtitle}>{subtitle}</Text>
        
        <View style={styles.footer}>
          <Text>{dateStr} — KLZ CABLES</Text>
        </View>
      </Page>

      {/* Product Pages */}
      {products.map((product) => (
        <ProductDatasheetPage key={product.id} product={product} locale={locale} />
      ))}
    </Document>
  );
};