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

// Register fonts (using system fonts for now, can be customized)
Font.register({
  family: 'Helvetica',
  fonts: [
    { src: '/fonts/Helvetica.ttf', fontWeight: 400 },
    { src: '/fonts/Helvetica-Bold.ttf', fontWeight: 700 },
  ],
});

// ─── Brand Tokens (matching brochure) ────────────────────────────────────────
const C = {
  navy: '#001a4d',
  navyDeep: '#000d26',
  green: '#4da612',
  greenLight: '#e8f5d8',
  white: '#FFFFFF',
  offWhite: '#f8f9fa',
  gray100: '#f3f4f6',
  gray200: '#e5e7eb',
  gray300: '#d1d5db',
  gray400: '#9ca3af',
  gray600: '#4b5563',
  gray900: '#111827',
};

const MARGIN = 56;

const styles = StyleSheet.create({
  page: {
    color: C.gray900,
    lineHeight: 1.5,
    backgroundColor: C.white,
    paddingTop: 0,
    paddingBottom: 80,
    fontFamily: 'Helvetica',
  },

  // Hero-style header
  hero: {
    backgroundColor: C.white,
    paddingTop: 24,
    paddingBottom: 0,
    paddingHorizontal: MARGIN,
    marginBottom: 20,
    position: 'relative',
    borderBottomWidth: 0,
  },

  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16,
  },

  logoText: {
    fontSize: 22,
    fontWeight: 700,
    color: C.navyDeep,
    letterSpacing: 2,
    textTransform: 'uppercase',
  },

  docTitle: {
    fontSize: 8,
    fontWeight: 700,
    color: C.green,
    letterSpacing: 2,
    textTransform: 'uppercase',
  },

  productRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 20,
  },
  productInfoCol: {
    flex: 1,
    justifyContent: 'center',
  },
  productImageCol: {
    flex: 1,
    height: 120,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
    borderWidth: 1,
    borderColor: C.gray200,
    backgroundColor: C.white,
    overflow: 'hidden',
  },

  // Product Hero Info
  productHero: {
    marginTop: 0,
  },

  productName: {
    fontSize: 24,
    fontWeight: 700,
    color: C.navyDeep,
    marginBottom: 0,
    textTransform: 'uppercase',
    letterSpacing: -0.5,
  },

  productMeta: {
    fontSize: 10,
    color: C.gray600,
    fontWeight: 700,
    textTransform: 'uppercase',
    letterSpacing: 1,
  },

  heroImage: {
    width: '100%',
    height: '100%',
    objectFit: 'contain',
  },

  noImage: {
    fontSize: 8,
    color: C.gray400,
    textAlign: 'center',
  },

  // Content Area
  content: {
    paddingHorizontal: MARGIN,
  },

  // Content sections
  section: {
    marginBottom: 20,
  },

  sectionTitle: {
    fontSize: 8,
    fontWeight: 700,
    color: C.green,
    marginBottom: 6,
    textTransform: 'uppercase',
    letterSpacing: 1.5,
  },

  sectionAccent: {
    width: 30,
    height: 2,
    backgroundColor: C.green,
    marginBottom: 8,
    borderRadius: 1,
  },

  description: {
    fontSize: 10,
    lineHeight: 1.7,
    color: C.gray600,
  },

  // Technical data table
  specsTable: {
    marginTop: 4,
    borderWidth: 0,
    borderRadius: 0,
    overflow: 'hidden',
  },

  specsTableRow: {
    flexDirection: 'row',
    borderBottomWidth: 0.5,
    borderBottomColor: C.gray200,
  },

  specsTableRowLast: {
    borderBottomWidth: 0,
  },

  specsTableLabelCell: {
    flex: 1,
    paddingVertical: 5,
    paddingHorizontal: 12,
    backgroundColor: C.offWhite,
    borderRightWidth: 0.5,
    borderRightColor: C.gray200,
  },

  specsTableValueCell: {
    flex: 1,
    paddingVertical: 5,
    paddingHorizontal: 12,
  },

  specsTableLabelText: {
    fontSize: 8,
    fontWeight: 700,
    color: C.navyDeep,
    textTransform: 'uppercase',
    letterSpacing: 0.5,
  },

  specsTableValueText: {
    fontSize: 9,
    color: C.gray900,
    fontWeight: 400,
  },

  // Categories
  categories: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 6,
  },

  categoryTag: {
    backgroundColor: C.offWhite,
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderWidth: 0.5,
    borderColor: C.gray200,
    borderRadius: 3,
  },

  categoryText: {
    fontSize: 7,
    color: C.gray600,
    fontWeight: 700,
    textTransform: 'uppercase',
    letterSpacing: 0.5,
  },

  // Footer — matches brochure style
  footer: {
    position: 'absolute',
    bottom: 28,
    left: MARGIN,
    right: MARGIN,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingTop: 12,
    borderTopWidth: 2,
    borderTopColor: C.green,
  },

  footerText: {
    fontSize: 7,
    color: C.gray400,
    fontWeight: 400,
    textTransform: 'uppercase',
    letterSpacing: 0.8,
  },

  footerBrand: {
    fontSize: 9,
    fontWeight: 700,
    color: C.navyDeep,
    textTransform: 'uppercase',
    letterSpacing: 1.5,
  },
});

interface ProductData {
  id: number;
  name: string;
  shortDescriptionHtml: string;
  descriptionHtml: string;
  applicationHtml?: string;
  images: string[];
  featuredImage: string | null;
  sku: string;
  categories: Array<{ name: string }>;
  attributes: Array<{
    name: string;
    options: string[];
  }>;
}

interface PDFDatasheetProps {
  product: ProductData;
  locale: 'en' | 'de';
  logoUrl?: string;
}

// Helper to strip HTML tags
const stripHtml = (html: string): string => {
  return html.replace(/<[^>]*>/g, '');
};

// Helper to get translated labels
const getLabels = (locale: 'en' | 'de') => {
  const labels = {
    en: {
      productDatasheet: 'Technical Datasheet',
      description: 'APPLICATION',
      specifications: 'TECHNICAL DATA',
      categories: 'CATEGORIES',
      sku: 'SKU',
      noImage: 'No image available',
    },
    de: {
      productDatasheet: 'Technisches Datenblatt',
      description: 'ANWENDUNG',
      specifications: 'TECHNISCHE DATEN',
      categories: 'KATEGORIEN',
      sku: 'ARTIKELNUMMER',
      noImage: 'Kein Bild verfügbar',
    },
  };
  return labels[locale];
};

export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({ product, locale }) => {
  const labels = getLabels(locale);

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        {/* Hero Header */}
        <View style={styles.hero}>
          <View style={styles.header}>
            <View>
              <Text style={styles.logoText}>KLZ</Text>
            </View>
            <Text style={styles.docTitle}>{labels.productDatasheet}</Text>
          </View>

          <View style={styles.productRow}>
            <View style={styles.productInfoCol}>
              <View style={styles.productHero}>
                <View style={styles.categories}>
                  {product.categories.map((cat, index) => (
                    <Text key={index} style={styles.productMeta}>
                      {cat.name}
                      {index < product.categories.length - 1 ? ' • ' : ''}
                    </Text>
                  ))}
                </View>
                <Text style={styles.productName}>{product.name}</Text>
              </View>
            </View>
            <View style={styles.productImageCol}>
              {product.featuredImage ? (
                <Image src={product.featuredImage} style={styles.heroImage} />
              ) : (
                <Text style={styles.noImage}>{labels.noImage}</Text>
              )}
            </View>
          </View>
        </View>

        <View style={styles.content}>
          {/* Description section */}
          {(product.applicationHtml || product.shortDescriptionHtml || product.descriptionHtml) && (
            <View style={styles.section}>
              <Text style={styles.sectionTitle}>{labels.description}</Text>
              <View style={styles.sectionAccent} />
              <Text style={styles.description}>
                {stripHtml(
                  product.applicationHtml ||
                    product.shortDescriptionHtml ||
                    product.descriptionHtml,
                )}
              </Text>
            </View>
          )}

          {/* Technical specifications */}
          {product.attributes && product.attributes.length > 0 && (
            <View style={styles.section}>
              <Text style={styles.sectionTitle}>{labels.specifications}</Text>
              <View style={styles.sectionAccent} />
              <View style={styles.specsTable}>
                {product.attributes.map((attr, index) => (
                  <View
                    key={index}
                    style={[
                      styles.specsTableRow,
                      index === product.attributes.length - 1 && styles.specsTableRowLast,
                    ]}
                  >
                    <View style={styles.specsTableLabelCell}>
                      <Text style={styles.specsTableLabelText}>{attr.name}</Text>
                    </View>
                    <View style={styles.specsTableValueCell}>
                      <Text style={styles.specsTableValueText}>{attr.options.join(', ')}</Text>
                    </View>
                  </View>
                ))}
              </View>
            </View>
          )}

          {/* Categories as clean tags */}
          {product.categories && product.categories.length > 0 && (
            <View style={styles.section}>
              <Text style={styles.sectionTitle}>{labels.categories}</Text>
              <View style={styles.sectionAccent} />
              <View style={styles.categories}>
                {product.categories.map((cat, index) => (
                  <View key={index} style={styles.categoryTag}>
                    <Text style={styles.categoryText}>{cat.name}</Text>
                  </View>
                ))}
              </View>
            </View>
          )}
        </View>

        {/* Minimal footer */}
        <View style={styles.footer} fixed>
          <Text style={styles.footerBrand}>KLZ CABLES</Text>
          <Text style={styles.footerText}>
            {new Date().toLocaleDateString(locale === 'en' ? 'en-US' : 'de-DE', {
              year: 'numeric',
              month: 'long',
              day: 'numeric',
            })}
          </Text>
        </View>
      </Page>
    </Document>
  );
};
