import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import { Loader2, Package, GitBranch, MessageSquare, Plus, User, CheckCircle, XCircle, ArrowRight, CornerDownRight, LogIn, Upload, List, Trash2, LogOut, Divide, AlertTriangle, Edit, UserX, UserCheck, LayoutDashboard, CornerLeftUp, Download } from 'lucide-react';

// --- GLOBAL VARIABLES & SUPABASE SETUP (Mandatory) ---

// NOTE: These variables are provided by the canvas environment.
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-system-distributor-app';
const firebaseConfig = JSON.parse(typeof __firebase_config !== 'undefined' ? __firebase_config : '{}');
const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : 'c2d09bc0-1679-4797-80c0-2ae12e5d3bc7'; 

// Supabase configuration
const SUPABASE_URL = 'https://yfsmflvrgqwongywmagc.supabase.co';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inlmc21mbHZyZ3F3b25neXdtYWdjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjA1OTM4OTcsImV4cCI6MjA3NjE2OTg5N30.8lmYd5Zvzq7iPEUL5u1Ai0gjhZzVcgz_PpD3ofP-3C8'; 

// Global variable to hold the initialized Supabase client
let supabaseGlobal = null;

// Global flag for XLSX loading
let isXLSXReady = false; 

// --- CONSTANTS & CORE UTILITIES ---

const STATUSES = {
    PENDING: 'Pending',
    OK: 'Collected Done',
    PARTIAL: 'Partial Collected',
    NOT_FOUND: 'Not Found',
    REDIRECTED: 'Redirected',
};

const COLLECTED_QTY_KEY = 'collectedQuantity'; // Key for the collected quantity in item object

const formatTime = (timestamp) => {
    if (!timestamp) return '...';
    const date = typeof timestamp === 'string' ? new Date(timestamp) : (timestamp.toDate ? timestamp.toDate() : new Date(timestamp));
    return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
};

// Loading component
const LoadingSpinner = () => (
    <div className="flex justify-center items-center h-full min-h-64">
        <Loader2 className="w-8 h-8 animate-spin text-indigo-500" />
        <span className="ml-2 text-indigo-500 font-medium">Loading Data...</span>
    </div>
);

// Supabase hook for fetching collection data - MODIFIED FOR SMOOTH UPSERT UPDATES
const useSupabaseCollection = (supabaseClient, tableName, dependencies = []) => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);

    // New internal function to handle local state update smoothly
    const handleLocalUpdate = useCallback((newRecord, type) => {
        setData(prevData => {
            const index = prevData.findIndex(item => item.id === newRecord.id);

            if (type === 'INSERT') {
                if (index === -1) {
                     // Add new record to the start (assuming descending order by time)
                    return [newRecord, ...prevData];
                }
                // If the record exists (e.g., from a quick local update), update it
                return prevData.map(item => item.id === newRecord.id ? newRecord : item);

            } else if (type === 'UPDATE') {
                if (index !== -1) {
                    // Update existing record in place
                    return prevData.map(item => item.id === newRecord.id ? newRecord : item);
                }
            } else if (type === 'DELETE') {
                return prevData.filter(item => item.id !== newRecord.id);
            }
            return prevData;
        });
    }, []);


    const fetchData = useCallback(async () => {
        if (!supabaseClient) return;
        setLoading(true);
        const { data: initialData, error } = await supabaseClient
            .from(tableName)
            .select('*')
            .order('createdAt', { ascending: false });
        if (error) {
            console.error(`Error fetching initial ${tableName}:`, error);
        } else {
            setData(initialData || []);
        }
        setLoading(false);
    }, [supabaseClient, tableName]);

    useEffect(() => {
        fetchData();

        const handleRealtimePayload = (payload) => {
            console.log(`DEBUG: Real-time ${payload.eventType} detected in ${tableName}.`);
            // Use the smooth local update handler
            handleLocalUpdate(payload.new || payload.old, payload.eventType);
        };


        // Setup real-time listener for ALL changes
        const channel = supabaseClient?.channel(`public:${tableName}-changes`).on(
            'postgres_changes',
            { event: '*', schema: 'public', table: tableName },
            handleRealtimePayload
        ).subscribe((status) => {
            if (status === 'SUBSCRIBED') {
                console.log(`DEBUG: Subscribed to Real-time channel for ${tableName}. RLS and replication must be enabled.`);
            } else if (status === 'CHANNEL_ERROR') {
                console.error(`DEBUG: Error subscribing to Real-time channel for ${tableName}. Attempting full refetch.`);
                fetchData(); // Fallback to full fetch if channel errors
            }
        });

        return () => {
            if (channel) {
                console.log(`DEBUG: Unsubscribing from Real-time channel for ${tableName}.`);
                channel.unsubscribe();
            }
        };
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [supabaseClient, tableName, handleLocalUpdate, ...dependencies]);

    // Return the local update function for external (manual update) use
    return { data, loading, refetch: fetchData, handleLocalUpdate };
};

// Supabase hook for fetching chat messages (Uses standard real-time insert logic which is fast)
const useSupabaseChat = (supabaseClient, chatId) => {
    const [messages, setMessages] = useState([]);
    const [loading, setLoading] = useState(true);

    const fetchData = useCallback(async () => {
        if (!supabaseClient || !chatId) return;
        setLoading(true);
        const { data: initialData, error } = await supabaseClient
            .from('chats')
            .select('messages, createdAt') 
            .eq('chatId', chatId)
            .order('createdAt', { ascending: true });
        
        if (error) {
            console.error(`Error fetching chat ${chatId}:`, error);
            setMessages([]);
        } else {
            setMessages(initialData || []);
        }
        setLoading(false);
    }, [supabaseClient, chatId]);


    useEffect(() => {
        fetchData();

        // Setup real-time listener for this specific chat thread
        const channel = supabaseClient?.channel(`chat_${chatId}`).on(
            'postgres_changes',
            // Listen specifically for INSERTS on the 'chats' table where chatId matches
            { event: 'INSERT', schema: 'public', table: 'chats', filter: `chatId=eq.${chatId}` },
            (payload) => {
                // Manually append the new message object for instant UI update
                setMessages(prev => [...prev, { messages: payload.new.messages, createdAt: payload.new.createdAt }]);
            }
        ).subscribe();

        return () => {
            if (channel) channel.unsubscribe();
        };
    }, [supabaseClient, chatId, fetchData]);

    return { messages, loading, setMessages }; // Return setMessages for local update
};


// --- AUTHENTICATION COMPONENT (Minimal) ---

const LoginModal = ({ onLoginSuccess, isSupabaseReady }) => {
    const [name, setName] = useState('');
    const [status, setStatus] = useState(null); // null, 'loading', 'error'

    const handleLogin = async (e) => {
        e.preventDefault();
        const trimmedName = name.trim();
        if (!trimmedName || typeof supabaseGlobal === 'undefined') return;

        setStatus('loading');
        try {
            const { data: userData, error: fetchError } = await supabaseGlobal
                .from('users')
                .select('*')
                .eq('name', trimmedName)
                .single();
            
            let profile;

            if (fetchError && fetchError.code === 'PGRST116') {
                setStatus('error');
                return;
            } else if (fetchError) {
                throw fetchError;
            } else {
                profile = userData;
            }

            if (profile.role !== 'admin') {
                setStatus('error');
                return;
            }

            onLoginSuccess({
                userId: profile.id,
                userName: profile.name,
                role: profile.role,
                branchId: profile.branchId,
            });
            setStatus(null);
            
        } catch (error) {
            console.error("Login Error:", error);
            setStatus('error');
        }
    };

    if (!isSupabaseReady) {
        return (
            <div className="fixed inset-0 bg-gray-900 bg-opacity-90 z-[100] flex justify-center items-center">
                 <div className="p-6 bg-white rounded-xl shadow-2xl w-full max-w-sm text-center">
                    <LoadingSpinner />
                    <p className="mt-4 text-sm text-gray-600">Connecting to Supabase...</p>
                 </div>
            </div>
        );
    }

    return (
        <div className="fixed inset-0 bg-gray-900 bg-opacity-90 z-[100] flex justify-center items-center p-4">
            <div className="p-8 bg-white rounded-xl shadow-2xl w-full max-w-sm">
                <div className="text-center mb-6">
                    <LogIn className="w-10 h-10 text-indigo-600 mx-auto mb-3" />
                    <h2 className="text-2xl font-bold text-gray-800">Order Management Login</h2>
                    <p className="text-sm text-gray-500">Enter your **Admin Username** to access the panel.</p>
                </div>
                
                <form onSubmit={handleLogin} className="space-y-4">
                    <input
                        type="text"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                        placeholder="Admin Username (e.g., Elwakeel Admin)"
                        className="w-full p-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
                        required
                        disabled={status === 'loading'}
                    />
                    
                    <button
                        type="submit"
                        className="w-full p-3 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition duration-150 shadow-md flex items-center justify-center"
                        disabled={status === 'loading'}
                    >
                        {status === 'loading' ? (
                            <Loader2 className="w-5 h-5 animate-spin mr-2" />
                        ) : (
                            <LogIn className="w-5 h-5 mr-2" />
                        )}
                        {status === 'loading' ? 'Authenticating...' : 'Log In'}
                    </button>
                </form>

                {status === 'error' && (
                    <p className="mt-4 text-sm text-red-600 p-2 bg-red-100 rounded-lg">
                        Login failed. Invalid username or user is not an admin.
                    </p>
                )}
                <p className="mt-4 text-xs text-gray-400 text-center">
                    **Admin Test Username: Elwakeel Admin**
                </p>
            </div>
        </div>
    );
};

// --- CORE ORDER MANAGEMENT COMPONENTS ---

const OrderChatModal = ({ order, item, onClose, currentUser }) => {
    const { messages: chatMessages, loading: loadingChat, setMessages } = useSupabaseChat(supabaseGlobal, item.chatId);
    
    const [newMessage, setNewMessage] = useState('');
    const [sendingStatus, setSendingStatus] = useState(null); // 'sending', 'error'
    const messagesEndRef = useRef(null);

    const scrollToBottom = () => {
        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
    };

    useEffect(scrollToBottom, [chatMessages]);
    
    const getSenderInfo = (messageText) => {
        const text = String(messageText);
        if (text.startsWith('Branch:')) {
            return { name: 'Branch', isSelf: false, color: 'text-gray-800', bgColor: 'bg-gray-200' };
        }
        return { name: currentUser.userName || 'Admin', isSelf: true, color: 'text-white', bgColor: 'bg-indigo-500' };
    }

    const handleSend = async (e) => {
        e.preventDefault();
        const text = newMessage.trim();
        if (text === '' || typeof supabaseGlobal === 'undefined' || sendingStatus === 'sending') return;

        setSendingStatus('sending');
        
        try {
            const messagePayload = {
                chatId: String(item.chatId), 
                messages: `Admin: ${text}`, 
                orderId: String(order.id),
                itemId: String(item.itemId),
                createdAt: new Date().toISOString(),
            };

            const { error } = await supabaseGlobal.from('chats').insert([messagePayload]);

            if (error) throw error;

            setMessages(prev => [...prev, { messages: messagePayload.messages, createdAt: messagePayload.createdAt }]);
            
            setNewMessage('');
            setSendingStatus(null);
        } catch (error) {
            console.error("Error sending message:", error);
            console.error("DEBUG: Failed payload:", { chatId: String(item.chatId), orderId: String(order.id), itemId: String(item.itemId) }); 
            setSendingStatus('error');
            setTimeout(() => setSendingStatus(null), 2000);
        }
    };

    return (
        <div className="fixed inset-0 bg-gray-900 bg-opacity-75 z-[101] flex justify-center items-center p-4">
            <div className="bg-white rounded-xl shadow-2xl w-full max-w-lg p-6 flex flex-col h-full max-h-[80vh]">
                <h2 className="text-xl font-bold mb-4 text-indigo-700 flex items-center border-b pb-2">
                    <MessageSquare className="w-5 h-5 mr-2" /> Chat: {item.itemId} (Order ID: {String(order.id).substring(0, 8)}...)
                </h2>
                {/* FINAL WARNING/INSTRUCTION FOR THE USER */}
                <div className="p-2 text-xs bg-red-100 text-red-700 rounded-lg mb-2">
                    **IMPORTANT WARNING:** If "duplicate key value" error appears on sending, you must **REMOVE the Unique Constraint** on the `chatId` column in the Supabase `chats` table.
                </div>


                {/* Messages Area */}
                <div className="flex-1 overflow-y-auto space-y-3 p-2 border border-gray-200 rounded-lg bg-gray-50 mb-4">
                    {loadingChat ? (
                        <LoadingSpinner />
                    ) : chatMessages.length === 0 ? (
                        <div className="text-center text-gray-500 p-4">No previous messages. Start the conversation.</div>
                    ) : (
                        chatMessages.map((msg, index) => {
                            const senderInfo = getSenderInfo(msg.messages);
                            const displayedText = String(msg.messages).replace(/^(Admin|Branch): /i, '');
                            return (
                                <div key={index} className={`flex ${senderInfo.isSelf ? 'justify-end' : 'justify-start'}`}>
                                    <div className={`max-w-[75%] p-2 rounded-lg text-sm shadow-md ${senderInfo.bgColor} ${senderInfo.color}`}>
                                        <p className="font-semibold text-xs mb-1">{senderInfo.name}</p>
                                        <p>{displayedText}</p>
                                        <span className="block text-right text-xs opacity-70 mt-1">{formatTime(msg.createdAt)}</span>
                                    </div>
                                </div>
                            );
                        })
                    )}
                    <div ref={messagesEndRef} />
                </div>

                {/* Input Area */}
                <form onSubmit={handleSend} className="flex space-x-3">
                    <input
                        type="text"
                        value={newMessage}
                        onChange={(e) => setNewMessage(e.target.value)}
                        placeholder="Type your message..."
                        className="flex-1 p-2 border rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
                        required
                        disabled={sendingStatus === 'sending'}
                    />
                    <button 
                        type="submit" 
                        className="p-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-150 flex items-center"
                        disabled={sendingStatus === 'sending'}
                    >
                        {sendingStatus === 'sending' ? (
                            <Loader2 className="w-5 h-5 animate-spin" />
                        ) : (
                            <ArrowRight className="w-5 h-5" />
                        )}
                    </button>
                </form>
                {sendingStatus === 'error' && <p className="mt-2 text-sm text-red-600">Error occurred during sending. **Please check column types in Chats table**.</p>}

                <button onClick={onClose} className="mt-4 p-2 bg-gray-300 text-gray-800 rounded-lg hover:bg-gray-400 transition duration-150 font-semibold">
                    Close Chat
                </button>
            </div>
        </div>
    );
};

// New sub-component for handling collected quantity input
const QuantityInputModal = ({ item, maxQty, onConfirm, onCancel }) => {
    const [collected, setCollected] = useState(item[COLLECTED_QTY_KEY] || maxQty);

    const handleConfirm = () => {
        const qty = parseInt(collected, 10);
        if (qty >= 0 && qty <= maxQty) {
            onConfirm(qty);
        }
    };

    return (
        <div className="fixed inset-0 bg-gray-900 bg-opacity-75 z-[102] flex justify-center items-center p-4">
            <div className="bg-white rounded-xl shadow-2xl w-full max-w-sm p-6">
                <h3 className="text-xl font-bold mb-4 text-indigo-700">Enter Collected Quantity</h3>
                <p className="mb-3 text-gray-600">Item: {item.itemId} (Requested: {maxQty})</p>
                <input
                    type="number"
                    value={collected}
                    onChange={(e) => setCollected(e.target.value)}
                    min="0"
                    max={maxQty}
                    placeholder="Collected Quantity"
                    className="w-full p-3 border rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
                    required
                />
                <div className="flex justify-end space-x-3 mt-4">
                    <button onClick={onCancel} className="p-3 bg-gray-300 rounded-lg font-semibold hover:bg-gray-400">Cancel</button>
                    <button onClick={handleConfirm} className="p-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700" disabled={collected < 0 || collected > maxQty}>Confirm</button>
                </div>
            </div>
        </div>
    );
};


const OrderDetailsModal = ({ order, branches, onClose, onUpdateItemStatus, currentUser, onRefetchOrder }) => {
    const branch = branches.find(b => b.id === order.branchId);
    const [status, setStatus] = useState(null); // 'loading', 'success', 'error'
    const [chatTarget, setChatTarget] = useState(null); // { order, item }
    const [qtyModalTarget, setQtyModalTarget] = useState(null); // { itemIndex, newStatus, maxQty }

    const openQtyModal = useCallback((itemIndex, newStatus, maxQty) => {
        setQtyModalTarget({ itemIndex, newStatus, maxQty });
    }, []);

    const handleQtyConfirm = useCallback((collectedQty) => {
        const { itemIndex, newStatus, maxQty } = qtyModalTarget;
        setQtyModalTarget(null); // Close modal
        
        // Handle logic for status based on collected quantity
        let finalStatus = newStatus;
        if (collectedQty > 0 && collectedQty < maxQty) {
            finalStatus = STATUSES.PARTIAL;
        } else if (collectedQty === maxQty) {
            finalStatus = STATUSES.OK;
        } else if (collectedQty === 0) {
             finalStatus = STATUSES.NOT_FOUND;
        }

        updateSingleItemStatus(itemIndex, finalStatus, collectedQty);
    }, [qtyModalTarget]);


    const updateSingleItemStatus = async (itemIndex, newStatus, collectedQty = 0) => {
        const newItems = [...order.items];
        
        // Augment item with collected quantity based on status
        const itemToUpdate = newItems[itemIndex];
        
        if (newStatus === STATUSES.OK) {
            itemToUpdate.status = newStatus;
            itemToUpdate[COLLECTED_QTY_KEY] = itemToUpdate.quantity;
        } else if (newStatus === STATUSES.PENDING || newStatus === STATUSES.REDIRECTED || newStatus === STATUSES.NOT_FOUND) {
            itemToUpdate.status = newStatus;
            itemToUpdate[COLLECTED_QTY_KEY] = collectedQty; // Should be 0 for these, but uses passed value
        } else if (newStatus === STATUSES.PARTIAL) {
            itemToUpdate.status = newStatus;
            itemToUpdate[COLLECTED_QTY_KEY] = collectedQty;
        }


        // Override status logic if quantity was provided via modal
        if (collectedQty !== undefined) {
             // Logic to set final status based on collectedQty, ensuring consistency
             if (collectedQty === itemToUpdate.quantity) itemToUpdate.status = STATUSES.OK;
             else if (collectedQty > 0) itemToUpdate.status = STATUSES.PARTIAL;
             else if (collectedQty === 0) itemToUpdate.status = STATUSES.NOT_FOUND;
        }


        setStatus('loading');

        try {
            // Step 1: Prepare the update object and send to DB
            const allOk = newItems.every(item => item.status === STATUSES.OK);
            const hasMixed = newItems.some(item => item.status !== STATUSES.OK && item.status !== STATUSES.PENDING);
            // Allow editing status at any time, but use item statuses to calculate overall status
            const orderStatus = allOk ? 'Closed' : hasMixed ? 'Partial' : 'Open';

            const updatePayload = {
                items: newItems,
                status: orderStatus,
                // Do not update order.status here, allow the user to manage it via the select menu
            };

            const { data: updatedOrders, error } = await supabaseGlobal.from('orders').update(updatePayload).eq('id', order.id).select().single();

            if (error) throw error;
            
            // Step 2 (Defensive Update): Manually update the local state in the main component
            onUpdateItemStatus(order.id, updatedOrders);

            setStatus('success');
            setTimeout(() => setStatus(null), 1000);
        } catch (error) {
            console.error("Update Item Status Error:", error);
            setStatus('error');
        }
    };
    
    // Handler for overall order status update (top of modal)
    const handleOverallStatusUpdate = async (newStatus) => {
        setStatus('loading');
        try {
            const { data: updatedOrders, error } = await supabaseGlobal.from('orders').update({ status: newStatus }).eq('id', order.id).select().single();

            if (error) throw error;
            onUpdateItemStatus(order.id, updatedOrders); 
            setStatus('success');
            setTimeout(() => setStatus(null), 1000);
        } catch (error) {
            console.error("Update Overall Status Error:", error);
            setStatus('error');
        }
    }


    return (
        <div className="fixed inset-0 bg-gray-900 bg-opacity-75 z-[101] flex justify-center items-center p-4">
            <div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl p-6">
                <h2 className="text-2xl font-bold mb-4 text-indigo-700 flex items-center">
                    <List className="w-6 h-6 mr-2" /> Order Details (ID: {String(order.id).substring(0, 8)}...)
                </h2>
                
                {/* Order Status Edit (Requested Feature) */}
                <div className="flex justify-between items-center mb-4 border-b pb-2">
                     <p className="text-gray-600">
                        <span className="font-semibold">Branch:</span> {branch?.name || 'N/A'} | <span className="font-semibold">Created Date:</span> {new Date(order.createdAt).toLocaleDateString()}
                    </p>
                    <div className="flex items-center space-x-2">
                        <span className='text-sm font-medium text-gray-700'>Overall Status:</span>
                        <select 
                            value={order.status}
                            onChange={(e) => handleOverallStatusUpdate(e.target.value)}
                            className={`p-1 text-sm rounded-lg border-2 font-semibold bg-white border-indigo-400`}
                            disabled={status === 'loading'}
                        >
                             {['Open', 'Partial', 'Closed'].map(s => (
                                <option key={s} value={s}>{s}</option>
                            ))}
                        </select>
                    </div>
                </div>


                <div className="max-h-96 overflow-y-auto space-y-3 pr-2">
                    {order.items.map((item, index) => {
                        const maxQty = item.quantity;
                        const collected = item[COLLECTED_QTY_KEY] || 0;
                        const remaining = maxQty - collected;

                        return (
                            <div key={item.chatId} className="p-3 bg-gray-50 border border-gray-200 rounded-lg flex flex-col sm:flex-row justify-between items-start sm:items-center">
                                <div className='flex-1 mb-2 sm:mb-0'>
                                    <span className="font-bold text-indigo-800 mr-2 block sm:inline">{item.itemId}</span>
                                    <span className="text-gray-700 block sm:inline">Req: {maxQty} | Collected: {collected} | Rem: {remaining}</span>
                                    <div className='mt-1 text-xs text-gray-500 italic'>
                                        {item.description}
                                    </div>
                                </div>
                                <div className='flex items-center space-x-2'>
                                    {/* Status Update Dropdown */}
                                    <select
                                        value={item.status}
                                        onChange={(e) => {
                                            const newStatus = e.target.value;
                                            if (newStatus === STATUSES.OK || newStatus === STATUSES.PARTIAL) {
                                                // Prompt for quantity if collected or partial
                                                openQtyModal(index, newStatus, maxQty);
                                            } else {
                                                // For other statuses (Pending, Not Found, Redirected), set collected to 0
                                                updateSingleItemStatus(index, newStatus, 0);
                                            }
                                        }}
                                        className={`p-1 text-sm rounded-lg border-2 font-semibold ${item.status === STATUSES.OK ? 'bg-emerald-100 text-emerald-800 border-emerald-300' :
                                            item.status === STATUSES.PENDING ? 'bg-yellow-100 text-yellow-800 border-yellow-300' :
                                                item.status === STATUSES.NOT_FOUND ? 'bg-red-100 text-red-800 border-red-300' :
                                                    'bg-gray-100 text-gray-700 border-gray-300'
                                            }`}
                                        disabled={status === 'loading'}
                                    >
                                        {Object.values(STATUSES).map(s => (
                                            <option key={s} value={s}>{s}</option>
                                        ))}
                                    </select>

                                    {/* Chat Button */}
                                    <button
                                        onClick={() => setChatTarget({ order, item })}
                                        className="p-1 bg-indigo-100 text-indigo-700 rounded-full hover:bg-indigo-200 transition duration-150"
                                        title="Open Chat for Item"
                                    >
                                        <MessageSquare className="w-4 h-4" />
                                        {item.unreadByAdmin > 0 && <span className="absolute -top-1 -right-1 h-2 w-2 bg-red-500 rounded-full border border-white"></span>}
                                    </button>
                                </div>
                            </div>
                        );
                    })}
                </div>

                {status === 'success' && <p className="mt-3 text-sm text-emerald-600 flex items-center"><CheckCircle className='w-4 h-4 mr-1' /> Item status updated successfully!</p>}
                {status === 'error' && <p className="mt-3 text-sm text-red-600 flex items-center"><XCircle className='w-4 h-4 mr-1' /> Error updating item status.</p>}

                <button onClick={onClose} className="w-full mt-6 p-3 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition duration-150 shadow-md">
                    Close Details
                </button>
            </div>
            {qtyModalTarget && (
                <QuantityInputModal
                    item={order.items[qtyModalTarget.itemIndex]}
                    maxQty={qtyModalTarget.maxQty}
                    onConfirm={handleQtyConfirm}
                    onCancel={() => setQtyModalTarget(null)}
                />
            )}
        </div>
    );
};

// Component for Multi-Select Dropdown
const MultiSelectDropdown = ({ options, selectedValues, onSelectChange, label }) => {
    const [isOpen, setIsOpen] = useState(false);
    const wrapperRef = useRef(null);

    const handleToggle = (value) => {
        onSelectChange(prev => {
            if (prev.includes(value)) {
                return prev.filter(v => v !== value);
            } else {
                return [...prev, value];
            }
        });
    };

    // Close dropdown on outside click
    useEffect(() => {
        function handleClickOutside(event) {
            if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
                setIsOpen(false);
            }
        }
        document.addEventListener("mousedown", handleClickOutside);
        return () => document.removeEventListener("mousedown", handleClickOutside);
    }, [wrapperRef]);

    const displayLabel = selectedValues.length === 0 
        ? label 
        : selectedValues.length === options.length
            ? 'All'
            : `${selectedValues.length} Selected`;

    return (
        <div className="relative" ref={wrapperRef}>
            <button 
                type="button"
                onClick={() => setIsOpen(!isOpen)}
                className="w-full p-2 border rounded-lg bg-white text-sm text-left focus:ring-indigo-500 focus:border-indigo-500 flex justify-between items-center"
            >
                {displayLabel}
                <span className="text-gray-500 text-xs">▼</span>
            </button>
            {isOpen && (
                <div className="absolute z-20 mt-1 w-full bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                    {options.map(option => (
                        <label key={option.value} className="flex items-center p-2 hover:bg-indigo-50 cursor-pointer text-sm">
                            <input
                                type="checkbox"
                                checked={selectedValues.includes(option.value)}
                                onChange={() => handleToggle(option.value)}
                                className="mr-2 rounded text-indigo-600 focus:ring-indigo-500"
                            />
                            {option.label}
                        </label>
                    ))}
                </div>
            )}
        </div>
    );
};


// Main dashboard component
const OrderManager = ({ orders, branches, currentUser, onUpdateOrderStatus, onUpdateItemStatus, refetchOrders }) => {
    const [selectedBranches, setSelectedBranches] = useState([]);
    const [statusFilter, setStatusFilter] = useState('all');
    // FIX: Added useState for editingOrder
    const [editingOrder, setEditingOrder] = useState(null); 

    // --- Data Processing ---
    
    // Ensure XLSX is available for export
    const isXLSXModuleReady = useMemo(() => typeof window.XLSX !== 'undefined', []);

    // Load XLSX if not ready (Defensive measure)
    useEffect(() => {
        if (!isXLSXModuleReady) {
            const script = document.createElement('script');
            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js';
            script.onload = () => { isXLSXReady = true; }; // Set global flag
            document.head.appendChild(script);
        }
    }, [isXLSXModuleReady]);


    // Filtered orders list
    const filteredOrders = useMemo(() => {
        return orders.filter(order => {
            const branchMatch = selectedBranches.length === 0 || selectedBranches.includes(String(order.branchId));
            const statusMatch = statusFilter === 'all' || order.status === statusFilter;
            return branchMatch && statusMatch;
        }).sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
    }, [orders, selectedBranches, statusFilter]);
    
    // Summary Calculation
    const summary = useMemo(() => {
        let totalQty = 0;
        let collectedQty = 0;
        
        filteredOrders.forEach(order => {
            order.items?.forEach(item => {
                totalQty += item.quantity || 0;
                collectedQty += item[COLLECTED_QTY_KEY] || 0;
            });
        });
        
        return {
            totalQty,
            collectedQty,
            remainingQty: totalQty - collectedQty,
        };
    }, [filteredOrders]);


    const branchOptions = useMemo(() => {
        return branches.map(b => ({ value: String(b.id), label: b.name }));
    }, [branches]);

    const statusOptions = ['all', 'Open', 'Partial', 'Closed'];
    
    // --- Export to Excel Function ---
    const handleExport = () => {
        if (!window.XLSX) {
            console.error("XLSX module is not loaded.");
            return;
        }

        const data = filteredOrders.flatMap(order => {
            const branchName = branches.find(b => b.id === order.branchId)?.name || 'Unknown';
            return order.items.map(item => {
                const requested = item.quantity || 0;
                const collected = item[COLLECTED_QTY_KEY] || 0;
                const percentage = requested > 0 ? (collected / requested) : 0;
                
                return {
                    'Order ID': String(order.id).substring(0, 8),
                    'Branch': branchName,
                    'Order Status': order.status,
                    'Created Date': new Date(order.createdAt).toLocaleDateString(),
                    'Item ID': item.itemId,
                    'Description': item.description,
                    'Requested QTY': requested,
                    'Collected QTY': collected,
                    'Remaining QTY': requested - collected,
                    'Collected %': (percentage * 100).toFixed(2) + '%',
                    'Item Status': item.status,
                    'Chat ID': item.chatId,
                };
            });
        });

        if (data.length === 0) {
            console.warn("No data to export.");
            return;
        }

        const worksheet = window.XLSX.utils.json_to_sheet(data);
        const workbook = window.XLSX.utils.book_new();
        window.XLSX.utils.book_append_sheet(workbook, worksheet, "Orders Report");
        window.XLSX.writeFile(workbook, `Order_Management_Report_${new Date().toISOString().substring(0, 10)}.xlsx`);
    };
    // --- End Export Function ---
    
    // Render
    return (
        <div className="p-6 bg-white rounded-xl shadow-lg">
            <h3 className="text-2xl font-bold mb-4 text-indigo-700 flex items-center"><Package className="w-6 h-6 mr-2" /> All Orders Management</h3>

            {/* Summary Dashboard */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                <div className="p-4 bg-indigo-100 rounded-lg shadow-sm">
                    <p className="text-sm font-medium text-indigo-700">Total Requested QTY (Filtered)</p>
                    <p className="text-2xl font-bold text-indigo-900">{summary.totalQty}</p>
                </div>
                <div className="p-4 bg-emerald-100 rounded-lg shadow-sm">
                    <p className="text-sm font-medium text-emerald-700">Total Collected QTY (Filtered)</p>
                    <p className="text-2xl font-bold text-emerald-900">{summary.collectedQty}</p>
                </div>
                <div className="p-4 bg-red-100 rounded-lg shadow-sm">
                    <p className="text-sm font-medium text-red-700">Total Remaining QTY (Filtered)</p>
                    <p className="text-2xl font-bold text-red-900">{summary.remainingQty}</p>
                </div>
            </div>

            {/* Filters and Export */}
            <div className="flex flex-wrap items-end gap-4 mb-4 p-3 bg-gray-50 rounded-lg border border-gray-200">
                <div className='flex-1 min-w-[200px]'>
                    <label className="block text-sm font-medium text-gray-700">Filter by Branch (Multi-Select):</label>
                    <MultiSelectDropdown
                        options={branchOptions}
                        selectedValues={selectedBranches}
                        onSelectChange={setSelectedBranches}
                        label="Select Branches"
                    />
                </div>
                <div className='flex-1 min-w-[150px]'>
                    <label className="block text-sm font-medium text-gray-700">Filter by Status:</label>
                    <select 
                        value={statusFilter} 
                        onChange={(e) => setStatusFilter(e.target.value)} 
                        className="mt-1 block w-full p-2 border rounded-lg bg-white text-sm"
                    >
                        {statusOptions.map(s => (
                            <option key={s} value={s}>{s}</option>
                        ))}
                    </select>
                </div>
                
                <div className='flex-1 min-w-[150px] self-end'>
                    <button
                        onClick={handleExport}
                        disabled={!isXLSXModuleReady || filteredOrders.length === 0}
                        className="w-full p-2 bg-emerald-500 text-white font-semibold rounded-lg hover:bg-emerald-600 transition duration-150 shadow-md flex items-center justify-center disabled:bg-gray-400"
                    >
                        {isXLSXModuleReady ? (
                             <><Download className='w-4 h-4 mr-2'/> Export to Excel ({filteredOrders.length})</>
                        ) : (
                            <><Loader2 className="w-4 h-4 animate-spin mr-2" /> Loading Export Tool</>
                        )}
                    </button>
                </div>
                
            </div>

            {/* Order Table/List */}
            <div className="max-h-[70vh] overflow-y-auto border rounded-xl shadow-inner">
                <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-100 sticky top-0">
                        <tr>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Branch</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Items (Collected %)</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Overall Status</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created Date</th>
                            <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                        {filteredOrders.length === 0 ? (
                            <tr>
                                <td colSpan="6" className="p-6 text-center text-gray-500">No orders match the current criteria.</td>
                            </tr>
                        ) : (
                            filteredOrders.map(order => {
                                const branchName = branches.find(b => b.id === order.branchId)?.name || 'Unknown Branch';
                                const totalItems = order.items?.length || 0;
                                const requestedQty = order.items?.reduce((sum, item) => sum + (item.quantity || 0), 0) || 0;
                                const collectedQty = order.items?.reduce((sum, item) => sum + (item[COLLECTED_QTY_KEY] || 0), 0) || 0;
                                const collectionPercentage = requestedQty > 0 ? (collectedQty / requestedQty) * 100 : 0;
                                const hasUnread = order.items?.some(i => i.unreadByAdmin > 0) || false;

                                return (
                                    <tr key={order.id} className="hover:bg-indigo-50 transition duration-100">
                                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">{String(order.id).substring(0, 8)}...</td>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{branchName}</td>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            {totalItems} lines ({collectionPercentage.toFixed(1)}% collected)
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap">
                                            <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${order.status === 'Closed' ? 'bg-emerald-100 text-emerald-800' :
                                                order.status === 'Open' ? 'bg-yellow-100 text-yellow-800' :
                                                    order.status === 'Partial' ? 'bg-orange-100 text-orange-800' :
                                                        'bg-gray-100 text-gray-800'
                                                }`}>
                                                {order.status}
                                            </span>
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            {new Date(order.createdAt).toLocaleDateString()}
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <div className="flex justify-end items-center space-x-2">
                                                {/* Edit Details Button */}
                                                <button
                                                    onClick={() => setEditingOrder(order)}
                                                    className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-100 transition relative"
                                                    title="View/Edit Details"
                                                >
                                                    <CornerDownRight className="w-5 h-5" />
                                                    {hasUnread && <span className="absolute top-0 right-0 h-2 w-2 bg-red-500 rounded-full border border-white"></span>}
                                                </button>

                                                {/* Status Quick Update Button */}
                                                {order.status !== 'Closed' && (
                                                    <button
                                                        onClick={() => handleQuickStatusUpdate(order.id, 'Closed')}
                                                        className="text-emerald-600 hover:text-emerald-900 p-2 rounded-full hover:bg-emerald-100 transition"
                                                        title="Mark as Closed"
                                                    >
                                                        <CheckCircle className="w-5 h-5" />
                                                    </button>
                                                )}
                                            </div>
                                        </td>
                                    </tr>
                                )
                            })
                        )}
                    </tbody>
                </table>
            </div>

            {editingOrder && (
                <OrderDetailsModal
                    order={editingOrder}
                    branches={branches}
                    currentUser={currentUser} 
                    onClose={() => setEditingOrder(null)}
                    onUpdateItemStatus={onUpdateItemStatus}
                    onRefetchOrder={refetchOrders} // Pass refetch function for manual sync if needed
                />
            )}
        </div>
    );
};

// --- MAIN STANDALONE APPLICATION COMPONENT ---

const OrderManagementStandalone = () => {
    const [currentUser, setCurrentUser] = useState(null);
    const [loading, setLoading] = useState(true);
    const [isSupabaseReady, setIsSupabaseReady] = useState(false); 

    // --- SUPABASE & XLSX CDN LOADER & INITIALIZATION ---
    useEffect(() => {
        const loadScript = (src, onloadCallback, onerrorCallback) => {
            const script = document.createElement('script');
            script.src = src;
            script.onload = onloadCallback;
            script.onerror = onerrorCallback;
            document.head.appendChild(script);
        };

        // 1. Load Supabase
        if (window.supabase && window.supabase.createClient) {
            supabaseGlobal = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
            setIsSupabaseReady(true);
        } else {
            loadScript(
                'https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2',
                () => {
                    if (window.supabase && window.supabase.createClient) {
                        supabaseGlobal = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
                        setIsSupabaseReady(true);
                    }
                },
                () => { console.error("Failed to load Supabase CDN script."); setLoading(false); }
            );
        }
    }, []);

    // --- INITIAL ADMIN CREATION & AUTH READINESS (Ensures an admin exists) ---
    useEffect(() => {
        if (!isSupabaseReady || currentUser) return;

        const checkAndCreateAdmin = async () => {
            setLoading(false);
        };
        checkAndCreateAdmin();
    }, [isSupabaseReady, currentUser]);

    // --- Data Fetching ---

    const supabaseClient = isSupabaseReady ? supabaseGlobal : null;
    
    // Fetch all branches
    const { data: branches, loading: loadingBranches } = useSupabaseCollection(supabaseClient, 'branches', [isSupabaseReady]);
    
    // Fetch all orders - now includes refetch method from the hook
    // IMPORTANT: We need access to handleLocalUpdate from the hook for defensive updates
    const { data: orders, loading: loadingOrders, refetch: refetchOrders, handleLocalUpdate } = useSupabaseCollection(supabaseClient, 'orders', [isSupabaseReady]);

    // --- Handlers ---
    const handleLoginSuccess = useCallback((user) => {
        setCurrentUser(user);
    }, []);

    const handleLogout = useCallback(() => {
        setCurrentUser(null);
    }, []);

    // Handler for overall order status update (used by quick button)
    const handleUpdateOrderStatus = async (orderId, newFields) => {
        if (typeof supabaseGlobal === 'undefined') throw new Error("Supabase not initialized.");
        // We rely on the local update function in the hook for smoothness
        const { error } = await supabaseGlobal.from('orders').update(newFields).eq('id', orderId);
        if (error) throw error;
    };

    // Handler for individual item status update (used by OrderDetailsModal)
    // This handler now receives the newly fetched single ORDER record after update
    const handleUpdateOrderItemStatus = useCallback((orderId, updatedOrderRecord) => {
        // Use the dedicated local update function from the hook
        handleLocalUpdate(updatedOrderRecord, 'UPDATE');
    }, [handleLocalUpdate]);


    const LoadingCheck = loading || loadingBranches || loadingOrders || !isSupabaseReady;

    if (LoadingCheck) {
        return <div className="min-h-screen bg-gray-100"><LoadingSpinner /></div>;
    }

    if (!currentUser) {
        return <LoginModal onLoginSuccess={handleLoginSuccess} isSupabaseReady={isSupabaseReady} />;
    }
    
    if (currentUser.role !== 'admin') {
        return (
            <div className="flex flex-col items-center justify-center p-10 min-h-screen bg-gray-50">
                <AlertTriangle className="w-12 h-12 text-red-500 mb-4" />
                <h2 className="text-2xl font-bold text-gray-800">Access Denied</h2>
                <p className="text-gray-600 mt-2">Only authenticated Admin users can view this panel.</p>
                <button onClick={handleLogout} className="mt-4 p-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition duration-150 shadow-md flex items-center text-sm font-semibold">
                    <LogOut className='w-4 h-4 mr-1' /> Logout
                </button>
            </div>
        );
    }

    return (
        <div className="p-4 sm:p-8 bg-gray-50 min-h-screen">
            {/* Header and Logout */}
            <div className="flex flex-col sm:flex-row justify-between items-center mb-8 pb-4 border-b border-indigo-200">
                <h1 className="text-3xl sm:text-4xl font-extrabold text-indigo-700 flex items-center mb-4 sm:mb-0">
                    <Package className="w-6 h-6 sm:w-8 sm:h-8 mr-3 text-indigo-500" /> All Orders Management (Standalone)
                </h1>
                <div className="flex items-center space-x-4">
                    <span className="text-sm sm:text-lg font-medium text-gray-700">Hello, {currentUser.userName}</span>
                    <button onClick={handleLogout} className="p-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition duration-150 shadow-md flex items-center text-sm font-semibold">
                        <LogOut className='w-4 h-4 mr-1' /> Logout
                    </button>
                </div>
            </div>

            {/* Main Order Manager Component */}
            <OrderManager
                orders={orders}
                branches={branches}
                currentUser={currentUser} 
                onUpdateOrderStatus={handleUpdateOrderStatus}
                onUpdateItemStatus={handleUpdateOrderItemStatus}
                refetchOrders={refetchOrders} // Pass the refetch method
            />

            <p className="text-sm text-gray-500 mt-8 text-center border-t pt-4">
                This standalone interface manages orders and branches data.
            </p>
        </div>
    );
};

export default OrderManagementStandalone;