const { useState, useEffect, useRef, useMemo, useCallback } = React;

const PROVINCES = ["กรุงเทพมหานคร", "เชียงใหม่", "ชลบุรี", "ขอนแก่น", "นครราชสีมา", "ภูเก็ต", "สงขลา", "อุดรธานี", "อื่นๆ"];
const REPAIR_PROBLEMS = ["ปั้มไม่ทำงาน", "น้ำยาไม่เข้า", "ระบบไฟไม่ทำงาน", "บอร์ดไม่ทำงาน", "ปุ่มกดเสีย", "น้ำรั่ว", "เสียงดังผิดปกติ", "อื่นๆ"];
const SERVICE_CHECKLIST = ["ตรวจเช็ก (รอบประจำเดือน)", "ตรวจเช็ก (กลไกการทำงาน)", "ตรวจเช็ก (ระบบไฟฟ้า)", "ตรวจเช็ก (ประสิทธิภาพของเครื่อง)", "ตรวจเช็ก (ระดับการใช้งานของเครื่อง)", "ตรวจเช็ก (การทำงานของบอร์ด)"];
const SERVICE_STATUS = ["ปกติ", "ผิดปกติ"];
const THAI_MONTHS_SHORT = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."];

const Icon = ({ name, size = 24, className = "" }) => {
    const ref = useRef(null);
    useEffect(() => {
        if (window.lucide && ref.current) {
            ref.current.innerHTML = `<i data-lucide="${name}" width="${size}" height="${size}" class="${className}"></i>`;
            window.lucide.createIcons({ root: ref.current, nameAttr: 'data-lucide' });
        }
    }, [name, size, className]);
    return <span ref={ref} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}></span>;
};

const formatDateAD = (dateStr) => { if (!dateStr) return '-'; const d = new Date(dateStr); return `${d.getDate()} ${THAI_MONTHS_SHORT[d.getMonth()]} ${d.getFullYear()}`; };
const formatDateTime = (dateStr) => { if (!dateStr) return '-'; return new Date(dateStr).toLocaleString('th-TH', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }); }

const getDriveThumbnail = (url) => {
    if (!url) return '';
    if (url.includes('drive.google.com')) {
        const idMatch = url.match(/id=([a-zA-Z0-9_-]+)/) || url.match(/\/d\/([a-zA-Z0-9_-]+)/);
        if (idMatch && (idMatch[1] || idMatch[2])) return `https://drive.google.com/thumbnail?id=${idMatch[1] || idMatch[2]}&sz=w600`;
    }
    return url;
};

const isCurrentMonth = (dateStr) => { const d = new Date(dateStr); const now = new Date(); return d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear(); };

const useInfiniteScroll = (callback, hasMore) => {
    const observer = useRef();
    const lastElementRef = useCallback(node => {
        if (!hasMore) return;
        if (observer.current) observer.current.disconnect();
        observer.current = new IntersectionObserver(entries => { if (entries[0].isIntersecting) callback(); }, { threshold: 0.5 });
        if (node) observer.current.observe(node);
    }, [hasMore, callback]);
    return lastElementRef;
};

const Loading = ({ text }) => (<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[100] flex flex-col items-center justify-center text-white"><div className="w-12 h-12 border-4 border-white/30 border-t-white rounded-full animate-spin mb-3"></div><div className="font-bold">{text || 'กำลังโหลด...'}</div></div>);

const CustomAlert = ({ title, message, type, onConfirm, onCancel, showCancel = false, showInput = false, inputPlaceholder = "", initialInputValue = "" }) => {
    const [inputValue, setInputValue] = React.useState(initialInputValue);
    let bgColor = 'bg-blue-100', textColor = 'text-blue-600', btnColor = 'bg-blue-600 hover:bg-blue-700', iconName = 'info';
    if (type === 'success') { bgColor = 'bg-green-100'; textColor = 'text-green-600'; btnColor = 'bg-green-600 hover:bg-green-700'; iconName = 'check'; }
    else if (type === 'error') { bgColor = 'bg-red-100'; textColor = 'text-red-600'; btnColor = 'bg-red-600 hover:bg-red-700'; iconName = 'alert-circle'; }
    else if (type === 'question') { bgColor = 'bg-orange-100'; textColor = 'text-orange-600'; btnColor = 'bg-orange-600 hover:bg-orange-700'; iconName = 'help-circle'; }
    return (
        <div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/50 backdrop-blur-sm px-4 animate-fade-in">
            <div className="bg-white rounded-2xl p-6 w-full max-w-sm shadow-2xl animate-pop text-center">
                <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 ${bgColor} ${textColor}`}><Icon name={iconName} size={32} /></div>
                <h3 className="text-xl font-bold text-gray-800 mb-2">{title}</h3>
                <p className="text-gray-500 mb-4 text-sm">{message}</p>
                {showInput && (
                    <div className="mb-5 text-left">
                        <input
                            type="text"
                            className="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-blue-500 text-sm font-medium"
                            placeholder={inputPlaceholder}
                            value={inputValue}
                            onChange={e => setInputValue(e.target.value)}
                            autoFocus
                        />
                    </div>
                )}
                <div className="flex gap-3">
                    {showCancel && (<button onClick={onCancel} className="flex-1 py-3 rounded-xl border border-gray-200 text-gray-600 font-bold hover:bg-gray-50 transition-colors">ยกเลิก</button>)}
                    <button 
                        onClick={() => {
                            if (showInput) onConfirm(inputValue);
                            else onConfirm();
                        }} 
                        className={`flex-1 py-3 rounded-xl text-white font-bold shadow-lg transition-colors ${btnColor}`}
                    >
                        ตกลง
                    </button>
                </div>
            </div>
        </div>
    );
};

const PasscodeModal = null; // Removed - No longer used

const StatusToggle = ({ value, onChange }) => (<div className="flex bg-gray-100 p-1.5 rounded-2xl shadow-inner"> <button onClick={() => onChange('ใช้งาน')} className={`flex-1 py-2.5 rounded-xl text-sm font-bold flex items-center justify-center gap-2 transition-all ${value === 'ใช้งาน' ? 'bg-white text-green-600 shadow-md transform scale-[1.02]' : 'text-gray-400 hover:text-gray-600'}`}><Icon name="check-circle" size={16} /> ใช้งาน</button> <button onClick={() => onChange('สต็อก')} className={`flex-1 py-2.5 rounded-xl text-sm font-bold flex items-center justify-center gap-2 transition-all ${value === 'สต็อก' ? 'bg-white text-blue-600 shadow-md transform scale-[1.02]' : 'text-gray-400 hover:text-gray-600'}`}><Icon name="package" size={16} /> สต็อก</button> </div>);

const ImageUpload = ({ label, value, onChange }) => {
    const [showOption, setShowOption] = useState(false);
    const cameraRef = useRef(null); const fileRef = useRef(null);
    const handleFile = (e) => {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (event) => {
                const img = new Image();
                img.onload = () => {
                    const canvas = document.createElement('canvas');
                    let width = img.width; let height = img.height;
                    const maxDim = 1024;
                    if (width > height && width > maxDim) { height *= maxDim / width; width = maxDim; } else if (height > maxDim) { width *= maxDim / height; height = maxDim; }
                    canvas.width = width; canvas.height = height;
                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(img, 0, 0, width, height);
                    onChange(canvas.toDataURL('image/jpeg', 0.6));
                    setShowOption(false);
                };
                img.src = event.target.result;
            };
            reader.readAsDataURL(file);
        }
        e.target.value = null;
    };
    const handleDelete = (e) => { e.stopPropagation(); onChange(''); };

    return (
        <div className="mb-4">
            <span className="label-modern">{label}</span>
            <input ref={cameraRef} type="file" accept="image/*" capture="environment" className="hidden" onChange={handleFile} />
            <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={handleFile} />
            {value ? (
                <div className="relative w-full aspect-square bg-gray-100 rounded-xl overflow-hidden border border-gray-300 group cursor-pointer" onClick={() => setShowOption(true)}>
                    <img src={value} className="w-full h-full object-cover" />
                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors flex items-center justify-center"><div className="bg-white/90 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-bold text-gray-700 shadow opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1"><Icon name="refresh-cw" size={12} /> แตะเพื่อเปลี่ยน</div></div>
                    <button onClick={handleDelete} className="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full shadow-md hover:bg-red-600 z-20 transition-colors"><Icon name="trash-2" size={18} /></button>
                </div>
            ) : (
                <div onClick={() => setShowOption(true)} className="cursor-pointer block relative w-full aspect-square bg-white rounded-xl border-2 border-dashed border-gray-300 hover:border-blue-400 transition-all group overflow-hidden shadow-sm flex flex-col items-center justify-center text-gray-400 gap-2 hover:bg-blue-50">
                    <div className="bg-blue-50 p-4 rounded-full text-blue-600 group-hover:bg-white transition-colors"><Icon name="camera" size={32} /></div>
                    <div className="text-center"><span className="block text-sm font-bold text-gray-700">เพิ่มรูปภาพ</span><span className="text-xs text-gray-400">ถ่ายรูป หรือ อัปโหลด</span></div>
                </div>
            )}
            {showOption && ReactDOM.createPortal(
                <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in">
                    <div className="absolute inset-0" onClick={() => setShowOption(false)}></div>
                    <div className="bg-white w-full max-w-xs rounded-2xl p-6 relative z-10 shadow-2xl animate-pop">
                        <h3 className="text-lg font-bold text-center mb-4 text-gray-800">เลือกรูปภาพ</h3>
                        <div className="space-y-3">
                            <button onClick={() => { cameraRef.current.click(); }} className="w-full py-3.5 bg-blue-50 text-blue-700 rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-blue-100 transition-colors"><Icon name="camera" size={20} /> ถ่ายรูป</button>
                            <button onClick={() => { fileRef.current.click(); }} className="w-full py-3.5 bg-gray-50 text-gray-700 rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-gray-100 transition-colors"><Icon name="image" size={20} /> อัปโหลดจากอัลบั้ม</button>
                            <button onClick={() => setShowOption(false)} className="w-full py-3 text-gray-400 font-bold hover:text-gray-600 transition-colors mt-2">ยกเลิก</button>
                        </div>
                    </div>
                </div>,
                document.body
            )}
        </div>
    );
};

const QRScanner = ({ onScan, onClose }) => {
    useEffect(() => { const html5QrCode = new Html5Qrcode("reader"); const config = { fps: 10, qrbox: { width: 250, height: 250 } }; html5QrCode.start({ facingMode: "environment" }, config, (decodedText) => { html5QrCode.stop().then(() => onScan(decodedText)); }, (errorMessage) => { }).catch(err => console.log(err)); return () => { try { html5QrCode.stop(); } catch (e) { } }; }, []);
    return (<div className="fixed inset-0 z-[70] bg-black flex flex-col items-center justify-center"> <div id="reader" className="w-full max-w-sm bg-black"></div> <button onClick={onClose} className="mt-8 bg-white text-black px-6 py-3 rounded-full font-bold flex items-center gap-2"><Icon name="x" /> ยกเลิกการสแกน</button> </div>);
};

const handleGPSHelper = (setFunc) => { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((pos) => setFunc(prev => ({ ...prev, GPS: `${pos.coords.latitude},${pos.coords.longitude}` })), () => alert('ไม่สามารถดึงตำแหน่ง GPS ได้')); } else alert('Browser ไม่รองรับ GPS'); };

const GPSWidget = ({ gps, onGetLocation }) => {
    return (<div className="mb-4"> <label className="label-modern">พิกัด GPS / แผนที่</label> <div className="w-full aspect-square bg-gray-100 rounded-xl overflow-hidden relative border border-gray-300 shadow-sm"> {gps ? (<iframe width="100%" height="100%" frameBorder="0" scrolling="no" marginHeight="0" marginWidth="0" src={`https://maps.google.com/maps?q=${gps}&z=17&output=embed`} className="w-full h-full"></iframe>) : (<div className="absolute inset-0 flex flex-col items-center justify-center text-gray-400 bg-gray-50"><Icon name="map" size={48} className="mb-2 opacity-30" /><span className="text-xs text-gray-400">ยังไม่มีข้อมูลพิกัด</span></div>)} <button onClick={onGetLocation} className="absolute bottom-4 right-4 bg-white/90 backdrop-blur text-blue-600 border border-blue-100 p-3 rounded-xl shadow-lg hover:bg-blue-50 active:scale-95 transition-all flex items-center gap-2 z-10"><Icon name="crosshair" size={20} /> <span className="text-xs font-bold">{gps ? 'อัปเดตพิกัด' : 'ระบุพิกัดปัจจุบัน'}</span></button> </div> {gps && <div className="text-[10px] text-gray-400 mt-1.5 text-center font-mono tracking-wider">{gps}</div>} </div>);
};

const ViewMap = ({ gps }) => {
    if (!gps) return null;
    return (
        <div className="w-full aspect-square rounded-xl overflow-hidden border border-gray-200 shadow-sm mt-2 bg-gray-100 relative">
            <iframe width="100%" height="100%" src={`https://maps.google.com/maps?q=${gps}&z=15&output=embed`} frameBorder="0" scrolling="no" marginHeight="0" marginWidth="0"></iframe>
            <a href={`https://maps.google.com/maps?q=${gps}`} target="_blank" className="absolute bottom-2 right-2 bg-white/90 backdrop-blur px-3 py-1 text-xs font-bold rounded-lg shadow text-blue-600 flex items-center gap-1"><Icon name="external-link" size={12} /> เปิดแอป</a>
        </div>
    )
};

const ServiceImages = ({ before, after }) => {
    if (!before && !after) return null;
    const images = [];
    if (before) images.push({ src: before, label: 'รูปก่อน' });
    if (after) images.push({ src: after, label: 'รูปหลัง' });
    return (
        <div className="w-full aspect-square rounded-xl overflow-hidden border border-gray-200 mt-2 flex flex-col bg-gray-100">
            {images.map((img, idx) => (
                <div key={idx} className={`relative w-full ${images.length === 2 ? 'h-1/2 border-b last:border-b-0' : 'h-full'}`}>
                    <img src={getDriveThumbnail(img.src)} className="w-full h-full object-cover" onClick={() => window.open(img.src)} />
                    <span className="absolute bottom-1 right-1 bg-black/50 text-white text-[10px] px-2 py-0.5 rounded-full backdrop-blur-sm shadow-sm">{img.label}</span>
                </div>
            ))}
        </div>
    );
};

const LoginView = ({ u, p, setU, setP, handleLogin, showAlert, closeAlert }) => {
    const [showPassword, setShowPassword] = React.useState(false);
    
    const onSubmit = (e) => {
        e.preventDefault();
        handleLogin(u, p);
    };

    return (
        <div className="min-h-screen bg-gradient-to-br from-blue-700 to-cyan-500 flex items-center justify-center p-6">
            <div className="bg-white rounded-3xl p-8 w-full max-w-sm shadow-2xl animate-in">
                <div className="text-center mb-8">
                    <div className="bg-blue-50 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-4 border-4 border-blue-100">
                        <Icon name="wrench" size={40} className="text-blue-600" />
                    </div>
                    <h1 className="text-2xl font-bold text-gray-800">ระบบเซอร์วิส</h1>
                    <p className="text-gray-500 text-sm">Service System Login</p>
                </div>
                
                <form onSubmit={onSubmit} className="space-y-5">
                    <div className="relative group">
                        <div className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-blue-500 transition-colors">
                            <Icon name="user" size={18} />
                        </div>
                        <input 
                            type="text" 
                            placeholder="ชื่อผู้ใช้งาน" 
                            className="input-modern bg-gray-50 pl-11 ring-offset-2 focus:ring-2 focus:ring-blue-500 transition-all" 
                            value={u} 
                            onChange={e => setU(e.target.value)} 
                            required
                        />
                    </div>
                    
                    <div className="space-y-2">
                        <div className="relative group">
                            <div className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-blue-500 transition-colors">
                                <Icon name="lock" size={18} />
                            </div>
                            <input 
                                type={showPassword ? "text" : "password"} 
                                placeholder="รหัสผ่าน" 
                                className="input-modern bg-gray-50 pl-11 pr-12 ring-offset-2 focus:ring-2 focus:ring-blue-500 transition-all" 
                                value={p} 
                                onChange={e => setP(e.target.value)} 
                                required
                            />
                            <button 
                                type="button"
                                onClick={() => setShowPassword(!showPassword)}
                                className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-blue-600 transition-colors p-1"
                            >
                                <Icon name={showPassword ? "eye-off" : "eye"} size={20} />
                            </button>
                        </div>
                    </div>

                    <button 
                        type="submit" 
                        className="w-full bg-blue-600 text-white p-4 rounded-xl font-bold shadow-lg shadow-blue-200 hover:bg-blue-700 active:scale-[0.98] transition-all flex items-center justify-center gap-2 mt-4"
                    >
                        เข้าสู่ระบบ
                    </button>
                </form>
            </div>
        </div>
    );
};

const DashboardView = ({ user, machines, services, repairs, searchTerm, setSearchTerm, filter, setFilter, scrollPos, setScrollPos, handleLogout, setScannerTarget, setShowScanner, setView, prepareServiceForm, prepareRepairForm, setSelectedMachine, setMachineForm, onSaveAction, showAlert, closeAlert, onSendTelegramReport }) => {
    const [displayLimit, setDisplayLimit] = useState(50);
    const [selectedPendingRepair, setSelectedPendingRepair] = useState(null);
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const [provinceFilter, setProvinceFilter] = useState('');

    useEffect(() => { window.scrollTo(0, scrollPos); }, []);

    const handleItemClick = (m) => { setScrollPos(window.scrollY); setSelectedMachine(m); setView('history'); };
    const handleServiceClick = (e, m) => { e.stopPropagation(); setScrollPos(window.scrollY); prepareServiceForm(m); };
    const handleRepairClick = (e, m) => { e.stopPropagation(); setScrollPos(window.scrollY); prepareRepairForm(m); };

    // 🚨 ใช้งานแบบปลอดภัย (Safe Mapping) เพื่อป้องกันแอปแครช
    const filtered = useMemo(() => {
        return machines.filter(m => {
            const machineNameStr = m.Name || '';
            const machineIdStr = m.MachineID || '';
            const matchesSearch = machineNameStr.toLowerCase().includes(searchTerm.toLowerCase()) || machineIdStr.toLowerCase().includes(searchTerm.toLowerCase());
            if (!matchesSearch) return false;

            if (provinceFilter && m.Province !== provinceFilter) return false;

            const machineServices = services.filter(s => s.MachineID === m.MachineID);
            const hasServiceThisMonth = machineServices.some(s => isCurrentMonth(s.Date));
            const hasPendingRepair = repairs.some(r => r.MachineID === m.MachineID && r.ActionStatus !== 'ดำเนินการเสร็จแล้ว');

            if (filter === 'serviced') return hasServiceThisMonth;
            if (filter === 'notserviced') return !hasServiceThisMonth && m.Status !== 'สต็อก';
            if (filter === 'repair') return hasPendingRepair;
            return true;
        });
    }, [machines, services, repairs, searchTerm, filter, provinceFilter]);

    useEffect(() => { setDisplayLimit(50); }, [searchTerm, filter, provinceFilter]);
    const loadMore = useCallback(() => { setDisplayLimit(prev => prev + 50); }, []);
    const lastElementRef = useInfiniteScroll(loadMore, filtered.length > displayLimit);
    const getHeaderText = () => { switch (filter) { case 'serviced': return 'เซอร์วิสแล้ว'; case 'notserviced': return 'ยังไม่เซอร์วิส'; case 'repair': return 'แจ้งซ่อม'; default: return 'รายการทั้งหมด'; } };

    return (
        <div className="pb-16 animate-in bg-gray-50 min-h-screen relative overflow-x-hidden">
            <style>{`
                @keyframes slideRight { from { transform: translateX(-100%); } to { transform: translateX(0); } }
                .animate-slide-right { animation: slideRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
            `}</style>

            {/* Header */}
            <div className="bg-gradient-to-r from-blue-600 to-cyan-500 z-40 px-5 py-5 md:py-8 rounded-b-[2rem] shadow-lg w-full">
                <div className="flex justify-between items-center mb-4 max-w-[1920px] mx-auto">
                    <div className="flex items-center gap-3 text-white">
                        {/* Hamburger Button Moved to Top Left */}
                        <button onClick={() => setIsMenuOpen(true)} className="p-2 bg-white/10 rounded-xl hover:bg-white/20 transition-all backdrop-blur-sm shadow-sm border border-white/10">
                            <Icon name="menu" size={24} />
                        </button>
                        <div>
                            <h1 className="text-xl md:text-2xl font-bold tracking-wide">หน้าหลัก</h1>
                            <div className="flex items-center gap-2 mt-1">
                                <p className="text-blue-100 text-sm md:text-base">{getHeaderText()}: {filtered.length} รายการ</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="flex gap-2 w-full max-w-[1920px] mx-auto">
                    <div className="relative flex-1">
                        <Icon name="search" size={18} className="absolute left-3 top-3.5 text-gray-500" />
                        <input placeholder="ค้นหา..." className="w-full bg-white pl-10 pr-4 py-3 rounded-xl border-none outline-none shadow-sm md:text-lg" value={searchTerm} onChange={e => setSearchTerm(e.target.value)} />
                    </div>
                    <div className="relative flex-none w-[120px] md:w-[150px]">
                        <select className="w-full bg-white pl-3 pr-8 py-3 rounded-xl border-none outline-none shadow-sm md:text-lg appearance-none text-gray-600 text-sm md:text-base cursor-pointer" value={provinceFilter} onChange={e => setProvinceFilter(e.target.value)}>
                            <option value="">ทุกจังหวัด</option>
                            {Array.from(new Set(machines.map(m => m.Province).filter(Boolean))).sort().map(p => (
                                <option key={p} value={p}>{p}</option>
                            ))}
                        </select>
                        <div className="absolute right-3 top-3.5 text-gray-500 pointer-events-none">
                            <Icon name="chevron-down" size={18} />
                        </div>
                    </div>
                </div>
            </div>

            {/* Content Cards - Responsive Grid Layout Full Width */}
            <div className="px-4 md:px-6 lg:px-8 mt-6 md:mt-8 w-full mx-auto max-w-[1920px]">
                <div className="grid grid-cols-[repeat(auto-fill,minmax(320px,1fr))] gap-4 sm:gap-6">
                    {filtered.length === 0 ? <div className="col-span-full text-center text-gray-400 py-10 md:py-20 text-lg">ไม่พบรายการ</div> : filtered.slice(0, displayLimit).map((m, index) => {
                        const pendingRepair = repairs.find(r => r.MachineID === m.MachineID && r.ActionStatus !== 'ดำเนินการเสร็จแล้ว');
                        const hasPending = !!pendingRepair;
                        const machineServices = services.filter(s => s.MachineID === m.MachineID);
                        const hasServiceThisMonth = machineServices.some(s => isCurrentMonth(s.Date));
                        return (
                            <div key={m.MachineID} ref={index === displayLimit - 1 ? lastElementRef : null} className="bg-white rounded-2xl p-3 md:p-4 lg:p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow relative flex flex-col justify-between h-full">
                                <div className="absolute top-3 right-3 z-10"><span className={`inline-block px-2 md:px-3 py-0.5 md:py-1 rounded-md text-[10px] md:text-xs font-bold tracking-wide shadow-sm ${m.Status === 'ใช้งาน' ? 'bg-green-100 text-green-700' : (m.Status === 'สต็อก' ? 'bg-blue-100 text-blue-700' : 'bg-red-100 text-red-700')}`}>{m.Status}</span></div>
                                <div className="flex gap-3 md:gap-4 mb-3 md:mb-4 pr-10 md:pr-12" onClick={() => handleItemClick(m)}>
                                    <div className="w-16 h-16 md:w-20 md:h-20 lg:w-24 lg:h-24 bg-gray-100 rounded-full overflow-hidden flex-shrink-0 relative border border-gray-200 shadow-sm">
                                        {m.ImageURL ? <img src={getDriveThumbnail(m.ImageURL)} className="w-full h-full object-cover" /> : <div className="flex items-center justify-center h-full text-gray-400"><Icon name="image" size={24} /></div>}
                                    </div>
                                    <div className="flex-1 min-w-0 flex flex-col justify-center">
                                        <div className="text-[10px] md:text-xs font-bold text-blue-600 mb-0.5">{m.MachineID}</div>
                                        <h3 className="font-bold text-gray-800 text-sm md:text-[15px] leading-snug w-full break-words whitespace-normal">{m.Name || 'ไม่ระบุชื่อ'}</h3>
                                        <p className="text-[11px] md:text-sm text-gray-400 mt-0.5 md:mt-1 break-words whitespace-normal">{m.Province}</p>
                                    </div>
                                </div>
                                <div className="grid grid-cols-3 gap-2 border-t border-gray-100 pt-3">
                                    <button onClick={(e) => !hasPending && handleServiceClick(e, m)} disabled={hasPending || m.Status === 'สต็อก'} className={`${hasPending || m.Status === 'สต็อก' ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-green-50 hover:bg-green-100 text-green-700'} py-2 px-2 rounded-lg flex flex-row items-center justify-center gap-1.5 transition-colors group relative`}><div className={`${hasPending || m.Status === 'สต็อก' ? 'text-gray-400' : 'bg-green-100 text-green-600 group-hover:scale-110'} p-1 rounded-lg transition-transform`}><Icon name={hasPending ? "lock" : "qr-code"} size={14} /></div><span className="text-[10px] md:text-xs font-bold">เซอร์วิส</span></button>
                                    <button onClick={(e) => { e.stopPropagation(); handleItemClick(m); }} className={`${!hasServiceThisMonth ? 'bg-orange-600 text-white hover:bg-orange-700' : 'bg-green-50 text-green-700 hover:bg-green-100'} py-2 px-2 rounded-lg flex flex-row items-center justify-center gap-1.5 transition-colors group`}><div className={`${!hasServiceThisMonth ? 'text-white' : 'bg-green-100 text-green-600 group-hover:scale-110'} p-1 rounded-lg transition-transform`}><Icon name={!hasServiceThisMonth ? "alert-circle" : "history"} size={14} /></div><span className="text-[10px] md:text-xs font-bold">ประวัติ</span></button>
                                    <button onClick={(e) => { e.stopPropagation(); if (hasPending) { setSelectedPendingRepair(pendingRepair); } else { handleRepairClick(e, m); } }} className={`${hasPending ? 'bg-orange-600 text-white hover:bg-orange-700' : 'bg-green-50 text-green-700 hover:bg-green-100'} py-2 px-2 rounded-lg flex flex-row items-center justify-center gap-1.5 transition-colors group`}><div className={`${hasPending ? 'text-white' : 'bg-green-100 text-green-600 group-hover:scale-110'} p-1 rounded-lg transition-transform`}><Icon name="wrench" size={14} /></div><span className="text-[10px] md:text-xs font-bold">{hasPending ? 'ซ่อม' : 'แจ้งซ่อม'}</span></button>
                                </div>
                            </div>
                        );
                    })}
                </div>
                {filtered.length > displayLimit && <div className="text-center py-6 md:py-8"><div className="inline-block w-8 h-8 md:w-10 md:h-10 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div></div>}
            </div>

            {/* Hamburger Menu Sidebar (Side Drawer) */}
            {isMenuOpen && (
                <div className="fixed inset-0 z-[100] flex pointer-events-auto">
                    {/* Backdrop */}
                    <div className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-in" onClick={() => setIsMenuOpen(false)}></div>

                    {/* Sidebar with Slide Right Animation */}
                    <div className="absolute top-0 bottom-0 left-0 w-[280px] md:w-[320px] bg-[#0f172a] text-white shadow-2xl flex flex-col animate-slide-right">

                        {/* Header Profile */}
                        <div className="p-5 flex justify-between items-start mt-2">
                            <div>
                                <div className="text-[10px] md:text-xs text-gray-400 mb-1">ระบบจัดการลูกค้า</div>
                                <div className="flex items-center gap-2">
                                    <div className="w-8 h-8 rounded-full border border-gray-600 flex items-center justify-center bg-gray-800 text-blue-400 overflow-hidden">
                                        {user.photo_url ? (
                                            <img src={getDriveThumbnail(user.photo_url)} className="w-full h-full object-cover" />
                                        ) : (
                                            <Icon name="user" size={18} />
                                        )}
                                    </div>
                                    <span className="font-bold text-sm md:text-base text-gray-100">{user.name}</span>
                                    <span className="text-[8px] md:text-[10px] bg-blue-600/20 text-blue-300 px-1.5 py-0.5 rounded border border-blue-500/30 uppercase tracking-wider">{user.role || 'USER SS'}</span>
                                </div>
                            </div>
                            <button onClick={() => setIsMenuOpen(false)} className="w-8 h-8 rounded-full bg-gray-800/80 flex items-center justify-center text-gray-400 hover:bg-gray-700 hover:text-white transition-colors">
                                <Icon name="x" size={16} />
                            </button>
                        </div>

                        {/* Menu Items */}
                        <div className="flex-1 overflow-y-auto py-2 px-4 flex flex-col gap-1">

                            {/* Operational Actions */}
                            <div className="text-[11px] md:text-xs text-gray-500 font-bold px-2 mb-2 mt-2">การทำงาน</div>

                            <button onClick={() => { setScannerTarget('service'); setShowScanner(true); setIsMenuOpen(false); }} className={`flex items-center gap-3 px-4 py-3.5 rounded-xl transition-all bg-gradient-to-r from-blue-600/20 to-cyan-500/20 border border-blue-500/30 text-blue-300 hover:bg-blue-600/40 hover:text-white mb-2`}>
                                <Icon name="scan" size={20} /> <span className="font-bold text-sm md:text-base">สแกนคิวอาร์โค้ด</span>
                            </button>

                            {(user.role || '').toLowerCase() === 'admin' && (
                                <button onClick={() => { onSendTelegramReport(); setIsMenuOpen(false); }} className={`flex items-center gap-3 px-4 py-3.5 rounded-xl transition-all bg-gradient-to-r from-orange-600/20 to-red-500/20 border border-orange-500/30 text-orange-300 hover:bg-orange-600/40 hover:text-white mb-2`}>
                                    <Icon name="send" size={20} /> <span className="font-bold text-sm md:text-base">ส่งรายงาน Telegram</span>
                                </button>
                            )}

                            <div className="my-3 border-t border-gray-700/50"></div>

                            {/* View Filters */}
                            <div className="text-[11px] md:text-xs text-gray-500 font-bold px-2 mb-2 mt-2">เมนูหลัก</div>

                            <button onClick={() => { setFilter(filter === 'serviced' ? 'all' : 'serviced'); setIsMenuOpen(false); }} className={`flex items-center gap-3 px-4 py-3.5 md:py-4 rounded-xl transition-all ${filter === 'serviced' ? 'bg-blue-600 text-white shadow-md shadow-blue-900/50' : 'text-gray-300 hover:bg-gray-800/60 hover:text-white'}`}>
                                <Icon name="check-circle" size={20} /> <span className="font-bold text-sm md:text-base">เซอร์วิสแล้ว</span>
                            </button>

                            <button onClick={() => { setFilter(filter === 'notserviced' ? 'all' : 'notserviced'); setIsMenuOpen(false); }} className={`flex items-center gap-3 px-4 py-3.5 md:py-4 rounded-xl transition-all ${filter === 'notserviced' ? 'bg-blue-600 text-white shadow-md shadow-blue-900/50' : 'text-gray-300 hover:bg-gray-800/60 hover:text-white'}`}>
                                <Icon name="x-circle" size={20} /> <span className="font-bold text-sm md:text-base">ยังไม่เซอร์วิส</span>
                            </button>

                            <button onClick={() => { setFilter(filter === 'repair' ? 'all' : 'repair'); setIsMenuOpen(false); }} className={`flex items-center gap-3 px-4 py-3.5 md:py-4 rounded-xl transition-all ${filter === 'repair' ? 'bg-blue-600 text-white shadow-md shadow-blue-900/50' : 'text-gray-300 hover:bg-gray-800/60 hover:text-white'}`}>
                                <Icon name="wrench" size={20} /> <span className="font-bold text-sm md:text-base">แจ้งซ่อม</span>
                            </button>

                            {/* Management Roles Only */}
                            {MANAGEMENT_ROLES.includes((user.role || '').toLowerCase()) && (
                                <>

                                    {/* Management */}
                                    <div className="text-[11px] md:text-xs text-gray-500 font-bold px-2 mb-2 mt-4">ผู้ตรวจสอบ (Inspector)</div>
                                    <button onClick={() => { setView('inspector'); setIsMenuOpen(false); }} className="w-full flex items-center justify-between p-3 rounded-xl hover:bg-blue-50 transition-colors mb-1 text-blue-600 bg-blue-50/50 border border-blue-100">
                                        <div className="flex items-center gap-3">
                                            <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-sm text-blue-600"><Icon name="bar-chart-2" size={24} /></div>
                                            <div className="text-left"><div className="font-bold text-sm">รายงานตรวจสอบ</div><div className="text-[10px] opacity-70">สรุปงานเซอร์วิสรายเดือน</div></div>
                                        </div>
                                        <Icon name="chevron-right" size={18} />
                                    </button>

                                    <div className="text-[11px] md:text-xs text-gray-500 font-bold px-2 mb-2 mt-4">การจัดการระบบ</div>

                                    <button onClick={() => { setView('stock'); setIsMenuOpen(false); }} className={`flex items-center gap-3 px-4 py-3.5 md:py-4 rounded-xl transition-all text-gray-300 hover:bg-gray-800/60 hover:text-white`}>
                                        <Icon name="database" size={20} /> <span className="font-bold text-sm md:text-base">จัดการสต็อกเครื่อง</span>
                                    </button>
                                </>
                            )}
                        </div>

                        {/* Footer Logout */}
                        <div className="p-4 mb-4 mt-auto">
                            <button onClick={() => { handleLogout(); setIsMenuOpen(false); }} className="w-full flex items-center justify-center gap-2 px-4 py-3.5 md:py-4 rounded-xl bg-gray-800/40 border border-gray-700 text-red-400 hover:bg-red-500/10 hover:border-red-500/50 hover:text-red-300 transition-all font-bold text-sm md:text-base">
                                <Icon name="log-out" size={18} /> ออกจากระบบ
                            </button>
                        </div>

                    </div>
                </div>
            )}

            {selectedPendingRepair && (
                <HistoryDetailModal
                    data={selectedPendingRepair} type="repair" onClose={() => setSelectedPendingRepair(null)} user={user}
                    onSaveAction={(payload) => { onSaveAction(payload); setSelectedPendingRepair(null); }}
                    showAlert={showAlert} closeAlert={closeAlert}
                />
            )}
        </div>
    );
};

const StockManagementView = ({ machines, setView, setMachineForm, deleteMachine, saveMachineToStock, showAlert, closeAlert }) => {
    const [search, setSearch] = useState('');
    const [displayLimit, setDisplayLimit] = useState(50);

    // 🚨 Safe Mapping
    const filtered = useMemo(() => {
        return machines.filter(m => {
            const mName = m.Name || '';
            const mId = m.MachineID || '';
            return mName.toLowerCase().includes(search.toLowerCase()) || mId.toLowerCase().includes(search.toLowerCase())
        });
    }, [machines, search]);

    useEffect(() => { setDisplayLimit(50); }, [search]);
    const loadMore = useCallback(() => { setDisplayLimit(prev => prev + 50); }, []);
    const lastElementRef = useInfiniteScroll(loadMore, filtered.length > displayLimit);

    const handleMoveToStock = (m) => { 
        showAlert(
            'ยืนยันการย้าย', 
            `ระบุเหตุผล/รายละเอียดการย้าย "${m.Name}" กลับเข้าสต็อก (หากไม่ระบุ ระบบจะใช้ค่าเริ่มต้น):`, 
            'question', 
            (note) => { 
                saveMachineToStock({ ...m, Status: 'สต็อก', historyAction: 'ย้ายเข้าสต็อก', historyNote: note || 'ย้ายเครื่องกลับเข้าสต็อก' }); 
                closeAlert(); 
            }, 
            true, // showCancel
            true, // showInput
            "รายละเอียดการย้ายเข้าสต็อก..."
        ); 
    };
    const handleDelete = (m) => { 
        showAlert(
            'คำเตือนการลบ', 
            `⚠️ ระบุเหตุผลการลบเครื่อง "${m.MachineID}" เพื่อบันทึกเป็นประวัติ (หากไม่ระบุ ระบบจะใช้ค่าเริ่มต้น):`, 
            'error', 
            (note) => { 
                deleteMachine({ ...m, historyNote: note || 'ย้ายข้อมูลลงถังขยะ (Soft Delete)' }); 
                closeAlert(); 
            }, 
            true, // showCancel
            true, // showInput
            "รายละเอียดการลบเครื่อง..."
        ); 
    }
    return (
        <div className="min-h-screen bg-gray-50 animate-in pb-20 w-full overflow-x-hidden">
            <div className="bg-gray-900 text-white px-4 md:px-6 py-4 lg:py-5 flex items-center gap-3 shadow-md z-40 w-full">
                <button onClick={() => setView('dashboard')} className="p-2 md:p-3 bg-white/20 hover:bg-white/30 rounded-full transition-colors backdrop-blur-sm"><Icon name="arrow-left" size={24} /></button>
                <div><h2 className="font-bold text-lg md:text-xl lg:text-2xl">จัดการสต็อกเครื่อง</h2><p className="text-xs md:text-sm text-gray-400">Add / Edit / Stock / Delete</p></div>
            </div>
            <div className="w-full px-4 md:px-6 lg:px-8 space-y-4 lg:space-y-6 mt-4 md:mt-6 max-w-[1920px] mx-auto">
                <div className="bg-white p-2 md:p-3 lg:p-4 rounded-xl md:rounded-2xl shadow-sm flex gap-2 w-full max-w-4xl mx-auto">
                    <div className="relative flex-1">
                        <Icon name="search" size={20} className="absolute left-3 md:left-4 top-3 md:top-3.5 text-gray-400" />
                        <input placeholder="ค้นหาเครื่อง..." className="w-full bg-gray-50 pl-10 md:pl-12 pr-4 py-2.5 md:py-3 rounded-full md:rounded-full border-none outline-none text-base md:text-lg" value={search} onChange={e => setSearch(e.target.value)} />
                    </div>
                    <button onClick={() => { setMachineForm({ Status: 'สต็อก' }); setView('machineForm'); }} className="bg-blue-600 text-white px-4 md:px-6 rounded-full md:rounded-full font-bold hover:bg-blue-700 shadow flex items-center gap-1 text-sm md:text-base transition-colors"><Icon name="plus" size={20} /> เพิ่ม</button>
                </div>
                <div className="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4 sm:gap-6">
                    {filtered.slice(0, displayLimit).map((m, index) => (
                        <div key={m.MachineID} ref={index === displayLimit - 1 ? lastElementRef : null} className="bg-white rounded-xl md:rounded-2xl p-4 md:p-5 shadow-sm border border-gray-100 relative overflow-hidden flex flex-col justify-between h-full hover:shadow-md transition-shadow">
                            <div className={`absolute left-0 top-0 bottom-0 w-1.5 ${m.Status === 'สต็อก' ? 'bg-blue-500' : 'bg-green-500'}`}></div>
                            <div className="flex justify-between items-start mb-3 pl-3 md:pl-4">
                                <div className="flex-1 pr-10">
                                    <div className="flex items-center gap-2 mb-1">
                                        <span className="font-bold text-gray-800 text-sm md:text-[15px] leading-snug break-words whitespace-normal">{m.Name || 'ไม่ระบุชื่อ'}</span>
                                    </div>
                                    <span className={`text-[10px] md:text-xs px-2 md:px-3 py-0.5 md:py-1 rounded-md font-bold ${m.Status === 'สต็อก' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700'} inline-block mb-1`}>{m.Status}</span>
                                    <div className="text-xs md:text-sm text-gray-400 font-mono mt-1">{m.MachineID}</div>
                                </div>
                                {m.ImageURL && <div className="w-12 h-12 md:w-16 md:h-16 rounded-full bg-gray-100 overflow-hidden flex-shrink-0 border border-gray-200 shadow-sm"><img src={getDriveThumbnail(m.ImageURL)} className="w-full h-full object-cover" /></div>}
                            </div>
                            <div className="flex gap-2 pl-3 md:pl-4 mt-3 md:mt-4">
                                <button onClick={() => { setMachineForm(m); setView('machineForm'); }} className="flex-1 py-2 bg-gray-100 text-gray-600 rounded-lg text-xs md:text-sm font-bold hover:bg-gray-200 transition-colors">แก้ไข</button>
                                {m.Status !== 'สต็อก' && <button onClick={() => handleMoveToStock(m)} className="flex-1 py-2 bg-blue-50 text-blue-600 rounded-lg text-xs md:text-sm font-bold hover:bg-blue-100 transition-colors">ย้ายเข้าสต็อก</button>}
                                <button onClick={() => handleDelete(m)} className="px-4 py-2 bg-red-50 text-red-600 rounded-lg text-xs md:text-sm font-bold hover:bg-red-100 transition-colors"><Icon name="trash-2" size={16} /></button>
                            </div>
                        </div>
                    ))}
                    {filtered.length > displayLimit && <div className="col-span-full text-center py-6 md:py-8"><div className="inline-block w-8 h-8 md:w-10 md:h-10 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div></div>}
                </div>
            </div>
        </div>
    );
};

const MachineForm = ({ form, setForm, saveMachine, setView, machineHistory, customers, showAlert, closeAlert }) => {
    const qrRef = useRef();
    const [searchCustomer, setSearchCustomer] = useState(form.Name || '');
    const [showCustomerList, setShowCustomerList] = useState(false);
    const wrapperRef = useRef(null);

    const safeCustomers = customers || [];

    // กรองลูกค้าจากที่พิมพ์ค้นหา
    const filteredCustomers = searchCustomer
        ? safeCustomers.filter(c => c.customer_name && c.customer_name.toLowerCase().includes(searchCustomer.toLowerCase()))
        : safeCustomers;

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

    useEffect(() => { if (form.MachineID && qrRef.current) { qrRef.current.innerHTML = ""; new QRCode(qrRef.current, { text: form.MachineID, width: 108, height: 108 }); } }, [form.MachineID]);

    const handleSave = () => {
        let qrBase64 = "";
        if (qrRef.current) { const canvas = qrRef.current.querySelector('canvas'); const img = qrRef.current.querySelector('img'); if (canvas) qrBase64 = canvas.toDataURL(); else if (img) qrBase64 = img.src; }
        if (!form.MachineID) { return showAlert('แจ้งเตือน', 'กรุณาระบุรหัสเครื่อง', 'error', closeAlert); }
        showAlert('ยืนยันการบันทึก', 'ตรวจสอบข้อมูลครบถ้วนแล้วใช่หรือไม่?', 'question', () => { saveMachine(qrBase64); closeAlert(); }, true);
    };

    const history = machineHistory ? machineHistory.filter(h => h.MachineID === form.MachineID).sort((a, b) => new Date(b.Timestamp) - new Date(a.Timestamp)) : [];

    const handleSelectCustomer = (customer) => {
        setForm({ ...form, customer_id: customer.id, Name: customer.customer_name, Address: customer.address || '', Province: customer.province || '' });
        setSearchCustomer(customer.customer_name);
        setShowCustomerList(false);
    };

    return (
        <div className="min-h-screen bg-gray-50 animate-in flex flex-col">
            <div className="bg-gray-900 text-white px-4 py-4 flex items-center gap-3 shadow-md z-40">
                <button onClick={() => setView('stock')} className="p-2 bg-white/20 hover:bg-white/30 rounded-full transition-colors backdrop-blur-sm"><Icon name="arrow-left" size={20} /></button>
                <h2 className="font-bold text-lg tracking-wide">ข้อมูลเครื่อง / สต็อก</h2>
            </div>
            <div className="max-w-3xl mx-auto p-4 space-y-6 flex-1 w-full">
                {form.MachineID && (<div className="flex justify-center py-2"><div className="bg-white p-3 rounded-2xl shadow-sm border border-gray-100 flex flex-col items-center"><div ref={qrRef} className="p-1 bg-white"></div><span className="text-[10px] text-gray-400 mt-2 font-mono">{form.MachineID}</span></div></div>)}

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label className="label-modern">รหัสเครื่อง (ID)</label>
                        <input className="input-modern" value={form.MachineID || ''} onChange={e => setForm({ ...form, MachineID: e.target.value })} placeholder="ระบุรหัสเครื่อง" readOnly={!!form.customer_id && !!form.Name} />
                    </div>

                    <div className="relative" ref={wrapperRef}>
                        <label className="label-modern">ชื่อลูกค้า / โครงการ</label>
                        <input
                            className="input-modern pr-10"
                            value={searchCustomer}
                            onChange={e => {
                                setSearchCustomer(e.target.value);
                                setShowCustomerList(true);
                                // อนุญาตให้พิมพ์ชื่อแปลกๆ ที่ไม่ได้เป็นลูกค้าในฐานข้อมูลได้ (ระบบจะเซฟลง custom_name)
                                setForm({ ...form, Name: e.target.value, customer_id: null });
                            }}
                            onFocus={() => setShowCustomerList(true)}
                            placeholder="คลิกเพื่อเลือกลูกค้า..."
                        />
                        <Icon name="search" size={18} className="absolute right-3 top-[38px] text-gray-400" />

                        {showCustomerList && (
                            <div className="absolute z-50 w-full mt-1 bg-white border border-gray-100 rounded-xl shadow-2xl max-h-60 overflow-y-auto">
                                {safeCustomers.length === 0 ? (
                                    <div className="p-3 text-sm text-red-500 text-center font-bold">กำลังโหลดข้อมูล...</div>
                                ) : filteredCustomers.length === 0 ? (
                                    <div className="p-3 text-sm text-gray-500 text-center">ระบบจะบันทึกเป็นชื่ออิสระ (Custom Name)</div>
                                ) : (
                                    filteredCustomers.slice(0, 100).map(c => (
                                        <div key={c.id} onClick={() => handleSelectCustomer(c)} className="p-3 hover:bg-blue-50 border-b border-gray-50 cursor-pointer transition-colors">
                                            <div className="font-bold text-gray-800 text-sm">{c.customer_name}</div>
                                            <div className="text-xs text-gray-500 truncate">{c.address} {c.province}</div>
                                        </div>
                                    ))
                                )}
                            </div>
                        )}
                    </div>

                    <div><label className="label-modern">สถานะ</label><StatusToggle value={form.Status || 'ใช้งาน'} onChange={val => setForm({ ...form, Status: val })} /></div>
                    <div><label className="label-modern">จังหวัด <span className="text-xs font-normal text-gray-400">(ดึงอัตโนมัติ)</span></label><input className="input-modern bg-gray-100 text-gray-500" value={form.Province || ''} readOnly placeholder="เลือกลูกค้าเพื่อดึงข้อมูล" /></div>
                    <div className="md:col-span-2"><label className="label-modern">ที่อยู่ติดตั้ง <span className="text-xs font-normal text-gray-400">(ดึงอัตโนมัติ)</span></label><textarea className="input-modern bg-gray-100 text-gray-500" rows="2" value={form.Address || ''} readOnly placeholder="เลือกลูกค้าเพื่อดึงข้อมูล"></textarea></div>
                    <div className="md:col-span-2"><ImageUpload label="รูปเครื่อง" value={form.imageBase64 || (form.OriginalImageURL ? getDriveThumbnail(form.OriginalImageURL) : (form.ImageURL ? getDriveThumbnail(form.ImageURL) : ''))} onChange={val => setForm({ ...form, imageBase64: val })} /></div>
                    <div className="md:col-span-2"><label className="label-modern">หมายเหตุ</label><textarea className="input-modern" rows="2" value={form.Note || ''} onChange={e => setForm({ ...form, Note: e.target.value })} placeholder="รายละเอียดเพิ่มเติมของเครื่องจักร..."></textarea></div>
                    <div className="md:col-span-2">
                        <label className="label-modern">รายละเอียดบันทึกประวัติ (ประวัติการเปลี่ยนแปลง/ที่มาเครื่อง)</label>
                        <textarea 
                            className="input-modern border-blue-200 focus:border-blue-500 bg-blue-50/10" 
                            rows="2" 
                            value={form.historyNote || ''} 
                            onChange={e => setForm({ ...form, historyNote: e.target.value })} 
                            placeholder={form.customer_id ? "เช่น อัปเดตข้อมูลทั่วไป, ย้ายสถานที่ติดตั้ง..." : "เช่น นำเข้าเครื่องใหม่, ย้ายกลับเข้าสต็อก..."}
                        ></textarea>
                    </div>
                </div>

                {form.MachineID && (
                    <div className="pt-4 border-t border-gray-200">
                        <h3 className="font-bold text-gray-700 mb-3 flex items-center gap-2"><Icon name="history" size={18} /> ประวัติเครื่อง</h3>
                        <div className="space-y-3">
                            {history.length === 0 ? <div className="text-gray-400 text-sm text-center">ไม่มีประวัติ</div> : history.map((h, i) => (
                                <div key={i} className="bg-white p-3 rounded-xl border border-gray-100 shadow-sm text-sm">
                                    <div className="flex justify-between font-bold text-gray-800"><span>{h.Action}</span><span className="text-xs text-gray-400">{formatDateTime(h.Timestamp)}</span></div>
                                    <div className="text-gray-600 mt-1">{h.Details}</div>
                                    <div className="text-xs text-blue-500 mt-2 flex items-center gap-1"><Icon name="user" size={12} /> {h.By}</div>
                                </div>
                            ))}
                        </div>
                    </div>
                )}
            </div>
            <div className="max-w-3xl mx-auto w-full p-4 pt-6 bg-gray-50">
                <button onClick={handleSave} className="w-full bg-blue-600 hover:bg-blue-700 text-white py-3.5 rounded-xl font-bold flex items-center justify-center gap-2 shadow-lg shadow-blue-200 active:scale-95 transition-all"><Icon name="save" /> บันทึก</button>
            </div>
        </div>
    );
};

const ServiceForm = ({ form, setForm, saveService, setView, handleGPS, onAbnormal, showAlert, closeAlert }) => {
    const handleStatusChange = (s) => { setForm({ ...form, Status: s }); if (s === 'ผิดปกติ') onAbnormal(form); };
    const handleSave = () => { 
        if (!form.imgBeforeBase64) {
            return showAlert('แจ้งเตือน', 'กรุณาแนบรูปภาพก่อนทำ (1:1)', 'error', closeAlert);
        }
        if (!form.imgAfterBase64) {
            return showAlert('แจ้งเตือน', 'กรุณาแนบรูปภาพหลังทำ (1:1)', 'error', closeAlert);
        }
        showAlert('ยืนยันการบันทึก', 'ตรวจสอบข้อมูลครบถ้วนแล้วใช่หรือไม่?', 'question', () => { saveService(); closeAlert(); }, true); 
    };

    const toggleDetail = (item) => {
        let current = form.Details ? form.Details.split(',').map(x => x.trim()) : [];
        if (current.includes(item)) { current = current.filter(x => x !== item); } else { current.push(item); }
        setForm({ ...form, Details: current.join(', ') });
    };

    const currentDetails = form.Details ? form.Details.split(',').map(x => x.trim()) : [];

    return (
        <div className="min-h-screen bg-gray-50 animate-in flex flex-col">
            <div className="bg-gradient-to-r from-blue-600 to-cyan-500 text-white px-4 py-4 flex items-center gap-3 shadow-md z-40">
                <button onClick={() => setView('dashboard')} className="p-2 bg-white/20 hover:bg-white/30 rounded-full transition-colors backdrop-blur-sm"><Icon name="arrow-left" size={20} /></button><h2 className="font-bold text-lg">บันทึกเซอร์วิส</h2>
            </div>
            {!form.MachineID ? (
                <div className="flex flex-col items-center justify-center flex-1 px-6"><div className="bg-blue-50 p-6 rounded-full mb-4"><Icon name="qr-code" size={48} className="text-blue-600" /></div><h3 className="text-xl font-bold text-gray-800 mb-2">สแกน QR Code</h3><p className="text-gray-500 text-center mb-6">สแกนเพื่อเริ่มงานเซอร์วิส</p></div>
            ) : (
                <>
                    <div className="max-w-3xl mx-auto p-4 space-y-6 flex-1 w-full">
                        <div className="text-center mb-6"><div className="inline-flex flex-col items-center justify-center p-4 bg-white rounded-3xl shadow-sm border border-blue-100 min-w-[120px]"><span className="text-gray-400 text-xs font-bold uppercase tracking-wider mb-1">SERVICE VISIT</span><span className="text-5xl font-black text-blue-600 tracking-tighter">{form.VisitCount}</span><div className="h-1 w-8 bg-blue-100 rounded-full mt-2"></div></div></div>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="md:col-span-2"><label className="label-modern">ชื่อลูกค้า / โครงการ</label><input className="input-modern bg-blue-50 text-blue-900 font-bold" value={form.MachineName || ''} readOnly /></div>
                            <div><label className="label-modern">รหัสเครื่อง</label><input className="input-modern bg-gray-100 font-mono" value={form.MachineID || ''} readOnly /></div>
                            <div><label className="label-modern">วันที่</label><input type="date" className="input-modern bg-gray-100 text-gray-500" value={form.Date} readOnly /></div>
                            <div className="md:col-span-2"><label className="label-modern">ช่างเทคนิค</label><input className="input-modern bg-gray-100" value={form.Technician} readOnly /></div>
                        </div>
                        <div><label className="label-modern">สถานะ</label><div className="grid grid-cols-2 gap-3">{SERVICE_STATUS.map(s => (<button key={s} onClick={() => handleStatusChange(s)} className={`p-3 rounded-xl font-bold border transition-all ${form.Status === s ? (s === 'ปกติ' ? 'bg-green-600 text-white border-green-600 shadow-lg shadow-green-200' : 'bg-red-600 text-white border-red-600 shadow-lg shadow-red-200') : 'bg-white text-gray-600 border-gray-200'}`}>{s}</button>))}</div></div>

                        {form.Status === 'ปกติ' && (
                            <div>
                                <label className="label-modern">รายละเอียดการเซอร์วิส (เลือกรายการ)</label>
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    {SERVICE_CHECKLIST.map(item => (
                                        <div key={item} onClick={() => toggleDetail(item)} className={`relative overflow-hidden p-4 rounded-2xl border transition-all duration-200 ease-out cursor-pointer flex items-center gap-3 group ${currentDetails.includes(item) ? 'bg-gradient-to-br from-blue-500 to-blue-600 border-blue-600 text-white shadow-lg shadow-blue-200 scale-[1.02]' : 'bg-white border-gray-100 text-gray-600 hover:border-blue-200 hover:bg-blue-50/50 shadow-sm'}`}>
                                            <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center transition-colors ${currentDetails.includes(item) ? 'border-white bg-white/20' : 'border-gray-300 group-hover:border-blue-400'}`}>
                                                {currentDetails.includes(item) && <Icon name="check" size={14} className="text-white" strokeWidth={3} />}
                                            </div>
                                            <span className={`text-sm font-bold ${currentDetails.includes(item) ? 'text-white' : 'text-gray-700'}`}>{item}</span>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        )}
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <ImageUpload label="รูปก่อนทำ (1:1)" value={form.imgBeforeBase64} onChange={v => setForm({ ...form, imgBeforeBase64: v })} />
                            <ImageUpload label="รูปหลังทำ (1:1)" value={form.imgAfterBase64} onChange={v => setForm({ ...form, imgAfterBase64: v })} />
                        </div>
                        <GPSWidget gps={form.GPS} onGetLocation={() => handleGPSHelper(setForm)} />
                        <div><label className="label-modern">หมายเหตุ</label><input className="input-modern" value={form.Note || ''} onChange={e => setForm({ ...form, Note: e.target.value })} /></div>
                    </div>
                    <div className="max-w-3xl mx-auto w-full p-4 pt-6 bg-gray-50">
                        <button onClick={handleSave} className="w-full bg-blue-600 hover:bg-blue-700 text-white py-3.5 rounded-xl font-bold flex items-center justify-center gap-2 shadow-lg shadow-blue-200 active:scale-95 transition-all"><Icon name="save" /> บันทึกเซอร์วิส</button>
                    </div>
                </>
            )}
        </div>
    );
};

const RepairForm = ({ form, setForm, saveRepair, setView, handleGPS, showAlert, closeAlert }) => {
    const toggleProblem = (p) => { const current = form.Problems || []; if (current.includes(p)) setForm({ ...form, Problems: current.filter(x => x !== p) }); else setForm({ ...form, Problems: [...current, p] }); };
    const handleSave = () => { if (form.Problems.length === 0) return showAlert('แจ้งเตือน', 'กรุณาเลือกปัญหาที่พบอย่างน้อย 1 รายการ', 'error', closeAlert); if (!form.imgBase64) return showAlert('แจ้งเตือน', 'กรุณาถ่ายรูปแจ้งซ่อม', 'error', closeAlert); showAlert('ยืนยันการแจ้งซ่อม', 'ตรวจสอบข้อมูลครบถ้วนแล้วใช่หรือไม่?', 'question', () => { saveRepair(); closeAlert(); }, true); };
    return (
        <div className="min-h-screen bg-gray-50 animate-in flex flex-col">
            <div className="bg-gradient-to-r from-orange-500 to-red-500 text-white px-4 py-4 flex items-center gap-3 shadow-md z-40"><button onClick={() => setView('dashboard')} className="p-2 bg-white/20 hover:bg-white/30 rounded-full transition-colors backdrop-blur-sm"><Icon name="arrow-left" size={20} /></button><h2 className="font-bold text-lg">แจ้งซ่อม</h2></div>
            {!form.MachineID ? (
                <div className="flex flex-col items-center justify-center flex-1 px-6"><div className="bg-orange-50 p-6 rounded-full mb-4"><Icon name="qr-code" size={48} className="text-orange-600" /></div><h3 className="text-xl font-bold text-gray-800 mb-2">สแกน QR Code</h3><p className="text-gray-500 text-center">สแกนเพื่อแจ้งซ่อม</p></div>
            ) : (
                <>
                    <div className="max-w-3xl mx-auto p-4 space-y-6 flex-1 w-full">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div><label className="label-modern">วันที่แจ้ง</label><input type="date" className="input-modern bg-gray-100 text-gray-500" value={form.Date} readOnly /></div>
                            <div><label className="label-modern">ผู้แจ้ง</label><input className="input-modern bg-gray-100" value={form.Reporter} readOnly /></div>
                        </div>
                        <div><label className="label-modern">เลือกปัญหาที่พบ</label><div className="grid grid-cols-2 md:grid-cols-4 gap-2">{REPAIR_PROBLEMS.map(p => (<div key={p} onClick={() => toggleProblem(p)} className={`p-3 rounded-xl text-sm font-medium border cursor-pointer transition-all ${form.Problems.includes(p) ? 'bg-orange-50 border-orange-500 text-orange-700 shadow-sm' : 'bg-white border-gray-200 text-gray-600 hover:border-orange-300'}`}>{p}</div>))}</div></div>
                        {form.Problems.includes('อื่นๆ') && (<div><label className="label-modern">รายละเอียดเพิ่มเติม</label><textarea className="input-modern" rows="2" value={form.OtherDetails || ''} onChange={e => setForm({ ...form, OtherDetails: e.target.value })} placeholder="ระบุอาการเสีย..."></textarea></div>)}
                        <div><ImageUpload label="รูปแจ้งซ่อม (1:1)" value={form.imgBase64} onChange={v => setForm({ ...form, imgBase64: v })} /></div>
                        <div><label className="label-modern">หมายเหตุ</label><input className="input-modern" value={form.Note || ''} onChange={e => setForm({ ...form, Note: e.target.value })} /></div>
                    </div>
                    <div className="max-w-3xl mx-auto w-full p-4 pt-6 bg-gray-50">
                        <button onClick={handleSave} className="w-full bg-orange-600 hover:bg-orange-700 text-white py-3.5 rounded-xl font-bold flex items-center justify-center gap-2 shadow-lg shadow-orange-200 active:scale-95 transition-all"><Icon name="alert-triangle" /> ยืนยันแจ้งซ่อม</button>
                    </div>
                </>
            )}
        </div>
    );
};

const HistoryView = ({ machine, services, repairs, setView, setMachineForm, user, onSaveAction, showAlert, closeAlert, onBack }) => {
    if (!machine) return null;
    const [tab, setTab] = useState('service');
    const [selectedHistory, setSelectedHistory] = useState(null);
    const history = tab === 'service' ? services.filter(s => s.MachineID === machine.MachineID).sort((a, b) => new Date(b.Date) - new Date(a.Date)) : repairs.filter(r => r.MachineID === machine.MachineID).sort((a, b) => new Date(b.Date) - new Date(a.Date));
    return (
        <div className="min-h-screen bg-gray-50 animate-in">
            <div className="bg-white px-4 py-4 flex items-center gap-3 border-b shadow-sm z-40"><button onClick={onBack || (() => setView('dashboard'))} className="p-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors"><Icon name="arrow-left" size={20} /></button><div className="flex-1 min-w-0"><h2 className="font-bold text-lg truncate leading-tight">{machine.Name}</h2><p className="text-xs text-gray-400">การดำเนินการ</p></div></div>
            <div className="max-w-5xl mx-auto p-4 space-y-6">
                <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden grid grid-cols-1 md:grid-cols-2">
                    <div className="relative w-full h-64 md:h-72 overflow-hidden bg-gray-100">{machine.ImageURL ? <img src={getDriveThumbnail(machine.ImageURL)} className="w-full h-full object-cover" /> : <div className="flex items-center justify-center h-full text-gray-400"><Icon name="image" size={48} /></div>}<div className="absolute top-3 right-3"><span className={`px-3 py-1 rounded-full text-xs font-bold shadow-sm ${machine.Status === 'ใช้งาน' ? 'bg-green-500 text-white' : 'bg-blue-500 text-white'}`}>{machine.Status}</span></div></div>
                    <div className="p-5 space-y-4">
                        <div className="flex justify-between items-start border-b border-gray-100 pb-4"><div className="flex-1 pr-2"><div className="text-sm font-bold text-blue-600 mb-1 flex items-center gap-1"><Icon name="hash" size={14} /> {machine.MachineID}</div><h2 className="text-xl font-bold text-gray-800 leading-tight">{machine.Name}</h2></div>{machine.QRCode && (<div className="w-16 h-16 bg-white border border-gray-200 rounded-xl p-1 shadow-sm shrink-0 flex items-center justify-center"><img src={getDriveThumbnail(machine.QRCode)} className="w-full h-full object-contain" /></div>)}</div>
                        <div className="grid grid-cols-2 gap-y-4 gap-x-4"><div><span className="block text-xs font-bold text-gray-400 mb-1">จังหวัด</span><div className="flex items-center gap-1.5 text-gray-700 font-medium text-sm"><Icon name="map" size={16} className="text-gray-400" /> {machine.Province}</div></div><div><span className="block text-xs font-bold text-gray-400 mb-1">ผู้บันทึก</span><div className="flex items-center gap-1.5 text-gray-700 font-medium text-sm"><Icon name="user-check" size={16} className="text-gray-400" /> {machine.CreatedBy || '-'}</div></div><div className="col-span-2"><span className="block text-xs font-bold text-gray-400 mb-1">ที่อยู่</span><div className="flex items-start gap-1.5 text-gray-700 font-medium text-sm"><Icon name="map-pin" size={16} className="text-gray-400 mt-0.5 shrink-0" /> <span className="leading-relaxed">{machine.Address}</span></div></div></div>
                        {machine.Note && (<div className="bg-blue-50/50 p-3 rounded-xl border border-blue-50"><span className="block text-xs font-bold text-blue-400 mb-1">หมายเหตุ</span><p className="text-gray-600 text-sm leading-relaxed">{machine.Note}</p></div>)}
                    </div>
                </div>
                {!(services.some(s => { const d = new Date(s.Date); const now = new Date(); return d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear(); })) && machine.Status === 'ใช้งาน' && (<div className="bg-orange-50 border-l-4 border-orange-500 text-orange-700 p-4 rounded-r shadow-sm flex items-center gap-3 animate-in"><div className="bg-orange-100 p-2 rounded-full"><Icon name="alert-triangle" size={24} /></div><div><p className="font-bold">แจ้งเตือน</p><p className="text-sm">ยังไม่ได้เข้าเซอร์วิสประจำเดือน {THAI_MONTHS_SHORT[new Date().getMonth()]}</p></div></div>)}
                <div className="flex bg-gray-200 p-1 rounded-xl"><button onClick={() => setTab('service')} className={`flex-1 py-2.5 rounded-lg text-sm font-bold transition-all ${tab === 'service' ? 'bg-white shadow text-blue-600' : 'text-gray-500 hover:text-gray-700'}`}>ประวัติเซอร์วิส</button><button onClick={() => setTab('repair')} className={`flex-1 py-2.5 rounded-lg text-sm font-bold transition-all ${tab === 'repair' ? 'bg-white shadow text-orange-600' : 'text-gray-500 hover:text-gray-700'}`}>ประวัติซ่อม</button></div>
                <div className="space-y-4 pb-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:space-y-0">
                    {history.length === 0 ? <div className="col-span-full text-center text-gray-400 py-10 flex flex-col items-center gap-2"><Icon name="clipboard-x" size={40} className="text-gray-300" />ไม่มีข้อมูล</div> : history.map((h, i) => (
                        <div key={i} onClick={() => setSelectedHistory(h)} className="bg-white rounded-xl border border-gray-100 shadow-sm relative overflow-hidden flex flex-col hover:shadow-md transition-shadow cursor-pointer animate-in">
                            <div className={`absolute left-0 top-0 bottom-0 w-1.5 ${tab === 'service' ? (h.Status === 'ปกติ' ? 'bg-green-500' : 'bg-red-500') : 'bg-orange-500'}`}></div>
                            <div className="p-3 pl-5">
                                <div className="flex justify-between items-start mb-2"><span className="font-bold text-base text-gray-800 tracking-tight">{formatDateAD(h.Date)}</span><span className={`px-2 py-0.5 rounded-md text-[10px] font-bold ${tab === 'service' ? 'bg-blue-50 text-blue-600' : 'bg-orange-50 text-orange-600'}`}>{tab === 'service' ? `ครั้งที่ ${h.VisitCount}` : h.Status}</span></div>
                                <div className="flex items-center gap-2 text-xs text-gray-500 mb-3"><Icon name="user" size={12} /><span>{tab === 'service' ? h.Technician : h.Reporter}</span></div>
                                <div><span className={`font-bold text-sm ${tab === 'service' ? (h.Status === 'ปกติ' ? 'text-green-600' : 'text-red-600') : 'text-orange-600'}`}>{tab === 'service' ? h.Status : h.Problems}</span></div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
            {selectedHistory && <HistoryDetailModal data={selectedHistory} type={tab} onClose={() => setSelectedHistory(null)} user={user} onSaveAction={onSaveAction} showAlert={showAlert} closeAlert={closeAlert} />}
        </div>
    );
};

const HistoryDetailModal = ({ data, type, onClose, user, onSaveAction, showAlert, closeAlert }) => {
    const [showActionForm, setShowActionForm] = useState(false);
    const [actionForm, setActionForm] = useState({ Status: data.ActionStatus || 'รอแก้ไข', Technician: data.ActionTechnician || user.name, Note: data.ActionNote || '', imgBeforeBase64: '', imgAfterBase64: '' });
    const handleSave = () => {
        if (actionForm.Status === 'ดำเนินการเสร็จแล้ว') {
            const hasBefore = actionForm.imgBeforeBase64 || data.ActionImageBefore;
            const hasAfter = actionForm.imgAfterBase64 || data.ActionImageAfter;
            if (!hasBefore) {
                return showAlert('แจ้งเตือน', 'กรุณาแนบรูปก่อนซ่อม', 'error', closeAlert);
            }
            if (!hasAfter) {
                return showAlert('แจ้งเตือน', 'กรุณาแนบรูปหลังซ่อม', 'error', closeAlert);
            }
        }
        showAlert('ยืนยันการบันทึก', 'ตรวจสอบข้อมูลครบถ้วนแล้วใช่หรือไม่?', 'question', () => { 
            const payload = { 
                RepairID: data.RepairID, 
                ActionStatus: actionForm.Status, 
                ActionTechnician: actionForm.Technician, 
                ActionNote: actionForm.Note, 
                imgBeforeBase64: actionForm.imgBeforeBase64, 
                imgAfterBase64: actionForm.imgAfterBase64 
            }; 
            onSaveAction(payload); 
            closeAlert(); 
        }, true); 
    };
    return (
        <div className="fixed inset-0 z-[60] flex items-end sm:items-center justify-center pointer-events-none">
            <div className="absolute inset-0 bg-black/60 backdrop-blur-sm pointer-events-auto transition-opacity" onClick={onClose}></div>
            <div className="bg-white w-full max-w-2xl sm:rounded-2xl rounded-t-3xl p-6 pointer-events-auto relative animate-in transform transition-transform max-h-[90vh] overflow-y-auto flex flex-col">
                <div className="w-12 h-1.5 bg-gray-200 rounded-full mx-auto mb-6 shrink-0 sm:hidden"></div>
                <div className="flex justify-between items-start mb-6">
                    <div><h3 className="text-xl font-bold text-gray-800">รายละเอียด{type === 'service' ? 'เซอร์วิส' : 'แจ้งซ่อม'}</h3><p className="text-gray-500 text-sm">{formatDateAD(data.Date)}</p></div>
                    <div className={`px-3 py-1 rounded-full text-xs font-bold ${type === 'service' ? 'bg-blue-50 text-blue-600' : 'bg-orange-50 text-orange-600'}`}>{type === 'service' ? `ครั้งที่ ${data.VisitCount}` : data.Status}</div>
                </div>
                <div className="space-y-4 flex-1">
                    <div className="grid grid-cols-2 gap-4">
                        <div className="bg-gray-50 p-3 rounded-xl"><span className="text-xs text-gray-400 block mb-1">{type === 'service' ? 'ช่างเทคนิค' : 'ผู้แจ้ง'}</span><div className="font-medium text-gray-700 text-sm flex items-center gap-1"><Icon name="user" size={14} /> {type === 'service' ? data.Technician : data.Reporter}</div></div>
                        {type === 'service' && <div className="bg-gray-50 p-3 rounded-xl"><span className="text-xs text-gray-400 block mb-1">สถานะ</span><div className={`font-bold text-sm ${data.Status === 'ปกติ' ? 'text-green-600' : 'text-red-600'}`}>{data.Status}</div></div>}
                    </div>
                    {type === 'service' ? (
                        <>
                            {data.Details && <div><span className="label-modern">รายละเอียด</span><div className="p-3 border border-gray-100 rounded-xl text-sm text-gray-600 bg-white">{data.Details}</div></div>}
                            {(data.ImageBefore || data.ImageAfter) && (<div> <span className="label-modern">รูปภาพประกอบ</span> <ServiceImages before={data.ImageBefore} after={data.ImageAfter} /> </div>)}
                            {data.GPS && (<div> <span className="label-modern">พิกัด GPS</span> <ViewMap gps={data.GPS} /> </div>)}
                        </>
                    ) : (<> <div><span className="label-modern">ปัญหาที่พบ</span><div className="p-3 border border-gray-100 rounded-xl text-sm text-orange-600 font-bold bg-white">{data.Problems}</div></div> {data.OtherDetails && <div><span className="label-modern">รายละเอียดเพิ่มเติม</span><div className="p-3 border border-gray-100 rounded-xl text-sm text-gray-600 bg-white">{data.OtherDetails}</div></div>} {data.RepairImage && (<div className="mt-2 space-y-1"><span className="text-xs font-bold text-gray-400">รูปแจ้งซ่อม</span><div className="w-full aspect-square bg-gray-100 rounded-xl overflow-hidden border border-gray-200"><img src={getDriveThumbnail(data.RepairImage)} className="w-full h-full object-cover" onClick={() => window.open(data.RepairImage)} /></div></div>)} {data.ActionStatus && !showActionForm && (<div className="mt-4 border-t pt-4"> <div className="flex justify-between items-center mb-2"> <h4 className="font-bold text-gray-700">ผลการซ่อมแซม</h4> <span className={`text-xs px-2 py-1 rounded ${data.ActionStatus === 'ดำเนินการเสร็จแล้ว' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'}`}>{data.ActionStatus}</span> </div> <p className="text-sm text-gray-600"><span className="font-bold">ผู้ซ่อม:</span> {data.ActionTechnician}</p> {data.ActionNote && <p className="text-sm text-gray-600 bg-gray-50 p-2 rounded mt-1">"{data.ActionNote}"</p>} {data.ActionStatus === 'ดำเนินการเสร็จแล้ว' && (<div className="grid grid-cols-2 gap-2 mt-2"> {data.ActionImageBefore && <img src={getDriveThumbnail(data.ActionImageBefore)} className="w-full aspect-square rounded-lg object-cover bg-gray-100" />} {data.ActionImageAfter && <img src={getDriveThumbnail(data.ActionImageAfter)} className="w-full aspect-square rounded-lg object-cover bg-gray-100" />} </div>)} </div>)} <div className="mt-4 pt-4 border-t border-gray-100"> {!showActionForm ? (<button onClick={() => setShowActionForm(true)} className="w-full py-3 bg-orange-50 text-orange-600 border border-orange-200 rounded-xl font-bold hover:bg-orange-100 transition-colors flex items-center justify-center gap-2"> <Icon name="wrench" size={18} /> {data.ActionStatus ? 'แก้ไขข้อมูลการซ่อม' : 'บันทึกการซ่อมแซม'} </button>) : (<div className="bg-orange-50/50 p-4 rounded-xl border border-orange-100 animate-in"> <h4 className="font-bold text-orange-700 mb-3 flex items-center gap-2"><Icon name="tool" size={18} /> บันทึกผลการซ่อม</h4> <div className="space-y-3"> <div> <label className="label-modern">สถานะการซ่อม</label> <select className="input-modern" value={actionForm.Status} onChange={e => setActionForm({ ...actionForm, Status: e.target.value })}> <option value="รอแก้ไข">รอแก้ไข</option> <option value="ดำเนินการเสร็จแล้ว">ดำเนินการเสร็จแล้ว</option> </select> </div> {actionForm.Status === 'ดำเนินการเสร็จแล้ว' && (<div className="space-y-3"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <ImageUpload label="รูปก่อนซ่อม" value={actionForm.imgBeforeBase64 || (data.ActionImageBefore ? getDriveThumbnail(data.ActionImageBefore) : '')} onChange={v => setActionForm({ ...actionForm, imgBeforeBase64: v })} /> <ImageUpload label="รูปหลังซ่อม" value={actionForm.imgAfterBase64 || (data.ActionImageAfter ? getDriveThumbnail(data.ActionImageAfter) : '')} onChange={v => setActionForm({ ...actionForm, imgAfterBase64: v })} /> </div> </div>)} <div> <label className="label-modern">ผู้ซ่อม</label> <input className="input-modern bg-gray-100" value={actionForm.Technician} readOnly /> </div> <div> <label className="label-modern">หมายเหตุ</label> <input className="input-modern" value={actionForm.Note} onChange={e => setActionForm({ ...actionForm, Note: e.target.value })} placeholder="รายละเอียดการซ่อม..." /> </div> <div className="flex gap-2 pt-2"> <button onClick={() => setShowActionForm(false)} className="flex-1 py-2 bg-white border border-gray-300 rounded-lg text-gray-600 font-bold">ยกเลิก</button> <button onClick={handleSave} className="flex-1 py-2 bg-orange-600 text-white rounded-lg font-bold shadow-md hover:bg-orange-700">บันทึก</button> </div> </div> </div>)} </div> </>)} {data.Note && type === 'service' && (<div><span className="label-modern">หมายเหตุ</span><div className="p-3 border border-gray-100 rounded-xl text-sm text-gray-500 bg-gray-50 italic">"{data.Note}"</div></div>)} </div> <button onClick={onClose} className="mt-6 w-full py-3 bg-gray-900 text-white rounded-xl font-bold shadow-lg">ปิด</button> </div> </div>
    );
};

// --- APP COMPONENT ---
const InspectorView = ({ machines, services, repairs, setView, setSelectedMachine, setReturnView }) => {
    const now = new Date();
    const [month, setMonth] = React.useState(now.getMonth());
    const [year, setYear] = React.useState(now.getFullYear());
    const [tab, setTab] = React.useState('pending');
    
    const monthNames = ["มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม"];
    const yearRange = Array.from({ length: 5 }, (_, i) => now.getFullYear() - i);

    const stats = React.useMemo(() => {
        const activeMachines = machines.filter(m => m.Status !== 'สต็อก');
        const servicedThisMonth = activeMachines.filter(m => 
            services.some(s => {
                const d = new Date(s.Date);
                return d.getMonth() === month && d.getFullYear() === year && s.MachineID === m.MachineID;
            })
        );
        const pendingService = activeMachines.filter(m => !servicedThisMonth.some(sm => sm.MachineID === m.MachineID));
        
        // Filter repairs by the selected month/year for historical view
        const repairsInMonth = repairs.filter(r => {
            const d = new Date(r.Date);
            return d.getMonth() === month && d.getFullYear() === year;
        });

        return {
            serviced: servicedThisMonth,
            pending: pendingService,
            repairs: repairsInMonth
        };
    }, [machines, services, repairs, month, year]);

    const handleItemClick = (m) => {
        setReturnView('inspector');
        setSelectedMachine(m);
        setView('history');
    };

    const handleExportCSV = () => {
        let list = [];
        let filename = '';
        if (tab === 'serviced') {
            list = [...stats.serviced];
            filename = `serviced_${monthNames[month]}_${year + 543}.csv`;
        } else if (tab === 'pending') {
            list = [...stats.pending];
            filename = `pending_${monthNames[month]}_${year + 543}.csv`;
        } else if (tab === 'repair') {
            list = [...stats.repairs].map(item => {
                const m = machines.find(ma => ma.MachineID === item.MachineID);
                return { ...m, ...item };
            });
            filename = `repair_${monthNames[month]}_${year + 543}.csv`;
        }

        if (list.length === 0) return alert('ไม่มีข้อมูลสำหรับ Export');

        list.sort((a, b) => (a.Province || '').localeCompare(b.Province || ''));

        const headers = ["รหัสเครื่อง", "ชื่อลูกค้า/โครงการ", "จังหวัด", "สถานะเครื่อง"];
        if (tab === 'repair') {
            headers.push("ปัญหาที่พบ", "สถานะการซ่อม");
        } else {
            headers.push("ที่อยู่");
        }

        const csvRows = [headers.join(',')];
        
        list.forEach(item => {
            const row = [
                `"${item.MachineID || ''}"`,
                `"${(item.Name || '').replace(/"/g, '""')}"`,
                `"${item.Province || ''}"`,
                `"${item.Status || ''}"`
            ];
            if (tab === 'repair') {
                row.push(`"${(item.Problems || '').replace(/"/g, '""')}"`, `"${item.ActionStatus || 'รอแก้ไข'}"`);
            } else {
                row.push(`"${(item.Address || '').replace(/"/g, '""')}"`);
            }
            csvRows.push(row.join(','));
        });

        const csvContent = "\uFEFF" + csvRows.join('\n');
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.setAttribute("href", url);
        link.setAttribute("download", filename);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    };

    const renderList = () => {
        let list = [];
        if (tab === 'serviced') list = stats.serviced;
        else if (tab === 'pending') list = stats.pending;
        else if (tab === 'repair') list = stats.repairs;

        if (list.length === 0) return <div className="text-center py-12 text-gray-400 bg-white/50 rounded-2xl border border-dashed border-gray-200 mt-4 mx-2">ไม่มีรายการข้อมูลในรอบบิลนี้</div>;

        return list.map((item, idx) => {
            // If it's a repair, we find the machine info
            const m = tab === 'repair' ? machines.find(ma => ma.MachineID === item.MachineID) : item;
            if (!m) return null;

            return (
                <div key={m.MachineID + (item.RepairID || idx)} onClick={() => handleItemClick(m)} className="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm mb-3 flex items-center gap-4 hover:shadow-md transition-shadow cursor-pointer group">
                    <div className="w-12 h-12 bg-gray-100 rounded-full overflow-hidden border border-gray-200 flex-shrink-0">
                        <img src={m.ImageURL ? getDriveThumbnail(m.ImageURL) : ''} className="w-full h-full object-cover" />
                    </div>
                    <div className="flex-1 min-w-0">
                        <div className="text-[10px] font-bold text-blue-600 font-mono flex items-center gap-1"><Icon name="hash" size={10} /> {m.MachineID}</div>
                        <div className="text-sm font-bold text-gray-800 truncate">{m.Name}</div>
                        <div className="text-[10px] text-gray-400 mb-0.5">{m.Province}</div>
                        {tab === 'repair' && (
                            <div className="flex flex-wrap gap-1 mt-1">
                                <span className="text-[9px] font-bold text-red-600 bg-red-50 px-1.5 py-0.5 rounded flex items-center gap-1 border border-red-100"><Icon name="alert-circle" size={10} /> ปัญหา: {item.Problems}</span>
                                <span className={`text-[9px] font-bold px-1.5 py-0.5 rounded border ${item.ActionStatus === 'ดำเนินการเสร็จแล้ว' ? 'bg-green-50 text-green-600 border-green-100' : 'bg-yellow-50 text-yellow-600 border-yellow-100'}`}>{item.ActionStatus || 'รอแก้ไข'}</span>
                            </div>
                        )}
                    </div>
                    <Icon name="chevron-right" size={20} className="text-gray-300 group-hover:text-blue-500 transition-colors" />
                </div>
            );
        });
    };

    return (
        <div className="min-h-screen bg-gray-50 flex flex-col">
            {/* Enhanced Header with Date Selector */}
            <div className="bg-gradient-to-br from-blue-700 to-blue-500 text-white pt-8 pb-14 px-6 rounded-b-[2.5rem] shadow-xl relative overflow-hidden">
                <div className="absolute top-0 right-0 w-48 h-48 bg-white/10 rounded-full -mr-24 -mt-24 blur-3xl"></div>
                <div className="absolute bottom-0 left-0 w-32 h-32 bg-blue-400/20 rounded-full -ml-16 -mb-16 blur-2xl"></div>
                
                <div className="flex items-center justify-between mb-8 relative z-10">
                    <div className="flex items-center gap-3">
                        <button onClick={() => setView('dashboard')} className="p-2.5 bg-white/20 backdrop-blur rounded-full hover:bg-white/30 transition-all cursor-pointer"><Icon name="arrow-left" size={22} /></button>
                        <div>
                            <h1 className="text-xl font-bold">ส่วนของผู้ตรวจสอบ</h1>
                            <p className="text-[10px] opacity-80 uppercase tracking-[0.2em] font-medium leading-none mt-1">Service Auditor</p>
                        </div>
                    </div>
                    
                    {/* Month/Year Selection and Export CSV */}
                    <div className="flex flex-col items-end gap-2">
                        <div className="flex items-center gap-1.5 bg-white/10 backdrop-blur p-1 rounded-xl border border-white/20">
                             <select value={month} onChange={e => setMonth(parseInt(e.target.value))} className="bg-transparent text-[11px] font-bold outline-none text-white appearance-none px-2 py-1 text-center cursor-pointer">
                                {monthNames.map((m, i) => <option key={i} value={i} className="text-gray-800">{m}</option>)}
                             </select>
                             <div className="w-[1px] h-4 bg-white/30"></div>
                             <select value={year} onChange={e => setYear(parseInt(e.target.value))} className="bg-transparent text-[11px] font-bold outline-none text-white appearance-none px-2 py-1 text-center cursor-pointer">
                                {yearRange.map(y => <option key={y} value={y} className="text-gray-800">{y + 543}</option>)}
                             </select>
                        </div>
                        <button onClick={handleExportCSV} className="text-[10px] md:text-xs bg-white/20 hover:bg-white/30 text-white px-3 py-1.5 rounded-lg backdrop-blur flex items-center gap-1 transition-colors border border-white/20 shadow-sm font-bold">
                            <Icon name="download" size={14} /> Export CSV
                        </button>
                    </div>
                </div>

                <div className="grid grid-cols-3 gap-3 relative z-10">
                    <div className="bg-white/15 backdrop-blur-md p-4 rounded-3xl border border-white/20 text-center shadow-lg transition-transform hover:scale-[1.02]">
                        <div className="text-[9px] uppercase tracking-wider opacity-90 mb-1 font-bold">เซอร์วิสแล้ว</div>
                        <div className="text-2xl font-black">{stats.serviced.length}</div>
                    </div>
                    <div className="bg-white/15 backdrop-blur-md p-4 rounded-3xl border border-white/20 text-center shadow-lg transition-transform hover:scale-[1.02]">
                        <div className="text-[9px] uppercase tracking-wider opacity-90 mb-1 font-bold">ยังไม่ทำ</div>
                        <div className="text-2xl font-black text-yellow-300">{stats.pending.length}</div>
                    </div>
                    <div className="bg-white/15 backdrop-blur-md p-4 rounded-3xl border border-white/20 text-center shadow-lg transition-transform hover:scale-[1.02]">
                        <div className="text-[9px] uppercase tracking-wider opacity-90 mb-1 font-bold">รอซ่อม</div>
                        <div className="text-2xl font-black text-red-300">{stats.repairs.length}</div>
                    </div>
                </div>
            </div>

            {/* List & Tabs */}
            <div className="px-6 -mt-8 flex-1 relative z-20 overflow-y-auto">
                <div className="flex bg-white/90 backdrop-blur p-1.5 rounded-full shadow-xl mb-6 border border-white max-w-sm mx-auto">
                    <button onClick={() => setTab('pending')} className={`flex-1 py-3 rounded-full text-xs font-bold transition-all flex items-center justify-center gap-1.5 ${tab === 'pending' ? 'bg-blue-600 text-white shadow-lg' : 'text-gray-500 hover:bg-gray-100'}`}><span className={`w-2 h-2 rounded-full ${tab === 'pending' ? 'bg-yellow-400 animate-pulse' : 'bg-yellow-400'}`}></span> ยังไม่เซอร์วิส</button>
                    <button onClick={() => setTab('serviced')} className={`flex-1 py-3 rounded-full text-xs font-bold transition-all flex items-center justify-center gap-1.5 ${tab === 'serviced' ? 'bg-blue-600 text-white shadow-lg' : 'text-gray-500 hover:bg-gray-100'}`}><span className={`w-2 h-2 rounded-full ${tab === 'serviced' ? 'bg-green-400' : 'bg-green-400'}`}></span> เซอร์วิสแล้ว</button>
                    <button onClick={() => setTab('repair')} className={`flex-1 py-3 rounded-full text-xs font-bold transition-all flex items-center justify-center gap-1.5 ${tab === 'repair' ? 'bg-red-600 text-white shadow-lg' : 'text-gray-500 hover:bg-gray-100'}`}><span className={`w-2 h-2 rounded-full ${tab === 'repair' ? 'bg-white' : 'bg-red-500'}`}></span> แจ้งซ่อม</button>
                </div>

                <div className="flex justify-between items-center mb-4 px-2">
                    <div className="flex items-center gap-1.5">
                        <Icon name="list" size={16} className="text-gray-400" />
                        <h3 className="font-bold text-gray-700 text-sm">รายการเดือน{monthNames[month]} {year + 543}</h3>
                    </div>
                    <span className="text-[10px] bg-gray-200 text-gray-600 px-2.5 py-1 rounded-full font-bold">ทั้งหมด {tab === 'repair' ? stats.repairs.length : (tab === 'serviced' ? stats.serviced.length : stats.pending.length)} รายการ</span>
                </div>

                <div className="pb-10">
                    {renderList()}
                </div>
            </div>
        </div>
    );
};

const ALLOWED_ROLES = ["admin", "user ad", "user ts", "user tc"];
const MANAGEMENT_ROLES = ["admin", "user ad"];

const setBackupCookie = (name, value, days = 365) => {
    const d = new Date();
    d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
    const expires = "expires=" + d.toUTCString();
    document.cookie = name + "=" + encodeURIComponent(value) + ";" + expires + ";path=/;SameSite=Strict";
};

const getBackupCookie = (name) => {
    const cname = name + "=";
    const decodedCookie = decodeURIComponent(document.cookie);
    const ca = decodedCookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(cname) == 0) {
            return c.substring(cname.length, c.length);
        }
    }
    return "";
};

const removeBackupCookie = (name) => {
    document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
};

const App = () => {
    const [view, setView] = useState('login');
    const [returnView, setReturnView] = useState('dashboard');
    const [user, setUser] = useState(null);
    const [loginU, setLoginU] = useState('');
    const [loginP, setLoginP] = useState('');
    const [data, setData] = useState({
        users: [], machines: [], services: [], repairs: [], machineHistory: [], customers: [], serverTime: null
    });
    const [loading, setLoading] = useState(false);
    const [alert, setAlert] = useState(null);
    const [searchTerm, setSearchTerm] = useState('');
    const [dashboardFilter, setDashboardFilter] = useState('all');
    const [dashboardScrollPos, setDashboardScrollPos] = useState(0);
    const [selectedMachine, setSelectedMachine] = useState(null);
    const [showScanner, setShowScanner] = useState(false);
    const [scannerTarget, setScannerTarget] = useState('');
    const [machineForm, setMachineForm] = useState({});
    const [serviceForm, setServiceForm] = useState({});
    const [repairForm, setRepairForm] = useState({});

    useEffect(() => {
        let savedUser = localStorage.getItem('serviceSystemUser');
        if (!savedUser) {
            savedUser = getBackupCookie('serviceSystemUser');
            if (savedUser) {
                localStorage.setItem('serviceSystemUser', savedUser);
            }
        }
        if (savedUser) { 
            const parsed = JSON.parse(savedUser);
            if (ALLOWED_ROLES.includes((parsed.role || '').toLowerCase())) {
                setUser(parsed); setView('dashboard'); fetchSystemData(); 
            } else {
                localStorage.removeItem('serviceSystemUser');
                removeBackupCookie('serviceSystemUser');
            }
        }
        else { fetchSystemData(); }
    }, []);

    useEffect(() => {
        if (!user) return;
        // 🚨 ดักฟังการเปลี่ยนแปลงข้อมูลแบบ Realtime จาก Supabase
        const channel = supabaseClient.channel('realtime-db').on('postgres_changes', { event: '*', schema: 'public' }, () => { fetchSystemData(true); }).subscribe();
        return () => { supabaseClient.removeChannel(channel); };
    }, [user]);

    const showAlert = (title, message, type = 'info', onConfirm = null, showCancel = false, showInput = false, inputPlaceholder = "", initialInputValue = "") => { setAlert({ title, message, type, onConfirm, showCancel, showInput, inputPlaceholder, initialInputValue }); };
    const closeAlert = () => setAlert(null);

    const checkAndAutoSendReport = async (freshData) => {
        try {
            const now = new Date();
            if (now.getDay() === 6 && now.getHours() < 8) {
                const y = now.getFullYear();
                const m = String(now.getMonth() + 1).padStart(2, '0');
                const d = String(now.getDate()).padStart(2, '0');
                const localDateStr = `${y}-${m}-${d}`;

                const alreadySent = (freshData.machineHistory || []).some(h => {
                    if (h.Action !== 'ส่งรายงานวันเสาร์') return false;
                    const hDate = new Date(h.Timestamp);
                    const hy = hDate.getFullYear();
                    const hm = String(hDate.getMonth() + 1).padStart(2, '0');
                    const hd = String(hDate.getDate()).padStart(2, '0');
                    const hLocalDateStr = `${hy}-${hm}-${hd}`;
                    return hLocalDateStr === localDateStr;
                });

                if (!alreadySent) {
                    await ApiService.sendTelegramReport(freshData.machines, freshData.services, freshData.repairs, 'ระบบอัตโนมัติ');

                    const timestamp = new Date().toISOString();
                    await supabaseClient.from('service_machine_history').insert([{
                        history_id: 'HIST' + Date.now(),
                        machine_id: null,
                        action: 'ส่งรายงานวันเสาร์',
                        details: 'ส่งรายงานค้างเซอร์วิสและแจ้งซ่อมประจำสัปดาห์ (ระบบอัตโนมัติ)',
                        by_user: 'ระบบอัตโนมัติ',
                        timestamp: timestamp
                    }]);

                    freshData.machineHistory.push({
                        HistoryID: 'HIST' + Date.now(),
                        MachineID: null,
                        Action: 'ส่งรายงานวันเสาร์',
                        Details: 'ส่งรายงานค้างเซอร์วิสและแจ้งซ่อมประจำสัปดาห์ (ระบบอัตโนมัติ)',
                        By: 'ระบบอัตโนมัติ',
                        Timestamp: timestamp
                    });

                    console.log("Auto-sent Telegram Saturday report and logged to database for " + localDateStr);
                }
            }
        } catch (err) {
            console.error("Failed to auto-send Saturday report:", err);
        }
    };

    const handleSendTelegramReport = async () => {
        setLoading(true);
        try {
            await ApiService.sendTelegramReport(data.machines, data.services, data.repairs, user?.name || 'ผู้ใช้');
            showAlert('สำเร็จ', 'ส่งรายงานสรุปไปที่ Telegram เรียบร้อยแล้ว', 'success', closeAlert);
        } catch (e) {
            console.error("Send Telegram Report Error:", e);
            showAlert('ผิดพลาด', 'ไม่สามารถส่งรายงานได้: ' + e.message, 'error', closeAlert);
        }
        setLoading(false);
    };

    const fetchSystemData = async (isBackground = false) => {
        if (!isBackground) setLoading(true);
        try {
            const freshData = await ApiService.getSystemData();
            setData(freshData);
            localStorage.setItem('serviceSystemData', JSON.stringify(freshData));
            
            // Auto update logged-in user's photo_url from fetched users list
            const savedUser = localStorage.getItem('serviceSystemUser');
            if (savedUser) {
                const parsedUser = JSON.parse(savedUser);
                const currentUserInfo = freshData.users.find(u => u.Username === parsedUser.username);
                if (currentUserInfo && currentUserInfo.photo_url !== parsedUser.photo_url) {
                    const updatedUser = { ...parsedUser, photo_url: currentUserInfo.photo_url };
                    setUser(updatedUser);
                    localStorage.setItem('serviceSystemUser', JSON.stringify(updatedUser));
                    setBackupCookie('serviceSystemUser', JSON.stringify(updatedUser));
                }
            }

            await checkAndAutoSendReport(freshData);
        } catch (e) { console.error("Fetch Data Error", e); }
        if (!isBackground) setLoading(false);
    };

    const handleLogin = async (u, p) => {
        setLoading(true); const res = await ApiService.loginUser(u, p); setLoading(false);
        if (res.success) { 
            const role = (res.role || '').toLowerCase();
            if (!ALLOWED_ROLES.includes(role)) return showAlert('ปฏิเสธการเข้าถึง', 'สิทธิ์การใช้งานของคุณไม่ได้รับอนุญาตให้เข้าระบบ', 'error', closeAlert);
            const userData = { name: res.name, role: res.role, username: u, photo_url: res.photo_url }; 
            setUser(userData); 
            localStorage.setItem('serviceSystemUser', JSON.stringify(userData)); 
            setBackupCookie('serviceSystemUser', JSON.stringify(userData));
            setView('dashboard'); fetchSystemData(); 
        }
        else { showAlert('ผิดพลาด', 'ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง', 'error', closeAlert); }
    };

    const handleLogout = () => { 
        localStorage.removeItem('serviceSystemUser'); 
        removeBackupCookie('serviceSystemUser');
        setUser(null); 
        setView('login'); 
    };

    const saveMachine = async (qrBase64) => {
        setLoading(true); const mode = data.machines.find(m => m.MachineID === machineForm.MachineID) ? 'update' : 'create';
        await ApiService.saveMachine({ ...machineForm, CreatedBy: user?.name, qrBase64: qrBase64 }, mode);
        fetchSystemData(); showAlert('สำเร็จ', 'บันทึกข้อมูลเรียบร้อย', 'success', () => { closeAlert(); setView('stock'); });
    };

    const deleteMachine = async (machine) => { setLoading(true); await ApiService.saveMachine({ ...machine, CreatedBy: user?.name }, 'delete'); fetchSystemData(); showAlert('สำเร็จ', 'ลบข้อมูลเรียบร้อย', 'success', closeAlert); };
    const saveMachineToStock = async (machineData) => { setLoading(true); await ApiService.saveMachine({ ...machineData, CreatedBy: user?.name }, 'update'); fetchSystemData(); showAlert('สำเร็จ', 'ย้ายเข้าสต็อกเรียบร้อย', 'success', closeAlert); }
    const saveService = async () => { setLoading(true); await ApiService.saveService(serviceForm); fetchSystemData(); showAlert('สำเร็จ', 'บันทึกเซอร์วิสเรียบร้อย', 'success', () => { closeAlert(); setView('dashboard'); }); };
    const saveRepair = async () => { setLoading(true); await ApiService.saveRepair({ ...repairForm, Problems: repairForm.Problems.join(',') }); fetchSystemData(); showAlert('สำเร็จ', 'แจ้งซ่อมเรียบร้อย', 'success', () => { closeAlert(); setView('dashboard'); }); };
    const saveRepairAction = async (actionData) => { setLoading(true); await ApiService.saveRepairAction(actionData); fetchSystemData(); showAlert('สำเร็จ', 'บันทึกผลการซ่อมเรียบร้อย', 'success', closeAlert); };

    const handleAbnormalRedirect = (currentServiceForm) => { setRepairForm({ MachineID: currentServiceForm.MachineID, MachineName: currentServiceForm.MachineName, Address: currentServiceForm.Address, ImageURL: currentServiceForm.ImageURL, Date: new Date().toISOString().split('T')[0], Reporter: user.name, Problems: [], OtherDetails: '', Status: 'รอแก้ไข', imgBase64: '' }); setView('repairForm'); };
    const prepareServiceForm = (machine) => { const count = data.services.filter(s => s.MachineID === machine.MachineID).length + 1; setServiceForm({ MachineID: machine.MachineID, MachineName: machine.Name, Address: machine.Address, Province: machine.Province, ImageURL: machine.ImageURL, Date: new Date().toISOString().split('T')[0], Technician: user.name, VisitCount: count, Status: 'ปกติ', Details: '', GPS: '', imgBeforeBase64: '', imgAfterBase64: '' }); setView('serviceForm'); handleGPSHelper(setServiceForm); };
    const prepareRepairForm = (machine) => { setRepairForm({ MachineID: machine.MachineID, MachineName: machine.Name, Address: machine.Address, Province: machine.Province, ImageURL: machine.ImageURL, Date: new Date().toISOString().split('T')[0], Reporter: user.name, Problems: [], OtherDetails: '', Status: 'รอแก้ไข', imgBase64: '' }); setView('repairForm'); };
    const handleScanResult = (code) => { setShowScanner(false); const machine = data.machines.find(m => m.MachineID === code); if (!machine) return showAlert('ไม่พบข้อมูล', 'ไม่พบข้อมูลเครื่องนี้ในระบบ', 'error', closeAlert); if (scannerTarget === 'service') prepareServiceForm(machine); else if (scannerTarget === 'repair') prepareRepairForm(machine); };

    return (
        <div className="min-h-screen bg-gray-50 shadow-2xl relative">
            {loading && <Loading />}
            {alert && (
                <CustomAlert 
                    title={alert.title} 
                    message={alert.message} 
                    type={alert.type} 
                    onConfirm={alert.onConfirm} 
                    onCancel={closeAlert} 
                    showCancel={alert.showCancel} 
                    showInput={alert.showInput}
                    inputPlaceholder={alert.inputPlaceholder}
                    initialInputValue={alert.initialInputValue}
                />
            )}
            {showScanner && <QRScanner onScan={handleScanResult} onClose={() => setShowScanner(false)} />}

            {view === 'login' && <LoginView u={loginU} p={loginP} setU={setLoginU} setP={setLoginP} handleLogin={handleLogin} showAlert={showAlert} closeAlert={closeAlert} />}
            {view === 'dashboard' && <DashboardView user={user} machines={data.machines} services={data.services} repairs={data.repairs} searchTerm={searchTerm} setSearchTerm={setSearchTerm} filter={dashboardFilter} setFilter={setDashboardFilter} scrollPos={dashboardScrollPos} setScrollPos={setDashboardScrollPos} handleLogout={handleLogout} setScannerTarget={setScannerTarget} setShowScanner={setShowScanner} setView={setView} setMachineForm={setMachineForm} prepareServiceForm={prepareServiceForm} prepareRepairForm={prepareRepairForm} setSelectedMachine={setSelectedMachine} onSaveAction={saveRepairAction} showAlert={showAlert} closeAlert={closeAlert} onSendTelegramReport={handleSendTelegramReport} />}
            {view === 'stock' && <StockManagementView machines={data.machines} setView={setView} setMachineForm={setMachineForm} deleteMachine={deleteMachine} saveMachineToStock={saveMachineToStock} showAlert={showAlert} closeAlert={closeAlert} />}
            {view === 'machineForm' && <MachineForm form={machineForm} setForm={setMachineForm} saveMachine={saveMachine} setView={setView} machineHistory={data.machineHistory} customers={data.customers} showAlert={showAlert} closeAlert={closeAlert} />}
            {view === 'serviceForm' && <ServiceForm form={serviceForm} setForm={setServiceForm} saveService={saveService} setView={setView} handleGPS={() => handleGPSHelper(setServiceForm)} onAbnormal={handleAbnormalRedirect} showAlert={showAlert} closeAlert={closeAlert} />}
            {view === 'repairForm' && <RepairForm form={repairForm} setForm={setRepairForm} saveRepair={saveRepair} setView={setView} handleGPS={() => handleGPSHelper(setRepairForm)} showAlert={showAlert} closeAlert={closeAlert} />}
            {view === 'history' && <HistoryView machine={selectedMachine} services={data.services} repairs={data.repairs} setView={setView} setMachineForm={setMachineForm} user={user} onSaveAction={saveRepairAction} showAlert={showAlert} closeAlert={closeAlert} onBack={() => setView(returnView)} />}
            {view === 'inspector' && <InspectorView machines={data.machines} services={data.services} repairs={data.repairs} setView={setView} setSelectedMachine={setSelectedMachine} setReturnView={setReturnView} />}
        </div>
    );
};

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