"use client";

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

const styles = StyleSheet.create({
    section: { marginBottom: 24 },
    ledgerRow: {
        paddingVertical: 14,
        borderBottomWidth: 1,
        borderBottomColor: COLORS.GRID,
        flexDirection: "row",
        alignItems: "flex-start",
    },
    moduleLabel: {
        fontSize: FONT_SIZES.LABEL,
        fontWeight: "bold",
        color: COLORS.CHARCOAL,
        letterSpacing: 0.5,
        marginBottom: 4,
    },
    moduleDesc: {
        fontSize: FONT_SIZES.SMALL,
        color: COLORS.TEXT_DIM,
        lineHeight: 1.5,
    },
    ledgerPrice: {
        fontSize: FONT_SIZES.BODY,
        fontWeight: "bold",
        color: COLORS.CHARCOAL,
    },
    ledgerUnit: {
        fontSize: FONT_SIZES.TINY,
        color: COLORS.TEXT_LIGHT,
        marginLeft: 2,
    },
});

export const TransparenzModule = ({ pricing }: any) => {
    const sorglosPrice = (pricing.HOSTING_MONTHLY || 250) * 12;

    return (
        <>
            <DocumentTitle title="Preis-Transparenz & Modell" isHero={true} />
            <PDFView style={styles.section}>
                <PDFView style={{ borderTopWidth: 1, borderTopColor: COLORS.CHARCOAL }}>
                    {[
                        {
                            l: "Fundament",
                            d: "Bereitstellung der techn. Infrastruktur & System-Umgebung.",
                            p: pricing.BASE_WEBSITE,
                        },
                        {
                            l: "Einzelseiten",
                            d: "Individuelle Gestaltung, Layout & responsive Struktur.",
                            p: pricing.PAGE,
                            unit: "/ Stk",
                        },
                        {
                            l: "Core Features",
                            d: "Geschlossene Datensysteme mit eigener Datenstruktur.",
                            p: pricing.FEATURE,
                            unit: "/ Stk",
                        },
                        {
                            l: "Logik & Funktionen",
                            d: "Interaktive Funktions-Bausteine & Prozess-Logik.",
                            p: pricing.FUNCTION,
                            unit: "/ Stk",
                        },
                        {
                            l: "Schnittstellen",
                            d: "Synchronisation mit externen Zielsystemen.",
                            p: pricing.API_INTEGRATION,
                            unit: "/ Stk",
                        },
                        {
                            l: "Sprachversionen",
                            d: "Skalierung der System-Architektur auf Zweit-Sprachen.",
                            p: "+20%",
                        },
                        {
                            l: "Initial-Pflege",
                            d: "Konvertierung & Aufbereitung von Bestandsdaten.",
                            p: pricing.NEW_DATASET,
                            unit: "/ Stk",
                        },
                        {
                            l: "Sorglos Betrieb",
                            d: "Hosting, Instandhaltung, Security & techn. Support.",
                            p: sorglosPrice,
                            unit: "/ Jahr",
                        },
                    ].map((item: any, i: number) => (
                        <PDFView key={i} style={styles.ledgerRow}>
                            <PDFView style={{ width: "25%" }}>
                                <PDFText style={styles.moduleLabel}>
                                    {item.l.toUpperCase()}
                                </PDFText>
                            </PDFView>
                            <PDFView style={{ width: "50%" }}>
                                <PDFText style={styles.moduleDesc}>{item.d}</PDFText>
                            </PDFView>
                            <PDFView style={{ width: "25%", alignItems: "flex-end" }}>
                                <PDFText style={styles.ledgerPrice}>
                                    {typeof item.p === "number"
                                        ? `${item.p.toLocaleString("de-DE")} €`
                                        : item.p}
                                    {item.unit && (
                                        <PDFText style={styles.ledgerUnit}> {item.unit}</PDFText>
                                    )}
                                </PDFText>
                            </PDFView>
                        </PDFView>
                    ))}
                </PDFView>
            </PDFView>
        </>
    );
};
