"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({
    table: { marginTop: 12 },
    tableHeader: {
        flexDirection: "row",
        paddingBottom: 8,
        borderBottomWidth: 1,
        borderBottomColor: COLORS.CHARCOAL,
        marginBottom: 12,
    },
    tableRow: {
        flexDirection: "row",
        paddingVertical: 10,
        borderBottomWidth: 1,
        borderBottomColor: COLORS.GRID,
        alignItems: "flex-start",
    },
    colPos: { width: "8%" },
    colDesc: { width: "62%" },
    colQty: { width: "10%", textAlign: "center" },
    colPrice: { width: "20%", textAlign: "right" },
    headerText: {
        fontSize: FONT_SIZES.TINY,
        fontWeight: "bold",
        textTransform: "uppercase",
        letterSpacing: 1,
        color: COLORS.TEXT_DIM,
    },
    posText: { fontSize: FONT_SIZES.TINY, color: COLORS.TEXT_LIGHT },
    itemTitle: {
        fontSize: FONT_SIZES.LABEL,
        fontWeight: "bold",
        color: COLORS.CHARCOAL,
        marginBottom: 4,
    },
    itemDesc: {
        fontSize: FONT_SIZES.SMALL,
        color: COLORS.TEXT_DIM,
        lineHeight: 1.4,
    },
    priceText: {
        fontSize: FONT_SIZES.BODY,
        fontWeight: "bold",
        color: COLORS.CHARCOAL,
    },
    summaryContainer: {
        borderTopWidth: 1,
        borderTopColor: COLORS.CHARCOAL,
        paddingTop: 8,
    },
    summaryRow: {
        flexDirection: "row",
        justifyContent: "flex-end",
        paddingVertical: 4,
        alignItems: "baseline",
    },
    summaryLabel: {
        fontSize: FONT_SIZES.TINY,
        color: COLORS.TEXT_DIM,
        textTransform: "uppercase",
        letterSpacing: 1,
        fontWeight: "bold",
        marginRight: 12,
    },
    summaryValue: {
        fontSize: FONT_SIZES.BODY,
        fontWeight: "bold",
        width: 100,
        textAlign: "right",
        color: COLORS.CHARCOAL,
    },
    totalRow: {
        flexDirection: "row",
        justifyContent: "flex-end",
        paddingTop: 12,
        marginTop: 8,
        borderTopWidth: 2,
        borderTopColor: COLORS.CHARCOAL,
        alignItems: "baseline",
    },
});

export const EstimationModule = ({
    state,
    positions,
    totalPrice,
    date,
}: any) => (
    <>
        <DocumentTitle
            title="Kostenschätzung"
            subLines={[
                `Datum: ${date}`,
                `Projekt: ${state.projectType === "website" ? "Website" : "Web App"}`,
            ]}
            isHero={true}
        />
        <PDFView style={styles.table}>
            <PDFView style={styles.tableHeader}>
                <PDFText style={[styles.headerText, styles.colPos]}>Pos</PDFText>
                <PDFText style={[styles.headerText, styles.colDesc]}>
                    Beschreibung
                </PDFText>
                <PDFText style={[styles.headerText, styles.colQty]}>Menge</PDFText>
                <PDFText style={[styles.headerText, styles.colPrice]}>Betrag</PDFText>
            </PDFView>
            {positions.map((item: any, i: number) => (
                <PDFView key={i} style={styles.tableRow} wrap={false}>
                    <PDFText style={[styles.posText, styles.colPos]}>
                        {item.pos.toString().padStart(2, "0")}
                    </PDFText>
                    <PDFView style={styles.colDesc}>
                        <PDFText style={styles.itemTitle}>{item.title}</PDFText>
                        <PDFText style={styles.itemDesc}>
                            {state.positionDescriptions?.[item.title] || item.desc}
                        </PDFText>
                    </PDFView>
                    <PDFText style={[styles.posText, styles.colQty]}>{item.qty}</PDFText>
                    <PDFText style={[styles.priceText, styles.colPrice]}>
                        {item.price > 0
                            ? `${item.price.toLocaleString("de-DE")} €`
                            : "n. A."}
                    </PDFText>
                </PDFView>
            ))}
        </PDFView>
        <PDFView style={styles.summaryContainer} wrap={false}>
            <PDFView style={styles.summaryRow}>
                <PDFText style={styles.summaryLabel}>Nettobetrag</PDFText>
                <PDFText style={styles.summaryValue}>
                    {totalPrice.toLocaleString("de-DE")} €
                </PDFText>
            </PDFView>
            <PDFView style={styles.summaryRow}>
                <PDFText style={styles.summaryLabel}>Umsatzsteuer (19%)</PDFText>
                <PDFText style={styles.summaryValue}>
                    {(totalPrice * 0.19).toLocaleString("de-DE")} €
                </PDFText>
            </PDFView>
            <PDFView style={styles.totalRow}>
                <PDFText style={styles.summaryLabel}>Gesamtbetrag (Brutto)</PDFText>
                <PDFText
                    style={[styles.summaryValue, { fontSize: FONT_SIZES.HEADING }]}
                >
                    {(totalPrice * 1.19).toLocaleString("de-DE")} €
                </PDFText>
            </PDFView>
        </PDFView>
    </>
);
