const { useState, useEffect, useMemo, Fragment } = React;

// 在這裡補上啟動 Firebase 引擎的程式碼
if (!firebase.apps.length) {
    firebase.initializeApp(FIREBASE_CONFIG);
}

// 確保 Firebase 已經由 cs-config.js 初始化
const db = firebase.firestore();
const auth = firebase.auth();

const GlobalDialog = ({ dialog, setDialog }) => {
    if (!dialog) return null;
    return (
        <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm flex items-center justify-center z-[200] px-4">
            <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 text-center transform transition-all scale-100">
                <i className="fa-solid fa-circle-exclamation text-4xl text-indigo-500 mb-4"></i>
                <h3 className="text-lg font-bold text-gray-800 mb-2">系統提示</h3>
                <p className="text-sm text-gray-600 mb-6 whitespace-pre-line">{dialog.message}</p>
                <div className="flex justify-center gap-3">
                    <button onClick={() => setDialog(null)} className="flex-1 py-2.5 font-bold rounded-xl text-white bg-indigo-600 hover:bg-indigo-700 transition-colors">
                        確定
                    </button>
                </div>
            </div>
        </div>
    );
};

const ClaimOrders = ({ orders, currentBooster, showAlert }) => {
    const [confirmModal, setConfirmModal] = useState(null);

    const myActiveSchedules = useMemo(() => {
        const times = [];
        orders.forEach(order => {
            order.subOrders.forEach(sub => {
                if (sub.status === '待收款' || sub.status === '進行中') {
                    let isMyConfirmed = false;
                    if (sub.booster1 === currentBooster && (sub.booster1Status === 'confirmed' || !sub.booster1Status)) isMyConfirmed = true;
                    if (sub.booster2 === currentBooster && (sub.booster2Status === 'confirmed' || !sub.booster2Status)) isMyConfirmed = true;

                    if (isMyConfirmed && sub.scheduledTime) {
                        times.push(new Date(sub.scheduledTime).getTime());
                    }
                }
            });
        });
        return times;
    }, [orders, currentBooster]);

    const groupedTasksMap = {};
    
    orders.forEach(order => {
        order.subOrders.forEach(sub => {
            if (sub.status === '已結單') return;

            const isSingleBoosterTask = sub.productName.includes('技術陪玩') || sub.productName.includes('娛樂陪玩') || sub.productName.includes('一位專屬娛樂陪陪') || sub.productName.includes('技術單人陪');
            
            let isMyPending = false;
            if (sub.booster1 === currentBooster && sub.booster1Status === 'pending') isMyPending = true;
            if (!isSingleBoosterTask && sub.booster2 === currentBooster && sub.booster2Status === 'pending') isMyPending = true;

            let hasVacancy = false;
            if (sub.booster1 === '無指定') hasVacancy = true;
            if (!isSingleBoosterTask && sub.booster2 === '無指定') hasVacancy = true;

            let amIConfirmed = false;
            if (sub.booster1 === currentBooster && (sub.booster1Status === 'confirmed' || !sub.booster1Status)) amIConfirmed = true;
            if (!isSingleBoosterTask && sub.booster2 === currentBooster && (sub.booster2Status === 'confirmed' || !sub.booster2Status)) amIConfirmed = true;
            if (amIConfirmed) return;

            let didIReject = false;
            if (sub.booster1 === currentBooster && sub.booster1Status === 'rejected') didIReject = true;
            if (!isSingleBoosterTask && sub.booster2 === currentBooster && sub.booster2Status === 'rejected') didIReject = true;
            if (didIReject) return;

            if (hasVacancy || isMyPending) {
                const groupId = `${order.id}_${sub.scheduledTime}`;
                if (!groupedTasksMap[groupId]) {
                    groupedTasksMap[groupId] = {
                        id: groupId,
                        mainOrderId: order.id,
                        gameId: order.gameId,
                        scheduledTime: sub.scheduledTime,
                        paymentStatus: order.paymentStatus,
                        isMyPendingGroup: false,
                        subs: []
                    };
                }
                if (isMyPending) groupedTasksMap[groupId].isMyPendingGroup = true;
                
                groupedTasksMap[groupId].subs.push({
                    ...sub,
                    isSingleBoosterTask
                });
            }
        });
    });

    const groupedTasks = Object.values(groupedTasksMap).sort((a, b) => new Date(a.scheduledTime) - new Date(b.scheduledTime));

    const executeClaim = async () => {
        if (!confirmModal) return;
        const { mainOrderId, subOrderIds, type } = confirmModal;

        const order = orders.find(o => o.id === mainOrderId);
        if (!order) return;

        const updatedSubs = order.subOrders.map(sub => {
            if (subOrderIds.includes(sub.id)) {
                let newSub = { ...sub };
                const isSingleBoosterTask = sub.productName.includes('技術陪玩') || sub.productName.includes('娛樂陪玩') || sub.productName.includes('一位專屬娛樂陪陪') || sub.productName.includes('技術單人陪');
                
                if (type === 'reject') {
                    if (newSub.booster1 === currentBooster && newSub.booster1Status === 'pending') newSub.booster1Status = 'rejected';
                    if (!isSingleBoosterTask && newSub.booster2 === currentBooster && newSub.booster2Status === 'pending') newSub.booster2Status = 'rejected';
                } else {
                    if (newSub.booster1 === '無指定') {
                        newSub.booster1 = currentBooster;
                        newSub.booster1Status = 'confirmed';
                    } else if (newSub.booster1 === currentBooster) {
                        newSub.booster1Status = 'confirmed';
                    }
                    
                    if (!isSingleBoosterTask && newSub.booster2 === '無指定' && newSub.booster1 !== currentBooster) {
                        newSub.booster2 = currentBooster;
                        newSub.booster2Status = 'confirmed';
                    } else if (!isSingleBoosterTask && newSub.booster2 === currentBooster) {
                        newSub.booster2Status = 'confirmed';
                    }
                }
                return newSub;
            }
            return sub;
        });

        try {
            await db.collection('orders').doc(mainOrderId).update({ subOrders: updatedSubs });
        } catch(e) {
            showAlert("操作失敗: " + e.message);
        } finally {
            setConfirmModal(null);
        }
    };

    return (
        <div className="pb-24 pt-4 px-4">
            <div className="mb-4">
                <h2 className="text-xl font-black text-gray-800"><i className="fa-solid fa-hand-sparkles text-amber-500 mr-2"></i>接單大廳</h2>
                <p className="text-xs text-gray-500 mt-1">此處顯示有「無指定」空缺或「指定給您但尚未確認」的訂單。</p>
            </div>

            <div className="space-y-4">
                {groupedTasks.map(group => {
                    const isEntertainTask = group.subs.some(sub => sub.productName.includes('娛樂'));
                    const subOrderIds = group.subs.map(sub => sub.id);
                    
                    return (
                        <div key={group.id} className="bg-white rounded-2xl p-4 shadow-sm border border-amber-100 relative overflow-hidden">
                            <div className={`absolute top-0 right-0 text-white text-[10px] font-bold px-3 py-1 rounded-bl-lg shadow-sm ${group.paymentStatus === '已收款' ? 'bg-emerald-500' : 'bg-amber-500'}`}>
                                {group.paymentStatus === '已收款' ? '已收款，待處理' : '未付款，待處理'}
                            </div>
                            <div className="flex items-center gap-2 mb-2 pr-24">
                                <h3 className="text-lg font-black text-gray-800 leading-tight">
                                    派單任務 {group.subs.length > 1 && <span className="text-sm text-indigo-500 ml-1">({group.subs.length}項組合)</span>}
                                </h3>
                                {isEntertainTask && (
                                    <span className="bg-pink-100 text-pink-600 text-[10px] font-bold px-2 py-0.5 rounded border border-pink-200">
                                        <i className="fa-solid fa-music"></i> 娛樂陪玩
                                    </span>
                                )}
                            </div>
                            
                            <div className="bg-gray-50 rounded-xl p-3 mb-4 border border-gray-100 space-y-2">
                                <div className="flex items-center gap-2">
                                    <div className="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500"><i className="fa-solid fa-user-secret text-xs"></i></div>
                                    <span className="text-xs text-gray-500">客戶遊戲 ID 及方案將於接單後顯示</span>
                                </div>
                                <div className="flex items-center gap-2">
                                    <div className="w-6 h-6 rounded-full bg-orange-100 flex items-center justify-center text-orange-600"><i className="fa-regular fa-clock text-xs"></i></div>
                                    <span className="text-lg font-bold text-amber-600">{new Date(group.scheduledTime).toLocaleString([], {month:'short', day:'numeric', hour:'2-digit', minute:'2-digit'})}</span>
                                </div>
                            </div>

                            <div className="space-y-3 mb-4">
                                {group.subs.map((sub, idx) => (
                                    <div key={sub.id} className="text-xs text-gray-500 bg-gray-50/50 p-2 rounded-lg border border-gray-100">
                                        <div className="font-bold text-gray-700 mb-1">子單 {idx + 1} 目前缺額：</div>
                                        <div className="flex items-center gap-1.5 flex-wrap">
                                            <i className="fa-solid fa-users text-gray-400"></i>
                                            <span className={`px-2 py-0.5 rounded text-[10px] font-bold ${sub.booster1 === '無指定' ? 'bg-amber-100 text-amber-700 border border-amber-200' : (sub.booster1 === currentBooster && sub.booster1Status === 'pending' ? 'bg-blue-100 text-blue-700 border border-blue-200' : 'bg-gray-100 text-gray-600')}`}>1: {sub.booster1} {sub.booster1 === currentBooster && sub.booster1Status === 'pending' ? '(指定給您)' : ''}</span>
                                            {!sub.isSingleBoosterTask && (
                                                <span className={`px-2 py-0.5 rounded text-[10px] font-bold ${sub.booster2 === '無指定' ? 'bg-amber-100 text-amber-700 border border-amber-200' : (sub.booster2 === currentBooster && sub.booster2Status === 'pending' ? 'bg-blue-100 text-blue-700 border border-blue-200' : 'bg-gray-100 text-gray-600')}`}>2: {sub.booster2} {sub.booster2 === currentBooster && sub.booster2Status === 'pending' ? '(指定給您)' : ''}</span>
                                            )}
                                        </div>
                                    </div>
                                ))}
                            </div>

                            <div className="flex gap-2">
                                <button 
                                    onClick={() => {
                                        const targetTimeMs = new Date(group.scheduledTime).getTime();
                                        const hasConflict = myActiveSchedules.some(timeMs => Math.abs(timeMs - targetTimeMs) <= 7200000);
                                        
                                        setConfirmModal({ 
                                            mainOrderId: group.mainOrderId, 
                                            subOrderIds: subOrderIds, 
                                            count: group.subs.length, 
                                            scheduledTime: group.scheduledTime, 
                                            type: 'confirm',
                                            hasConflict: hasConflict
                                        });
                                    }}
                                    className="flex-1 bg-amber-500 text-white font-bold py-3 rounded-xl text-sm flex items-center justify-center gap-2 active:bg-amber-600 shadow-md shadow-amber-200 transition-transform active:scale-95"
                                >
                                    <i className="fa-solid fa-bolt"></i> {group.isMyPendingGroup ? '確認接下訂單' : (group.subs.length > 1 ? `一次接下 ${group.subs.length} 項訂單` : '立即接單')}
                                </button>
                                {group.isMyPendingGroup && (
                                    <button 
                                        onClick={() => setConfirmModal({ mainOrderId: group.mainOrderId, subOrderIds: subOrderIds, count: group.subs.length, scheduledTime: group.scheduledTime, type: 'reject' })}
                                        className="w-1/3 bg-gray-100 text-red-400 font-bold py-3 rounded-xl text-sm border border-red-200 active:bg-gray-200 transition-transform active:scale-95"
                                    >
                                        拒絕
                                    </button>
                                )}
                            </div>
                        </div>
                    );
                })}
                {groupedTasks.length === 0 && (
                    <div className="text-center py-16">
                        <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                            <i className="fa-solid fa-mug-hot text-2xl text-gray-300"></i>
                        </div>
                        <div className="text-gray-400 text-sm font-bold">目前大廳沒有空缺訂單</div>
                        <div className="text-gray-400 text-xs mt-1">稍作休息，等候新訂單</div>
                    </div>
                )}
            </div>

            {confirmModal && (
                <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center z-50 px-4">
                    <div className="bg-white rounded-3xl shadow-2xl w-full max-w-sm overflow-hidden p-6 text-center transform transition-all scale-100">
                        <div className={`w-16 h-16 ${confirmModal.type === 'reject' ? 'bg-red-100' : 'bg-amber-100'} rounded-full flex items-center justify-center mx-auto mb-4 shadow-inner`}>
                            <i className={`fa-solid ${confirmModal.type === 'reject' ? 'fa-xmark text-red-600' : 'fa-clock text-amber-600'} text-3xl`}></i>
                        </div>
                        <h3 className="text-xl font-black text-gray-800 mb-2">
                            {confirmModal.type === 'reject' ? '確定要拒絕此單？' : '請確認時間'}
                        </h3>
                        
                        {confirmModal.type === 'reject' ? (
                            <p className="text-sm text-gray-500 mb-6">
                                您正在拒絕 <span className="font-bold text-red-500">{confirmModal.count > 1 ? `此 ${confirmModal.count} 項組合訂單` : '此項訂單'}</span><br/>
                                拒絕後將不再顯示於大廳中。
                            </p>
                        ) : (
                            <div className="mb-6">
                                {confirmModal.hasConflict && (
                                    <div className="bg-red-50 border border-red-200 rounded-xl p-3 mb-3 shadow-inner text-left animate-pulse">
                                        <div className="flex items-center gap-1.5 mb-1">
                                            <i className="fa-solid fa-triangle-exclamation text-red-600"></i>
                                            <span className="text-sm font-bold text-red-600">時間衝突警示</span>
                                        </div>
                                        <p className="text-xs text-red-500">
                                            您於該時段之前後兩小時內已有其他待處理訂單！
                                        </p>
                                    </div>
                                )}
                                
                                <div className="bg-red-50 border border-red-200 rounded-xl p-3 mb-2 shadow-inner">
                                    <div className="text-xs text-red-500 font-bold mb-1">訂單預約時間</div>
                                    <div className="text-xl font-black text-red-500">
                                        {new Date(confirmModal.scheduledTime).toLocaleString([], {month:'short', day:'numeric', hour:'2-digit', minute:'2-digit'})}
                                    </div>
                                </div>
                                <p className="text-[0.6rem] text-gray-800 tracking-wide">請務必確認您於該時段可以打單再接單！</p>
                            </div>
                        )}

                        <div className="flex justify-center gap-3">
                            <button onClick={() => setConfirmModal(null)} className="flex-1 py-3.5 bg-gray-100 text-gray-600 font-bold rounded-xl active:bg-gray-200 transition-colors">取消</button>
                            <button onClick={executeClaim} className={`flex-1 py-3.5 text-white font-bold rounded-xl shadow-md transition-colors ${confirmModal.type === 'reject' ? 'bg-red-500 active:bg-red-600' : 'bg-amber-500 active:bg-amber-600'}`}>確定</button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

const BoosterKanban = ({ orders, currentBooster, currentTime, showAlert }) => {
    const [activeKanbanTab, setActiveKanbanTab] = useState('inProgress');
    const [confirmModal, setConfirmModal] = useState(null);

    const vipOrderIds = useMemo(() => {
        const now = new Date();
        const thisMonthStr = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}`;
        const spending = {};
        const vipOrders = new Set();

        const sortedOrders = [...orders].sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));

        sortedOrders.forEach(o => {
            const isThisMonth = o.createdAt && o.createdAt.slice(0, 7) === thisMonthStr;
            if (!isThisMonth) return;

            let isVip = (spending[o.gameId] || 0) >= 5000;

            if (o.paymentStatus === '已收款') {
                spending[o.gameId] = (spending[o.gameId] || 0) + (Number(o.totalAmount) || 0);
                if (spending[o.gameId] >= 5000) {
                    isVip = true;
                }
            }

            if (isVip) {
                vipOrders.add(o.id);
            }
        });
        return vipOrders;
    }, [orders]);

    const myTasks = [];
    
    orders.forEach(order => {
        order.subOrders.forEach(sub => {
            let isMyConfirmed = false;
            if (sub.booster1 === currentBooster && (sub.booster1Status === 'confirmed' || !sub.booster1Status)) isMyConfirmed = true;
            if (sub.booster2 === currentBooster && (sub.booster2Status === 'confirmed' || !sub.booster2Status)) isMyConfirmed = true;

            if (isMyConfirmed) {
                let isArchived = false;
                if (sub.status === '已結單' && sub.completedAt) {
                    if (currentTime - new Date(sub.completedAt).getTime() >= ARCHIVE_DELAY_MS) {
                        isArchived = true;
                    }
                }
                
                if (!isArchived) {
                    myTasks.push({
                        ...sub,
                        mainOrderId: order.id,
                        gameId: order.gameId, 
                        orderDate: order.createdAt,
                        paymentStatus: order.paymentStatus, 
                        orderNotes: sub.orderNotes
                    });
                }
            }
        });
    });

    myTasks.sort((a, b) => new Date(a.scheduledTime) - new Date(b.scheduledTime));

    const pendingTasks = myTasks.filter(t => t.status === '待收款');
    const inProgressTasks = myTasks.filter(t => t.status === '進行中');
    const completedTasks = myTasks.filter(t => t.status === '已結單');

    const confirmComplete = (mainOrderId, subOrderId, productName) => {
        setConfirmModal({ mainOrderId, subOrderId, productName });
    };

    const executeCompleteTask = async () => {
        if (!confirmModal) return;
        const { mainOrderId, subOrderId } = confirmModal;

        const order = orders.find(o => o.id === mainOrderId);
        if (!order) return;

        const updatedSubs = order.subOrders.map(sub => {
            if (sub.id === subOrderId) {
                return { ...sub, status: '已結單', completedAt: new Date().toISOString() };
            }
            return sub;
        });

        try {
            await db.collection('orders').doc(mainOrderId).update({ subOrders: updatedSubs });
            setActiveKanbanTab('completed');
        } catch(e) {
            showAlert("更新狀態失敗: " + e.message);
        } finally {
            setConfirmModal(null);
        }
    };

    const renderTaskCard = (task) => (
        <div key={task.id} className="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 mb-4 relative overflow-hidden">
            <div className="flex justify-between items-center mb-3">
                <span className={`text-[10px] font-black px-2.5 py-1 rounded-lg tracking-wider ${
                    task.status === '待收款' ? 'bg-yellow-100 text-yellow-700' :
                    task.status === '進行中' ? 'bg-indigo-100 text-indigo-700' : 'bg-emerald-100 text-emerald-700'
                }`}>
                    {task.status}
                </span>
                <span className="text-[10px] font-mono text-gray-400 font-bold">{task.id}</span>
            </div>

            <h3 className="text-lg font-black text-gray-800 leading-tight mb-2">{task.productName}</h3>
            <div className="bg-gray-50 rounded-xl p-3 mb-4 border border-gray-100 space-y-2">
                <div className="flex items-center gap-2">
                    <div className="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600"><i className="fa-solid fa-gamepad text-xs"></i></div>
                    <span className="text-sm font-bold text-gray-700">{task.gameId}</span>
                    {vipOrderIds.has(task.mainOrderId) && <span className="bg-gradient-to-r from-amber-400 to-yellow-500 text-white text-[9px] font-black px-1.5 py-0.5 rounded-full shadow-sm"><i className="fa-solid fa-crown"></i> VIP</span>}
                </div>
                <div className="flex items-center gap-2">
                    <div className="w-6 h-6 rounded-full bg-orange-100 flex items-center justify-center text-orange-600"><i className="fa-regular fa-clock text-xs"></i></div>
                    <span className="text-sm font-bold text-amber-700">{new Date(task.scheduledTime).toLocaleString([], {month:'short', day:'numeric', hour:'2-digit', minute:'2-digit'})}</span>
                </div>
                {task.paymentStatus === '待付款' && (
                    <div className="flex items-center gap-2 mt-2 pt-2 border-t border-gray-200">
                        <div className="w-6 h-6 rounded-full bg-red-100 flex items-center justify-center text-red-600"><i className="fa-solid fa-triangle-exclamation text-xs"></i></div>
                        <span className="text-sm font-bold text-red-500">客戶尚未付款，請勿開打</span>
                    </div>
                )}
            </div>

            {task.orderNotes && (
                <div className="text-xs text-amber-700 bg-amber-50/80 p-2.5 rounded-xl border border-amber-100 mb-4 shadow-inner">
                    <span className="font-bold">訂單備註：</span>{task.orderNotes}
                </div>
            )}

            {(task.booster1 !== currentBooster || (task.booster2 && task.booster2 !== '無指定')) && (
                <div className="text-xs text-gray-500 mb-4 flex items-center gap-1.5">
                    <i className="fa-solid fa-users text-gray-400"></i>
                    協作打手: 
                    <span className="font-bold text-gray-700">
                        {task.booster1 === currentBooster ? (task.booster2 || '無') : task.booster1}
                    </span>
                </div>
            )}

            <div className="mt-2">
                {task.status === '待收款' && (
                    <div className="w-full bg-gray-100 text-gray-400 font-bold py-3 rounded-xl text-sm flex items-center justify-center gap-2">
                        <i className="fa-solid fa-hourglass-half"></i> 等待客服確認收款...
                    </div>
                )}
                {task.status === '進行中' && (
                    <button 
                        onClick={() => confirmComplete(task.mainOrderId, task.id, task.productName)}
                        className="w-full bg-indigo-600 text-white font-bold py-3 rounded-xl text-sm flex items-center justify-center gap-2 active:bg-indigo-700 shadow-md shadow-indigo-200 transition-transform active:scale-95"
                    >
                        <i className="fa-regular fa-circle-check text-lg"></i> 確認完成結單
                    </button>
                )}
                {task.status === '已結單' && (
                    <div className="w-full bg-emerald-50 text-emerald-600 font-bold py-3 rounded-xl text-sm flex flex-col items-center justify-center">
                        <div className="flex items-center gap-2"><i className="fa-solid fa-check text-lg"></i> 訂單已完成</div>
                        {task.completedAt && (
                            <span className="text-[10px] text-emerald-500/70 mt-1 font-medium">
                                完結時間: {new Date(task.completedAt).toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'})} 
                                (倒數 {Math.max(0, Math.ceil((ARCHIVE_DELAY_MS - (currentTime - new Date(task.completedAt).getTime())) / 60000))} 分鐘隱藏)
                            </span>
                        )}
                    </div>
                )}
            </div>
        </div>
    );

    return (
        <div className="pb-24">
            <div className="flex p-1 bg-gray-200/60 rounded-xl mb-6 mx-4 mt-2">
                <button onClick={() => setActiveKanbanTab('pending')} className={`flex-1 py-2 text-sm font-bold rounded-lg transition-all ${activeKanbanTab === 'pending' ? 'bg-white shadow-sm text-gray-800' : 'text-gray-500'}`}>待收款 <span className="ml-1 text-[10px] bg-gray-100 px-1.5 py-0.5 rounded-full">{pendingTasks.length}</span></button>
                <button onClick={() => setActiveKanbanTab('inProgress')} className={`flex-1 py-2 text-sm font-bold rounded-lg transition-all ${activeKanbanTab === 'inProgress' ? 'bg-white shadow-sm text-indigo-600' : 'text-gray-500'}`}>進行中 <span className="ml-1 text-[10px] bg-indigo-50 px-1.5 py-0.5 rounded-full">{inProgressTasks.length}</span></button>
                <button onClick={() => setActiveKanbanTab('completed')} className={`flex-1 py-2 text-sm font-bold rounded-lg transition-all ${activeKanbanTab === 'completed' ? 'bg-white shadow-sm text-emerald-600' : 'text-gray-500'}`}>已結單 <span className="ml-1 text-[10px] bg-emerald-50 px-1.5 py-0.5 rounded-full">{completedTasks.length}</span></button>
            </div>

            <div className="px-4 space-y-1">
                {activeKanbanTab === 'pending' && (
                    pendingTasks.length > 0 ? pendingTasks.map(renderTaskCard) : <div className="text-center py-10 text-gray-400 text-sm">目前無待收款訂單</div>
                )}
                {activeKanbanTab === 'inProgress' && (
                    inProgressTasks.length > 0 ? inProgressTasks.map(renderTaskCard) : <div className="text-center py-10 text-gray-400 text-sm">目前無進行中訂單</div>
                )}
                {activeKanbanTab === 'completed' && (
                    completedTasks.length > 0 ? completedTasks.map(renderTaskCard) : <div className="text-center py-10 text-gray-400 text-sm">近期無已完成訂單 (滿3小時自動移出)</div>
                )}
            </div>

            {confirmModal && (
                <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center z-50 px-4">
                    <div className="bg-white rounded-3xl shadow-2xl w-full max-w-sm overflow-hidden p-6 text-center transform transition-all scale-100">
                        <div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4 shadow-inner">
                            <i className="fa-solid fa-clipboard-check text-3xl text-indigo-600"></i>
                        </div>
                        <h3 className="text-xl font-black text-gray-800 mb-2">確定完成訂單？</h3>
                        <p className="text-sm text-gray-500 mb-6">
                            您正在完結 <span className="font-bold text-indigo-600">{confirmModal.productName}</span><br/>
                            點擊確定後，系統將立即同步至管理端。
                        </p>
                        <div className="flex justify-center gap-3">
                            <button onClick={() => setConfirmModal(null)} className="flex-1 py-3.5 bg-gray-100 text-gray-600 font-bold rounded-xl active:bg-gray-200 transition-colors">取消</button>
                            <button onClick={executeCompleteTask} className="flex-1 py-3.5 bg-indigo-600 text-white font-bold rounded-xl active:bg-indigo-700 shadow-md transition-colors">確定完成</button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

const SalaryReport = ({ orders, currentBooster }) => {
    const currentMonth = new Date().toISOString().slice(0, 7);
    const [selectedMonth, setSelectedMonth] = useState(currentMonth);
    const [adjustments, setAdjustments] = useState([]);

    useEffect(() => {
        const unsub = db.collection('salary_adjustments').onSnapshot(snap => {
            setAdjustments(snap.docs.map(d => ({id: d.id, ...d.data()})));
        });
        return unsub;
    }, []);

    let relevantSubs = [];
    let totalSalary = 0;

    orders.filter(o => o.paymentStatus === '已收款').forEach(order => {
        order.subOrders.forEach(sub => {
            if (sub.status === '已結單' && sub.completedAt && sub.completedAt.startsWith(selectedMonth)) {
                const isB1 = sub.booster1 === currentBooster;
                const isB2 = sub.booster2 === currentBooster;
                
                if (isB1 || isB2) {
                    const count = (sub.booster1 && sub.booster1 !== '無指定' ? 1 : 0) + (sub.booster2 && sub.booster2 !== '無指定' && sub.booster2 !== sub.booster1 ? 1 : 0);
                    const netPool = sub.price * 0.85; // 扣除15%
                    const earned = count > 0 ? netPool / count : 0;
                    totalSalary += earned;
                    relevantSubs.push({...sub, mainId: order.id, earned, count, type: 'order'});
                }
            }
        });
    });

    adjustments.filter(a => a.booster === currentBooster && a.date.startsWith(selectedMonth)).forEach(a => {
        totalSalary += Number(a.amount);
        relevantSubs.push({
            id: a.id, completedAt: a.date + 'T00:00:00Z', productName: `【加扣款】${a.reason}`,
            earned: Number(a.amount), count: '-', type: 'adjustment'
        });
    });

    relevantSubs.sort((a, b) => new Date(b.completedAt) - new Date(a.completedAt));

    return (
        <div className="px-4 pb-24 pt-2">
            <div className="bg-gradient-to-br from-pink-500 to-indigo-600 rounded-3xl p-6 text-white shadow-xl shadow-indigo-200 mb-6">
                <div className="flex justify-between items-center mb-4">
                    <span className="text-indigo-100 text-sm font-bold opacity-80">本月預估薪資</span>
                    <input 
                        type="month" 
                        value={selectedMonth} 
                        onChange={e => setSelectedMonth(e.target.value)} 
                        className="bg-white/20 border-0 text-white rounded-lg text-xs p-1.5 focus:ring-0 [&::-webkit-calendar-picker-indicator]:filter [&::-webkit-calendar-picker-indicator]:invert"
                    />
                </div>
                <div className="text-4xl font-black tracking-tight">${totalSalary.toFixed(1)}</div>
                <div className="mt-4 text-xs font-medium bg-white/20 inline-block px-3 py-1.5 rounded-full backdrop-blur-sm">
                    <i className="fa-solid fa-check-double mr-1"></i> 共完成 {relevantSubs.filter(s=>s.type==='order').length} 單
                </div>
            </div>

            <h3 className="font-black text-gray-800 mb-3 px-1">明細紀錄</h3>
            
            <div className="space-y-3">
                {relevantSubs.map(task => (
                    <div key={task.id} className={`p-4 rounded-2xl shadow-sm border flex justify-between items-center ${task.type === 'adjustment' ? 'bg-amber-50 border-amber-100' : 'bg-white border-gray-100'}`}>
                        <div>
                            <div className={`text-sm font-bold mb-1 pr-4 ${task.type === 'adjustment' ? 'text-amber-800' : 'text-gray-800'}`}>{task.productName}</div>
                            <div className="text-xs text-gray-400 font-mono">{task.type === 'adjustment' ? task.completedAt.slice(0, 10) : new Date(task.completedAt).toLocaleString([], {month:'short', day:'numeric', hour:'2-digit', minute:'2-digit'})}</div>
                        </div>
                        <div className="text-right whitespace-nowrap">
                            <div className={`text-lg font-black ${task.earned < 0 ? 'text-red-500' : (task.type === 'adjustment' ? 'text-emerald-600' : 'text-pink-600')}`}>
                                {task.earned > 0 ? '+' : ''}${task.earned.toFixed(1)}
                            </div>
                            <div className="text-[10px] text-gray-400">{task.count} {task.count !== '-' ? '人平分' : ''}</div>
                        </div>
                    </div>
                ))}
                {relevantSubs.length === 0 && (
                    <div className="text-center py-10 text-gray-400 text-sm">這個月還沒有結單紀錄喔</div>
                )}
            </div>
        </div>
    );
};

function App() {
    const [currentBooster, setCurrentBooster] = useState('');
    const [selectedName, setSelectedName] = useState('');
    const [password, setPassword] = useState('');
    const [authError, setAuthError] = useState('');
    const [isLoadingUser, setIsLoadingUser] = useState(true);

    const [activeTab, setActiveTab] = useState('kanban'); 
    const [orders, setOrders] = useState([]);
    const [currentTime, setCurrentTime] = useState(Date.now());
    
    const [dialog, setDialog] = useState(null);
    const showAlert = (msg) => setDialog({ message: msg });

    useEffect(() => {
        const timer = setInterval(() => setCurrentTime(Date.now()), 60000);
        return () => clearInterval(timer);
    }, []);

    useEffect(() => {
        const unsubscribeAuth = auth.onAuthStateChanged(user => {
            if (user) {
                const boosterName = REVERSE_EMAILS[user.email] || user.displayName || user.email.split('@')[0];
                setCurrentBooster(boosterName);
            } else {
                setCurrentBooster('');
            }
            setIsLoadingUser(false);
        });
        return () => unsubscribeAuth();
    }, []);

    useEffect(() => {
        if (isLoadingUser || !currentBooster) return; 
        
        const unsubscribe = db.collection('orders').onSnapshot(snapshot => {
            const ordersData = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
            setOrders(ordersData);
        }, error => {
            console.error("雲端連線失敗:", error);
        });
        return () => unsubscribe();
    }, [currentBooster, isLoadingUser]);

    useEffect(() => {
        if (!currentBooster) return;

        const setupMessaging = async () => {
            try {
                const messaging = firebase.messaging();
                const permission = await Notification.requestPermission();
    
                if (permission === 'granted') {
                    const currentToken = await messaging.getToken({ 
                        vapidKey: 'BGZSDM27uLPzxRZDX98jtH9HT3-yWgc4sXTvQjuK4BE2zV43kYvxguqtZBX8V-ydDx8oR-wNb1ZiR66Mo5yLywc' 
                    });
        
                    if (currentToken) {
                        await db.collection('booster_tokens').doc(currentBooster).set({
                            tokens: firebase.firestore.FieldValue.arrayUnion(currentToken),
                            updatedAt: firebase.firestore.FieldValue.serverTimestamp()
                        }, { merge: true });
                    }
                }
            } catch (error) {
                console.error('取得推播權限失敗:', error);
            }
        };

        setupMessaging();
        firebase.messaging().onMessage((payload) => {
            new Notification(payload.notification.title, {
                body: payload.notification.body,
                icon: 'https://media.mimiclub.org/網站圖檔資源/銀灰色平面金屬圖像.jpg',
                tag: 'mimi-task-alert'
            });
        });
    }, [currentBooster]);

    const handleAuthLogin = async (e) => {
        e.preventDefault();
        setAuthError('');
        
        const emailToLogin = BOOSTER_EMAILS[selectedName];
        if (!emailToLogin) {
            setAuthError('請選擇正確的名單');
            return;
        }

        try {
            await auth.signInWithEmailAndPassword(emailToLogin, password);
        } catch (error) {
            setAuthError("密碼錯誤，請重新輸入");
        }
    };

    const handleLogout = async () => {
        try {
            await auth.signOut();
            setSelectedName('');
            setPassword('');
        } catch (error) {
            console.error("登出失敗:", error);
        }
    };

    if (isLoadingUser) {
        return <div className="flex items-center justify-center text-indigo-600" style={{ minHeight: '100dvh' }}><i className="fa-solid fa-spinner fa-spin text-4xl"></i></div>;
    }

    if (!currentBooster) {
        return (
            <div className="flex flex-col items-center justify-center p-6 text-gray-800 pb-safe bg-[#d8d2c9]" style={{ minHeight: '100dvh' }}>
                <div className="w-full max-w-sm bg-white text-gray-900 rounded-3xl p-8 shadow-2xl">
                    <div className="text-center mb-8">
                        <div className="relative w-24 h-24 mx-auto mb-4">
                            <div className="absolute inset-0 bg-gradient-to-tr from-[#d8d2c9] to-[#a39a8f] rounded-3xl flex items-center justify-center text-white text-3xl font-black shadow-lg -z-10">M</div>
                            <img 
                                src="https://media.mimiclub.org/網站圖檔資源/銀灰色平面金屬圖像.jpg" 
                                alt="Logo" 
                                referrerPolicy="no-referrer" 
                                className="w-24 h-24 object-cover rounded-3xl shadow-lg" 
                                onError={(e) => { e.target.style.display = 'none'; }} 
                            />
                        </div>
                        <h1 className="text-2xl font-black text-gray-800 tracking-wide">打手系統</h1>
                    </div>
                    
                    <form onSubmit={handleAuthLogin} className="space-y-4">
                        {authError && (
                            <div className="text-xs text-red-500 font-bold text-center bg-red-50 p-2 rounded-lg border border-red-200">
                                {authError}
                            </div>
                        )}
                        <div>
                            <label className="block text-sm font-bold text-gray-700 mb-2 text-center">請選擇你的身分</label>
                            <select 
                                className="w-full p-4 bg-gray-50 border border-gray-200 rounded-xl font-bold text-gray-700 focus:ring-2 focus:ring-[#a39a8f] outline-none appearance-none"
                                style={{ textAlignLast: 'center' }}
                                value={selectedName}
                                onChange={(e) => setSelectedName(e.target.value)}
                                required
                            >
                                <option value="" disabled>點擊展開名單...</option>
                                {BOOSTER_LIST.map(name => <option key={name} value={name}>{name}</option>)}
                            </select>
                        </div>
                        <div>
                            <input 
                                type="password" 
                                placeholder="請輸入打手密碼" 
                                value={password} 
                                onChange={(e) => setPassword(e.target.value)} 
                                required 
                                className="w-full p-4 bg-gray-50 border border-gray-200 rounded-xl font-bold text-gray-700 focus:ring-2 focus:ring-[#a39a8f] outline-none text-center"
                            />
                        </div>
                        <button type="submit" className="w-full bg-[#a39a8f] text-white font-bold py-4 rounded-xl shadow-md active:bg-[#8b8277] transition-colors mt-2">
                            安全登入
                        </button>
                    </form>
                    <p className="text-xs text-center text-gray-500 mt-4">
                        系統安全驗證機制<br/>請輸入密碼登入
                    </p>
                </div>
            </div>
        );
    }

    return (
        <div className="flex flex-col max-w-md mx-auto bg-gray-50 relative overflow-hidden shadow-2xl sm:border-x sm:border-gray-200 pb-safe" style={{ height: '100dvh' }}>
            <GlobalDialog dialog={dialog} setDialog={setDialog} />
            
            <header className="bg-white px-4 py-3 flex justify-between items-center shadow-sm z-10 relative flex-shrink-0">
                <div className="flex items-center gap-2.5">
                    <div className="relative w-9 h-9">
                        <img 
                            src="https://media.mimiclub.org/網站圖檔資源/銀灰色平面金屬圖像.jpg" 
                            alt="Logo" 
                            referrerPolicy="no-referrer" 
                            className="w-full h-full object-cover rounded-xl shadow-sm" 
                            onError={(e) => { e.target.style.display = 'none'; }} 
                        />
                    </div>
                    <span className="font-black text-gray-800 tracking-wide text-lg">打手系統</span>
                </div>
                <button onClick={handleLogout} className="bg-gray-100 text-gray-600 text-xs px-3 py-2 rounded-full font-bold flex items-center gap-1.5 active:bg-gray-200">
                    <i className="fa-solid fa-right-from-bracket"></i> {currentBooster}
                </button>
            </header>

            <main className="flex-1 overflow-y-auto no-scrollbar relative z-0">
                {activeTab === 'claim' && <ClaimOrders orders={orders} currentBooster={currentBooster} showAlert={showAlert} />}
                {activeTab === 'kanban' && <BoosterKanban orders={orders} currentBooster={currentBooster} currentTime={currentTime} showAlert={showAlert} />}
                {activeTab === 'salary' && <SalaryReport orders={orders} currentBooster={currentBooster} />}
            </main>

            <nav className="bg-white/95 backdrop-blur-md border-t border-gray-100 flex z-10 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)] flex-shrink-0 relative">
                <button 
                    onClick={() => setActiveTab('claim')} 
                    className={`flex-1 py-3 flex flex-col items-center gap-1 ${activeTab === 'claim' ? 'text-amber-500' : 'text-gray-400 hover:text-gray-500'}`}
                >
                    <i className={`fa-solid fa-hand-sparkles text-xl ${activeTab === 'claim' ? 'scale-110' : ''} transition-transform`}></i>
                    <span className="text-[10px] font-bold mt-0.5">接單大廳</span>
                </button>
                <button 
                    onClick={() => setActiveTab('kanban')} 
                    className={`flex-1 py-3 flex flex-col items-center gap-1 ${activeTab === 'kanban' ? 'text-indigo-600' : 'text-gray-400 hover:text-gray-500'}`}
                >
                    <i className={`fa-solid fa-table-columns text-xl ${activeTab === 'kanban' ? 'scale-110' : ''} transition-transform`}></i>
                    <span className="text-[10px] font-bold mt-0.5">我的派單</span>
                </button>
                <button 
                    onClick={() => setActiveTab('salary')} 
                    className={`flex-1 py-3 flex flex-col items-center gap-1 ${activeTab === 'salary' ? 'text-pink-500' : 'text-gray-400 hover:text-gray-500'}`}
                >
                    <i className={`fa-solid fa-sack-dollar text-xl ${activeTab === 'salary' ? 'scale-110' : ''} transition-transform`}></i>
                    <span className="text-[10px] font-bold mt-0.5">薪資明細</span>
                </button>
            </nav>

        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);