src/components/InvoiceGenerator.tsx

/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState, useMemo } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { 
  FileText, 
  User, 
  Phone, 
  Car, 
  Search, 
  Plus, 
  Trash2, 
  Check, 
  CreditCard, 
  Printer, 
  CheckCircle, 
  CloudLightning, 
  Smartphone, 
  TrendingDown, 
  Briefcase,
  Share2,
  Download,
  Receipt,
  FileDown,
  RefreshCw
} from 'lucide-react';
import { TireProduct, Invoice, StaffUser, SystemSettings, InvoiceLineItem } from '../types';

interface InvoiceGeneratorProps {
  products: TireProduct[];
  invoices: Invoice[];
  currentStaff: StaffUser;
  settings: SystemSettings;
  isOnline: boolean;
  onAddInvoice: (invoice: Invoice) => void;
  selectedInvoiceForView: Invoice | null;
  setSelectedInvoiceForView: (invoice: Invoice | null) => void;
}

export default function InvoiceGenerator({
  products,
  invoices,
  currentStaff,
  settings,
  isOnline,
  onAddInvoice,
  selectedInvoiceForView,
  setSelectedInvoiceForView
}: InvoiceGeneratorProps) {
  // Wizard steps: 'DRAFT' | 'GATEWAY' | 'COMPLETED'
  const [generationStep, setGenerationStep] = useState<'DRAFT' | 'GATEWAY' | 'COMPLETED'>('DRAFT');
  
  // Invoice Draft State
  const [customerName, setCustomerName] = useState('');
  const [customerPhone, setCustomerPhone] = useState('');
  const [customerVehicle, setCustomerVehicle] = useState('');
  const [notes, setNotes] = useState('');
  const [cart, setCart] = useState<Omit<InvoiceLineItem, 'totalPrice'>[]>([]);
  const [discount, setDiscount] = useState<number>(0);
  const [paymentMethod, setPaymentMethod] = useState<'CASH' | 'CARD' | 'BANK_TRANSFER' | 'MOBILE_WALLET'>('CASH');
  
  // Product search in generator
  const [prodSearch, setProdSearch] = useState('');
  const [selectedCategory, setSelectedCategory] = useState<string>('All');

  // Checkout gateway simulation state
  const [activeGateway, setActiveGateway] = useState<'Stripe' | 'PayPal' | 'EasyPaisa' | 'JazzCash' | 'Bank'>('Stripe');
  const [gatewayProcessing, setGatewayProcessing] = useState(false);
  const [gatewayAuthId, setGatewayAuthId] = useState('');
  const [gatewayCompleted, setGatewayCompleted] = useState(false);
  const [ccNumber, setCcNumber] = useState('4242 4242 4242 4242');
  const [ccExpiry, setCcExpiry] = useState('12/28');
  const [ccCvc, setCcCvc] = useState('321');

  // Invoice final outcome
  const [generatedInvoice, setGeneratedInvoice] = useState<Invoice | null>(null);

  // Filter products for invoice item selection
  const filteredProducts = useMemo(() => {
    return products.filter(p => {
      const matchSearch = 
        p.brand.toLowerCase().includes(prodSearch.toLowerCase()) ||
        p.model.toLowerCase().includes(prodSearch.toLowerCase()) ||
        p.size.toLowerCase().includes(prodSearch.toLowerCase()) ||
        p.sku.toLowerCase().includes(prodSearch.toLowerCase());
      const matchCategory = selectedCategory === 'All' || p.category === selectedCategory;
      return matchSearch && matchCategory;
    });
  }, [products, prodSearch, selectedCategory]);

  // Calculations
  const subtotal = useMemo(() => {
    return cart.reduce((sum, item) => sum + (item.quantity * item.unitPrice), 0);
  }, [cart]);

  const taxAmount = useMemo(() => {
    return Math.round((subtotal * settings.taxRate) / 100);
  }, [subtotal, settings.taxRate]);

  const total = useMemo(() => {
    const calculated = subtotal + taxAmount - discount;
    return calculated < 0 ? 0 : calculated;
  }, [subtotal, taxAmount, discount]);

  // Cart operations
  const addToCart = (product: TireProduct) => {
    if (product.stock <= 0) {
      alert(`Cannot add ${product.brand} ${product.model}. Insufficient stock in warehouse.`);
      return;
    }

    const existingItem = cart.find(item => item.productId === product.id);
    if (existingItem) {
      if (existingItem.quantity >= product.stock) {
        alert(`Stock limit reached! Only ${product.stock} tires are currently available.`);
        return;
      }
      setCart(cart.map(item => 
        item.productId === product.id 
          ? { ...item, quantity: item.quantity + 1 } 
          : item
      ));
    } else {
      setCart([...cart, {
        id: 'li_' + Math.random().toString(36).substr(2, 9),
        productId: product.id,
        brand: product.brand,
        model: product.model,
        size: product.size,
        quantity: 1,
        unitPrice: product.price
      }]);
    }
  };

  const updateCartQty = (productId: string, qty: number, stockLimit: number) => {
    if (qty <= 0) {
      setCart(cart.filter(item => item.productId !== productId));
      return;
    }
    if (qty > stockLimit) {
      alert(`Insufficient stock! Only ${stockLimit} items available in warehouse.`);
      return;
    }
    setCart(cart.map(item => 
      item.productId === productId ? { ...item, quantity: qty } : item
    ));
  };

  const removeFromCart = (productId: string) => {
    setCart(cart.filter(item => item.productId !== productId));
  };

  // Payment triggers
  const handlePaymentSubmit = () => {
    if (cart.length === 0) {
      alert("Cart empty! Build custom tire elements first.");
      return;
    }
    if (!customerName.trim()) {
      alert("Customer Name is required to bind transaction record.");
      return;
    }

    // Cash checkout needs no gateway simulation
    if (paymentMethod === 'CASH') {
      finalizeInvoice(null);
    } else {
      // Map gateway based on method
      if (paymentMethod === 'CARD') {
        setActiveGateway('Stripe');
      } else if (paymentMethod === 'MOBILE_WALLET') {
        setActiveGateway('EasyPaisa');
      } else {
        setActiveGateway('Bank');
      }
      setGenerationStep('GATEWAY');
      setGatewayCompleted(false);
      setGatewayAuthId('TXN-' + Math.floor(100000 + Math.random() * 900000));
    }
  };

  // Secure final commit
  const finalizeInvoice = (gatewayData: Invoice['gatewayInfo'] | null) => {
    const invNumber = `HBT-${new Date().getFullYear()}-${1000 + invoices.length + 1}`;
    
    // Convert cart to full InvoiceLineItems
    const finalItems: InvoiceLineItem[] = cart.map(item => ({
      ...item,
      totalPrice: item.quantity * item.unitPrice
    }));

    // Local Format custom display date
    const date = new Date();
    const formattedDate = `${String(date.getDate()).padStart(2, '0')}-${String(date.getMonth() + 1).padStart(2, '0')}-${date.getFullYear()} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;

    const newInvoice: Invoice = {
      id: 'inv_' + Math.random().toString(36).substr(2, 9),
      invoiceNumber: invNumber,
      dateTime: formattedDate,
      customerName,
      customerPhone,
      customerVehicle,
      items: finalItems,
      subtotal,
      taxRate: settings.taxRate,
      taxAmount,
      discount,
      total,
      currencySymbol: settings.currencySymbol,
      currencyCode: settings.currencyCode,
      paymentMethod,
      paymentStatus: 'PAID',
      amountPaid: total,
      cashierName: currentStaff.name,
      notes: notes.trim() ? notes : undefined,
      gatewayInfo: gatewayData || undefined,
      isOfflineCreated: !isOnline // Tracks offline generation tags
    };

    onAddInvoice(newInvoice);
    setGeneratedInvoice(newInvoice);
    setGenerationStep('COMPLETED');

    // Wipe drafts
    setCustomerName('');
    setCustomerPhone('');
    setCustomerVehicle('');
    setNotes('');
    setCart([]);
    setDiscount(0);
  };

  // Execute Gateway authorization animation
  const handleAuthorizeGateway = () => {
    setGatewayProcessing(true);
    setTimeout(() => {
      setGatewayProcessing(false);
      setGatewayCompleted(true);
      setTimeout(() => {
        // Complete checkout with authentic keys
        finalizeInvoice({
          gatewayName: activeGateway,
          transactionId: gatewayAuthId,
          authTime: new Date().toISOString()
        });
      }, 1000);
    }, 1800);
  };

  // Format HTML share links
  const copyShareText = (inv: Invoice) => {
    const textDetails = `⚡ *Invoice ${inv.invoiceNumber} — Haider Brother Traders* ⚡\nVehicle: ${inv.customerVehicle || 'N/A'}\nCustomer: ${inv.customerName}\nTotal amount settled: *${inv.currencySymbol} ${inv.total.toLocaleString()}*\nPayment: ${inv.paymentMethod} (PAID)\n💼 Shop Phone: ${settings.shopPhone}\nThank you for choosing Haider Brother Traders!`;
    navigator.clipboard.writeText(textDetails);
    alert("Invoice share prompt successfully copied to clipboard (optimized for WhatsApp/Social)!");
  };

  // Export invoice structure to readable offline-friendly raw layout HTML file
  const exportOfflineHTMLReceipt = (inv: Invoice) => {
    const htmlSnippet = `
      <!DOCTYPE html>
      <html>
      <head>
        <title>Invoice ${inv.invoiceNumber}</title>
        <style>
          body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333; padding: 40px; line-height: 1.6; }
          .header { border-bottom: 2px solid #0f172a; padding-bottom: 20px; margin-bottom: 30px; display: flex; justify-content: space-between; }
          .brand { font-size: 24px; font-weight: bold; text-transform: uppercase; }
          .meta { text-align: right; font-size: 14px; }
          .customer { background: #f8fafc; padding: 15px; border-radius: 8px; margin-bottom: 30px; }
          table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
          th { background: #0f172a; color: #fff; text-align: left; padding: 12px; font-size: 14px; }
          td { border-bottom: 1px solid #e2e8f0; padding: 12px; font-size: 14px; }
          .summary { text-align: right; width: 40%; margin-left: auto; font-size: 14px; }
          .summary-row { display: flex; justify-content: space-between; padding: 8px 0; }
          .bold { font-weight: bold; font-size: 16px; border-top: 1px solid #333; padding-top: 10px; }
          .center { text-align: center; margin-top: 50px; font-size: 12px; color: #777; }
        </style>
      </head>
      <body>
        <div class="header">
          <div>
            <div class="brand">${settings.shopName}</div>
            <div style="font-size: 13px; color: #555;">${settings.shopAddress}</div>
            <div style="font-size: 13px; color: #555;">Phone: ${settings.shopPhone}</div>
          </div>
          <div class="meta">
            <h2>INVOICE</h2>
            <div><strong>Inv No:</strong> ${inv.invoiceNumber}</div>
            <div><strong>Date:</strong> ${inv.dateTime}</div>
            <div><strong>Cashier:</strong> ${inv.cashierName}</div>
          </div>
        </div>
        <div class="customer">
          <strong>Customer Information:</strong>
          <div>Name: ${inv.customerName}</div>
          <div>Phone: ${inv.customerPhone || 'N/A'}</div>
          <div>Vehicle: ${inv.customerVehicle || 'N/A'}</div>
        </div>
        <table>
          <thead>
            <tr>
              <th>Item / Size</th>
              <th>Qty</th>
              <th>Unit Price</th>
              <th>Total</th>
            </tr>
          </thead>
          <tbody>
            ${inv.items.map(item => `
              <tr>
                <td>${item.brand} ${item.model} (${item.size})</td>
                <td>${item.quantity}</td>
                <td>${inv.currencySymbol}${item.unitPrice.toLocaleString()}</td>
                <td>${inv.currencySymbol}${item.totalPrice.toLocaleString()}</td>
              </tr>
            `).join('')}
          </tbody>
        </table>
        <div class="summary">
          <div class="summary-row"><span>Subtotal:</span> <span>${inv.currencySymbol}${inv.subtotal.toLocaleString()}</span></div>
          <div class="summary-row"><span>${settings.taxName} (${inv.taxRate}%):</span> <span>${inv.currencySymbol}${inv.taxAmount.toLocaleString()}</span></div>
          <div class="summary-row"><span>Discounts:</span> <span>-${inv.currencySymbol}${inv.discount.toLocaleString()}</span></div>
          <div class="summary-row class="bold" style="font-weight: bold; border-top: 2px solid #000; padding:10px 0;">
            <span>Total Settled:</span> <span>${inv.currencySymbol}${inv.total.toLocaleString()}</span>
          </div>
        </div>
        <p style="font-size: 12px; font-style: italic; margin-top: 40px;">* Invoice generated under security ledger vault. Offline tag: ${inv.isOfflineCreated ? 'True' : 'False'}</p>
        <div class="center">
          Thank you for choosing Haider Brother Traders!
        </div>
      </body>
      </html>
    `;

    const blob = new Blob([htmlSnippet], { type: 'text/html' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = `Invoice_${inv.invoiceNumber}.html`;
    link.click();
  };

  const handleManualPrint = () => {
    window.print();
  };

  return (
    <div className="space-y-8" id="invoice-builder-panel">
      {/* Offline Status Warning Indicator */}
      {!isOnline && (
        <div className="bg-orange-50 border border-orange-200 text-orange-850 px-4 py-3 rounded-xl flex items-center justify-between gap-3 text-xs md:text-sm">
          <div className="flex items-center gap-2">
            <CloudLightning className="w-5 h-5 col-span-1 text-orange-600 animate-pulse" />
            <span>
              <strong>Offline Mode Activated</strong> — Internet connection offline. Drafted invoices are instantly committed and backed up locally to cache memory and will sync when system restarts or connects.
            </span>
          </div>
          <span className="font-bold text-orange-900 border border-orange-300 rounded px-2 py-0.5 text-[10px] uppercase font-mono">
            AIR-GAPPED COCKPIT
          </span>
        </div>
      )}

      {/* Main split wizard screen */}
      {generationStep === 'DRAFT' && (
        <div className="grid grid-cols-1 xl:grid-cols-12 gap-8">
          {/* LEFT PANEL: Bill drafting & Customer Onboarding */}
          <div className="xl:col-span-8 space-y-6">
            <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm space-y-6">
              <div className="flex items-center gap-3 pb-4 border-b border-slate-100">
                <div className="bg-slate-100 text-slate-800 p-2.5 rounded-lg">
                  <User className="w-5 h-5" />
                </div>
                <div>
                  <h3 className="text-base font-bold text-slate-900 uppercase tracking-wide">Customer & Vehicle Details</h3>
                  <p className="text-xs text-slate-400">Provide client and vehicle details for invoice audit accuracy</p>
                </div>
              </div>

              {/* Patient Fields */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="space-y-1">
                  <label className="text-xs font-semibold text-slate-600 flex items-center gap-1.5">
                    Customer Name <span className="text-red-500">*</span>
                  </label>
                  <div className="relative">
                    <span className="absolute left-3.5 top-3 text-slate-400">
                      <User className="w-3.5 h-3.5" />
                    </span>
                    <input 
                      type="text" 
                      placeholder="e.g. Mehmood Khan"
                      value={customerName}
                      onChange={(e) => setCustomerName(e.target.value)}
                      className="w-full text-xs border border-slate-200 outline-none focus:border-slate-800 bg-white rounded-lg pl-9 pr-4 py-2 font-medium transition duration-150"
                    />
                  </div>
                </div>

                <div className="space-y-1">
                  <label className="text-xs font-semibold text-slate-600">Client Phone Number</label>
                  <div className="relative">
                    <span className="absolute left-3.5 top-3 text-slate-400">
                      <Phone className="w-3.5 h-3.5" />
                    </span>
                    <input 
                      type="text" 
                      placeholder="e.g. 0333-1234567"
                      value={customerPhone}
                      onChange={(e) => setCustomerPhone(e.target.value)}
                      className="w-full text-xs border border-slate-200 outline-none focus:border-slate-800 bg-white rounded-lg pl-9 pr-4 py-2 font-medium transition duration-150"
                    />
                  </div>
                </div>

                <div className="space-y-1">
                  <label className="text-xs font-semibold text-slate-600">Vehicle / Reg Mark</label>
                  <div className="relative">
                    <span className="absolute left-3.5 top-3 text-slate-400">
                      <Car className="w-3.5 h-3.5" />
                    </span>
                    <input 
                      type="text" 
                      placeholder="e.g. Toyota Prado (BE-777)"
                      value={customerVehicle}
                      onChange={(e) => setCustomerVehicle(e.target.value)}
                      className="w-full text-xs border border-slate-200 outline-none focus:border-slate-800 bg-white rounded-lg pl-9 pr-4 py-2 font-medium transition duration-150"
                    />
                  </div>
                </div>
              </div>
            </div>

            {/* PRODUCT SEARCH AND SELECTION PANEL */}
            <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm space-y-5">
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-4 border-b border-slate-100">
                <div className="flex items-center gap-3">
                  <div className="bg-slate-100 text-slate-800 p-2.5 rounded-lg">
                    <Search className="w-5 h-5" />
                  </div>
                  <div>
                    <h3 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Tire Stock Matcher</h3>
                    <p className="text-xs text-slate-400">Search and map tires directly onto live checkout ledger</p>
                  </div>
                </div>

                {/* Categories */}
                <div className="flex gap-1.5 overflow-x-auto pb-1 sm:pb-0 font-sans">
                  {['All', 'Passenger', 'SUV', 'Commercial', 'Light Truck', 'Truck/Bus'].map(cat => (
                    <button
                      key={cat}
                      type="button"
                      onClick={() => setSelectedCategory(cat)}
                      className={`text-xs px-2.5 py-1.5 font-semibold rounded-md shrink-0 transition cursor-pointer ${
                        selectedCategory === cat 
                          ? 'bg-slate-900 text-white shadow-sm' 
                          : 'bg-slate-50 text-slate-600 hover:bg-slate-100 border border-slate-200'
                      }`}
                    >
                      {cat}
                    </button>
                  ))}
                </div>
              </div>

              {/* Fast Search input */}
              <div className="relative">
                <span className="absolute left-3.5 top-3 text-slate-400">
                  <Search className="w-4 h-4" />
                </span>
                <input 
                  type="text" 
                  placeholder="Search by tire brand, profile size (e.g. 195/65), or model/SKU SKU..."
                  value={prodSearch}
                  onChange={(e) => setProdSearch(e.target.value)}
                  className="w-full text-xs border border-slate-200 outline-none focus:border-slate-800 bg-white rounded-lg pl-10 pr-4 py-2 font-sans transition duration-150"
                />
              </div>

              {/* Searched Items Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-96 overflow-y-auto pr-1">
                {filteredProducts.length === 0 ? (
                  <div className="col-span-2 text-center py-12 border border-dashed border-slate-200 rounded-lg bg-slate-50">
                    <p className="text-sm text-slate-400">No tires matching database entries.</p>
                  </div>
                ) : (
                  filteredProducts.map(p => {
                    const isLowStock = p.stock <= p.minStock;
                    const isOutOfStock = p.stock === 0;
                    
                    return (
                      <div 
                        key={p.id} 
                        className={`border rounded-lg p-4 flex flex-col justify-between gap-4 transition duration-150 relative overflow-hidden ${
                          isOutOfStock ? 'bg-slate-50 border-slate-200 opacity-60' :
                          isLowStock ? 'bg-red-50/20 border-red-200 hover:border-red-300' :
                          'bg-white hover:border-slate-400 border-slate-200'
                        }`}
                      >
                        {isLowStock && (
                          <div className={`absolute top-0 right-0 px-2 py-0.5 text-[9px] font-bold uppercase rounded-bl-md ${isOutOfStock ? 'bg-slate-400 text-white' : 'bg-red-600 text-white shadow-sm'}`}>
                            {isOutOfStock ? 'OUT OF STOCK' : 'LOW STOCK'}
                          </div>
                        )}
                        <div className="space-y-2">
                          <div className="space-y-0.5">
                            <span className="text-[9px] text-slate-400 uppercase tracking-wider font-extrabold">{p.category}</span>
                            <h4 className="font-bold text-slate-900 text-sm">{p.brand} {p.model}</h4>
                            <p className="font-mono text-xs text-slate-800 font-semibold bg-slate-100 inline-block px-1.5 py-0.5 rounded-sm">
                              {p.size}
                            </p>
                          </div>
                          <p className="text-xs text-slate-500 line-clamp-2 leading-relaxed">
                            {p.description || "High structural performance tire."}
                          </p>
                        </div>

                        <div className="flex items-center justify-between border-t border-slate-100 pt-3">
                          <div className="space-y-0.5">
                            <span className="text-[10px] text-slate-400 font-semibold font-sans">MSRP Retail Price</span>
                            <p className="text-sm font-extrabold text-slate-950">
                              {settings.currencySymbol} {p.price.toLocaleString()}
                            </p>
                            <span className="text-[10px] text-slate-400">Qty in stock: <span className="font-bold text-slate-700">{p.stock}</span></span>
                          </div>

                          <button
                            type="button"
                            disabled={isOutOfStock}
                            onClick={() => addToCart(p)}
                            className={`p-2 rounded-md cursor-pointer transition flex items-center justify-center ${
                              isOutOfStock ? 'bg-slate-200 text-slate-400 cursor-not-allowed' :
                              'bg-slate-900 hover:bg-slate-800 text-white shadow-sm'
                            }`}
                          >
                            <Plus className="w-4 h-4" />
                          </button>
                        </div>
                      </div>
                    );
                  })
                )}
              </div>
            </div>
          </div>

          {/* RIGHT PANEL: Live Cart Summary & Checkout triggers */}
          <div className="xl:col-span-4 space-y-6">
            <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex flex-col justify-between min-h-[500px]">
              <div className="space-y-4">
                <div className="flex items-center justify-between pb-3 border-b border-slate-200">
                  <h3 className="font-bold text-slate-900 uppercase tracking-wide text-xs flex items-center gap-2">
                    <Receipt className="w-4 h-4 text-slate-705" />
                    Ledger Checkout Cart
                  </h3>
                  <span className="bg-slate-950 text-white text-[10px] font-bold px-2 py-0.5 rounded-md font-mono">
                    {cart.reduce((sum, item) => sum + item.quantity, 0)} Pcs
                  </span>
                </div>

                {/* Items layout */}
                <div className="space-y-3 overflow-y-auto max-h-[300px] pr-1">
                  {cart.length === 0 ? (
                    <div className="text-center py-16 text-slate-400 space-y-2">
                      <Printer className="w-10 h-10 mx-auto text-slate-300" />
                      <p className="text-[11px] leading-normal">Ledger is empty. Select products from matching list to queue invoice items.</p>
                    </div>
                  ) : (
                    cart.map((item) => {
                      const matchedProd = products.find(p => p.id === item.productId);
                      const maxStock = matchedProd ? matchedProd.stock : 100;
                      
                      return (
                        <div key={item.id} className="border border-slate-100 bg-slate-50 p-2.5 rounded-lg space-y-2">
                          <div className="flex justify-between items-start">
                            <div className="space-y-0.5">
                              <h5 className="text-xs font-bold text-slate-900 leading-tight">{item.brand} {item.model}</h5>
                              <p className="text-[9px] font-mono font-medium text-slate-500 bg-slate-200/50 inline-block px-1 rounded-sm">{item.size}</p>
                            </div>
                            <button
                              type="button"
                              onClick={() => removeFromCart(item.productId)}
                              className="text-slate-450 hover:text-red-600 p-1 rounded transition cursor-pointer"
                            >
                              <Trash2 className="w-3.5 h-3.5" />
                            </button>
                          </div>

                          <div className="flex items-center justify-between border-t border-slate-100 pt-2">
                            {/* Quantity buttons */}
                            <div className="flex items-center border border-slate-200 bg-white rounded-md">
                              <button
                                type="button"
                                onClick={() => updateCartQty(item.productId, item.quantity - 1, maxStock)}
                                className="px-2 py-0.5 text-xs text-slate-500 hover:bg-slate-100 rounded-l-md transition"
                              >
                                -
                              </button>
                              <span className="px-2 text-xs font-bold font-mono text-slate-800">{item.quantity}</span>
                              <button
                                type="button"
                                onClick={() => updateCartQty(item.productId, item.quantity + 1, maxStock)}
                                className="px-2 py-0.5 text-xs text-slate-500 hover:bg-slate-100 rounded-r-md transition"
                              >
                                +
                              </button>
                            </div>

                            <span className="text-xs font-bold text-slate-900 font-mono">
                              {settings.currencySymbol} {(item.quantity * item.unitPrice).toLocaleString()}
                            </span>
                          </div>
                        </div>
                      );
                    })
                  )}
                </div>
              </div>

              {/* Totals Section */}
              <div className="border-t border-slate-200 pt-4 space-y-3 mt-6">
                <div className="flex justify-between text-xs">
                  <span className="text-slate-500 font-semibold">Subtotal</span>
                  <span className="font-semibold text-slate-800 font-mono">{settings.currencySymbol} {subtotal.toLocaleString()}</span>
                </div>

                <div className="flex justify-between text-xs">
                  <span className="text-slate-500 font-semibold">{settings.taxName} ({settings.taxRate}%)</span>
                  <span className="font-semibold text-slate-800 font-mono">{settings.currencySymbol} {taxAmount.toLocaleString()}</span>
                </div>

                {/* Discount field */}
                <div className="flex justify-between items-center text-xs">
                  <span className="text-slate-500 font-semibold flex items-center gap-1">
                    <TrendingDown className="w-3.5 h-3.5 text-slate-500" />
                    Special Discount ({settings.currencySymbol})
                  </span>
                  <input 
                    type="number"
                    min="0"
                    placeholder="0"
                    value={discount || ''}
                    onChange={(e) => setDiscount(Math.max(0, parseInt(e.target.value) || 0))}
                    className="w-20 border border-slate-200 focus:border-slate-800 text-right text-xs outline-none bg-white hover:bg-slate-50 focus:bg-white rounded-md p-1 font-mono font-bold"
                  />
                </div>

                {/* Final calculated total size */}
                <div className="border-t border-dashed border-slate-200 pt-3 flex justify-between items-center">
                  <span className="text-xs font-bold text-slate-900 uppercase">Total Settled Amount</span>
                  <span className="text-base font-black text-slate-950 font-mono">
                    {settings.currencySymbol} {total.toLocaleString()}
                  </span>
                </div>

                {/* Payment strategy */}
                <div className="space-y-1.5 pt-2">
                  <label className="text-[10px] text-slate-500 font-bold uppercase">Select Settlement Method</label>
                  <div className="grid grid-cols-2 gap-2 text-[10px] font-sans">
                    <button
                      type="button"
                      onClick={() => setPaymentMethod('CASH')}
                      className={`py-1.5 px-2 border rounded-lg flex flex-col items-center gap-1 cursor-pointer font-bold ${
                        paymentMethod === 'CASH' ? 'bg-slate-900 text-white border-transparent shadow-sm' : 'bg-slate-50 text-slate-700 hover:bg-slate-100 border-slate-200'
                      }`}
                    >
                      <Briefcase className="w-3.5 h-3.5" />
                      Cash
                    </button>
                    <button
                      type="button"
                      onClick={() => setPaymentMethod('CARD')}
                      className={`py-1.5 px-2 border rounded-lg flex flex-col items-center gap-1 cursor-pointer font-bold ${
                        paymentMethod === 'CARD' ? 'bg-slate-900 text-white border-transparent shadow-sm' : 'bg-slate-50 text-slate-700 hover:bg-slate-100 border-slate-200'
                      }`}
                    >
                      <CreditCard className="w-3.5 h-3.5" />
                      Card Swipe
                    </button>
                    <button
                      type="button"
                      onClick={() => setPaymentMethod('BANK_TRANSFER')}
                      className={`py-1.5 px-2 border rounded-lg flex flex-col items-center gap-1 cursor-pointer font-bold ${
                        paymentMethod === 'BANK_TRANSFER' ? 'bg-slate-900 text-white border-transparent shadow-sm' : 'bg-slate-50 text-slate-700 hover:bg-slate-100 border-slate-200'
                      }`}
                    >
                      <Printer className="w-3.5 h-3.5" />
                      Bank Wire
                    </button>
                    <button
                      type="button"
                      onClick={() => setPaymentMethod('MOBILE_WALLET')}
                      className={`py-1.5 px-2 border rounded-lg flex flex-col items-center gap-1 cursor-pointer font-bold ${
                        paymentMethod === 'MOBILE_WALLET' ? 'bg-slate-900 text-white border-transparent shadow-sm' : 'bg-slate-50 text-slate-700 hover:bg-slate-100 border-slate-200'
                      }`}
                    >
                      <Smartphone className="w-3.5 h-3.5" />
                      M-Wallet
                    </button>
                  </div>
                </div>

                {/* Comments block */}
                <div className="space-y-1">
                  <label className="text-[10px] text-slate-500 font-bold uppercase">Client / Warranty Notes</label>
                  <textarea 
                    rows={2}
                    placeholder="e.g. 1 year structural carcass warranty, free alignment included..."
                    value={notes}
                    onChange={(e) => setNotes(e.target.value)}
                    className="w-full text-xs border border-slate-200 outline-none focus:border-slate-800 bg-white rounded-lg p-2 transition resize-none font-sans"
                  />
                </div>

                <button
                  type="button"
                  onClick={handlePaymentSubmit}
                  disabled={cart.length === 0}
                  className={`w-full py-2.5 text-xs font-semibold rounded-lg flex items-center justify-center gap-2 cursor-pointer transition shadow-sm border ${
                    cart.length === 0 
                      ? 'bg-slate-100 text-slate-400 border-slate-200 cursor-not-allowed shadow-none' 
                      : 'bg-slate-900 hover:bg-slate-800 border-transparent text-white'
                  }`}
                >
                  <CheckCircle className="w-4 h-4" />
                  {paymentMethod === 'CASH' ? 'Commit & Cash Invoice' : 'Proceed to Checkout Gate'}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* MID-GATEWAY SETTLEMENT MODAL */}
      {generationStep === 'GATEWAY' && (
        <div className="max-w-2xl mx-auto bg-white border border-slate-200 rounded-xl shadow-sm p-6 md:p-8 space-y-6">
          <div className="text-center space-y-2 pb-4 border-b border-slate-100">
            <h3 className="text-base font-bold text-slate-900 uppercase tracking-wider">Haider Brother Gateway Portal</h3>
            <p className="text-xs text-slate-400">Securing payment gateway transaction pipeline for tire invoice processing</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-12 gap-6 bg-slate-50 p-4 rounded-lg border border-slate-200">
            <div className="md:col-span-8 space-y-3">
              <span className="bg-slate-200 text-slate-800 text-[9px] font-bold px-2 py-0.5 rounded font-mono uppercase">
                Active Client Invoice Profile
              </span>
              <p className="text-xs font-bold text-slate-705">Client Account: <span className="text-slate-900 font-medium">{customerName}</span></p>
              <p className="text-xs font-bold text-slate-705">Vehicle Mark: <span className="text-slate-900 font-medium">{customerVehicle || 'N/A'}</span></p>
              <p className="text-base font-black text-slate-950 font-mono">
                Amount Due: {settings.currencySymbol} {total.toLocaleString()}
              </p>
            </div>
            
            <div className="md:col-span-4 flex flex-col justify-center items-center bg-white border border-slate-200 rounded-lg p-3 text-center space-y-1">
              <span className="text-[9px] text-slate-400 uppercase tracking-widest font-black">Checkout Symbol</span>
              <span className="text-xl font-bold font-mono text-slate-900">{paymentMethod}</span>
              <span className="text-[9px] text-slate-500 font-semibold uppercase">Ledger Secured</span>
            </div>
          </div>

          {/* Integration Gateway tabs based on payment method */}
          <div className="space-y-4">
            <div className="flex justify-center border-b border-slate-100 pb-2 gap-2 text-xs font-sans">
              {paymentMethod === 'CARD' && (
                <button
                  type="button"
                  onClick={() => setActiveGateway('Stripe')}
                  className={`px-3 py-1.5 text-xs font-semibold rounded-md ${activeGateway === 'Stripe' ? 'bg-slate-900 text-white' : 'bg-slate-50 text-slate-600 border border-slate-200'}`}
                >
                  Stripe Terminal
                </button>
              )}
              {paymentMethod === 'BANK_TRANSFER' && (
                <button
                  type="button"
                  onClick={() => setActiveGateway('Bank')}
                  className="px-3 py-1.5 text-xs font-semibold rounded-md bg-slate-900 text-white"
                >
                  Bank Direct Wire IBFT
                </button>
              )}
              {paymentMethod === 'MOBILE_WALLET' && (
                <div className="flex gap-2">
                  <button
                    type="button"
                    onClick={() => setActiveGateway('EasyPaisa')}
                    className={`px-3 py-1.5 text-xs font-semibold rounded-md ${activeGateway === 'EasyPaisa' ? 'bg-slate-900 text-white' : 'bg-slate-50 text-slate-600 border border-slate-200'}`}
                  >
                    EasyPaisa Mini QR
                  </button>
                  <button
                    type="button"
                    onClick={() => setActiveGateway('JazzCash')}
                    className={`px-3 py-1.5 text-xs font-semibold rounded-md ${activeGateway === 'JazzCash' ? 'bg-slate-900 text-white' : 'bg-slate-50 text-slate-600 border border-slate-200'}`}
                  >
                    JazzCash Wallet
                  </button>
                </div>
              )}
            </div>

            {/* Simulated interactive inputs */}
            <div className="border border-slate-200 rounded-lg p-5 bg-slate-50 space-y-4 font-sans">
              {activeGateway === 'Stripe' && (
                <div className="space-y-3">
                  <div className="flex items-center gap-1">
                    <CreditCard className="w-4 h-4 text-slate-800" />
                    <span className="text-xs font-bold text-slate-700">Stripe Live Credit Card Fields</span>
                  </div>
                  
                  <div className="space-y-2">
                    <div className="space-y-1">
                      <label className="text-[9px] text-slate-500 font-bold uppercase">Card Number</label>
                      <input 
                        type="text" 
                        value={ccNumber} 
                        onChange={(e)=>setCcNumber(e.target.value)}
                        className="w-full text-xs font-mono border border-slate-200 bg-white p-2.5 rounded-md outline-none focus:border-slate-800" 
                      />
                    </div>
                    <div className="grid grid-cols-2 gap-3">
                      <div className="space-y-1">
                        <label className="text-[9px] text-slate-500 font-bold uppercase">Expiry (MM/YY)</label>
                        <input 
                          type="text" 
                          value={ccExpiry} 
                          onChange={(e)=>setCcExpiry(e.target.value)}
                          className="w-full text-xs font-mono border border-slate-200 bg-white p-2.5 rounded-md outline-none focus:border-slate-800" 
                        />
                      </div>
                      <div className="space-y-1">
                        <label className="text-[9px] text-slate-500 font-bold uppercase">Security Code (CVC)</label>
                        <input 
                          type="text" 
                          value={ccCvc} 
                          onChange={(e)=>setCcCvc(e.target.value)}
                          className="w-full text-xs font-mono border border-slate-200 bg-white p-2.5 rounded-md outline-none focus:border-slate-800" 
                        />
                      </div>
                    </div>
                  </div>
                </div>
              )}

              {activeGateway === 'Bank' && (
                <div className="space-y-3">
                  <div className="flex items-center gap-1.5">
                    <Printer className="w-4 h-4 text-slate-800" />
                    <span className="text-xs font-bold text-slate-700">Direct IBFT Clearing Account info</span>
                  </div>
                  <div className="p-3 bg-white border border-slate-200 rounded-md space-y-1.5 text-xs text-slate-600">
                    <div>Bank Name: <strong className="text-slate-800">Meezan Bank Limited</strong></div>
                    <div>Account Number: <strong className="text-slate-800">0123-0104882103</strong></div>
                    <div>Title of Account: <strong className="text-slate-800">Haider Brother Traders</strong></div>
                    <div>Branch Code: <strong className="text-slate-800">0210 Quetta Road</strong></div>
                  </div>
                  <p className="text-[9px] text-slate-400 leading-relaxed">
                    Verify physical receipt of funds within the Meezan bank app. Once cleared, cashier clicks authorize below to log the trace code.
                  </p>
                </div>
              )}

              {(activeGateway === 'EasyPaisa' || activeGateway === 'JazzCash') && (
                <div className="space-y-4 flex flex-col md:flex-row items-center gap-6">
                  {/* Digital QR generation element */}
                  <div className="w-28 h-28 bg-slate-900 border border-slate-800 rounded-lg flex flex-col items-center justify-center text-white p-2 shrink-0">
                    <div className="w-20 h-20 bg-white p-1 rounded-sm flex items-center justify-center">
                      {/* Interactive block representing mobile QR code */}
                      <div className="w-full h-full bg-slate-900 flex flex-wrap gap-0.5 p-0.5">
                        {Array.from({ length: 64 }).map((_, idx) => (
                          <div 
                            key={idx} 
                            className={`w-1.5 h-1.5 ${
                              (idx + 13) % 3 === 0 || (idx * 7) % 5 === 0 ? 'bg-white' : 'bg-slate-900'
                            }`} 
                          />
                        ))}
                      </div>
                    </div>
                    <span className="text-[8px] font-bold tracking-wider mt-1.5 text-slate-450">SCAN MERCHANT QR</span>
                  </div>

                  <div className="space-y-2 text-xs flex-1">
                    <h5 className="font-bold text-slate-800">{activeGateway} Merchant Payment Node</h5>
                    <p className="text-slate-500 leading-relaxed text-[11px]">
                      QR code is synchronized with merchant checkout account details. User may scan with EasyPaisa/JazzCash app directly. Alternatively, complete instant prompt authentication.
                    </p>
                    <div className="space-y-1">
                      <label className="text-[9px] text-slate-500 font-bold uppercase">Customer Mobile Wallet Phone</label>
                      <input 
                        type="text" 
                        placeholder="e.g. 0345-1234567"
                        defaultValue={customerPhone || "0300-1122334"}
                        className="w-full text-xs font-mono border border-slate-200 bg-white p-2 rounded-md outline-none focus:border-slate-800" 
                      />
                    </div>
                  </div>
                </div>
              )}

              {/* Security parameters */}
              <div className="grid grid-cols-2 gap-3 border-t border-slate-200 pt-3">
                <div className="space-y-1">
                  <label className="text-[9px] text-slate-500 font-bold uppercase">Assigned Transaction Ref Code</label>
                  <input 
                    type="text" 
                    value={gatewayAuthId}
                    onChange={(e)=>setGatewayAuthId(e.target.value)}
                    className="w-full text-xs font-mono border border-slate-200 bg-white p-1.5 rounded-md outline-none focus:border-slate-800" 
                  />
                </div>
                <div className="space-y-1">
                  <label className="text-[9px] text-slate-500 font-bold uppercase">Enforced Security Layer</label>
                  <div className="bg-slate-200 text-slate-700 p-2 rounded-lg font-mono text-[10px] font-bold text-center">
                    AES-SHA256 SECURED
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Checkout controls */}
          <div className="flex gap-4">
            <button
              type="button"
              disabled={gatewayProcessing}
              onClick={() => setGenerationStep('DRAFT')}
              className="flex-1 py-2 px-4 text-xs font-semibold bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg transition cursor-pointer"
            >
              Cancel Bill Draft
            </button>
            <button
              type="button"
              disabled={gatewayProcessing || gatewayCompleted}
              onClick={handleAuthorizeGateway}
              className={`flex-1 py-2 px-4 text-xs font-bold text-white rounded-lg col-span-2 transition cursor-pointer flex items-center justify-center gap-2 shadow-sm ${
                gatewayCompleted ? 'bg-emerald-600' :
                gatewayProcessing ? 'bg-slate-700 cursor-wait' : 'bg-slate-900 hover:bg-slate-850'
              }`}
            >
              {gatewayProcessing ? (
                <>
                  <RefreshCw className="w-3.5 h-3.5 animate-spin" />
                  Authorizing Connection...
                </>
              ) : gatewayCompleted ? (
                <>
                  <Check className="w-3.5 h-3.5" />
                  Direct Clearance Secured!
                </>
              ) : (
                'Secure Gateway Clearance'
              )}
            </button>
          </div>
        </div>
      )}

      {/* FINAL STEP: COMPLETED INVOICE PRINTOUT CLIENT VIEW */}
      {generationStep === 'COMPLETED' && generatedInvoice && (
        <div className="max-w-4xl mx-auto space-y-6 animate-fade-in" id="printable-receipt-card">
          <div className="bg-emerald-50 border border-emerald-200 text-emerald-800 p-4 rounded-xl flex items-center justify-between gap-3 text-xs font-sans">
            <div className="flex items-center gap-2">
              <CheckCircle className="w-5 h-5 text-emerald-600" />
              <span>
                <strong>Invoice generated successfully!</strong> Tire stock levels have been updated in the warehouse. Transaction logs saved in local secure buffer.
              </span>
            </div>
            
            <button
              type="button"
              onClick={() => setGenerationStep('DRAFT')}
              className="bg-emerald-600 hover:bg-emerald-500 text-white font-bold px-3 py-1 rounded-lg text-xs cursor-pointer transition shadow"
            >
              Start New Invoice
            </button>
          </div>

          {/* Deep interactive A4 Printable receipt container */}
          <div className="bg-white border border-slate-200 rounded-2xl shadow-lg p-6 md:p-10 text-slate-800" id="receipt-print-area">
            {/* Header info */}
            <div className="flex flex-col md:flex-row justify-between items-start border-b-2 border-slate-900 pb-6 gap-6">
              <div className="space-y-1">
                <span className="text-xs font-black bg-slate-900 text-white px-2.5 py-1 rounded font-sans leading-none uppercase">
                  Haider Brother Traders
                </span>
                <h2 className="text-2xl font-black text-slate-950 uppercase mt-2 tracking-tight">Tire Shop & Auto Vault</h2>
                <div className="text-xs text-slate-500 max-w-sm space-y-0.5 font-sans">
                  <p>{settings.shopAddress}</p>
                  <p>Support phone: {settings.shopPhone}</p>
                  <p className="italic text-[10px] text-slate-400">Security registration code: NBT-VAT-99201</p>
                </div>
              </div>

              <div className="text-start md:text-right space-y-1 font-mono text-xs text-slate-700">
                <h4 className="text-lg font-black text-slate-900 font-sans tracking-tight">CLIENT INVOICE RECEIPT</h4>
                <div><strong>Receipt No:</strong> {generatedInvoice.invoiceNumber}</div>
                <div><strong>Draft Date:</strong> {generatedInvoice.dateTime}</div>
                <div><strong>Cashier:</strong> {generatedInvoice.cashierName}</div>
                <div><strong>Secure Back-Up:</strong> Enforced</div>
              </div>
            </div>

            {/* Customer specs */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 py-6 border-b border-slate-150 text-xs">
              <div className="space-y-1 font-sans">
                <span className="text-[10px] text-slate-400 uppercase tracking-wider font-extrabold block">Billed To Client</span>
                <p className="text-sm font-bold text-slate-900">{generatedInvoice.customerName}</p>
                <p className="text-slate-500">Phone: {generatedInvoice.customerPhone || 'N/A'}</p>
              </div>

              <div className="space-y-1 font-sans">
                <span className="text-[10px] text-slate-400 uppercase tracking-wider font-extrabold block">Vehicle Registered Profile</span>
                <p className="text-sm font-bold text-slate-900">{generatedInvoice.customerVehicle || 'N/A'}</p>
                <p className="text-slate-500">Service: Alignment check-in done</p>
              </div>

              <div className="space-y-1 font-sans">
                <span className="text-[10px] text-slate-400 uppercase tracking-wider font-extrabold block">Payment Authentication</span>
                <p className="text-sm font-bold text-slate-900 flex items-center gap-1">
                  <span className="bg-emerald-100 text-emerald-800 text-[10px] px-2 py-0.5 rounded uppercase">PAID</span>
                  <span className="font-mono text-xs">{generatedInvoice.paymentMethod}</span>
                </p>
                {generatedInvoice.gatewayInfo && (
                  <p className="text-[10px] text-slate-500 font-mono">
                    ID: {generatedInvoice.gatewayInfo.transactionId} ({generatedInvoice.gatewayInfo.gatewayName})
                  </p>
                )}
              </div>
            </div>

            {/* Line items table */}
            <div className="py-6 overflow-x-auto">
              <table className="w-full text-left border-collapse font-sans text-xs">
                <thead>
                  <tr className="border-b border-slate-300">
                    <th className="py-3 font-semibold text-slate-600 block">Tire Specifications & Profile Model</th>
                    <th className="py-3 font-semibold text-slate-600 text-center">Quantity</th>
                    <th className="py-3 font-semibold text-slate-600 text-right">Unit Rate</th>
                    <th className="py-3 font-semibold text-slate-600 text-right">Net Price</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {generatedInvoice.items.map((item) => (
                    <tr key={item.id} className="align-middle">
                      <td className="py-4">
                        <div className="font-bold text-slate-900">{item.brand} {item.model}</div>
                        <div className="text-[10px] text-slate-400 font-mono">{item.size} — Premium radial rubber compound</div>
                      </td>
                      <td className="py-4 text-center font-bold font-mono">{item.quantity} pcs</td>
                      <td className="py-4 text-right font-mono">{generatedInvoice.currencySymbol} {item.unitPrice.toLocaleString()}</td>
                      <td className="py-4 text-right font-bold font-mono">{generatedInvoice.currencySymbol} {item.totalPrice.toLocaleString()}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Summary Block */}
            <div className="flex flex-col md:flex-row justify-between items-start border-t border-slate-200 pt-6 gap-6 text-xs font-sans">
              <div className="max-w-sm space-y-1">
                <span className="font-bold text-slate-700">Client / Warranty Note:</span>
                <p className="text-slate-500 text-xs italic leading-relaxed">
                  {generatedInvoice.notes || "All core tires sold include standard road hazard manufacturing coverage. Verify wear markers regularly. Balancing checked and calibrated."}
                </p>
              </div>

              {/* Mathematics table */}
              <div className="w-full md:w-80 space-y-2 border-slate-150">
                <div className="flex justify-between text-slate-500">
                  <span>Cart Subtotal:</span>
                  <span className="font-mono">{generatedInvoice.currencySymbol} {generatedInvoice.subtotal.toLocaleString()}</span>
                </div>

                <div className="flex justify-between text-slate-500">
                  <span>{settings.taxName} ({generatedInvoice.taxRate}%):</span>
                  <span className="font-mono">{generatedInvoice.currencySymbol} {generatedInvoice.taxAmount.toLocaleString()}</span>
                </div>

                <div className="flex justify-between text-slate-500">
                  <span>Authorized Discount:</span>
                  <span className="font-mono text-red-600">-{generatedInvoice.currencySymbol} {generatedInvoice.discount.toLocaleString()}</span>
                </div>

                <div className="flex justify-between items-center border-t-2 border-slate-900 pt-2 font-bold text-slate-900">
                  <span className="text-sm">Paid In Full :</span>
                  <span className="text-base font-black font-mono">
                    {generatedInvoice.currencySymbol} {generatedInvoice.total.toLocaleString()}
                  </span>
                </div>
              </div>
            </div>

            {/* Print Friendly footer */}
            <div className="border-t border-dashed border-slate-200 mt-10 pt-6 text-center text-[10px] text-slate-400 font-sans space-y-1">
              <p>System authenticated and encrypted under primary warehouse inventory block.</p>
              <p>Thank you for shopping at Haider Brother Traders! Have a safe journey!</p>
            </div>
          </div>

          {/* Action bars */}
          <div className="flex flex-col sm:flex-row justify-center items-center gap-3">
            <button
              onClick={handleManualPrint}
              className="w-full sm:w-auto bg-slate-900 hover:bg-slate-800 text-white font-bold px-6 py-3.5 rounded-xl flex items-center justify-center gap-2 cursor-pointer transition shadow"
            >
              <Printer className="w-4 h-4" />
              Direct Receipt Print / PDF Export
            </button>
            <button
              onClick={() => exportOfflineHTMLReceipt(generatedInvoice)}
              className="w-full sm:w-auto bg-blue-600 hover:bg-blue-500 text-white font-bold px-6 py-3.5 rounded-xl flex items-center justify-center gap-2 cursor-pointer transition shadow"
            >
              <FileDown className="w-4 h-4" />
              Download Offline-Ready HTML Bill
            </button>
            <button
              onClick={() => copyShareText(generatedInvoice)}
              className="w-full sm:w-auto bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold px-6 py-3.5 rounded-xl flex items-center justify-center gap-2 cursor-pointer transition border border-slate-200"
            >
              <Share2 className="w-4 h-4" />
              Copy Social Share Draft
            </button>
          </div>
        </div>
      )}

      {/* HISTORICAL INVOICES BROWSER - VISIBLE IF USER REVIEWS PREVIOUS INVOICE */}
      {selectedInvoiceForView && (
        <div className="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 flex items-center justify-center p-4 overflow-y-auto">
          <div className="bg-white rounded-2xl max-w-4xl w-full p-6 md:p-8 space-y-6 max-h-[90vh] overflow-y-auto relative shadow-2xl">
            <button 
              onClick={() => setSelectedInvoiceForView(null)}
              className="absolute top-4 right-4 bg-slate-100 hover:bg-slate-200 text-slate-600 hover:text-slate-900 font-bold px-3 py-1.5 rounded-lg text-xs cursor-pointer"
            >
              Close Ledger View
            </button>

            {/* Content Mirror of completed code */}
            <div className="bg-white p-2">
              {/* Header info */}
              <div className="flex flex-col md:flex-row justify-between items-start border-b-2 border-slate-900 pb-6 gap-6">
                <div>
                  <span className="text-xs font-bold bg-slate-900 text-white px-2 py-1 rounded">
                    Haider Brother Traders
                  </span>
                  <h3 className="text-xl font-bold uppercase mt-2 text-slate-950">Tire Shop &amp; Auto Vault</h3>
                  <div className="text-[11px] text-slate-500 mt-1">
                    <p>{settings.shopAddress}</p>
                    <p>Phone: {settings.shopPhone}</p>
                  </div>
                </div>

                <div className="text-left md:text-right text-xs font-mono">
                  <h4 className="text-sm font-bold font-sans">DUPLICATE CUSTOMER RECEIPT</h4>
                  <div><strong>Invoice No:</strong> {selectedInvoiceForView.invoiceNumber}</div>
                  <div><strong>Date Filed:</strong> {selectedInvoiceForView.dateTime}</div>
                  <div><strong>Compiled By:</strong> {selectedInvoiceForView.cashierName}</div>
                </div>
              </div>

              {/* Specs */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 py-4 border-b border-slate-150 text-xs">
                <div>
                  <span className="text-[10px] text-slate-400 uppercase font-bold block">Account Client</span>
                  <p className="font-bold text-slate-900">{selectedInvoiceForView.customerName}</p>
                  <p className="text-slate-500">{selectedInvoiceForView.customerPhone || 'N/A'}</p>
                </div>

                <div>
                  <span className="text-[10px] text-slate-400 uppercase font-bold block">Vehicle Details</span>
                  <p className="font-bold text-slate-900">{selectedInvoiceForView.customerVehicle || 'N/A'}</p>
                  <p className="text-slate-500">Service: Tires Replacement</p>
                </div>

                <div>
                  <span className="text-[10px] text-slate-400 uppercase font-bold block">Receipt Token</span>
                  <p className="font-bold text-slate-900 flex items-center gap-1">
                    <span className="bg-emerald-100 text-emerald-800 text-[10px] px-1.5 py-0.5 rounded">PAID</span>
                    <span className="font-mono text-xs">{selectedInvoiceForView.paymentMethod}</span>
                  </p>
                  {selectedInvoiceForView.gatewayInfo && (
                    <p className="text-[10px] text-slate-500 font-mono">
                      Ref: {selectedInvoiceForView.gatewayInfo.transactionId}
                    </p>
                  )}
                </div>
              </div>

              {/* Items List */}
              <div className="py-4">
                <table className="w-full text-left text-xs font-sans">
                  <thead>
                    <tr className="border-b border-slate-200">
                      <th className="py-2 text-slate-500 font-bold block">Tire Brand & Size Specs</th>
                      <th className="py-2 text-slate-500 font-bold text-center">Qty</th>
                      <th className="py-2 text-slate-500 font-bold text-right">Rate</th>
                      <th className="py-2 text-slate-500 font-bold text-right">Amount</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {selectedInvoiceForView.items.map((item) => (
                      <tr key={item.id}>
                        <td className="py-3">
                          <div className="font-semibold text-slate-900">{item.brand} {item.model}</div>
                          <div className="text-[10px] text-slate-400 font-mono">{item.size}</div>
                        </td>
                        <td className="py-3 text-center font-bold font-mono">{item.quantity}</td>
                        <td className="py-3 text-right font-mono">{selectedInvoiceForView.currencySymbol}{item.unitPrice.toLocaleString()}</td>
                        <td className="py-3 text-right font-bold font-mono">{selectedInvoiceForView.currencySymbol}{item.totalPrice.toLocaleString()}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              {/* Total calculations */}
              <div className="flex flex-col sm:flex-row justify-between items-start border-t border-slate-200 pt-4 gap-4 text-xs font-sans">
                <div className="max-w-xs text-slate-400 italic text-[10px]">
                  Notes: {selectedInvoiceForView.notes || "All tires sold are certified under factory DOT guidelines. Alignment calibrated."}
                </div>

                <div className="w-full sm:w-64 space-y-1.5 text-right ml-auto">
                  <div className="flex justify-between text-slate-500">
                    <span>Subtotal:</span>
                    <span>{selectedInvoiceForView.currencySymbol} {selectedInvoiceForView.subtotal.toLocaleString()}</span>
                  </div>
                  <div className="flex justify-between text-slate-500">
                    <span>{settings.taxName} ({selectedInvoiceForView.taxRate}%):</span>
                    <span>{selectedInvoiceForView.currencySymbol} {selectedInvoiceForView.taxAmount.toLocaleString()}</span>
                  </div>
                  <div className="flex justify-between text-slate-500">
                    <span>Discount applied:</span>
                    <span className="text-red-600">-{selectedInvoiceForView.currencySymbol} {selectedInvoiceForView.discount.toLocaleString()}</span>
                  </div>
                  <div className="flex justify-between items-center border-t border-slate-900 pt-1.5 font-bold text-slate-900">
                    <span>Paid Total:</span>
                    <span className="text-sm font-black font-mono">
                      {selectedInvoiceForView.currencySymbol} {selectedInvoiceForView.total.toLocaleString()}
                    </span>
                  </div>
                </div>
              </div>
            </div>

            {/* Floating duplicate panel actions */}
            <div className="flex gap-3 justify-center pt-2">
              <button
                onClick={handleManualPrint}
                className="bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold px-4 py-2 rounded-xl flex items-center justify-center gap-1.5 cursor-pointer"
              >
                <Printer className="w-3.5 h-3.5" />
                Print Duplicate
              </button>
              <button
                onClick={() => exportOfflineHTMLReceipt(selectedInvoiceForView)}
                className="bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold px-4 py-2 rounded-xl flex items-center justify-center gap-1.5 cursor-pointer"
              >
                <Download className="w-3.5 h-3.5" />
                Save File Block
              </button>
              <button
                onClick={() => copyShareText(selectedInvoiceForView)}
                className="bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold px-4 py-2 rounded-xl border border-slate-200"
              >
                Copy text share
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}