'use client';

import * as React from 'react';
import { View as PDFView, Text as PDFText, StyleSheet, Image as PDFImage } from '@react-pdf/renderer';
import { DocumentTitle, Divider, COLORS, FONT_SIZES } from '../SharedUI';

const styles = StyleSheet.create({
    section: { marginBottom: 16 },
    pricingGrid: { marginTop: 12 },
    pricingRow: { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: COLORS.DIVIDER, paddingVertical: 12, alignItems: 'flex-start' },
    pricingTitle: { width: '30%', fontSize: FONT_SIZES.BODY, fontWeight: 'bold', color: COLORS.CHARCOAL, paddingRight: 15 },
    pricingDesc: { width: '55%', fontSize: FONT_SIZES.SUB, color: COLORS.TEXT_DIM, lineHeight: 1.5, paddingRight: 10 },
    pricingTag: { width: '15%', fontSize: FONT_SIZES.BODY, fontWeight: 'bold', textAlign: 'right', color: COLORS.CHARCOAL },
    configLabel: { fontSize: FONT_SIZES.BLUEPRINT, color: COLORS.TEXT_LIGHT, textTransform: 'uppercase', marginBottom: 8 },
});

export const techPageModule = ({ techDetails, headerIcon }: any) => (
    <>
        <DocumentTitle title="Technische Umsetzung" />
        <PDFView style={styles.section}>
            <PDFView style={styles.pricingGrid}>
                {techDetails?.map((item: any, i: number) => (
                    <PDFView key={i} style={styles.pricingRow}>
                        <PDFText style={[styles.pricingTitle, { width: '30%' }]}>{item.t}</PDFText>
                        <PDFText style={[styles.pricingDesc, { width: '70%', paddingRight: 0 }]}>{item.d}</PDFText>
                    </PDFView>
                ))}
            </PDFView>
        </PDFView>
    </>
);

export const TransparenzModule = ({ pricing }: any) => (
    <>
        <DocumentTitle title="Preis-Transparenz & Modell" />
        <PDFView style={styles.section}>
            <PDFView style={styles.pricingGrid}>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>Fundament</PDFText>
                    <PDFText style={styles.pricingDesc}>Setup, Infrastruktur, Hosting, SEO-Basics, Staging & Live-Umgebungen.</PDFText>
                    <PDFText style={styles.pricingTag}>{pricing.BASE_WEBSITE?.toLocaleString('de-DE')} €</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>Seiten</PDFText>
                    <PDFText style={styles.pricingDesc}>Layout & Umsetzung individueller Seiten. Responsive Design / Cross-Browser.</PDFText>
                    <PDFText style={styles.pricingTag}>{pricing.PAGE?.toLocaleString('de-DE')} € / Stk</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>Features</PDFText>
                    <PDFText style={styles.pricingDesc}>Abgeschlossene Systeme (z. B. Blog, Jobs, Produkte) inkl. Datenstruktur.</PDFText>
                    <PDFText style={styles.pricingTag}>{pricing.FEATURE?.toLocaleString('de-DE')} € / Stk</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>Funktionen</PDFText>
                    <PDFText style={styles.pricingDesc}>Logik-Einheiten wie Filter, Suchen oder Kontakt-Schnittstellen.</PDFText>
                    <PDFText style={styles.pricingTag}>{pricing.FUNCTION?.toLocaleString('de-DE')} € / Stk</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>Schnittstellen</PDFText>
                    <PDFText style={styles.pricingDesc}>Anbindung externer Systeme (CRM, ERP, Payment) zur Synchronisation.</PDFText>
                    <PDFText style={styles.pricingTag}>ab {pricing.API_INTEGRATION?.toLocaleString('de-DE')} € / Stk</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>CMS Setup</PDFText>
                    <PDFText style={styles.pricingDesc}>Konfiguration Headless CMS zur unabhängigen Datenpflege aller Module.</PDFText>
                    <PDFText style={pricing.CMS_SETUP ? styles.pricingTag : [styles.pricingTag, { color: COLORS.TEXT_LIGHT }]}>{pricing.CMS_SETUP?.toLocaleString('de-DE')} €</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>Inszenierung</PDFText>
                    <PDFText style={styles.pricingDesc}>Interaktions-Mechanismen, Konfiguratoren oder visuelles Storytelling.</PDFText>
                    <PDFText style={styles.pricingTag}>ab {pricing.VISUAL_STAGING?.toLocaleString('de-DE')} €</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>Sprachen</PDFText>
                    <PDFText style={styles.pricingDesc}>Skalierung der System-Architektur auf zusätzliche Sprachversionen.</PDFText>
                    <PDFText style={styles.pricingTag}>+20% / Sprache</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>Initial-Pflege</PDFText>
                    <PDFText style={styles.pricingDesc}>Manuelle Aufbereitung & Übernahme von Datensätzen in das Zielsystem.</PDFText>
                    <PDFText style={styles.pricingTag}>{pricing.NEW_DATASET?.toLocaleString('de-DE')} € / Stk</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>Sorglos-Paket</PDFText>
                    <PDFText style={styles.pricingDesc}>Betrieb, Hosting, Updates & Monitoring gemäß AGB Punkt 7a.</PDFText>
                    <PDFText style={styles.pricingTag}>Inklusive 1 Jahr</PDFText>
                </PDFView>
            </PDFView>
        </PDFView>
    </>
);

export const PrinciplesModule = ({ principles }: any) => (
    <>
        <DocumentTitle title="Prinzipien & Standards" />
        <PDFView style={[styles.pricingGrid, { marginTop: 8 }]}>
            {principles?.map((item: any, i: number) => (
                <PDFView key={i} style={styles.pricingRow}>
                    <PDFText style={[styles.pricingTitle, { width: '30%' }]}>{item.t}</PDFText>
                    <PDFText style={[styles.pricingDesc, { width: '70%', paddingRight: 0 }]}>{item.d}</PDFText>
                </PDFView>
            ))}
        </PDFView>
    </>
);

