import React, { useState, useEffect } from 'react';
import { X, Search, ShoppingCart, Plus, Minus, CreditCard, DollarSign, Globe, Trash2 } from 'lucide-react';

export default function NewSaleModal({ isOpen, onClose, onSave, branches, products }) {
    const [searchTerm, setSearchTerm] = useState('');
    const [selectedBranch, setSelectedBranch] = useState('');
    const [cart, setCart] = useState([]);
    const [paymentMethod, setPaymentMethod] = useState('');
    const [paymentMethods, setPaymentMethods] = useState([]);
    const [loading, setLoading] = useState(false);
    const [adjustedTotal, setAdjustedTotal] = useState('');
    const [adjustmentRemarks, setAdjustmentRemarks] = useState('');

    useEffect(() => {
        if (isOpen) {
            fetchPaymentMethods();
        }
    }, [isOpen]);

    const fetchPaymentMethods = async () => {
        try {
            const res = await fetch('/api/masters/payment_method');
            if (res.ok) {
                const data = await res.json();
                const activeOnes = data.filter(m => m.status === 'Active');
                setPaymentMethods(activeOnes);
                if (activeOnes.length > 0 && !paymentMethod) {
                    setPaymentMethod(activeOnes[0].name);
                }
            }
        } catch (error) {
            console.error('Error fetching payment methods:', error);
        }
    };

    useEffect(() => {
        if (window.__APP_DATA__?.role === 'receptionist') {
            setSelectedBranch(window.__APP_DATA__?.user?.branch_id);
        } else if (branches.length > 0) {
            setSelectedBranch(branches[0].id);
        }
    }, [branches]);

    const subtotal = cart.reduce((sum, item) => sum + (item.unit_price * item.quantity), 0);
    const vatAmount = subtotal * 0.05;
    const totalWithVat = subtotal + vatAmount;

    // Sync adjusted total when base total changes, if not manually edited
    useEffect(() => {
        setAdjustedTotal(totalWithVat.toFixed(2));
    }, [totalWithVat]);

    if (!isOpen) return null;

    const filteredProducts = products.filter(p => 
        p.branch_id.toString() === selectedBranch.toString() &&
        p.name.toLowerCase().includes(searchTerm.toLowerCase())
    );

    const addToCart = (product) => {
        const existing = cart.find(item => item.product_id === product.id);
        if (existing) {
            setCart(cart.map(item => 
                item.product_id === product.id 
                ? { ...item, quantity: item.quantity + 1 } 
                : item
            ));
        } else {
            setCart([...cart, { 
                product_id: product.id, 
                name: product.name, 
                unit_price: product.selling_price, 
                quantity: 1,
                max_stock: product.current_stock
            }]);
        }
    };

    const updateQuantity = (id, delta) => {
        setCart(cart.map(item => {
            if (item.product_id === id) {
                const newQty = Math.max(1, Math.min(item.max_stock, item.quantity + delta));
                return { ...item, quantity: newQty };
            }
            return item;
        }));
    };

    const removeItem = (id) => {
        setCart(cart.filter(item => item.product_id !== id));
    };

    const handleSubmit = async () => {
        if (cart.length === 0) return;
        setLoading(true);
        try {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            const res = await fetch('/api/inventory/sales', {
                method: 'POST',
                headers: { 
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({
                    branch_id: selectedBranch,
                    payment_method: paymentMethod,
                    total_amount: parseFloat(adjustedTotal),
                    remarks: parseFloat(adjustedTotal) !== totalWithVat ? adjustmentRemarks : '',
                    items: cart.map(i => ({
                        product_id: i.product_id,
                        quantity: i.quantity,
                        unit_price: i.unit_price
                    }))
                })
            });
            if (res.ok) {
                const sale = await res.json();
                onSave(sale);
                setCart([]);
                setAdjustmentRemarks('');
                onClose();
            }
        } catch (error) {
            console.error('Sale error:', error);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="fixed inset-0 bg-[#00171F]/40 backdrop-blur-sm z-[999] flex items-center justify-center p-4">
            <div className="bg-white rounded-[32px] w-full max-w-6xl max-h-[95vh] overflow-hidden shadow-2xl flex flex-col animate-in zoom-in-95 duration-500">
                <div className="p-6 border-b border-gray-100 flex items-center justify-between bg-[#FBFCFD]">
                    <div className="flex items-center gap-4">
                        <div className="w-12 h-12 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-600">
                            <ShoppingCart size={24} />
                        </div>
                        <div>
                            <h2 className="text-2xl font-black text-gray-900 tracking-tight">New Product Sale</h2>
                            <p className="text-xs text-gray-500 font-bold uppercase tracking-widest mt-0.5">Create a transaction for product sales.</p>
                        </div>
                    </div>
                    <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-2xl transition-all">
                        <X size={28} className="text-gray-400" />
                    </button>
                </div>

                <div className="flex-1 flex overflow-hidden">
                    {/* Product Selection Area */}
                    <div className="flex-1 p-8 overflow-auto space-y-8 bg-gray-50/30">
                        <div className="flex items-center gap-4">
                            <div className="flex-1 relative">
                                <Search className="absolute left-5 top-1/2 -translate-y-1/2 text-gray-400" size={20} />
                                <input 
                                    className="w-full pl-12 pr-6 py-3 bg-white border border-gray-100 rounded-2xl outline-none focus:ring-2 focus:ring-red-500/10 focus:border-red-500 transition-all font-bold text-gray-900 text-sm shadow-sm"
                                    placeholder="Search products..."
                                    value={searchTerm}
                                    onChange={e => setSearchTerm(e.target.value)}
                                />
                            </div>
                            {window.__APP_DATA__?.role !== 'receptionist' && (
                                <select 
                                    className="px-5 py-3 bg-white border border-gray-100 rounded-2xl outline-none font-black text-[10px] uppercase tracking-widest cursor-pointer shadow-sm"
                                    value={selectedBranch}
                                    onChange={e => {
                                        setSelectedBranch(e.target.value);
                                        setCart([]);
                                    }}
                                >
                                    {branches.map(b => <option key={b.id} value={b.id}>{b.name}</option>)}
                                </select>
                            )}
                        </div>

                        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                            {filteredProducts.map(product => (
                                <div key={product.id} className="bg-white p-3 rounded-[20px] border border-gray-100 shadow-sm hover:shadow-md hover:border-red-100 transition-all group flex flex-col">
                                    <div className="flex items-start justify-between gap-2">
                                        <div className="flex-1 min-w-0">
                                            <h4 className="font-black text-gray-900 text-xs leading-snug truncate" title={product.name}>{product.name}</h4>
                                            <p className="text-[9px] text-gray-400 font-bold uppercase tracking-wider mt-0.5 truncate">{product.category?.name}</p>
                                        </div>
                                        <span className={`px-1.5 py-0.5 rounded-md text-[8px] font-black whitespace-nowrap ${product.current_stock > 0 ? 'bg-emerald-50 text-emerald-600' : 'bg-red-50 text-red-600'}`}>
                                            {product.current_stock} left
                                        </span>
                                    </div>
                                    <div className="flex items-center justify-between mt-auto pt-3">
                                        <span className="text-sm font-black text-[#FF4D4D]">{parseFloat(product.selling_price).toFixed(2)}</span>
                                        <button 
                                            disabled={product.current_stock <= 0}
                                            onClick={() => addToCart(product)}
                                            className="px-3 py-1.5 bg-gray-50 text-gray-900 border border-transparent rounded-lg font-black text-[9px] uppercase tracking-widest hover:bg-[#FF4D4D] hover:text-white transition-all disabled:opacity-30 disabled:hover:bg-gray-50 disabled:hover:text-gray-900"
                                        >
                                            Add
                                        </button>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* Cart Sidebar */}
                    <div className="w-[340px] border-l border-gray-100 p-6 flex flex-col bg-white shrink-0">
                        <h3 className="text-lg font-black text-gray-900 mb-4 flex items-center gap-3">
                            <ShoppingCart size={18} className="text-gray-400" />
                            Current Order
                        </h3>

                        <div className="flex-1 overflow-auto space-y-3 pr-1">
                            {cart.map(item => (
                                <div key={item.product_id} className="p-3 bg-gray-50/50 rounded-xl border border-gray-100 group">
                                    <div className="flex items-start justify-between">
                                        <p className="font-bold text-gray-900 text-xs flex-1 leading-tight">{item.name}</p>
                                        <button onClick={() => removeItem(item.product_id)} className="text-gray-300 hover:text-red-500 transition-colors ml-2">
                                            <Trash2 size={14} />
                                        </button>
                                    </div>
                                    <div className="flex items-center justify-between mt-3">
                                        <div className="flex items-center gap-2 bg-white border border-gray-100 rounded-lg p-0.5">
                                            <button onClick={() => updateQuantity(item.product_id, -1)} className="p-1 hover:bg-gray-50 rounded"><Minus size={12}/></button>
                                            <span className="text-[10px] font-black min-w-[16px] text-center">{item.quantity}</span>
                                            <button onClick={() => updateQuantity(item.product_id, 1)} className="p-1 hover:bg-gray-50 rounded"><Plus size={12}/></button>
                                        </div>
                                        <p className="font-black text-gray-900 text-xs">{parseFloat(item.unit_price * item.quantity).toFixed(2)}</p>
                                    </div>
                                </div>
                            ))}
                            {cart.length === 0 && (
                                <div className="h-full flex flex-col items-center justify-center text-gray-300 gap-3 opacity-50 pt-10">
                                    <ShoppingCart size={40} />
                                    <p className="text-[10px] font-black uppercase tracking-[0.2em]">Order is empty</p>
                                </div>
                            )}
                        </div>

                        <div className="pt-5 border-t border-gray-100 space-y-4">
                            <div className="space-y-2.5">
                                <div className="flex items-center justify-between px-1">
                                    <p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Sub-Total</p>
                                    <p className="text-xs font-black text-gray-900">{subtotal.toFixed(2)} AED</p>
                                </div>
                                <div className="flex items-center justify-between px-1">
                                    <div className="flex items-center gap-1">
                                        <p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">VAT</p>
                                        <span className="px-1.5 py-0.5 bg-red-50 text-red-500 rounded text-[9px] font-black">5%</span>
                                    </div>
                                    <p className="text-xs font-black text-gray-900">{vatAmount.toFixed(2)} AED</p>
                                </div>
                                <div className="flex items-center justify-between pt-2 pb-1 px-1 border-t border-dashed border-gray-200">
                                    <p className="text-[11px] font-black text-emerald-600 uppercase tracking-widest">Total Amount</p>
                                    <p className="text-sm font-black text-emerald-600">{totalWithVat.toFixed(2)} AED</p>
                                </div>
                                <div className="space-y-1 pt-1">
                                    <label className="text-[9px] font-black text-red-500 uppercase tracking-[0.15rem] block ml-1">Adjusted Total</label>
                                    <div className="relative group">
                                        <input 
                                            type="number"
                                            step="0.01"
                                            value={adjustedTotal}
                                            onChange={(e) => setAdjustedTotal(e.target.value)}
                                            className="w-full bg-white border-2 border-red-50 py-1.5 px-3 rounded-lg text-sm font-black text-gray-900 focus:outline-none focus:border-red-200 transition-all shadow-inner"
                                        />
                                        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[9px] font-black text-gray-400 uppercase tracking-widest">AED</span>
                                    </div>
                                </div>
                                
                                {parseFloat(adjustedTotal) !== totalWithVat && (
                                    <div className="space-y-1 animate-in slide-in-from-top-2 duration-300">
                                        <label className="text-[8px] font-black text-amber-500 uppercase tracking-widest block ml-1">Adjustment Remarks *</label>
                                        <textarea 
                                            rows="1"
                                            placeholder="Why is adjusted?"
                                            value={adjustmentRemarks}
                                            onChange={(e) => setAdjustmentRemarks(e.target.value)}
                                            className="w-full bg-amber-50/30 border border-amber-100 py-1.5 px-3 rounded-lg text-xs font-bold text-gray-900 focus:outline-none focus:border-amber-300 transition-all resize-none shadow-sm min-h-[40px]"
                                        />
                                    </div>
                                )}
                            </div>

                            <div className="grid grid-cols-3 gap-1.5 pt-1">
                                {paymentMethods.map(method => (
                                    <button
                                        key={method.id}
                                        type="button"
                                        onClick={() => setPaymentMethod(method.name)}
                                        className={`py-1.5 px-1 rounded-lg flex flex-col items-center gap-1 border transition-all ${
                                            paymentMethod === method.name 
                                            ? 'bg-red-500 border-red-500 text-white shadow-md shadow-red-100' 
                                            : 'bg-white border-gray-100 text-gray-400 hover:border-red-200'
                                        }`}
                                    >
                                        <div className="scale-75">
                                            {method.name.toLowerCase().includes('cash') && <Banknote size={14} />}
                                            {method.name.toLowerCase().includes('card') && <CreditCard size={14} />}
                                            {!method.name.toLowerCase().includes('cash') && !method.name.toLowerCase().includes('card') && <Globe size={14} />}
                                        </div>
                                        <span className="text-[8px] font-black uppercase tracking-tight leading-none">{method.name}</span>
                                    </button>
                                ))}
                                {paymentMethods.length === 0 && (
                                    ['Cash', 'Card', 'Online'].map(method => (
                                        <button
                                            key={method}
                                            type="button"
                                            onClick={() => setPaymentMethod(method)}
                                            className={`py-1.5 px-1 rounded-lg flex flex-col items-center gap-1 border transition-all ${
                                                paymentMethod === method 
                                                ? 'bg-red-500 border-red-500 text-white shadow-md shadow-red-100' 
                                                : 'bg-white border-gray-100 text-gray-400 hover:border-red-200'
                                            }`}
                                        >
                                            <span className="text-[8px] font-black uppercase tracking-tight leading-none">{method}</span>
                                        </button>
                                    ))
                                )}
                            </div>

                            <button
                                disabled={cart.length === 0 || loading || (parseFloat(adjustedTotal) !== totalWithVat && !adjustmentRemarks.trim())}
                                onClick={handleSubmit}
                                className="w-full py-2.5 mt-2 rounded-lg font-black uppercase tracking-[0.15em] text-[10px] text-white shadow-lg transition-all flex items-center justify-center gap-2 active:scale-95 ${
                                    success ? 'bg-emerald-500 shadow-emerald-200' : 'bg-[#EF4444] hover:bg-red-600 shadow-red-200'
                                } disabled:opacity-50 disabled:scale-100 disabled:shadow-none"
                            >
                                {loading ? 'Processing...' : 'Process Payment'}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}