import React, { useState, useEffect, useMemo } from 'react';
import { Download, Edit3, X, Plus, Phone, Mail, Globe, Calendar, ArrowRight } from 'lucide-react';

// --- Utility Functions ---

/**
 * Converts a date object to YYYY-MM-DD string for input[type="date"]
 * @param {Date | string} date 
 * @returns {string}
 */
const dateToInputFormat = (date) => {
    if (!date) return '';
    const d = new Date(date);
    if (isNaN(d)) return ''; 
    return d.toISOString().split('T')[0];
};

/**
 * Formats YYYY-MM-DD string for display
 * @param {string} dateString 
 * @returns {string}
 */
const formatDateDisplay = (dateString) => {
    if (!dateString) return 'N/A';
    const [year, month, day] = dateString.split('-');
    const date = new Date(year, month - 1, day); 
    if (isNaN(date) || year.length !== 4) return dateString;
    return `${day} ${date.toLocaleString('default', { month: 'long' })} ${year}`;
};

/**
 * Formats a number as a currency string (Rs), without decimal places.
 * @param {number} num
 * @returns {string}
 */
const formatCurrency = (num) => {
    if (isNaN(num)) return 'Rs 0';
    return `Rs ${Math.round(num).toLocaleString('en-IN', { maximumFractionDigits: 0 })}`;
};

/**
 * Increments an alphanumeric number (e.g., 'INV-1001' -> 'INV-1002').
 * This is a client-side function and does not persist the value.
 * @param {string} currentNumber 
 * @returns {string} The incremented number string.
 */
const incrementNumber = (currentNumber) => {
    // Regex to find an alphanumeric prefix and a numeric suffix
    const match = currentNumber.match(/^([A-Za-z-]+)(\d+)$/);
    if (match) {
        const prefix = match[1];
        const currentNum = parseInt(match[2], 10);
        const nextNum = currentNum + 1;
        const numLength = match[2].length;
        // Pad the number with leading zeros if necessary (e.g., 001 -> 002)
        return `${prefix}${String(nextNum).padStart(numLength, '0')}`;
    }
    // If pattern not found, append '2' or return original
    return `${currentNumber}-2`; 
};

// --- API Utility Function with Exponential Backoff ---
const withExponentialBackoff = async (apiCall, maxRetries = 5, delay = 1000) => {
    for (let i = 0; i < maxRetries; i++) {
        try {
            return await apiCall();
        } catch (error) {
            if (i === maxRetries - 1) throw error;
            await new Promise(resolve => setTimeout(resolve, delay * Math.pow(2, i)));
        }
    }
};


// --- The Main App Component ---

const App = () => {
    // --- State Management ---
    const [isEditing, setIsEditing] = useState(true);
    const [isGenerating, setIsGenerating] = useState(false);
    const [isTaxRequired, setIsTaxRequired] = useState(false);
    const [message, setMessage] = useState('');
    const [isPdfLibraryLoaded, setIsPdfLibraryLoaded] = useState(false); 
    
    // AI Notes State
    const [notesPrompt, setNotesPrompt] = useState('Write professional payment terms for an event service invoice, due in 15 days.');
    const [isGeneratingNotes, setIsGeneratingNotes] = useState(false);

    // Initial state setup (using local defaults now)
    const [generalData, setGeneralData] = useState({
        clientName: 'Hamdard University',
        eventType: 'Corporate Gala Dinner',
        eventDate: dateToInputFormat(new Date('2025-09-20')),
        eventVenue: 'Karachi',
        invoiceDate: dateToInputFormat(new Date()),
        
        // Default numbers (user must edit or use Next button)
        invoiceNumber: 'INV-1001', 
        poNumber: 'PO-0501', 
        
        // Placeholder Logo URL
        logoUrl: 'https://placehold.co/200x50/83a282/ffffff?text=AELIN+LOGO', 
        
        salesTaxPercent: 17,
        receivedAmount: 0,
        notes: 'Payment due within 30 days of the invoice date. Late fees may apply.',
        issuerName: 'Taha Rao',
        issuerRank: 'Director',
    });

    const [items, setItems] = useState([
        { id: 1, description: 'Venue Setup and Decoration Services', qty: 1, rate: 150000.00 },
        { id: 2, description: 'Sound System and Stage Lighting Rental', qty: 1, rate: 45000.00 },
    ]);


    // --- Setup (PDF Library Loading) ---
    useEffect(() => {
        const loadScript = (src, onLoadCallback) => {
            if (document.querySelector(`script[src="${src}"]`)) {
                onLoadCallback();
                return;
            }
            const script = document.createElement('script');
            script.src = src;
            script.async = true;
            script.onload = onLoadCallback;
            script.onerror = () => console.error(`Failed to load script: ${src}`);
            document.head.appendChild(script);
        };

        let loadedCount = 0;
        const totalScripts = 2;

        const handleLoad = () => {
            loadedCount++;
            if (loadedCount === totalScripts) {
                setTimeout(() => {
                    if (window.html2canvas && (window.jspdf || (window.jspdf && window.jspdf.jsPDF))) {
                         setIsPdfLibraryLoaded(true);
                         showMessage('PDF tools loaded. Ready to download.', false);
                    } else {
                        console.error('PDF libraries did not load into the global window object as expected.');
                         showMessage('PDF tools failed to load. Please refresh.', true);
                    }
                }, 200); 
            }
        };

        // Load html2canvas (converts HTML to canvas/image) and jspdf (converts image to PDF)
        loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js', handleLoad);
        loadScript('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js', handleLoad);
    }, []);


    // --- Calculations (Memoized for performance) ---
    const { subTotal, salesTaxAmount, grandTotal, balance } = useMemo(() => {
        const currentSubTotal = items.reduce((sum, item) => sum + (item.qty * item.rate), 0);
        
        let currentSalesTaxAmount = 0;
        let currentGrandTotal = currentSubTotal;

        if (isTaxRequired) {
            const taxRate = generalData.salesTaxPercent / 100;
            currentSalesTaxAmount = currentSubTotal * taxRate;
            currentGrandTotal = currentSubTotal + currentSalesTaxAmount;
        }

        const currentBalance = currentGrandTotal - generalData.receivedAmount;

        return {
            subTotal: currentSubTotal,
            salesTaxAmount: currentSalesTaxAmount,
            grandTotal: currentGrandTotal,
            balance: currentBalance,
        };
    }, [items, isTaxRequired, generalData.salesTaxPercent, generalData.receivedAmount]);


    // --- Handlers ---

    const handleGeneralChange = (e) => {
        const { id, value, type } = e.target;
        setGeneralData(prev => ({
            ...prev,
            [id]: type === 'number' ? parseFloat(value) || 0 : value,
        }));
    };

    const handleItemChange = (id, field, value) => {
        setItems(prev =>
            prev.map(item =>
                item.id === id ? { ...item, [field]: value } : item
            )
        );
    };

    const addItem = () => {
        const newId = items.length > 0 ? Math.max(...items.map(i => i.id)) + 1 : 1;
        setItems(prev => [...prev, { id: newId, description: '', qty: 1, rate: 0 }]);
    };

    const removeItem = (id) => {
        if (items.length > 1) {
            setItems(prev => prev.filter(item => item.id !== id));
        }
    };
    
    const showMessage = (msg, isError = false) => {
        setMessage(msg);
        setTimeout(() => setMessage(''), 5000);
    };
    
    const handleIncrement = (field) => {
        setGeneralData(prev => ({
            ...prev,
            [field]: incrementNumber(prev[field]),
        }));
        showMessage(`Incremented ${field === 'invoiceNumber' ? 'Invoice' : 'PO'} Number. This is a client-side function.`, false);
    };

    const generateNotes = async () => {
        if (!notesPrompt.trim()) {
            showMessage('Please enter a prompt to generate notes.', true);
            return;
        }
        
        setIsGeneratingNotes(true);
        showMessage('Generating notes...', false);

        const systemPrompt = "You are an invoice generator assistant. Based on the user's prompt, write a concise, professional, and formal single paragraph of payment terms or invoice notes. Do not include a title or introduction. Start directly with the terms.";
        const userQuery = notesPrompt;
        const apiKey = "";
        const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;

        const payload = {
            contents: [{ parts: [{ text: userQuery }] }],
            systemInstruction: {
                parts: [{ text: systemPrompt }]
            },
        };

        try {
            const response = await withExponentialBackoff(() => 
                fetch(apiUrl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                })
            );
            
            if (!response.ok) {
                throw new Error(`API call failed with status: ${response.status}`);
            }

            const result = await response.json();
            const text = result.candidates?.[0]?.content?.parts?.[0]?.text;

            if (text) {
                setGeneralData(prev => ({ ...prev, notes: text.trim() }));
                showMessage('Notes successfully generated!', false);
            } else {
                showMessage('Note generation failed: Empty response from AI.', true);
            }
        } catch (error) {
            console.error('Gemini API Error:', error);
            showMessage('Failed to generate notes. Please check the network or prompt.', true);
        } finally {
            setIsGeneratingNotes(false);
        }
    };

    /**
     * Core PDF generation function using html2canvas and jspdf.
     */
    const downloadPdf = async () => {
        if (!isPdfLibraryLoaded) {
            showMessage('PDF tools are still loading. Please wait a moment.', true);
            return;
        }

        const JsPdfConstructor = window.jspdf?.jsPDF || window.jsPDF; 

        if (typeof JsPdfConstructor !== 'function') {
            showMessage('PDF generation failed: jspdf library not correctly initialized.', true);
            console.error("jsPDF constructor not found under expected global names.");
            return;
        }

        setIsGenerating(true);
        // CRITICAL: Target the element to be converted
        const input = document.getElementById('invoice-content');
        
        if (!input) {
            showMessage('Error: Must be in Preview mode to download PDF.', true);
            setIsGenerating(false);
            return;
        }

        // Temporarily hide controls that shouldn't appear in the PDF screenshot
        const controls = document.getElementById('pdf-controls');
        controls.classList.add('hidden');

        try {
            // Note: The useCORS: true setting is CRITICAL for loading external images like logos.
            const canvas = await window.html2canvas(input, {
                scale: 2, 
                useCORS: true, 
                width: input.offsetWidth, 
                height: input.offsetHeight,
            });

            const imgData = canvas.toDataURL('image/jpeg', 1.0);
            
            const pdfWidth = 210; // A4 width in mm
            const pdfHeight = 297; // A4 height in mm

            const pdf = new JsPdfConstructor('p', 'mm', 'a4'); 

            pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
            
            const filename = `${generalData.clientName.replace(/\s/g, '_')}_Invoice_${generalData.invoiceNumber}.pdf`;
            pdf.save(filename);
            
            showMessage('PDF successfully downloaded!', false);

        } catch (error) {
            console.error("PDF generation failed:", error);
            showMessage('Failed to generate PDF. Check console for details.', true);
        } finally {
            // Re-show controls
            controls.classList.remove('hidden');
            setIsGenerating(false);
        }
    };

    // --- UI Components ---
    
    // 1. Invoice Content Preview Component
    const InvoiceContent = () => (
        <div id="invoice-content" 
             className="p-8 mx-auto bg-white shadow-xl print:shadow-none print:w-full flex flex-col justify-between font-inter"
             style={{ width: '210mm', height: '297mm' }} 
        > 
            
            <div className='flex flex-col flex-grow'>
                {/* Header & Title - LOGO INTEGRATION HERE */}
                <div className="flex justify-between items-center mb-10 border-b-2 border-[#83a282] pb-4"> 
                    
                    {/* Logo Area */}
                    <div className="w-56 flex flex-col items-start">
                        <img 
                            src={generalData.logoUrl} 
                            alt="Company Logo" 
                            className="max-h-12 w-auto object-contain" 
                            crossOrigin="anonymous"
                            // CRITICAL: Fallback image if the URL fails to load for html2canvas
                            onError={(e) => { 
                                e.target.onerror = null; 
                                e.target.src="https://placehold.co/150x50/D1D5DB/4B5563?text=Logo+Failed";
                                e.target.alt="Logo Failed to Load";
                            }} 
                        />
                        <span className="text-sm font-light text-[#83a282] leading-tight tracking-widest mt-1">AELIN EVENTS & PRODUCTION</span>
                    </div>

                    <div className="text-right">
                        <h1 className={`text-5xl font-extrabold text-gray-800 uppercase leading-none`}>
                            INVOICE
                        </h1>
                        <div className='mt-3 text-sm font-medium text-gray-700 space-y-0.5'>
                            <p>INVOICE #: <span className="font-bold text-gray-900">{generalData.invoiceNumber}</span></p>
                            <p>DATE: <span className="font-bold text-gray-900">{formatDateDisplay(generalData.invoiceDate)}</span></p>
                            <p>PO #: <span className="font-bold text-gray-900">{generalData.poNumber}</span></p>
                        </div>
                    </div>
                </div>

                {/* Bill To/From */}
                <div className="flex justify-between mb-8 flex-wrap gap-4"> 
                    {/* Bill From (Issuer) */}
                    <div className="w-full sm:w-1/2 pr-8 border-r border-gray-300">
                        <h3 className="text-sm font-bold text-[#83a282] mb-2 uppercase tracking-wider">Bill From (Issuer):</h3>
                        <p className="text-base text-gray-900 font-bold">Aelin Event Pvt Ltd.</p>
                        <p className="text-sm text-gray-700">NTN: D810933</p> 
                        <p className="text-sm text-gray-700">Jami Commercial Phase 7, DHA, Karachi, Pakistan</p>
                    </div>
                    {/* Bill To (Client) */}
                    <div className="w-full sm:w-1/3 pl-8">
                        <h3 className="text-sm font-bold text-[#83a282] mb-2 uppercase tracking-wider">Bill To (Client):</h3>
                        <p className="text-base font-bold text-gray-900">{generalData.clientName}</p>
                        <p className="text-sm text-gray-700">Event: {generalData.eventType}</p>
                        <p className="text-sm text-gray-700">Date: {formatDateDisplay(generalData.eventDate)}</p>
                        <p className="text-sm text-gray-700">Venue: {generalData.eventVenue}</p>
                    </div>
                </div>

                {/* Invoice Table - Full Itemized Structure */}
                <table className="w-full border-collapse mb-10 border border-gray-200 rounded-lg overflow-hidden"> 
                    <thead>
                        <tr className="bg-[#83a282] text-white text-left text-sm font-bold uppercase tracking-wider">
                            <th className="py-3 px-4 w-1/2">Description</th>
                            <th className="py-3 px-4 w-[10%] text-center">Qty</th>
                            <th className="py-3 px-4 w-[20%] text-right">Rate (Rs)</th>
                            <th className="py-3 px-4 w-[20%] text-right">Total (Rs)</th>
                        </tr>
                    </thead>
                    <tbody className='divide-y divide-gray-200'>
                        {items.map((item, index) => (
                            <tr key={item.id} className={`text-sm ${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'} hover:bg-gray-100 transition-colors`}>
                                <td className="py-2.5 px-4 text-gray-800 whitespace-pre-wrap">{item.description || "Service Description"}</td>
                                <td className="py-2.5 px-4 text-gray-800 text-center">{item.qty}</td>
                                <td className="py-2.5 px-4 text-gray-800 text-right">{formatCurrency(item.rate)}</td>
                                <td className="py-2.5 px-4 text-gray-800 font-semibold text-right">{formatCurrency(item.qty * item.rate)}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>

                {/* Summary, Notes, and Signature Area */}
                <div className="flex justify-between gap-6 mb-12">
                    
                    {/* Notes and Signature */}
                    <div className="w-full sm:w-1/2 pr-4">
                        <h3 className="text-sm font-bold text-gray-700 mb-2 border-b border-gray-300 pb-1">Notes & Payment Terms:</h3>
                        <p className="text-xs text-gray-600 whitespace-pre-wrap leading-relaxed">{generalData.notes}</p>
                        
                        {/* Signature Block */}
                        <div className="mt-12">
                            <p className="text-xs text-gray-500 mb-2 italic mt-4">
                                This is a computer generated invoice and is valid without a physical signature.
                            </p>
                            <div className="flex flex-col items-start w-48">
                                <div className="border-t border-solid border-gray-400 w-full pt-1"></div>
                                <p className="text-sm font-semibold text-gray-800 mt-1">
                                    {generalData.issuerName}
                                </p>
                                <p className="text-xs text-gray-600 mt-0.5">{generalData.issuerRank}</p>
                            </div>
                        </div>
                    </div>
                    
                    {/* Summary Totals */}
                    <div className="w-full sm:w-2/5 max-w-sm px-4 py-2 bg-gray-50 border border-gray-300 rounded-lg shadow-inner"> 
                        <table className="w-full text-sm">
                            <tbody> 
                                {/* Subtotal and Tax (if required) */}
                                {isTaxRequired && ([
                                    <tr key="subtotal-row">
                                        <td className="py-1 w-[60%]">Subtotal (Excl. Tax):</td>
                                        <td className="text-right font-medium w-[40%]">{formatCurrency(subTotal)}</td>
                                    </tr>,
                                    <tr key="tax-row" className='border-b border-gray-300'>
                                        <td className="py-1 w-[60%]">Sales Tax ({generalData.salesTaxPercent}%):</td>
                                        <td className="text-right text-red-600 font-medium w-[40%]">{formatCurrency(salesTaxAmount)}</td>
                                    </tr>
                                ])}
                                
                                {/* Grand Total */}
                                <tr>
                                    <td className="font-bold py-1.5 text-base text-gray-800 w-[60%]">Total Invoice Amount:</td>
                                    <td className="text-right font-extrabold py-1.5 text-base text-gray-800 w-[40%]">{formatCurrency(grandTotal)}</td>
                                </tr>
                                
                                {/* Received Amount */}
                                <tr>
                                    <td className="py-1 text-gray-600 border-b border-gray-300 w-[60%]">(-) Amount Received:</td>
                                    <td className="text-right text-green-600 font-medium border-b border-gray-300 w-[40%]">{formatCurrency(generalData.receivedAmount)}</td>
                                </tr>
                                
                                {/* Balance Due */}
                                <tr className="bg-gray-100 text-gray-800"> 
                                    <td className="font-extrabold py-2 text-lg uppercase rounded-bl-lg w-[60%]">BALANCE DUE:</td>
                                    <td className="text-right font-extrabold py-2 text-lg rounded-tr-lg w-[40%]">{formatCurrency(balance)}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {/* Footer Section */}
            <div className="text-center pt-4 text-sm text-gray-500 border-t-2 border-[#83a282]"> 
                <div className="flex flex-wrap justify-center gap-x-6 gap-y-1">
                    <span className="flex items-center space-x-1 text-gray-700 text-sm">
                        <Phone size={14} className="text-[#83a282]"/>
                        <span className="font-medium"> (021) 33519228, +92 313 1049088</span>
                    </span>
                    <span className="flex items-center space-x-1 text-gray-700 text-sm">
                        <Mail size={14} className="text-[#83a282]"/>
                        <span className="font-medium">info@aelinevents.com</span>
                    </span>
                    <span className="flex items-center space-x-1 text-gray-700 text-sm">
                        <Globe size={14} className="text-[#83a282]"/>
                        <span className="font-medium">www.aelinevents.com</span>
                    </span>
                </div>
                <p className='text-xs text-gray-400 mt-1'>Aelin Events - Excellence in Production.</p>
            </div>
        </div>
    );
    
    // 2. Input Form Component 
    const InputForm = () => (
        <div className="p-8 space-y-6">
            <h2 className="text-2xl font-bold text-[#83a282] border-b pb-3">Invoice Details</h2>
            
            {/* Logo URL Input */}
            <div className="col-span-1 md:col-span-4">
                <label htmlFor="logoUrl" className="block text-sm font-medium text-gray-700">
                    Logo Image URL (Critical for PDF export)
                </label>
                <input type="url" id="logoUrl" value={generalData.logoUrl} onChange={handleGeneralChange}
                    placeholder="Paste your hosted logo URL here (e.g., https://yourdomain.com/logo.png)"
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-gray-50 focus:ring-[#83a282] focus:border-[#83a282]" />
            </div>

            {/* Invoice & PO Numbers and Dates */}
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
                
                {/* Invoice Number with Increment button */}
                <div className='relative'>
                    <label htmlFor="invoiceNumber" className="block text-sm font-medium text-gray-700">Invoice # (INV-XXXX)</label>
                    <input type="text" id="invoiceNumber" value={generalData.invoiceNumber} onChange={handleGeneralChange}
                        className="mt-1 block w-full pr-12 rounded-md border-gray-300 shadow-sm p-2 bg-yellow-50 focus:ring-[#83a282] focus:border-[#83a282]" />
                    <button onClick={() => handleIncrement('invoiceNumber')} type="button" 
                        title="Increment number (client-side only)"
                        className="absolute right-0 top-1/2 mt-1 transform -translate-y-1/2 bg-yellow-100 hover:bg-yellow-200 text-yellow-800 text-xs px-2 py-1 rounded-r-md border-l border-yellow-300 transition flex items-center space-x-1">
                        <ArrowRight size={14}/> <span>Next</span>
                    </button>
                </div>
                
                {/* PO Number with Increment button */}
                <div className='relative'>
                    <label htmlFor="poNumber" className="block text-sm font-medium text-gray-700">PO # (PO-XXXX)</label>
                    <input type="text" id="poNumber" value={generalData.poNumber} onChange={handleGeneralChange}
                        className="mt-1 block w-full pr-12 rounded-md border-gray-300 shadow-sm p-2 bg-yellow-50 focus:ring-[#83a282] focus:border-[#83a282]" />
                    <button onClick={() => handleIncrement('poNumber')} type="button" 
                        title="Increment number (client-side only)"
                        className="absolute right-0 top-1/2 mt-1 transform -translate-y-1/2 bg-yellow-100 hover:bg-yellow-200 text-yellow-800 text-xs px-2 py-1 rounded-r-md border-l border-yellow-300 transition flex items-center space-x-1">
                        <ArrowRight size={14}/> <span>Next</span>
                    </button>
                </div>
                
                {/* Invoice Date (Calendar) */}
                <div>
                    <label htmlFor="invoiceDate" className="block text-sm font-medium text-gray-700">Invoice Date</label>
                    <div className='relative'>
                        <input type="date" id="invoiceDate" value={generalData.invoiceDate} onChange={handleGeneralChange}
                            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-gray-50 focus:ring-[#83a282] focus:border-[#83a282]" />
                        <Calendar size={18} className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none" />
                    </div>
                </div>

                {/* Event Date (Calendar) */}
                <div>
                    <label htmlFor="eventDate" className="block text-sm font-medium text-gray-700">Event Date</label>
                    <div className='relative'>
                        <input type="date" id="eventDate" value={generalData.eventDate} onChange={handleGeneralChange}
                            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-gray-50 focus:ring-[#83a282] focus:border-[#83a282]" />
                        <Calendar size={18} className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none" />
                    </div>
                </div>
            </div>

            {/* Client Info */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {Object.entries({
                    clientName: 'Client Name', eventType: 'Event Type', eventVenue: 'Event Venue'
                }).map(([id, label]) => (
                    <div key={id}>
                        <label htmlFor={id} className="block text-sm font-medium text-gray-700">{label}</label>
                        <input type="text" id={id} value={generalData[id]} onChange={handleGeneralChange}
                            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-gray-50 focus:ring-[#83a282] focus:border-[#83a282]" />
                    </div>
                ))}
            </div>


            {/* Itemized List */}
            <h3 className="text-xl font-semibold text-[#83a282] pt-4 border-t">Itemized Services</h3>
            <div className="overflow-x-auto">
                <table className="min-w-full divide-y divide-gray-200">
                    <thead>
                        <tr className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <th className="p-2 w-1/2">Description</th>
                            <th className="p-2 w-[10%]">Qty</th>
                            <th className="p-2 w-[20%]">Rate</th>
                            <th className="p-2 w-[15%]">Total</th>
                            <th className="p-2 w-[5%]"></th>
                        </tr>
                    </thead>
                    <tbody>
                        {items.map((item) => (
                            <tr key={item.id}>
                                <td className="p-2">
                                    <textarea value={item.description} onChange={(e) => handleItemChange(item.id, 'description', e.target.value)}
                                        className="w-full text-sm rounded-md border-gray-300 shadow-sm p-1 resize-none" rows="2" />
                                </td>
                                <td className="p-2">
                                    <input type="number" value={item.qty} min="0" onChange={(e) => handleItemChange(item.id, 'qty', parseFloat(e.target.value) || 0)}
                                        className="w-full text-sm rounded-md border-gray-300 shadow-sm p-1" />
                                </td>
                                <td className="p-2">
                                    <input type="number" value={item.rate} min="0" onChange={(e) => handleItemChange(item.id, 'rate', parseFloat(e.target.value) || 0)}
                                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-gray-50" />
                                </td>
                                <td className="p-2 text-sm font-medium text-right">{formatCurrency(item.qty * item.rate)}</td>
                                <td className="p-2 text-right">
                                    <button onClick={() => removeItem(item.id)} className="text-red-500 hover:text-red-700 disabled:opacity-50" disabled={items.length <= 1}>
                                        <X size={18} />
                                    </button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
            
            <div className="flex justify-between items-center">
                <button onClick={addItem} className="flex items-center space-x-1 text-sm text-white bg-[#83a282] px-3 py-1.5 rounded-full hover:bg-[#6b876a] transition">
                    <Plus size={16} /> <span>Add Item</span>
                </button>
                <div className="text-lg font-bold">Subtotal: {formatCurrency(subTotal)}</div>
            </div>

            {/* Summary & Issuer */}
            <h3 className="text-xl font-semibold text-[#83a282] pt-4 border-t">Summary & Issuer</h3>
            
            <div className="flex items-center space-x-2">
                <input type="checkbox" id="isTaxRequired" checked={isTaxRequired} onChange={(e) => setIsTaxRequired(e.target.checked)}
                    className="h-4 w-4 text-[#83a282] border-gray-300 rounded focus:ring-[#83a282]" />
                <label htmlFor="isTaxRequired" className="text-sm font-medium text-gray-700">Tax Invoice Required</label>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                
                {/* Notes and AI Generation Section */}
                <div className="col-span-1 md:col-span-2 space-y-3">
                    <label htmlFor="notes" className="block text-sm font-medium text-gray-700">Current Notes / Instructions</label>
                    <textarea id="notes" value={generalData.notes} onChange={handleGeneralChange} rows="3"
                        className="block w-full rounded-md border-gray-300 shadow-sm p-2 bg-gray-50 focus:ring-[#83a282] focus:border-[#83a282]" />
                    
                    <div className="border p-4 rounded-lg bg-indigo-50 border-indigo-200">
                        <label htmlFor="notesPrompt" className="block text-sm font-bold text-indigo-700 mb-2">Generate Notes with Gemini:</label>
                        <textarea id="notesPrompt" value={notesPrompt} onChange={(e) => setNotesPrompt(e.target.value)} rows="2"
                            placeholder="E.g., Write terms for 50% advance and 50% upon completion."
                            className="block w-full text-sm rounded-md border-indigo-300 shadow-sm p-2 focus:ring-indigo-500 focus:border-indigo-500" />
                        <button onClick={generateNotes} disabled={isGeneratingNotes}
                            className="mt-2 w-full flex items-center justify-center space-x-2 px-3 py-2 text-sm bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition disabled:opacity-50 disabled:bg-indigo-400">
                            {isGeneratingNotes ? 'Generating...' : 'Generate Notes'}
                        </button>
                    </div>
                </div>
                
                {isTaxRequired && (
                    <div>
                        <label htmlFor="salesTaxPercent" className="block text-sm font-medium text-gray-700">Sales Tax (%)</label>
                        <input type="number" id="salesTaxPercent" value={generalData.salesTaxPercent} onChange={handleGeneralChange}
                            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-gray-50" />
                    </div>
                )}
                
                <div>
                    <label htmlFor="receivedAmount" className="block text-sm font-medium text-gray-700">Received Amount</label>
                    <input type="number" id="receivedAmount" value={generalData.receivedAmount} onChange={handleGeneralChange}
                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-gray-50" />
                </div>
                
                <div>
                    <label htmlFor="issuerName" className="block text-sm font-medium text-gray-700">Issuer Name</label>
                    <input type="text" id="issuerName" value={generalData.issuerName} onChange={handleGeneralChange}
                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-gray-50" />
                </div>
                
                <div>
                    <label htmlFor="issuerRank" className="block text-sm font-medium text-gray-700">Issuer Rank</label>
                    <input type="text" id="issuerRank" value={generalData.issuerRank} onChange={handleGeneralChange}
                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-gray-50" />
                </div>
            </div>

            {/* Totals Preview */}
            <div className="flex justify-end pt-4 border-t mt-4">
                <div className="w-full sm:w-1/2">
                    <div className="flex justify-between font-semibold text-sm">
                        <span>Total ({isTaxRequired ? 'Excl. Tax' : 'Due'}):</span>
                        <span>{formatCurrency(isTaxRequired ? subTotal : grandTotal)}</span>
                    </div>
                    {isTaxRequired && (
                        <div className="flex justify-between font-semibold text-sm">
                            <span>Tax Amount:</span>
                            <span>{formatCurrency(salesTaxAmount)}</span>
                        </div>
                    )}
                    <div className="flex justify-between font-bold text-lg mt-2 text-green-700">
                        <span>Balance Due:</span>
                        <span>{formatCurrency(balance)}</span>
                    </div>
                </div>
            </div>
        </div>
    );


    return (
        <div className="min-h-screen bg-gray-100 p-4 sm:p-8 flex justify-center">
            
            {/* Message Box */}
            {message && (
                <div className={`fixed top-4 z-50 px-4 py-2 rounded-lg shadow-xl text-sm transition-all duration-300 ${message.includes('failed') || message.includes('Error') ? 'bg-red-100 text-red-700 border border-red-300' : 'bg-green-100 text-green-700 border border-green-300'}`}>
                    {message}
                </div>
            )}

            <div className="w-full max-w-4xl bg-white rounded-xl shadow-2xl">
                
                {/* Toggle and Download Controls */}
                <div id="pdf-controls" className="p-4 bg-gray-50 border-b flex justify-between items-center sticky top-0 z-10 rounded-t-xl">
                    <button onClick={() => setIsEditing(!isEditing)} 
                        className="flex items-center space-x-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition disabled:opacity-50"
                        disabled={isGenerating}>
                        <Edit3 size={18} />
                        <span>{isEditing ? 'Show Preview' : 'Back to Edit'}</span>
                    </button>
                    
                    <button onClick={downloadPdf} 
                        className="flex items-center space-x-2 px-4 py-2 bg-[#83a282] text-white rounded-lg hover:bg-[#6b876a] transition disabled:bg-gray-400"
                        disabled={isGenerating || !isPdfLibraryLoaded || isEditing}>
                        <Download size={18} />
                        <span>{isGenerating 
                            ? 'Generating PDF...' 
                            : (!isPdfLibraryLoaded 
                                ? 'Loading PDF Tools...' 
                                : (isEditing ? 'View Preview First' : 'Download PDF'))}</span>
                    </button>
                </div>

                {/* Main Content Area */}
                <div className="p-0">
                    {isEditing ? <InputForm /> : <InvoiceContent />}
                </div>

            </div>
        </div>
    );
};

export default App;