// ============================================
// views2.jsx — Invoice View (v3 pro clean document)
// ============================================
function InvoiceView({
    invoice,
    onBack,
    onEdit,
    onDuplicate,
    onMarkPaid,
    onMarkDepositPaid,
    onShare,
    onUpdateStatus,
    onDelete,
    isPublicView,
    companyLogo,
}) {
    const inv = invoice
    const ACCENT = "#2563EB"

    const microLabel = {
        fontSize: 10,
        fontWeight: 700,
        color: "#94A3B8",
        textTransform: "uppercase",
        letterSpacing: 1.2,
    }
    const sectionLabel = { ...microLabel, marginBottom: 14 }
    const padX = "clamp(20px, 5vw, 40px)"

    const [viewingReceipt, setViewingReceipt] = useState(null)

    const handlePrint = () => {
        window.print()
    }

    const handleDownloadPDF = () => {
        const filename = `Invoice_${inv.id.replace("#", "")}.pdf`
        generatePDF("pdf-content-invoice", filename, "invoice")
    }

    const handleDownloadReceipt = (paymentIndex) => {
        const receiptNo = `${inv.id.replace("#", "")}-R${paymentIndex + 1}`
        const filename = `Receipt_${receiptNo}.pdf`
        generatePDF("pdf-content-receipt", filename, "receipt")
    }

    // Payment math
    const depositPaid =
        inv.deposit && inv.deposit.status === "paid" ? inv.deposit.amount : 0
    const paymentsPaid = (inv.payments || []).reduce(
        (sum, p) => sum + (p.amount || 0),
        0
    )
    const totalPaid = depositPaid + paymentsPaid
    const balance = inv.total - totalPaid

    const Divider = () => (
        <div style={{ borderTop: "1px solid #EEF1F5", margin: `0 ${padX}` }} />
    )

    // ============================================
    // RECEIPT VIEW
    // ============================================
    if (viewingReceipt !== null) {
        const payment = inv.payments[viewingReceipt]
        const receiptNo = `#${inv.id.replace("#", "")}-R${viewingReceipt + 1}`
        const GREEN = "#059669"

        return (
            <div
                style={{
                    minHeight: "100vh",
                    width: "100%",
                    backgroundColor: "#EDF0F4",
                    fontFamily: "'Inter', system-ui, sans-serif",
                    paddingBottom: 40,
                }}
            >
                <div
                    className="no-print"
                    style={{
                        maxWidth: 640,
                        margin: "0 auto",
                        padding: "14px 16px",
                    }}
                >
                    <button
                        className="cs-btn"
                        onClick={() => setViewingReceipt(null)}
                        style={{
                            padding: "8px 16px",
                            borderRadius: 10,
                            border: "1px solid #E2E8F0",
                            backgroundColor: "#FFF",
                            color: "#334155",
                            fontSize: 13,
                            fontWeight: 600,
                            cursor: "pointer",
                            boxShadow: "0 1px 3px rgba(15,23,42,.06)",
                            display: "inline-flex",
                            alignItems: "center",
                            gap: 6,
                        }}
                    >
                        <Icon name="arrow-left" size={15} />
                        Invoice
                    </button>
                </div>

                <div
                    className="print-wrap"
                    style={{
                        maxWidth: 640,
                        margin: "0 auto",
                        padding: "0 16px",
                    }}
                >
                    <div
                        id="pdf-content-receipt"
                        className="print-sheet"
                        style={{
                            backgroundColor: "#FFF",
                            boxShadow: "0 10px 40px rgba(15,23,42,.10)",
                            borderTop: `4px solid ${GREEN}`,
                        }}
                    >
                        {/* Header */}
                        <div
                            style={{
                                padding: `28px ${padX} 0`,
                                display: "flex",
                                justifyContent: "space-between",
                                flexWrap: "wrap",
                                gap: 16,
                            }}
                        >
                            <div
                                style={{
                                    display: "flex",
                                    gap: 12,
                                    alignItems: "flex-start",
                                }}
                            >
                                <LogoDisplay
                                    logo={companyLogo}
                                    size={44}
                                    bgColor="#FFF"
                                    textColor={GREEN}
                                    rounded={10}
                                />
                                <div>
                                    <div
                                        style={{
                                            fontSize: 14.5,
                                            fontWeight: 800,
                                            color: "#0F172A",
                                        }}
                                    >
                                        {companyInfo.name}
                                    </div>
                                    <div
                                        style={{
                                            fontSize: 11,
                                            color: "#64748B",
                                            marginTop: 2,
                                        }}
                                    >
                                        {companyInfo.ssm}
                                    </div>
                                </div>
                            </div>
                            <div style={{ textAlign: "right" }}>
                                <div
                                    style={{
                                        fontSize: 19,
                                        fontWeight: 800,
                                        color: GREEN,
                                        letterSpacing: 2,
                                    }}
                                >
                                    RECEIPT
                                </div>
                                <div
                                    style={{
                                        fontFamily: "monospace",
                                        fontSize: 12,
                                        fontWeight: 700,
                                        color: "#475569",
                                        marginTop: 2,
                                    }}
                                >
                                    {receiptNo}
                                </div>
                            </div>
                        </div>

                        {/* Meta strip */}
                        <div
                            style={{
                                margin: `20px ${padX} 0`,
                                borderTop: "1px solid #EEF1F5",
                                borderBottom: "1px solid #EEF1F5",
                                padding: "12px 0",
                                display: "flex",
                                gap: 36,
                                flexWrap: "wrap",
                            }}
                        >
                            <div>
                                <div style={microLabel}>Date Received</div>
                                <div
                                    style={{
                                        fontSize: 13,
                                        fontWeight: 600,
                                        color: "#0F172A",
                                        marginTop: 3,
                                    }}
                                >
                                    {formatDate(payment.date)}
                                </div>
                            </div>
                            <div>
                                <div style={microLabel}>Invoice Ref</div>
                                <div
                                    style={{
                                        fontFamily: "monospace",
                                        fontSize: 13,
                                        fontWeight: 700,
                                        color: GREEN,
                                        marginTop: 3,
                                    }}
                                >
                                    {inv.id}
                                </div>
                            </div>
                        </div>

                        {/* From / For */}
                        <div
                            style={{
                                padding: `20px ${padX}`,
                                display: "flex",
                                flexWrap: "wrap",
                                gap: 20,
                            }}
                        >
                            <div style={{ flex: "1 1 200px" }}>
                                <div style={sectionLabel}>Received From</div>
                                <div
                                    style={{
                                        fontSize: 15,
                                        fontWeight: 800,
                                        color: "#0F172A",
                                    }}
                                >
                                    {inv.client}
                                </div>
                                {inv.company && (
                                    <div
                                        style={{
                                            fontSize: 12,
                                            color: "#64748B",
                                            marginTop: 2,
                                        }}
                                    >
                                        {inv.company}
                                    </div>
                                )}
                            </div>
                            <div style={{ flex: "1 1 200px" }}>
                                <div style={sectionLabel}>For</div>
                                <div
                                    style={{
                                        fontSize: 13,
                                        fontWeight: 700,
                                        color: "#0F172A",
                                        lineHeight: 1.5,
                                    }}
                                >
                                    {inv.project}
                                </div>
                            </div>
                        </div>

                        {/* Payment row */}
                        <div style={{ padding: `0 ${padX} 20px` }}>
                            <div
                                style={{
                                    display: "flex",
                                    justifyContent: "space-between",
                                    paddingBottom: 8,
                                    borderBottom: "2px solid #0F172A",
                                }}
                            >
                                <span style={microLabel}>Payment</span>
                                <span style={microLabel}>Amount (RM)</span>
                            </div>
                            <div
                                style={{
                                    display: "flex",
                                    justifyContent: "space-between",
                                    padding: "12px 0",
                                    borderBottom: "1px solid #F4F6F9",
                                }}
                            >
                                <span
                                    style={{
                                        fontSize: 13,
                                        fontWeight: 600,
                                        color: "#334155",
                                    }}
                                >
                                    {payment.note || "Payment"}
                                </span>
                                <span
                                    style={{
                                        fontSize: 14,
                                        fontWeight: 700,
                                        color: "#0F172A",
                                    }}
                                >
                                    {(payment.amount || 0).toLocaleString()}
                                </span>
                            </div>

                            <div
                                style={{
                                    display: "flex",
                                    justifyContent: "flex-end",
                                    marginTop: 16,
                                }}
                            >
                                <div
                                    style={{
                                        minWidth: 240,
                                        backgroundColor: GREEN,
                                        borderRadius: 10,
                                        padding: "13px 18px",
                                        display: "flex",
                                        justifyContent: "space-between",
                                        alignItems: "center",
                                        gap: 20,
                                    }}
                                >
                                    <span
                                        style={{
                                            ...microLabel,
                                            color: "#A7F3D0",
                                        }}
                                    >
                                        Amount Received
                                    </span>
                                    <span
                                        style={{
                                            fontSize: 18,
                                            fontWeight: 800,
                                            color: "#FFF",
                                        }}
                                    >
                                        RM{" "}
                                        {(payment.amount || 0).toLocaleString()}
                                    </span>
                                </div>
                            </div>
                        </div>

                        {/* Footer */}
                        <div
                            style={{
                                borderTop: "1px solid #EEF1F5",
                                padding: `16px ${padX} 24px`,
                                textAlign: "center",
                            }}
                        >
                            <div
                                style={{
                                    fontSize: 13,
                                    fontWeight: 700,
                                    color: GREEN,
                                }}
                            >
                                Thank you for your payment!
                            </div>
                            <div
                                style={{
                                    fontSize: 11,
                                    color: "#94A3B8",
                                    marginTop: 5,
                                }}
                            >
                                {companyInfo.name} · {companyInfo.phone} ·{" "}
                                {companyInfo.email}
                            </div>
                        </div>
                    </div>

                    <div
                        className="no-print"
                        style={{
                            display: "flex",
                            gap: 10,
                            marginTop: 18,
                            flexWrap: "wrap",
                        }}
                    >
                        <button
                            className="cs-btn"
                            onClick={handlePrint}
                            style={{
                                flex: 1,
                                padding: 13,
                                borderRadius: 12,
                                border: "none",
                                background:
                                    "linear-gradient(135deg, #10B981, #059669)",
                                color: "#FFF",
                                fontWeight: 700,
                                fontSize: 13.5,
                                cursor: "pointer",
                                boxShadow: "0 4px 12px rgba(5,150,105,.3)",
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                gap: 7,
                            }}
                        >
                            <Icon name="printer" size={16} />
                            Print / Simpan Resit PDF (A4)
                        </button>
                    </div>
                </div>
            </div>
        )
    }

    // ============================================
    // INVOICE VIEW
    // ============================================
    return (
        <div
            style={{
                minHeight: "100vh",
                width: "100%",
                backgroundColor: "#EDF0F4",
                fontFamily: "'Inter', system-ui, sans-serif",
                paddingBottom: 40,
            }}
        >
            {onBack && (
                <div
                    className="no-print"
                    style={{
                        maxWidth: 820,
                        margin: "0 auto",
                        padding: "14px 16px",
                    }}
                >
                    <button
                        className="cs-btn"
                        onClick={onBack}
                        style={{
                            padding: "8px 16px",
                            borderRadius: 10,
                            border: "1px solid #E2E8F0",
                            backgroundColor: "#FFF",
                            color: "#334155",
                            fontSize: 13,
                            fontWeight: 600,
                            cursor: "pointer",
                            boxShadow: "0 1px 3px rgba(15,23,42,.06)",
                            display: "inline-flex",
                            alignItems: "center",
                            gap: 6,
                        }}
                    >
                        <Icon name="arrow-left" size={15} />
                        Dashboard
                    </button>
                </div>
            )}

            <div
                className="print-wrap"
                style={{ maxWidth: 820, margin: "0 auto", padding: "0 16px" }}
            >
                <div
                    id="pdf-content-invoice"
                    className="print-sheet"
                    style={{
                        backgroundColor: "#FFF",
                        boxShadow: "0 10px 40px rgba(15,23,42,.10)",
                        borderTop: `4px solid ${ACCENT}`,
                    }}
                >
                    {/* --- Header ringkas: dua blok --- */}
                    <div style={{ display: "flex", flexWrap: "wrap" }}>
                        <div
                            style={{
                                flex: "1 1 240px",
                                background:
                                    "linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%)",
                                padding: "18px 20px",
                                display: "flex",
                                flexDirection: "column",
                                justifyContent: "center",
                            }}
                        >
                            <div
                                style={{
                                    fontSize: 20,
                                    fontWeight: 800,
                                    color: "#FFF",
                                    letterSpacing: 0.5,
                                }}
                            >
                                INVOICE
                            </div>
                            <div
                                style={{
                                    color: "rgba(255,255,255,.92)",
                                    fontSize: 12.5,
                                    marginTop: 2,
                                }}
                            >
                                {inv.company || inv.client}
                            </div>
                        </div>

                        <div
                            style={{
                                background:
                                    "linear-gradient(135deg, #1F2937 0%, #2D3748 100%)",
                                padding: "18px 20px",
                                display: "flex",
                                alignItems: "center",
                                gap: 10,
                            }}
                        >
                            <LogoDisplay
                                logo={companyLogo}
                                size={34}
                                bgColor="#FFF"
                                textColor={ACCENT}
                                rounded={8}
                            />
                            <div>
                                <div
                                    style={{
                                        fontSize: 12.5,
                                        fontWeight: 700,
                                        color: "#FFF",
                                        whiteSpace: "nowrap",
                                    }}
                                >
                                    {companyInfo.name}
                                </div>
                                <div
                                    style={{ color: "#9CA3AF", fontSize: 10 }}
                                >
                                    {companyInfo.ssm}
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* --- Meta bar: No / Date / Due + status --- */}
                    <div
                        style={{
                            padding: `12px ${padX}`,
                            borderBottom: "1px solid #EEF1F5",
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "center",
                            flexWrap: "wrap",
                            gap: 12,
                        }}
                    >
                        <div style={{ display: "flex", gap: 26, flexWrap: "wrap" }}>
                            <div>
                                <div style={microLabel}>No</div>
                                <div
                                    style={{
                                        fontFamily: "monospace",
                                        fontSize: 13,
                                        fontWeight: 700,
                                        color: "#0F172A",
                                        marginTop: 3,
                                    }}
                                >
                                    {inv.id}
                                </div>
                            </div>
                            <div>
                                <div style={microLabel}>Date</div>
                                <div
                                    style={{
                                        fontSize: 13,
                                        fontWeight: 600,
                                        color: "#0F172A",
                                        marginTop: 3,
                                    }}
                                >
                                    {formatDate(inv.date)}
                                </div>
                            </div>
                            <div>
                                <div style={microLabel}>Due</div>
                                <div
                                    style={{
                                        fontSize: 13,
                                        fontWeight: 700,
                                        color:
                                            inv.status === "overdue"
                                                ? "#DC2626"
                                                : "#0F172A",
                                        marginTop: 3,
                                    }}
                                >
                                    {formatDate(inv.due)}
                                </div>
                            </div>
                        </div>
                        <StatusSelector
                            currentStatus={inv.status}
                            type="invoice"
                            onStatusChange={(newStatus) =>
                                onUpdateStatus && onUpdateStatus(inv, newStatus)
                            }
                            isPublicView={isPublicView}
                        />
                    </div>

                    {/* --- Bill To / Project --- */}
                    <div
                        style={{
                            padding: `24px ${padX}`,
                            display: "flex",
                            flexWrap: "wrap",
                            gap: 24,
                        }}
                    >
                        <div style={{ flex: "1 1 240px" }}>
                            <div style={sectionLabel}>Bill To</div>
                            <div
                                style={{
                                    fontSize: 17,
                                    fontWeight: 800,
                                    color: "#0F172A",
                                }}
                            >
                                {inv.client}
                            </div>
                            {inv.company && (
                                <div
                                    style={{
                                        fontSize: 13,
                                        fontWeight: 600,
                                        color: "#334155",
                                        marginTop: 2,
                                    }}
                                >
                                    {inv.company}
                                </div>
                            )}
                            <div
                                style={{
                                    fontSize: 12,
                                    color: "#64748B",
                                    marginTop: 4,
                                    lineHeight: 1.6,
                                }}
                            >
                                {inv.email}
                                {inv.email && inv.phone ? <br /> : null}
                                {inv.phone}
                            </div>
                        </div>
                        <div style={{ flex: "1 1 240px" }}>
                            <div style={sectionLabel}>Project</div>
                            <div
                                style={{
                                    fontSize: 14.5,
                                    fontWeight: 700,
                                    color: "#0F172A",
                                    lineHeight: 1.5,
                                }}
                            >
                                {inv.project}
                            </div>
                        </div>
                    </div>

                    {/* --- Items table --- */}
                    <Divider />
                    <div style={{ padding: `24px ${padX}` }}>
                        <div style={sectionLabel}>Invoice Items</div>

                        <div
                            style={{
                                display: "flex",
                                paddingBottom: 9,
                                borderBottom: "2px solid #0F172A",
                                gap: 12,
                            }}
                        >
                            <span style={{ ...microLabel, flex: 1 }}>
                                Description
                            </span>
                            <span
                                style={{
                                    ...microLabel,
                                    width: 44,
                                    textAlign: "right",
                                }}
                            >
                                Qty
                            </span>
                            <span
                                style={{
                                    ...microLabel,
                                    width: 90,
                                    textAlign: "right",
                                }}
                            >
                                Price
                            </span>
                            <span
                                style={{
                                    ...microLabel,
                                    width: 100,
                                    textAlign: "right",
                                }}
                            >
                                Amount (RM)
                            </span>
                        </div>

                        {inv.items.map((item, i) => {
                            const special =
                                item.priceType === "included" ||
                                item.priceType === "lumpsum"
                            return (
                                <div
                                    key={i}
                                    style={{
                                        display: "flex",
                                        gap: 12,
                                        padding: "12px 0",
                                        borderBottom: "1px solid #F4F6F9",
                                        alignItems: "flex-start",
                                    }}
                                >
                                    <div style={{ flex: 1, minWidth: 0 }}>
                                        <div
                                            style={{
                                                fontSize: 13.5,
                                                fontWeight: 600,
                                                color: "#0F172A",
                                            }}
                                        >
                                            {item.desc}
                                        </div>
                                        {item.itemDesc && (
                                            <div
                                                style={{
                                                    fontSize: 12,
                                                    color: "#64748B",
                                                    marginTop: 2,
                                                    lineHeight: 1.5,
                                                }}
                                            >
                                                {item.itemDesc}
                                            </div>
                                        )}
                                    </div>
                                    <span
                                        style={{
                                            width: 44,
                                            textAlign: "right",
                                            fontSize: 13,
                                            color: "#64748B",
                                        }}
                                    >
                                        {special ? "—" : item.qty || 1}
                                    </span>
                                    <span
                                        style={{
                                            width: 90,
                                            textAlign: "right",
                                            fontSize: 13,
                                            color: "#64748B",
                                        }}
                                    >
                                        {special
                                            ? "—"
                                            : (
                                                  item.price || 0
                                              ).toLocaleString()}
                                    </span>
                                    <span
                                        style={{
                                            width: 100,
                                            textAlign: "right",
                                            fontSize: special ? 12.5 : 14,
                                            fontWeight: special ? 600 : 700,
                                            fontStyle: special
                                                ? "italic"
                                                : "normal",
                                            color:
                                                item.priceType === "included"
                                                    ? "#059669"
                                                    : special
                                                      ? "#64748B"
                                                      : "#0F172A",
                                            whiteSpace: "nowrap",
                                        }}
                                    >
                                        {item.priceType === "included"
                                            ? "Included"
                                            : item.priceType === "lumpsum"
                                              ? "Lump Sum"
                                              : (
                                                    (item.price || 0) *
                                                    (item.qty || 1)
                                                ).toLocaleString()}
                                    </span>
                                </div>
                            )
                        })}

                        {/* Totals block */}
                        <div
                            style={{
                                display: "flex",
                                justifyContent: "flex-end",
                                marginTop: 16,
                            }}
                        >
                            <div style={{ minWidth: 280 }}>
                                <div
                                    style={{
                                        display: "flex",
                                        justifyContent: "space-between",
                                        padding: "6px 0",
                                    }}
                                >
                                    <span
                                        style={{
                                            fontSize: 12.5,
                                            color: "#64748B",
                                        }}
                                    >
                                        Total
                                    </span>
                                    <span
                                        style={{
                                            fontSize: 13,
                                            fontWeight: 700,
                                            color: "#0F172A",
                                        }}
                                    >
                                        RM {inv.total.toLocaleString()}
                                    </span>
                                </div>
                                {totalPaid > 0 && (
                                    <div
                                        style={{
                                            display: "flex",
                                            justifyContent: "space-between",
                                            padding: "6px 0",
                                        }}
                                    >
                                        <span
                                            style={{
                                                fontSize: 12.5,
                                                color: "#64748B",
                                            }}
                                        >
                                            Paid
                                        </span>
                                        <span
                                            style={{
                                                fontSize: 13,
                                                fontWeight: 700,
                                                color: "#059669",
                                            }}
                                        >
                                            − RM {totalPaid.toLocaleString()}
                                        </span>
                                    </div>
                                )}
                                <div
                                    style={{
                                        marginTop: 8,
                                        backgroundColor:
                                            balance <= 0 ? "#059669" : "#0F172A",
                                        borderRadius: 10,
                                        padding: "13px 18px",
                                        display: "flex",
                                        justifyContent: "space-between",
                                        alignItems: "center",
                                        gap: 20,
                                    }}
                                >
                                    <span
                                        style={{
                                            ...microLabel,
                                            color:
                                                balance <= 0
                                                    ? "#A7F3D0"
                                                    : "#94A3B8",
                                        }}
                                    >
                                        {balance <= 0
                                            ? "Paid in Full"
                                            : "Balance Due"}
                                    </span>
                                    <span
                                        style={{
                                            fontSize: 19,
                                            fontWeight: 800,
                                            color: "#FFF",
                                        }}
                                    >
                                        RM{" "}
                                        {Math.max(balance, 0).toLocaleString()}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* --- Deposit --- */}
                    {inv.deposit && (
                        <>
                            <Divider />
                            <div style={{ padding: `24px ${padX}` }}>
                                <div style={sectionLabel}>Deposit</div>
                                <div
                                    style={{
                                        backgroundColor:
                                            inv.deposit.status === "paid"
                                                ? "#F0FDF4"
                                                : "#FFFBEB",
                                        border:
                                            inv.deposit.status === "paid"
                                                ? "1px solid #BBF7D0"
                                                : "1px solid #FDE68A",
                                        borderRadius: 12,
                                        padding: 16,
                                    }}
                                >
                                    <div
                                        style={{
                                            display: "flex",
                                            justifyContent: "space-between",
                                            alignItems: "center",
                                            gap: 12,
                                            flexWrap: "wrap",
                                        }}
                                    >
                                        <div>
                                            <div
                                                style={{
                                                    fontSize: 13.5,
                                                    fontWeight: 700,
                                                    color: "#0F172A",
                                                }}
                                            >
                                                {inv.deposit.note || "Deposit"}
                                            </div>
                                            <div
                                                style={{
                                                    fontSize: 11.5,
                                                    marginTop: 3,
                                                    fontWeight: 600,
                                                    color:
                                                        inv.deposit.status ===
                                                        "paid"
                                                            ? "#059669"
                                                            : "#B45309",
                                                    display: "flex",
                                                    alignItems: "center",
                                                    gap: 5,
                                                }}
                                            >
                                                <Icon
                                                    name={
                                                        inv.deposit.status ===
                                                        "paid"
                                                            ? "check-circle"
                                                            : "clock"
                                                    }
                                                    size={13}
                                                />
                                                {inv.deposit.status === "paid"
                                                    ? `Paid${inv.deposit.date ? " on " + formatDate(inv.deposit.date) : ""}`
                                                    : `Pending${inv.deposit.date ? " · Due " + formatDate(inv.deposit.date) : ""}`}
                                            </div>
                                        </div>
                                        <div
                                            style={{
                                                fontSize: 19,
                                                fontWeight: 800,
                                                color:
                                                    inv.deposit.status ===
                                                    "paid"
                                                        ? "#059669"
                                                        : "#B45309",
                                            }}
                                        >
                                            RM{" "}
                                            {(
                                                inv.deposit.amount || 0
                                            ).toLocaleString()}
                                        </div>
                                    </div>
                                    {inv.deposit.status === "pending" &&
                                        !isPublicView &&
                                        onMarkDepositPaid && (
                                            <button
                                                className="cs-btn"
                                                onClick={() =>
                                                    onMarkDepositPaid(inv)
                                                }
                                                style={{
                                                    width: "100%",
                                                    marginTop: 12,
                                                    padding: 10,
                                                    borderRadius: 8,
                                                    border: "none",
                                                    backgroundColor: "#059669",
                                                    color: "#FFF",
                                                    fontWeight: 700,
                                                    fontSize: 12.5,
                                                    cursor: "pointer",
                                                    display: "flex",
                                                    alignItems: "center",
                                                    justifyContent: "center",
                                                    gap: 7,
                                                }}
                                            >
                                                <Icon name="check" size={15} />
                                                Mark Deposit as Paid
                                            </button>
                                        )}
                                </div>
                            </div>
                        </>
                    )}

                    {/* --- Payments received --- */}
                    {inv.payments && inv.payments.length > 0 && (
                        <>
                            <Divider />
                            <div style={{ padding: `24px ${padX}` }}>
                                <div style={sectionLabel}>
                                    Payments Received
                                </div>
                                {inv.payments.map((payment, i) => (
                                    <div
                                        key={i}
                                        style={{
                                            display: "flex",
                                            justifyContent: "space-between",
                                            alignItems: "center",
                                            gap: 12,
                                            padding: "10px 0",
                                            borderBottom: "1px solid #F4F6F9",
                                        }}
                                    >
                                        <div style={{ minWidth: 0 }}>
                                            <span
                                                style={{
                                                    fontSize: 13.5,
                                                    fontWeight: 700,
                                                    color: "#059669",
                                                }}
                                            >
                                                RM{" "}
                                                {(
                                                    payment.amount || 0
                                                ).toLocaleString()}
                                            </span>
                                            {payment.note && (
                                                <span
                                                    style={{
                                                        fontSize: 12,
                                                        color: "#64748B",
                                                        marginLeft: 8,
                                                    }}
                                                >
                                                    {payment.note}
                                                </span>
                                            )}
                                        </div>
                                        <div
                                            style={{
                                                display: "flex",
                                                alignItems: "center",
                                                gap: 10,
                                            }}
                                        >
                                            <span
                                                style={{
                                                    fontSize: 11.5,
                                                    color: "#94A3B8",
                                                }}
                                            >
                                                {formatDate(payment.date)}
                                            </span>
                                            <button
                                                className="cs-btn"
                                                onClick={() =>
                                                    setViewingReceipt(i)
                                                }
                                                style={{
                                                    padding: "5px 10px",
                                                    borderRadius: 7,
                                                    border: "1px solid #A7F3D0",
                                                    backgroundColor: "#ECFDF5",
                                                    color: "#047857",
                                                    fontSize: 11.5,
                                                    fontWeight: 700,
                                                    cursor: "pointer",
                                                    display: "inline-flex",
                                                    alignItems: "center",
                                                    gap: 5,
                                                }}
                                            >
                                                <Icon name="receipt" size={13} />
                                                Resit
                                            </button>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </>
                    )}

                    {/* --- Payment details --- */}
                    <Divider />
                    <div style={{ padding: `24px ${padX}` }}>
                        <div style={sectionLabel}>Payment Details</div>
                        <div
                            style={{
                                fontSize: 12.5,
                                color: "#64748B",
                                marginBottom: 14,
                                lineHeight: 1.6,
                            }}
                        >
                            {balance <= 0
                                ? "Thank you! Payment complete."
                                : totalPaid > 0
                                  ? `Balance of RM ${balance.toLocaleString()} due by ${formatDate(inv.due)}.`
                                  : `Full payment due by ${formatDate(inv.due)}.`}
                        </div>
                        <div
                            style={{
                                backgroundColor: "#F8FAFC",
                                border: "1px solid #E2E8F0",
                                borderRadius: 12,
                                padding: 16,
                                display: "flex",
                                flexWrap: "wrap",
                                gap: 20,
                                alignItems: "center",
                            }}
                        >
                            <div>
                                <div style={microLabel}>Bank Transfer</div>
                                <div
                                    style={{
                                        display: "flex",
                                        alignItems: "center",
                                        gap: 8,
                                        marginTop: 8,
                                    }}
                                >
                                    <span
                                        style={{
                                            backgroundColor: "#FBBF24",
                                            color: "#FFF",
                                            padding: "2px 8px",
                                            borderRadius: 5,
                                            fontWeight: 800,
                                            fontSize: 10.5,
                                        }}
                                    >
                                        {bankDetails.bank}
                                    </span>
                                    <span
                                        style={{
                                            fontFamily: "monospace",
                                            fontSize: 15,
                                            fontWeight: 700,
                                            color: "#0F172A",
                                        }}
                                    >
                                        {bankDetails.accountNo}
                                    </span>
                                </div>
                                <div
                                    style={{
                                        fontSize: 11,
                                        color: "#64748B",
                                        marginTop: 4,
                                    }}
                                >
                                    {bankDetails.accountName}
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* --- Footer --- */}
                    <div
                        style={{
                            borderTop: "1px solid #EEF1F5",
                            padding: `18px ${padX} 26px`,
                            textAlign: "center",
                        }}
                    >
                        <div
                            style={{
                                fontSize: 13,
                                fontWeight: 700,
                                color: ACCENT,
                            }}
                        >
                            Thank you for your business!
                        </div>
                        <div
                            style={{
                                fontSize: 11,
                                color: "#94A3B8",
                                marginTop: 5,
                            }}
                        >
                            {companyInfo.name} {companyInfo.tagline} ·{" "}
                            {companyInfo.phone} · {companyInfo.email}
                        </div>
                    </div>
                </div>

                {/* ===== Actions ===== */}
                <div
                    className="no-print"
                    style={{
                        display: "flex",
                        flexDirection: "column",
                        gap: 10,
                        marginTop: 18,
                    }}
                >
                    <div
                        style={{ display: "flex", gap: 10, flexWrap: "wrap" }}
                    >
                        <button
                            className="cs-btn"
                            onClick={handlePrint}
                            style={{
                                flex: "1 1 200px",
                                padding: 13,
                                borderRadius: 12,
                                border: "none",
                                background:
                                    "linear-gradient(135deg, #3B82F6, #2563EB)",
                                color: "#FFF",
                                fontWeight: 700,
                                fontSize: 13.5,
                                cursor: "pointer",
                                boxShadow: "0 4px 12px rgba(37,99,235,.3)",
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                gap: 7,
                            }}
                        >
                            <Icon name="printer" size={16} />
                            Print / Simpan PDF (A4)
                        </button>
                        {onShare && (
                            <button
                                className="cs-btn"
                                onClick={onShare}
                                style={{
                                    flex: "1 1 160px",
                                    padding: 13,
                                    borderRadius: 12,
                                    border: "1px solid #A7F3D0",
                                    backgroundColor: "#ECFDF5",
                                    color: "#047857",
                                    fontWeight: 700,
                                    fontSize: 13.5,
                                    cursor: "pointer",
                                    display: "flex",
                                    alignItems: "center",
                                    justifyContent: "center",
                                    gap: 7,
                                }}
                            >
                                <Icon name="share" size={16} />
                                Share Link
                            </button>
                        )}
                    </div>

                    {!isPublicView && (
                        <div
                            style={{
                                display: "flex",
                                gap: 10,
                                flexWrap: "wrap",
                            }}
                        >
                            {onEdit && (
                                <button
                                    className="cs-btn"
                                    onClick={() => onEdit(inv)}
                                    style={{
                                        flex: "1 1 160px",
                                        padding: 13,
                                        borderRadius: 12,
                                        border: "none",
                                        background:
                                            "linear-gradient(135deg, #3B82F6, #2563EB)",
                                        color: "#FFF",
                                        fontWeight: 700,
                                        fontSize: 13.5,
                                        cursor: "pointer",
                                        boxShadow:
                                            "0 4px 12px rgba(37,99,235,.3)",
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        gap: 7,
                                    }}
                                >
                                    <Icon name="edit" size={16} />
                                    Edit
                                </button>
                            )}
                            {onDuplicate && (
                                <button
                                    className="cs-btn"
                                    onClick={() => onDuplicate(inv)}
                                    style={{
                                        flex: "1 1 160px",
                                        padding: 13,
                                        borderRadius: 12,
                                        border: "1px solid #E2E8F0",
                                        backgroundColor: "#FFF",
                                        color: "#334155",
                                        fontWeight: 700,
                                        fontSize: 13.5,
                                        cursor: "pointer",
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        gap: 7,
                                    }}
                                >
                                    <Icon name="copy" size={16} />
                                    Duplicate
                                </button>
                            )}
                            {inv.status !== "paid" && onMarkPaid && (
                                <button
                                    className="cs-btn"
                                    onClick={() => onMarkPaid(inv)}
                                    style={{
                                        flex: "1 1 160px",
                                        padding: 13,
                                        borderRadius: 12,
                                        border: "none",
                                        background:
                                            "linear-gradient(135deg, #10B981, #059669)",
                                        color: "#FFF",
                                        fontWeight: 700,
                                        fontSize: 13.5,
                                        cursor: "pointer",
                                        boxShadow:
                                            "0 4px 12px rgba(5,150,105,.3)",
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        gap: 7,
                                    }}
                                >
                                    <Icon name="check" size={16} />
                                    Mark as Paid
                                </button>
                            )}
                        </div>
                    )}

                    {!isPublicView && onDelete && (
                        <button
                            className="cs-btn"
                            onClick={() => onDelete(inv)}
                            style={{
                                width: "100%",
                                padding: 12,
                                borderRadius: 12,
                                border: "1px solid #FECACA",
                                backgroundColor: "#FEF2F2",
                                color: "#DC2626",
                                fontWeight: 700,
                                fontSize: 13,
                                cursor: "pointer",
                                marginTop: 4,
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                gap: 7,
                            }}
                        >
                            <Icon name="trash" size={15} />
                            Padam Invoice
                        </button>
                    )}
                </div>
            </div>
        </div>
    )
}

window.InvoiceView = InvoiceView