function Returns({ notify, user }) {
    const { formatLKR, getMockInvoiceDetails, createCreditNote, returnReasons, customers, products, logActivity, creditNotes } = window.MockData;
    const currentUser = user || { name: 'Admin' };
    
    // View State
    const [activeTab, setActiveTab] = React.useState('returns'); // 'returns' or 'vouchers'

    // --- Returns Logic State ---
    const [invoiceId, setInvoiceId] = React.useState('');
    const [invoiceData, setInvoiceData] = React.useState(null);
    const [selectedItems, setSelectedItems] = React.useState([]);
    const [restockMap, setRestockMap] = React.useState({}); // Map of uniqueId -> boolean
    
    // Return Reason State
    const [returnReason, setReturnReason] = React.useState(returnReasons[0]);
    const [loyaltyAdjustment, setLoyaltyAdjustment] = React.useState(0);
    const [customerPoints, setCustomerPoints] = React.useState(0);

    // --- Voucher Logic State ---
    const [voucherForm, setVoucherForm] = React.useState({
        amount: '',
        customerName: '',
        phone: '',
        email: '',
        note: 'Store Purchase'
    });

    // Shared State
    const [generatedCredit, setGeneratedCredit] = React.useState(null);
    const [error, setError] = React.useState('');

    // --- Returns Functions ---

    const handleSearch = (e) => {
        e.preventDefault();
        performSearch(invoiceId);
    };

    const performSearch = (id) => {
        setError('');
        setGeneratedCredit(null);
        setInvoiceData(null);
        
        if (!id.trim()) {
            setError('Please enter or scan an Invoice ID');
            return;
        }

        // Simulate API call
        const result = getMockInvoiceDetails(id);
        if (result && result.items.length > 0) {
            setInvoiceData(result);
            setSelectedItems([]);
            setRestockMap({});
            // Fetch current points if customer exists
            if (result.customerId) {
                const cust = customers.find(c => c.id === result.customerId);
                setCustomerPoints(cust ? cust.points : 0);
            } else {
                setCustomerPoints(0);
            }
            setLoyaltyAdjustment(0);
        } else {
            setError('Invoice not found');
            setInvoiceData(null);
        }
    };

    const toggleItemSelection = (uniqueId) => {
        if (selectedItems.includes(uniqueId)) {
            setSelectedItems(selectedItems.filter(id => id !== uniqueId));
            // Also uncheck restock if deselected
            const newMap = { ...restockMap };
            delete newMap[uniqueId];
            setRestockMap(newMap);
        } else {
            setSelectedItems([...selectedItems, uniqueId]);
        }
    };

    const toggleRestock = (uniqueId, e) => {
        e.stopPropagation(); // Prevent toggling selection
        setRestockMap(prev => ({
            ...prev,
            [uniqueId]: !prev[uniqueId]
        }));
    };

    const handleProcessReturn = async (type = 'CREDIT') => {
        if (selectedItems.length === 0) return;

        // Identify items marked for restock
        const itemsToReturn = invoiceData.items.filter(item => selectedItems.includes(item.uniqueId));
        const itemsToRestock = itemsToReturn.filter(item => restockMap[item.uniqueId]);

        const totalRefund = itemsToReturn.reduce((sum, item) => sum + (item.finalTotal ?? item.price), 0);

        // Process Restocking Logic
        let restockedCount = 0;
        itemsToRestock.forEach(item => {
            // Find real product reference and update stock
            const realProduct = products.find(p => p.id === item.id);
            if (realProduct) {
                const variation = realProduct.variations.find(v => v.id === item.variation.id);
                if (variation) {
                    variation.stock += 1;
                    restockedCount++;
                }
            }
        });

        // Log the Action
        if (restockedCount > 0) {
            logActivity(currentUser, "Return Restock", `Authorized Return: Restocked ${restockedCount} items from Invoice ${invoiceId} (Processed by Cashier)`);
        }
        
        const actionLabel = type === 'VOUCHER' ? "Gift Voucher Issued (From Return)" : "Credit Note Issued";
        logActivity(currentUser, actionLabel, `Generated ${type === 'VOUCHER' ? 'Voucher' : 'Credit Note'} for ${formatLKR(totalRefund)} (Inv: ${invoiceId}, Reason: ${returnReason})`);

        // Generate Credit Note/Voucher
        const creditNote = createCreditNote(totalRefund, invoiceId, returnReason, type);
        setGeneratedCredit(creditNote);
        
        setInvoiceData(null); // Clear form
        setInvoiceId('');
    };

    // --- Voucher Functions ---

    const handleIssueVoucher = (e) => {
        e.preventDefault();
        const amount = parseFloat(voucherForm.amount);
        if (!amount || amount <= 0) {
            notify('Error', 'Please enter a valid amount', 'error');
            return;
        }

        if (!voucherForm.customerName || !voucherForm.phone) {
             notify('Error', 'Guest Name and Phone are required for Vouchers', 'error');
             return;
        }

        // Create Voucher
        const refId = `MAN-${Date.now().toString().slice(-6)}`;
        const customerDetails = {
            name: voucherForm.customerName,
            phone: voucherForm.phone,
            email: voucherForm.email
        };
        
        const voucher = createCreditNote(amount, refId, voucherForm.note, 'VOUCHER', customerDetails);
        setGeneratedCredit(voucher);
        
        logActivity(currentUser, "Direct Voucher Issue", `Issued Gift Voucher value ${formatLKR(amount)} for ${voucherForm.customerName}`);
        
        setVoucherForm({ amount: '', customerName: '', phone: '', email: '', note: 'Store Purchase' });
        notify('Success', 'Gift voucher generated successfully', 'success');
    };

    const printCreditNote = () => {
        if (!generatedCredit) return;

        const printArea = document.getElementById('receipt-print-area');
        const labelArea = document.getElementById('print-area');

        if (!printArea) return;

        // Clear BOTH areas
        printArea.innerHTML = '';
        if (labelArea) labelArea.innerHTML = '';

        const now = new Date();
        const dateStr = now.toLocaleDateString('en-GB');
        const timeStr = now.toLocaleTimeString('en-US', { hour12: true });
        
        // Ensure ID safe for CSS
        const safeId = `cn_${generatedCredit.creditId.replace(/[^a-zA-Z0-9]/g, '_')}`;

        const isVoucher = generatedCredit.type === 'VOUCHER';
        const title = isVoucher ? 'GIFT VOUCHER' : 'RETURN TOKEN';
        const info = isVoucher 
            ? 'This voucher can be used for any purchase.' 
            : 'Present this token at cashier to redeem.';

        // HTML Template for 78mm Receipt/Token
        printArea.innerHTML = `
            <div class="receipt-container">
                <div class="receipt-header">
                    <div class="receipt-logo">
                         <img src="components/noahvelle%20black%20logo%20no%20bg.png" alt="NOAHVELLE" />
                    </div>
                    <div class="receipt-meta" style="font-weight:800; margin-top:4px;">${isVoucher ? 'ISSUANCE' : 'RETURNS'}</div>
                    <div class="receipt-meta">Shop 6, Level 3, Majestic City,</div>
                    <div class="receipt-meta">No. 10, Station road, Colombo 4.</div>
                    <div class="receipt-meta" style="margin-top:5px; padding-top:2px;">
                        Date: ${dateStr} &nbsp; Time: ${timeStr}
                    </div>
                </div>

                <div class="token-title">${title}</div>
                
                <div class="receipt-row"><span>Ref ID:</span><span>${generatedCredit.creditId}</span></div>
                <div class="receipt-row"><span>Original Ref:</span><span>${generatedCredit.originalInvoiceId}</span></div>
                ${!isVoucher ? `<div class="receipt-row"><span>Reason:</span><span>${generatedCredit.reason}</span></div>` : ''}
                <div class="receipt-row"><span>Issued By:</span><span>${currentUser.name}</span></div>

                ${generatedCredit.customerDetails ? `
                    <div style="margin-top: 10px; border-top: 1px dashed #000; padding-top: 5px;">
                        <div class="receipt-row" style="margin-bottom:0;"><span>Guest:</span><span>${generatedCredit.customerDetails.name}</span></div>
                        <div class="receipt-row" style="font-size:11px; margin-bottom:0;"><span>Phone:</span><span>${generatedCredit.customerDetails.phone}</span></div>
                    </div>
                ` : ''}

                <div style="border-top: 3px dashed #000; margin-top: 10px; padding-top: 10px; text-align: center;">
                    <div style="font-size: 14px; font-weight: 900; text-transform: uppercase;">${isVoucher ? 'Voucher Value' : 'Exchange Credit Value'}</div>
                    <div class="token-value">${formatLKR(Math.abs(generatedCredit.amount))}</div>
                </div>

                <div class="receipt-barcode-container">
                    <svg id="${safeId}" class="receipt-barcode-svg"></svg>
                </div>
                
                <div style="text-align: center; font-family: monospace; font-weight: 900; font-size: 16px; margin-top: 5px; letter-spacing: 2px;">
                    ${generatedCredit.barcode}
                </div>

                <div class="receipt-footer">
                    <p>${info}</p>
                    <p style="font-weight: 900; font-size: 14px; margin-top: 5px;">${isVoucher ? 'Valid for 1 Year.' : 'Valid for 3 days ONLY.'}</p>
                </div>

                <div style="text-align: center; font-size: 10px; margin-top: 15px; color: #000; border-top: 1px solid #000; padding-top: 5px; font-weight: 700;">
                    <div>System Design and Developed by Pandan Labs</div>
                    <div style="font-size: 12px; margin-top: 2px; white-space: nowrap;">+94 70 693 2532</div>
                </div>
            </div>
        `;

        // Generate Barcode
        setTimeout(() => {
            try {
                const barcodeLib = window.JsBarcode || (typeof JsBarcode !== 'undefined' ? JsBarcode : null);
                if (barcodeLib) {
                    barcodeLib(`#${safeId}`, generatedCredit.barcode, {
                        format: "CODE128",
                        width: 2.5,
                        height: 50,
                        displayValue: false,
                        margin: 0
                    });
                }
            } catch (e) {
                console.error("Credit Barcode Error", e);
            }

            setTimeout(() => {
                if (window.setupPrintConfig) window.setupPrintConfig('receipt');
                window.print();
            }, 500);
        }, 100);
    };

    // Filter to get only Vouchers for the registry
    const issuedVouchers = creditNotes.filter(cn => cn.type === 'VOUCHER');

    return (
        <div className="space-y-6">
            <h2 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
                <span className="icon-rotate-ccw text-[var(--primary)]"></span>
                Returns & Vouchers Center
            </h2>

            {/* Navigation Tabs */}
            <div className="flex gap-4 border-b border-gray-200">
                <button 
                    onClick={() => { setActiveTab('returns'); setGeneratedCredit(null); setError(''); }}
                    className={`pb-3 px-1 font-medium text-sm transition-colors relative ${activeTab === 'returns' ? 'text-[var(--primary)] border-b-2 border-[var(--primary)]' : 'text-gray-500 hover:text-gray-700'}`}
                >
                    Process Returns (Invoice Based)
                </button>
                <button 
                    onClick={() => { setActiveTab('vouchers'); setGeneratedCredit(null); setError(''); }}
                    className={`pb-3 px-1 font-medium text-sm transition-colors relative ${activeTab === 'vouchers' ? 'text-[var(--primary)] border-b-2 border-[var(--primary)]' : 'text-gray-500 hover:text-gray-700'}`}
                >
                    Issue New Gift Voucher
                </button>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                
                {/* LEFT SIDE: INPUT AREA */}
                <div className="card h-fit">
                    {activeTab === 'returns' ? (
                        <>
                            <h3 className="font-bold text-gray-800 mb-4 flex items-center gap-2">
                                <span className="icon-scan-barcode text-[var(--primary)]"></span> 
                                Bill Search / Scan
                            </h3>
                            <form onSubmit={handleSearch} className="flex gap-2 mb-6">
                                <div className="relative flex-1">
                                    <span className="icon-search absolute left-3 top-2.5 text-gray-400"></span>
                                    <input 
                                        type="text" 
                                        placeholder="Scan Barcode or Enter ID" 
                                        className="input-field pl-10 uppercase font-mono"
                                        value={invoiceId}
                                        autoFocus
                                        onChange={(e) => setInvoiceId(e.target.value)}
                                    />
                                </div>
                                <button type="submit" className="btn btn-primary px-4">
                                    <span className="icon-search"></span>
                                </button>
                            </form>
                            {error && <p className="text-red-500 text-sm mb-4"><span className="icon-triangle-alert mr-1"></span>{error}</p>}

                            {invoiceData && (
                                <div className="animate-fade-in">
                                    <div className="bg-gray-50 p-3 rounded-lg mb-4 text-sm border border-gray-100">
                                        <div className="flex justify-between">
                                            <span className="text-gray-500">Customer:</span>
                                            <span className="font-medium">{invoiceData.customerName}</span>
                                        </div>
                                        {invoiceData.customerId && (
                                            <div className="flex justify-between mt-1">
                                                <span className="text-gray-500">Current Points:</span>
                                                <span className="font-bold text-[var(--primary)]">{customerPoints}</span>
                                            </div>
                                        )}
                                    </div>

                                    <h4 className="font-medium text-gray-700 mb-2">Select Items to Return:</h4>
                                    <div className="space-y-2 mb-6 max-h-60 overflow-y-auto">
                                        {invoiceData.items.map(item => (
                                            <div 
                                                key={item.uniqueId} 
                                                onClick={() => toggleItemSelection(item.uniqueId)}
                                                className={`p-3 rounded-lg border cursor-pointer flex items-center gap-3 transition-colors ${
                                                    selectedItems.includes(item.uniqueId) 
                                                    ? 'border-red-500 bg-red-50' 
                                                    : 'border-gray-200 hover:bg-gray-50'
                                                }`}
                                            >
                                                <div className={`w-5 h-5 rounded border flex items-center justify-center ${
                                                    selectedItems.includes(item.uniqueId) ? 'bg-red-500 border-red-500 text-white' : 'border-gray-300 bg-white'
                                                }`}>
                                                    {selectedItems.includes(item.uniqueId) && <span className="icon-check text-xs"></span>}
                                                </div>
                                                <div className="flex-1">
                                                    <p className="font-medium text-sm text-gray-900">{item.name}</p>
                                                    <p className="text-xs text-gray-500">{item.variation.size} | {formatLKR(item.finalTotal ?? item.price)}</p>
                                                </div>
                                                
                                                {/* Restock Toggle */}
                                                {selectedItems.includes(item.uniqueId) && (
                                                    <div onClick={(e) => toggleRestock(item.uniqueId, e)} className="flex items-center gap-2 bg-white px-2 py-1 rounded border border-gray-200 hover:bg-gray-50">
                                                        <input 
                                                            type="checkbox" 
                                                            checked={!!restockMap[item.uniqueId]} 
                                                            readOnly
                                                            className="cursor-pointer text-green-600 focus:ring-green-500"
                                                        />
                                                        <span className="text-xs font-medium text-gray-700">Restock?</span>
                                                    </div>
                                                )}
                                            </div>
                                        ))}
                                    </div>
                                    
                                    {/* Return Reason Dropdown */}
                                    <div className="mb-4">
                                        <label className="block text-sm font-medium text-gray-700 mb-1">Reason for Return</label>
                                        <select 
                                            className="input-field"
                                            value={returnReason}
                                            onChange={(e) => setReturnReason(e.target.value)}
                                        >
                                            {returnReasons.map(r => <option key={r} value={r}>{r}</option>)}
                                        </select>
                                    </div>

                                    {/* Loyalty Points Adjustment */}
                                    {invoiceData.customerId && (
                                        <div className="mb-6 bg-yellow-50 p-3 rounded-lg border border-yellow-100">
                                            <label className="block text-xs font-bold text-yellow-800 mb-2">Adjust Loyalty Points (Optional)</label>
                                            <div className="flex items-center gap-2">
                                                <button 
                                                    onClick={() => setLoyaltyAdjustment(prev => prev - 10)}
                                                    className="w-8 h-8 rounded bg-white border border-gray-300 flex items-center justify-center hover:bg-gray-50"
                                                >-</button>
                                                <input 
                                                    type="number" 
                                                    className="input-field text-center w-24 h-8"
                                                    value={loyaltyAdjustment}
                                                    onChange={(e) => setLoyaltyAdjustment(parseInt(e.target.value) || 0)}
                                                />
                                                <button 
                                                    onClick={() => setLoyaltyAdjustment(prev => prev + 10)}
                                                    className="w-8 h-8 rounded bg-white border border-gray-300 flex items-center justify-center hover:bg-gray-50"
                                                >+</button>
                                            </div>
                                            <p className="text-[10px] text-gray-500 mt-1">Use negative value to deduct points earned from returned items.</p>
                                        </div>
                                    )}

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                                        <button 
                                            onClick={() => handleProcessReturn('CREDIT')}
                                            disabled={selectedItems.length === 0}
                                            className="btn btn-secondary disabled:opacity-50 disabled:cursor-not-allowed"
                                        >
                                            <span className="icon-file-text mr-2"></span> Exchange Token
                                        </button>
                                        <button 
                                            onClick={() => handleProcessReturn('VOUCHER')}
                                            disabled={selectedItems.length === 0}
                                            className="btn btn-primary disabled:opacity-50 disabled:cursor-not-allowed bg-purple-600 hover:bg-purple-700 focus:ring-purple-500"
                                        >
                                            <span className="icon-gift mr-2"></span> Gift Voucher
                                        </button>
                                    </div>
                                </div>
                            )}
                        </>
                    ) : (
                        // VOUCHER TAB CONTENT
                        <div className="animate-fade-in flex flex-col h-full">
                            <div>
                                <h3 className="font-bold text-gray-800 mb-4 flex items-center gap-2">
                                    <span className="icon-gift text-purple-600"></span> 
                                    Generate New Voucher
                                </h3>
                                <div className="bg-purple-50 p-4 rounded-lg border border-purple-100 mb-6">
                                    <p className="text-sm text-purple-800">Fill in guest details to issue a personalized gift voucher.</p>
                                </div>

                                <form onSubmit={handleIssueVoucher} className="space-y-4">
                                    <div>
                                        <label className="block text-sm font-bold text-gray-700 mb-1">Voucher Amount (LKR)</label>
                                        <div className="relative">
                                            <span className="absolute left-3 top-2.5 text-gray-500 font-bold">Rs.</span>
                                            <input 
                                                type="number" 
                                                required
                                                min="1"
                                                placeholder="5000.00" 
                                                className="input-field pl-10 text-lg font-bold text-gray-900"
                                                value={voucherForm.amount}
                                                autoFocus
                                                onChange={(e) => setVoucherForm({...voucherForm, amount: e.target.value})}
                                            />
                                        </div>
                                    </div>

                                    <div className="grid grid-cols-2 gap-4">
                                        <div>
                                            <label className="block text-sm font-medium text-gray-700 mb-1">Guest Name <span className="text-red-500">*</span></label>
                                            <input 
                                                type="text" 
                                                required
                                                className="input-field"
                                                placeholder="Full Name"
                                                value={voucherForm.customerName}
                                                onChange={(e) => setVoucherForm({...voucherForm, customerName: e.target.value})}
                                            />
                                        </div>
                                        <div>
                                            <label className="block text-sm font-medium text-gray-700 mb-1">Phone <span className="text-red-500">*</span></label>
                                            <input 
                                                type="text" 
                                                required
                                                className="input-field"
                                                placeholder="07x-xxxxxxx"
                                                value={voucherForm.phone}
                                                onChange={(e) => setVoucherForm({...voucherForm, phone: e.target.value})}
                                            />
                                        </div>
                                    </div>

                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">Email (Optional)</label>
                                        <input 
                                            type="email" 
                                            className="input-field"
                                            placeholder="guest@example.com"
                                            value={voucherForm.email}
                                            onChange={(e) => setVoucherForm({...voucherForm, email: e.target.value})}
                                        />
                                    </div>

                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">Issuance Reason / Note</label>
                                        <select 
                                            className="input-field"
                                            value={voucherForm.note}
                                            onChange={(e) => setVoucherForm({...voucherForm, note: e.target.value})}
                                        >
                                            <option value="Store Purchase">Store Purchase</option>
                                            <option value="Goodwill / Compensation">Goodwill / Compensation</option>
                                            <option value="Corporate Gift">Corporate Gift</option>
                                            <option value="Prize / Winner">Prize / Winner</option>
                                            <option value="Other">Other</option>
                                        </select>
                                    </div>

                                    <div className="pt-2">
                                        <button type="submit" className="w-full btn btn-primary bg-purple-600 hover:bg-purple-700 py-3 font-bold shadow-lg shadow-purple-200">
                                            <span className="icon-printer mr-2"></span> Issue & Print Voucher
                                        </button>
                                    </div>
                                </form>
                            </div>
                            
                            {/* Separate Section: Voucher Registry */}
                            <div className="mt-8 border-t border-gray-100 pt-6">
                                <h4 className="font-bold text-gray-800 mb-4 flex items-center gap-2">
                                    <span className="icon-history text-gray-400"></span> Recently Issued Vouchers
                                </h4>
                                <div className="bg-white border border-gray-200 rounded-lg overflow-hidden max-h-60 overflow-y-auto">
                                    <table className="w-full text-left text-xs">
                                        <thead className="bg-gray-50 text-gray-600 font-semibold sticky top-0">
                                            <tr>
                                                <th className="px-3 py-2">ID</th>
                                                <th className="px-3 py-2">Guest Info</th>
                                                <th className="px-3 py-2 text-right">Value</th>
                                                <th className="px-3 py-2 text-center">Status</th>
                                            </tr>
                                        </thead>
                                        <tbody className="divide-y divide-gray-100">
                                            {issuedVouchers.length > 0 ? issuedVouchers.slice().reverse().map(v => (
                                                <tr key={v.creditId} className="hover:bg-gray-50">
                                                    <td className="px-3 py-2 font-mono">{v.creditId}</td>
                                                    <td className="px-3 py-2">
                                                        {v.customerDetails ? (
                                                            <div>
                                                                <div className="font-bold text-gray-900">{v.customerDetails.name}</div>
                                                                <div className="text-gray-500">{v.customerDetails.phone}</div>
                                                            </div>
                                                        ) : (
                                                            <span className="text-gray-400">No Guest Info</span>
                                                        )}
                                                    </td>
                                                    <td className="px-3 py-2 text-right font-bold text-purple-600">{formatLKR(Math.abs(v.amount))}</td>
                                                    <td className="px-3 py-2 text-center">
                                                        {v.isUsed ? <span className="text-green-600 font-bold">Redeemed</span> : <span className="text-gray-400">Active</span>}
                                                    </td>
                                                </tr>
                                            )) : (
                                                <tr><td colSpan="4" className="p-4 text-center text-gray-400">No vouchers issued yet.</td></tr>
                                            )}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    )}
                </div>

                {/* RIGHT SIDE: PREVIEW & PRINT */}
                <div className="card h-fit bg-gray-50 border-dashed border-2 border-gray-300 flex flex-col items-center justify-center text-center p-8 min-h-[400px]">
                    {!generatedCredit ? (
                        <div className="text-gray-400">
                            <span className="icon-receipt text-6xl mb-4 block opacity-20 mx-auto"></span>
                            <p className="font-medium">Document Preview</p>
                            <p className="text-xs mt-2">Voucher or Credit Note preview will appear here after generation.</p>
                        </div>
                    ) : (
                        <div className="w-full animate-fade-in">
                            <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 ${generatedCredit.type === 'VOUCHER' ? 'bg-purple-100 text-purple-600' : 'bg-green-100 text-green-600'}`}>
                                <span className={`text-3xl ${generatedCredit.type === 'VOUCHER' ? 'icon-gift' : 'icon-check'}`}></span>
                            </div>
                            <h3 className="text-xl font-bold text-gray-900 mb-2">{generatedCredit.type === 'VOUCHER' ? 'Gift Voucher Issued!' : 'Credit Note Generated!'}</h3>
                            <p className="text-gray-500 mb-6">ID: {generatedCredit.creditId}</p>

                            <div className={`p-4 rounded-lg border mb-6 max-w-xs mx-auto text-center ${generatedCredit.type === 'VOUCHER' ? 'bg-purple-50 border-purple-100' : 'bg-green-50 border-green-100'}`}>
                                <p className={`text-sm font-medium mb-1 ${generatedCredit.type === 'VOUCHER' ? 'text-purple-800' : 'text-green-800'}`}>Value</p>
                                <p className={`text-2xl font-bold ${generatedCredit.type === 'VOUCHER' ? 'text-purple-700' : 'text-green-700'}`}>{formatLKR(generatedCredit.amount)}</p>
                            </div>

                            <button onClick={printCreditNote} className="btn btn-primary shadow-lg shadow-emerald-500/20 w-full md:w-auto">
                                <span className="icon-printer mr-2"></span> Print {generatedCredit.type === 'VOUCHER' ? 'Voucher' : 'Credit Note'}
                            </button>
                            
                            <p className="text-xs text-gray-400 mt-4">Document is ready for thermal printing (80mm).</p>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}