import React, { useState, useEffect, useCallback } from 'react';
import { 
  Save, Trash2, User, Calendar, Facebook, Activity, Search, 
  CheckCircle2, CreditCard, ChevronDown, Lock, KeyRound, LogOut, 
  ShieldCheck, Eye, EyeOff, AlertTriangle, Timer, Clock, Fingerprint, 
  MonitorOff, Server, CameraOff, Terminal, Delete, Package, UserCog, 
  ArrowLeft, ActivitySquare, ShieldAlert, HardDrive, Cpu, RefreshCw, Zap,
  Globe, Shield, Scan, FileText, X, FileWarning
} from 'lucide-react';

// นำเข้า Firebase
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithCustomToken, signInAnonymously, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, onSnapshot, addDoc, updateDoc, deleteDoc, doc, setDoc } from 'firebase/firestore';

// ตั้งค่า Firebase
let app, auth, db, appId;
const isExternalEnv = typeof __firebase_config === 'undefined';

try {
  if (!isExternalEnv) {
    const firebaseConfig = JSON.parse(__firebase_config);
    app = initializeApp(firebaseConfig);
    auth = getAuth(app);
    db = getFirestore(app);
    appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
  }
} catch (error) {
  console.warn("Firebase Init Failed (Using LocalStorage fallback):", error);
}

export default function App() {
  // โหลด Tailwind CSS
  useEffect(() => {
    if (!document.getElementById('tailwind-cdn')) {
      const script = document.createElement('script');
      script.id = 'tailwind-cdn';
      script.src = 'https://cdn.tailwindcss.com';
      document.head.appendChild(script);
    }
  }, []);

  // --- State การเข้าสู่ระบบ ---
  const [isInitializing, setIsInitializing] = useState(true);
  const [bootLogs, setBootLogs] = useState([]);
  
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [loginStep, setLoginStep] = useState(1); 
  const [loginData, setLoginData] = useState({ username: '', password: '', otp: '' });
  const [loginError, setLoginError] = useState('');
  
  const [failedAttempts, setFailedAttempts] = useState(0);
  const [isLocked, setIsLocked] = useState(false);
  const [lockoutTime, setLockoutTime] = useState(0);
  const [showPassword, setShowPassword] = useState(false);
  const [padKeys, setPadKeys] = useState(['1','2','3','4','5','6','7','8','9','0']); // สำหรับ Dynamic Keypad
  
  const [isPrivacyMode, setIsPrivacyMode] = useState(true); 
  const [sessionTimeLeft, setSessionTimeLeft] = useState(300); 
  const [currentTime, setCurrentTime] = useState(new Date()); 
  const [isWindowFocused, setIsWindowFocused] = useState(true); 
  const [screenshotWarning, setScreenshotWarning] = useState(false); 
  const [clientIp, setClientIp] = useState('171.97.xxx.xxx'); 
  const [sessionId, setSessionId] = useState('');
  const [securityViolation, setSecurityViolation] = useState(null); 
  const [currentPage, setCurrentPage] = useState('dashboard'); 
  const [hashKey, setHashKey] = useState('0x...');

  const [adminFormData, setAdminFormData] = useState({
    firstName: '', lastName: '', nickname: '', age: '',
    startDate: new Date().toISOString().split('T')[0], role: 'Super Admin'
  });

  const [viewRecordData, setViewRecordData] = useState(null); // State สำหรับแสดงข้อมูลรายบุคคล

  const [firebaseUser, setFirebaseUser] = useState(null);
  const [records, setRecords] = useState([]);
  const [auditLogs, setAuditLogs] = useState([]); 
  const [isSyncing, setIsSyncing] = useState(false);

  // --- Secure Boot Sequence ---
  useEffect(() => {
    if (!isInitializing) return;
    const logs = [
      "INITIALIZING ZENSHOP CORE PROTOCOLS...",
      "ESTABLISHING AES-256-GCM ENCRYPTED TUNNEL...",
      "VERIFYING TLS/SSL CERTIFICATES...",
      "BLOCKING UNTRUSTED ROUTING...",
      "CONNECTING TO SECURE NODE (TH-BKK-01)...",
      "ENVIRONMENT SECURED."
    ];
    let i = 0;
    const interval = setInterval(() => {
      setBootLogs(prev => [...prev, logs[i]]);
      i++;
      if (i >= logs.length) {
        clearInterval(interval);
        setTimeout(() => setIsInitializing(false), 1200);
      }
    }, 400);
    return () => clearInterval(interval);
  }, [isInitializing]);

  // สร้าง IP, Session ID
  useEffect(() => {
    setClientIp(`171.97.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`);
    setSessionId(`SEC-${Math.random().toString(36).substring(2, 10).toUpperCase()}`);
    const hashInterval = setInterval(() => setHashKey(`0x${Math.random().toString(16).substring(2, 10).toUpperCase()}`), 2000);
    return () => clearInterval(hashInterval);
  }, []);

  // Auth Init
  useEffect(() => {
    if (!auth) {
      setFirebaseUser({ uid: 'local-dev-user' });
      return;
    }
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) await signInWithCustomToken(auth, __initial_auth_token);
        else await signInAnonymously(auth);
      } catch (error) { console.error("Auth error:", error); }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setFirebaseUser);
    return () => unsubscribe();
  }, []);

  // Data Fetching
  useEffect(() => {
    if (!firebaseUser) return;
    setIsSyncing(true);
    let unsubRecords, unsubProfile, unsubLogs;

    if (db) {
      unsubRecords = onSnapshot(collection(db, 'artifacts', appId, 'users', firebaseUser.uid, 'crm_records'), (snapshot) => {
        setRecords(snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })).sort((a, b) => b.createdAt - a.createdAt));
        setIsSyncing(false);
      });
      unsubProfile = onSnapshot(doc(db, 'artifacts', appId, 'users', firebaseUser.uid, 'admin_profile', 'main'), (docSnap) => {
        if (docSnap.exists()) setAdminFormData(docSnap.data());
      });
      unsubLogs = onSnapshot(collection(db, 'artifacts', appId, 'users', firebaseUser.uid, 'audit_logs'), (snapshot) => {
        setAuditLogs(snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })).sort((a, b) => b.timestamp - a.timestamp));
      });
    } else {
      const localRecords = localStorage.getItem('crm_records');
      if (localRecords) setRecords(JSON.parse(localRecords).sort((a, b) => b.createdAt - a.createdAt));
      const localProfile = localStorage.getItem('admin_profile');
      if (localProfile) setAdminFormData(JSON.parse(localProfile));
      const localLogs = localStorage.getItem('audit_logs');
      if (localLogs) setAuditLogs(JSON.parse(localLogs).sort((a, b) => b.timestamp - a.timestamp));
      setIsSyncing(false);
    }
    return () => { if (unsubRecords) unsubRecords(); if (unsubProfile) unsubProfile(); if (unsubLogs) unsubLogs(); };
  }, [firebaseUser]);

  // Audit Logging
  const addAuditLog = async (eventText, statusStr, iconStr) => {
    if (!firebaseUser) return;
    const newLog = { event: eventText, status: statusStr, icon: iconStr, timestamp: Date.now() };
    if (db) {
      try { await addDoc(collection(db, 'artifacts', appId, 'users', firebaseUser.uid, 'audit_logs'), newLog); } catch (e) {}
    } else {
      newLog.id = Date.now().toString() + Math.random().toString(36).substr(2, 5);
      setAuditLogs(prev => {
        const updated = [newLog, ...prev].sort((a, b) => b.timestamp - a.timestamp);
        localStorage.setItem('audit_logs', JSON.stringify(updated));
        return updated;
      });
    }
  };

  const [showModal, setShowModal] = useState(false);
  const [modalConfig, setModalConfig] = useState({ title: '', message: '', onConfirm: () => {}, onCancel: () => {}, isAlert: false });

  // Security & Tracking
  useEffect(() => {
    let interval;
    if (isLoggedIn && !securityViolation) {
      interval = setInterval(() => {
        setSessionTimeLeft((prev) => {
          if (prev <= 1) { handleLogout(true); return 0; }
          return prev - 1;
        });
      }, 1000);
      const resetTimer = () => setSessionTimeLeft(300);
      window.addEventListener('mousemove', resetTimer);
      window.addEventListener('keydown', resetTimer);
      return () => { clearInterval(interval); window.removeEventListener('mousemove', resetTimer); window.removeEventListener('keydown', resetTimer); };
    }
  }, [isLoggedIn, securityViolation]);

  useEffect(() => {
    const handleFocus = () => setIsWindowFocused(true);
    const handleBlur = () => setIsWindowFocused(false);
    const handleMouseLeave = (e) => { if (e.clientY <= 0 || e.clientX <= 0 || e.clientX >= window.innerWidth || e.clientY >= window.innerHeight) setIsWindowFocused(false); };
    const handleMouseEnter = () => setIsWindowFocused(true);
    window.addEventListener('focus', handleFocus); window.addEventListener('blur', handleBlur);
    document.addEventListener('mouseleave', handleMouseLeave); document.addEventListener('mouseenter', handleMouseEnter);
    
    // Prevent Dragging
    document.ondragstart = () => false;
    
    return () => { 
      window.removeEventListener('focus', handleFocus); window.removeEventListener('blur', handleBlur); 
      document.removeEventListener('mouseleave', handleMouseLeave); document.removeEventListener('mouseenter', handleMouseEnter); 
      document.ondragstart = null;
    };
  }, []);

  useEffect(() => {
    const handleKeyDown = (e) => {
      // Extensive Block List
      if (
        e.key === 'F12' || 
        (e.ctrlKey && e.shiftKey && ['I', 'J', 'C'].includes(e.key.toUpperCase())) || 
        (e.ctrlKey && ['U', 'S'].includes(e.key.toUpperCase()))
      ) {
        e.preventDefault(); setSecurityViolation('DEVTOOLS_ATTEMPT'); addAuditLog('พยายามเข้าถึงแกนระบบ (System Core)', 'Blocked', 'Alert'); setIsLoggedIn(false); return;
      }
      if (e.key === 'PrintScreen' || (e.metaKey && e.shiftKey && ['s', 'S', '3', '4', '5'].includes(e.key))) {
        e.preventDefault(); setScreenshotWarning(true); addAuditLog('พยายามบันทึกภาพหน้าจอ', 'Blocked', 'Alert'); try { navigator.clipboard.writeText('⚠️ [SECURITY ALERT: CONFIDENTIAL DATA]'); } catch (err) {} setTimeout(() => setScreenshotWarning(false), 5000);
      }
      if (e.ctrlKey && ['c', 'x', 'p'].includes(e.key.toLowerCase())) { e.preventDefault(); addAuditLog(`พยายามคัดลอก/พิมพ์ข้อมูล`, 'Blocked', 'Alert'); }
    };
    const handleKeyUp = (e) => { if (e.key === 'PrintScreen') { e.preventDefault(); setScreenshotWarning(true); addAuditLog('พยายามบันทึกภาพหน้าจอ', 'Blocked', 'Alert'); try { navigator.clipboard.writeText('⚠️ [SECURITY ALERT]'); } catch (err) {} } };
    window.addEventListener('keydown', handleKeyDown); window.addEventListener('keyup', handleKeyUp);
    return () => { window.removeEventListener('keydown', handleKeyDown); window.removeEventListener('keyup', handleKeyUp); };
  }, []);

  useEffect(() => { const timer = setInterval(() => setCurrentTime(new Date()), 1000); return () => clearInterval(timer); }, []);
  useEffect(() => {
    let timer;
    if (isLocked && lockoutTime > 0) timer = setInterval(() => setLockoutTime(p => { if (p <= 1) { setIsLocked(false); setFailedAttempts(0); return 0; } return p - 1; }), 1000);
    return () => clearInterval(timer);
  }, [isLocked, lockoutTime]);

  // Handlers
  const handleLoginChange = (e) => { setLoginData({ ...loginData, [e.target.name]: e.target.value }); setLoginError(''); };
  
  // Dynamic Keypad Shuffle
  const shuffleKeypad = () => {
    let arr = [...padKeys];
    for (let i = arr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    setPadKeys(arr);
  };

  useEffect(() => {
    if (loginStep === 2) shuffleKeypad();
  }, [loginStep]);

  const handleOTPKeyPress = (val) => { 
    if (loginData.otp.length < 6) { 
      setLoginData(prev => ({ ...prev, otp: prev.otp + val })); 
      setLoginError(''); 
      shuffleKeypad(); // Shuffle after every click
    } 
  };
  const handleOTPDelete = () => {
    setLoginData(prev => ({ ...prev, otp: prev.otp.slice(0, -1) }));
    shuffleKeypad();
  };
  
  const handleLoginSubmit = (e) => {
    e.preventDefault();
    if (isLocked) return;
    if (loginStep === 1) {
      if (loginData.username === 'ZenshopTHA' && loginData.password === 'ZenshopTHA123') { setLoginStep(2); setLoginError(''); setFailedAttempts(0); } 
      else {
        const newAttempts = failedAttempts + 1; setFailedAttempts(newAttempts);
        if (newAttempts >= 5) { 
          // SELF DESTRUCT PROTOCOL
          localStorage.clear();
          setSecurityViolation('BRUTE_FORCE_DETECTED');
        } else if (newAttempts >= 3) { 
          setIsLocked(true); setLockoutTime(30); setLoginError('ตรวจพบความเสี่ยง: ระงับการใช้งานชั่วคราว'); 
        } 
        else setLoginError(`การยืนยันล้มเหลว (เหลือโอกาส ${5 - newAttempts} ครั้งก่อนทำลายข้อมูล)`);
      }
    } else if (loginStep === 2) {
      if (loginData.otp === '377821') { setIsLoggedIn(true); setSessionTimeLeft(300); setLoginError(''); setCurrentPage('dashboard'); addAuditLog('ระบบยืนยันตัวตนสำเร็จ (2FA)', 'Passed', 'User'); } 
      else { setLoginError('รหัส 2FA ไม่ถูกต้อง ระบบได้บันทึก IP ของคุณแล้ว'); setLoginData(prev => ({ ...prev, otp: '' })); shuffleKeypad(); }
    }
  };

  const handleLogout = (isAuto = false) => {
    if (isAuto) {
      setIsLoggedIn(false); setLoginStep(1); setLoginData({ username: '', password: '', otp: '' });
      setModalConfig({ title: 'สิ้นสุดการเชื่อมต่อ', message: 'เซสชันหมดอายุ ข้อมูลของคุณถูกเข้ารหัสและปิดผนึกเพื่อความปลอดภัย', onConfirm: () => setShowModal(false), isAlert: true });
      setShowModal(true);
    } else {
      setModalConfig({
        title: 'ยืนยันการตัดการเชื่อมต่อ', message: 'คุณต้องการสิ้นสุดช่องทางสื่อสารที่เข้ารหัสและออกจากระบบใช่หรือไม่?',
        onConfirm: () => { setIsLoggedIn(false); setLoginStep(1); setLoginData({ username: '', password: '', otp: '' }); setShowModal(false); },
        onCancel: () => setShowModal(false), isAlert: false
      });
      setShowModal(true);
    }
  };

  const [formData, setFormData] = useState({ name: '', code: '', orderDate: new Date().toISOString().split('T')[0], orderNumber: '', product: '', facebookName: '', actionStatus: 'ชำระเงินแล้ว', amount: '' });
  const [searchTerm, setSearchTerm] = useState('');
  const handleChange = (e) => setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!formData.name || !formData.orderNumber || !firebaseUser) return;
    try {
      const newRecord = { ...formData, amount: parseFloat(formData.amount) || 0, createdAt: Date.now() };
      if (db) await addDoc(collection(db, 'artifacts', appId, 'users', firebaseUser.uid, 'crm_records'), newRecord);
      else {
        newRecord.id = Date.now().toString() + Math.random().toString(36).substr(2, 5);
        setRecords(prev => { const updated = [newRecord, ...prev]; localStorage.setItem('crm_records', JSON.stringify(updated)); return updated.sort((a, b) => b.createdAt - a.createdAt); });
      }
      await addAuditLog(`บันทึกข้อมูลเข้ารหัสสำเร็จ: ${formData.name}`, 'Passed', 'Save');
      setFormData({ name: '', code: '', orderDate: new Date().toISOString().split('T')[0], orderNumber: '', product: '', facebookName: '', actionStatus: 'ชำระเงินแล้ว', amount: '' });
    } catch (error) {}
  };

  const handleDelete = (id) => {
    setModalConfig({
      title: 'ลบข้อมูลขั้นเด็ดขาด (Critical Action)', message: 'โปรดยืนยันการทำลายข้อมูลนี้อย่างถาวร (การกระทำนี้จะถูกส่งคำสั่งไปยังเซิร์ฟเวอร์หลักทันที)',
      onConfirm: async () => {
        try { 
          if (firebaseUser) {
            if (db) await deleteDoc(doc(db, 'artifacts', appId, 'users', firebaseUser.uid, 'crm_records', id)); 
            else setRecords(prev => { const updated = prev.filter(r => r.id !== id); localStorage.setItem('crm_records', JSON.stringify(updated)); return updated; });
            await addAuditLog(`ทำลายข้อมูลลูกค้ารหัส: ${id.substring(0, 6)}...`, 'Passed', 'Trash');
          }
        } catch (error) {}
        setShowModal(false);
      },
      onCancel: () => setShowModal(false), isAlert: false
    });
    setShowModal(true);
  };

  const handleStatusChange = async (id, newStatus) => {
    try { 
      if (firebaseUser) {
        if (db) await updateDoc(doc(db, 'artifacts', appId, 'users', firebaseUser.uid, 'crm_records', id), { actionStatus: newStatus }); 
        else setRecords(prev => { const updated = prev.map(r => r.id === id ? { ...r, actionStatus: newStatus } : r); localStorage.setItem('crm_records', JSON.stringify(updated)); return updated; });
        await addAuditLog(`ปรับปรุงโปรโตคอลสถานะเป็น: ${newStatus}`, 'Passed', 'Update');
      }
    } catch (error) {}
  };

  const handleAdminChange = (e) => setAdminFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));
  const handleAdminSubmit = async (e) => {
    e.preventDefault();
    if (!firebaseUser) return;
    try {
      if (db) await setDoc(doc(db, 'artifacts', appId, 'users', firebaseUser.uid, 'admin_profile', 'main'), adminFormData);
      else localStorage.setItem('admin_profile', JSON.stringify(adminFormData));
      await addAuditLog(`อัปเดตสิทธิ์ระดับสูง: ${adminFormData.firstName || 'ไม่ระบุชื่อ'}`, 'Passed', 'User');
      setModalConfig({ title: 'บันทึกข้อมูลสำเร็จ', message: 'มาตรการและระดับสิทธิ์ถูกซิงค์เข้ากับเซิร์ฟเวอร์เรียบร้อยแล้ว', onConfirm: () => setShowModal(false), isAlert: true });
      setShowModal(true);
    } catch (error) {}
  };

  // UI Helpers
  const getStatusStyle = (status) => {
    switch (status) {
      case 'ชำระเงินแล้ว': return 'bg-indigo-50 text-indigo-700 border-indigo-200 focus:ring-indigo-500/20';
      case 'กำลังดำเนินการ': return 'bg-amber-50 text-amber-700 border-amber-200 focus:ring-amber-500/20';
      case 'สำเร็จ': return 'bg-emerald-50 text-emerald-700 border-emerald-200 focus:ring-emerald-500/20';
      default: return 'bg-slate-50 text-slate-700 border-slate-200';
    }
  };

  const getStatusIcon = (status) => {
    switch (status) {
      case 'ชำระเงินแล้ว': return <CreditCard className="w-3.5 h-3.5" />;
      case 'กำลังดำเนินการ': return <Activity className="w-3.5 h-3.5" />;
      case 'สำเร็จ': return <CheckCircle2 className="w-3.5 h-3.5" />;
      default: return null;
    }
  };

  const filteredRecords = records.filter(record => 
    record.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    record.orderNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
    record.facebookName.toLowerCase().includes(searchTerm.toLowerCase()) ||
    (record.product && record.product.toLowerCase().includes(searchTerm.toLowerCase()))
  );

  const maskData = (data, type) => {
    if (!isPrivacyMode || !data) return data;
    if (type === 'name') return data.substring(0, 2) + '***' + (data.length > 5 ? data.substring(data.length - 1) : '');
    if (type === 'amount') return '฿***.**';
    if (type === 'facebook') return '***' + data.substring(data.length - 2);
    if (type === 'product') return '*** (เซ็นเซอร์)';
    return '***';
  };

  const CustomModal = () => {
    if (!showModal) return null;
    return (
      <div className="fixed inset-0 bg-[#0B1120]/80 backdrop-blur-lg z-[200] flex items-center justify-center p-4 animate-in fade-in duration-300">
        <div className="bg-white rounded-2xl shadow-[0_20px_80px_-15px_rgba(0,0,0,0.5)] w-full max-w-md overflow-hidden animate-in zoom-in-95 duration-300 border border-slate-200">
          <div className="p-7 relative overflow-hidden">
            <div className="absolute top-0 right-0 w-32 h-32 bg-slate-100 rounded-full blur-3xl -mr-10 -mt-10"></div>
            <div className="flex items-center mb-4 relative z-10">
              {modalConfig.isAlert ? (
                <div className="bg-amber-100 p-2.5 rounded-xl mr-3 shadow-sm border border-amber-200 animate-pulse">
                  <AlertTriangle className="w-6 h-6 text-amber-600" />
                </div>
              ) : (
                <div className="bg-slate-900 p-2.5 rounded-xl mr-3 shadow-sm border border-slate-700">
                  <ShieldCheck className="w-6 h-6 text-emerald-400" />
                </div>
              )}
              <h3 className="text-xl font-bold text-slate-900 tracking-tight">{modalConfig.title}</h3>
            </div>
            <p className="text-[14px] font-medium text-slate-600 leading-relaxed pl-1 relative z-10">{modalConfig.message}</p>
          </div>
          <div className="bg-slate-50/80 px-7 py-5 flex justify-end gap-3 border-t border-slate-200">
            {!modalConfig.isAlert && (
              <button onClick={modalConfig.onCancel} className="px-5 py-2.5 text-sm font-bold text-slate-600 hover:text-slate-900 hover:bg-slate-200 rounded-xl transition-all duration-200">
                ยกเลิก
              </button>
            )}
            <button onClick={modalConfig.onConfirm} className="px-6 py-2.5 text-sm font-bold text-white bg-slate-900 hover:bg-emerald-600 rounded-xl transition-all duration-300 shadow-md hover:shadow-lg active:scale-95 flex items-center">
              {modalConfig.isAlert ? 'รับทราบ' : 'ยืนยันคำสั่ง'}
            </button>
          </div>
        </div>
      </div>
    );
  };

  // --- Views ---
  
  // 1. Initializing View
  if (isInitializing) {
    return (
      <div className="min-h-screen bg-[#0B1120] flex flex-col items-center justify-center p-8 text-emerald-500 font-mono text-sm sm:text-base select-none relative" onContextMenu={e => e.preventDefault()}>
        <style>{`@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');`}</style>
        <div className="w-full max-w-2xl bg-black/50 border border-emerald-900/50 p-6 rounded-lg shadow-[0_0_50px_rgba(16,185,129,0.1)] relative overflow-hidden h-64 flex flex-col justify-end">
          <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-emerald-500 to-transparent animate-pulse"></div>
          {bootLogs.map((log, i) => (
            <div key={i} className="mb-2 flex items-start animate-in fade-in slide-in-from-bottom-2 duration-300">
              <span className="mr-3 opacity-50">[{new Date().toISOString().split('T')[1].slice(0,11)}]</span>
              <span className="font-bold">{log}</span>
            </div>
          ))}
          <div className="mt-2 flex items-center">
            <span className="w-2 h-4 bg-emerald-500 animate-pulse mr-2"></span>
            <span className="opacity-70">Awaiting secure handshake...</span>
          </div>
        </div>
      </div>
    );
  }

  // 2. Lockdown View
  if (securityViolation) {
    return (
      <div className="min-h-screen bg-[#0B1120] flex flex-col items-center justify-center p-4 text-white select-none relative overflow-hidden" style={{ fontFamily: "'Sarabun', sans-serif" }}>
        <style>{`@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&display=swap');`}</style>
        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTU5IDYwaC0xVjFoLTF2NTlIMHYtMWg1OHYtMXYtMWgxdjJoMXoiIGZpbGw9IiMzMzMiIGZpbGwtb3BhY2l0eT0iMC4xIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=')] opacity-20"></div>
        <div className="absolute inset-0 bg-red-900/10 mix-blend-overlay animate-pulse"></div>

        <div className="relative z-10 flex flex-col items-center animate-in zoom-in-95 duration-500">
          <div className="relative mb-8">
            <div className="absolute inset-0 bg-red-600 blur-3xl opacity-30 animate-pulse"></div>
            <FileWarning className="w-28 h-28 text-red-500 drop-shadow-[0_0_15px_rgba(220,38,38,0.8)] relative z-10" />
          </div>
          <h1 className="text-5xl md:text-6xl font-black tracking-[0.2em] text-red-500 mb-4 text-center drop-shadow-lg">มาตรการทำลายข้อมูล</h1>
          <div className="bg-red-950/80 border border-red-800 px-6 py-4 rounded-xl backdrop-blur-md mb-6 flex items-center shadow-xl">
            <ShieldAlert className="w-6 h-6 text-red-400 mr-3 animate-pulse" />
            <p className="text-lg font-bold text-red-100 tracking-wide uppercase">ตรวจพบการโจมตี (Brute Force/Tampering)</p>
          </div>
          <p className="text-slate-300 text-center max-w-2xl mb-10 text-sm md:text-base leading-relaxed bg-black/40 p-6 rounded-lg border border-red-900/30">
            ระบบความปลอดภัยขั้นสูงสุด (Self-Destruct Protocol) ได้ทำงานแล้ว<br/>ข้อมูลใน Local Storage ทั้งหมดถูกลบทิ้งเพื่อป้องกันการเข้าถึง ข้อมูลเครือข่าย <span className="text-red-400 font-mono font-bold">[{clientIp}]</span> ของคุณถูกบันทึกลง Blacklist
          </p>
          <button onClick={() => window.location.reload()} className="px-10 py-4 bg-red-600 hover:bg-red-500 text-white rounded-xl font-bold tracking-[0.1em] transition-all duration-300 shadow-[0_0_30px_rgba(220,38,38,0.4)] active:scale-95 flex items-center">
            <RefreshCw className="w-5 h-5 mr-3" /> ยอมรับและรีเซ็ตระบบ
          </button>
        </div>
      </div>
    );
  }

  // 3. Login View
  if (!isLoggedIn) {
    return (
      <div className="min-h-screen bg-[#0B1120] flex items-center justify-center p-4 relative overflow-hidden select-none" style={{ fontFamily: "'Sarabun', sans-serif" }} onContextMenu={(e) => e.preventDefault()} onCopy={(e) => e.preventDefault()} onCut={(e) => e.preventDefault()}>
        <style>{`@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&display=swap'); @keyframes scan { 0% { transform: translateY(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(400%); opacity: 0; } } .scan-line { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(to right, transparent, rgba(16, 185, 129, 0.8), transparent); animation: scan 3s infinite linear; z-index: 50; pointer-events: none; }`}</style>
        <div className="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-blue-900/20 rounded-full blur-[120px] pointer-events-none mix-blend-screen"></div>
        <div className="absolute bottom-[-20%] right-[-10%] w-[50%] h-[50%] bg-emerald-900/10 rounded-full blur-[120px] pointer-events-none mix-blend-screen"></div>
        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE5IDIwaC0xVjFoLTF2MTlIMHYtMWgxOHYtMXYtMWgxdjJoMXoiIGZpbGw9IiM0NzU1NjkiIGZpbGwtb3BhY2l0eT0iMC4wNSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+')] opacity-30 pointer-events-none"></div>

        <div className="bg-white/95 backdrop-blur-2xl p-8 md:p-12 rounded-[2rem] shadow-[0_20px_80px_rgba(0,0,0,0.6)] w-full max-w-[440px] border border-white/10 relative z-10 animate-in slide-in-from-bottom-8 fade-in duration-700">
          <div className="scan-line hidden group-hover:block"></div>
          
          <div className="absolute top-5 right-5 flex items-center bg-slate-900 text-emerald-400 text-[10px] font-extrabold px-3 py-1.5 rounded-full border border-slate-700 shadow-lg">
            <Globe className="w-3.5 h-3.5 mr-1.5" /> E2EE
          </div>

          <div className="text-center mb-10 mt-4 relative">
            <div className="absolute inset-0 bg-emerald-400/20 blur-3xl rounded-full scale-150 z-0"></div>
            <div className="bg-gradient-to-br from-slate-900 to-black w-24 h-24 rounded-[1.5rem] flex items-center justify-center mx-auto mb-6 shadow-2xl shadow-slate-900/50 border border-slate-700 relative z-10 transform transition-transform duration-500 hover:scale-105">
              <Shield className="w-12 h-12 text-emerald-400" />
            </div>
            <h1 className="text-3xl font-black text-slate-900 tracking-tight">ZENSHOP<span className="text-emerald-600">.</span></h1>
            <p className="text-slate-500 text-[11px] mt-2 font-extrabold tracking-[0.2em] uppercase flex items-center justify-center opacity-80">
              <Lock className="w-3 h-3 mr-1.5 text-slate-400" /> Authorized Personnel Only
            </p>
          </div>

          <form onSubmit={handleLoginSubmit} className="space-y-6 relative z-10">
            {loginError && (
              <div className="bg-red-50/90 backdrop-blur-sm text-red-600 text-sm p-4 rounded-2xl border border-red-200/50 flex items-center justify-center font-bold shadow-sm animate-in zoom-in duration-300">
                <AlertTriangle className="w-5 h-5 mr-2.5 text-red-500 flex-shrink-0" /> <span className="text-center">{loginError}</span>
              </div>
            )}
            
            {loginStep === 1 ? (
              <div className="space-y-5 animate-in fade-in slide-in-from-left-4 duration-500">
                <div className="space-y-1.5">
                  <label className="block text-[13px] font-bold text-slate-700 uppercase tracking-wide ml-1">รหัสประจำตัว (ID)</label>
                  <div className="relative group/input">
                    <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><User className="w-5 h-5 text-slate-400 group-focus-within/input:text-emerald-600 transition-colors duration-300" /></div>
                    <input type="text" name="username" required disabled={isLocked} value={loginData.username} onChange={handleLoginChange} className="pl-12 w-full rounded-2xl border-slate-200 border-2 py-3.5 text-sm font-medium focus:ring-4 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all duration-300 outline-none bg-slate-50 focus:bg-white disabled:opacity-50" placeholder="กรอกรหัสผู้ใช้งาน..." />
                  </div>
                </div>

                <div className="space-y-1.5">
                  <label className="block text-[13px] font-bold text-slate-700 uppercase tracking-wide ml-1">รหัสผ่าน (Key)</label>
                  <div className="relative group/input">
                    <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><KeyRound className="w-5 h-5 text-slate-400 group-focus-within/input:text-emerald-600 transition-colors duration-300" /></div>
                    <input type={showPassword ? "text" : "password"} name="password" required disabled={isLocked} value={loginData.password} onChange={handleLoginChange} className="pl-12 pr-12 w-full rounded-2xl border-slate-200 border-2 py-3.5 text-sm font-medium focus:ring-4 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all duration-300 outline-none bg-slate-50 focus:bg-white tracking-widest disabled:opacity-50" placeholder="••••••••••••" />
                    <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute inset-y-0 right-0 pr-4 flex items-center text-slate-400 hover:text-slate-700 focus:outline-none transition-colors">{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}</button>
                  </div>
                </div>
                
                <button type="submit" disabled={isLocked} className={`w-full mt-4 py-4 px-4 rounded-2xl text-[15px] font-bold transition-all duration-300 flex items-center justify-center tracking-wide ${isLocked ? 'bg-slate-200 text-slate-400 cursor-not-allowed border-2 border-slate-200' : 'bg-slate-900 hover:bg-emerald-600 text-white shadow-[0_8px_20px_rgba(0,0,0,0.12)] hover:-translate-y-1 active:scale-95'}`}>
                  {isLocked ? <><Timer className="w-5 h-5 mr-2 animate-spin-slow" />ระงับชั่วคราว ({lockoutTime} วิ)</> : 'ตรวจสอบสิทธิ์ (Verify)'}
                </button>
              </div>
            ) : (
              <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-500 flex flex-col items-center">
                <div className="bg-emerald-50/80 backdrop-blur-sm w-full p-4 rounded-2xl border border-emerald-100/50 text-center mb-2 shadow-sm transition-all duration-300">
                  <ShieldCheck className="w-6 h-6 text-emerald-500 mx-auto mb-1.5" />
                  <p className="text-[14px] text-emerald-900 font-black tracking-tight">ระบบสุ่มแป้นพิมพ์ 2FA (Dynamic Keypad)</p>
                  <p className="text-[11px] text-emerald-700/80 mt-1 font-medium">ตำแหน่งปุ่มจะถูกสุ่มใหม่ทุกครั้งเพื่อป้องกัน Keylogger</p>
                </div>
                
                <div className="flex gap-2.5 mb-2">
                  {[...Array(6)].map((_, i) => (
                    <div key={i} className={`w-11 h-14 rounded-xl border-2 flex items-center justify-center text-2xl font-black transition-all duration-300 ${loginData.otp.length > i ? 'border-slate-900 text-slate-900 bg-white shadow-inner scale-105' : 'border-slate-200 bg-slate-50/50 text-transparent'}`}>
                      {loginData.otp[i] || '•'}
                    </div>
                  ))}
                </div>

                <div className="grid grid-cols-3 gap-3 w-full max-w-[260px]">
                  {padKeys.map((num, idx) => (
                    <button key={idx} type="button" onClick={() => handleOTPKeyPress(num)} className="h-14 bg-white border-2 border-slate-100 rounded-[1rem] text-xl font-bold text-slate-700 hover:border-emerald-500 hover:text-emerald-600 hover:bg-emerald-50 active:bg-emerald-100 transition-all shadow-sm focus:outline-none transform active:scale-95">
                      {num}
                    </button>
                  ))}
                  <button type="button" disabled className="h-14 bg-slate-100 border-2 border-slate-100 rounded-[1rem] flex items-center justify-center text-emerald-500 opacity-50"><Scan className="w-6 h-6" /></button>
                  <button type="button" onClick={handleOTPDelete} className="h-14 bg-slate-50 border-2 border-slate-100 rounded-[1rem] flex items-center justify-center text-slate-500 hover:border-red-300 hover:bg-red-50 hover:text-red-500 active:bg-red-100 transition-all shadow-sm focus:outline-none transform active:scale-95"><Delete className="w-6 h-6" /></button>
                </div>

                <div className="w-full flex flex-col gap-3 mt-4">
                  <button type="button" onClick={handleLoginSubmit} disabled={loginData.otp.length !== 6} className={`w-full py-4 rounded-2xl text-[15px] font-bold transition-all duration-300 tracking-wide ${loginData.otp.length === 6 ? 'bg-slate-900 text-white hover:bg-emerald-600 shadow-[0_8px_20px_rgba(0,0,0,0.12)] hover:-translate-y-1 active:scale-95' : 'bg-slate-100 text-slate-400 cursor-not-allowed'}`}>
                    ยืนยันอุโมงค์เข้ารหัส
                  </button>
                  <button type="button" onClick={() => { setLoginStep(1); setLoginData({...loginData, otp: ''}); setLoginError(''); }} className="text-xs text-slate-400 hover:text-slate-800 font-bold py-2 uppercase tracking-wider transition-colors">
                    ยกเลิกและย้อนกลับ
                  </button>
                </div>
              </div>
            )}
          </form>
        </div>
        
        <CustomModal />
        {!isWindowFocused && (
          <div className="fixed inset-0 bg-[#0B1120]/95 backdrop-blur-[30px] z-[9999] flex flex-col items-center justify-center text-white transition-all duration-500 ease-in-out animate-in fade-in zoom-in-95">
            <div className="relative mb-8"><div className="absolute inset-0 bg-emerald-500 blur-[60px] opacity-30 animate-pulse"></div><div className="bg-slate-900 p-8 rounded-full border border-slate-700 relative z-10 shadow-2xl"><MonitorOff className="w-20 h-20 text-emerald-400" /></div></div>
            <h2 className="text-4xl md:text-5xl font-black tracking-[0.4em] text-white mb-4 drop-shadow-lg text-center">ม่านบังตาความปลอดภัย</h2>
            <div className="bg-emerald-900/30 border border-emerald-500/30 px-6 py-2 rounded-full mb-6"><div className="text-emerald-400 font-bold text-sm tracking-widest uppercase flex items-center"><span className="w-2 h-2 rounded-full bg-emerald-400 mr-2 animate-ping block"></span> ป้องกันการมองเห็นด้านข้าง</div></div>
            <p className="text-slate-400 font-medium text-center text-sm md:text-base tracking-wider leading-relaxed max-w-md">หน้าจอถูกซ่อนอัตโนมัติเนื่องจากคุณสลับไปใช้งานโปรแกรมอื่น<br/><br/><span className="text-white font-bold opacity-80">คลิกที่หน้าต่างเพื่อปลดล็อก</span></p>
          </div>
        )}
        {screenshotWarning && (
          <div className="fixed inset-0 bg-red-950/98 backdrop-blur-[40px] z-[10000] flex flex-col items-center justify-center text-white transition-all duration-300 animate-in fade-in zoom-in-95">
            <div className="bg-red-900 p-10 rounded-full mb-10 border-4 border-red-500 animate-pulse shadow-[0_0_100px_rgba(220,38,38,0.8)] relative"><div className="absolute inset-0 rounded-full border border-red-400 animate-ping"></div><CameraOff className="w-28 h-28 text-white" /></div>
            <h2 className="text-5xl md:text-7xl font-black tracking-[0.2em] text-red-500 mb-6 drop-shadow-[0_0_30px_rgba(239,68,68,1)] text-center">ห้ามบันทึกภาพ</h2>
            <div className="bg-red-900/50 border border-red-500/50 p-6 rounded-2xl max-w-2xl backdrop-blur-md"><p className="text-red-100 font-bold text-lg md:text-xl text-center tracking-wide uppercase leading-relaxed">การพยายามบันทึกภาพหน้าจอถือเป็นการละเมิดนโยบายความปลอดภัย<br/>ข้อมูลเหตุการณ์นี้ได้ถูกบันทึกลงระบบแล้ว</p></div>
            <button onClick={() => setScreenshotWarning(false)} className="mt-12 px-10 py-4 bg-red-800 hover:bg-red-600 border-2 border-red-500 rounded-2xl text-[15px] font-black tracking-[0.2em] transition-all duration-300 active:scale-95 shadow-xl hover:shadow-red-500/50 hover:-translate-y-1">รับทราบและปิดแจ้งเตือน</button>
          </div>
        )}
      </div>
    );
  }

  // --- Main App Logic (Dashboard & Admin) ---
  const watermarkText = `ZENSHOP • SECURE • IP:${clientIp} • SESSION:${sessionId} • HASH:${hashKey} • `;
  const watermarks = Array(35).fill(watermarkText);

  const getRelativeTime = (timestamp) => {
    if (!timestamp) return '-'; const diff = Math.floor((Date.now() - timestamp) / 60000); 
    if (diff < 1) return 'เพิ่งเกิดขึ้น'; if (diff < 60) return `${diff} นาทีที่แล้ว`;
    const hours = Math.floor(diff / 60); if (hours < 24) return `${hours} ชั่วโมงที่แล้ว`; return new Date(timestamp).toLocaleDateString('th-TH');
  };

  const renderLogIcon = (iconName) => {
    switch(iconName) {
      case 'Save': return <div className="bg-indigo-100 p-1.5 rounded-lg mr-3 shadow-sm"><Save className="w-4 h-4 text-indigo-600" /></div>;
      case 'Trash': return <div className="bg-red-100 p-1.5 rounded-lg mr-3 shadow-sm"><Trash2 className="w-4 h-4 text-red-600" /></div>;
      case 'Update': return <div className="bg-blue-100 p-1.5 rounded-lg mr-3 shadow-sm"><ActivitySquare className="w-4 h-4 text-blue-600" /></div>;
      case 'User': return <div className="bg-emerald-100 p-1.5 rounded-lg mr-3 shadow-sm"><UserCog className="w-4 h-4 text-emerald-600" /></div>;
      case 'Alert': return <div className="bg-red-100 p-1.5 rounded-lg mr-3 shadow-sm"><AlertTriangle className="w-4 h-4 text-red-600" /></div>;
      default: return <div className="bg-slate-100 p-1.5 rounded-lg mr-3 shadow-sm"><ShieldCheck className="w-4 h-4 text-slate-600" /></div>;
    }
  };

  return (
    <div className="min-h-screen bg-[#F8FAFC] text-slate-800 p-4 md:p-6 lg:p-8 relative overflow-hidden select-none" style={{ fontFamily: "'Sarabun', sans-serif" }} onContextMenu={(e) => e.preventDefault()} onCopy={(e) => e.preventDefault()} onCut={(e) => e.preventDefault()}>
      <style>{`@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&display=swap'); ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 20px; border: 2px solid #F8FAFC; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }`}</style>
      
      <div className="fixed inset-[-50%] pointer-events-none z-[100] flex flex-wrap items-center justify-center overflow-hidden opacity-[0.025] rotate-[-25deg] mix-blend-multiply select-none">
        {watermarks.map((text, i) => <span key={i} className="text-2xl font-mono font-black whitespace-nowrap p-10 text-slate-900">{text}</span>)}
      </div>

      <div className="w-full mx-auto space-y-8 animate-in fade-in duration-700 relative z-10" style={{ maxWidth: '1500px' }}>
        {currentPage === 'dashboard' ? (
          <div className="animate-in slide-in-from-left-8 fade-in duration-500 ease-out">
            {/* Header Dashboard */}
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center bg-white/80 backdrop-blur-xl p-5 md:px-8 rounded-[1.5rem] shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-slate-200/60 relative z-20 transition-all duration-300 mb-8">
              <div className="flex items-center space-x-5">
                <div className="bg-slate-900 p-4 rounded-2xl text-emerald-400 shadow-xl shadow-slate-900/20 border border-slate-800 relative group overflow-hidden">
                  <div className="absolute inset-0 bg-emerald-400/10 blur-xl group-hover:bg-emerald-400/20 transition-colors duration-500"></div>
                  <ShieldCheck className="w-7 h-7 relative z-10" />
                </div>
                <div>
                  <h1 className="text-2xl font-black text-slate-900 tracking-tight">ZenshopTHA CRM<span className="text-emerald-500">.</span></h1>
                  <div className="flex items-center text-emerald-600 text-[11px] font-bold mt-1 tracking-widest uppercase">
                    <span className="w-2 h-2 rounded-full bg-emerald-500 mr-2 animate-pulse shadow-[0_0_5px_rgba(16,185,129,0.8)] block"></span> มาตรการความปลอดภัยสูงสุด (ระดับ 4)
                  </div>
                  <div className="flex items-center text-[10px] text-slate-400 mt-1 font-mono font-semibold tracking-wider"><Fingerprint className="w-3 h-3 mr-1.5" /> ID: {sessionId} <span className="mx-2 opacity-50">|</span> <Lock className="w-3 h-3 mr-1.5" /> ENC: AES-256</div>
                </div>
              </div>
              <div className="mt-5 md:mt-0 flex flex-col sm:flex-row items-end sm:items-center gap-3 w-full md:w-auto">
                <div className={`flex items-center px-4 py-2.5 rounded-xl border-2 text-xs font-bold uppercase tracking-wider shadow-sm transition-all duration-300 ${sessionTimeLeft < 60 ? 'bg-red-50 text-red-600 border-red-200 animate-pulse' : 'bg-slate-50 text-slate-600 border-slate-100'}`}><Timer className="w-4 h-4 mr-2" /> หมดเวลาใน: {Math.floor(sessionTimeLeft / 60)}:{(sessionTimeLeft % 60).toString().padStart(2, '0')}</div>
                <button onClick={() => setCurrentPage('admin')} className="flex items-center px-5 py-2.5 bg-indigo-50 hover:bg-indigo-100 border-2 border-indigo-100 text-indigo-700 rounded-xl text-sm font-bold transition-all duration-300 shadow-sm active:scale-95 group hover:-translate-y-0.5"><UserCog className="w-4 h-4 mr-2 group-hover:scale-110 transition-transform duration-300" /> ข้อมูลแอดมิน</button>
                <button onClick={() => setIsPrivacyMode(!isPrivacyMode)} className={`flex items-center px-5 py-2.5 rounded-xl border-2 text-sm font-bold transition-all duration-300 shadow-sm active:scale-95 hover:-translate-y-0.5 ${isPrivacyMode ? 'bg-slate-900 border-slate-900 text-white shadow-slate-900/20 hover:bg-slate-800' : 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'}`}>{isPrivacyMode ? <EyeOff className="w-4 h-4 mr-2" /> : <Eye className="w-4 h-4 mr-2" />} {isPrivacyMode ? 'โหมดซ่อนข้อมูล: เปิด' : 'โหมดซ่อนข้อมูล: ปิด'}</button>
                <button onClick={() => handleLogout(false)} className="flex items-center px-5 py-2.5 bg-red-50 hover:bg-red-100 border-2 border-red-100 text-red-600 rounded-xl text-sm font-bold transition-all duration-300 active:scale-95 shadow-sm group hover:-translate-y-0.5"><LogOut className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform duration-300" /> ออกจากระบบ</button>
              </div>
            </div>

            <div className="grid grid-cols-1 xl:grid-cols-12 gap-8">
              {/* Form Sidebar */}
              <div className="xl:col-span-3">
                <div className="bg-white rounded-[1.5rem] shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-slate-200/60 overflow-hidden sticky top-8 relative z-20 transition-all duration-300 hover:shadow-[0_8px_40px_rgb(0,0,0,0.08)]">
                  <div className="bg-slate-50/80 border-b border-slate-100/50 px-7 py-5 flex items-center justify-between"><h2 className="text-[13px] font-black text-slate-800 flex items-center uppercase tracking-widest"><span className="bg-emerald-100 p-1.5 rounded-md mr-3 text-emerald-600 inline-flex items-center shadow-sm"><User className="w-4 h-4" /></span> เพิ่มข้อมูลใหม่</h2></div>
                  <div className="p-7">
                    <form onSubmit={handleSubmit} className="space-y-5">
                      <div className="space-y-5">
                        <div className="space-y-1.5"><label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider pl-1">ชื่อลูกค้า / บริษัท</label><input type="text" name="name" required value={formData.name} onChange={handleChange} className="w-full rounded-xl border-slate-200 border-2 px-4 py-3 text-sm font-medium focus:ring-4 focus:ring-emerald-500/10 focus:border-emerald-500 outline-none bg-slate-50 focus:bg-white shadow-sm transition-all duration-300" placeholder="ระบุชื่อลูกค้า..." /></div>
                        <div className="grid grid-cols-2 gap-4">
                          <div className="space-y-1.5"><label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider pl-1">รหัสอ้างอิง</label><input type="text" name="code" value={formData.code} onChange={handleChange} className="w-full rounded-xl border-slate-200 border-2 px-4 py-3 text-sm font-medium focus:ring-4 focus:ring-emerald-500/10 focus:border-emerald-500 outline-none bg-slate-50 focus:bg-white shadow-sm transition-all duration-300 font-mono" placeholder="CUST-001" /></div>
                          <div className="space-y-1.5"><label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider pl-1">วันที่</label><input type="date" name="orderDate" required value={formData.orderDate} onChange={handleChange} className="w-full rounded-xl border-slate-200 border-2 px-4 py-3 text-sm font-medium focus:ring-4 focus:ring-emerald-500/10 focus:border-emerald-500 outline-none bg-slate-50 focus:bg-white shadow-sm transition-all duration-300" /></div>
                        </div>
                        <div className="space-y-1.5"><label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider pl-1">เลขที่เอกสาร</label><input type="text" name="orderNumber" required value={formData.orderNumber} onChange={handleChange} className="w-full rounded-xl border-slate-200 border-2 px-4 py-3 text-sm font-medium focus:ring-4 focus:ring-emerald-500/10 focus:border-emerald-500 outline-none bg-slate-50 focus:bg-white shadow-sm transition-all duration-300 font-mono" placeholder="INV-XXXX" /></div>
                        <div className="space-y-1.5"><label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider pl-1 flex items-center"><Package className="w-3.5 h-3.5 mr-1.5 text-indigo-500" /> รายการสินค้า</label><input type="text" name="product" required value={formData.product} onChange={handleChange} className="w-full rounded-xl border-slate-200 border-2 px-4 py-3 text-sm font-medium focus:ring-4 focus:ring-emerald-500/10 focus:border-emerald-500 outline-none bg-slate-50 focus:bg-white shadow-sm transition-all duration-300" placeholder="ระบุรายการสินค้า..." /></div>
                        <div className="space-y-1.5"><label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider pl-1 flex items-center"><Facebook className="w-3.5 h-3.5 mr-1.5 text-blue-500" /> ชื่อ Facebook</label><input type="text" name="facebookName" value={formData.facebookName} onChange={handleChange} className="w-full rounded-xl border-slate-200 border-2 px-4 py-3 text-sm font-medium focus:ring-4 focus:ring-emerald-500/10 focus:border-emerald-500 outline-none bg-slate-50 focus:bg-white shadow-sm transition-all duration-300" placeholder="ระบุชื่อบัญชี..." /></div>
                        <div className="grid grid-cols-2 gap-4">
                          <div className="space-y-1.5"><label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider pl-1">สถานะ</label><div className="relative"><select name="actionStatus" value={formData.actionStatus} onChange={handleChange} className="appearance-none w-full rounded-xl border-slate-200 border-2 px-4 py-3 text-[13px] font-bold focus:ring-4 focus:ring-emerald-500/10 focus:border-emerald-500 outline-none bg-slate-50 focus:bg-white shadow-sm transition-all duration-300 cursor-pointer text-slate-700"><option value="ชำระเงินแล้ว">ชำระเงินแล้ว</option><option value="กำลังดำเนินการ">กำลังดำเนินการ</option><option value="สำเร็จ">สำเร็จ</option></select><ChevronDown className="absolute right-3 top-3.5 w-4 h-4 text-slate-400 pointer-events-none" /></div></div>
                          <div className="space-y-1.5"><label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider pl-1">ยอดเงิน (THB)</label><input type="number" name="amount" required min="0" step="0.01" value={formData.amount} onChange={handleChange} className="w-full rounded-xl border-slate-200 border-2 px-4 py-3 text-sm font-medium focus:ring-4 focus:ring-emerald-500/10 focus:border-emerald-500 outline-none bg-slate-50 focus:bg-white shadow-sm transition-all duration-300 font-mono text-right" placeholder="0.00" /></div>
                        </div>
                      </div>
                      <button type="submit" className="w-full mt-8 bg-slate-900 hover:bg-emerald-600 text-white py-4 px-4 rounded-xl text-[14px] font-black tracking-widest transition-all duration-300 shadow-[0_8px_20px_rgba(0,0,0,0.12)] hover:shadow-[0_8px_25px_rgba(16,185,129,0.3)] flex items-center justify-center active:scale-[0.98] transform hover:-translate-y-1"><Save className="w-4 h-4 mr-2.5" /> บันทึกข้อมูลแบบเข้ารหัส</button>
                    </form>
                  </div>
                </div>
              </div>

              {/* Data Table */}
              <div className="xl:col-span-9 relative z-20">
                <div className="bg-white rounded-[1.5rem] shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-slate-200/60 overflow-hidden flex flex-col h-full transition-all duration-300 hover:shadow-[0_8px_40px_rgb(0,0,0,0.08)]">
                  <div className="px-7 py-5 border-b border-slate-100/50 flex flex-col sm:flex-row justify-between items-center gap-5 bg-slate-50/80">
                    <div className="flex items-center text-slate-800">
                      <svg className="w-5 h-5 mr-3 text-indigo-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5V19A9 3 0 0 0 21 19V5"></path><path d="M3 12A9 3 0 0 0 21 12"></path></svg>
                      <span className="text-[15px] font-black tracking-wide uppercase mr-4">ฐานข้อมูลลูกค้า</span>
                      <span className="bg-slate-900 text-white text-[11px] py-1 px-3 rounded-full font-bold shadow-sm transition-all duration-300">{records.length} รายการ</span>
                    </div>
                    <div className="relative w-full sm:w-[350px] group">
                      <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><Search className="h-4 w-4 text-slate-400 group-focus-within:text-indigo-600 transition-colors duration-300" /></div>
                      <input type="text" placeholder="ค้นหาด้วยชื่อ, รหัส, เลขที่เอกสาร หรือ สินค้า..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="pl-11 w-full rounded-full border-slate-200 border-2 bg-white py-2.5 text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all duration-300 shadow-sm" />
                    </div>
                  </div>

                  <div className="overflow-x-auto p-0 m-0">
                    <table className="w-full text-left border-collapse min-w-[950px]">
                      <thead>
                        <tr className="bg-white border-b border-slate-100 text-[10px] text-slate-400 font-extrabold uppercase tracking-widest shadow-sm relative z-10">
                          <th className="px-7 py-5 w-48">เลขที่เอกสาร / วันที่</th><th className="px-7 py-5">ข้อมูลลูกค้า</th><th className="px-7 py-5 w-52 text-center">สถานะดำเนินการ</th><th className="px-7 py-5 text-right w-44">จำนวนเงิน {isPrivacyMode && <Lock className="inline w-3 h-3 ml-1.5 text-slate-300 transition-opacity duration-300"/>}</th><th className="px-7 py-5 text-center w-32">จัดการ</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-slate-50">
                        {filteredRecords.length > 0 ? (
                          filteredRecords.map((record) => (
                            <tr key={record.id} className={`hover:bg-slate-50/80 transition-all duration-300 group ${isPrivacyMode ? 'blur-[0.8px] hover:blur-none' : ''}`}>
                              <td className="px-7 py-5 align-middle">
                                <div className="font-mono text-[13px] font-black text-indigo-900 bg-indigo-50 border border-indigo-100 px-2.5 py-1 rounded-md inline-block shadow-sm transition-colors duration-300 group-hover:bg-indigo-100">{record.orderNumber}</div>
                                <div className="text-[11px] text-slate-500 mt-2 flex items-center font-medium"><Calendar className="w-3.5 h-3.5 mr-1.5 opacity-70" />{new Date(record.orderDate).toLocaleDateString('th-TH', { year: 'numeric', month: 'short', day: 'numeric' })}</div>
                              </td>
                              <td className="px-7 py-5 align-middle">
                                <div className="flex items-center transition-transform duration-300 group-hover:translate-x-1"><span className="font-bold text-slate-800 text-[15px]">{maskData(record.name, 'name')}</span>{record.code && <span className="ml-3 px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-[10px] border border-slate-200 font-mono font-bold tracking-wide shadow-sm">{record.code}</span>}</div>
                                <div className="text-xs text-slate-500 mt-2 flex items-center font-medium transition-transform duration-300 group-hover:translate-x-1"><Facebook className="w-3.5 h-3.5 mr-1.5 opacity-70 text-blue-500" />{maskData(record.facebookName, 'facebook') || '-'}</div>
                                {record.product && (<div className="text-xs text-slate-700 mt-2.5 flex items-center font-semibold bg-slate-100 px-2.5 py-1.5 rounded-lg w-fit border border-slate-200 shadow-sm transition-transform duration-300 group-hover:translate-x-1"><Package className="w-3.5 h-3.5 mr-2 text-slate-500" />{isPrivacyMode ? maskData(record.product, 'product') : record.product}</div>)}
                              </td>
                              <td className="px-7 py-5 align-middle text-center">
                                <div className="relative inline-block w-full max-w-[150px]">
                                  <div className={`absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none ${getStatusStyle(record.actionStatus).split(' ')[1]}`}>{getStatusIcon(record.actionStatus)}</div>
                                  <select value={record.actionStatus} onChange={(e) => handleStatusChange(record.id, e.target.value)} className={`appearance-none w-full py-2.5 pl-10 pr-8 rounded-xl text-[12px] font-black border-2 cursor-pointer focus:outline-none transition-all duration-300 shadow-sm hover:shadow-md focus:ring-4 ${getStatusStyle(record.actionStatus)}`}>
                                    <option value="ชำระเงินแล้ว">ชำระเงินแล้ว</option><option value="กำลังดำเนินการ">กำลังดำเนินการ</option><option value="สำเร็จ">สำเร็จ</option>
                                  </select>
                                  <ChevronDown className={`absolute right-3 top-3 w-4 h-4 pointer-events-none transition-transform duration-300 ${getStatusStyle(record.actionStatus).split(' ')[1]}`} />
                                </div>
                              </td>
                              <td className="px-7 py-5 align-middle text-right"><span className="font-mono font-black text-slate-900 text-[15px] transition-all duration-300">{isPrivacyMode ? maskData(record.amount, 'amount') : Number(record.amount).toLocaleString('th-TH', { minimumFractionDigits: 2 })}</span></td>
                              <td className="px-7 py-5 align-middle text-center">
                                <div className="flex items-center justify-center gap-2 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-300">
                                  <button onClick={() => setViewRecordData(record)} className="p-2.5 text-indigo-400 hover:text-indigo-700 hover:bg-indigo-50 rounded-xl transition-all duration-300 transform hover:scale-110 active:scale-95" title="ดูข้อมูลทั้งหมด">
                                    <Eye className="w-5 h-5" />
                                  </button>
                                  <button onClick={() => handleDelete(record.id)} className="p-2.5 text-slate-300 hover:text-red-600 hover:bg-red-50 rounded-xl transition-all duration-300 transform hover:scale-110 active:scale-95" title="ลบรายการ">
                                    <Trash2 className="w-5 h-5" />
                                  </button>
                                </div>
                              </td>
                            </tr>
                          ))
                        ) : (
                          <tr>
                            <td colSpan="5" className="px-7 py-24 text-center text-slate-400">
                              <div className="flex flex-col items-center justify-center animate-in fade-in zoom-in duration-500">
                                <div className="bg-slate-50 p-5 rounded-full mb-5 border border-slate-100 shadow-sm"><HardDrive className="w-10 h-10 text-slate-300" /></div>
                                <p className="text-[15px] font-bold text-slate-600 tracking-wide uppercase">ไม่พบข้อมูลในระบบ</p>
                                <p className="text-xs mt-2 text-slate-400 font-medium">กรุณากรอกข้อมูลด้านซ้ายเพื่อเพิ่มรายการใหม่ หรือลองเปลี่ยนคำค้นหา</p>
                              </div>
                            </td>
                          </tr>
                        )}
                      </tbody>
                    </table>
                  </div>
                  
                  <div className="bg-slate-900 px-7 py-4 border-t border-slate-800 text-xs font-bold text-slate-400 flex justify-between items-center uppercase tracking-widest transition-all duration-300">
                    <span>ยอดรวมที่แสดงได้: <span className="font-black text-white font-mono ml-2 transition-all duration-300">{isPrivacyMode ? maskData('', 'amount') : '฿' + records.reduce((sum, r) => sum + Number(r.amount), 0).toLocaleString('th-TH', { minimumFractionDigits: 2 })}</span></span>
                    <span className="flex items-center text-emerald-400 bg-emerald-900/30 px-3 py-1.5 rounded-lg border border-emerald-800/50"><ShieldCheck className="w-4 h-4 mr-2" /> การเข้ารหัส E2EE กำลังทำงาน</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ) : (
          <div className="animate-in slide-in-from-right-8 fade-in duration-500 ease-out max-w-[1600px] mx-auto space-y-6">
            <div className="bg-white p-5 md:px-8 rounded-[1.5rem] shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-slate-200/60 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 backdrop-blur-md transition-all duration-300 hover:shadow-[0_8px_40px_rgb(0,0,0,0.08)]">
              <div className="flex items-center">
                <div className="bg-gradient-to-br from-indigo-600 to-purple-700 p-3.5 rounded-xl text-white mr-5 shadow-lg shadow-indigo-200"><UserCog className="w-6 h-6" /></div>
                <div>
                  <h2 className="text-xl font-black text-slate-900 tracking-tight">ศูนย์ควบคุมความปลอดภัยขั้นสูง</h2>
                  <p className="text-[13px] font-bold text-slate-500 mt-1 flex items-center tracking-wide uppercase"><ShieldCheck className="w-3.5 h-3.5 mr-1.5 text-indigo-500" /> ตรวจสอบพฤติกรรมและสิทธิ์ผู้ใช้งาน</p>
                </div>
              </div>
              <button onClick={() => setCurrentPage('dashboard')} className="flex items-center px-5 py-3 bg-slate-50 hover:bg-slate-100 border border-slate-200 text-slate-700 rounded-xl text-sm font-bold transition-all duration-300 active:scale-95 shadow-sm group hover:-translate-y-0.5"><ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform duration-300" /> กลับสู่แผงควบคุมหลัก</button>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
              {/* Form Admin */}
              <div className="lg:col-span-1 space-y-8">
                <div className="bg-white rounded-[1.5rem] shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-slate-200/60 overflow-hidden transition-all duration-300 hover:shadow-[0_8px_40px_rgb(0,0,0,0.08)]">
                  <div className="bg-slate-50/80 border-b border-slate-100/50 px-7 py-5 flex items-center justify-between"><div className="flex items-center"><User className="w-4 h-4 mr-2.5 text-indigo-600" /><h3 className="text-sm font-bold text-slate-800 uppercase tracking-widest">ข้อมูลบุคลากร</h3></div></div>
                  <div className="p-7">
                    <form onSubmit={handleAdminSubmit} className="space-y-5">
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-1.5"><label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider pl-1">ชื่อ</label><input type="text" name="firstName" required value={adminFormData.firstName} onChange={handleAdminChange} className="w-full rounded-xl border-slate-200 border-2 px-4 py-3 text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none bg-slate-50 focus:bg-white transition-all duration-300 shadow-sm" placeholder="กรอกชื่อ" /></div>
                        <div className="space-y-1.5"><label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider pl-1">นามสกุล</label><input type="text" name="lastName" required value={adminFormData.lastName} onChange={handleAdminChange} className="w-full rounded-xl border-slate-200 border-2 px-4 py-3 text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none bg-slate-50 focus:bg-white transition-all duration-300 shadow-sm" placeholder="กรอกนามสกุล" /></div>
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-1.5"><label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider pl-1">ชื่อเล่น</label><input type="text" name="nickname" value={adminFormData.nickname} onChange={handleAdminChange} className="w-full rounded-xl border-slate-200 border-2 px-4 py-3 text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none bg-slate-50 focus:bg-white transition-all duration-300 shadow-sm" placeholder="ระบุชื่อเล่น" /></div>
                        <div className="space-y-1.5"><label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider pl-1">อายุ (ปี)</label><input type="number" name="age" value={adminFormData.age} onChange={handleAdminChange} className="w-full rounded-xl border-slate-200 border-2 px-4 py-3 text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none bg-slate-50 focus:bg-white transition-all duration-300 shadow-sm font-mono" placeholder="--" /></div>
                      </div>
                      <div className="space-y-1.5"><label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider pl-1">วันที่เข้าร่วม</label><input type="date" name="startDate" required value={adminFormData.startDate} onChange={handleAdminChange} className="w-full rounded-xl border-slate-200 border-2 px-4 py-3 text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none bg-slate-50 focus:bg-white transition-all duration-300 shadow-sm" /></div>
                      <div className="space-y-1.5">
                        <label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider pl-1">ระดับสิทธิ์ (Clearance)</label>
                        <div className="relative">
                          <select name="role" value={adminFormData.role} onChange={handleAdminChange} className="appearance-none w-full rounded-xl border-slate-200 border-2 px-4 py-3 text-sm focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none bg-slate-50 focus:bg-white transition-all duration-300 shadow-sm cursor-pointer font-bold text-indigo-700">
                            <option value="Super Admin">Super Admin (สูงสุด)</option><option value="Manager">Manager (ผู้จัดการ)</option><option value="Staff">Staff (พนักงาน)</option>
                          </select>
                          <ChevronDown className="absolute right-4 top-3.5 w-4 h-4 text-slate-400 pointer-events-none" />
                        </div>
                      </div>
                      <button type="submit" className="w-full mt-8 bg-indigo-600 hover:bg-indigo-700 text-white py-3.5 px-4 rounded-xl text-[14px] font-bold tracking-wide transition-all duration-300 shadow-lg shadow-indigo-200 flex items-center justify-center active:scale-[0.98] transform hover:-translate-y-1"><Save className="w-4 h-4 mr-2" /> ปรับปรุงข้อมูลส่วนบุคคล</button>
                    </form>
                  </div>
                </div>
              </div>

              {/* Logs */}
              <div className="lg:col-span-2">
                <div className="bg-white rounded-[1.5rem] shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-slate-200/60 overflow-hidden h-full flex flex-col transition-all duration-300 hover:shadow-[0_8px_40px_rgb(0,0,0,0.08)]">
                  <div className="bg-slate-50/80 border-b border-slate-100/50 px-7 py-5 flex justify-between items-center">
                    <div className="flex items-center"><Terminal className="w-4 h-4 mr-2.5 text-slate-900" /><h3 className="text-sm font-bold text-slate-800 uppercase tracking-widest">บันทึกกิจกรรมความปลอดภัย</h3></div>
                    <div className="flex items-center gap-2">
                      {isSyncing && <RefreshCw className="w-3 h-3 text-indigo-500 animate-spin" />}
                      <span className="text-[10px] bg-red-50 text-red-600 font-extrabold px-2.5 py-1 rounded border border-red-100 uppercase tracking-widest flex items-center shadow-sm"><span className="w-1.5 h-1.5 rounded-full bg-red-500 mr-1.5 animate-pulse block"></span> ตรวจสอบแบบเรียลไทม์</span>
                    </div>
                  </div>
                  <div className="p-0 flex-1 overflow-auto bg-white relative">
                    <table className="w-full text-left">
                      <thead className="bg-white/95 backdrop-blur-sm sticky top-0 border-b border-slate-100 text-[10px] uppercase text-slate-400 font-extrabold tracking-widest z-10 shadow-sm"><tr><th className="px-7 py-4 w-32">เวลา</th><th className="px-7 py-4">เหตุการณ์</th><th className="px-7 py-4 text-right">สถานะ</th></tr></thead>
                      <tbody className="divide-y divide-slate-50">
                        {auditLogs.length > 0 ? (
                          auditLogs.slice(0, 15).map((log) => (
                            <tr key={log.id} className="hover:bg-slate-50/80 transition-all duration-300 group">
                              <td className="px-7 py-4.5 text-slate-400 font-mono text-[12px] whitespace-nowrap">{getRelativeTime(log.timestamp)}</td>
                              <td className="px-7 py-4.5 font-semibold text-slate-700 flex items-center text-[13px] transition-transform duration-300 group-hover:translate-x-1">{renderLogIcon(log.icon)} {log.event}</td>
                              <td className="px-7 py-4.5 text-right"><span className={`font-bold text-[11px] px-2.5 py-1.5 rounded-lg border uppercase tracking-wider ${log.status === 'Blocked' ? 'text-red-600 bg-red-50 border-red-100 shadow-[0_2px_10px_rgba(220,38,38,0.1)]' : 'text-emerald-600 bg-emerald-50 border-emerald-100'}`}>{log.status}</span></td>
                            </tr>
                          ))
                        ) : (
                          <tr><td colSpan="3" className="px-7 py-16 text-center text-slate-400"><ActivitySquare className="w-10 h-10 mx-auto mb-3 opacity-20" /><p className="font-medium text-sm tracking-wide">ยังไม่มีประวัติการใช้งาน</p></td></tr>
                        )}
                      </tbody>
                    </table>
                  </div>
                  <div className="bg-slate-900 px-7 py-4 border-t border-slate-800 text-[11px] text-slate-400 flex justify-between items-center font-mono">
                    <span className="tracking-widest">แสดง 15 เหตุการณ์ล่าสุด</span><span className="flex items-center text-emerald-400"><Zap className="w-3.5 h-3.5 mr-1.5 fill-current" /> เชื่อมต่อกับระบบล็อกอย่างปลอดภัย</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Footer */}
        <div className="mt-8 flex justify-center relative z-20 pb-6">
          <div className="bg-white/80 backdrop-blur-xl px-7 py-4 rounded-[1.5rem] shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-slate-200/60 flex flex-col sm:flex-row items-center gap-4 sm:gap-6 text-slate-700 transition-all duration-300 hover:shadow-md hover:-translate-y-1">
            <div className="flex items-center"><div className="bg-slate-900 p-2.5 rounded-xl mr-3 shadow-sm text-emerald-400"><Clock className="w-4 h-4" /></div><span className="text-[13px] sm:text-[14px] font-bold tracking-wide uppercase">{currentTime.toLocaleDateString('th-TH', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}</span></div>
            <div className="hidden sm:block w-px h-8 bg-slate-200"></div>
            <div className="flex items-center bg-slate-50 pl-4 pr-5 py-2 rounded-xl border border-slate-100 shadow-inner"><span className="text-[11px] font-black text-slate-400 mr-3 uppercase tracking-widest">เวลาเครือข่าย</span><span className="text-[16px] font-mono font-black text-slate-900 tracking-wider">{currentTime.toLocaleTimeString('th-TH', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}</span></div>
          </div>
        </div>

        {/* Modals & Alerts */}
        <CustomModal />

        {/* --- Modal ดูข้อมูลลูกค้าแบบละเอียด (View Details) --- */}
        {viewRecordData && (
          <div className="fixed inset-0 bg-[#0B1120]/80 backdrop-blur-md z-[250] flex items-center justify-center p-4 animate-in fade-in duration-300 ease-out">
            <div className="bg-white rounded-[1.5rem] shadow-[0_20px_80px_-15px_rgba(0,0,0,0.5)] w-full max-w-2xl overflow-hidden animate-in zoom-in-95 duration-300 border border-slate-200">
              <div className="bg-slate-900 px-8 py-6 flex items-center justify-between">
                <div className="flex items-center text-white">
                  <FileText className="w-6 h-6 mr-3 text-emerald-400" />
                  <h3 className="text-xl font-bold tracking-tight">รายละเอียดข้อมูลลูกค้า</h3>
                </div>
                <button onClick={() => setViewRecordData(null)} className="text-slate-400 hover:text-white transition-colors bg-slate-800 hover:bg-slate-700 p-2 rounded-xl">
                  <X className="w-5 h-5" />
                </button>
              </div>
              <div className="p-8">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
                  <div className="space-y-1.5">
                    <p className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">ชื่อลูกค้า / บริษัท</p>
                    <p className="text-[16px] font-black text-slate-800">{viewRecordData.name}</p>
                  </div>
                  <div className="space-y-1.5">
                    <p className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">รหัสอ้างอิง</p>
                    <p className="text-[15px] font-mono font-bold text-slate-800 bg-slate-100 px-3 py-1 rounded-lg w-fit border border-slate-200 shadow-sm">{viewRecordData.code || '-'}</p>
                  </div>
                  <div className="space-y-1.5">
                    <p className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">วันที่ทำรายการ</p>
                    <p className="text-[15px] font-medium text-slate-800 flex items-center"><Calendar className="w-4 h-4 mr-2 text-indigo-500" />{new Date(viewRecordData.orderDate).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
                  </div>
                  <div className="space-y-1.5">
                    <p className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">เลขที่เอกสาร</p>
                    <p className="text-[15px] font-mono font-black text-indigo-700">{viewRecordData.orderNumber}</p>
                  </div>
                  <div className="col-span-1 md:col-span-2 space-y-2">
                    <p className="text-[11px] font-bold text-slate-400 uppercase tracking-widest flex items-center"><Package className="w-3.5 h-3.5 mr-1.5 text-indigo-500" /> รายการสินค้า</p>
                    <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 text-[15px] font-semibold text-slate-700 shadow-inner">
                      {viewRecordData.product}
                    </div>
                  </div>
                  <div className="space-y-1.5">
                    <p className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">ช่องทางติดต่อ (Facebook)</p>
                    <p className="text-[15px] font-bold text-blue-600 flex items-center"><Facebook className="w-4 h-4 mr-2" />{viewRecordData.facebookName || 'ไม่ได้ระบุ'}</p>
                  </div>
                  <div className="space-y-1.5">
                    <p className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">สถานะดำเนินการ</p>
                    <span className={`inline-block px-4 py-1.5 rounded-xl text-sm font-bold border shadow-sm ${getStatusStyle(viewRecordData.actionStatus)}`}>{viewRecordData.actionStatus}</span>
                  </div>
                  <div className="col-span-1 md:col-span-2 pt-6 mt-2 border-t border-slate-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                    <div className="flex items-center text-emerald-600 bg-emerald-50 px-3 py-1.5 rounded-lg border border-emerald-100">
                      <ShieldCheck className="w-4 h-4 mr-1.5" /> 
                      <span className="text-[11px] font-black uppercase tracking-widest">Verified Encrypted Data</span>
                    </div>
                    <div className="text-right">
                      <p className="text-[11px] font-bold text-slate-500 uppercase tracking-widest mb-1">ยอดเงินสุทธิ (THB)</p>
                      <p className="text-3xl font-black text-emerald-600 font-mono tracking-tight">฿{Number(viewRecordData.amount).toLocaleString('th-TH', { minimumFractionDigits: 2 })}</p>
                    </div>
                  </div>
                </div>
              </div>
              <div className="bg-slate-50/80 px-8 py-5 flex justify-end border-t border-slate-200">
                <button onClick={() => setViewRecordData(null)} className="px-8 py-3 text-[14px] font-black tracking-widest text-white bg-slate-900 hover:bg-emerald-600 rounded-xl transition-all duration-300 shadow-[0_8px_20px_rgba(0,0,0,0.12)] hover:shadow-[0_8px_25px_rgba(16,185,129,0.3)] hover:-translate-y-1 active:scale-95">
                  ปิดหน้าต่าง
                </button>
              </div>
            </div>
          </div>
        )}

        {!isWindowFocused && (
          <div className="fixed inset-0 bg-[#0B1120]/95 backdrop-blur-[30px] z-[9999] flex flex-col items-center justify-center text-white transition-all duration-500 ease-in-out animate-in fade-in zoom-in-95">
            <div className="relative mb-8"><div className="absolute inset-0 bg-emerald-500 blur-[60px] opacity-30 animate-pulse"></div><div className="bg-slate-900 p-8 rounded-full border border-slate-700 relative z-10 shadow-2xl"><MonitorOff className="w-20 h-20 text-emerald-400" /></div></div>
            <h2 className="text-4xl md:text-5xl font-black tracking-[0.4em] text-white mb-4 drop-shadow-lg text-center">ม่านบังตาความปลอดภัย</h2>
            <div className="bg-emerald-900/30 border border-emerald-500/30 px-6 py-2 rounded-full mb-6"><div className="text-emerald-400 font-bold text-sm tracking-widest uppercase flex items-center"><span className="w-2 h-2 rounded-full bg-emerald-400 mr-2 animate-ping block"></span> ป้องกันการมองเห็นด้านข้าง</div></div>
            <p className="text-slate-400 font-medium text-center text-sm md:text-base tracking-wider leading-relaxed max-w-md">หน้าจอถูกซ่อนอัตโนมัติเนื่องจากคุณสลับไปใช้งานโปรแกรมอื่น<br/><br/><span className="text-white font-bold opacity-80">คลิกที่หน้าต่างเพื่อปลดล็อก</span></p>
          </div>
        )}
        {screenshotWarning && (
          <div className="fixed inset-0 bg-red-950/98 backdrop-blur-[40px] z-[10000] flex flex-col items-center justify-center text-white transition-all duration-300 animate-in fade-in zoom-in-95">
            <div className="bg-red-900 p-10 rounded-full mb-10 border-4 border-red-500 animate-pulse shadow-[0_0_100px_rgba(220,38,38,0.8)] relative"><div className="absolute inset-0 rounded-full border border-red-400 animate-ping"></div><CameraOff className="w-28 h-28 text-white" /></div>
            <h2 className="text-5xl md:text-7xl font-black tracking-[0.2em] text-red-500 mb-6 drop-shadow-[0_0_30px_rgba(239,68,68,1)] text-center">ห้ามบันทึกภาพ</h2>
            <div className="bg-red-900/50 border border-red-500/50 p-6 rounded-2xl max-w-2xl backdrop-blur-md"><p className="text-red-100 font-bold text-lg md:text-xl text-center tracking-wide uppercase leading-relaxed">การพยายามบันทึกภาพหน้าจอถือเป็นการละเมิดนโยบายความปลอดภัย<br/>ข้อมูลเหตุการณ์นี้ได้ถูกบันทึกลงระบบแล้ว</p></div>
            <button onClick={() => setScreenshotWarning(false)} className="mt-12 px-10 py-4 bg-red-800 hover:bg-red-600 border-2 border-red-500 rounded-2xl text-[15px] font-black tracking-[0.2em] transition-all duration-300 active:scale-95 shadow-xl hover:shadow-red-500/50 hover:-translate-y-1">รับทราบและปิดแจ้งเตือน</button>
          </div>
        )}
      </div>
    </div>
  );
}

function DatabaseIcon(props) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5V19A9 3 0 0 0 21 19V5"></path><path d="M3 12A9 3 0 0 0 21 12"></path></svg>
  );
}