import React, { useState, useEffect, useRef, useMemo, useLayoutEffect } from 'https://esm.sh/react@18.2.0';
import { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';
import * as LucideIcons from 'https://esm.sh/lucide-react@0.292.0';

const {
    Eye, EyeOff, CheckCircle2, Circle, X, User, LogOut, Megaphone, Search, Plus, ShoppingCart, Truck, FileText,
    Clock, Calendar, Trash2, Minus, Camera, ChevronDown, MapPin, PenTool, Loader2, Package, ClipboardList, Box, AlertCircle, ChevronLeft, ChevronRight, Pencil, ArrowRight, ImageIcon, DollarSign, Phone,
    CalendarDays, UserCircle, ImagePlus, Save, Tag, Lock, Bell, Menu, LayoutGrid, History, PlusCircle, ArrowUpCircle, ChevronUp, ArrowDownNarrowWide,
    Info, MessageCircle, Send
} = LucideIcons;

// ==========================================
// 🔐 โหลด Config จาก window.APP_CONFIG (กำหนดใน config.js ที่ไม่ commit ขึ้น Git)
// ==========================================
const _cfg = window.APP_CONFIG || {};
const SUPABASE_URL = _cfg.SUPABASE_URL || '';
const SUPABASE_KEY = _cfg.SUPABASE_KEY || '';
const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY);

const TELEGRAM_BOT_TOKEN = _cfg.TELEGRAM_BOT_TOKEN || '';
const TELEGRAM_CHAT_ID = _cfg.TELEGRAM_CHAT_ID || '';

// --- CONSTANTS & HELPERS ---
const MOCK_PROVINCES = ["หนองคาย", "เลย", "อุดรธานี", "ขอนแก่น", "บึงกาฬ", "หนองบัวลำภู", "สกลนคร", "นครพนม", "กาฬสินธุ์", "มหาสารคาม", "ร้อยเอ็ด", "ยโสธร", "อำนาจเจริญ", "อุบลราชธานี", "ศรีสะเกษ", "สุรินทร์", "บุรีรัมย์", "ชัยภูมิ", "นครราชสีมา", "มุกดาหาร"];
const MOCK_BILL_TYPES = ["NO VAT", "VAT นอก", "VAT ใน"];
const MOCK_SALES_NAMES = ["เสฎฐณัฐ พรไพศาลสิน", "ปวรา พรไพศาลสิน", "ปาจารีย์ ดำเนตร", "นิด เหือน", "ร่มเกล้า บุญภูงา", "จิรวัฒนา โคตรโยธี", "รจนา คั่งคำภา", "ธีราภรณ์ หาญดี", "จุฬาลักษณ์ ใสกระจ่าง"];
const RESTRICTED_BILL_TYPES = ["บิลขายทั่วไป VAT", "บิลขายทั่วไป NO VAT (รวมบิลค่าส่ง)", "บิลงานช่าง", "บิลงานเช่า", "บิลเครื่อง", "บิลงานเช่าซื้อ", "บิลงานแม่บ้าน"];

const ROLE_GROUPS = {
    ADMIN: ['user pc', 'admin', 'user ad'],
    QC_STORE: ['user qc', 'user st'],
    SHIPMENT: ['user ss', 'user ts', 'user tc']
};

// 🌟 ตัวกรองอัจฉริยะ: แปลงลิงก์ /view ให้เป็น thumbnail อัตโนมัติ
const formatDriveImageUrl = (urls) => {
    if (!urls) return urls;
    return String(urls).split(',').map(url => {
        let u = url.trim();
        // สแกนหาลิงก์หน้าเว็บ Google Drive
        const regex = /drive\.google\.com\/file\/d\/([a-zA-Z0-9_-]+)\/view/;
        const match = u.match(regex);
        if (match && match[1]) {
            // ดึง ID ออกมา แล้วประกอบร่างเป็นลิงก์ภาพแบบตรงๆ
            return `https://drive.google.com/thumbnail?id=${match[1]}&sz=w1000`;
        }
        return u;
    }).join(',');
};

const formatDateForDisplay = (dateString) => {
    let dStr = String(dateString || '').trim();
    if (!dStr || dStr.includes('#')) return dStr;

    // จัดการกรณีมีเวลาติดมาด้วย (เช่น "2026-04-18 09:00:00" หรือมี T)
    if (dStr.includes(' ')) dStr = dStr.split(' ')[0];
    if (dStr.includes('T')) dStr = dStr.split('T')[0];

    if (dStr.match(/^\d{4}-\d{2}-\d{2}$/)) {
        const [year, month, day] = dStr.split('-');
        const beYear = parseInt(year, 10) + 543;
        return `${day}/${month}/${beYear}`;
    }
    return dStr;
};

const formatNumber = (num) => {
    if (num === null || num === undefined || num === '') return '-';
    const n = parseFloat(num);
    if (isNaN(n)) return num;
    return n.toLocaleString('th-TH', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
};

const getCurrentDate = () => { const now = new Date(); const year = now.getFullYear(); const month = String(now.getMonth() + 1).padStart(2, '0'); const day = String(now.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; };

const toInputDate = (dateStr) => {
    let dStr = String(dateStr || '').trim();
    if (!dStr) return '';

    // จัดการกรณีมีเวลาติดมาด้วย
    if (dStr.includes(' ')) dStr = dStr.split(' ')[0];
    if (dStr.includes('T')) dStr = dStr.split('T')[0];

    if (dStr.match(/^\d{4}[-/]\d{2}[-/]\d{2}$/)) {
        return dStr.replace(/\//g, '-');
    }
    const slashMatch = dStr.match(/^(\d{1,2})[-/](\d{1,2})[-/](\d{4})$/);
    if (slashMatch) {
        const day = slashMatch[1].padStart(2, '0');
        const month = slashMatch[2].padStart(2, '0');
        const year = parseInt(slashMatch[3]);
        const ceYear = year > 2400 ? year - 543 : year;
        return `${ceYear}-${month}-${day}`;
    }
    return '';
};

const getDaysDiff = (dateString) => {
    if (!dateString) return 0;
    let dStr = String(dateString);
    if (dStr.includes('T')) dStr = dStr.split('T')[0];
    const today = new Date(); today.setHours(0, 0, 0, 0);
    let targetDate;
    if (dStr.includes('/')) { const parts = dStr.split('/'); targetDate = new Date(`${parts[2]}/${parts[1]}/${parts[0]}`); }
    else { targetDate = new Date(dStr.split(' ')[0].replace(/-/g, '/')); }
    if (isNaN(targetDate.getTime())) return 0;
    targetDate.setHours(0, 0, 0, 0);
    const diffTime = today - targetDate; return Math.floor(diffTime / (1000 * 60 * 60 * 24));
};

const getRightSideTextClass = (text) => { if (!text) return 'text-xs sm:text-sm font-medium'; const str = String(text); if (str.length > 40) return 'text-[10px] sm:text-[11px] leading-tight font-medium'; if (str.length > 25) return 'text-[11px] sm:text-xs leading-tight font-medium'; return 'text-xs sm:text-sm font-medium'; };
const getProductTextClass = (text) => { if (!text) return 'text-slate-700 text-xs sm:text-sm font-semibold'; const str = String(text); if (str.length > 50) return 'text-slate-700 text-[10px] sm:text-[11px] leading-tight font-semibold'; if (str.length > 30) return 'text-slate-700 text-[11px] sm:text-xs leading-tight font-semibold'; return 'text-slate-700 text-xs sm:text-sm font-semibold'; };
const getCustomerNameClass = (name) => { return getRightSideTextClass(name); };

const compressImage = (base64Str, mode = 'normal') => {
    return new Promise((resolve) => {
        const img = new Image(); img.src = base64Str;
        img.onload = () => {
            const canvas = document.createElement('canvas');
            // ปรับขนาดเพื่อเร็วกว่าเดิมและประหยัดพื้นที่ (เป้าหมาย 100-150KB)
            let TARGET_DIM = 1200;
            let TARGET_BYTES = 180000; // ประมาณ 130-150KB หลังจากแปลง base64

            if (mode === 'high') {
                TARGET_DIM = 1500;
                TARGET_BYTES = 250000;
            }

            let width = img.width;
            let height = img.height;
            if (width > height) {
                if (width > TARGET_DIM) { height *= TARGET_DIM / width; width = TARGET_DIM; }
            } else {
                if (height > TARGET_DIM) { width *= TARGET_DIM / height; height = TARGET_DIM; }
            }

            canvas.width = width; canvas.height = height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);

            // Adaptive Loading: เลือก Format ที่ดีที่สุดที่ Browser รองรับ (ปรับเป็น WebP แทน AVIF เพื่อแสดงผลได้สมบูรณ์ใน Telegram)
            let format = 'image/jpeg';
            if (canvas.toDataURL('image/webp').startsWith('data:image/webp')) {
                format = 'image/webp';
            }

            let quality = 0.8;
            let dataUrl = canvas.toDataURL(format, quality);
            let attempts = 0;
            while (dataUrl.length > TARGET_BYTES && quality > 0.2 && attempts < 10) {
                quality -= 0.1;
                dataUrl = canvas.toDataURL(format, quality);
                attempts++;
            }
            resolve(dataUrl);
        };
    });
};

// ==========================================
// 🚀 PURE JS BACKEND REPLACEMENT FUNCTIONS
// ==========================================

const sendRealtimeTelegramAlert = async (order, oldStatus) => {
    if (!TELEGRAM_BOT_TOKEN || !TELEGRAM_CHAT_ID) return;
    let newStatus = order.status || "รอจัดออเดอร์";
    if (oldStatus === newStatus && oldStatus !== null) return;

    let title = ""; let emoji = ""; let imageUrl = ""; let actionBy = ""; let note = "";

    if (!oldStatus && newStatus === 'รอจัดออเดอร์') {
        title = "ออกออเดอร์แล้ว"; emoji = "📝"; actionBy = order.createdBy; note = order.note;
    } else if (newStatus === 'รอจัดส่ง') {
        title = "จัดออเดอร์เสร็จแล้ว"; emoji = "📦"; imageUrl = order.packImage; actionBy = order.packedBy; note = order.packNote;
    } else if (newStatus === 'รอรับบิล') {
        title = "ส่งสินค้าเสร็จแล้ว"; emoji = "🚚"; imageUrl = order.shippingImage; actionBy = order.shippedBy; note = order.shippingNote;
    } else if (newStatus === 'เรียบร้อย') {
        title = "รับบิลสินค้าเรียบร้อยแล้ว"; emoji = "✅"; imageUrl = order.billImage; actionBy = order.billedBy; note = order.billNote;
    } else {
        return;
    }

    let priceStr = order.price ? parseFloat(order.price).toLocaleString('th-TH', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : '-';
    let msg = `<b>${emoji} ${title}</b>\n------------------------\n`;
    msg += `<b>📌 เลขที่:</b> ${order.orderNumber || '-'}\n`;
    msg += `<b>👤 ลูกค้า:</b> ${order.name || order.customerName || '-'}\n`;
    if (order.location || order.province) msg += `<b>📍 จังหวัด:</b> ${order.location || order.province}\n`;
    msg += `<b>💵 ราคา:</b> ฿${priceStr}\n`;
    msg += `<b>👨‍💼 Sales:</b> ${order.salesCustomer || '-'}\n`;
    if (actionBy) msg += `<b>👷 ผู้ดำเนินการ:</b> ${actionBy}\n`;
    if (note) msg += `<b>💬 หมายเหตุ:</b> ${note}\n`;
    msg += `------------------------`;

    let firstImage = "";
    if (imageUrl) {
        let imgArray = String(imageUrl).split(',').map(u => u.trim()).filter(u => u);
        if (imgArray.length > 0) firstImage = imgArray[0];
    }

    try {
        if (firstImage) {
            // Check if the image is AVIF
            const isAvif = /\.avif/i.test(firstImage);
            let sendSuccess = false;

            if (isAvif) {
                try {
                    // Convert AVIF to JPEG blob and send as multipart/form-data
                    const avifBlob = await new Promise(async (resolve, reject) => {
                        const img = new Image();
                        img.crossOrigin = "anonymous";
                        img.onload = () => {
                            const canvas = document.createElement('canvas');
                            canvas.width = img.width;
                            canvas.height = img.height;
                            const ctx = canvas.getContext('2d');
                            ctx.drawImage(img, 0, 0);
                            canvas.toBlob((blob) => {
                                if (blob) resolve(blob);
                                else reject(new Error("Canvas toBlob failed"));
                            }, 'image/jpeg', 0.85);
                        };
                        img.onerror = (e) => reject(e);
                        img.src = firstImage + (firstImage.includes('?') ? '&' : '?') + 't=' + Date.now();
                    });

                    const formData = new FormData();
                    formData.append('chat_id', TELEGRAM_CHAT_ID);
                    formData.append('photo', avifBlob, 'image.jpg');
                    formData.append('caption', msg);
                    formData.append('parse_mode', "HTML");

                    let res = await fetch(`https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendPhoto`, {
                        method: "POST",
                        body: formData
                    });
                    if (res.ok) {
                        sendSuccess = true;
                    }
                } catch (convErr) {
                    console.error("Failed to convert AVIF image for Telegram:", convErr);
                }
            }

            if (!sendSuccess) {
                let payload = { chat_id: TELEGRAM_CHAT_ID, photo: firstImage, caption: msg, parse_mode: "HTML" };
                let res = await fetch(`https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendPhoto`, {
                    method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload)
                });
                if (!res.ok) {
                    msg += `\n🖼️ <b>รูปภาพอ้างอิง:</b> <a href="${firstImage}">คลิกดูรูปภาพ</a>`;
                    let fallbackPayload = { chat_id: TELEGRAM_CHAT_ID, text: msg, parse_mode: "HTML", disable_web_page_preview: false };
                    await fetch(`https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage`, {
                        method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(fallbackPayload)
                    });
                }
            }
        } else {
            let payload = { chat_id: TELEGRAM_CHAT_ID, text: msg, parse_mode: "HTML" };
            await fetch(`https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage`, {
                method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload)
            });
        }
    } catch (e) { console.error("Telegram Alert Error:", e); }
};

const processImagesToSupabase = async (imagesData, prefix) => {
    if (!imagesData) return "";
    const imageList = Array.isArray(imagesData) ? imagesData : [imagesData];
    const validUrls = [];
    for (let i = 0; i < imageList.length; i++) {
        const img = imageList[i];
        if (!img) continue;
        if (img.startsWith("http")) {
            validUrls.push(img);
        } else {
            try {
                const response = await fetch(img);
                const blob = await response.blob();

                // ดึงนามสกุลไฟล์จาก MIME Type (Adaptive)
                let ext = 'jpg';
                if (img.startsWith('data:image/avif')) ext = 'avif';
                else if (img.startsWith('data:image/webp')) ext = 'webp';

                const fileName = `${prefix}_${Date.now()}_${i}.${ext}`;
                const { data, error } = await supabase.storage.from('orders-system').upload(fileName, blob);
                if (!error) {
                    const { data: urlData } = supabase.storage.from('orders-system').getPublicUrl(fileName);
                    validUrls.push(urlData.publicUrl);
                } else {
                    validUrls.push(img);
                }
            } catch (e) {
                validUrls.push(img);
            }
        }
    }
    return validUrls.join(",");
};

const splitMessageByLines = (fullText, maxChunkSize = 4000) => {
    const lines = fullText.split('\n');
    const chunks = [];
    let currentChunk = '';

    for (let line of lines) {
        if ((currentChunk + line + '\n').length > maxChunkSize) {
            if (currentChunk.trim()) {
                chunks.push(currentChunk.trim());
            }
            currentChunk = line + '\n';
        } else {
            currentChunk += line + '\n';
        }
    }
    if (currentChunk.trim()) {
        chunks.push(currentChunk.trim());
    }
    return chunks;
};

const sendDailySummaryManual = async (orders) => {
    if (!TELEGRAM_BOT_TOKEN || !TELEGRAM_CHAT_ID) return;
    const summary = { "รอจัดออเดอร์": [], "สินค้าไม่ครบ": [], "รอจัดส่ง": [], "สินค้าค้างส่ง": [], "รอรับบิล": [], "เรียบร้อย": [], "อื่นๆ": [] };
    let totalPending = 0;

    const currentYearStr = new Date().getFullYear().toString();

    // กรองเอาเฉพาะออเดอร์ของปีปัจจุบัน และไม่เอาแถวบันทึกล็อกของระบบ
    const validOrders = orders.filter(o => {
        const numStr = String(o.orderNumber || '');
        if (numStr.startsWith('DAILY_SUMMARY_LOG_')) return false;
        const d = toInputDate(o.date);
        return d && d.startsWith(currentYearStr);
    });

    const escapeHtml = (text) => {
        return String(text || '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    };

    const getPendingDays = (orderDateStr) => {
        try {
            const parsed = toInputDate(orderDateStr);
            if (!parsed) return 0;
            const parts = parsed.split('-');
            if (parts.length === 3) {
                const year = parseInt(parts[0], 10);
                const month = parseInt(parts[1], 10) - 1;
                const day = parseInt(parts[2], 10);
                const orderDate = new Date(year, month, day);
                const today = new Date();
                const todayMidnight = new Date(today.getFullYear(), today.getMonth(), today.getDate());
                const diffTime = todayMidnight - orderDate;
                const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
                return diffDays >= 0 ? diffDays : 0;
            }
        } catch (e) {
            console.error("Error calculating pending days:", e);
        }
        return 0;
    };

    validOrders.forEach(o => {
        if (!o.status) return;
        const statusName = o.status.trim();
        const pendingDays = getPendingDays(o.date);
        const safeOrderNumber = escapeHtml(o.orderNumber || 'ไม่ระบุ');
        const safeName = escapeHtml(o.name || 'ไม่ระบุ');
        const provinceText = o.location ? ` [${escapeHtml(o.location.trim())}]` : '';
        const pendingDaysText = pendingDays > 0 ? ` (ค้าง ${pendingDays} วัน)` : ' (ค้างวันนี้)';

        let itemText;
        if (statusName === 'เรียบร้อย') {
            itemText = `<b>${safeOrderNumber}</b> - ${safeName}${provinceText}`;
        } else {
            itemText = `<b>${safeOrderNumber}</b> - ${safeName}${provinceText}${pendingDaysText}`;
            totalPending++;
        }

        if (summary[statusName]) summary[statusName].push(itemText);
        else summary["อื่นๆ"].push(`[${escapeHtml(statusName)}] ${itemText}`);
    });

    let todayStr = Utilities_formatDate(new Date(), "dd/MM/yyyy");
    let msg = `📊 <b>สรุปรายการออเดอร์ประจำวันที่ ${todayStr}</b>\n`;
    msg += `รวมงานค้างที่กำลังดำเนินการ: <b>${totalPending} รายการ</b>\n------------------------\n\n`;

    const appendToMsg = (title, itemsArray, showItems = true) => {
        msg += `📌 <b>${title} (${itemsArray.length} รายการ)</b>\n`;
        if (showItems) {
            if (itemsArray.length === 0) msg += `  ✅ เคลียร์ครบแล้ว\n\n`;
            else { itemsArray.forEach(item => { msg += `  • ${item}\n`; }); msg += `\n`; }
        } else msg += `\n`;
    };

    appendToMsg("1. รอจัดออเดอร์", summary["รอจัดออเดอร์"]);
    appendToMsg("2. สินค้าไม่ครบ", summary["สินค้าไม่ครบ"]);
    appendToMsg("3. รอจัดส่ง", summary["รอจัดส่ง"]);
    appendToMsg("4. สินค้าค้างส่ง", summary["สินค้าค้างส่ง"]);
    appendToMsg("5. รอรับบิล", summary["รอรับบิล"]);
    if (summary["อื่นๆ"].length > 0) appendToMsg("6. สถานะอื่นๆ", summary["อื่นๆ"]);

    msg += `------------------------\n`;
    appendToMsg("✅ งานที่เสร็จเรียบร้อย", summary["เรียบร้อย"], false);

    const msgChunks = splitMessageByLines(msg, 4000);
    for (let chunk of msgChunks) {
        const res = await fetch(`https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage`, {
            method: "POST", 
            headers: { "Content-Type": "application/json" }, 
            body: JSON.stringify({ chat_id: TELEGRAM_CHAT_ID, text: chunk, parse_mode: "HTML" })
        });
        if (!res.ok) {
            const errText = await res.text();
            let parsedErr;
            try { parsedErr = JSON.parse(errText); } catch(e){}
            const details = parsedErr && parsedErr.description ? parsedErr.description : errText;
            throw new Error(`Telegram API Error: ${details}`);
        }
        await new Promise(r => setTimeout(r, 500));
    }
};

const Utilities_formatDate = (date, format) => {
    const yyyy = parseInt(date.getFullYear()) + 543;
    const mm = String(date.getMonth() + 1).padStart(2, '0');
    const dd = String(date.getDate()).padStart(2, '0');
    return `${dd}/${mm}/${yyyy}`;
};


// ==========================================
// UI COMPONENTS
// ==========================================
const LoadingOverlay = ({ text }) => (<div className="loader-overlay animate-in fade-in"><Loader2 className="animate-spin text-indigo-500" size={48} /><span className="text-slate-700 font-bold tracking-wide mt-2">{text || 'กำลังประมวลผล...'}</span></div>);

const ConfirmationModal = ({ isOpen, onConfirm, onCancel }) => {
    if (!isOpen) return null;
    useEffect(() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }, []);
    return (
        <div className="fixed inset-0 modal-overlay flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm animate-in fade-in duration-200">
            <div className="bg-white rounded-[28px] shadow-2xl w-full max-w-[320px] p-7 transform scale-100 animate-in zoom-in-95 duration-200 text-center relative modal-content border border-slate-100">
                <div className="w-16 h-16 mx-auto mb-5 rounded-full flex items-center justify-center bg-amber-100 text-amber-500 shadow-inner border border-amber-200"><AlertCircle size={32} strokeWidth={2.5} /></div>
                <h3 className="text-xl font-bold text-slate-800 mb-2">ยืนยันการบันทึก</h3>
                <p className="text-slate-500 mb-7 text-sm font-medium">ตรวจสอบข้อมูลครบถ้วนแล้วหรือไม่?</p>
                <div className="flex gap-3">
                    <button onClick={onCancel} className="flex-1 py-3 rounded-2xl border-2 border-slate-200 text-slate-500 font-semibold hover:bg-slate-50 hover:border-slate-300 transition-all active:scale-95">ไม่ใช่</button>
                    <button onClick={onConfirm} className="flex-1 py-3 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-semibold hover:shadow-[0_8px_20px_rgb(79,70,229,0.3)] hover:-translate-y-0.5 active:translate-y-0 transition-all">ใช่</button>
                </div>
            </div>
        </div>
    );
};

const DateScheduleModal = ({ isOpen, onClose, onConfirm, initialDate }) => {
    const [date, setDate] = useState('');
    useEffect(() => { if (isOpen) setDate(toInputDate(initialDate) || getCurrentDate()); }, [isOpen, initialDate]);
    if (!isOpen) return null;
    const handleDateChange = (e) => setDate(e.target.value);
    const handleSubmit = () => { if (date) onConfirm(date); else alert("กรุณาเลือกวันที่"); };
    return (
        <div className="fixed inset-0 modal-overlay flex items-end sm:items-center justify-center bg-slate-900/50 backdrop-blur-sm animate-in fade-in duration-200">
            <div className="bg-white rounded-t-[32px] sm:rounded-[28px] w-full max-w-sm p-7 transform transition-all animate-in slide-in-from-bottom duration-300 modal-content border border-slate-100 shadow-2xl">
                <div className="flex justify-between items-center mb-6"><h3 className="text-xl font-bold text-slate-800 flex items-center gap-2"><div className="p-2 bg-indigo-100 text-indigo-600 rounded-xl"><CalendarDays size={20} strokeWidth={2.5} /></div> กำหนดวันส่ง</h3><button onClick={onClose} className="p-2 bg-slate-100 rounded-full hover:bg-slate-200 transition-colors active:scale-95"><X size={20} className="text-slate-500" /></button></div>
                <div className="mb-8 relative"><label className="block text-sm text-slate-500 mb-2 font-medium">เลือกวันที่ (พ.ศ.)</label><div className="relative w-full"><div className="w-full p-4 bg-indigo-50/50 border-2 border-indigo-100 rounded-2xl text-xl font-bold text-indigo-800 flex items-center justify-between shadow-sm"><span>{formatDateForDisplay(date)}</span><Calendar className="text-indigo-400" size={24} /></div><input type="date" value={date} onChange={handleDateChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-50" /></div></div>
                <button onClick={handleSubmit} className="w-full py-4 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-lg font-bold hover:shadow-[0_8px_20px_rgb(79,70,229,0.3)] hover:-translate-y-0.5 active:translate-y-0 transition-all flex items-center justify-center gap-2 relative z-50"><CheckCircle2 size={22} strokeWidth={2.5} /> บันทึกกำหนดการ</button>
            </div>
        </div>
    );
};

const ImageUploadBox = ({ images = [], onImagesChange, label, icon: Icon, compressionMode = 'normal' }) => {
    const [isMenuOpen, setIsMenuOpen] = useState(false); const galleryRef = useRef(null); const cameraRef = useRef(null);
    const handleFileChange = (e) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = async () => { const compressed = await compressImage(reader.result, compressionMode); if (images.length < 2) { const newImages = [...images, compressed]; onImagesChange(newImages); } }; reader.readAsDataURL(file); } e.target.value = null; setIsMenuOpen(false); };
    const removeImage = (indexToRemove) => { const newImages = images.filter((_, index) => index !== indexToRemove); onImagesChange(newImages); };
    const maxImages = 2; const canAdd = images.length < maxImages;
    return (<div className="w-full"><input type="file" accept="image/*" ref={galleryRef} onChange={handleFileChange} className="hidden" /><input type="file" accept="image/*" capture="environment" ref={cameraRef} onChange={handleFileChange} className="hidden" /><div className="grid grid-cols-2 gap-3 mb-3 animate-in fade-in slide-in-from-bottom-2">{images.map((img, index) => (<div key={index} className="relative aspect-square rounded-2xl overflow-hidden border-2 border-slate-100 shadow-sm group bg-slate-50"><img src={img} alt={`Preview ${index}`} className="w-full h-full object-cover" /><button type="button" onClick={(e) => { e.preventDefault(); e.stopPropagation(); removeImage(index); }} className="absolute top-2 right-2 bg-rose-500/90 text-white p-1.5 rounded-xl backdrop-blur-sm hover:bg-rose-600 transition-colors shadow-md active:scale-95"><X size={16} strokeWidth={3} className="pointer-events-none" /></button></div>))}{canAdd && (<div onClick={() => setIsMenuOpen(true)} className={`relative aspect-square rounded-2xl border-[2px] border-dashed border-indigo-300 flex flex-col items-center justify-center gap-3 bg-indigo-50/40 cursor-pointer hover:bg-indigo-50/80 transition-all group overflow-hidden active:scale-95 shadow-sm hover:shadow-md ${images.length === 0 ? 'col-span-2 aspect-[4/1.5]' : ''}`}><div className="bg-indigo-500 p-3.5 rounded-full text-white shadow-md group-hover:scale-110 transition-transform duration-300"><Camera size={26} /></div><span className="text-indigo-600 font-semibold text-sm tracking-wide">เพิ่มรูปภาพ ({images.length}/{maxImages})</span></div>)}</div>{isMenuOpen && (<div className="fixed inset-0 z-[10002] flex items-end justify-center bg-slate-900/50 backdrop-blur-sm animate-in fade-in duration-200" onClick={() => setIsMenuOpen(false)}><div className="bg-white w-full max-w-md rounded-t-[32px] p-7 animate-in slide-in-from-bottom duration-300 shadow-2xl border-t border-slate-100" onClick={(e) => e.stopPropagation()}><h3 className="text-slate-400 font-bold text-sm mb-5 text-center tracking-widest uppercase">เลือกวิธีการเพิ่มรูปภาพ</h3><div className="flex flex-col gap-3"><button onClick={() => { cameraRef.current.click(); setIsMenuOpen(false); }} className="w-full py-4 bg-indigo-50 text-indigo-700 rounded-2xl font-bold text-lg flex items-center justify-center gap-2 hover:bg-indigo-100 transition-colors border border-indigo-100 shadow-sm active:scale-95"><Camera size={22} strokeWidth={2.5} /> ถ่ายรูปใหม่</button><button onClick={() => { galleryRef.current.click(); setIsMenuOpen(false); }} className="w-full py-4 bg-slate-50 text-slate-700 rounded-2xl font-bold text-lg flex items-center justify-center gap-2 hover:bg-slate-100 transition-colors border border-slate-200 shadow-sm active:scale-95"><ImageIcon size={22} strokeWidth={2.5} /> เลือกจากอัลบั้ม</button><button onClick={() => setIsMenuOpen(false)} className="w-full py-4 bg-white border-2 border-slate-200 text-slate-500 rounded-2xl font-bold text-lg mt-2 hover:bg-slate-50 transition-colors active:scale-95">ยกเลิก</button></div></div></div>)}</div>);
};

const DatePickerInput = ({ value, onChange, name }) => { return (<div className="date-picker-wrapper relative w-full"><div className="w-full bg-slate-50 px-4 py-3 rounded-2xl text-slate-700 font-bold flex items-center h-[54px] pointer-events-none border border-slate-200 shadow-sm">{value ? formatDateForDisplay(value) : <span className="text-slate-400 text-sm font-medium">เลือกวันที่...</span>}</div><input type="date" name={name} value={value} onChange={onChange} className="absolute inset-0 w-full h-full opacity-0 z-20 cursor-pointer" /></div>); };

const SearchableDropdown = ({ options, value, onChange, name, placeholder, readOnly }) => {
    const [isOpen, setIsOpen] = useState(false);
    const [localValue, setLocalValue] = useState(value || '');
    const wrapperRef = useRef(null);

    useEffect(() => {
        setLocalValue(value || '');
    }, [value]);

    const filteredOptions = options.filter(option =>
        String(option).toLowerCase().includes(String(localValue).toLowerCase())
    );

    useEffect(() => {
        const handleClickOutside = (event) => {
            if (wrapperRef.current && !wrapperRef.current.contains(event.target)) setIsOpen(false);
        };
        document.addEventListener("mousedown", handleClickOutside);
        return () => document.removeEventListener("mousedown", handleClickOutside);
    }, []);

    const handleSelect = (option) => {
        if (readOnly) return;
        setLocalValue(option);
        onChange({ target: { name, value: option } });
        setIsOpen(false);
    };

    return (
        <div className="relative w-full" ref={wrapperRef}>
            <div className="relative">
                <input
                    type="text"
                    name={name}
                    value={localValue}
                    onChange={(e) => {
                        if (readOnly) return;
                        setLocalValue(e.target.value);
                        setIsOpen(true);
                        // Optional: trigger parent onChange if needed for real-time filtering
                        if (onChange) onChange(e);
                    }}
                    onFocus={() => {
                        if (!readOnly) setIsOpen(true);
                    }}
                    placeholder={placeholder}
                    readOnly={readOnly}
                    className={`w-full pl-4 pr-10 py-3.5 rounded-2xl font-semibold border transition-all shadow-sm placeholder-slate-400 ${readOnly ? 'bg-slate-100 text-slate-500 border-transparent cursor-not-allowed' : 'bg-slate-50 text-slate-800 border-slate-200 focus:bg-white focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-400'} ${isOpen && !readOnly ? 'ring-4 ring-indigo-500/10 border-indigo-400 bg-white' : ''}`}
                    autoComplete="off"
                />
                <div className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
                    <ChevronDown size={20} className={`transition-transform duration-300 ${isOpen && !readOnly ? 'rotate-180 text-indigo-500' : ''}`} />
                </div>
            </div>
            {isOpen && !readOnly && filteredOptions.length > 0 && (
                <div className="absolute z-50 w-full mt-2 bg-white rounded-2xl shadow-xl border border-slate-100 max-h-60 overflow-y-auto animate-in fade-in zoom-in-95 duration-200 no-scrollbar py-2">
                    <div className="px-2">
                        {filteredOptions.map((option, index) => (
                            <div
                                key={index}
                                onClick={() => handleSelect(option)}
                                className="px-4 py-3 hover:bg-indigo-50 text-slate-700 font-medium cursor-pointer transition-colors text-[15px] rounded-xl flex items-center gap-3 mb-1 last:mb-0"
                            >
                                <div className={`w-2 h-2 rounded-full ${value === option ? 'bg-indigo-500 scale-125' : 'bg-slate-200'}`}></div>
                                <span className={value === option ? 'text-indigo-700 font-bold' : ''}>{option}</span>
                            </div>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
};

const OrderInfoCard = ({ order, onEdit, isAdmin }) => (
    <div className="bg-white rounded-[24px] shadow-sm border border-indigo-100 overflow-hidden mb-6">
        <div className="bg-gradient-to-r from-indigo-50 to-blue-50 px-5 py-4 border-b border-indigo-100 flex justify-between items-center">
            <h3 className="text-indigo-800 font-bold flex items-center gap-2 text-base">
                <div className="bg-indigo-100 p-1.5 rounded-lg text-indigo-600"><ClipboardList size={18} strokeWidth={2.5} /></div> ข้อมูลการสั่งซื้อ
            </h3>
            {isAdmin && onEdit && (
                <button onClick={(e) => { e.preventDefault(); e.stopPropagation(); onEdit(order); }} className="text-indigo-600 bg-white hover:bg-indigo-600 hover:text-white p-2 rounded-xl border border-indigo-200 shadow-sm transition-colors active:scale-95">
                    <Pencil size={18} strokeWidth={2.5} />
                </button>
            )}
        </div>
        <div className="p-5">
            <div className="flex justify-between mb-3"><span className="text-slate-500 text-sm font-medium">เลขที่</span><span className="text-slate-800 text-sm font-bold">{order?.orderNumber || '-'}</span></div>
            <div className="flex justify-between mb-3"><span className="text-slate-500 text-sm font-medium">วันที่สั่ง</span><span className="text-slate-800 text-sm font-bold">{formatDateForDisplay(order?.date)}</span></div>
            <div className="flex justify-between mb-3 items-start"><span className="text-slate-500 text-sm font-medium shrink-0 mt-0.5">ลูกค้า</span><span className={`text-slate-800 text-right break-words max-w-[65%] ${getRightSideTextClass(order?.name)}`}>{order?.name}</span></div>
            <div className="flex justify-between mb-3"><span className="text-slate-500 text-sm font-medium">ชื่อเรียก</span><span className="text-slate-800 text-sm font-bold">{order?.nickname || '-'}</span></div>
            {order?.address && <div className="flex justify-between mb-3 items-start"><span className="text-slate-500 text-sm font-medium shrink-0 mt-0.5">ที่อยู่</span><span className={`text-slate-800 text-right break-words max-w-[65%] ${getRightSideTextClass(order.address)}`}>{order.address}</span></div>}
            <div className="flex justify-between mb-5"><span className="text-slate-500 text-sm font-medium">จังหวัด</span><span className="text-slate-800 text-right text-sm font-bold">{order?.location}</span></div>
            {order?.phoneNumber && <div className="flex justify-between mb-3"><span className="text-slate-500 text-sm font-medium">เบอร์โทร</span><span className="text-slate-800 text-right text-sm font-bold">{order.phoneNumber}</span></div>}
            {order?.taxId && <div className="flex justify-between mb-4 bg-blue-50/40 p-2.5 rounded-xl border border-blue-100/50"><span className="text-slate-500 text-xs font-semibold">เลขประจำตัวผู้เสียภาษี</span><span className="text-indigo-600 text-right text-sm font-black tracking-wider">{order.taxId}</span></div>}
            <div className="flex justify-between mb-2 bg-indigo-50/50 p-3 rounded-xl border border-indigo-100/50"><span className="text-slate-500 text-sm font-medium">Sales</span><span className="text-indigo-800 text-sm font-bold">{order?.salesCustomer || '-'}</span></div>
            <div className="flex justify-between mb-2 bg-slate-50 p-3 rounded-xl border border-slate-100"><span className="text-slate-500 text-sm font-medium">บิล</span><span className="text-slate-800 text-sm font-bold">{order?.billType || '-'}</span></div>
            <div className="flex justify-between mb-6 bg-slate-50 p-3 rounded-xl border border-slate-100"><span className="text-slate-500 text-sm font-medium">ราคา</span><span className="text-emerald-600 text-base font-bold">{order?.price ? `฿${formatNumber(order.price)}` : '-'}</span></div>

            <div className="border-t border-slate-100 pt-4"><span className="text-[10px] text-slate-400 font-bold block mb-3 uppercase tracking-wider">รายการสินค้า</span>{order?.items && order.items.map((item, idx) => { const itemText = `${item.name} (${item.size})`; return (<div key={idx} className="flex justify-between mb-2.5 items-start bg-slate-50 p-3 rounded-xl border border-slate-100 shadow-sm"><span className={`break-words pr-2 ${getProductTextClass(itemText)}`}>{itemText}</span><span className="bg-white text-indigo-700 font-bold text-sm shrink-0 px-3 py-1 rounded-lg shadow-sm border border-slate-200">{item.qty}</span></div>); })}</div>
            {order?.note && <div className="mt-4 text-sm bg-indigo-50/80 p-3.5 rounded-xl border border-indigo-100 text-indigo-800 font-medium"><span className="block text-[10px] font-bold text-indigo-400 mb-1 uppercase tracking-wider">หมายเหตุ</span>{order.note}</div>}
            <div className="mt-4 pt-3 border-t border-slate-100 flex justify-end items-center gap-1.5 text-xs text-slate-400 font-medium"><UserCircle size={14} /> <span>ออกโดย: <span className="text-slate-600">{order.createdBy || '-'}</span></span></div>
        </div>
    </div>
);

const LoginScreen = ({ onLogin, loading, userList }) => {
    const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [showPassword, setShowPassword] = useState(false);
    const handleSubmit = (e) => { e.preventDefault(); onLogin(username, password); };
    return (
        <div className="w-full h-full flex items-center justify-center bg-slate-50">
            <div className="w-full max-w-md bg-white h-full sm:h-auto sm:rounded-[36px] sm:shadow-2xl sm:shadow-indigo-500/10 sm:overflow-hidden relative flex flex-col animate-in fade-in duration-500 sm:border border-slate-100">
                {loading && <div className="absolute top-0 w-full h-1.5 bg-indigo-100 z-50"><div className="h-full bg-gradient-to-r from-blue-500 to-indigo-500 animate-[loading_1s_ease-in-out_infinite]"></div></div>}
                <div className="relative bg-gradient-to-br from-indigo-600 via-blue-600 to-sky-500 h-[42vh] min-h-[320px] flex flex-col items-center pt-10 text-white overflow-hidden shrink-0 shadow-inner">
                    <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10 mix-blend-overlay"></div>
                    <div className="relative z-10 flex flex-col items-center gap-6">
                        <div className="w-[76px] h-[96px] border-[3px] border-white/90 rounded-[24px] flex flex-col items-center justify-center gap-2.5 shadow-xl bg-white/10 backdrop-blur-md">
                            <div className="w-10 h-1 bg-white/90 rounded-full shadow-sm"></div>
                            <div className="w-10 h-1 bg-white/90 rounded-full shadow-sm"></div>
                            <div className="w-10 h-1 bg-white/90 rounded-full shadow-sm"></div>
                            <div className="w-5 h-1 bg-white/90 rounded-full shadow-sm mr-5"></div>
                        </div>
                        <div className="text-center">
                            <h1 className="text-4xl font-bold tracking-tight drop-shadow-lg mb-1">ระบบออเดอร์</h1>
                            <p className="text-blue-100 text-sm font-medium tracking-widest uppercase">Enterprise Edition</p>
                        </div>
                    </div>
                    <div className="absolute bottom-[-2px] left-0 w-full overflow-hidden leading-[0]">
                        <svg viewBox="0 0 500 150" preserveAspectRatio="none" className="w-full h-[80px] sm:h-[100px]"><path d="M0.00,49.98 C149.99,150.00 349.20,-49.98 500.00,49.98 L500.00,150.00 L0.00,150.00 Z" className="fill-white"></path></svg>
                    </div>
                </div>
                <div className="flex-1 px-8 pt-6 flex flex-col items-center justify-start overflow-y-auto bg-white">
                    <h2 className="text-2xl font-bold text-slate-800 mb-8 tracking-tight">ลงชื่อเข้าใช้งาน</h2>
                    <form onSubmit={handleSubmit} className="w-full flex flex-col gap-5">
                        <div className="w-full relative">
                            <input
                                type="text"
                                placeholder="ชื่อผู้ใช้งาน"
                                value={username}
                                onChange={(e) => setUsername(e.target.value)}
                                className="w-full bg-slate-50 text-slate-800 font-semibold px-6 py-4 rounded-2xl border border-slate-200 focus:bg-white focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-400 transition-all placeholder-slate-400 text-lg shadow-sm"
                                autoComplete="off"
                            />
                        </div>
                        <div className="w-full relative">
                            <input type={showPassword ? "text" : "password"} placeholder="รหัสผ่าน" value={password} onChange={(e) => setPassword(e.target.value)} className="w-full bg-slate-50 text-slate-800 font-semibold px-6 py-4 rounded-2xl border border-slate-200 focus:bg-white focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-400 transition-all placeholder-slate-400 text-lg shadow-sm pr-14" />
                            <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-5 top-1/2 transform -translate-y-1/2 text-slate-400 hover:text-indigo-500 focus:outline-none p-1 transition-colors">{showPassword ? <EyeOff size={22} /> : <Eye size={22} />}</button>
                        </div>
                        <button type="submit" className="w-full mt-6 py-4 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-xl font-bold shadow-lg shadow-indigo-500/30 hover:shadow-indigo-500/50 hover:-translate-y-0.5 active:scale-95 transition-all duration-300">เข้าสู่ระบบ</button>
                    </form>
                </div>
                <div className="pb-8 bg-white text-center px-4 shrink-0"><p className="text-slate-400 text-[10px] font-medium tracking-widest uppercase">© 2026 Pavara Prosperity by IT</p></div>
            </div>
        </div>
    );
};

const DashboardScreen = ({ orders, globalYearFilter, setGlobalYearFilter, availableYears, onShowProfile, onOrderDetail, onCreateOrder, onLogout, isLoading, currentUser, filters, onFilterChange, scrollRef, onOpenDateModal, onSendSummary, onNavigateStats, onNavigateCustomers, currentScreen = 'dashboard' }) => {
    const listContainerRef = useRef(null);
    const initialLimit = Math.max(30, Math.ceil((scrollRef.current || 0) / 40) + 10);
    const [displayLimit, setDisplayLimit] = useState(initialLimit);
    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
    const [showBackToTop, setShowBackToTop] = useState(false);
    const [profileImgError, setProfileImgError] = useState(false);
    const scrollTimeout = useRef(null);

    useEffect(() => {
        setProfileImgError(false);
    }, [currentUser?.photo_url]);

    useLayoutEffect(() => {
        if (listContainerRef.current && scrollRef.current !== undefined && scrollRef.current > 0) {
            listContainerRef.current.scrollTop = scrollRef.current;
            setTimeout(() => {
                if (listContainerRef.current) listContainerRef.current.scrollTop = scrollRef.current;
            }, 350);
        }
    }, []);

    const handleScroll = (e) => {
        const st = e.target.scrollTop;
        if (st > 0) scrollRef.current = st;
        if (st > 400) { if (!showBackToTop) setShowBackToTop(true); } else { if (showBackToTop) setShowBackToTop(false); }

        if (e.target.scrollHeight - st < e.target.clientHeight + 800) {
            if (!scrollTimeout.current) {
                setDisplayLimit(prev => prev + 30);
                scrollTimeout.current = setTimeout(() => {
                    scrollTimeout.current = null;
                }, 100);
            }
        }
    };

    const role = (currentUser?.role || '').toLowerCase().trim();
    const isAdmin = ROLE_GROUPS.ADMIN.includes(role);
    const canCreateAndPack = isAdmin || ROLE_GROUPS.QC_STORE.includes(role);
    const canShipRole = canCreateAndPack || ROLE_GROUPS.SHIPMENT.includes(role);
    const canViewStats = ROLE_GROUPS.ADMIN.includes(role) || role === 'user ss';

    const processedOrders = useMemo(() => {
        const roleLower = currentUser?.role?.toLowerCase()?.trim() || '';
        const currentUserName = (currentUser?.name || '').trim();
        const isAuthUser = ROLE_GROUPS.ADMIN.includes(roleLower) || (currentUser?.username && String(currentUser.username).trim().toLowerCase() === 'd002') || (currentUser?.name && String(currentUser.name).trim().includes('จุฬาลักษณ์'));

        // กรองเอาแถวบันทึกล็อกของระบบออกจากการประมวลผลและการแสดงผลของ Dashboard
        const validOrders = orders.filter(o => o.orderNumber && !String(o.orderNumber).startsWith('DAILY_SUMMARY_LOG_'));

        return validOrders.map(o => ({
            _original: o,
            _searchStr: `${o.name || ''} ${o.location || ''} ${o.date || ''} ${o.status || ''} ${o.orderNumber || ''}`.toLowerCase(),
            _parsedDate: toInputDate(o.date) || '0000-00-00',
            _hasRestricted: (o.items && o.items.some(item => RESTRICTED_BILL_TYPES.includes(item.name))) || (o.billType && RESTRICTED_BILL_TYPES.includes(o.billType)),
            _isCreator: currentUserName && o.createdBy && String(o.createdBy).trim() === currentUserName,
            _isAuthUser: isAuthUser,
            _idStr: String(o.id)
        }));
    }, [orders, currentUser]);

    const filteredOrders = useMemo(() => {
        const query = filters.query.toLowerCase();

        const result = processedOrders.filter((order) => {
            const nameStr = String(order._original.name || '');
            const orderNumStr = String(order._original.orderNumber || '');
            const dateStr = String(order._original.date || '');
            if (nameStr.includes('#NUM!') || nameStr.includes('#REF!') || orderNumStr.includes('#NUM!') || orderNumStr.includes('#REF!') || dateStr.includes('#NUM!') || dateStr.includes('#REF!') || dateStr.includes('#')) return false;

            const matchesSearch = order._searchStr.includes(query);

            if (order._hasRestricted && !order._isAuthUser && !order._isCreator) { return false; }
            const matchesStatus = filters.status ? order._original.status === filters.status : true;
            const matchesDate = filters.date ? order._parsedDate === filters.date : true;
            const matchesYear = globalYearFilter === 'all' ? true : order._parsedDate.startsWith(globalYearFilter);
            return matchesSearch && matchesStatus && matchesDate && matchesYear;
        });

        return result.sort((a, b) => {
            if (a._parsedDate !== b._parsedDate) {
                return b._parsedDate.localeCompare(a._parsedDate);
            }
            if (!isNaN(a._idStr) && !isNaN(b._idStr)) return Number(b._idStr) - Number(a._idStr);
            return b._idStr.localeCompare(a._idStr);
        }).map(o => o._original);
    }, [processedOrders, filters, globalYearFilter]);

    const getStatusStyle = (status) => {
        const s = status || 'รอจัดออเดอร์';
        switch (s) {
            case 'รอจัด': case 'รอจัดออเดอร์': return { bg: 'bg-orange-50 border-orange-200 text-orange-600', icon: <Loader2 size={14} className="text-orange-500 animate-spin" /> };
            case 'รอจัดส่ง': return { bg: 'bg-blue-50 border-blue-200 text-blue-600', icon: <Loader2 size={14} className="text-blue-500 animate-spin" /> };
            case 'รอรับบิล': return { bg: 'bg-purple-50 border-purple-200 text-purple-600', icon: <Loader2 size={14} className="text-purple-500 animate-spin" /> };
            case 'สินค้าไม่ครบ': return { bg: 'bg-rose-50 border-rose-200 text-rose-600', icon: <Loader2 size={14} className="text-rose-500 animate-spin" /> };
            case 'สินค้าค้างส่ง': return { bg: 'bg-rose-50 border-rose-200 text-rose-600', icon: <Loader2 size={14} className="text-rose-500 animate-spin" /> };
            case 'เรียบร้อย': return { bg: 'bg-emerald-50 border-emerald-200 text-emerald-600', icon: <CheckCircle2 size={14} className="text-emerald-500" /> };
            default: return { bg: 'bg-slate-50 border-slate-200 text-slate-500', icon: <Loader2 size={14} className="text-slate-400 animate-spin" /> };
        }
    };
    const getStatusRowBg = (status) => { const s = status || 'รอจัดออเดอร์'; switch (s) { case 'รอจัด': case 'รอจัดออเดอร์': return 'bg-orange-50/40 hover:bg-orange-50/70'; case 'รอจัดส่ง': return 'bg-blue-50/40 hover:bg-blue-50/70'; case 'รอรับบิล': return 'bg-purple-50/40 hover:bg-purple-50/70'; case 'สินค้าไม่ครบ': case 'สินค้าค้างส่ง': return 'bg-rose-50/40 hover:bg-rose-50/70'; case 'เรียบร้อย': return 'bg-emerald-50/40 hover:bg-emerald-50/70'; default: return 'bg-white hover:bg-slate-50/70'; } };
    const getCardStatusBg = (status) => { const s = status || 'รอจัดออเดอร์'; switch (s) { case 'รอจัด': case 'รอจัดออเดอร์': return 'border-orange-200/60 bg-orange-50/20'; case 'รอจัดส่ง': return 'border-blue-200/60 bg-blue-50/20'; case 'รอรับบิล': return 'border-purple-200/60 bg-purple-50/20'; case 'สินค้าไม่ครบ': case 'สินค้าค้างส่ง': return 'border-rose-200/60 bg-rose-50/20'; case 'เรียบร้อย': return 'border-emerald-200/60 bg-emerald-50/20'; default: return 'border-slate-100 bg-white'; } };

    return (
        <div className="w-full h-dvh flex bg-slate-50 overflow-hidden relative font-sans">
            {/* Sidebar Overlay */}
            {isSidebarOpen && (
                <div
                    className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[90] animate-in fade-in duration-300"
                    onClick={() => setIsSidebarOpen(false)}
                />
            )}

            {/* Sidebar */}
            <aside className={`fixed inset-y-0 left-0 w-[280px] bg-[#0f172a] text-white z-[100] transform transition-transform duration-300 shadow-2xl ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}>
                <div className="flex flex-col h-full p-6">
                    {/* Sidebar Header: Profile */}
                    <div className="mb-10">
                        <div className="flex items-center justify-between mb-8">
                            <div className="w-12 h-12 bg-gradient-to-br from-indigo-500 to-blue-600 rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-500/20 overflow-hidden">
                                {currentUser?.photo_url && !profileImgError ? (
                                    <img 
                                        src={currentUser.photo_url} 
                                        alt="Profile" 
                                        onError={() => setProfileImgError(true)} 
                                        className="w-full h-full object-cover animate-in fade-in duration-300" 
                                    />
                                ) : (
                                    <User size={24} strokeWidth={2.5} />
                                )}
                            </div>
                            <button onClick={() => setIsSidebarOpen(false)} className="p-2 hover:bg-white/10 rounded-xl transition-colors">
                                <X size={20} />
                            </button>
                        </div>
                        <div className="flex flex-col">
                            <h3 className="text-lg font-bold truncate pr-4">{currentUser?.name || 'สวัสดี'}</h3>
                            <div className="flex items-center gap-2 mt-1">
                                <div className="px-2 py-0.5 bg-blue-500/20 border border-blue-500/30 rounded text-[10px] font-bold text-blue-400 uppercase tracking-wider">{role || 'USER'}</div>
                                <span className="text-[10px] text-slate-500 font-bold uppercase tracking-widest">Enterprise Edition</span>
                            </div>
                        </div>
                    </div>

                    {/* Navigation Menu */}
                    <div className="flex-1 flex flex-col gap-2 overflow-y-auto no-scrollbar">
                        <div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2 px-2">เมนูหลัก</div>

                        <button onClick={() => setIsSidebarOpen(false)} className={`flex items-center gap-3 px-4 py-3.5 rounded-2xl font-bold transition-all shadow-lg ${currentScreen === 'dashboard' ? 'bg-indigo-600 text-white shadow-indigo-600/20' : 'text-slate-400 hover:text-white hover:bg-white/5 shadow-none'}`}>
                            <LayoutGrid size={20} strokeWidth={2.5} />
                            <span>หน้าหลัก</span>
                        </button>

                        {canViewStats && (
                            <button onClick={() => { setIsSidebarOpen(false); onNavigateStats(); }} className={`flex items-center gap-3 px-4 py-3.5 rounded-2xl font-bold transition-all shadow-lg ${currentScreen === 'statistics' ? 'bg-indigo-600 text-white shadow-indigo-600/20' : 'text-slate-400 hover:text-white hover:bg-white/5 shadow-none'}`}>
                                <DollarSign size={20} strokeWidth={2.5} />
                                <span>สรุปยอดขาย</span>
                            </button>
                        )}

                        <button onClick={() => { setIsSidebarOpen(false); onNavigateCustomers(); }} className={`flex items-center gap-3 px-4 py-3.5 rounded-2xl font-bold transition-all shadow-lg ${currentScreen === 'customers' ? 'bg-indigo-600 text-white shadow-indigo-600/20' : 'text-slate-400 hover:text-white hover:bg-white/5 shadow-none'}`}>
                            <UserCircle size={20} strokeWidth={2.5} />
                            <span>ประวัติลูกค้า</span>
                        </button>

                        {isAdmin && (
                            <button 
                                onClick={async () => { 
                                    setIsSidebarOpen(false); 
                                    await onSendSummary(orders); 
                                }} 
                                className="flex items-center gap-3 px-4 py-3.5 rounded-2xl font-bold transition-all text-slate-400 hover:text-emerald-400 hover:bg-white/5 shadow-none group text-[13px] whitespace-nowrap"
                                title="ส่งรายงานสรุปยอดและรายการงานค้างเข้า Telegram"
                            >
                                <Send size={20} strokeWidth={2.5} className="transition-colors" />
                                <span>ส่งสรุป Telegram</span>
                            </button>
                        )}

                        <div className="mt-6 text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2 px-2">ตัวกรองวันที่</div>
                        <div className="relative group px-1">
                            <Calendar size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 group-hover:text-indigo-400 transition-colors pointer-events-none" />
                            <input
                                type="date"
                                value={filters.date || ''}
                                onChange={(e) => onFilterChange('date', e.target.value)}
                                className="w-full bg-white/5 border border-white/10 rounded-2xl pl-10 pr-3 py-3 text-sm font-semibold text-white outline-none focus:border-indigo-500/50 transition-all hover:bg-white/10"
                                title="กรองตามวันที่"
                            />
                            {filters.date && (
                                <button onClick={() => onFilterChange('date', '')} className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 hover:text-rose-500 transition-colors">
                                    <X size={16} />
                                </button>
                            )}
                        </div>

                        <div className="mt-6 text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2 px-2">ตัวกรองปี</div>
                        <div className="relative group px-1">
                            <CalendarDays size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 group-hover:text-indigo-400 transition-colors pointer-events-none" />
                            <select
                                value={globalYearFilter}
                                onChange={(e) => setGlobalYearFilter(e.target.value)}
                                className="w-full bg-white/5 border border-white/10 rounded-2xl pl-10 pr-8 py-3 text-sm font-semibold text-white outline-none focus:border-indigo-500/50 transition-all hover:bg-white/10 appearance-none cursor-pointer"
                            >
                                <option value="all" className="bg-[#0f172a] text-white">ทุกปี</option>
                                {availableYears.map(y => (
                                    <option key={y} value={y} className="bg-[#0f172a] text-white">
                                        {parseInt(y) + 543}
                                    </option>
                                ))}
                            </select>
                            <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 pointer-events-none" size={16} />
                        </div>

                        {canCreateAndPack && (
                            <div className="mt-8 px-1">
                                <button
                                    onClick={() => { setIsSidebarOpen(false); onCreateOrder(null); }}
                                    className="w-full py-4 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl flex items-center justify-center gap-3 text-white font-bold shadow-xl shadow-indigo-600/20 hover:shadow-indigo-600/40 hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all"
                                >
                                    <PlusCircle size={24} strokeWidth={2.5} />
                                    <span>เพิ่มออเดอร์ใหม่</span>
                                </button>
                            </div>
                        )}
                    </div>

                    {/* Sidebar Footer */}
                    <div className="pt-6 border-t border-white/5 flex flex-col gap-3">
                        <button
                            onClick={onLogout}
                            className="w-full px-4 py-4 rounded-2xl bg-rose-500/10 hover:bg-rose-500 text-rose-500 hover:text-white border border-rose-500/20 font-bold transition-all flex items-center justify-center gap-3 active:scale-95 group"
                        >
                            <LogOut size={20} strokeWidth={2.5} className="group-hover:-translate-x-1 transition-transform" />
                            <span>ออกจากระบบ</span>
                        </button>
                    </div>
                </div>
            </aside>

            {/* Main Content Area */}
            <main ref={listContainerRef} onScroll={handleScroll} className="flex-1 h-dvh overflow-y-auto no-scrollbar relative flex flex-col">
                {/* Header */}
                <header className="sticky top-0 z-40 bg-white/80 backdrop-blur-md border-b border-slate-100 px-3 sm:px-6 py-3 sm:py-4 flex items-center gap-2 sm:gap-4 shrink-0">
                    <button onClick={() => setIsSidebarOpen(true)} className="p-2.5 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-xl transition-colors active:scale-95">
                        <Menu size={24} strokeWidth={2.5} />
                    </button>

                    <div className="relative flex-1 group">
                        <Search className="absolute left-2.5 sm:left-3.5 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-500 transition-colors" size={18} />
                        <input
                            type="text"
                            placeholder="ค้นหา..."
                            value={filters.query}
                            onChange={(e) => onFilterChange('query', e.target.value)}
                            className="w-full pl-9 sm:pl-11 pr-3 sm:pr-4 py-2.5 sm:py-3 rounded-2xl bg-slate-100 border-transparent focus:bg-white focus:border-indigo-400 focus:outline-none focus:ring-4 focus:ring-indigo-500/10 text-xs sm:text-sm font-semibold text-slate-700 transition-all placeholder-slate-400"
                        />
                    </div>

                    <div className="relative w-[130px] sm:w-[180px]">
                        <select
                            value={filters.status}
                            onChange={(e) => onFilterChange('status', e.target.value)}
                            className="w-full pl-2.5 sm:pl-4 pr-8 sm:pr-10 py-2.5 sm:py-3 rounded-2xl bg-slate-100 border-transparent focus:bg-white focus:border-indigo-400 focus:outline-none focus:ring-4 focus:ring-indigo-500/10 text-[12px] sm:text-sm font-bold text-slate-700 appearance-none transition-all"
                        >
                            <option value="">สถานะทั้งหมด</option>
                            <option value="รอจัดออเดอร์">รอจัดออเดอร์</option>
                            <option value="สินค้าไม่ครบ">สินค้าไม่ครบ</option>
                            <option value="รอจัดส่ง">รอจัดส่ง</option>
                            <option value="สินค้าค้างส่ง">สินค้าค้างส่ง</option>
                            <option value="รอรับบิล">รอรับบิล</option>
                            <option value="เรียบร้อย">เรียบร้อย</option>
                        </select>
                        <ChevronDown className="absolute right-2 sm:right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" size={16} />
                    </div>
                </header>

                <div className="p-6">
                    <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-6 px-1">
                        <div>
                            <h1 className="text-2xl sm:text-3xl font-black text-slate-800 tracking-tight flex items-center gap-3">
                                รายการออเดอร์
                                <span className="text-[10px] sm:text-xs font-medium px-3 py-1 bg-indigo-50 text-indigo-600 rounded-full border border-indigo-100">
                                    {filteredOrders.length.toLocaleString()} รายการ
                                </span>
                            </h1>
                        </div>
                        {(filters.query || filters.status || filters.date) && (
                            <button onClick={() => { onFilterChange('query', ''); onFilterChange('status', ''); onFilterChange('date', ''); }} className="flex items-center gap-1.5 text-xs font-bold text-rose-500 bg-rose-50 border border-rose-100 px-4 py-2 rounded-xl hover:bg-rose-100 transition-all active:scale-95 shadow-sm">
                                <X size={14} strokeWidth={3} /> ล้างตัวกรอง
                            </button>
                        )}
                    </div>
                    <div className="flex-grow w-full max-w-full mx-auto">
                        {isLoading ? (
                            <div className="flex-grow flex flex-col items-center justify-center text-slate-400 min-h-[200px] animate-pulse"><Loader2 size={36} className="mb-3 animate-spin text-indigo-400" /><p className="font-semibold">กำลังโหลด...</p></div>
                        ) : filteredOrders.length === 0 ? (
                            <div className="flex-grow flex flex-col items-center justify-center text-slate-400 min-h-[200px] bg-white rounded-3xl border border-slate-100 shadow-sm"><Search size={44} className="text-slate-200 mb-3" /><p className="font-semibold">ไม่พบรายการที่ค้นหา</p></div>
                        ) : (
                            <>
                                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 [2000px]:grid-cols-6 gap-5 pb-24">
                                    {filteredOrders.slice(0, displayLimit).map((order) => {
                                        const isSaving = order._isSaving;
                                        const statusStyle = isSaving ? { bg: 'bg-slate-50 border-slate-200 text-slate-400', icon: <Loader2 size={14} className="text-slate-400 animate-spin" /> } : getStatusStyle(order.status);
                                        const displayStatus = isSaving ? 'กำลังบันทึก...' : order.status;
                                        const restrictedType = (order.items && order.items.find(item => RESTRICTED_BILL_TYPES.includes(item.name))?.name) || (RESTRICTED_BILL_TYPES.includes(order.billType) ? order.billType : null);
                                        const nameClass = getCustomerNameClass(order.name);
                                        const daysFromOrder = getDaysDiff(order.date);
                                        const daysFromPack = order.packDate ? getDaysDiff(order.packDate) : 0;
                                        const isCompleted = order.status === 'เรียบร้อย';
                                        const cardBg = isSaving ? 'border-slate-100 bg-slate-50/50' : getCardStatusBg(order.status);

                                        return (
                                            <div key={order.id} onClick={() => !isSaving && onOrderDetail(order)} className={`rounded-[24px] p-5 shadow-[0_8px_30px_rgb(0,0,0,0.03)] border flex flex-col gap-3 ${cardBg} ${isSaving ? 'opacity-70 pointer-events-none scale-[0.98]' : 'cursor-pointer hover:shadow-[0_15px_35px_rgb(0,0,0,0.08)] hover:-translate-y-1 transition-all duration-300'} relative overflow-hidden group`}>
                                                <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-indigo-50/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity rounded-bl-full pointer-events-none"></div>

                                                {/* Header */}
                                                <div className="flex justify-between items-center relative z-10">
                                                    <span className="text-slate-500 text-[10px] font-semibold uppercase tracking-widest bg-slate-50 px-2.5 py-1.5 rounded-lg border border-slate-100">{formatDateForDisplay(order.date)}</span>
                                                    <div className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full border ${statusStyle.bg}`}>
                                                        {statusStyle.icon}
                                                        <span className={`text-[11px] font-semibold tracking-wide`}>{displayStatus}</span>
                                                    </div>
                                                </div>

                                                {/* Body */}
                                                <div className="flex flex-col relative z-10 mt-1">
                                                    {restrictedType && (<span className="bg-rose-100 text-rose-700 text-[10px] font-semibold px-2.5 py-1 rounded-lg border border-rose-200 flex items-center gap-1.5 w-fit shadow-sm mb-2.5"><Tag size={12} strokeWidth={3} /> {restrictedType}</span>)}
                                                    <h3 className={`text-slate-800 font-bold leading-tight ${nameClass}`}>{order.name}</h3>
                                                    <p className="text-slate-500 text-[11px] mt-1.5 leading-tight font-medium flex items-center gap-1"><MapPin size={12} className="text-slate-400" /> {order.location}</p>
                                                </div>

                                                {/* Footer Info (Badges) */}
                                                {!isCompleted && (
                                                    <div className="flex items-end justify-between relative z-10 pt-3 border-t border-slate-100 mt-1.5">
                                                        <div className="flex flex-col gap-1.5">
                                                            {daysFromOrder > 3 && (
                                                                <div className="flex items-center gap-1.5 px-2 py-0.5 bg-rose-50 text-rose-600 rounded-lg border border-rose-100 animate-pulse">
                                                                    <Clock size={10} strokeWidth={3} />
                                                                    <span className="text-[9px] font-bold uppercase tracking-wider">เกินกำหนด {daysFromOrder} วัน</span>
                                                                </div>
                                                            )}
                                                            {daysFromOrder <= 3 && daysFromOrder > 0 && (
                                                                <div className="flex items-center gap-1.5 px-2 py-0.5 bg-orange-50 text-orange-600 rounded-lg border border-orange-100">
                                                                    <Clock size={10} strokeWidth={3} />
                                                                    <span className="text-[9px] font-bold uppercase tracking-wider">ค้าง {daysFromOrder} วัน</span>
                                                                </div>
                                                            )}
                                                        </div>

                                                        <div className="flex flex-col items-end gap-1.5">
                                                            <button
                                                                onClick={(e) => { e.preventDefault(); e.stopPropagation(); !isSaving && canShipRole && onOpenDateModal(order); }}
                                                                className={`bg-slate-50 border border-slate-200 rounded-xl px-2.5 py-1.5 flex items-center gap-1.5 text-slate-500 shadow-sm ${!isSaving && canShipRole ? 'hover:bg-indigo-50 hover:border-indigo-200 transition-colors active:scale-95' : 'cursor-default'}`}
                                                                title={canShipRole ? "กำหนดวันส่ง" : "นัดส่ง"}
                                                            >
                                                                <CalendarDays size={12} className="text-indigo-400 pointer-events-none" />
                                                                <span className={`pointer-events-none text-[10px] font-semibold ${order.scheduledDeliveryDate ? 'text-slate-700' : 'text-slate-400'}`}>
                                                                    {formatDateForDisplay(order.scheduledDeliveryDate) || 'นัดส่ง'}
                                                                </span>
                                                            </button>
                                                            {order.scheduledDeliveryDate && order.sender && (
                                                                <span className="text-[9px] text-slate-400 font-medium flex items-center gap-1 pr-1 line-clamp-1 max-w-[120px]">
                                                                    <UserCircle size={10} className="shrink-0" /> <span className="line-clamp-1">{order.sender}</span>
                                                                </span>
                                                            )}
                                                        </div>
                                                    </div>
                                                )}
                                            </div>
                                        );
                                    })}
                                </div>
                            </>
                        )}
                    </div>
                </div>

                {/* ปุ่มกลับไปด้านบนสุด (Back to Top) */}
                {showBackToTop && (
                    <button
                        onClick={() => {
                            if (listContainerRef.current) {
                                listContainerRef.current.scrollTo({ top: 0, behavior: 'smooth' });
                            }
                        }}
                        className="fixed bottom-6 right-6 z-[9999] w-14 h-14 bg-indigo-600 text-white rounded-full shadow-2xl flex items-center justify-center transition-all hover:scale-110 active:scale-90 group border-4 border-white cursor-pointer"
                        title="กลับไปด้านบน"
                        style={{ display: 'flex' }}
                    >
                        <ChevronUp size={32} className="group-hover:-translate-y-1 transition-transform" />
                    </button>
                )}

            </main>
        </div>
    );
};

const OrderDetailScreen = ({ order, allOrders, onNavigate, onEditOrder, onEditPack, onEditShip, onEditBill, onBack, currentUser }) => {
    if (!order) return null;

    const role = currentUser?.role || '';
    const isAdmin = ROLE_GROUPS.ADMIN.includes(role);
    const canCreateAndPack = isAdmin || ROLE_GROUPS.QC_STORE.includes(role);
    const canShipRole = canCreateAndPack || ROLE_GROUPS.SHIPMENT.includes(role);
    const canBillRole = isAdmin;

    const currentIndex = allOrders ? allOrders.findIndex(o => o.id === order.id) : -1;
    const prevOrder = currentIndex > 0 ? allOrders[currentIndex - 1] : null;
    const nextOrder = (currentIndex !== -1 && currentIndex < allOrders.length - 1) ? allOrders[currentIndex + 1] : null;

    const getStatusBadge = (status) => { let colors = { bg: 'bg-slate-50 border-slate-200 text-slate-500', icon: <Loader2 size={16} className="animate-spin" /> }; if (status === 'เรียบร้อย') { colors = { bg: 'bg-emerald-50 border-emerald-200 text-emerald-600', icon: <CheckCircle2 size={16} /> }; } else if (status === 'สินค้าไม่ครบ' || status === 'สินค้าค้างส่ง') { colors = { bg: 'bg-rose-50 border-rose-200 text-rose-600', icon: <Loader2 size={16} className="animate-spin" /> }; } else if (status === 'รอจัด' || status === 'รอจัดออเดอร์') colors = { bg: 'bg-orange-50 border-orange-200 text-orange-600', icon: <Loader2 size={16} className="animate-spin" /> }; else if (status === 'รอจัดส่ง') colors = { bg: 'bg-blue-50 border-blue-200 text-blue-600', icon: <Loader2 size={16} className="animate-spin" /> }; else if (status === 'รอรับบิล') colors = { bg: 'bg-purple-50 border-purple-200 text-purple-600', icon: <Loader2 size={16} className="animate-spin" /> }; return (<span className={`px-3 py-1.5 ${colors.bg} text-[12px] rounded-full font-bold flex items-center gap-1.5 border shadow-sm uppercase tracking-wide`}>{colors.icon} {status}</span>); };

    const renderImages = (imgData, clickable = false) => {
        if (!imgData) return null;
        const images = imgData.split(',').filter(url => url.trim() !== '');
        if (images.length === 0) return null;

        // แปลงภาพก่อน render เพื่อความชัวร์ (เผื่อข้อมูลเก่าที่หลุดรอดมา)
        const transformedImages = images.map(url => formatDriveImageUrl(url));

        const ImageContent = ({ url }) => (<div className="w-full h-full"><img src={url} className="w-full h-full object-cover hover:scale-105 transition-transform duration-500" alt="Image" /></div>);

        if (transformedImages.length === 1) {
            const img = transformedImages[0];
            return (<div className="w-full aspect-square bg-slate-50 rounded-[24px] overflow-hidden mb-5 border border-slate-200 block shadow-sm hover:shadow-md transition-shadow">{clickable ? (<a href={img} target="_blank" rel="noreferrer" className="block w-full h-full"><ImageContent url={img} /></a>) : (<ImageContent url={img} />)}</div>);
        }

        return (<div className="grid grid-cols-2 gap-3 mb-5">{transformedImages.map((img, idx) => (<div key={idx} className="aspect-square bg-slate-50 rounded-[20px] overflow-hidden border border-slate-200 shadow-sm hover:shadow-md transition-shadow">{clickable ? (<a href={img} target="_blank" rel="noreferrer" className="block w-full h-full"><ImageContent url={img} /></a>) : (<ImageContent url={img} />)}</div>))}</div>);
    };

    const canShipStatus = !['รอจัดออเดอร์', 'สินค้าไม่ครบ'].includes(order.status);
    const canBillStatus = ['รอรับบิล', 'เรียบร้อย'].includes(order.status);

    const getActionClass = (isDisabled) => `p-2.5 rounded-xl border shadow-sm transition-all ${isDisabled ? 'opacity-40 cursor-not-allowed border-slate-200 text-slate-400 bg-slate-50' : 'text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 bg-white border-slate-200 active:scale-95'}`;
    const renderActionIcon = (isDisabled) => isDisabled ? <Lock size={20} strokeWidth={2.5} className="pointer-events-none" /> : <Pencil size={20} strokeWidth={2.5} className="pointer-events-none" />;

    return (
        <div className="w-full h-dvh overflow-y-auto no-scrollbar bg-slate-50 animate-in slide-in-from-right duration-300">
            <div className="bg-gradient-to-r from-indigo-600 to-blue-600 h-[64px] flex items-center px-4 text-white shrink-0 shadow-md relative z-10 justify-between">
                <div className="flex items-center flex-1">
                    <button onClick={onBack} className="p-2.5 modern-glass rounded-xl hover:bg-white/30 mr-4 transition-colors active:scale-95"><ChevronLeft size={24} strokeWidth={2.5} /></button>
                    <h1 className="text-lg sm:text-xl font-bold tracking-wide">รายละเอียด</h1>
                </div>
                {/* Navigation Buttons */}
                <div className="flex items-center gap-2">
                    <button
                        disabled={!prevOrder}
                        onClick={() => prevOrder && onNavigate(prevOrder)}
                        className={`p-2 rounded-xl transition-all ${!prevOrder ? 'opacity-30 cursor-not-allowed bg-white/10' : 'modern-glass hover:bg-white/30 active:scale-95'}`}
                    >
                        <ChevronLeft size={24} strokeWidth={2.5} />
                    </button>
                    <button
                        disabled={!nextOrder}
                        onClick={() => nextOrder && onNavigate(nextOrder)}
                        className={`p-2 rounded-xl transition-all ${!nextOrder ? 'opacity-30 cursor-not-allowed bg-white/10' : 'modern-glass hover:bg-white/30 active:scale-95'}`}
                    >
                        <ChevronRight size={24} strokeWidth={2.5} />
                    </button>
                </div>
            </div>
            <div className="p-5 pb-24"><div className="max-w-2xl mx-auto w-full flex flex-col gap-6">
                <OrderInfoCard order={order} onEdit={onEditOrder} isAdmin={canCreateAndPack} />

                <div className="bg-white rounded-[24px] shadow-sm border border-slate-200 overflow-hidden">
                    <div className="bg-gradient-to-r from-slate-50 to-white px-6 py-4 border-b border-slate-100 flex justify-between items-center">
                        <h3 className="text-slate-800 font-bold flex items-center gap-3 text-base"><div className="p-2 bg-orange-100 rounded-xl text-orange-600"><Package size={20} strokeWidth={2.5} /></div>จัดสินค้า</h3>
                        {canCreateAndPack && (
                            <button onClick={(e) => { e.preventDefault(); e.stopPropagation(); onEditPack(order); }} className="text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 p-2.5 bg-white rounded-xl border border-slate-200 shadow-sm transition-all active:scale-95"><Pencil size={20} strokeWidth={2.5} className="pointer-events-none" /></button>
                        )}
                    </div>
                    <div className="p-6"><div className="flex items-center justify-between mb-5"><span className="text-sm font-medium text-slate-500">สถานะ</span>{getStatusBadge(order.status)}</div><div className="flex justify-between mb-5 items-center"><span className="text-slate-500 text-sm font-medium">วันที่จัด</span><span className="text-slate-800 text-sm font-bold bg-slate-50 px-4 py-2 rounded-xl border border-slate-100">{formatDateForDisplay(order.packDate) || '-'}</span></div>{renderImages(order.packImage, false) || (<div className="w-full aspect-square bg-slate-50 rounded-[24px] flex items-center justify-center border-2 border-dashed border-slate-200 mb-5"><div className="flex flex-col items-center text-slate-400"><ImageIcon size={44} strokeWidth={1.5} /><span className="text-sm mt-3 font-medium">ไม่มีรูปสินค้าที่จัด</span></div></div>)}{order.packNote && <div className="text-sm bg-orange-50 p-4 rounded-2xl border border-orange-100 text-orange-800 font-medium leading-relaxed"><span className="block text-[10px] font-bold text-orange-500 mb-1.5 uppercase tracking-widest">หมายเหตุ</span>{order.packNote}</div>}<div className="mt-5 pt-4 border-t border-slate-100 flex justify-end items-center gap-1.5 text-xs text-slate-400 font-medium"><UserCircle size={16} /> <span>จัดโดย: <span className="text-slate-600 font-bold">{order.packedBy || '-'}</span></span></div></div>
                </div>

                <div className="bg-white rounded-[24px] shadow-sm border border-slate-200 overflow-hidden">
                    <div className="bg-gradient-to-r from-slate-50 to-white px-6 py-4 border-b border-slate-100 flex justify-between items-center">
                        <h3 className="text-slate-800 font-bold flex items-center gap-3 text-base"><div className="p-2 bg-blue-100 rounded-xl text-blue-600"><Truck size={20} strokeWidth={2.5} /></div> ส่งสินค้า</h3>
                        {canShipRole && (
                            <button onClick={(e) => { e.preventDefault(); e.stopPropagation(); canShipStatus && onEditShip(order); }} className={getActionClass(!canShipStatus)} disabled={!canShipStatus}>{renderActionIcon(!canShipStatus)}</button>
                        )}
                    </div>
                    <div className="p-6"><div className="flex items-center justify-between mb-5"><span className="text-sm font-medium text-slate-500">สถานะ</span>{getStatusBadge(order.status)}</div><div className="flex justify-between mb-5 bg-indigo-50/50 p-4 rounded-2xl border border-indigo-100 items-center"><span className="text-indigo-700 text-sm font-bold flex items-center gap-2"><div className="bg-indigo-100 p-2 rounded-lg"><CalendarDays size={18} /></div>นัดส่ง</span><div className="text-right"><span className="text-slate-800 text-base font-bold block">{formatDateForDisplay(order.scheduledDeliveryDate) || '-'}</span>{order.sender && <span className="text-[11px] text-slate-500 font-medium flex items-center justify-end gap-1 mt-1"><UserCircle size={12} /> {order.sender}</span>}</div></div><div className="flex justify-between mb-5 items-center"><span className="text-slate-500 text-sm font-medium">วันที่ส่งจริง</span><span className="text-slate-800 text-sm font-bold bg-slate-50 px-4 py-2 rounded-xl border border-slate-100">{formatDateForDisplay(order.deliveryDate) || '-'}</span></div><div className="flex flex-col gap-3 mb-5 mt-2">{renderImages(order.shippingImage, false) || (<div className="w-full aspect-square bg-slate-50 rounded-[24px] flex items-center justify-center border-2 border-dashed border-slate-200"><div className="flex flex-col items-center text-slate-400"><Camera size={44} strokeWidth={1.5} /><span className="text-sm mt-3 font-medium">ไม่มีรูปส่งสินค้า</span></div></div>)}</div>{order.shippingNote && <div className="text-sm bg-blue-50 p-4 rounded-2xl border border-blue-100 text-blue-800 font-medium leading-relaxed mt-2"><span className="block text-[10px] font-bold text-blue-500 mb-1.5 uppercase tracking-widest">หมายเหตุ</span>{order.shippingNote}</div>}<div className="mt-5 pt-4 border-t border-slate-100 flex justify-end items-center gap-1.5 text-xs text-slate-400 font-medium"><UserCircle size={16} /> <span>ส่งโดย: <span className="text-slate-600 font-bold">{order.shippedBy || '-'}</span></span></div></div>
                </div>

                <div className="bg-white rounded-[24px] shadow-sm border border-slate-200 overflow-hidden">
                    <div className="bg-gradient-to-r from-slate-50 to-white px-6 py-4 border-b border-slate-100 flex justify-between items-center">
                        <h3 className="text-slate-800 font-bold flex items-center gap-3 text-base"><div className="p-2 bg-purple-100 rounded-xl text-purple-600"><FileText size={20} strokeWidth={2.5} /></div> รับ-ส่งบิล</h3>
                        {canBillRole && (
                            <button onClick={(e) => { e.preventDefault(); e.stopPropagation(); canBillStatus && onEditBill(order); }} className={getActionClass(!canBillStatus)} disabled={!canBillStatus}>{renderActionIcon(!canBillStatus)}</button>
                        )}
                    </div>
                    <div className="p-6"><div className="flex justify-between items-center mb-5"><span className="text-slate-500 text-sm font-medium">วันที่รับบิล</span><span className="text-slate-800 text-sm font-bold bg-slate-50 px-4 py-2 rounded-xl border border-slate-100">{formatDateForDisplay(order.billDate) || '-'}</span></div>{canBillRole && renderImages(order.billImage, true)}{order.billNote && <div className="mt-5 text-sm bg-purple-50 p-4 rounded-2xl border border-purple-100 text-purple-800 font-medium leading-relaxed"><span className="block text-[10px] font-bold text-purple-500 mb-1.5 uppercase tracking-widest">หมายเหตุ</span>{order.billNote}</div>}<div className="mt-5 pt-4 border-t border-slate-100 flex justify-end items-center gap-1.5 text-xs text-slate-400 font-medium"><UserCircle size={16} /> <span>รับบิลโดย: <span className="text-slate-600 font-bold">{order.billedBy || '-'}</span></span></div></div>
                </div>
            </div></div>
        </div>);
};

const CreateOrderScreen = ({ onRequestSave, initialOrder, returnTo, showModal, changeScreen, customers, products, currentUser }) => {
    const isAdmin = ROLE_GROUPS.ADMIN.includes(currentUser?.role);
    const convertToInputDate = (displayDate) => { if (!displayDate) return getCurrentDate(); const parts = displayDate.split('/'); if (parts.length === 3) return `${parts[2]}-${parts[1]}-${parts[0]}`; return getCurrentDate(); };
    const isEditing = !!initialOrder;
    const generateAutoOrderNumber = () => { const now = new Date(); const yy = String(now.getFullYear()).slice(-2); const mm = String(now.getMonth() + 1).padStart(2, '0'); const dd = String(now.getDate()).padStart(2, '0'); const time = String(now.getHours()).padStart(2, '0') + String(now.getMinutes()).padStart(2, '0') + String(now.getSeconds()).padStart(2, '0'); return `ORD-${yy}${mm}${dd}-${time}`; };
    const [formData, setFormData] = useState({ orderNumber: initialOrder ? initialOrder.orderNumber : generateAutoOrderNumber(), date: getCurrentDate(), customerName: '', nickname: '', province: '', note: '', billType: '', price: '', salesCustomer: '', address: '', phoneNumber: '', taxId: '' });
    const [items, setItems] = useState([{ id: 1, name: '', size: '', qty: 1 }]);
    useEffect(() => { if (initialOrder) { setFormData({ orderNumber: initialOrder.orderNumber || '', date: toInputDate(initialOrder.date) || getCurrentDate(), customerName: initialOrder.name || '', nickname: initialOrder.nickname || '', province: initialOrder.location || '', note: initialOrder.note || '', billType: initialOrder.billType || '', price: initialOrder.price || '', salesCustomer: initialOrder.salesCustomer || '', address: initialOrder.address || '', phoneNumber: initialOrder.phoneNumber || '', taxId: initialOrder.taxId || '' }); if (initialOrder.items && initialOrder.items.length > 0) setItems(initialOrder.items.map((it, idx) => ({ ...it, id: it.id || `it-${Date.now()}-${idx}` }))); } }, [initialOrder]);
    const handleCustomerChange = (e) => { const selectedName = e.target.value; const cust = customers.find(c => c.name === selectedName); if (cust) { setFormData(prev => ({ ...prev, customerName: selectedName, address: cust.address, phoneNumber: cust.phone, nickname: cust.nickname, province: cust.province, salesCustomer: cust.sales || prev.salesCustomer, taxId: cust.taxId || prev.taxId })); } else { setFormData(prev => ({ ...prev, customerName: selectedName })); } };
    const handleProductChange = (id, val) => { const prod = products.find(p => p.name === val); setItems(items.map(item => item.id === id ? { ...item, name: val, size: prod ? prod.size : item.size } : item)); };
    const handleInputChange = (e) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); };
    const handleItemChange = (id, field, value) => { setItems(items.map(item => item.id === id ? { ...item, [field]: value } : item)); };
    const addItem = () => setItems([...items, { id: Date.now(), name: '', size: '', qty: 1 }]);
    const removeItem = (id) => { if (items.length > 1) setItems(items.filter(item => item.id !== id)); };
    const updateQty = (id, newValOrChange) => { setItems(items.map(item => { if (item.id === id) { let newQty; if (typeof newValOrChange === 'number') { newQty = Math.max(1, (parseInt(item.qty) || 0) + newValOrChange); } else { newQty = Math.max(1, parseInt(newValOrChange) || 1); } return { ...item, qty: newQty }; } return item; })); };
    const handlePriceBlur = () => { const num = parseFloat(formData.price); if (!isNaN(num)) { setFormData(prev => ({ ...prev, price: num.toFixed(2) })); } };
    const handleSaveClick = () => {
        if (!formData.customerName) { showModal('กรุณาระบุชื่อลูกค้า', 'error'); return; }
        if (!formData.salesCustomer) { showModal('กรุณาระบุ Sales ผู้ดูแล', 'error'); return; }
        const hasValidItem = items.some(i => i.name && i.name.trim() !== '');
        if (!hasValidItem) { showModal('กรุณาระบุรายการสินค้าอย่างน้อย 1 รายการ', 'error'); return; }
        let priceStr = String(formData.price || '0').replace(/,/g, '');
        let finalPrice = parseFloat(priceStr);
        if (isNaN(finalPrice)) finalPrice = 0;
        const shouldCalculateVAT = (formData.billType === 'VAT นอก' || formData.billType === 'VAT ใน');
        const originalPrice = initialOrder ? parseFloat(initialOrder.price) : -1;
        const isPriceModified = finalPrice !== originalPrice;
        const isBillTypeModified = initialOrder ? initialOrder.billType !== formData.billType : true;
        if (shouldCalculateVAT) { if (!initialOrder || isPriceModified || isBillTypeModified) { finalPrice = finalPrice / 1.07; } }
        const formattedPrice = finalPrice.toFixed(2);
        const orderData = { ...formData, price: formattedPrice, items };
        const mappedOrderData = { ...orderData, name: formData.customerName, location: formData.province };

        const finalOrder = {
            ...initialOrder,
            ...mappedOrderData,
            createdBy: initialOrder ? initialOrder.createdBy : currentUser?.name,
            id: initialOrder ? initialOrder.id : Date.now().toString(),
            status: isEditing && initialOrder.status ? initialOrder.status : 'รอจัดออเดอร์',
            originalOrderNumber: initialOrder ? initialOrder.orderNumber : null
        };
        onRequestSave(finalOrder, isEditing ? 'update' : 'create');
    };
    return (<div className="w-full h-dvh overflow-y-auto no-scrollbar bg-slate-50 animate-in slide-in-from-right duration-300"><div className="bg-gradient-to-r from-indigo-600 to-blue-600 h-[64px] flex items-center px-4 text-white shrink-0 shadow-md relative z-10"><button onClick={() => changeScreen(returnTo || 'dashboard')} className="p-2.5 modern-glass rounded-xl hover:bg-white/30 mr-4 transition-colors active:scale-95"><ChevronLeft size={24} strokeWidth={2.5} /></button><h1 className="text-lg sm:text-xl font-bold tracking-wide flex-1">{isEditing ? 'แก้ไขออเดอร์' : 'ออกออเดอร์'}</h1></div><div className="p-5 pb-24"><div className="max-w-2xl mx-auto w-full"><form className="flex flex-col gap-5 pb-20"><div className="flex gap-4"><div className="flex-1"><input type="text" name="orderNumber" value={formData.orderNumber} onChange={handleInputChange} readOnly={!isAdmin} placeholder="เลขที่" className={`w-full px-4 py-3.5 rounded-2xl font-semibold border transition-all shadow-sm ${isAdmin ? 'bg-slate-50 text-indigo-700 border-indigo-200 focus:bg-white focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-400' : 'bg-slate-100 text-slate-500 border-transparent cursor-not-allowed'}`} title={isAdmin ? "แอดมินแก้ไขได้" : "ออโต้รัน (แก้ไม่ได้)"} /></div><div className="flex-1"><DatePickerInput name="date" value={formData.date} onChange={handleInputChange} /></div></div><div className="w-full"><SearchableDropdown name="customerName" placeholder="ชื่อลูกค้า" options={customers.map(c => c.name)} value={formData.customerName} onChange={handleCustomerChange} /></div><div className="w-full"><input type="text" name="address" value={formData.address} onChange={handleInputChange} readOnly placeholder="ที่อยู่" className="w-full bg-slate-100 text-slate-500 border-transparent cursor-not-allowed pl-4 pr-10 py-3.5 rounded-2xl font-semibold shadow-sm placeholder-slate-400" /></div><div className="w-full"><input type="text" name="phoneNumber" value={formData.phoneNumber} onChange={handleInputChange} readOnly placeholder="เบอร์โทร" className="w-full bg-slate-100 text-slate-500 border-transparent cursor-not-allowed pl-4 pr-10 py-3.5 rounded-2xl font-semibold shadow-sm placeholder-slate-400" /></div><div className="flex gap-4"><div className="flex-1"><input name="nickname" placeholder="ชื่อเรียก" value={formData.nickname} onChange={handleInputChange} readOnly className="w-full bg-slate-100 text-slate-500 border-transparent cursor-not-allowed px-4 py-3.5 rounded-2xl font-semibold shadow-sm placeholder-slate-400" /></div><div className="flex-1"><SearchableDropdown name="province" placeholder="จังหวัด" options={MOCK_PROVINCES} value={formData.province} onChange={handleInputChange} readOnly={true} /></div></div><div className="w-full"><SearchableDropdown name="salesCustomer" placeholder="Sales (บังคับ)" options={MOCK_SALES_NAMES} value={formData.salesCustomer} onChange={handleInputChange} readOnly={true} /></div><div className="w-full"><input type="text" name="taxId" value={formData.taxId} onChange={handleInputChange} readOnly placeholder="เลขประจำตัวผู้เสียภาษี" className="w-full bg-slate-100 text-slate-500 border-transparent cursor-not-allowed pl-4 pr-10 py-3.5 rounded-2xl font-semibold shadow-sm placeholder-slate-400" /></div><div className="mt-4"><div className="flex items-center justify-between mb-4"><h3 className="text-slate-800 font-bold text-base sm:text-lg transition-all">รายการสินค้า</h3><button type="button" onClick={addItem} className="bg-indigo-100 hover:bg-indigo-200 text-indigo-700 px-3 sm:px-4 py-1.5 sm:py-2 rounded-xl text-xs sm:text-sm font-bold flex items-center gap-1.5 transition-colors shadow-sm active:scale-95"><Plus size={18} strokeWidth={3} /> เพิ่ม</button></div><div className="flex flex-col gap-4">{items.map((item, index) => (<div key={item.id} className="bg-white p-5 rounded-[24px] border border-slate-200 shadow-[0_4px_15px_rgb(0,0,0,0.03)] flex flex-col gap-4 relative" style={{ zIndex: items.length - index }}><div className="flex justify-between items-center"><span className="text-[10px] sm:text-xs font-bold tracking-widest uppercase text-indigo-500 bg-indigo-50 px-3 py-1.5 rounded-lg border border-indigo-100 transition-all">รายการ {index + 1}</span><button type="button" onClick={() => removeItem(item.id)} className="text-slate-400 hover:text-rose-600 hover:bg-rose-50 p-2 rounded-xl transition-colors active:scale-95"><Trash2 size={20} /></button></div><div className="relative z-20"><SearchableDropdown name="productName" placeholder="สินค้า" options={products.map(p => p.name)} value={item.name} onChange={(e) => handleProductChange(item.id, e.target.value)} /></div><div className="flex gap-4 relative z-10"><div className="flex-[1.2]"><input placeholder="ขนาด" value={item.size} onChange={(e) => handleItemChange(item.id, 'size', e.target.value)} className="w-full bg-slate-50 px-4 py-3.5 rounded-2xl border border-slate-200 focus:bg-white focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-400 transition-all shadow-sm text-slate-700 font-semibold placeholder-slate-400" /></div><div className="flex-1 bg-white rounded-2xl border border-slate-200 px-3 py-2 flex items-center justify-between shadow-sm"><span className="text-slate-500 font-medium text-xs sm:text-sm ml-1 transition-all">จำนวน</span><div className="flex items-center gap-1"><button type="button" onClick={() => updateQty(item.id, -1)} className="w-8 h-8 sm:w-10 sm:h-10 rounded-[12px] bg-slate-100 text-slate-600 flex items-center justify-center hover:bg-slate-200 active:scale-95 transition-all"><Minus size={16} strokeWidth={3} /></button><input type="number" value={item.qty} onChange={(e) => updateQty(item.id, e.target.value)} className="w-8 sm:w-10 text-center bg-transparent font-bold text-lg sm:text-xl text-indigo-600 outline-none p-0" /><button type="button" onClick={() => updateQty(item.id, 1)} className="w-8 h-8 sm:w-10 sm:h-10 rounded-[12px] bg-indigo-100 text-indigo-600 flex items-center justify-center hover:bg-indigo-200 active:scale-95 transition-all"><Plus size={16} strokeWidth={3} /></button></div></div></div></div>))}</div></div><div className="mt-4"><h3 className="text-slate-800 font-bold text-base sm:text-lg mb-4 transition-all">ราคาตามบิล</h3><div className="flex gap-4"><div className="flex-1"><SearchableDropdown name="billType" placeholder="บิล" options={MOCK_BILL_TYPES} value={formData.billType} onChange={handleInputChange} /></div><div className="flex-1 relative"><input type="number" name="price" value={formData.price} onChange={handleInputChange} onBlur={handlePriceBlur} placeholder="0.00" step="0.01" className="w-full bg-slate-50 pl-4 pr-4 py-3.5 rounded-2xl text-emerald-600 font-bold text-lg sm:text-xl border border-slate-200 focus:bg-white focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-400 transition-all shadow-sm text-right placeholder-slate-300" /></div></div></div><div className="mt-4"><textarea name="note" value={formData.note} onChange={handleInputChange} placeholder="หมายเหตุเพิ่มเติม...." rows={3} className="w-full bg-slate-50 px-4 py-4 rounded-2xl text-slate-700 font-medium border border-slate-200 focus:bg-white focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-400 transition-all shadow-sm resize-none placeholder-slate-400"></textarea></div><div className="flex gap-4 mt-8"><button type="button" onClick={() => changeScreen(returnTo || 'dashboard')} className="flex-1 py-4 rounded-2xl border-2 border-slate-200 text-slate-500 text-base sm:text-lg font-bold hover:bg-slate-50 hover:border-slate-300 transition-all active:scale-95">ยกเลิก</button><button type="button" onClick={handleSaveClick} className="flex-1 py-4 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-base sm:text-lg font-bold hover:shadow-[0_8px_20px_rgb(79,70,229,0.3)] hover:-translate-y-0.5 active:translate-y-0 transition-all duration-300">บันทึกออเดอร์</button></div></form></div></div></div>);
};

const PackOrderScreen = ({ order, onRequestSave, returnTo, showModal, changeScreen, currentUser }) => {
    const [packData, setPackData] = useState({ packDate: toInputDate(order?.packDate) || getCurrentDate(), expectedDate: '', note: order?.packNote || '', image: order?.packImage ? order.packImage.split(',').filter(u => u) : [] });
    const [productStatus, setProductStatus] = useState(order?.status === 'สินค้าไม่ครบ' ? 'incomplete' : 'complete');
    const handleInputChange = (e) => { const { name, value } = e.target; setPackData(prev => ({ ...prev, [name]: value })); };
    const handleImagesChange = (newImages) => { setPackData(prev => ({ ...prev, image: newImages })); };

    const handleSaveClick = () => {
        if (productStatus === 'complete') { if (!packData.packDate) { showModal('กรุณาระบุวันที่จัดสินค้า', 'error'); return; } if (!packData.image || packData.image.length === 0) { showModal('กรุณาแนบรูปสินค้าที่จัด', 'error'); return; } }
        if (productStatus === 'incomplete' && !packData.expectedDate) { showModal('กรุณาระบุวันที่คาดว่าจะเสร็จ', 'error'); return; }

        let targetStatus = 'รอจัดส่ง';
        if (productStatus === 'complete') {
            const hasShip = order?.shippingImage ? String(order.shippingImage).split(',').filter(u => u.trim()).length > 0 : false;
            const hasBill = order?.billImage ? String(order.billImage).split(',').filter(u => u.trim()).length > 0 : false;
            if (hasShip && hasBill) targetStatus = 'เรียบร้อย';
            else if (hasShip) targetStatus = 'รอรับบิล';
        } else {
            targetStatus = 'สินค้าไม่ครบ';
        }

        const updatedOrder = { ...order, status: targetStatus, packNote: packData.note, packDate: packData.packDate, packImage: packData.image, packedBy: currentUser?.name };
        onRequestSave(updatedOrder, 'update');
    };

    return (<div className="w-full h-dvh overflow-y-auto no-scrollbar bg-slate-50 animate-in slide-in-from-right duration-300"><div className="bg-gradient-to-r from-indigo-600 to-blue-600 h-[64px] flex items-center px-4 text-white shrink-0 shadow-md relative z-10"><button onClick={() => changeScreen(returnTo || 'dashboard')} className="p-2.5 modern-glass rounded-xl hover:bg-white/30 mr-4 transition-colors active:scale-95"><ChevronLeft size={24} strokeWidth={2.5} /></button><h1 className="text-xl font-bold tracking-wide flex-1">จัดออเดอร์</h1></div><div className="p-5 pb-24"><div className="max-w-2xl mx-auto w-full"><OrderInfoCard order={order} /><div className="mt-2 mb-6 flex gap-4"><button type="button" onClick={() => setProductStatus('complete')} className={`flex-1 py-4 rounded-2xl text-lg font-bold flex items-center justify-center gap-2 transition-all ${productStatus === 'complete' ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/30 ring-4 ring-emerald-500/20' : 'bg-white text-emerald-600 border-2 border-emerald-100 hover:bg-emerald-50'}`}><CheckCircle2 size={24} strokeWidth={2.5} />สินค้าครบ</button><button type="button" onClick={() => setProductStatus('incomplete')} className={`flex-1 py-4 rounded-2xl text-lg font-bold flex items-center justify-center gap-2 transition-all ${productStatus === 'incomplete' ? 'bg-rose-500 text-white shadow-lg shadow-rose-500/30 ring-4 ring-rose-500/20' : 'bg-white text-rose-600 border-2 border-rose-100 hover:bg-rose-50'}`}><X size={24} strokeWidth={2.5} />สินค้าไม่ครบ</button></div><form className="flex flex-col gap-6 pb-20">{productStatus === 'complete' && (<><div className="w-full"><span className="text-sm font-semibold text-slate-600 ml-2 mb-2 block">วันที่จัด (พ.ศ.)</span><DatePickerInput name="packDate" value={packData.packDate} onChange={handleInputChange} /></div><ImageUploadBox images={packData.image} onImagesChange={handleImagesChange} label="เพิ่มรูปสินค้าที่จัด (บังคับ)" icon={Camera} /></>)}{productStatus === 'incomplete' && (<div className="w-full"><span className="text-sm font-semibold text-slate-600 ml-2 mb-2 block">คาดว่าจะเสร็จ (พ.ศ.)</span><DatePickerInput name="expectedDate" value={packData.expectedDate} onChange={handleInputChange} /></div>)}<div><textarea name="note" value={packData.note} onChange={handleInputChange} placeholder={productStatus === 'incomplete' ? "ระบุสินค้าที่ขาด...." : "หมายเหตุเพิ่มเติม...."} rows={4} className="w-full bg-slate-50 px-5 py-4 rounded-[24px] text-slate-700 font-medium border border-slate-200 focus:bg-white focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-400 transition-all shadow-sm resize-none placeholder-slate-400"></textarea></div><div className="flex gap-4 mt-4"><button type="button" onClick={() => changeScreen(returnTo || 'dashboard')} className="flex-1 py-4 rounded-2xl border-2 border-slate-200 text-slate-500 text-lg font-bold hover:bg-slate-50 hover:border-slate-300 transition-all active:scale-95">ยกเลิก</button><button type="button" onClick={handleSaveClick} className="flex-1 py-4 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-lg font-bold hover:shadow-[0_8px_20px_rgb(79,70,229,0.3)] hover:-translate-y-0.5 active:translate-y-0 transition-all duration-300">บันทึก</button></div></form></div></div></div>);
};

const ShippingScreen = ({ order, onRequestSave, returnTo, showModal, changeScreen, currentUser }) => {
    const [deliveryStatus, setDeliveryStatus] = useState(order?.status === 'สินค้าค้างส่ง' ? 'incomplete' : 'complete');
    const [shippingData, setShippingData] = useState({ deliveryDate: toInputDate(order?.deliveryDate) || getCurrentDate(), expectedDate: '', note: order?.shippingNote || '', imageProof: order?.shippingImage ? order.shippingImage.split(',').filter(u => u) : [], imageLocation: order?.locationImage || null });
    const handleInputChange = (e) => { const { name, value } = e.target; setShippingData(prev => ({ ...prev, [name]: value })); };
    const handleProofChange = (newImages) => { setShippingData(prev => ({ ...prev, imageProof: newImages })); };

    const handleSaveClick = () => {
        if (deliveryStatus === 'complete') { if (!shippingData.deliveryDate) { showModal('กรุณาระบุวันที่ส่งสินค้า', 'error'); return; } if (!shippingData.imageProof || shippingData.imageProof.length === 0) { showModal('กรุณาแนบรูปส่งสินค้า', 'error'); return; } }
        if (deliveryStatus === 'incomplete' && !shippingData.expectedDate) { showModal('กรุณาระบุวันที่คาดว่าจะเสร็จ', 'error'); return; }

        let targetStatus = 'รอรับบิล';
        if (deliveryStatus === 'complete') {
            const hasBill = order?.billImage ? String(order.billImage).split(',').filter(u => u.trim()).length > 0 : false;
            if (hasBill) targetStatus = 'เรียบร้อย';
        } else {
            targetStatus = 'สินค้าค้างส่ง';
        }

        const updatedOrder = { ...order, status: targetStatus, deliveryDate: shippingData.deliveryDate, shippingNote: shippingData.note, shippingImage: shippingData.imageProof, locationImage: shippingData.imageLocation, shippedBy: currentUser?.name };
        onRequestSave(updatedOrder, 'update');
    };

    return (<div className="w-full h-dvh overflow-y-auto no-scrollbar bg-slate-50 animate-in slide-in-from-right duration-300"><div className="bg-gradient-to-r from-indigo-600 to-blue-600 h-[64px] flex items-center px-4 text-white shrink-0 shadow-md relative z-10"><button onClick={() => changeScreen(returnTo || 'dashboard')} className="p-2.5 modern-glass rounded-xl hover:bg-white/30 mr-4 transition-colors active:scale-95"><ChevronLeft size={24} strokeWidth={2.5} /></button><h1 className="text-xl font-bold tracking-wide flex-1">ส่งสินค้า</h1></div><div className="p-5 pb-24"><div className="max-w-2xl mx-auto w-full"><OrderInfoCard order={order} /><div className="bg-white p-6 rounded-[24px] border border-slate-200 mb-6 shadow-[0_8px_30px_rgb(0,0,0,0.04)]"><h3 className="font-bold text-slate-800 mb-5 flex items-center gap-3"><div className="p-2 bg-blue-100 rounded-xl text-blue-600"><Package size={20} strokeWidth={2.5} /></div>ข้อมูลการจัด</h3><div className="flex items-center justify-between mb-5"><div className="flex items-center gap-2 text-emerald-700 bg-emerald-100 px-4 py-2 rounded-xl text-sm font-bold border border-emerald-200"><CheckCircle2 size={18} strokeWidth={2.5} /> สินค้าครบ</div><div className="text-sm font-medium text-slate-600 bg-slate-50 px-4 py-2 rounded-xl border border-slate-100">วันที่จัด: {formatDateForDisplay(order?.packDate) || '-'}</div></div>{order.packImage && order.packImage.split(',').filter(u => u).length > 0 ? (<div className={order.packImage.split(',').filter(u => u).length === 1 ? "w-full aspect-square bg-slate-50 rounded-[24px] overflow-hidden mb-5 border border-slate-200 shadow-sm" : "grid grid-cols-2 gap-4 mb-5"}>{order.packImage.split(',').filter(u => u).map((img, idx) => (<div key={idx} className={order.packImage.split(',').filter(u => u).length === 1 ? "w-full h-full" : "aspect-square bg-slate-50 rounded-[20px] overflow-hidden border border-slate-200 shadow-sm"}><img src={formatDriveImageUrl(img)} className="w-full h-full object-cover" alt="Packed" /></div>))}</div>) : (<div className="w-full aspect-square mx-auto bg-slate-50 rounded-[24px] flex items-center justify-center border-2 border-dashed border-slate-200"><div className="flex flex-col items-center text-slate-400"><Box size={50} strokeWidth={1.5} /><span className="text-sm mt-3 font-medium">ไม่มีรูปสินค้าที่จัด</span></div></div>)}{order?.packNote && (<div className="mt-5 bg-orange-50 p-4 rounded-2xl border border-orange-100 text-orange-800 text-sm font-medium"><span className="text-orange-500 text-[10px] font-bold block mb-1.5 uppercase tracking-widest">หมายเหตุ (จัดสินค้า)</span>{order.packNote}</div>)}<div className="mt-6 mb-2 flex gap-4"><button type="button" onClick={() => { setDeliveryStatus('complete'); setShippingData(prev => ({ ...prev, imageLocation: null })); }} className={`flex-1 py-4 rounded-2xl text-lg font-bold flex items-center justify-center gap-2 transition-all ${deliveryStatus === 'complete' ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/30 ring-4 ring-emerald-500/20' : 'bg-white text-emerald-600 border-2 border-emerald-100 hover:bg-emerald-50'}`}><CheckCircle2 size={24} strokeWidth={2.5} />ส่งสำเร็จ</button><button type="button" onClick={() => setDeliveryStatus('incomplete')} className={`flex-1 py-4 rounded-2xl text-lg font-bold flex items-center justify-center gap-2 transition-all ${deliveryStatus === 'incomplete' ? 'bg-rose-500 text-white shadow-lg shadow-rose-500/30 ring-4 ring-rose-500/20' : 'bg-white text-rose-600 border-2 border-rose-100 hover:bg-rose-50'}`}><X size={24} strokeWidth={2.5} />ค้างส่ง</button></div></div><form className="flex flex-col gap-6 pb-20">{deliveryStatus === 'complete' && (<><div className="w-full"><span className="text-sm font-semibold text-slate-600 ml-2 mb-2 block">วันที่ส่งเสร็จ (พ.ศ.)</span><DatePickerInput name="deliveryDate" value={shippingData.deliveryDate} onChange={handleInputChange} /></div><ImageUploadBox images={shippingData.imageProof} onImagesChange={handleProofChange} label="เพิ่มรูปส่งสินค้า (บังคับ)" icon={Camera} /><div className="w-full"><span className="text-sm font-semibold text-slate-600 ml-2 mb-2 block">หมายเหตุ</span><textarea name="note" value={shippingData.note} onChange={handleInputChange} placeholder="หมายเหตุเพิ่มเติม...." rows={3} className="w-full bg-slate-50 px-5 py-4 rounded-[24px] text-slate-700 font-medium border border-slate-200 focus:bg-white focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-400 transition-all shadow-sm resize-none placeholder-slate-400" /></div></>)}{deliveryStatus === 'incomplete' && (<><ImageUploadBox images={shippingData.imageProof} onImagesChange={handleProofChange} label="เพิ่มรูปหลักฐาน" icon={Camera} /><div className="w-full"><span className="text-sm font-semibold text-slate-600 ml-2 mb-2 block">คาดว่าจะเสร็จ (พ.ศ.)</span><DatePickerInput name="expectedDate" value={shippingData.expectedDate} onChange={handleInputChange} /></div><div><span className="text-sm font-semibold text-slate-600 ml-2 mb-2 block">ระบุสาเหตุที่ค้างส่ง</span><textarea name="note" value={shippingData.note} onChange={handleInputChange} placeholder="ระบุสาเหตุ...." rows={3} className="w-full bg-slate-50 px-5 py-4 rounded-[24px] text-slate-700 font-medium border border-slate-200 focus:bg-white focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-400 transition-all shadow-sm resize-none placeholder-slate-400" /></div></>)}<div className="flex gap-4 mt-4"><button type="button" onClick={() => changeScreen(returnTo || 'dashboard')} className="flex-1 py-4 rounded-2xl border-2 border-slate-200 text-slate-500 text-lg font-bold hover:bg-slate-50 hover:border-slate-300 transition-all active:scale-95">ยกเลิก</button><button type="button" onClick={handleSaveClick} className="flex-1 py-4 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-lg font-bold hover:shadow-[0_8px_20px_rgb(79,70,229,0.3)] hover:-translate-y-0.5 active:translate-y-0 transition-all duration-300">บันทึก</button></div></form></div></div></div>);
};

const BillOrderScreen = ({ order, onRequestSave, returnTo, showModal, changeScreen, currentUser }) => {
    const handleSaveClick = () => {
        if (!billData.billDate) { showModal('กรุณาระบุวันที่รับบิล', 'error'); return; }
        if (!billData.image || billData.image.length === 0) { showModal('กรุณาแนบรูปบิล', 'error'); return; }
        const updatedOrder = { ...order, status: 'เรียบร้อย', billDate: billData.billDate, billNote: billData.note, billImage: billData.image, billedBy: currentUser?.name };
        onRequestSave(updatedOrder, 'update');
    };
    const [billData, setBillData] = useState({ billDate: toInputDate(order?.billDate) || getCurrentDate(), note: order?.billNote || '', image: order?.billImage ? order.billImage.split(',').filter(u => u) : [] });
    const handleInputChange = (e) => { const { name, value } = e.target; setBillData(prev => ({ ...prev, [name]: value })); };
    const handleImagesChange = (newImages) => { setBillData(prev => ({ ...prev, image: newImages })); };
    return (<div className="w-full h-dvh overflow-y-auto no-scrollbar bg-slate-50 animate-in slide-in-from-right duration-300"><div className="bg-gradient-to-r from-indigo-600 to-blue-600 h-[64px] flex items-center px-4 text-white shrink-0 shadow-md relative z-10"><button onClick={() => changeScreen(returnTo || 'dashboard')} className="p-2.5 modern-glass rounded-xl hover:bg-white/30 mr-4 transition-colors active:scale-95"><ChevronLeft size={24} strokeWidth={2.5} /></button><h1 className="text-xl font-bold tracking-wide flex-1">รับ-ส่งบิล</h1></div><div className="p-5 pb-24"><div className="max-w-2xl mx-auto w-full"><OrderInfoCard order={order} /><div className="bg-white p-6 rounded-[24px] border border-slate-200 mb-6 shadow-[0_8px_30px_rgb(0,0,0,0.04)]"><h3 className="font-bold text-slate-800 mb-5 flex items-center gap-3"><div className="p-2 bg-blue-100 rounded-xl text-blue-600"><Package size={20} strokeWidth={2.5} /></div>ข้อมูลการจัด</h3><div className="flex items-center justify-between mb-5"><div className="flex items-center gap-2 text-emerald-700 bg-emerald-100 px-4 py-2 rounded-xl text-sm font-bold border border-emerald-200"><CheckCircle2 size={18} strokeWidth={2.5} /> สินค้าครบ</div><div className="text-sm font-medium text-slate-600 bg-slate-50 px-4 py-2 rounded-xl border border-slate-100">วันที่จัด: {formatDateForDisplay(order?.packDate) || '-'}</div></div>{order.packImage && order.packImage.split(',').filter(u => u).length > 0 ? (<div className={order.packImage.split(',').filter(u => u).length === 1 ? "w-full aspect-square bg-slate-50 rounded-[24px] overflow-hidden mb-5 border border-slate-200 shadow-sm" : "grid grid-cols-2 gap-4 mb-5"}>{order.packImage.split(',').filter(u => u).map((img, idx) => (<div key={idx} className={order.packImage.split(',').filter(u => u).length === 1 ? "w-full h-full" : "aspect-square bg-slate-50 rounded-[20px] overflow-hidden border border-slate-200 shadow-sm"}><img src={formatDriveImageUrl(img)} className="w-full h-full object-cover" alt="Packed" /></div>))}</div>) : (<div className="w-full aspect-square mx-auto bg-slate-50 rounded-[24px] flex items-center justify-center border-2 border-dashed border-slate-200"><div className="flex flex-col items-center text-slate-400"><ImageIcon size={50} strokeWidth={1.5} /><span className="text-sm mt-3 font-medium">ไม่มีรูปสินค้าที่จัด</span></div></div>)}{order?.packNote && (<div className="mt-5 bg-orange-50 p-4 rounded-2xl border border-orange-100 text-orange-800 text-sm font-medium"><span className="text-orange-500 text-[10px] font-bold block mb-1.5 uppercase tracking-widest">หมายเหตุ (จัดสินค้า)</span>{order.packNote}</div>)}</div><div className="bg-white p-6 rounded-[24px] border border-slate-200 mb-6 shadow-[0_8px_30px_rgb(0,0,0,0.04)]"><h3 className="font-bold text-slate-800 mb-5 flex items-center gap-3"><div className="p-2 bg-indigo-100 rounded-xl text-indigo-600"><Truck size={20} strokeWidth={2.5} /></div>ข้อมูลการส่ง</h3><div className="flex items-center justify-between mb-5"><div className="flex items-center gap-2 text-emerald-700 bg-emerald-100 px-4 py-2 rounded-xl text-sm font-bold border border-emerald-200"><CheckCircle2 size={18} strokeWidth={2.5} /> ส่งสำเร็จ</div><div className="text-sm font-medium text-slate-600 bg-slate-50 px-4 py-2 rounded-xl border border-slate-100">วันที่ส่ง: {formatDateForDisplay(order?.deliveryDate) || '-'}</div></div><div className="flex flex-col gap-3 mb-5">{order.shippingImage && order.shippingImage.split(',').filter(u => u).length > 0 ? (<div className={order.shippingImage.split(',').filter(u => u).length === 1 ? "w-full aspect-square bg-slate-50 rounded-[24px] overflow-hidden mb-2 border border-slate-200 shadow-sm" : "grid grid-cols-2 gap-4 mb-2"}>{order.shippingImage.split(',').filter(u => u).map((img, idx) => (<div key={idx} className={order.shippingImage.split(',').filter(u => u).length === 1 ? "w-full h-full" : "aspect-square bg-slate-50 rounded-[20px] overflow-hidden border border-slate-200 shadow-sm"}><img src={formatDriveImageUrl(img)} className="w-full h-full object-cover" alt="Shipping" /></div>))}</div>) : (<div className="w-full aspect-square bg-slate-50 rounded-[24px] flex items-center justify-center border-2 border-dashed border-slate-200"><div className="flex flex-col items-center text-slate-400"><Camera size={50} strokeWidth={1.5} /><span className="text-sm mt-3 font-medium">ไม่มีรูปส่งสินค้า</span></div></div>)}</div>{order.shippingNote && <div className="text-sm bg-blue-50 p-4 rounded-2xl border border-blue-100 text-blue-800 font-medium mt-2"><span className="text-blue-500 text-[10px] font-bold block mb-1.5 uppercase tracking-widest">หมายเหตุ (ส่งสินค้า)</span>{order.shippingNote}</div>}</div><form className="flex flex-col gap-6 pb-20"><div className="w-full"><span className="text-sm font-semibold text-slate-600 ml-2 mb-2 block">วันที่รับบิล (พ.ศ.)</span><DatePickerInput name="billDate" value={billData.billDate} onChange={handleInputChange} /></div><ImageUploadBox images={billData.image} onImagesChange={handleImagesChange} label="เพิ่มรูปบิล (บังคับ)" icon={Camera} compressionMode="high" /><div><span className="text-sm font-semibold text-slate-600 ml-2 mb-2 block">หมายเหตุ</span><textarea name="note" value={billData.note} onChange={handleInputChange} placeholder="หมายเหตุเพิ่มเติม...." rows={3} className="w-full bg-slate-50 px-5 py-4 rounded-[24px] text-slate-700 font-medium border border-slate-200 focus:bg-white focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-400 transition-all shadow-sm resize-none placeholder-slate-400" /></div><div className="flex gap-4 mt-4"><button type="button" onClick={() => changeScreen(returnTo || 'dashboard')} className="flex-1 py-4 rounded-2xl border-2 border-slate-200 text-slate-500 text-lg font-bold hover:bg-slate-50 hover:border-slate-300 transition-all active:scale-95">ยกเลิก</button><button type="button" onClick={handleSaveClick} className="flex-1 py-4 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-lg font-bold hover:shadow-[0_8px_20px_rgb(79,70,229,0.3)] hover:-translate-y-0.5 active:translate-y-0 transition-all duration-300">บันทึก</button></div></form></div></div></div>);
};

// ==========================================
// 📟 DIGITAL ODOMETER COMPONENTS
// ==========================================
const OdometerDigit = ({ char }) => {
    if (isNaN(parseInt(char))) return <span className="opacity-60 px-0.5">{char}</span>;
    const digit = parseInt(char);
    // สร้าง strip [9, 8, 7, 6, 5, 4, 3, 2, 1, 0, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0] เพื่อให้ scroll ลื่นไหล
    const digits = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
    return (
        <div className="relative inline-block h-[1em] overflow-hidden" style={{ width: '0.62em' }}>
            <div
                className="absolute transition-transform duration-1000 ease-[cubic-bezier(0.34,1.56,0.64,1)] flex flex-col"
                style={{ transform: `translateY(-${(9 - digit) * 10}%)` }}
            >
                {digits.map((n, i) => (
                    <div key={i} className="h-[1em] flex items-center justify-center">
                        {n}
                    </div>
                ))}
            </div>
        </div>
    );
};

const DigitalOdometer = ({ value, className }) => {
    const [isPressed, setIsPressed] = useState(false);
    const [fakeOffset, setFakeOffset] = useState(0);
    const timerRef = useRef(null);

    // จำลองยอดขยับเรียลไทม์
    useEffect(() => {
        timerRef.current = setInterval(() => {
            if (!isPressed) {
                // ขยับยอดเล่นๆ ทีละนิดให้ดูเหมือนมีออเดอร์เข้าตลอด
                setFakeOffset(prev => prev + (Math.random() * 8 + 2));
            }
        }, 2500);
        return () => clearInterval(timerRef.current);
    }, [isPressed]);

    // เมื่อเลิกกด ให้รีเซ็ต fakeOffset กลับมาเริ่มจากยอดจริงใหม่
    useEffect(() => {
        if (!isPressed) setFakeOffset(0);
    }, [isPressed]);

    const displayValue = isPressed ? value : (value + fakeOffset);
    const formatted = displayValue.toLocaleString('th-TH', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

    return (
        <div
            className={`${className} cursor-pointer select-none active:scale-[0.97] transition-all relative group h-[1.1em] flex items-center justify-center sm:justify-start`}
            onMouseDown={() => setIsPressed(true)}
            onMouseUp={() => setIsPressed(false)}
            onMouseLeave={() => setIsPressed(false)}
            onTouchStart={() => setIsPressed(true)}
            onTouchEnd={() => setIsPressed(false)}
        >
            <div className="flex items-center">
                <span className="mr-2 opacity-70">฿</span>
                {formatted.split('').map((char, idx) => (
                    <OdometerDigit key={idx} char={char} />
                ))}
            </div>

            {/* Tooltip เมื่อไม่ได้กด */}
            {!isPressed && (
                <div className="absolute -bottom-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap">
                    <span className="bg-black/60 backdrop-blur-md text-white text-[9px] font-bold px-3 py-1 rounded-full border border-white/10 shadow-xl">
                        กดค้างเพื่อดูยอดจริง
                    </span>
                </div>
            )}
        </div>
    );
};

// ==========================================
// 📊 STATISTICS SCREEN
// ==========================================
const StatisticsScreen = ({ orders, customers, globalYearFilter, setGlobalYearFilter, availableYears, onBack, onOrderDetail }) => {
    const [selectedRep, setSelectedRep] = useState(null);
    const [repFilter, setRepFilter] = useState('all'); // all, at-risk, inactive
    const [repSort, setRepSort] = useState('desc'); // desc, asc
    const [repSearch, setRepSearch] = useState('');
    const [selectedStatusAudit, setSelectedStatusAudit] = useState(null);
    const [historyModalCust, setHistoryModalCust] = useState(null);
    const qScrollRef = useRef(null);
    const mScrollRef = useRef(null);
    const [selectedCustMonth, setSelectedCustMonth] = useState({});

    useEffect(() => {
        const handleWheel = (e, ref) => {
            if (e.deltaY !== 0 && ref.current) {
                // Check if the container is actually scrollable horizontally
                const canScroll = ref.current.scrollWidth > ref.current.clientWidth;
                if (canScroll) {
                    ref.current.scrollLeft += e.deltaY;
                    e.preventDefault();
                }
            }
        };

        const qEl = qScrollRef.current;
        const mEl = mScrollRef.current;

        const onQWheel = (e) => handleWheel(e, qScrollRef);
        const onMWheel = (e) => handleWheel(e, mScrollRef);

        if (qEl) qEl.addEventListener('wheel', onQWheel, { passive: false });
        if (mEl) mEl.addEventListener('wheel', onMWheel, { passive: false });

        return () => {
            if (qEl) qEl.removeEventListener('wheel', onQWheel);
            if (mEl) mEl.removeEventListener('wheel', onMWheel);
        };
    }, []);

    // 🛡️ ระบบ Normalization ชื่อสำหรับการจับคู่ที่แม่นยำขึ้น
    const normalizeName = (name) => {
        if (!name) return "";
        return String(name)
            .trim()
            .replace(/^(หจก\.|หจก|บจก\.|บจก|บริษัท|ร้าน)\s*/g, "")
            .replace(/\s+/g, "");
    };

    const stats = useMemo(() => {
        const validOrders = orders.filter(o => {
            const nameStr = String(o.name || '');
            if (nameStr.includes('#NUM!') || nameStr.includes('#REF!')) return false;
            if (globalYearFilter !== 'all') {
                const d = toInputDate(o.date);
                if (!d || !d.startsWith(globalYearFilter)) return false;
            }
            return true;
        });

        const totalRevenue = validOrders.reduce((sum, o) => sum + (parseFloat(o.price) || 0), 0);
        const totalOrders = validOrders.length;
        const completedOrders = validOrders.filter(o => o.status === 'เรียบร้อย').length;
        const pendingOrders = totalOrders - completedOrders;

        const salesMap = {};
        const statusMap = {};
        const urgentTasks = [];
        const billTypeStats = { 'NO VAT': 0, 'VAT นอก': 0, 'VAT ใน': 0 };
        const monthlyStats = Array(12).fill(0).map(() => ({ total: 0, count: 0 }));
        const quarterlyStats = Array(4).fill(0).map(() => ({ total: 0, count: 0 }));
        const repMap = {};

        validOrders.forEach(o => {
            const s = o.salesCustomer || 'ไม่ระบุ';
            const status = o.status || 'รอจัดออเดอร์';
            const price = parseFloat(o.price) || 0;
            const billType = o.billType || 'NO VAT';
            const orderDate = new Date(toInputDate(o.date));
            const monthIdx = isNaN(orderDate.getTime()) ? -1 : orderDate.getMonth();
            const quarterIdx = monthIdx === -1 ? -1 : Math.floor(monthIdx / 3);

            // Sales Map for basic breakdown
            salesMap[s] = (salesMap[s] || 0) + price;

            // Status Map
            statusMap[status] = (statusMap[status] || 0) + 1;

            // Bill Type Stats
            if (billType.includes('VAT นอก')) billTypeStats['VAT นอก'] += price;
            else if (billType.includes('VAT ใน')) billTypeStats['VAT ใน'] += price;
            else billTypeStats['NO VAT'] += price;

            // Monthly & Quarterly Stats
            if (monthIdx !== -1) {
                monthlyStats[monthIdx].total += price;
                monthlyStats[monthIdx].count += 1;
                quarterlyStats[quarterIdx].total += price;
                quarterlyStats[quarterIdx].count += 1;
            }

            // Rep Detailed Map
            if (!repMap[s]) {
                repMap[s] = { name: s, total: 0, count: 0, monthlyActivity: Array(12).fill(0), customers: new Set() };
            }
            repMap[s].total += price;
            repMap[s].count += 1;
            if (o.name) repMap[s].customers.add(o.name);
            if (monthIdx !== -1) repMap[s].monthlyActivity[monthIdx] += price;

            // Urgent Tasks
            if (status !== 'เรียบร้อย') {
                const days = getDaysDiff(o.date);
                if (days > 3) {
                    urgentTasks.push({ ...o, days });
                }
            }
        });

        // --- 📊 Advanced Salesperson Portfolio Logic ---
        // 🔍 ทำการค้นหาชื่อเซลล์ที่อาจจะไม่มีใน MOCK แต่มีข้อมูลในระบบ (Dynamic Discovery)
        const cleanName = (n) => n?.trim().replace(/\s+/g, ' ') || '';

        const allSalesNames = [...new Set([
            ...MOCK_SALES_NAMES.map(cleanName),
            ...validOrders.map(o => cleanName(o.salesCustomer)).filter(s => s && s !== 'ไม่ระบุ'),
            ...(customers || []).map(c => cleanName(c.sales)).filter(Boolean)
        ])].filter(Boolean);

        // 🔍 สร้างรายชื่อพนักงานที่มีชื่อใน 'ระบบเซลล์' (Active DB)
        const activeSalesFromDB = [...new Set((customers || []).map(c => cleanName(c.sales)).filter(Boolean))];

        const salesBreakdown = allSalesNames.map(rawName => {
            // 🏷️ ตรวจสอบสถานะ: เป็น Active ถ้าอยู่ใน MOCK หรือ มีรายชื่อลูกค้าในมือในระบบเซลล์
            const isActive = MOCK_SALES_NAMES.map(cleanName).includes(rawName) || activeSalesFromDB.includes(rawName);
            const displayName = isActive ? rawName : `${rawName} (ลาออก/ไม่อยู่ในระบบเซลล์)`;

            const repOrders = validOrders.filter(o => cleanName(o.salesCustomer) === rawName);
            const assignedCustomers = (customers || []).filter(c => cleanName(c.sales) === rawName);

            // 🔄 เจาะลึกรายนามลูกค้าในมือ (Union ระหว่าง ลูกค้าที่ได้รับมอบหมาย + ลูกค้าที่ส่งยอดมาจริง)
            const portfolioNames = [...new Set([
                ...(assignedCustomers || []).map(c => cleanName(c.name)),
                ...repOrders.map(o => cleanName(o.name))
            ])].filter(Boolean);

            const customerInsights = portfolioNames.map(custName => {
                // ค้นหาข้อมูลเบื้องต้นของลูกค้า (ถ้ามีในระบบเซลล์)
                const cust = (customers || []).find(c => cleanName(c.name) === cleanName(custName));

                // ค้นหาออเดอร์ของลูกค้านี้ (ใช้ Normalization เพื่อความแม่นยำ)
                const custOrders = repOrders.filter(o => normalizeName(o.name) === normalizeName(custName));
                const totalAmount = custOrders.reduce((sum, o) => sum + (parseFloat(o.price) || 0), 0);

                // ตารางกิจกรรม 12 เดือน
                const months = Array(12).fill(false);
                const monthlyTotals = Array(12).fill(0);
                custOrders.forEach(o => {
                    const d = toInputDate(o.date);
                    if (d) {
                        const m = new Date(d).getMonth();
                        months[m] = true;
                        monthlyTotals[m] += (parseFloat(o.price) || 0);
                    }
                });

                // ตรวจสอบความล่าช้า (เกณฑ์ 3 เดือน = สีส้ม)
                const lastOrder = custOrders.sort((a, b) => (toInputDate(b.date) || "").localeCompare(toInputDate(a.date) || ""))[0];
                const daysSinceLast = lastOrder ? getDaysDiff(lastOrder.date) : 999;

                // ประวัติสินค้า (3 ตัวล่าสุด)
                const recentItems = [];
                custOrders.forEach(o => {
                    if (o.items) o.items.forEach(i => {
                        if (recentItems.length < 3 && !recentItems.includes(i.name)) recentItems.push(i.name);
                    });
                });

                // ดึงเบอร์โทร: ลำดับความสำคัญ คือ ระบบ customers DB > ออเดอร์ล่าสุด
                const phoneFromDB = cust?.phone || cust?.phoneNumber || '';
                const phoneFromOrder = custOrders.find(o => o.phoneNumber)?.phoneNumber || '';
                const phone = phoneFromDB || phoneFromOrder;

                return {
                    name: custName,
                    salesRep: rawName,
                    province: cust?.province || 'ไม่ระบุพื้นที่',
                    phone,
                    totalSales: totalAmount,
                    orderCount: custOrders.length,
                    months,
                    monthlyTotals,
                    lastOrderDate: lastOrder?.date || null,
                    daysSinceLast,
                    isAtRisk: daysSinceLast > 90, // ขาดการสั่งซื้อเกิน 3 เดือน (สีส้ม)
                    recentItems,
                    fullHistory: custOrders.sort((a, b) => (toInputDate(b.date) || "").localeCompare(toInputDate(a.date) || ""))
                };
            });

            const repTotal = repOrders.reduce((sum, o) => sum + (parseFloat(o.price) || 0), 0);

            return {
                name: displayName,
                rawName: rawName,
                total: repTotal,
                count: repOrders.length,
                details: {
                    name: displayName,
                    rawName: rawName,
                    total: repTotal,
                    count: repOrders.length,
                    activeCustomers: customerInsights.filter(ci => ci.orderCount > 0).length,
                    inactiveCustomers: customerInsights.filter(ci => ci.orderCount === 0).length,
                    atRiskCustomers: customerInsights.filter(ci => ci.isAtRisk && ci.orderCount > 0).length,
                    customerInsights: customerInsights.sort((a, b) => b.totalSales - a.totalSales)
                }
            };
        }).sort((a, b) => b.total - a.total);

        // --- 🏆 Calculate "Total" (ทั้งหมด) Rep Details ---
        const allPortfolioNames = [...new Set([
            ...(customers || []).map(c => cleanName(c.name)),
            ...validOrders.map(o => cleanName(o.name))
        ])].filter(Boolean);

        const totalCustomerInsights = allPortfolioNames.map(custName => {
            const cust = (customers || []).find(c => cleanName(c.name) === cleanName(custName));
            const custOrders = validOrders.filter(o => normalizeName(o.name) === normalizeName(custName));
            const totalAmount = custOrders.reduce((sum, o) => sum + (parseFloat(o.price) || 0), 0);
            const months = Array(12).fill(false);
            const monthlyTotals = Array(12).fill(0);
            custOrders.forEach(o => {
                const d = toInputDate(o.date);
                if (d) {
                    const m = new Date(d).getMonth();
                    months[m] = true;
                    monthlyTotals[m] += (parseFloat(o.price) || 0);
                }
            });
            const lastOrder = custOrders.sort((a, b) => (toInputDate(b.date) || "").localeCompare(toInputDate(a.date) || ""))[0];
            const daysSinceLast = lastOrder ? getDaysDiff(lastOrder.date) : 999;
            const recentItems = [];
            custOrders.forEach(o => {
                if (o.items) o.items.forEach(i => {
                    if (recentItems.length < 3 && !recentItems.includes(i.name)) recentItems.push(i.name);
                });
            });
            const phone = (cust?.phone || cust?.phoneNumber || '') || (custOrders.find(o => o.phoneNumber)?.phoneNumber || '');

            return {
                name: custName,
                salesRep: cust?.sales || (lastOrder?.salesCustomer || 'ไม่ระบุ'),
                province: cust?.province || 'ไม่ระบุพื้นที่',
                phone,
                totalSales: totalAmount,
                orderCount: custOrders.length,
                months,
                monthlyTotals,
                lastOrderDate: lastOrder?.date || null,
                daysSinceLast,
                isAtRisk: daysSinceLast > 90,
                recentItems,
                fullHistory: custOrders.sort((a, b) => (toInputDate(b.date) || "").localeCompare(toInputDate(a.date) || ""))
            };
        });

        const totalRepDetails = {
            name: "ทั้งหมด",
            rawName: "ทั้งหมด",
            total: totalRevenue,
            count: totalOrders,
            activeCustomers: totalCustomerInsights.filter(ci => ci.orderCount > 0).length,
            inactiveCustomers: totalCustomerInsights.filter(ci => ci.orderCount === 0).length,
            atRiskCustomers: totalCustomerInsights.filter(ci => ci.isAtRisk && ci.orderCount > 0).length,
            customerInsights: totalCustomerInsights.sort((a, b) => b.totalSales - a.totalSales)
        };

        urgentTasks.sort((a, b) => b.days - a.days);

        return {
            validOrders,
            totalRevenue, totalOrders, completedOrders, pendingOrders,
            salesBreakdown, statusMap, urgentTasks,
            billTypeStats, monthlyStats, quarterlyStats,
            totalRepDetails
        };
    }, [orders, customers, globalYearFilter]);

    // 🕵️ รายการออเดอร์สำหรับการตรวจสอบ (Audit List)
    const auditOrders = useMemo(() => {
        if (!selectedStatusAudit) return [];
        return stats.validOrders
            .filter(o => (o.status || 'รอจัดออเดอร์') === selectedStatusAudit)
            .map(o => ({
                ...o,
                pendingDays: getDaysDiff(o.date)
            }))
            .sort((a, b) => b.pendingDays - a.pendingDays);
    }, [selectedStatusAudit, stats.validOrders]);

    return (
        <div className="w-full h-full flex flex-col bg-[#F8FAFC] animate-in slide-in-from-right duration-300">
            <header className="px-6 pt-12 pb-6 bg-white border-b border-slate-100 flex items-center gap-4 sticky top-0 z-50">
                <button onClick={onBack} className="p-3 bg-slate-50 rounded-2xl text-slate-400 hover:bg-slate-100 hover:text-teal-600 transition-all active:scale-95 shadow-sm border border-slate-100">
                    <ChevronLeft size={24} />
                </button>
                <div className="flex-1">
                    <h2 className="text-xl font-bold text-slate-800 tracking-tight">สรุปยอดขาย</h2>
                    <p className="text-[10px] text-teal-600 font-black uppercase tracking-widest mt-0.5 flex items-center gap-1.5">
                        <span className="w-1.5 h-1.5 bg-teal-500 rounded-full animate-pulse"></span>
                        สรุปข้อมูลออเดอร์
                    </p>
                </div>
                <div className="relative w-[110px] sm:w-[130px]">
                    <select
                        value={globalYearFilter}
                        onChange={(e) => setGlobalYearFilter(e.target.value)}
                        className="w-full pl-2.5 sm:pl-4 pr-8 sm:pr-10 py-2.5 sm:py-3 rounded-2xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-teal-400 focus:outline-none focus:ring-4 focus:ring-teal-500/10 text-[12px] sm:text-sm font-bold text-slate-700 appearance-none transition-all"
                    >
                        <option value="all">ทุกปี</option>
                        {availableYears.map(y => <option key={y} value={y}>{parseInt(y) + 543}</option>)}
                    </select>
                    <ChevronDown className="absolute right-2 sm:right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" size={16} />
                </div>
            </header>

            <div className="flex-1 overflow-y-auto no-scrollbar p-6 space-y-8">
                {/* 💳 Top Cards Section */}
                <section>
                    <div className="grid grid-cols-2 gap-4">
                        <div className="col-span-2 bg-gradient-to-br from-emerald-500 via-teal-600 to-cyan-700 p-8 rounded-[40px] text-white shadow-xl shadow-teal-500/20 relative overflow-hidden group">
                            <div className="absolute top-[-20px] right-[-20px] w-48 h-48 bg-white/10 rounded-full blur-3xl group-hover:scale-110 transition-transform duration-700"></div>
                            <div className="relative z-10 flex flex-col items-center sm:items-start text-center sm:text-left">
                                <p className="text-teal-50 text-[10px] sm:text-xs font-bold uppercase tracking-[0.2em] mb-4 opacity-80">ยอดขายรวมสุทธิปีปัจจุบัน</p>
                                <DigitalOdometer
                                    value={stats.totalRevenue}
                                    className="text-[42px] sm:text-6xl lg:text-7xl font-black tabular-nums tracking-tighter leading-none mb-6"
                                />
                                <div className="flex items-center gap-4 flex-wrap justify-center sm:justify-start">
                                    <div className="px-5 py-2 bg-white/10 rounded-2xl text-[11px] font-black border border-white/10 uppercase tracking-widest backdrop-blur-md">ทั้งหมด: {stats.totalOrders}</div>
                                    <div className="px-5 py-2 bg-emerald-400/20 rounded-2xl text-[11px] font-black border border-emerald-400/30 text-emerald-100 uppercase tracking-widest backdrop-blur-md">สำเร็จ: {stats.completedOrders}</div>
                                </div>
                            </div>
                        </div>

                        {/* 🧾 Bill Type Breakdown (Moved Up) */}
                        <div className="col-span-2 bg-white rounded-[32px] p-7 border border-slate-100 shadow-sm">
                            <h4 className="text-slate-800 font-bold mb-5 flex items-center gap-2.5">
                                <div className="p-2 bg-indigo-50 text-indigo-600 rounded-xl"><FileText size={16} /></div>
                                <span className="text-xs sm:text-sm transition-all">ยอดตามประเภทบิล</span>
                            </h4>
                            <div className="grid grid-cols-3 gap-3">
                                {Object.entries(stats.billTypeStats).map(([type, total], idx) => (
                                    <div key={idx} className="p-4 bg-slate-50/50 rounded-2xl border border-slate-100 flex flex-col items-center">
                                        <p className="text-[9px] text-slate-400 font-black uppercase tracking-widest mb-1">{type}</p>
                                        <p className="text-[13px] font-black text-slate-700">฿{formatNumber(total)}</p>
                                    </div>
                                ))}
                            </div>
                        </div>

                        {/* 📈 Periodic Trends (Moved Up & Full Numbers) */}
                        <div className="col-span-2 bg-white rounded-[32px] p-7 border border-slate-100 shadow-sm space-y-6">
                            <h4 className="text-slate-800 font-bold mb-1 flex items-center gap-2.5">
                                <div className="p-2 bg-amber-50 text-amber-600 rounded-xl"><CalendarDays size={16} /></div>
                                <span className="text-xs sm:text-sm transition-all">ยอดรายเดือน & รายไตรมาส</span>
                            </h4>

                            <div className="space-y-6">
                                <div>
                                    <p className="text-[9px] text-slate-400 font-black uppercase tracking-widest mb-3 pl-1">รายไตรมาส (Quarterly)</p>
                                    <div
                                        ref={qScrollRef}
                                        className="flex md:grid md:grid-cols-4 gap-4 overflow-x-auto md:overflow-visible pb-4 pt-1 snap-x touch-pan-x cursor-grab active:cursor-grabbing scroll-smooth w-full no-scrollbar md:no-scrollbar-none"
                                    >
                                        {stats.quarterlyStats.map((q, idx) => (
                                            <div key={idx} className="min-w-[150px] md:min-w-0 p-5 bg-white rounded-3xl border border-slate-100 flex flex-col items-center shrink-0 snap-center hover:shadow-lg transition-all duration-300">
                                                <span className="text-[10px] font-black text-amber-600 mb-1.5 uppercase">ไตรมาส {idx + 1}</span>
                                                <span className="text-sm font-black text-slate-700 truncate w-full text-center">฿{formatNumber(q.total)}</span>
                                            </div>
                                        ))}
                                    </div>
                                </div>

                                <div>
                                    <p className="text-[9px] text-slate-400 font-black uppercase tracking-widest mb-3 pl-1">ยอดรายเดือน (Monthly Trend)</p>
                                    <div
                                        ref={mScrollRef}
                                        className="flex md:grid md:grid-cols-4 lg:grid-cols-6 gap-4 overflow-x-auto md:overflow-visible pb-6 pt-1 snap-x touch-pan-x cursor-grab active:cursor-grabbing scroll-smooth w-full no-scrollbar md:no-scrollbar-none"
                                    >
                                        {stats.monthlyStats.map((m, idx) => {
                                            const monthNames = ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.'];
                                            return (
                                                <div key={idx} className="min-w-[140px] md:min-w-0 p-5 bg-white rounded-3xl border border-slate-100 flex flex-col items-center shrink-0 snap-center hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                                                    <span className="text-[10px] font-black text-slate-400 mb-2 uppercase tracking-tight">{monthNames[idx]}</span>
                                                    <span className="text-sm sm:text-base font-black text-teal-600 transition-all">฿{formatNumber(m.total)}</span>
                                                </div>
                                            );
                                        })}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* 📊 Sales by Rep Section */}
                <section className="bg-white rounded-[40px] p-8 border border-slate-100 shadow-sm">
                    <h4 className="text-slate-800 font-bold mb-8 flex items-center gap-2.5">
                        <div className="p-2 bg-teal-50 text-teal-600 rounded-xl"><User size={18} /></div>
                        เปรียบเทียบยอดขายตามพนักงาน
                    </h4>
                    <div className="space-y-7">
                        {/* 🏆 Row: "ทั้งหมด" (Total) */}
                        <div className="group cursor-pointer active:scale-[0.98] transition-all pb-2 border-b border-slate-50" onClick={() => setSelectedRep(stats.totalRepDetails)}>
                            <div className="flex justify-between items-end mb-2.5 px-1">
                                <div className="flex flex-col">
                                    <div className="flex items-center gap-1.5 flex-wrap">
                                        <span className="text-sm sm:text-base font-black text-indigo-700 group-hover:text-indigo-600 transition-all leading-snug">ทั้งหมด</span>
                                        <div className="px-2 py-0.5 bg-indigo-50 text-indigo-600 text-[8px] font-black rounded-md uppercase tracking-widest border border-indigo-100 ml-1">Total All Sales</div>
                                        <ArrowRight size={12} className="text-indigo-300 group-hover:text-indigo-500 opacity-0 group-hover:opacity-100 transition-all -translate-x-1 group-hover:translate-x-0 shrink-0" />
                                    </div>
                                    <span className="text-[8px] sm:text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-0.5">สรุปผลงานพนักงานทุกคนรวมกัน</span>
                                </div>
                                <div className="text-right">
                                    <span className="text-base sm:text-lg font-black text-indigo-600 tabular-nums transition-all">฿{formatNumber(stats.totalRevenue)}</span>
                                </div>
                            </div>
                            <div className="h-3 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-100 p-0.5">
                                <div className="h-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-full transition-all duration-1000 shadow-[0_0_8px_rgba(99,102,241,0.3)]" style={{ width: '100%' }}></div>
                            </div>
                        </div>

                        {stats.salesBreakdown.map((s, idx) => (
                            <div key={idx} className="group cursor-pointer active:scale-[0.98] transition-all" onClick={() => setSelectedRep(s.details)}>
                                <div className="flex justify-between items-end mb-2.5 px-1">
                                    <div className="flex flex-col">
                                        <div className="flex items-center gap-1.5 flex-wrap">
                                            <span className="text-xs sm:text-[13px] font-bold text-slate-700 group-hover:text-teal-600 transition-all leading-snug">{s.name}</span>
                                            <ArrowRight size={10} className="text-slate-300 group-hover:text-teal-400 opacity-0 group-hover:opacity-100 transition-all -translate-x-1 group-hover:translate-x-0 shrink-0" />
                                        </div>
                                        <span className="text-[8px] sm:text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-0.5">คลิกดูรายละเอียดรายบุคคล</span>
                                    </div>
                                    <div className="text-right">
                                        <span className="text-xs sm:text-sm font-black text-teal-600 tabular-nums transition-all">฿{formatNumber(s.total)}</span>
                                    </div>
                                </div>
                                <div className="h-2.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-100 p-0.5">
                                    <div
                                        className="h-full bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full transition-all duration-1000 shadow-[0_0_8px_rgba(20,184,166,0.3)]"
                                        style={{ width: `${stats.totalRevenue > 0 ? (s.total / stats.totalRevenue) * 100 : 0}%` }}
                                    ></div>
                                </div>
                            </div>
                        ))}
                    </div>
                </section>


            </div>

            {/* 👤 Salesperson Detail Overlay */}
            {selectedRep && (
                <div className="fixed inset-0 z-[100] flex flex-col bg-black/40 backdrop-blur-sm p-4 animate-in fade-in duration-200">
                    <div className="mt-auto bg-white rounded-[48px] w-full max-h-[90vh] flex flex-col shadow-2xl animate-in slide-in-from-bottom duration-300 overflow-hidden border border-white/20">
                        <div className="p-8 pb-4 flex justify-between items-center border-b border-slate-100">
                            <div>
                                <h3 className="text-xl sm:text-2xl font-black text-slate-800 transition-all">{selectedRep.name}</h3>
                                <p className="text-[10px] sm:text-xs text-teal-600 font-bold uppercase tracking-widest mt-1">สรุปข้อมูลส่วนตัวปีปัจจุบัน</p>
                            </div>
                            <div className="flex items-center gap-2">
                                <button
                                    onClick={() => {
                                        // --- Client-Side CSV Generation ---
                                        const isTotalAll = selectedRep.name === 'ทั้งหมด';

                                        const filteredForExport = selectedRep.customerInsights
                                            .filter(ci => {
                                                if (repFilter === 'at-risk') return ci.isAtRisk && ci.orderCount > 0;
                                                if (repFilter === 'inactive') return ci.orderCount === 0;
                                                return true;
                                            })
                                            .filter(ci => repSearch.trim() === '' || ci.name.toLowerCase().includes(repSearch.toLowerCase()))
                                            .sort((a, b) => {
                                                if (isTotalAll) {
                                                    const compSales = String(a.salesRep || '').localeCompare(String(b.salesRep || ''));
                                                    if (compSales !== 0) return compSales;
                                                    return String(a.province || '').localeCompare(String(b.province || ''));
                                                }
                                                return repSort === 'desc' ? b.totalSales - a.totalSales : a.totalSales - b.totalSales;
                                            });

                                        const filterLabel = repFilter === 'at-risk' ? 'AtRisk' : repFilter === 'inactive' ? 'ฐานลูกค้า' : 'ทั้งหมด';
                                        const sortLabel = isTotalAll ? 'เรียงตามเซลล์และจังหวัด' : (repSort === 'desc' ? 'ยอดมากไปน้อย' : 'ยอดน้อยไปมาก');
                                        const searchLabel = repSearch.trim() ? `_คัดกรอง-${repSearch.trim()}` : '';

                                        const headers = isTotalAll
                                            ? ['ลำดับ', 'ชื่อลูกค้า', 'รายชื่อเซลล์', 'จังหวัด', 'เบอร์โทร', 'ยอดซื้อรวม (บาท)', 'จำนวนออเดอร์', 'วันที่สั่งล่าสุด', 'ขาดช่วง (วัน)', 'สถานะ', 'สินค้าล่าสุด']
                                            : ['ลำดับ', 'ชื่อลูกค้า', 'จังหวัด', 'เบอร์โทร', 'ยอดซื้อรวม (บาท)', 'จำนวนออเดอร์', 'วันที่สั่งล่าสุด', 'ขาดช่วง (วัน)', 'สถานะ', 'สินค้าล่าสุด'];

                                        const rows = filteredForExport.map((ci, idx) => {
                                            const baseRow = [
                                                idx + 1,
                                                `"${ci.name}"`,
                                                `"${ci.province || '-'}"`,
                                                `"${ci.phone || '-'}"`,
                                                ci.totalSales.toFixed(2),
                                                ci.orderCount,
                                                ci.lastOrderDate ? formatDateForDisplay(ci.lastOrderDate) : '-',
                                                ci.orderCount > 0 ? ci.daysSinceLast : '-',
                                                ci.isAtRisk ? 'ต้องติดตาม' : ci.orderCount === 0 ? 'ยังไม่สั่งซื้อ' : 'ปกติ',
                                                `"${ci.recentItems.join(', ') || '-'}"`
                                            ];
                                            if (isTotalAll) {
                                                baseRow.splice(2, 0, `"${ci.salesRep || '-'}"`);
                                            }
                                            return baseRow;
                                        });

                                        const csvContent = [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
                                        const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
                                        const url = URL.createObjectURL(blob);
                                        const link = document.createElement('a');
                                        const salesName = selectedRep.rawName || selectedRep.name;
                                        link.href = url;
                                        link.download = `ลูกค้า_${salesName}_${filterLabel}_${sortLabel}${searchLabel}.csv`;
                                        document.body.appendChild(link);
                                        link.click();
                                        document.body.removeChild(link);
                                        URL.revokeObjectURL(url);
                                    }}
                                    className="p-2.5 bg-teal-50 border border-teal-200 text-teal-700 rounded-2xl hover:bg-teal-500 hover:text-white hover:border-teal-500 transition-all active:scale-95 shadow-sm"
                                    title="Export CSV ตามข้อมูลที่กรองอยู่"
                                >
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" /></svg>
                                </button>
                                <button onClick={() => { setSelectedRep(null); setRepFilter('all'); setRepSort('desc'); setRepSearch(''); setSelectedCustMonth({}); }} className="p-3 bg-slate-100 rounded-2xl text-slate-500 hover:bg-slate-200 transition-all">
                                    <X size={24} />
                                </button>
                            </div>
                        </div>

                        <div className="flex-1 overflow-y-auto p-4 md:p-8 space-y-8 no-scrollbar bg-slate-50/30">
                            {/* 📈 Executive Summary Cards (Interactive Filters) */}
                            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
                                <div className="bg-white p-5 sm:p-6 rounded-[32px] border border-teal-100 shadow-sm shadow-teal-500/5 cursor-pointer active:scale-95 transition-all" onClick={() => setRepFilter('all')}>
                                    <p className="text-[9px] sm:text-[10px] text-teal-600 font-black uppercase tracking-widest mb-1">ยอดขายรวม</p>
                                    <p className="text-xl sm:text-2xl font-black text-slate-800">฿{formatNumber(selectedRep.total)}</p>
                                    <p className="text-[8px] sm:text-[9px] text-slate-400 font-bold mt-1 uppercase">สะสมปีปัจจุบัน</p>
                                </div>
                                <div className="bg-white p-5 sm:p-6 rounded-[32px] border border-sky-100 shadow-sm shadow-sky-500/5">
                                    <p className="text-[9px] sm:text-[10px] text-sky-600 font-black uppercase tracking-widest mb-1">จำนวนออเดอร์</p>
                                    <p className="text-xl sm:text-2xl font-black text-slate-800">{selectedRep.count} <span className="text-xs font-bold text-slate-400">งาน</span></p>
                                    <p className="text-[8px] sm:text-[9px] text-slate-400 font-bold mt-1 uppercase">รายการทั้งหมด</p>
                                </div>
                                <div className={`p-5 sm:p-6 rounded-[32px] border shadow-sm shadow-orange-500/5 cursor-pointer active:scale-95 transition-all ${repFilter === 'at-risk' ? 'bg-orange-500 border-orange-500 text-white' : 'bg-white border-orange-100'}`} onClick={() => setRepFilter(repFilter === 'at-risk' ? 'all' : 'at-risk')}>
                                    <p className={`text-[9px] sm:text-[10px] font-black uppercase tracking-widest mb-1 ${repFilter === 'at-risk' ? 'text-white/80' : 'text-orange-600'}`}>ต้องติดตาม (At Risk)</p>
                                    <p className={`text-xl sm:text-2xl font-black ${repFilter === 'at-risk' ? 'text-white' : 'text-slate-800'}`}>{selectedRep.atRiskCustomers} <span className={`text-xs font-bold ${repFilter === 'at-risk' ? 'text-white/70' : 'text-slate-400'}`}>เจ้า</span></p>
                                    <p className={`text-[8px] sm:text-[9px] font-bold mt-1 uppercase ${repFilter === 'at-risk' ? 'text-white/60' : 'text-slate-400'}`}>ขาดช่วงเกิน 3 เดือน</p>
                                </div>
                                <div className={`p-5 sm:p-6 rounded-[32px] border shadow-sm cursor-pointer active:scale-95 transition-all ${repFilter === 'inactive' ? 'bg-slate-700 border-slate-700 text-white' : 'bg-white border-slate-100'}`} onClick={() => setRepFilter(repFilter === 'inactive' ? 'all' : 'inactive')}>
                                    <p className={`text-[9px] sm:text-[10px] font-black uppercase tracking-widest mb-1 ${repFilter === 'inactive' ? 'text-white/80' : 'text-slate-500'}`}>ฐานลูกค้าในมือ</p>
                                    <p className={`text-xl sm:text-2xl font-black ${repFilter === 'inactive' ? 'text-white' : 'text-slate-800'}`}>{selectedRep.customerInsights.length} <span className={`text-xs font-bold ${repFilter === 'inactive' ? 'text-white/70' : 'text-slate-400'}`}>เจ้า</span></p>
                                    <p className={`text-[8px] sm:text-[9px] font-bold mt-1 uppercase ${repFilter === 'inactive' ? 'text-white/60' : 'text-slate-400'}`}>ยังไม่สั่ง {selectedRep.inactiveCustomers} เจ้า</p>
                                </div>
                            </div>

                            {/* 🔍 Customer Portfolio Insights */}
                            <div className="space-y-6">
                                {/* Search Box */}
                                <div className="relative group px-1">
                                    <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-teal-500 transition-colors pointer-events-none" size={16} />
                                    <input
                                        type="text"
                                        placeholder="ค้นหาลูกค้า..."
                                        value={repSearch}
                                        onChange={(e) => setRepSearch(e.target.value)}
                                        className="w-full pl-10 pr-4 py-2.5 rounded-2xl bg-white border border-slate-200 focus:border-teal-400 focus:ring-4 focus:ring-teal-500/10 focus:outline-none text-sm font-semibold text-slate-700 placeholder-slate-400 transition-all shadow-sm"
                                    />
                                    {repSearch && (
                                        <button onClick={() => setRepSearch('')} className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-rose-500 transition-colors">
                                            <X size={14} />
                                        </button>
                                    )}
                                </div>

                                <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 px-2">
                                    <h4 className="text-slate-800 font-black flex items-center gap-2.5">
                                        <div className="p-2 bg-indigo-50 text-indigo-500 rounded-xl"><User size={18} /></div>
                                        {repFilter === 'at-risk' ? 'กลุ่มต้องติดตาม (At Risk)' : repFilter === 'inactive' ? 'กลุ่มลูกค้าที่ยังไม่สั่งซื้อ' : 'รายชื่อและประวัติลูกค้าทั้งหมด'}
                                    </h4>
                                    <div className="flex items-center gap-2">
                                        <button
                                            onClick={() => setRepSort(repSort === 'desc' ? 'asc' : 'desc')}
                                            className="px-4 py-2 bg-white border border-slate-200 rounded-2xl text-[11px] font-black text-slate-600 flex items-center gap-2 shadow-sm hover:border-teal-400 transition-all outline-none"
                                        >
                                            <div className={`transition-all duration-300 ${repSort === 'asc' ? 'rotate-180' : ''}`}><ArrowDownNarrowWide size={14} className="text-teal-500" /></div>
                                            เรียงตามยอดซื้อ: {repSort === 'desc' ? 'ยอดมาก > น้อย' : 'ยอดน้อย > มาก'}
                                        </button>
                                        <div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider bg-slate-100 px-3 py-1.5 rounded-full">
                                            {(() => {
                                                const count = selectedRep.customerInsights
                                                    .filter(ci => {
                                                        if (repFilter === 'at-risk') return ci.isAtRisk && ci.orderCount > 0;
                                                        if (repFilter === 'inactive') return ci.orderCount === 0;
                                                        return true;
                                                    })
                                                    .filter(ci => repSearch.trim() === '' || ci.name.toLowerCase().includes(repSearch.toLowerCase()))
                                                    .length;
                                                return `แสดง ${count} รายการ`;
                                            })()}
                                        </div>
                                    </div>
                                </div>

                                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 pb-12">
                                    {selectedRep.customerInsights
                                        .filter(ci => {
                                            if (repFilter === 'at-risk') return ci.isAtRisk && ci.orderCount > 0;
                                            if (repFilter === 'inactive') return ci.orderCount === 0;
                                            return true;
                                        })
                                        .filter(ci => repSearch.trim() === '' || ci.name.toLowerCase().includes(repSearch.toLowerCase()))
                                        .sort((a, b) => repSort === 'desc' ? b.totalSales - a.totalSales : a.totalSales - b.totalSales)
                                        .map((cust, idx) => (
                                            <div key={idx} className={`relative bg-white rounded-[32px] p-6 border transition-all hover:shadow-xl hover:-translate-y-1 group ${cust.isAtRisk ? 'border-orange-200' : 'border-slate-100'}`}>
                                                {/* At Risk Badge */}
                                                {cust.isAtRisk && (
                                                    <div className="absolute -top-3 -right-2 px-3 py-1 bg-gradient-to-r from-orange-500 to-amber-500 text-white text-[9px] font-black rounded-full shadow-lg shadow-orange-500/30 flex items-center gap-1 animate-bounce">
                                                        <AlertCircle size={10} /> ขาดช่วง {cust.daysSinceLast} วัน
                                                    </div>
                                                )}

                                                <div className="flex justify-between items-start mb-5">
                                                    <div className="flex-1 min-w-0">
                                                        <h5 className="font-black text-slate-800 text-xs sm:text-sm line-clamp-2 md:line-clamp-1 group-hover:text-teal-600 transition-colors leading-tight">{cust.name}</h5>
                                                        <p className="text-[9px] sm:text-[10px] text-slate-400 font-bold flex items-center gap-1 mt-1 uppercase">
                                                            <MapPin size={9} /> {cust.province || 'ไม่ระบุพื้นที่'}
                                                        </p>
                                                    </div>
                                                    <div className="shrink-0 text-right pl-2">
                                                        <div className={`text-xs sm:text-sm font-black transition-all duration-300 ${selectedCustMonth[cust.name] !== undefined ? 'text-orange-500 scale-110' : 'text-teal-600'}`}>
                                                            ฿{selectedCustMonth[cust.name] !== undefined
                                                                ? formatNumber(cust.monthlyTotals[selectedCustMonth[cust.name]])
                                                                : formatNumber(cust.totalSales)}
                                                        </div>
                                                        <div className={`text-[8px] sm:text-[9px] font-bold uppercase transition-all duration-300 ${selectedCustMonth[cust.name] !== undefined ? 'text-orange-400' : 'text-slate-400'}`}>
                                                            {selectedCustMonth[cust.name] !== undefined
                                                                ? `ยอดเดือน ${['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.'][selectedCustMonth[cust.name]]}`
                                                                : `${cust.orderCount} งาน`}
                                                        </div>
                                                    </div>
                                                </div>

                                                {/* 📅 12-Month Month Grid ดีไซน์ใหม่ */}
                                                <div className="grid grid-cols-6 gap-1 mb-5 text-[7px] font-black uppercase text-center">
                                                    {['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.'].map((mName, mIdx) => {
                                                        const isActive = cust.months[mIdx];
                                                        const isSelected = selectedCustMonth[cust.name] === mIdx;
                                                        return (
                                                            <div
                                                                key={mIdx}
                                                                onClick={() => setSelectedCustMonth(prev => ({ ...prev, [cust.name]: isSelected ? undefined : mIdx }))}
                                                                className={`py-1.5 rounded-md border transition-all cursor-pointer ${isSelected ? 'bg-orange-500 border-orange-500 text-white shadow-lg scale-105 z-10' : isActive ? 'bg-teal-500 border-teal-500 text-white shadow-[0_2px_4px_rgba(20,184,166,0.2)]' : 'bg-slate-50 border-slate-100 text-slate-300'}`}
                                                            >
                                                                {mName}
                                                            </div>
                                                        );
                                                    })}
                                                </div>

                                                {/* Recent Items Preview + All History Button */}
                                                <div className="mt-4 pt-4 border-t border-slate-50">
                                                    <div className="flex justify-between items-center mb-3">
                                                        <p className="text-[8px] text-slate-400 font-black uppercase tracking-widest">ประวัติการสั่งล่าสุด</p>
                                                        {cust.orderCount > 0 && (
                                                            <button
                                                                onClick={() => setHistoryModalCust(cust)}
                                                                className="text-[9px] font-black text-teal-500 hover:text-teal-700 flex items-center gap-1 bg-teal-50 px-2 py-1 rounded-lg transition-colors border border-teal-100/50"
                                                            >
                                                                <History size={10} /> ประวัติออเดอร์
                                                            </button>
                                                        )}
                                                    </div>
                                                    {cust.recentItems.length > 0 ? (
                                                        <div className="flex flex-wrap gap-1.5">
                                                            {cust.recentItems.map((item, iIdx) => (
                                                                <span key={iIdx} className="px-2 py-0.5 bg-slate-50 text-slate-500 text-[9px] font-bold rounded-md border border-slate-100 truncate max-w-full">
                                                                    {item}
                                                                </span>
                                                            ))}
                                                        </div>
                                                    ) : (
                                                        <div className="py-2 text-center bg-slate-50/50 rounded-xl border border-dashed border-slate-200">
                                                            <p className="text-[9px] text-slate-400 font-bold italic">ยังไม่มียอดสั่งซื้อในปีนี้</p>
                                                        </div>
                                                    )}
                                                </div>
                                            </div>
                                        ))}
                                </div>
                            </div>
                        </div>

                        <div className="p-8 pt-4 border-t border-slate-100 bg-white">
                            <button onClick={() => setSelectedRep(null)} className="w-full py-4 bg-slate-900 text-white font-black rounded-3xl active:scale-[0.98] transition-all shadow-xl shadow-slate-900/20">
                                กลับหน้าสรุปหลัก
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {/* 📜 Full History Modal Overlay */}
            {historyModalCust && (
                <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/60 backdrop-blur-md animate-in fade-in duration-300">
                    <div className="bg-white rounded-[40px] w-full max-w-[440px] max-h-[85vh] flex flex-col shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300 border border-white/20">
                        <div className="p-8 pb-4 flex justify-between items-start border-b border-slate-50">
                            <div className="flex-1 pr-4">
                                <h4 className="text-lg sm:text-xl font-black text-slate-800 leading-tight transition-all">{historyModalCust.name}</h4>
                                <p className="text-[9px] sm:text-[10px] text-teal-600 font-black uppercase tracking-wider mt-1">รายการออเดอร์ปีปัจจุบัน</p>
                            </div>
                            <button onClick={() => setHistoryModalCust(null)} className="p-3 bg-slate-100 rounded-2xl text-slate-500 hover:bg-slate-200 transition-all">
                                <X size={20} />
                            </button>
                        </div>
                        <div className="flex-1 overflow-y-auto p-6 space-y-4 no-scrollbar bg-slate-50/50">
                            {historyModalCust.fullHistory.map((o, oIdx) => {
                                const currentMonth = new Date(toInputDate(o.date)).getMonth();
                                const prevMonth = oIdx > 0 ? new Date(toInputDate(historyModalCust.fullHistory[oIdx - 1].date)).getMonth() : -1;
                                const isNewMonth = currentMonth !== prevMonth;

                                return (
                                    <div key={oIdx} className="space-y-4">
                                        {isNewMonth && (
                                            <div className="flex items-center gap-3 pt-4 pb-1">
                                                <div className="h-[1px] flex-1 bg-slate-200"></div>
                                                <span className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] bg-white px-4 py-1.5 rounded-full border border-slate-100 shadow-sm">
                                                    เดือน {['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'][currentMonth]}
                                                </span>
                                                <div className="h-[1px] flex-1 bg-slate-200"></div>
                                            </div>
                                        )}
                                        <div className="p-5 bg-white rounded-3xl border border-slate-100 shadow-sm space-y-3">
                                            <div className="flex justify-between items-start">
                                                <div className="space-y-1">
                                                    <span className="text-[9px] font-black text-slate-400 bg-slate-50 px-2 py-1 rounded-lg border border-slate-100 uppercase tracking-widest">#{o.orderNumber}</span>
                                                    <p className="text-xs font-black text-slate-700">{formatDateForDisplay(o.date)}</p>
                                                </div>
                                                <div className="text-right">
                                                    <p className="text-sm font-black text-teal-600">฿{formatNumber(o.price)}</p>
                                                    <p className={`text-[8px] font-black uppercase px-2 py-0.5 rounded-full inline-block ${o.status === 'เรียบร้อย' ? 'bg-emerald-50 text-emerald-600' : 'bg-orange-50 text-orange-600'}`}>
                                                        {o.status}
                                                    </p>
                                                </div>
                                            </div>
                                            {o.items && o.items.length > 0 && (
                                                <div className="flex flex-col gap-2 pt-3 border-t border-slate-50">
                                                    {o.items.map((item, iIdx) => (
                                                        <div key={iIdx} className="flex justify-between items-center text-[10px] font-bold text-slate-500">
                                                            <span className="line-clamp-1 max-w-[70%] text-slate-600 transition-all">{item.name} {item.size ? `(${item.size})` : ''}</span>
                                                            <span className="shrink-0 text-slate-400">x{item.qty}</span>
                                                        </div>
                                                    ))}
                                                </div>
                                            )}
                                            <button
                                                onClick={() => { onOrderDetail(o); setHistoryModalCust(null); setSelectedRep(null); }}
                                                className="w-full py-3.5 bg-slate-50 text-indigo-600 text-[11px] font-black rounded-2xl border border-indigo-100/50 hover:bg-indigo-50 transition-all flex items-center justify-center gap-2 mt-2"
                                            >
                                                <Eye size={13} strokeWidth={2.5} /> ดูรายละเอียดออเดอร์นี้
                                            </button>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                        <div className="p-6 bg-white border-t border-slate-100">
                            <button onClick={() => setHistoryModalCust(null)} className="w-full py-4 bg-slate-800 text-white font-black rounded-2xl shadow-lg hover:bg-slate-700 transition-all">
                                เข้าใจแล้ว
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {/* 🕵️ Order Status Audit Overlay (Audit-Style View) */}
            {selectedStatusAudit && (
                <div className="fixed inset-0 z-[150] flex flex-col bg-slate-900/60 backdrop-blur-md p-4 animate-in fade-in duration-300">
                    <div className="mt-auto bg-[#F8FAFC] rounded-[48px] w-full max-h-[92vh] flex flex-col shadow-2xl animate-in slide-in-from-bottom duration-500 overflow-hidden border border-white/20">
                        {/* Audit Header */}
                        <div className="p-8 pb-6 bg-white border-b border-slate-100 flex justify-between items-start">
                            <div className="flex-1">
                                <div className="flex items-center gap-2 mb-1.5">
                                    <div className="px-3 py-1 bg-teal-50 text-teal-600 text-[10px] font-black rounded-lg uppercase tracking-wider border border-teal-100/50">Audit Mode</div>
                                    <span className="text-[10px] text-slate-400 font-bold uppercase tracking-widest">ตรวจสอบข้อมูลสถานะ</span>
                                </div>
                                <h3 className="text-2xl font-black text-slate-800 flex items-center gap-3">
                                    {selectedStatusAudit}
                                    <span className="text-sm font-bold text-slate-400 bg-slate-100 px-3 py-1 rounded-full">{auditOrders.length} รายการ</span>
                                </h3>
                            </div>
                            <button onClick={() => setSelectedStatusAudit(null)} className="p-3 bg-slate-100 rounded-2xl text-slate-500 hover:bg-slate-200 transition-all active:scale-95 shadow-sm">
                                <X size={24} />
                            </button>
                        </div>

                        {/* Audit List Container */}
                        <div className="flex-1 overflow-y-auto no-scrollbar p-6 space-y-4">
                            {auditOrders.length > 0 ? (
                                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 pb-12">
                                    {auditOrders.map((o, idx) => (
                                        <div
                                            key={idx}
                                            className="bg-white p-4 rounded-[28px] border border-slate-100 shadow-sm hover:shadow-md transition-all group relative overflow-hidden"
                                        >
                                            {/* Status Indicator */}
                                            <div className={`absolute top-0 right-0 px-4 py-1.5 rounded-bl-[20px] font-black text-[9px] uppercase tracking-wider ${o.status === 'เรียบร้อย' ? 'bg-emerald-500 text-white' : (o.pendingDays > 3 ? 'bg-rose-500 text-white animate-pulse' : 'bg-orange-500 text-white')}`}>
                                                {o.status === 'เรียบร้อย' ? 'สำเร็จแล้ว' : `ค้าง ${o.pendingDays} วัน`}
                                            </div>

                                            <div className="space-y-3">
                                                {/* Header Info */}
                                                <div className="pr-16">
                                                    <div className="flex items-center gap-2 mb-0.5">
                                                        <span className="text-[8px] font-black text-teal-600 bg-teal-50 px-1.5 py-0.5 rounded-md border border-teal-100/50">#{o.orderNumber}</span>
                                                        <span className="text-[8px] font-bold text-slate-400 uppercase tracking-widest">{formatDateForDisplay(o.date)}</span>
                                                    </div>
                                                    <h4 className="text-xs font-black text-slate-800 leading-tight group-hover:text-teal-600 transition-colors">{o.name}</h4>
                                                </div>

                                                <div className="grid grid-cols-2 gap-3 py-3 border-y border-slate-50">
                                                    <div>
                                                        <p className="text-[8px] text-slate-400 font-black uppercase tracking-widest mb-1.5 flex items-center gap-1">
                                                            <User size={10} className="text-teal-500" /> รับผิดชอบโดย
                                                        </p>
                                                        <p className="text-xs font-bold text-slate-700">{o.salesCustomer || 'ไม่ระบุ'}</p>
                                                    </div>
                                                    <div className="text-right">
                                                        <p className="text-[8px] text-slate-400 font-black uppercase tracking-widest mb-1 flex items-center gap-1 justify-end">
                                                            <DollarSign size={10} className="text-teal-500" /> ยอดออเดอร์
                                                        </p>
                                                        <p className="text-xs font-black text-teal-600 tabular-nums">฿{formatNumber(o.price)}</p>
                                                    </div>
                                                </div>

                                                {/* Audit Context (Why & Where) */}
                                                <div className="space-y-2">
                                                    <div>
                                                        <p className="text-[8px] text-slate-400 font-black uppercase tracking-widest mb-1.5 flex items-center gap-1">
                                                            <Info size={10} className="text-sky-500" /> รายละเอียดบิล
                                                        </p>
                                                        <div className="flex flex-wrap gap-1.5">
                                                            <span className="px-2 py-0.5 bg-sky-50 text-sky-600 text-[10px] font-bold rounded-md border border-sky-100">{o.billType || 'NO VAT'}</span>
                                                            <span className="px-2 py-0.5 bg-slate-50 text-slate-500 text-[10px] font-bold rounded-md border border-slate-100">{o.location || 'ไม่ระบุพื้นที่'}</span>
                                                        </div>
                                                    </div>

                                                    {(o.note || o.packNote || o.billNote) && (o.note !== o.status) && (
                                                        <div className="bg-amber-50 p-3 rounded-xl border border-amber-100/50">
                                                            <p className="text-[8px] text-amber-600 font-black uppercase tracking-widest mb-1 flex items-center gap-1">
                                                                <MessageCircle size={10} strokeWidth={3} /> หมายเหตุ/สาเหตุที่ค้าง
                                                            </p>
                                                            <p className="text-[9px] font-bold text-amber-900 leading-relaxed italic">
                                                                "{o.note || o.packNote || o.billNote || 'ไม่มีระบุสาเหตุเพิ่มเติม'}"
                                                            </p>
                                                        </div>
                                                    )}
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            ) : (
                                <div className="h-full flex flex-col items-center justify-center text-center p-12">
                                    <div className="w-20 h-20 bg-slate-100 rounded-full flex items-center justify-center mb-6 text-slate-300">
                                        <Search size={40} />
                                    </div>
                                    <h4 className="text-lg font-black text-slate-800 mb-2">ไม่มีงานค้างในสถานะนี้</h4>
                                    <p className="text-sm text-slate-400 font-medium">ทุกอย่างเรียบร้อยดี! ข้อมูลสอดคล้องกับระบบปัจจุบัน</p>
                                </div>
                            )}
                        </div>

                        {/* Audit Footer */}
                        <div className="p-8 pt-4 border-t border-slate-100 bg-white shadow-[0_-10px_30px_rgba(0,0,0,0.02)]">
                            <button onClick={() => setSelectedStatusAudit(null)} className="w-full py-4 bg-slate-100 text-slate-600 font-black rounded-3xl active:scale-[0.98] transition-all hover:bg-slate-200">
                                ปิดหน้าตรวจสอบ
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

// ==========================================
// 👤 CUSTOMER INSIGHT SCREEN
// ==========================================
const CustomerInsightScreen = ({ orders, globalYearFilter, setGlobalYearFilter, availableYears, onOrderDetail, onBack }) => {
    const [searchQuery, setSearchQuery] = useState('');
    const [selectedCustHistory, setSelectedCustHistory] = useState(null);
    const [historicalOrders, setHistoricalOrders] = useState([]);
    const [isLoadingHistory, setIsLoadingHistory] = useState(false);

    useEffect(() => {
        const fetchHistory = async () => {
            setIsLoadingHistory(true);
            try {
                // ปีปัจจุบันเริ่มจาก 1 ม.ค.
                const thisYearStart = new Date();
                thisYearStart.setMonth(0);
                thisYearStart.setDate(1);
                const thisYearStartStr = thisYearStart.toISOString().split('T')[0];

                // ปีก่อนหน้าเริ่มจาก 1 ม.ค. ของปีที่แล้ว
                const lastYearStart = new Date(thisYearStart);
                lastYearStart.setFullYear(lastYearStart.getFullYear() - 1);
                const lastYearStartStr = lastYearStart.toISOString().split('T')[0];

                // ดึงออเดอร์ของปีก่อนหน้า 1 ปีเต็ม
                const { data: pastOrders, error } = await supabase.from('Orders')
                    .select('*')
                    .gte('Date', lastYearStartStr)
                    .lt('Date', thisYearStartStr);

                if (error) throw error;

                if (pastOrders && pastOrders.length > 0) {
                    const orderNumbers = pastOrders.map(o => o.OrderNumber).filter(n => n);
                    let itemsData = [];
                    const chunkSize = 150;
                    for (let i = 0; i < orderNumbers.length; i += chunkSize) {
                        const chunk = orderNumbers.slice(i, i + chunkSize);
                        const { data: chunkItems } = await supabase.from('OrderItems').select('*').in('OrderNumber', chunk);
                        if (chunkItems) itemsData = itemsData.concat(chunkItems);
                    }

                    const itemsMap = {};
                    if (itemsData && itemsData.length > 0) {
                        itemsData.forEach(item => {
                            const key = item.OrderNumber;
                            if (!itemsMap[key]) itemsMap[key] = [];
                            itemsMap[key].push({ id: item.id, name: item.ProductName, size: item.Size, qty: item.Qty });
                        });
                    }

                    const formattedPast = pastOrders.map((o, idx) => ({
                        id: o.OrderID || o.id || o.ID || o.OrderID_Num || o.order_id,
                        orderNumber: o.OrderNumber || o.orderNumber || o.Order_Number || o.order_no || `REF-${idx}-past`,
                        date: o.Date || o.date || o.OrderDate || o.order_date,
                        name: o.CustomerName || o.Name || o.name || o.customer_name || '',
                        nickname: o.Nickname,
                        address: o.Address,
                        location: o.Province || o.Location || o.province || '',
                        phoneNumber: o.Phone || o.phone || o.Phone_Number,
                        salesCustomer: o.Sales || o.sales,
                        taxId: o.TaxID || o.tax_id,
                        billType: o.BillType || o.bill_type,
                        price: o.Price || o.price,
                        items: itemsMap[o.OrderNumber] || [],
                        note: o.Note,
                        status: o.Status,
                    }));

                    setHistoricalOrders(formattedPast);
                }
            } catch (e) {
                console.error("Fetch History Error:", e);
            } finally {
                setIsLoadingHistory(false);
            }
        };
        fetchHistory();
    }, []);

    const combinedOrders = useMemo(() => {
        let all = [...orders, ...historicalOrders];
        if (globalYearFilter !== 'all') {
            all = all.filter(o => {
                const d = toInputDate(o.date);
                return d && d.startsWith(globalYearFilter);
            });
        }
        return all;
    }, [orders, historicalOrders, globalYearFilter]);

    // ดึงวันที่ที่มีทั้งหมดในระบบมาเป็นตัวเลือก
    const availableDates = useMemo(() => {
        const dates = new Set();
        combinedOrders.forEach(o => {
            if (o.date && !o.date.includes('#') && o.date.match(/^\d{4}-\d{2}-\d{2}$/)) {
                dates.add(o.date);
            }
        });
        return Array.from(dates).sort((a, b) => b.localeCompare(a));
    }, [combinedOrders]);

    const [filterDate, setFilterDate] = useState('');

    const customers = useMemo(() => {
        const map = {};
        combinedOrders.forEach(o => {
            if (!o.name || String(o.name).includes('#NUM!') || String(o.name).includes('#REF!')) return;
            // กรองตามวันที่เลือก (Single Date Match)
            if (filterDate && o.date !== filterDate) return;

            const name = String(o.name).trim();
            if (!map[name]) map[name] = { name, orders: [], totalSpent: 0, location: o.location };
            map[name].orders.push(o);
            map[name].totalSpent += (parseFloat(o.price) || 0);
        });
        return Object.values(map).map(c => {
            const sortedOrders = c.orders.sort((a, b) => (b.date || '').localeCompare(a.date || ''));
            const uniqueItems = new Set();
            sortedOrders.slice(0, 5).forEach(o => {
                if (o.items) o.items.forEach(itm => uniqueItems.add(itm.name));
            });
            return {
                ...c,
                orders: sortedOrders,
                recentItems: Array.from(uniqueItems).slice(0, 5)
            };
        }).sort((a, b) => b.totalSpent - a.totalSpent);
    }, [combinedOrders, filterDate]);

    const filteredCustomers = customers.filter(c =>
        c.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        String(c.location).toLowerCase().includes(searchQuery.toLowerCase())
    );

    return (
        <div className="w-full h-full flex flex-col bg-slate-50 animate-in slide-in-from-right duration-300">
            <header className="px-6 pt-12 pb-6 bg-white border-b border-slate-100 flex flex-col gap-6 sticky top-0 z-50">
                <div className="flex items-center gap-4">
                    <button onClick={onBack} className="p-3 bg-slate-50 rounded-2xl text-slate-500 hover:bg-slate-100 transition-all active:scale-95 shadow-sm">
                        <ChevronLeft size={24} />
                    </button>
                    <div className="flex-1">
                        <h2 className="text-lg sm:text-xl font-bold text-slate-800 tracking-tight transition-all">ข้อมูลลูกค้า</h2>
                        <p className="text-[9px] sm:text-[10px] text-slate-400 font-black uppercase tracking-widest mt-0.5">
                            Customer Database Insight {isLoadingHistory ? '(กำลังดึงประวัติย้อนหลัง...)' : ''}
                        </p>
                    </div>
                    <div className="relative w-[100px] sm:w-[130px]">
                        <select
                            value={globalYearFilter}
                            onChange={(e) => setGlobalYearFilter(e.target.value)}
                            className="w-full pl-2.5 sm:pl-4 pr-8 sm:pr-10 py-2.5 sm:py-3 rounded-2xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-indigo-400 focus:outline-none focus:ring-4 focus:ring-indigo-500/10 text-[12px] sm:text-sm font-bold text-slate-700 appearance-none transition-all"
                        >
                            <option value="all">ทุกปี</option>
                            {availableYears.map(y => <option key={y} value={y}>{parseInt(y) + 543}</option>)}
                        </select>
                        <ChevronDown className="absolute right-2 sm:right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" size={16} />
                    </div>
                </div>

                <div className="flex flex-col gap-4">
                    <div className="relative group">
                        <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-500 transition-colors" size={20} />
                        <input
                            type="text"
                            placeholder="ค้นหา..."
                            className="w-full bg-slate-50 border-none rounded-2xl pl-12 pr-4 py-4 font-semibold text-slate-800 focus:ring-4 focus:ring-indigo-500/10 focus:bg-white transition-all shadow-inner border border-slate-100"
                            value={searchQuery}
                            onChange={(e) => setSearchQuery(e.target.value)}
                        />
                    </div>
                    <div className="bg-white p-5 rounded-[24px] border border-slate-100 shadow-sm flex items-center gap-4 group hover:border-indigo-200 transition-all">
                        <div className="relative shrink-0 cursor-pointer">
                            <div className="p-3 bg-indigo-50 text-indigo-500 rounded-xl hover:bg-indigo-100 hover:scale-105 active:scale-95 transition-all shadow-sm">
                                <Calendar size={20} />
                            </div>
                            {/* Native Picker Trigger */}
                            <input
                                type="date"
                                className="absolute inset-0 opacity-0 cursor-pointer w-full h-full z-10"
                                value={filterDate}
                                onChange={(e) => setFilterDate(e.target.value)}
                                title="คลิกเพื่อเลือกจากปฏิทิน"
                            />
                        </div>
                        <div className="flex-1 min-w-0">
                            <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest mb-1.5 ml-1">เลือกวันที่ออเดอร์:</p>
                            <SearchableDropdown
                                options={availableDates.map(d => formatDateForDisplay(d))}
                                value={filterDate ? formatDateForDisplay(filterDate) : ''}
                                onChange={(e) => {
                                    const disp = e.target.value;
                                    const match = availableDates.find(d => formatDateForDisplay(d) === disp);
                                    if (match) setFilterDate(match);
                                    else if (!disp) setFilterDate('');
                                }}
                                placeholder="ค้นหาวันที่..."
                            />
                        </div>
                    </div>
                </div>
            </header>

            <div className="flex-1 overflow-y-auto no-scrollbar p-6">
                <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
                    {filteredCustomers.length > 0 ? filteredCustomers.map((c, idx) => (
                        <div key={idx} className="bg-white rounded-[32px] p-6 border border-slate-100 shadow-sm hover:shadow-md transition-all group overflow-hidden relative">
                            <div className="absolute top-0 right-0 w-24 h-24 bg-indigo-50/50 rounded-bl-[100px] -mr-10 -mt-10 group-hover:scale-110 transition-transform"></div>

                            <div className="flex justify-between items-start mb-6 relative z-10">
                                <div className="flex items-center gap-4">
                                    <div className="w-14 h-14 bg-gradient-to-br from-indigo-500 to-blue-600 rounded-2xl flex items-center justify-center text-white font-black text-xl shadow-lg shadow-indigo-500/20">{c.name.charAt(0)}</div>
                                    <div className="flex flex-col gap-1 pr-4 min-w-0">
                                        <h3 className="font-black text-slate-800 text-xs sm:text-sm leading-tight line-clamp-2 transition-colors">{c.name}</h3>
                                        <span className="text-[9px] sm:text-[10px] font-black text-slate-400 flex items-center gap-1.5 uppercase">
                                            <MapPin size={12} className="text-indigo-400" /> {c.location || 'ไม่ระบุ'}
                                        </span>
                                    </div>
                                </div>
                                <div className="text-right whitespace-nowrap">
                                    <div className="text-indigo-600 font-black text-[13px] tracking-tight">{c.orders[0] ? formatDateForDisplay(c.orders[0].date) : '-'}</div>
                                    <div className="text-[9px] font-black text-slate-400 uppercase tracking-widest">{c.orders.length} ออเดอร์</div>
                                </div>
                            </div>

                            <div className="bg-slate-50/80 rounded-2xl p-4 border border-slate-100 relative z-10">
                                <div className="flex justify-between items-center mb-3">
                                    <div className="text-[9px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
                                        ประวัติการสั่งล่าสุด
                                    </div>
                                    {c.orders.length > 0 && (
                                        <button
                                            onClick={() => setSelectedCustHistory(c)}
                                            className="text-[9px] font-black text-teal-500 hover:text-teal-700 flex items-center gap-1 bg-teal-50 px-2 py-1 rounded-lg transition-colors border border-teal-100/50"
                                        >
                                            <History size={10} /> ประวัติออเดอร์
                                        </button>
                                    )}
                                </div>
                                <div className="flex flex-wrap gap-1.5">
                                    {c.recentItems.length > 0 ? c.recentItems.map((item, iIdx) => (
                                        <span key={iIdx} className="px-2 py-1 bg-white text-slate-500 text-[9px] font-bold rounded-md border border-slate-100 truncate max-w-full shadow-sm">
                                            {item}
                                        </span>
                                    )) : (
                                        <p className="text-[9px] text-slate-400 font-bold italic py-2">ยังไม่มียอดสั่งซื้อในช่วงที่เลือก</p>
                                    )}
                                </div>
                            </div>
                        </div>
                    )) : (
                        <div className="col-span-full py-20 flex flex-col items-center justify-center text-slate-300">
                            <Search size={64} strokeWidth={1} className="mb-4 opacity-20" />
                            <p className="font-bold uppercase tracking-widest text-xs">ไม่พบข้อมูลลูกค้า</p>
                        </div>
                    )}
                </div>
            </div>

            {selectedCustHistory && (
                <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/60 backdrop-blur-md animate-in fade-in duration-300">
                    <div className="bg-white rounded-[40px] w-full max-w-[460px] max-h-[85vh] flex flex-col shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300 border border-white/20">
                        <div className="p-8 pb-4 flex justify-between items-start border-b border-slate-50">
                            <div className="flex-1 pr-4">
                                <h4 className="text-lg sm:text-xl font-black text-slate-800 leading-tight transition-all">{selectedCustHistory.name}</h4>
                                <p className="text-[9px] sm:text-[10px] text-teal-600 font-black uppercase tracking-wider mt-1">รายการออเดอร์ปีปัจจุบัน</p>
                            </div>
                            <button onClick={() => setSelectedCustHistory(null)} className="p-3 bg-slate-100 rounded-2xl text-slate-500 hover:bg-slate-200 transition-all">
                                <X size={20} />
                            </button>
                        </div>
                        <div className="flex-1 overflow-y-auto p-6 space-y-5 no-scrollbar bg-slate-50/50">
                            {selectedCustHistory.orders.map((o, oIdx) => (
                                <div key={oIdx} className="p-6 bg-white rounded-[32px] border border-slate-100 shadow-sm space-y-4">
                                    <div className="flex justify-between items-start">
                                        <div className="space-y-1.5">
                                            <span className="text-[10px] font-black text-slate-400 bg-slate-50 px-3 py-1 rounded-lg border border-slate-100 uppercase tracking-widest">#{o.orderNumber || '-'}</span>
                                            <p className="text-sm font-black text-slate-700">{formatDateForDisplay(o.date)}</p>
                                        </div>
                                        <div className="text-right">
                                            <div className="text-lg font-black text-teal-600">฿{formatNumber(o.price)}</div>
                                            <div className={`text-[9px] font-black uppercase px-2.5 py-1 rounded-full inline-block mt-1 shadow-sm ${o.status === 'เรียบร้อย' ? 'bg-emerald-50 text-emerald-600 border border-emerald-100' : 'bg-orange-50 text-orange-600 border border-orange-100'}`}>
                                                {o.status || 'รอจัดออเดอร์'}
                                            </div>
                                        </div>
                                    </div>

                                    {/* Item List with Quantities */}
                                    <div className="pt-4 border-t border-slate-50 space-y-2.5">
                                        {o.items && o.items.map((item, iIdx) => (
                                            <div key={iIdx} className="flex justify-between items-center gap-4">
                                                <p className="text-[11px] font-bold text-slate-500 line-clamp-1 flex-1 transition-all">{item.name}</p>
                                                <span className="text-[11px] font-black text-slate-300 tabular-nums">x{item.qty}</span>
                                            </div>
                                        ))}
                                    </div>

                                    <button
                                        onClick={() => { onOrderDetail(o); setSelectedCustHistory(null); }}
                                        className="w-full py-3.5 bg-slate-50 text-indigo-600 text-[11px] font-black rounded-2xl border border-indigo-100/50 hover:bg-indigo-50 transition-all flex items-center justify-center gap-2 mt-2"
                                    >
                                        ดูรายละเอียดออเดอร์นี้ <ArrowRight size={14} />
                                    </button>
                                </div>
                            ))}
                        </div>
                        <div className="p-6 bg-white border-t border-slate-100">
                            <button onClick={() => setSelectedCustHistory(null)} className="w-full py-4 bg-[#1e293b] text-white font-black rounded-2xl shadow-lg hover:bg-slate-700 transition-all">
                                เข้าใจแล้ว
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

function App() {
    const getInitialUser = () => { try { const saved = localStorage.getItem('orderSystem_user_session'); return saved ? JSON.parse(saved) : null; } catch (e) { return null; } };
    const [currentUser, setCurrentUser] = useState(getInitialUser);
    const [currentScreen, setCurrentScreen] = useState(getInitialUser() ? 'dashboard' : 'login');
    const [orders, setOrders] = useState([]);
    const [customers, setCustomers] = useState([]);
    const [products, setProducts] = useState([]);
    const [selectedOrder, setSelectedOrder] = useState(null);
    const [returnScreen, setReturnScreen] = useState('dashboard');
    const [showModal, setShowModal] = useState(false);
    const [modalMessage, setModalMessage] = useState('');
    const [modalType, setModalType] = useState('info');
    const [loading, setLoading] = useState(false);
    const [userList, setUserList] = useState([]);
    const [loadingText, setLoadingText] = useState('กำลังประมวลผล...');
    const [lastUpdated, setLastUpdated] = useState(null);
    const [showConfirm, setShowConfirm] = useState(false);
    const [pendingOrder, setPendingOrder] = useState(null);
    const [isInitialLoad, setIsInitialLoad] = useState(true);
    const [dateModalOpen, setDateModalOpen] = useState(false);
    const [currentOrderForDate, setCurrentOrderForDate] = useState(null);
    const [dashboardFilters, setDashboardFilters] = useState({ query: '', status: '', date: '' });
    const [hasShownWarning, setHasShownWarning] = useState(false);
    const dashboardScrollRef = useRef(0);
    const isSavingRef = useRef(false);

    const [globalYearFilter, setGlobalYearFilter] = useState(new Date().getFullYear().toString());

    // ฟังก์ชันส่งรายงานสรุปยอดอัตโนมัติประจำวัน (17:00 น.) ไปยัง Telegram
    const checkAndSendAutomatedSummary = async (ordersList, force = false) => {
        try {
            const now = new Date();
            const hours = now.getHours();
            const minutes = now.getMinutes();

            // ตรวจสอบช่วงเวลา 17:00 น. ถึง 17:15 น. หรือเป็นการบังคับเพื่อทดสอบ (force === true)
            if (force || (hours === 17 && minutes >= 0 && minutes <= 15)) {
                // สร้าง Lock ID สำหรับวันนี้ เช่น DAILY_SUMMARY_LOG_2026-05-19
                const year = now.getFullYear();
                const month = String(now.getMonth() + 1).padStart(2, '0');
                const day = String(now.getDate()).padStart(2, '0');
                const todayLocalStr = `${year}-${month}-${day}`;
                const lockId = `DAILY_SUMMARY_LOG_${todayLocalStr}`;

                // ถ้าไม่ได้เป็นการบังคับทดสอบ ให้ตรวจสอบและสร้างล็อกการส่งในเบส
                if (!force) {
                    // 1. ตรวจสอบในฐานข้อมูลว่าส่งรายงานของวันนี้ไปแล้วหรือยัง
                    const { data: existingLock } = await supabase
                        .from('Orders')
                        .select('OrderID')
                        .eq('OrderID', lockId)
                        .maybeSingle();

                    if (existingLock) {
                        // ส่งไปแล้วในวันนี้ ข้ามการทำงาน
                        return;
                    }

                    // 2. เคลมสิทธิ์ล็อกการส่งโดยสร้างเรคคอร์ดในฐานข้อมูล
                    const supaLock = {
                        OrderID: lockId,
                        OrderNumber: lockId,
                        CustomerName: 'SYSTEM_SUMMARY_LOG',
                        Date: now.toISOString(),
                        Status: 'ระบบบันทึก',
                        Price: 0
                    };

                    const { error: lockError } = await supabase
                        .from('Orders')
                        .insert(supaLock);

                    if (lockError) {
                        // เกิดคีย์ซ้ำ (Duplicate key) แสดงว่าบราวเซอร์อื่นเคลมสิทธิ์ส่งไปก่อนเสร็จในวินาทีเดียวกัน
                        console.log('Daily summary lock already acquired by another client.');
                        return;
                    }
                }

                // 3. เริ่มรวบรวมข้อมูลงานค้างและแจ้งเตือนเข้า Telegram
                if (!TELEGRAM_BOT_TOKEN || !TELEGRAM_CHAT_ID) return;

                const currentYearStr = year.toString();
                const validOrders = ordersList.filter(o => {
                    const numStr = String(o.orderNumber || '');
                    if (numStr.startsWith('DAILY_SUMMARY_LOG_')) return false;
                    const d = toInputDate(o.date);
                    return d && d.startsWith(currentYearStr);
                });

                const summary = { 
                    "รอจัดออเดอร์": [], 
                    "สินค้าไม่ครบ": [], 
                    "รอจัดส่ง": [], 
                    "สินค้าค้างส่ง": [], 
                    "รอรับบิล": [] 
                };

                const escapeHtml = (text) => {
                    return String(text || '')
                        .replace(/&/g, '&amp;')
                        .replace(/</g, '&lt;')
                        .replace(/>/g, '&gt;');
                };

                const getPendingDays = (orderDateStr) => {
                    try {
                        const parsed = toInputDate(orderDateStr);
                        if (!parsed) return 0;
                        const parts = parsed.split('-');
                        if (parts.length === 3) {
                            const year = parseInt(parts[0], 10);
                            const month = parseInt(parts[1], 10) - 1;
                            const day = parseInt(parts[2], 10);
                            const orderDate = new Date(year, month, day);
                            const today = new Date();
                            const todayMidnight = new Date(today.getFullYear(), today.getMonth(), today.getDate());
                            const diffTime = todayMidnight - orderDate;
                            const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
                            return diffDays >= 0 ? diffDays : 0;
                        }
                    } catch (e) {
                        console.error("Error calculating pending days:", e);
                    }
                    return 0;
                };

                validOrders.forEach(o => {
                    if (!o.status) return;
                    const statusName = o.status.trim();
                    if (summary[statusName] !== undefined) {
                        const pendingDays = getPendingDays(o.date);
                        const safeOrderNumber = escapeHtml(o.orderNumber || 'ไม่ระบุ');
                        const safeName = escapeHtml(o.name || 'ไม่ระบุ');
                        const provinceText = o.location ? ` [${escapeHtml(o.location.trim())}]` : '';
                        const pendingDaysText = pendingDays > 0 ? ` (ค้าง ${pendingDays} วัน)` : ' (ค้างวันนี้)';
                        const itemText = `<b>${safeOrderNumber}</b> - ${safeName}${provinceText}${pendingDaysText}`;
                        summary[statusName].push(itemText);
                        totalPending++;
                    }
                });

                const localFormattedDate = Utilities_formatDate(now, "dd/MM/yyyy");
                let msg = `📊 <b>[ระบบแจ้งเตือนอัตโนมัติ] สรุปรายการงานค้างประจำวัน</b>\n`;
                msg += `📅 ประจำวันที่: <b>${localFormattedDate}</b> (เวลา 17:00 น.)\n`;
                msg += `รวมงานค้างคงเหลือทั้งหมด: <b>${totalPending} รายการ</b>\n`;
                msg += `----------------------------------------\n\n`;

                const appendStatusToMsg = (title, itemsArray) => {
                    msg += `📌 <b>${title} (${itemsArray.length} รายการ)</b>\n`;
                    if (itemsArray.length === 0) {
                        msg += `  ✅ ดำเนินการเสร็จสิ้นครบถ้วน\n\n`;
                    } else {
                        itemsArray.forEach(item => {
                            msg += `  • ${item}\n`;
                        });
                        msg += `\n`;
                    }
                };

                appendStatusToMsg("1. รอจัดออเดอร์", summary["รอจัดออเดอร์"]);
                appendStatusToMsg("2. สินค้าไม่ครบ", summary["สินค้าไม่ครบ"]);
                appendStatusToMsg("3. รอจัดส่ง", summary["รอจัดส่ง"]);
                appendStatusToMsg("4. สินค้าค้างส่ง", summary["สินค้าค้างส่ง"]);
                appendStatusToMsg("5. รอรับบิล", summary["รอรับบิล"]);

                msg += `----------------------------------------\n`;
                msg += `🔔 <i>รายงานฉบับนี้ส่งออกโดยระบบอัตโนมัติ เพื่อรายงานความคืบหน้าการทำงานประจำวันสำหรับผู้บริหาร</i>`;

                const msgChunks = splitMessageByLines(msg, 4000);
                for (let chunk of msgChunks) {
                    const res = await fetch(`https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage`, {
                        method: "POST", 
                        headers: { "Content-Type": "application/json" }, 
                        body: JSON.stringify({ chat_id: TELEGRAM_CHAT_ID, text: chunk, parse_mode: "HTML" })
                    });
                    if (!res.ok) {
                        const errText = await res.text();
                        let parsedErr;
                        try { parsedErr = JSON.parse(errText); } catch(e){}
                        const details = parsedErr && parsedErr.description ? parsedErr.description : errText;
                        throw new Error(`Telegram API Error: ${details}`);
                    }
                    await new Promise(r => setTimeout(r, 500));
                }
                console.log('Automated daily summary sent successfully.');
            }
        } catch (e) {
            console.error("Error in automated daily summary check:", e);
        }
    };

    // ตั้งระบบตรวจสอบการส่งรายงานสรุปยอดอัตโนมัติ (เช็คทุกๆ 1 นาที)
    useEffect(() => {
        if (!currentUser || orders.length === 0) return;

        // เชื่อมฟังก์ชันสำหรับทดสอบผ่านทาง Console
        window.triggerTestDailySummary = () => {
            console.log('Force triggering daily summary notification...');
            checkAndSendAutomatedSummary(orders, true);
            return 'กำลังส่งแจ้งเตือนสรุปงานเข้า Telegram เพื่อทดสอบ... กรุณาตรวจสอบในห้องแชทครับ!';
        };

        // เช็คความต้องการส่งรายงานทันทีตอนเริ่มต้นเซสชัน
        checkAndSendAutomatedSummary(orders);

        const intervalId = setInterval(() => {
            checkAndSendAutomatedSummary(orders);
        }, 60000);

        return () => {
            clearInterval(intervalId);
            delete window.triggerTestDailySummary;
        };
    }, [currentUser, orders]);

    const availableYears = useMemo(() => {
        const years = new Set(orders.map(o => {
            const d = toInputDate(o.date);
            return d ? d.substring(0, 4) : null;
        }).filter(Boolean));
        const currentY = new Date().getFullYear().toString();
        years.add(currentY);
        return Array.from(years).sort().reverse();
    }, [orders]);

    const globalProcessedOrders = useMemo(() => {
        const roleLower = currentUser?.role?.toLowerCase()?.trim() || '';
        const isAuthUser = ROLE_GROUPS.ADMIN.includes(roleLower) || (currentUser?.username && String(currentUser.username).trim().toLowerCase() === 'd002') || (currentUser?.name && String(currentUser.name).trim().includes('จุฬาลักษณ์'));

        // กรองเอาแถวบันทึกล็อกของระบบออกจากการประมวลผลและการแสดงผล
        const validOrders = orders.filter(o => o.orderNumber && !String(o.orderNumber).startsWith('DAILY_SUMMARY_LOG_'));

        return validOrders.map(o => ({
            _original: o,
            _searchStr: `${o.name || ''} ${o.location || ''} ${o.date || ''} ${o.status || ''} ${o.orderNumber || ''}`.toLowerCase(),
            _parsedDate: toInputDate(o.date) || '0000-00-00',
            _hasRestricted: (o.items && o.items.some(item => RESTRICTED_BILL_TYPES.includes(item.name))) || (o.billType && RESTRICTED_BILL_TYPES.includes(o.billType)),
            _isAuthUser: isAuthUser,
            _idStr: String(o.id)
        }));
    }, [orders, currentUser]);

    const derivedFilteredOrders = useMemo(() => {
        if (!orders) return [];
        const query = dashboardFilters.query.toLowerCase();

        const result = globalProcessedOrders.filter((order) => {
            if (order._hasRestricted && !order._isAuthUser) { return false; }
            const matchesSearch = order._searchStr.includes(query);
            const matchesStatus = dashboardFilters.status ? order._original.status === dashboardFilters.status : true;
            const matchesDate = dashboardFilters.date ? order._parsedDate === dashboardFilters.date : true;

            return matchesSearch && matchesStatus && matchesDate;
        });

        return result.sort((a, b) => {
            if (b._parsedDate !== a._parsedDate) return b._parsedDate.localeCompare(a._parsedDate);
            if (!isNaN(a._idStr) && !isNaN(b._idStr)) return Number(b._idStr) - Number(a._idStr);
            return b._idStr.localeCompare(a._idStr);
        }).map(o => o._original);
    }, [globalProcessedOrders, dashboardFilters]);

    const loadOptions = async () => {
        try {
            const [custRes, prodRes, userRes] = await Promise.all([
                supabase.from('central_customers').select('*'),
                supabase.from('central_products').select('*'),
                supabase.from('central_users').select('username')
            ]);
            const custData = custRes.data;
            const prodData = prodRes.data;
            const userData = userRes.data;

            if (custData) setCustomers(custData.map(c => ({ name: c.customer_name, address: c.address, phone: c.phone_number, nickname: c.nickname, province: c.province, sales: c.business_info?.sales_owner || c.sales_owner_id, taxId: c.tax_id })));
            if (prodData) setProducts(prodData.map(p => ({ name: p.product_name, size: p.size })));
            if (userData) setUserList(userData.map(u => u.username));
        } catch (e) { console.error("Error loading options:", e); }
    };

    const loadOrders = async () => {
        try {
            // คำนวณวันที่เริ่มต้น (เริ่มจากวันที่ 1 มกราคมของปีปัจจุบัน)
            const startDate = new Date();
            startDate.setMonth(0); // มกราคม
            startDate.setDate(1);
            const startDateStr = startDate.toISOString().split('T')[0];

            let existingOrdersMap = new Map();
            const cachedCache = localStorage.getItem('ordersCacheV2');
            if (cachedCache) {
                try {
                    const parsed = JSON.parse(cachedCache);
                    if (Array.isArray(parsed) && parsed.length > 0) {
                        // โหลดข้อมูลจาก Cache
                        const filteredCache = parsed;

                        if (filteredCache.length > 0) {
                            setOrders(filteredCache);
                            setIsInitialLoad(false);
                            filteredCache.forEach(o => {
                                if (o.id) {
                                    const uniqueKey = `${o.id}_${o.orderNumber || ''}`;
                                    existingOrdersMap.set(uniqueKey, o);
                                }
                            });
                        }
                    }
                } catch (e) { }
            }

            // ดึงข้อมูลทั้งหมดในระบบ (แบบแบ่งหน้าเพื่อหลีกเลี่ยงข้อจำกัด 1000 รายการ)
            let allOrders = [];
            let isFetching = true;
            let offset = 0;
            const limit = 1000;

            while (isFetching) {
                const { data, error } = await supabase.from('Orders')
                    .select('*')
                    .order('Date', { ascending: false })
                    .order('OrderID', { ascending: false })
                    .range(offset, offset + limit - 1);

                if (error) throw error;
                if (data && data.length > 0) {
                    allOrders = allOrders.concat(data);
                    offset += limit;
                    if (data.length < limit) isFetching = false;
                } else {
                    isFetching = false;
                }
            }

            const orderNumbers = allOrders.map(o => o.OrderNumber).filter(n => n);
            let itemsData = [];
            const chunkSize = 150;
            const itemPromises = [];
            for (let i = 0; i < orderNumbers.length; i += chunkSize) {
                const chunk = orderNumbers.slice(i, i + chunkSize);
                itemPromises.push(supabase.from('OrderItems').select('*').in('OrderNumber', chunk));
            }
            const itemResults = await Promise.all(itemPromises);
            for (const res of itemResults) {
                if (res.data) itemsData = itemsData.concat(res.data);
            }

            const itemsMap = {};
            if (itemsData && itemsData.length > 0) {
                itemsData.forEach(item => {
                    const key = item.OrderNumber;
                    if (!itemsMap[key]) itemsMap[key] = [];
                    itemsMap[key].push({ id: item.id, name: item.ProductName, size: item.Size, qty: item.Qty });
                });
            }

            // แปลงข้อมูลและกรองลิงก์รูปภาพในตัวทันที
            const formattedOrders = allOrders.map((o, idx) => ({
                id: o.OrderID || o.id || o.ID || o.OrderID_Num || o.order_id,
                orderNumber: o.OrderNumber || o.orderNumber || o.Order_Number || o.order_no || `REF-${idx}`,
                date: o.Date || o.date || o.OrderDate || o.order_date || getCurrentDate(),
                name: o.CustomerName || o.Name || o.name || o.customer_name || '',
                nickname: o.Nickname,
                address: o.Address,
                location: o.Province || o.Location || o.province || '',
                phoneNumber: o.Phone || o.phone || o.Phone_Number,
                salesCustomer: o.Sales || o.sales,
                taxId: o.TaxID || o.tax_id,
                billType: o.BillType || o.bill_type,
                price: o.Price || o.price,
                items: itemsMap[o.OrderNumber || o.orderNumber || o.Order_Number] || [],
                note: o.Note,
                status: o.Status,
                packDate: o.PackDate,
                packNote: o.PackNote,
                packImage: formatDriveImageUrl(o.PackImage),
                deliveryDate: o.DeliveryDate,
                shippingNote: o.ShippingNote,
                shippingImage: formatDriveImageUrl(o.ShippingImage),
                locationImage: formatDriveImageUrl(o.LocationImage),
                billDate: o.BillDate,
                billNote: o.BillNote,
                billImage: formatDriveImageUrl(o.BillImage),
                createdBy: o.CreatedBy,
                packedBy: o.PackedBy,
                shippedBy: o.ShippedBy,
                billedBy: o.BilledBy,
                scheduledDeliveryDate: o.ScheduledDeliveryDate,
                sender: o.ScheduledBy
            }));

            const validatedOrders = formattedOrders.map(o => {
                if (o.status === 'เรียบร้อย') {
                    const hasPack = o.packImage && o.packImage.split(',').filter(u => u.trim()).length > 0;
                    const hasShip = o.shippingImage && o.shippingImage.split(',').filter(u => u.trim()).length > 0;
                    const hasBill = o.billImage && o.billImage.split(',').filter(u => u.trim()).length > 0;

                    if (!hasPack) { return { ...o, status: 'รอจัดออเดอร์' }; }
                    if (!hasShip) { return { ...o, status: 'รอจัดส่ง' }; }
                    if (!hasBill) { return { ...o, status: 'รอรับบิล' }; }
                }
                return o;
            });

            // ใช้ข้อมูลจาก Server เป็นตัวตั้งต้นที่ถูกต้องที่สุด (ล้างรายการที่ไม่มีบน Server ออกทันที)
            const freshOrders = validatedOrders
                .sort((a, b) => {
                    const dateA = toInputDate(a.date) || '0000-00-00';
                    const dateB = toInputDate(b.date) || '0000-00-00';
                    if (dateA !== dateB) return dateB.localeCompare(dateA);

                    const idA = String(a.id);
                    const idB = String(b.id);
                    if (!isNaN(idA) && !isNaN(idB)) return Number(idB) - Number(idA);
                    return idB.localeCompare(idA);
                });

            setOrders(freshOrders);
            setLastUpdated(new Date());
            setIsInitialLoad(false);

            try {
                // บันทึกเฉพาะข้อมูลล่าสุดที่ถูกต้องจาก Server ลง Cache (ไม่เกิน 4000 รายการ)
                localStorage.setItem('ordersCacheV2', JSON.stringify(freshOrders.slice(0, 4000)));
            } catch (e) { }

        } catch (err) { console.error("Load Orders Error:", err); }
    };

    useEffect(() => {
        if (currentUser) {
            loadOptions();
            loadOrders();
            const channel = supabase.channel('realtime_orders_v2')
                .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'Orders' }, payload => {
                    if (!payload.new) return;
                    const o = payload.new;
                    const newOrder = {
                        id: o.OrderID, orderNumber: o.OrderNumber, date: o.Date, name: o.CustomerName, nickname: o.Nickname, address: o.Address,
                        location: o.Province, phoneNumber: o.Phone, salesCustomer: o.Sales, taxId: o.TaxID, billType: o.BillType, price: o.Price,
                        items: [], note: o.Note, status: o.Status, packDate: o.PackDate, packNote: o.PackNote,
                        packImage: formatDriveImageUrl(o.PackImage), deliveryDate: o.DeliveryDate, shippingNote: o.ShippingNote, shippingImage: formatDriveImageUrl(o.ShippingImage),
                        locationImage: formatDriveImageUrl(o.LocationImage), billDate: o.BillDate, billNote: o.BillNote, billImage: formatDriveImageUrl(o.BillImage),
                        createdBy: o.CreatedBy, packedBy: o.PackedBy, shippedBy: o.ShippedBy, billedBy: o.BilledBy,
                        scheduledDeliveryDate: o.ScheduledDeliveryDate, sender: o.ScheduledBy
                    };
                    setOrders(prev => {
                        // เช็คความซ้ำซ้อนด้วย Unique Key
                        const newKey = `${newOrder.id}_${newOrder.orderNumber || ''}`;
                        if (prev.some(x => `${x.id}_${x.orderNumber || ''}` === newKey)) return prev;

                        // เช็คว่ามีรายการที่กำลังบันทึก (Saving) และเลขที่ออเดอร์ตรงกันหรือไม่
                        const localIndex = prev.findIndex(x => x._isSaving && String(x.orderNumber) === String(newOrder.orderNumber));
                        if (localIndex !== -1) {
                            const updated = [...prev];
                            updated[localIndex] = { ...newOrder, _isSaving: false };
                            return updated;
                        }

                        return [newOrder, ...prev];
                    });
                })
                .on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'Orders' }, payload => {
                    if (!payload.new) return;
                    const o = payload.new;
                    const updatedOrder = {
                        id: o.OrderID, orderNumber: o.OrderNumber, date: o.Date, name: o.CustomerName, nickname: o.Nickname, address: o.Address,
                        location: o.Province, phoneNumber: o.Phone, salesCustomer: o.Sales, taxId: o.TaxID, billType: o.BillType, price: o.Price,
                        note: o.Note, status: o.Status, packDate: o.PackDate, packNote: o.PackNote,
                        packImage: formatDriveImageUrl(o.PackImage), deliveryDate: o.DeliveryDate, shippingNote: o.ShippingNote, shippingImage: formatDriveImageUrl(o.ShippingImage),
                        locationImage: formatDriveImageUrl(o.LocationImage), billDate: o.BillDate, billNote: o.BillNote, billImage: formatDriveImageUrl(o.BillImage),
                        createdBy: o.CreatedBy, packedBy: o.PackedBy, shippedBy: o.ShippedBy, billedBy: o.BilledBy,
                        scheduledDeliveryDate: o.ScheduledDeliveryDate, sender: o.ScheduledBy
                    };
                    setOrders(prev => prev.map(x => String(x.id) === String(updatedOrder.id) ? { ...x, ...updatedOrder, _isSaving: false } : x));
                })
                .on('postgres_changes', { event: 'DELETE', schema: 'public', table: 'Orders' }, payload => {
                    // จัดการการลบแบบ Real-time ให้แม่นยำขึ้น
                    const deleteId = payload.old?.OrderID || payload.old?.id;
                    if (deleteId) {
                        setOrders(prev => prev.filter(x => String(x.id) !== String(deleteId)));
                    }
                })
                .on('postgres_changes', { event: '*', schema: 'public', table: 'OrderItems' }, async payload => {
                    // Fetch เฉพาะ order ที่เปลี่ยน ไม่โหลดทั้งหมด
                    const changedOrderNum = payload.new?.OrderNumber || payload.old?.OrderNumber;
                    if (!changedOrderNum) return;
                    try {
                        const { data: items } = await supabase
                            .from('OrderItems')
                            .select('*')
                            .eq('OrderNumber', changedOrderNum);
                        const mappedItems = (items || []).map(i => ({
                            id: i.ItemID, name: i.ProductName, size: i.Size, qty: i.Qty
                        }));
                        setOrders(prev => prev.map(o =>
                            String(o.orderNumber) === String(changedOrderNum)
                                ? { ...o, items: mappedItems }
                                : o
                        ));
                    } catch (e) { console.warn('OrderItems patch error:', e); }
                })
                .subscribe();
            return () => { supabase.removeChannel(channel); };
        } else {
            const fetchUsers = async () => {
                const { data } = await supabase.from('central_users').select('username');
                if (data) setUserList(data.map(u => u.username));
            };
            fetchUsers();
        }
    }, [currentUser]);

    useEffect(() => {
        // ยกเลิกฟิลเตอร์อัตโนมัติตาม Role เพื่อให้เห็นรายการทั้งหมดเป็นค่าเริ่มต้น
    }, [currentUser]);

    useEffect(() => {
        if (currentUser && !currentUser.photo_url) {
            const fetchUserProfile = async () => {
                try {
                    const { data } = await supabase
                        .from('central_users')
                        .select('photo_url')
                        .eq('username', currentUser.username)
                        .single();
                    if (data && data.photo_url) {
                        const updatedUser = { ...currentUser, photo_url: data.photo_url };
                        setCurrentUser(updatedUser);
                        localStorage.setItem('orderSystem_user_session', JSON.stringify(updatedUser));
                    }
                } catch (e) {
                    console.error("Error fetching user profile:", e);
                }
            };
            fetchUserProfile();
        }
    }, [currentUser]);

    useEffect(() => {
        if (currentUser && !hasShownWarning && !isInitialLoad && orders.length > 0) {
            // กรองรายการที่ไม่สมบูรณ์ (#NUM!) และตรวจสอบงานค้างจากข้อมูล 3 เดือนล่าสุดที่ดึงมา
            const now = new Date();
            const isAuthorizedUser = ROLE_GROUPS.ADMIN.includes(currentUser?.role?.toLowerCase()?.trim()) || (currentUser?.username && String(currentUser.username).trim().toLowerCase() === 'd002') || (currentUser?.name && String(currentUser.name).trim().includes('จุฬาลักษณ์'));
            const currentYearStr = new Date().getFullYear().toString();
            const recentOrders = orders.filter(o => {
                const nameStr = String(o.name || '');
                const numStr = String(o.orderNumber || '');
                if (nameStr.includes('#NUM!') || nameStr.includes('#REF!') || numStr.startsWith('DAILY_SUMMARY_LOG_')) return false;
                const hasRestrictedItem = (o.items && o.items.some(i => RESTRICTED_BILL_TYPES.includes(i.name))) || (o.billType && RESTRICTED_BILL_TYPES.includes(o.billType));
                if (hasRestrictedItem && !isAuthorizedUser) return false;

                const d = toInputDate(o.date);
                if (!d || !d.startsWith(currentYearStr)) return false;

                return true;
            });
            const packCount = recentOrders.filter(o => ['รอจัดออเดอร์', 'รอจัด'].includes(o.status)).length;
            const incompleteCount = recentOrders.filter(o => o.status === 'สินค้าไม่ครบ').length;
            const shipCount = recentOrders.filter(o => o.status === 'รอจัดส่ง').length;
            const backlogCount = recentOrders.filter(o => o.status === 'สินค้าค้างส่ง').length;
            const billCount = recentOrders.filter(o => o.status === 'รอรับบิล').length;
            const totalPending = packCount + incompleteCount + shipCount + backlogCount + billCount;

            if (totalPending > 0) {
                let msg = `ตรวจพบ ${totalPending} รายการยังไม่ดำเนินการ ดังนี้:\n`;
                if (packCount > 0) msg += `• รอจัดออเดอร์: ${packCount} รายการ\n`;
                if (incompleteCount > 0) msg += `• สินค้าไม่ครบ: ${incompleteCount} รายการ\n`;
                if (shipCount > 0) msg += `• รอจัดส่ง: ${shipCount} รายการ\n`;
                if (backlogCount > 0) msg += `• สินค้าค้างส่ง: ${backlogCount} รายการ\n`;
                if (billCount > 0) msg += `• รอรับบิล: ${billCount} รายการ\n`;
                msg += `\nพนักงานที่เกี่ยวข้องดำเนินการให้เรียบร้อย เพราะมีผลต่อการพิจารณาการทำงาน`;
                showCustomModal(msg, 'error');
                setHasShownWarning(true);
            }
        }
    }, [currentUser, isInitialLoad, orders, hasShownWarning]);

    const showCustomModal = (message, type = 'info') => { setModalMessage(message); setModalType(type); setShowModal(true); window.scrollTo({ top: 0, behavior: 'smooth' }); };
    const handleShowProfile = () => { showCustomModal(`ผู้ใช้งาน: ${currentUser.name}\nสถานะ: ${currentUser.role}`, 'info'); };

    const handleLogin = async (u, p) => {
        setLoadingText('กำลังโหลด...'); setLoading(true);
        try {
            const { data, error } = await supabase.from('central_users').select('*').eq('username', u).eq('password', p).single();
            setLoading(false);
            if (data) {
                // ตรวจสอบสิทธิ์การใช้งาน (Role) ตามที่ลูกค้าต้องการ
                const allValidRoles = [
                    ...ROLE_GROUPS.ADMIN,
                    ...ROLE_GROUPS.QC_STORE,
                    ...ROLE_GROUPS.SHIPMENT
                ];
                const userRole = (data.role || '').toLowerCase().trim();

                if (!userRole || !allValidRoles.includes(userRole)) {
                    showCustomModal("คุณไม่มีสิทธิ์เข้าใช้งานระบบนี้\nกรุณาติดต่อผู้ดูแลระบบ", 'error');
                    return;
                }

                const userData = { name: data.name, role: data.role, username: u, photo_url: data.photo_url };
                setCurrentUser(userData);
                localStorage.setItem('orderSystem_user_session', JSON.stringify(userData));
                setCurrentScreen('dashboard');
            } else {
                showCustomModal("ชื่อผู้ใช้งานหรือรหัสผ่านไม่ถูกต้อง", 'error');
            }
        } catch (e) {
            setLoading(false);
            showCustomModal("เกิดข้อผิดพลาดในการเชื่อมต่อฐานข้อมูล", 'error');
        }
    };

    const handleLogout = () => { setCurrentUser(null); localStorage.removeItem('orderSystem_user_session'); setCurrentScreen('login'); setDashboardFilters({ query: '', status: '' }); dashboardScrollRef.current = 0; setHasShownWarning(false); };
    const handleRequestSave = (orderData) => { setPendingOrder(orderData); setShowConfirm(true); };

    const handleConfirmSave = async () => {
        setShowConfirm(false);
        if (!pendingOrder) return;

        isSavingRef.current = true;
        const optimisticOrder = { ...pendingOrder, _isSaving: true };
        setOrders(prev => {
            const exists = prev.some(o => String(o.id) === String(pendingOrder.id));
            if (exists) return prev.map(o => String(o.id) === String(pendingOrder.id) ? optimisticOrder : o);
            return [optimisticOrder, ...prev];
        });
        setCurrentScreen('dashboard');

        try {
            const finalOrder = { ...pendingOrder };
            if (finalOrder.packImage && typeof finalOrder.packImage === 'object') {
                finalOrder.packImage = await processImagesToSupabase(finalOrder.packImage, `Pack_${finalOrder.orderNumber}`);
            }
            if (finalOrder.shippingImage && typeof finalOrder.shippingImage === 'object') {
                finalOrder.shippingImage = await processImagesToSupabase(finalOrder.shippingImage, `Ship_${finalOrder.orderNumber}`);
            }
            if (finalOrder.billImage && typeof finalOrder.billImage === 'object') {
                finalOrder.billImage = await processImagesToSupabase(finalOrder.billImage, `Bill_${finalOrder.orderNumber}`);
            }
            if (finalOrder.locationImage && typeof finalOrder.locationImage === 'object') {
                finalOrder.locationImage = await processImagesToSupabase(finalOrder.locationImage, `Loc_${finalOrder.orderNumber}`);
            }

            const supaOrder = {
                OrderID: String(finalOrder.id), OrderNumber: finalOrder.orderNumber, Date: finalOrder.date, CustomerName: finalOrder.name,
                Nickname: finalOrder.nickname, Address: finalOrder.address, Province: finalOrder.location, Phone: finalOrder.phoneNumber,
                Sales: finalOrder.salesCustomer, TaxID: finalOrder.taxId, BillType: finalOrder.billType, Price: finalOrder.price, Note: finalOrder.note, Status: finalOrder.status,
                PackDate: finalOrder.packDate, PackNote: finalOrder.packNote, PackImage: finalOrder.packImage, DeliveryDate: finalOrder.deliveryDate,
                ShippingNote: finalOrder.shippingNote, ShippingImage: finalOrder.shippingImage, LocationImage: finalOrder.locationImage,
                BillDate: finalOrder.billDate, BillNote: finalOrder.billNote, BillImage: finalOrder.billImage, CreatedBy: finalOrder.createdBy,
                PackedBy: finalOrder.packedBy, ShippedBy: finalOrder.shippedBy, BilledBy: finalOrder.billedBy,
                ScheduledDeliveryDate: finalOrder.scheduledDeliveryDate, ScheduledBy: finalOrder.sender
            };

            const { data: oldData } = await supabase.from('Orders').select('Status').eq('OrderID', String(finalOrder.id)).single();
            const oldStatus = oldData ? oldData.Status : null;

            const { error: orderErr } = await supabase.from('Orders').upsert(supaOrder);
            if (orderErr) throw orderErr;

            if (finalOrder.items && Array.isArray(finalOrder.items)) {
                const deleteTargetNum = finalOrder.originalOrderNumber || finalOrder.orderNumber;
                await supabase.from('OrderItems').delete().eq('OrderNumber', deleteTargetNum);

                if (finalOrder.items.length > 0) {
                    const itemsToInsert = finalOrder.items.map(item => ({
                        OrderNumber: finalOrder.orderNumber, Date: finalOrder.date, CustomerName: finalOrder.name,
                        Nickname: finalOrder.nickname, Address: finalOrder.address, Province: finalOrder.location,
                        Phone: finalOrder.phoneNumber, Sales: finalOrder.salesCustomer, ProductName: item.name, Size: item.size, Qty: String(item.qty)
                    }));
                    await supabase.from('OrderItems').insert(itemsToInsert);
                }
            }

            await sendRealtimeTelegramAlert(finalOrder, oldStatus);

            isSavingRef.current = false;
            // Realtime ของ OrderItems จะ patch items อัตโนมัติ
            // ต้อง patch _isSaving เป็น false เอง เพราะ realtime Orders อาจมาก่อน/หลัง
            setOrders(prev => prev.map(o => String(o.id) === String(finalOrder.id) ? { ...finalOrder, _isSaving: false } : o));

        } catch (error) {
            isSavingRef.current = false;
            showCustomModal("บันทึกออเดอร์ไม่สำเร็จ: " + error.message, 'error');
            setOrders(prev => prev.map(o => String(o.id) === String(pendingOrder.id) ? { ...o, _isSaving: false } : o));
        }
    };

    const handleConfirmDate = async (newDate) => {
        if (currentOrderForDate) {
            const updatedOrder = { ...currentOrderForDate, scheduledDeliveryDate: newDate, sender: currentUser.name };
            const updatedOrders = orders.map(o => { if (o.id === currentOrderForDate.id) { return updatedOrder; } return o; });
            setOrders(updatedOrders);

            await supabase.from('Orders').update({
                ScheduledDeliveryDate: newDate, ScheduledBy: currentUser.name
            }).eq('OrderID', String(currentOrderForDate.id));
        }
        setDateModalOpen(false); setCurrentOrderForDate(null);
    };

    const handleOpenDateModal = (order) => { setCurrentOrderForDate(order); setDateModalOpen(true); };
    const handleNavigateOrder = (targetOrder) => { setSelectedOrder(targetOrder); };

    const handleAddOrder = (newOrder) => { const orderWithId = { ...newOrder, id: Date.now() }; handleRequestSave(orderWithId); };
    const handleUpdateOrder = (updatedOrder) => { handleRequestSave(updatedOrder); };
    const handleGoToOrderDetail = (order) => { setSelectedOrder(order); setReturnScreen('dashboard'); setCurrentScreen('order_detail'); };
    const navigateToEdit = (screen, order) => { setSelectedOrder(order); setReturnScreen(currentScreen === 'order_detail' ? 'order_detail' : 'dashboard'); setCurrentScreen(screen); };
    const handleFilterChange = (key, val) => { setDashboardFilters(prev => ({ ...prev, [key]: val })); };

    const handleSendSummary = async (ordersData) => {
        setLoadingText('กำลังส่งสรุปรายงาน...'); setLoading(true);
        try {
            await sendDailySummaryManual(ordersData);
            showCustomModal("ส่งข้อมูลสรุปประจำวันเข้า Telegram สำเร็จ", "success");
        } catch (e) {
            showCustomModal(`เกิดข้อผิดพลาดในการส่ง Telegram:\n${e.message}`, "error");
        }
        setLoading(false);
    };

    return (
        <div className="w-full h-dvh relative flex flex-col mx-auto bg-slate-50 overflow-hidden font-sans">
            {loading && <LoadingOverlay text={loadingText} />}
            <ConfirmationModal isOpen={showConfirm} onConfirm={handleConfirmSave} onCancel={() => setShowConfirm(false)} />
            <DateScheduleModal isOpen={dateModalOpen} onClose={() => setDateModalOpen(false)} onConfirm={handleConfirmDate} initialDate={currentOrderForDate?.scheduledDeliveryDate} />
            {currentScreen === 'login' && <LoginScreen onLogin={handleLogin} loading={loading} userList={userList} />}
            {currentScreen === 'dashboard' && <DashboardScreen orders={orders} globalYearFilter={globalYearFilter} setGlobalYearFilter={setGlobalYearFilter} availableYears={availableYears} onShowProfile={handleShowProfile} onOrderDetail={handleGoToOrderDetail} onCreateOrder={(o) => navigateToEdit('create_order', o)} onLogout={handleLogout} isLoading={isInitialLoad} currentUser={currentUser} filters={dashboardFilters} onFilterChange={handleFilterChange} scrollRef={dashboardScrollRef} onOpenDateModal={handleOpenDateModal} onSendSummary={handleSendSummary} onNavigateStats={() => setCurrentScreen('statistics')} onNavigateCustomers={() => setCurrentScreen('customers')} />}

            {currentScreen === 'statistics' && (ROLE_GROUPS.ADMIN.includes((currentUser?.role || '').toLowerCase().trim()) || (currentUser?.role || '').toLowerCase().trim() === 'user ss') && <StatisticsScreen orders={orders} customers={customers} globalYearFilter={globalYearFilter} setGlobalYearFilter={setGlobalYearFilter} availableYears={availableYears} onBack={() => setCurrentScreen('dashboard')} onOrderDetail={handleGoToOrderDetail} />}
            {currentScreen === 'customers' && <CustomerInsightScreen orders={orders} globalYearFilter={globalYearFilter} setGlobalYearFilter={setGlobalYearFilter} availableYears={availableYears} onOrderDetail={handleGoToOrderDetail} onBack={() => setCurrentScreen('dashboard')} />}

            {currentScreen === 'order_detail' && <OrderDetailScreen order={selectedOrder} allOrders={derivedFilteredOrders} onNavigate={handleNavigateOrder} onBack={() => setCurrentScreen(returnScreen === 'order_detail' ? 'dashboard' : (returnScreen || 'dashboard'))} onEditOrder={(o) => navigateToEdit('create_order', o)} onEditPack={(o) => navigateToEdit('pack_order', o)} onEditShip={(o) => navigateToEdit('shipping', o)} onEditBill={(o) => navigateToEdit('bill_order', o)} currentUser={currentUser} />}

            {currentScreen === 'create_order' && <CreateOrderScreen onAddOrder={handleAddOrder} onUpdateOrder={handleUpdateOrder} onRequestSave={handleRequestSave} initialOrder={selectedOrder} returnTo={returnScreen} showModal={showCustomModal} changeScreen={setCurrentScreen} customers={customers} products={products} currentUser={currentUser} />}
            {currentScreen === 'pack_order' && <PackOrderScreen order={selectedOrder} onUpdateOrder={handleUpdateOrder} onRequestSave={handleRequestSave} returnTo={returnScreen} showModal={showCustomModal} changeScreen={setCurrentScreen} currentUser={currentUser} />}
            {currentScreen === 'shipping' && <ShippingScreen order={selectedOrder} onUpdateOrder={handleUpdateOrder} onRequestSave={handleRequestSave} returnTo={returnScreen} showModal={showCustomModal} changeScreen={setCurrentScreen} currentUser={currentUser} />}
            {currentScreen === 'bill_order' && <BillOrderScreen order={selectedOrder} onUpdateOrder={handleUpdateOrder} onRequestSave={handleRequestSave} returnTo={returnScreen} showModal={showCustomModal} changeScreen={setCurrentScreen} currentUser={currentUser} />}
            {showModal && (<div className="absolute inset-0 z-[9999] flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm animate-in fade-in duration-200"><div className="bg-white rounded-[28px] shadow-2xl w-full max-w-[320px] p-7 transform scale-100 animate-in zoom-in-95 duration-200 text-center relative z-50 border border-slate-100"><div className={`w-16 h-16 mx-auto mb-5 rounded-full flex items-center justify-center shadow-inner ${modalType === 'error' ? 'bg-rose-100 text-rose-500 border border-rose-200' : modalType === 'success' ? 'bg-emerald-100 text-emerald-500 border border-emerald-200' : 'bg-indigo-100 text-indigo-500 border border-indigo-200'}`}>{modalType === 'error' ? <span className="text-4xl font-bold">!</span> : modalType === 'success' ? <CheckCircle2 size={36} strokeWidth={2.5} /> : <span className="text-4xl font-bold">i</span>}</div><h3 className="text-xl font-bold text-slate-800 mb-2">{modalType === 'success' ? 'สำเร็จ' : 'แจ้งเตือน'}</h3><p className="text-slate-500 mb-7 text-sm font-medium leading-relaxed whitespace-pre-line">{modalMessage}</p><button onClick={() => setShowModal(false)} className="w-full py-4 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold hover:shadow-[0_8px_20px_rgb(79,70,229,0.3)] hover:-translate-y-0.5 active:translate-y-0 transition-all">ตกลง</button></div></div>)}
        </div>
    );
}

try { const root = createRoot(document.getElementById('root')); root.render(<App />); } catch (error) { console.error("Application Render Error:", error); document.body.innerHTML = `<div style="text-align:center; padding: 20px; color: red;"><h2>เกิดข้อผิดพลาดในการโหลดระบบ</h2><p>${error.message}</p></div>`; }