import PDFLayout from "@components/Reports/PDFLayout";
import { formatDateString } from "@helpers/FormatString";
import React from "react";
import { Image, StyleSheet, Text, View } from "@react-pdf/renderer";

const styles = StyleSheet.create({
    wrapper: {
        height: "100%",
        paddingTop: 20,
        paddingLeft: 20,
        paddingRight: 20,
        paddingBottom: 0,
        color: "#273745",
    },
    header: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: 20,
    },
    logo: {
        width: 140,
        height: "auto",
    },
    titleContainer: {
        flex: 1,
        alignItems: "center",
    },
    title: {
        fontSize: 16,
        fontWeight: "bold",
    },
    paragraph: {
        fontSize: 13,
        lineHeight: 1.7,
        textAlign: "justify",
        marginBottom: 20,
        textIndent: 28,
    },
    attentamente: {
        fontSize: 12,
        textAlign: "center",
    },
    spacerAfterAttentamente: {
        height: 40,
    },
    signatureLine: {
        width: 246,
        borderBottomWidth: 1,
        borderBottomColor: "#000000",
        marginBottom: 3,
    },
    signatureName: {
        fontSize: 10,
        fontWeight: "bold",
        textAlign: "center",
        marginBottom: 4.5,
        textTransform: "uppercase",
    },
    signatureRole: {
        fontSize: 10,
        fontWeight: "bold",
        textAlign: "center",
    },
    signatureBlock: {
        alignItems: "center",
    },
    headerDate: {
        fontSize: 11,
        fontWeight: "normal",
        textAlign: "right",
        marginBottom: 30,
    },
    paragraphLast: {
        marginBottom: 74,
    },
    table: {
        width: "100%",
        borderWidth: 1,
        borderColor: "#cbd5e1",
        borderRadius: 4,
        marginBottom: 30,
    },
    tableRow: {
        flexDirection: "row",
        borderBottomWidth: 1,
        borderBottomColor: "#cbd5e1",
        minHeight: 25,
    },
    tableRowLast: {
        borderBottomWidth: 0,
    },
    tableCellLabel: {
        width: 130,
        padding: 6,
        backgroundColor: "#f1f5f9",
        fontSize: 11,
        fontWeight: "bold",
        borderRightWidth: 1,
        borderRightColor: "#cbd5e1",
    },
    tableCellValue: {
        flex: 1,
        padding: 6,
        fontSize: 11,
    },
    bold: {
        fontWeight: "bold",
    },
});

export const WarehouseResponsivaDocument = ({
    itemData,
    viewerHeight = "100vh",
}) => {
    if (!itemData) {
        return null;
    }

    const enterpriseName =
        itemData?.enterprise?.legal_name ||
        itemData?.enterprise?.full_name ||
        itemData?.legal_name ||
        "la Institución";

    return (
        <PDFLayout
            pageSize="LETTER"
            title="Carta responsiva de equipo"
            viewerHeight={viewerHeight}
        >
            <View style={styles.wrapper}>
                <View style={styles.header}>
                    {itemData?.logo && (
                        <Image src={itemData.logo} style={styles.logo} />
                    )}
                    <View style={styles.titleContainer}>
                        <Text style={styles.title}>
                            CARTA RESPONSIVA DE EQUIPO
                        </Text>
                    </View>
                </View>

                <Text style={styles.headerDate}>
                    <Text style={styles.bold}>
                        {itemData?.assigned_at
                            ? formatDateString(
                                  itemData.assigned_at,
                                  false,
                                  false,
                                  false,
                                  true
                              )
                            : formatDateString(
                                  new Date().toISOString(),
                                  false,
                                  false,
                                  false,
                                  true
                              )}
                    </Text>
                    .
                </Text>

                <Text style={styles.paragraph}>
                    Por medio de la presente, yo{" "}
                    <Text style={styles.bold}>
                        {itemData?.assigned_to_user?.username ||
                            "[NOMBRE DEL EMPLEADO]"}
                    </Text>{" "}
                    hago constar que recibo bajo mi resguardo el siguiente
                    equipo, propiedad de <Text style={styles.bold}>{enterpriseName}</Text>:
                </Text>

                <View style={styles.table}>
                    <View style={styles.tableRow}>
                        <Text style={styles.tableCellLabel}>Tipo de Equipo</Text>
                        <Text style={styles.tableCellValue}>
                            {itemData?.type || "N/A"}
                        </Text>
                    </View>
                    <View style={styles.tableRow}>
                        <Text style={styles.tableCellLabel}>Marca</Text>
                        <Text style={styles.tableCellValue}>
                            {itemData?.brand || "N/A"}
                        </Text>
                    </View>
                    <View style={styles.tableRow}>
                        <Text style={styles.tableCellLabel}>Modelo</Text>
                        <Text style={styles.tableCellValue}>
                            {itemData?.model || "N/A"}
                        </Text>
                    </View>
                    <View style={styles.tableRow}>
                        <Text style={styles.tableCellLabel}>Número de Serie</Text>
                        <Text style={styles.tableCellValue}>
                            {itemData?.serial_number || "N/A"}
                        </Text>
                    </View>
                    <View style={[styles.tableRow, styles.tableRowLast]}>
                        <Text style={styles.tableCellLabel}>Características</Text>
                        <Text style={styles.tableCellValue}>
                            {itemData?.characteristics || "N/A"}
                        </Text>
                    </View>
                </View>

                <Text style={[styles.paragraph, styles.paragraphLast]}>
                    Me comprometo a darle el uso adecuado para el desempeño de
                    mis labores y funciones dentro de la institución, así como a
                    notificar de manera inmediata cualquier falla, daño o
                    extravío que este pudiera sufrir. Al término de mi relación
                    laboral o cuando me sea requerido, me comprometo a devolver
                    el equipo en las condiciones en las que lo recibí,
                    considerando el desgaste natural por el uso.
                </Text>

                <Text style={styles.attentamente}>ATENTAMENTE</Text>
                <View style={styles.spacerAfterAttentamente} />

                <View style={styles.signatureBlock}>
                    <View style={styles.signatureLine} />
                    <Text style={styles.signatureName}>
                        {itemData?.assigned_to_user?.username ||
                            "NOMBRE Y FIRMA DEL EMPLEADO"}
                    </Text>
                    <Text style={styles.signatureRole}>RECIBE</Text>
                </View>
            </View>
        </PDFLayout>
    );
};