import React, { useState } from 'react';
import { useCRM } from '../context/CRMContext';
import { Search, ShoppingCart, Trash2, Plus, Minus, CreditCard, ChevronRight, Calculator, Package, AlertTriangle, Download, History, Store, CheckSquare, Square, UserPlus, Pencil, X, Banknote, CreditCard as CardIcon } from 'lucide-react';
import { InventoryItem, Sale, SalesChannel, Customer, PaymentMethod } from '../types';
import clsx from 'clsx';

const Sales: React.FC = () => {
    const { inventory, customers, registerSale, sales, importSales, updateSale, loading, addCustomer, updateProduct, isAdmin } = useCRM();

    // State
    const [viewMode, setViewMode] = useState<'list' | 'pos'>('list'); // 'list' = Pedidos, 'pos' = Frente de Caixa

    // POS State
    const [searchTerm, setSearchTerm] = useState('');
    const [cart, setCart] = useState<{ item: InventoryItem; quantity: number; price: number }[]>([]);
    const [selectedCustomer, setSelectedCustomer] = useState<string>('');
    const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>('Cash'); // New state
    const [isFinalizing, setIsFinalizing] = useState(false);

    // Import Modal State
    const [showImportModal, setShowImportModal] = useState(false);
    const [importChannel, setImportChannel] = useState<SalesChannel>('Mercado Livre');

    // Quick Customer Modal
    const [showCustomerModal, setShowCustomerModal] = useState(false);
    const [newCustomer, setNewCustomer] = useState({ name: '', email: '', phone: '' });

    // Quick Edit Product Modal
    const [editingProduct, setEditingProduct] = useState<InventoryItem | null>(null);
    const [editForm, setEditForm] = useState({ price: 0, stock: 0 });

    // Filter Inventory
    const filteredInventory = inventory.filter(i =>
        i.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        i.sku.toLowerCase().includes(searchTerm.toLowerCase())
    );

    // Cart Actions
    const addToCart = (item: InventoryItem) => {
        const existing = cart.find(c => c.item.id === item.id);
        if (existing) {
            if (existing.quantity >= item.quantity) return; // Max stock reached
            setCart(cart.map(c => c.item.id === item.id ? { ...c, quantity: c.quantity + 1 } : c));
        } else {
            if (item.quantity <= 0) return;
            setCart([...cart, { item, quantity: 1, price: Number(item.marketPriceBRL) || 0 }]);
        }
    };

    const updateQuantity = (id: string, delta: number) => {
        setCart(cart.map(c => {
            if (c.item.id === id) {
                const newQty = c.quantity + delta;
                if (newQty <= 0) return c; // Don't remove here, need explicit remove
                if (newQty > c.item.quantity) return c;
                return { ...c, quantity: newQty };
            }
            return c;
        }));
    };

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

    const updatePrice = (id: string, newPrice: number) => {
        setCart(cart.map(c => c.item.id === id ? { ...c, price: newPrice } : c));
    };

    // Totals
    const totalAmount = cart.reduce((acc, c) => acc + (c.price * c.quantity), 0);
    const totalItems = cart.reduce((acc, c) => acc + c.quantity, 0);

    const [showSuccessModal, setShowSuccessModal] = useState(false);
    const [lastSaleTotal, setLastSaleTotal] = useState(0);

    const handleFinalize = async () => {
        if (cart.length === 0) return;
        setIsFinalizing(true);

        const saleTotal = cart.reduce((acc, c) => acc + (c.price * c.quantity), 0);
        setLastSaleTotal(saleTotal);

        await registerSale(
            cart.map(c => ({ id: c.item.id, quantity: c.quantity, salePrice: c.price })),
            selectedCustomer || undefined,
            paymentMethod // Pass new arg
        );

        setCart([]);
        setSelectedCustomer('');
        setPaymentMethod('Cash'); // Reset
        setIsFinalizing(false);
        setShowSuccessModal(true);
    };

    const handleNewSale = () => {
        setShowSuccessModal(false);
    };

    const handlePrintReceipt = () => {
        alert("Impressão de Recibo iniciada... (Mock)");
        // window.print();
    };

    const handleSendEmail = () => {
        const email = customers.find(c => c.id === selectedCustomer)?.email || "cliente@exemplo.com";
        alert(`Comprovante enviado para ${email} (Mock)`);
    };

    // --- IMPORT HANDLERS ---
    const handleImport = async () => {
        await importSales(importChannel);
        setShowImportModal(false);
    };

    // --- QUICK ACTIONS ---
    const handleSaveCustomer = async () => {
        if (!newCustomer.name) return alert("Nome é obrigatório");
        try {
            const created = await addCustomer({ ...newCustomer, status: 'Active', city: 'Foz do Iguaçu' } as any);
            if (created) {
                setNewCustomer({ name: '', email: '', phone: '' });
                setShowCustomerModal(false);
                setSelectedCustomer(created.id); // Auto-select
            }
        } catch (error) {
            console.error(error);
            alert("Erro ao cadastrar cliente. Verifique o console.");
        }
    };

    const handleSaveProductEdit = async () => {
        if (!editingProduct) return;
        await updateProduct(editingProduct.id, {
            marketPriceBRL: editForm.price,
            quantity: editForm.stock
        });
        setEditingProduct(null);
    };

    // --- UI RENDERERS ---

    // 1. SALES LIST VIEW
    const renderSalesList = () => (
        <div className="space-y-6">
            <div className="flex justify-between items-center bg-white/5 p-6 rounded-[32px] border border-white/5">
                <div>
                    <h2 className="text-xl font-bold text-white tracking-tight">Histórico de Pedidos</h2>
                    <p className="text-sm text-slate-400">Gerencie vendas locais e importadas.</p>
                </div>
                <div className="flex gap-3">
                    <button
                        onClick={() => setShowImportModal(true)}
                        className="bg-slate-800 hover:bg-slate-700 text-white px-5 py-3 rounded-2xl font-bold text-sm transition-all flex items-center gap-2 border border-white/5"
                    >
                        <Download size={18} /> Importar Pedidos
                    </button>
                    <button
                        onClick={() => setViewMode('pos')}
                        className="bg-indigo-600 hover:bg-indigo-500 text-white px-5 py-3 rounded-2xl font-bold text-sm shadow-lg shadow-indigo-900/20 transition-all flex items-center gap-2"
                    >
                        <Plus size={18} /> Nova Venda (POS)
                    </button>
                </div>
            </div>

            <div className="glass-card rounded-3xl border border-white/5 overflow-hidden">
                <table className="w-full text-left">
                    <thead className="bg-black/20 text-[10px] font-bold text-slate-500 uppercase tracking-widest border-b border-white/5">
                        <tr>
                            <th className="px-6 py-4">Data / ID</th>
                            <th className="px-6 py-4">Canal</th>
                            <th className="px-6 py-4">Cliente</th>
                            <th className="px-6 py-4 text-right">Total</th>
                            <th className="px-6 py-4 text-center">Status</th>
                            <th className="px-6 py-4 text-center">Baixar Estoque</th>
                            <th className="px-6 py-4 text-center">Lançar Financeiro</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-white/5">
                        {sales.map(sale => (
                            <tr key={sale.id} className="hover:bg-white/[0.02] transition-colors">
                                <td className="px-6 py-4">
                                    <div className="font-mono text-xs text-slate-400">{new Date(sale.date).toLocaleDateString()}</div>
                                    <div className="text-[9px] text-slate-600">#{sale.externalId || sale.id.substring(0, 8)}</div>
                                </td>
                                <td className="px-6 py-4">
                                    <div className="flex items-center gap-2 text-sm text-slate-300">
                                        {sale.channel === 'Mercado Livre' && <span className="text-yellow-400 font-bold text-xs bg-yellow-400/10 px-2 py-0.5 rounded">MeLi</span>}
                                        {sale.channel === 'Shopee' && <span className="text-orange-400 font-bold text-xs bg-orange-400/10 px-2 py-0.5 rounded">Shopee</span>}
                                        {sale.channel === 'Amazon' && <span className="text-white font-bold text-xs bg-slate-700 px-2 py-0.5 rounded">Amazon</span>}
                                        {sale.channel === 'Local' && <span className="text-emerald-400 font-bold text-xs bg-emerald-400/10 px-2 py-0.5 rounded">Balcão</span>}
                                    </div>
                                </td>
                                <td className="px-6 py-4 text-sm text-slate-300 font-medium">
                                    {sale.customerName || 'Cliente Consumidor'}
                                </td>
                                <td className="px-6 py-4 text-right text-sm font-bold text-slate-200">
                                    R$ {sale.total.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}
                                </td>
                                <td className="px-6 py-4 text-center">
                                    <span className={`text-[10px] font-bold uppercase px-2 py-1 rounded-full ${sale.status === 'Completed' ? 'bg-emerald-500/10 text-emerald-400' :
                                        sale.status === 'Pending' ? 'bg-amber-500/10 text-amber-400' :
                                            'bg-slate-500/10 text-slate-400'
                                        }`}>
                                        {sale.status}
                                    </span>
                                </td>
                                <td className="px-6 py-4 text-center">
                                    <button
                                        onClick={() => updateSale(sale.id, { isStockLaunched: !sale.isStockLaunched })}
                                        disabled={sale.isStockLaunched}
                                        className={`p-2 rounded-lg transition-all ${sale.isStockLaunched ? 'text-emerald-500 opacity-50 cursor-not-allowed' : 'text-slate-500 hover:bg-white/10 hover:text-white'}`}
                                    >
                                        {sale.isStockLaunched ? <CheckSquare size={18} /> : <Square size={18} />}
                                    </button>
                                </td>
                                <td className="px-6 py-4 text-center">
                                    <button
                                        onClick={() => updateSale(sale.id, { isFinancialLaunched: !sale.isFinancialLaunched })}
                                        disabled={sale.isFinancialLaunched}
                                        className={`p-2 rounded-lg transition-all ${sale.isFinancialLaunched ? 'text-emerald-500 opacity-50 cursor-not-allowed' : 'text-slate-500 hover:bg-white/10 hover:text-white'}`}
                                    >
                                        {sale.isFinancialLaunched ? <CheckSquare size={18} /> : <Square size={18} />}
                                    </button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
                {sales.length === 0 && (
                    <div className="py-20 text-center opacity-30">
                        <History size={48} className="mx-auto mb-4 text-slate-400" />
                        <p className="text-sm font-bold text-slate-400 uppercase tracking-widest">Nenhuma venda registrada</p>
                    </div>
                )}
            </div>

            {/* IMPORT MODAL */}
            {showImportModal && (
                <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
                    <div className="bg-[#0F1115] border border-white/10 rounded-[32px] w-full max-w-sm shadow-2xl p-8">
                        <h3 className="text-xl font-bold text-white mb-6">Importar Pedidos</h3>

                        <div className="space-y-4 mb-8">
                            <div>
                                <label className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 block">Marketplace</label>
                                <select
                                    className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-sm text-slate-300 outline-none focus:border-indigo-500"
                                    value={importChannel}
                                    onChange={(e) => setImportChannel(e.target.value as SalesChannel)}
                                >
                                    <option value="Mercado Livre">Mercado Livre</option>
                                    <option value="Shopee">Shopee</option>
                                    <option value="Amazon">Amazon</option>
                                </select>
                            </div>

                            <div className="flex items-center gap-3 p-4 bg-white/5 rounded-xl border border-white/5">
                                <div className="p-2 bg-indigo-500/20 rounded-lg text-indigo-400">
                                    <Store size={16} />
                                </div>
                                <div className="text-xs text-slate-400 leading-relaxed">
                                    Simularemos a conexão com a API do <strong>{importChannel}</strong> para buscar novos pedidos pendentes.
                                </div>
                            </div>
                        </div>

                        <div className="flex gap-3">
                            <button onClick={() => setShowImportModal(false)} className="flex-1 py-3 text-sm font-bold text-slate-400 hover:text-white transition-colors">Cancelar</button>
                            <button
                                onClick={handleImport}
                                disabled={loading}
                                className="flex-[2] bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl font-bold text-sm shadow-lg shadow-indigo-900/20 transition-all flex items-center justify-center gap-2"
                            >
                                {loading ? (
                                    <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                                ) : 'Importar Agora'}
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );


    return (
        <div className="animate-in fade-in duration-500 h-[calc(100vh-140px)]">
            {viewMode === 'list' ? renderSalesList() : (
                <div className="h-full flex flex-col">
                    <button onClick={() => setViewMode('list')} className="self-start mb-4 text-xs font-bold text-slate-500 hover:text-white flex items-center gap-1 uppercase tracking-wider">
                        <ChevronRight className="rotate-180" size={14} /> Voltar para Histórico
                    </button>
                    <div className="grid grid-cols-1 xl:grid-cols-12 gap-8 h-full">
                        {/* LEFT: POS / INVENTORY */}
                        <div className="xl:col-span-8 flex flex-col h-full space-y-6">
                            {/* ... Search Bar and Grid kept as children ... */}
                            {/* RE-INSERTING ORIGINAL POS CONTENT WRAPPED IN FRAGMENT OR DIV IF NEEDED */}

                            {/* Search Bar */}
                            <div className="bg-white/5 p-6 rounded-[32px] border border-white/5 flex gap-4 items-center shadow-sm">
                                <div className="relative flex-grow">
                                    <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500" size={20} />
                                    <input
                                        type="text"
                                        value={searchTerm}
                                        onChange={(e) => setSearchTerm(e.target.value)}
                                        placeholder="Buscar produto por nome ou SKU..."
                                        className="w-full bg-slate-900/50 border border-white/10 rounded-2xl py-4 pl-12 pr-4 text-white focus:border-indigo-500 outline-none transition-all placeholder:text-slate-600"
                                    />
                                </div>
                            </div>

                            {/* Grid */}
                            <div className="flex-grow overflow-y-auto pr-2 custom-scrollbar">
                                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                    {filteredInventory.map(item => (
                                        <div
                                            key={item.id}
                                            onClick={() => addToCart(item)}
                                            className={clsx(
                                                "p-5 rounded-[24px] border transition-all cursor-pointer group relative overflow-hidden",
                                                item.quantity === 0 ? "opacity-50 grayscale border-white/5 bg-white/5 cursor-not-allowed" : "bg-white/5 border-white/5 hover:border-indigo-500/50 hover:bg-white/10 active:scale-95"
                                            )}
                                        >
                                            <div className="flex justify-between items-start mb-3">
                                                <span className="text-[10px] font-bold text-slate-500 uppercase tracking-widest bg-black/20 px-2 py-1 rounded-lg">{item.sku}</span>
                                                {item.quantity <= 3 && item.quantity > 0 && (
                                                    <div className="flex items-center gap-1 text-amber-400 text-[10px] font-bold bg-amber-400/10 px-2 py-1 rounded-lg">
                                                        <AlertTriangle size={10} /> Baixo Estoque
                                                    </div>
                                                )}
                                                {isAdmin && (
                                                    <button
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            setEditingProduct(item);
                                                            setEditForm({ price: item.marketPriceBRL || 0, stock: item.quantity });
                                                        }}
                                                        className="text-slate-500 hover:text-white p-1 rounded hover:bg-white/10 transition-colors"
                                                    >
                                                        <Pencil size={12} />
                                                    </button>
                                                )}
                                            </div>
                                            <h4 className="text-sm font-bold text-slate-200 leading-tight mb-4 min-h-[40px] line-clamp-2">{item.name}</h4>
                                            <div className="flex justify-between items-end">
                                                <div>
                                                    <p className="text-[10px] font-bold text-slate-500 uppercase">Preço Venda</p>
                                                    <p className="text-lg font-bold text-emerald-400">R$ {(Number(item.marketPriceBRL) || 0).toLocaleString('pt-BR')}</p>
                                                </div>
                                                <div className="text-right">
                                                    <p className="text-[10px] font-bold text-slate-500 uppercase">Estoque</p>
                                                    <p className={clsx("text-lg font-bold", item.quantity === 0 ? "text-rose-500" : "text-white")}>{item.quantity}</p>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>

                        {/* RIGHT: CART / CHECKOUT */}
                        <div className="xl:col-span-4 flex flex-col h-full">
                            <div className="bg-white/5 rounded-[40px] border border-white/5 shadow-2xl flex flex-col h-full overflow-hidden backdrop-blur-xl">

                                {/* Header */}
                                <div className="p-8 border-b border-white/5 bg-slate-900/50 flex justify-between items-center">
                                    <div className="flex items-center gap-4">
                                        <div className="w-12 h-12 rounded-2xl bg-indigo-600 flex items-center justify-center text-white shadow-lg shadow-indigo-500/20">
                                            <ShoppingCart size={24} />
                                        </div>
                                        <div>
                                            <h2 className="text-xl font-bold text-white tracking-tight">Carrinho</h2>
                                            <p className="text-xs font-bold text-slate-500 uppercase tracking-widest">Nova Venda</p>
                                        </div>
                                    </div>
                                    <span className="bg-white/10 text-white px-3 py-1 rounded-xl text-xs font-bold">{totalItems} itens</span>
                                </div>

                                {/* Customer Select (Optional) */}
                                <div className="p-6 border-b border-white/5 flex items-center gap-3">
                                    <select
                                        value={selectedCustomer}
                                        onChange={(e) => setSelectedCustomer(e.target.value)}
                                        className="flex-grow bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-sm text-slate-300 focus:border-indigo-500 outline-none cursor-pointer appearance-none"
                                    >
                                        <option value="">Cliente Não Identificado (Balcão)</option>
                                        {customers.map(c => (
                                            <option key={c.id} value={c.id}>{c.name}</option>
                                        ))}
                                    </select>
                                    <button
                                        onClick={() => setShowCustomerModal(true)}
                                        className="bg-indigo-600 hover:bg-indigo-500 text-white p-3 rounded-xl transition-colors shadow-lg shadow-indigo-900/20"
                                        title="Novo Cliente"
                                    >
                                        <UserPlus size={18} />
                                    </button>
                                </div>

                                {/* Cart Items */}
                                <div className="flex-grow overflow-y-auto p-6 space-y-4 custom-scrollbar bg-black/10">
                                    {cart.length === 0 ? (
                                        <div className="h-full flex flex-col items-center justify-center opacity-20 text-center">
                                            <Package size={64} className="mb-4 text-slate-400" />
                                            <p className="text-sm font-bold text-slate-400 uppercase tracking-widest">Carrinho Vazio</p>
                                        </div>
                                    ) : (
                                        cart.map((c, idx) => (
                                            <div key={idx} className="bg-slate-800/50 p-4 rounded-2xl border border-white/5 group hover:border-indigo-500/30 transition-all">
                                                <div className="flex justify-between items-start mb-2">
                                                    <h4 className="text-xs font-bold text-slate-200 line-clamp-1 pr-4">{c.item.name}</h4>
                                                    <button onClick={() => removeFromCart(c.item.id)} className="text-slate-600 hover:text-rose-500 transition-colors"><Trash2 size={14} /></button>
                                                </div>

                                                <div className="flex items-center justify-between gap-4 mt-3">
                                                    <div className="flex items-center gap-2 bg-black/30 rounded-lg p-1 border border-white/5">
                                                        <button onClick={() => updateQuantity(c.item.id, -1)} className="p-1.5 hover:bg-white/10 rounded-md text-slate-400"><Minus size={12} /></button>
                                                        <span className="text-xs font-bold text-white w-6 text-center">{c.quantity}</span>
                                                        <button onClick={() => updateQuantity(c.item.id, 1)} className="p-1.5 hover:bg-white/10 rounded-md text-slate-400"><Plus size={12} /></button>
                                                    </div>

                                                    <div className="flex-grow">
                                                        <div className="relative">
                                                            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-[10px] mobile:text-[10px] text-slate-500 font-bold">R$</span>
                                                            <input
                                                                type="number"
                                                                value={c.price}
                                                                onChange={(e) => updatePrice(c.item.id, parseFloat(e.target.value))}
                                                                className="w-full bg-black/30 border border-white/10 rounded-lg py-1.5 pl-8 pr-2 text-right text-xs font-bold text-white focus:border-indigo-500 outline-none"
                                                            />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="text-right mt-2">
                                                    <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Subtotal:</span>
                                                    <span className="text-xs font-bold text-indigo-400 ml-2">R$ {(c.price * c.quantity).toLocaleString('pt-BR')}</span>
                                                </div>
                                            </div>
                                        ))
                                    )}
                                </div>

                                {/* Summary & Action */}
                                <div className="p-8 bg-slate-900 border-t border-white/10 space-y-6">
                                    <div className="space-y-2">
                                        <div className="flex justify-between text-xs text-slate-500 font-medium">
                                            <span>Itens</span>
                                            <span>{totalItems} UN</span>
                                        </div>
                                        <div className="flex justify-between items-end">
                                            <span className="text-sm font-bold text-white uppercase tracking-widest">Total Geral</span>
                                            <span className="text-3xl font-bold text-emerald-400 tracking-tight">R$ {totalAmount.toLocaleString('pt-BR')}</span>
                                        </div>
                                    </div>

                                    {/* Payment Method Selector */}
                                    <div className="bg-white/5 rounded-xl p-4 border border-white/10">
                                        <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-3">Forma de Pagamento</p>
                                        <div className="grid grid-cols-3 gap-2">
                                            {['Cash', 'Pix', 'Credit Card'].map(method => (
                                                <button
                                                    key={method}
                                                    onClick={() => setPaymentMethod(method as PaymentMethod)}
                                                    className={clsx(
                                                        "py-2 px-1 rounded-lg text-xs font-bold transition-all flex flex-col items-center gap-1",
                                                        paymentMethod === method
                                                            ? "bg-indigo-600 text-white shadow-lg"
                                                            : "bg-black/20 text-slate-400 hover:bg-white/10 hover:text-white"
                                                    )}
                                                >
                                                    {method === 'Cash' && <Banknote size={14} />}
                                                    {method === 'Pix' && <img src="https://icongr.am/entypo/flash.svg?size=14&color=currentColor" className={paymentMethod === 'Pix' ? "invert" : "opacity-50"} alt="Pix" />}
                                                    {method === 'Credit Card' && <CardIcon size={14} />}
                                                    <span>{method === 'Credit Card' ? 'Cartão' : method}</span>
                                                </button>
                                            ))}
                                        </div>
                                    </div>

                                    <button
                                        onClick={handleFinalize}
                                        disabled={cart.length === 0 || isFinalizing}
                                        className="w-full py-4 bg-emerald-600 hover:bg-emerald-500 text-white rounded-2xl font-bold text-sm shadow-xl shadow-emerald-900/40 transition-all flex items-center justify-center gap-3 disabled:opacity-50 disabled:cursor-not-allowed active:scale-95"
                                    >
                                        {isFinalizing ? (
                                            <div className="animate-spin w-5 h-5 border-2 border-white/30 border-t-white rounded-full"></div>
                                        ) : (
                                            <>
                                                <CreditCard size={18} /> FINALIZAR VENDA
                                            </>
                                        )}
                                    </button>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            )}
            {/* SUCCESS MODAL */}
            {showSuccessModal && (
                <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-300">
                    <div className="bg-[#0F1115] border border-white/10 rounded-[32px] w-full max-w-md shadow-2xl p-8 relative overflow-hidden">
                        {/* Confetti or success decoration could go here */}
                        <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-emerald-500 to-indigo-500"></div>

                        <div className="flex flex-col items-center text-center mb-8">
                            <div className="w-20 h-20 bg-emerald-500/10 rounded-full flex items-center justify-center mb-6 border border-emerald-500/20 shadow-[0_0_30px_rgba(16,185,129,0.2)]">
                                <CreditCard size={40} className="text-emerald-400" />
                            </div>
                            <h2 className="text-2xl font-bold text-white mb-2">Venda Realizada!</h2>
                            <p className="text-slate-400">Total processado com sucesso.</p>
                            <div className="mt-4 text-3xl font-bold text-emerald-400 font-mono tracking-tight">R$ {lastSaleTotal.toLocaleString('pt-BR')}</div>
                        </div>

                        <div className="space-y-3">
                            <button
                                onClick={handlePrintReceipt}
                                className="w-full py-4 bg-white/5 hover:bg-white/10 border border-white/10 rounded-2xl flex items-center justify-between px-6 text-slate-300 hover:text-white transition-all group"
                            >
                                <div className="flex items-center gap-3">
                                    <div className="p-2 rounded-lg bg-black/40 text-indigo-400"><Calculator size={20} /></div> {/* Printer Icon replacement */}
                                    <span className="font-bold text-sm">Imprimir Recibo</span>
                                </div>
                                <ChevronRight size={16} className="text-slate-600 group-hover:text-white" />
                            </button>

                            <button
                                onClick={handleSendEmail}
                                className="w-full py-4 bg-white/5 hover:bg-white/10 border border-white/10 rounded-2xl flex items-center justify-between px-6 text-slate-300 hover:text-white transition-all group"
                            >
                                <div className="flex items-center gap-3">
                                    <div className="p-2 rounded-lg bg-black/40 text-blue-400"><AlertTriangle size={20} /></div> {/* Mail Icon replacement */}
                                    <span className="font-bold text-sm">Enviar por Email</span>
                                </div>
                                <ChevronRight size={16} className="text-slate-600 group-hover:text-white" />
                            </button>

                            <button
                                onClick={handleNewSale}
                                className="w-full py-4 bg-indigo-600 hover:bg-indigo-500 text-white rounded-2xl font-bold text-sm shadow-xl shadow-indigo-900/20 transition-all flex items-center justify-center gap-2 mt-6 active:scale-95"
                            >
                                <Plus size={18} /> NOVA VENDA
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default Sales;