// Sample Cover Letter — client-side port of resources/views/pdf/cover-letter.blade.php
// (port of legacy reportsuratjalancoverletter{id,en}.php, FPDF portrait A4). One component
// serves both languages via the resolved `t` label map from the controller. Lazy-only.
//
// The three images (logo / stamp / signature) arrive as optional base64 data URIs in the
// payload (built server-side by SampleOrderController::pdfImageData from the private
// storage/app/pdf disk). Each is optional and the layout degrades gracefully — this
// mirrors the legacy Blade and is covered by tests.
import { pdf, Document, Page, View, Text, Image, StyleSheet } from '@react-pdf/renderer';
import { px, FONT, FONT_BOLD, KvRow, ItemsTable } from './pdfShared';

const s = StyleSheet.create({
    // @page margin 12mm 10mm 22mm 10mm; A4 comes from <Page size>. Top reduced to 4mm so the
    // logo/document sits higher (user request, two 4mm nudges up from the legacy 12mm).
    page: {
        paddingTop: '0mm',
        paddingBottom: '22mm',
        paddingLeft: '10mm',
        paddingRight: '10mm',
        fontFamily: FONT,
        fontSize: px(12),
        color: '#000',
        lineHeight: 1.5,
    },
    logoWrap: { alignItems: 'center', marginBottom: px(12) },
    logo: { width: '150mm' },
    brand: { fontFamily: FONT_BOLD, fontSize: px(15), letterSpacing: 0.5, textAlign: 'center', marginTop: px(0), marginBottom: px(12) },
    headRow: { flexDirection: 'row', marginBottom: px(2) },
    colLeft: { width: '58%', paddingRight: px(8) },
    colRight: { width: '42%' },
    greeting: { marginTop: px(18) },
    closing: { marginTop: px(12) },
    // Signature drawn over the company stamp — legacy overlap geometry (stamp ~10mm below
    // the signature top). position:absolute inside a relative, fixed-height wrapper.
    signWrap: { position: 'relative', height: '24mm', marginTop: '2mm' },
    stamp: { position: 'absolute', left: 0, top: '10mm', width: '67mm' },
    sig: { position: 'absolute', left: '10mm', top: 0, height: '20mm' },
    signGap: { height: px(34) },
    signName: { fontFamily: FONT_BOLD },
    contactRow: { flexDirection: 'row' },
    contactLabel: { width: px(64) },
    // Running footer repeated on every page (legacy position:fixed). `fixed` + absolute
    // bottom offset ~ the legacy "bottom:-16mm" park below the 22mm bottom margin.
    foot: { position: 'absolute', bottom: '6mm', left: '10mm', right: '10mm', textAlign: 'center', fontFamily: FONT_BOLD, fontSize: px(9) },
});

const columns = (t) => [
    { key: 'no', header: t.colNo, width: '6%', align: 'center' },
    { key: 'productName', header: t.colProduct, width: '40%' },
    { key: 'qty', header: t.colQty, width: '14%', align: 'right', headerAlign: 'right' },
    { key: 'application', header: t.colApp, width: '18%' },
    { key: 'remarks', header: t.colRemarks, width: '22%' },
];

// Fixed label-column widths (pt) so the header colons line up in a straight column. Sized to
// the widest bold label per column across EN + ID ("Attention & Dept" left; "Tanggal" right).
const LABEL_W_LEFT = 74;
const LABEL_W_RIGHT = 42;

export function CoverLetterDocument({ t = {}, header = {}, rows = [], images = {} }) {
    const hasStamp = !!images.stamp;
    const hasSignature = !!images.signature;

    return (
        <Document>
            <Page size="A4" style={s.page}>
                {images.logo ? (
                    <View style={s.logoWrap}>
                        <Image src={images.logo} style={s.logo} />
                    </View>
                ) : (
                    <Text style={s.brand}>PT. COLORINDO CHEMTRA</Text>
                )}

                <View style={s.headRow}>
                    <View style={s.colLeft}>
                        <KvRow label={t.toCompany} value={header.companyName} labelBold valueBold labelWidth={LABEL_W_LEFT} />
                        <KvRow label={t.attention} value={header.attention} labelBold valueBold labelWidth={LABEL_W_LEFT} />
                        <KvRow label={t.telephone} value={header.telephone} labelBold valueBold labelWidth={LABEL_W_LEFT} />
                        <KvRow label={t.address} value={header.address} labelBold valueBold labelWidth={LABEL_W_LEFT} />
                    </View>
                    <View style={s.colRight}>
                        <KvRow label={t.subject} value={header.subject} labelBold valueBold labelWidth={LABEL_W_RIGHT} />
                        <KvRow label={t.from} value={header.from} labelBold valueBold labelWidth={LABEL_W_RIGHT} />
                        <KvRow label={t.refNo} value={header.refNo} labelBold valueBold labelWidth={LABEL_W_RIGHT} />
                        <KvRow label={t.date} value={header.date} labelBold valueBold labelWidth={LABEL_W_RIGHT} />
                    </View>
                </View>

                <View style={s.greeting}>
                    <Text>{t.greeting}</Text>
                    <Text>{t.title}</Text>
                    {header.basedOn ? <Text>{header.basedOn}</Text> : null}
                    <Text>{t.intro}</Text>
                </View>

                <ItemsTable columns={columns(t)} rows={rows} />

                <View style={s.closing}>
                    <Text>{t.closing1}</Text>
                    <Text>{t.closing2}</Text>
                    <Text>{t.closing3}</Text>
                </View>

                <View style={s.closing}>
                    <Text>{t.thanks}</Text>
                    {hasStamp || hasSignature ? (
                        <View style={s.signWrap}>
                            {hasStamp ? <Image src={images.stamp} style={s.stamp} /> : null}
                            {hasSignature ? <Image src={images.signature} style={s.sig} /> : null}
                        </View>
                    ) : (
                        <View style={s.signGap} />
                    )}
                    <Text style={s.signName}>{header.signatureName ?? ''}</Text>
                    <Text>{header.positionName ?? ''}</Text>
                    <View style={{ marginTop: px(2) }}>
                        <View style={s.contactRow}>
                            <Text style={s.contactLabel}>{t.labelPhone}</Text>
                            <Text>: +6221 5890 6040</Text>
                        </View>
                        <View style={s.contactRow}>
                            <Text style={s.contactLabel}>{t.labelMobile}</Text>
                            <Text>: {header.mobile ?? ''}</Text>
                        </View>
                        <View style={s.contactRow}>
                            <Text style={s.contactLabel}>{t.labelEmail}</Text>
                            <Text>: {header.email ?? ''}</Text>
                        </View>
                    </View>
                </View>

                <View style={s.foot} fixed>
                    <Text>Perkantoran Taman Kebon Jeruk AX-18, Jl. Raya Meruya Ilir, Jakarta Barat 11630 - Indonesia</Text>
                    <Text>Telp. (62-21) 5890 6040 | Fax. (62-21) 5890 5987 | Email : info@colorindochemtra.com</Text>
                </View>
            </Page>
        </Document>
    );
}

export function renderCoverLetterBlob(payload) {
    return pdf(<CoverLetterDocument {...payload} />).toBlob();
}