'use client';

import React, { useState, useEffect } from 'react';
import { useApp, Order, SimulatedEmail } from '@/context/AppContext';
import { 
  User, 
  Mail, 
  Phone, 
  History, 
  Clock, 
  CheckCircle, 
  TrendingUp, 
  Copy, 
  Check, 
  LogOut, 
  ExternalLink, 
  Sparkles, 
  ShieldCheck, 
  Lock, 
  AlertTriangle,
  FileText,
  MessageSquare,
  DollarSign,
  Trash2,
  Inbox,
  AlertCircle,
  Calendar,
  Send,
  Settings,
  Bell,
  Globe,
  X,
  Save,
  ShieldAlert,
  Moon,
  Sun,
  Activity
} from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';

export default function UserProfileView() {
  const { 
    currentUser, 
    orders, 
    logoutUser, 
    theme, 
    formatPrice, 
    currency,
    setAuthModalOpen,
    setAuthModalTab,
    simulatedEmails,
    deleteSimulatedEmail,
    markEmailAsRead,
    clearAllEmails,
    updateUserProfile,
    deleteUserProfile,
    toggleTheme,
    setCurrency,
    language,
    setLanguage,
    adminTeam,
    acceptAdminInvite
  } = useApp();

  const isDark = theme === 'dark';
  const [copiedOrderId, setCopiedOrderId] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState<'orders' | 'settings' | 'emails'>('orders');
  const [selectedEmailId, setSelectedEmailId] = useState<string | null>(null);

  // Profile Edit fields
  const [editableName, setEditableName] = useState(currentUser?.name || '');
  const [editableContact, setEditableContact] = useState(currentUser?.contact || '');
  const [editableEmail, setEditableEmail] = useState(currentUser?.email || '');
  const [editableId, setEditableId] = useState(currentUser?.id || '');
  const [isUpdating, setIsUpdating] = useState(false);

  // Sync edits
  useEffect(() => {
    if (currentUser) {
      const timer = setTimeout(() => {
        setEditableName(currentUser.name);
        setEditableContact(currentUser.contact || '');
        setEditableEmail(currentUser.email);
        setEditableId(currentUser.id);
      }, 0);
      return () => clearTimeout(timer);
    }
  }, [currentUser]);

  // Preference Settings
  const [prefEmailAlerts, setPrefEmailAlerts] = useState(() => {
    if (typeof window !== 'undefined') {
      const saved = localStorage.getItem('vgb_pref_email_alerts');
      return saved !== 'false';
    }
    return true;
  });
  const [prefPushAlarms, setPrefPushAlarms] = useState(() => {
    if (typeof window !== 'undefined') {
      const saved = localStorage.getItem('vgb_pref_push_alarms');
      return saved !== 'false';
    }
    return true;
  });
  const [prefSecurityLog, setPrefSecurityLog] = useState(() => {
    if (typeof window !== 'undefined') {
      const saved = localStorage.getItem('vgb_pref_security_log');
      return saved === 'true';
    }
    return false;
  });
  const [prefWeeklyReleases, setPrefWeeklyReleases] = useState(() => {
    if (typeof window !== 'undefined') {
      const saved = localStorage.getItem('vgb_pref_weekly_releases');
      return saved !== 'false';
    }
    return true;
  });

  // Local Toast system
  const [localToast, setLocalToast] = useState<{ message: string; type: 'success' | 'info' | 'error' } | null>(null);
  const triggerToast = (message: string, type: 'success' | 'info' | 'error' = 'success') => {
    setLocalToast({ message, type });
    setTimeout(() => {
      setLocalToast(prev => prev?.message === message ? null : prev);
    }, 4000);
  };

  // Profile delete states
  const [deleteInput, setDeleteInput] = useState('');
  const [hasAcknowledgedDelete, setHasAcknowledgedDelete] = useState(false);
  const [deleteError, setDeleteError] = useState('');
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);

  const handleSaveProfile = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!editableName.trim()) {
      triggerToast('Name is required to update credentials profile.', 'error');
      return;
    }
    if (!editableEmail.trim()) {
      triggerToast('Email is required.', 'error');
      return;
    }
    if (!editableId.trim()) {
      triggerToast('User ID is required.', 'error');
      return;
    }
    setIsUpdating(true);
    try {
      await updateUserProfile(editableName, editableContact, editableEmail, editableId);
      triggerToast('Personal profile credentials updated successfully!', 'success');
    } catch (err: any) {
      triggerToast(err.message || 'Error updating profile.', 'error');
    } finally {
      setIsUpdating(false);
    }
  };

  const handleTogglePref = (key: string, currentValue: boolean, setter: (val: boolean) => void, label: string) => {
    const nextVal = !currentValue;
    setter(nextVal);
    localStorage.setItem(key, String(nextVal));
    triggerToast(`${label} ${nextVal ? 'activated' : 'disabled'}!`, 'info');
  };

  const handleExecuteDeleteAccount = async () => {
    if (!hasAcknowledgedDelete) {
      setDeleteError('Please check the acknowledgment box to proceed.');
      return;
    }
    if (deleteInput !== 'Delete') {
      setDeleteError('Secret confirm text mismatch. Please type "Delete" exactly.');
      return;
    }
    
    setDeleteError('');
    triggerToast('Initiating absolute account purging sequence...', 'error');
    
    setTimeout(async () => {
      await deleteUserProfile();
      triggerToast('Goodbye! Profile and all local order records fully wiped.', 'success');
    }, 1500);
  };

  // Filter orders related to current logged in user
  const userOrders = currentUser 
    ? orders.filter(o => o.clientEmail.toLowerCase() === currentUser.email.toLowerCase())
    : [];

  const handleCopyReference = (ref: string, orderId: string) => {
    navigator.clipboard.writeText(ref);
    setCopiedOrderId(orderId);
    setTimeout(() => {
      setCopiedOrderId(null);
    }, 2000);
  };

  // Helper calculation metrics
  const totalSpend = userOrders.reduce((sum, order) => sum + order.totalPrice, 0);
  const pendingOrders = userOrders.filter(o => o.status === 'pending').length;
  const activeOrders = userOrders.filter(o => o.status === 'in_progress').length;
  const completedOrders = userOrders.filter(o => o.status === 'completed').length;

  // Unauthenticated Wall View
  if (!currentUser) {
    return (
      <div className="w-full max-w-4xl mx-auto px-4 py-16" id="unauthenticated-profile-wall">
        <motion.div 
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          className={`p-8 md:p-12 rounded-3xl border text-center space-y-6 backdrop-blur-xl ${
            isDark 
              ? 'bg-[#100c25]/60 border-purple-500/20 shadow-2xl shadow-purple-950/20' 
              : 'bg-white border-slate-200 shadow-xl shadow-slate-200/50'
          }`}
        >
          <div className="w-20 h-20 bg-purple-500/10 border border-purple-500/25 rounded-3xl flex items-center justify-center mx-auto text-purple-400">
            <Lock className="w-9 h-9 animate-bounce" />
          </div>

          <div className="max-w-md mx-auto space-y-2">
            <h2 className={`font-display font-black text-2xl md:text-3xl tracking-tight ${
              isDark ? 'text-white' : 'text-slate-900'
            }`}>
              Secure Client Dashboard
            </h2>
            <p className={`text-xs md:text-sm ${
              isDark ? 'text-slate-400' : 'text-slate-600'
            } leading-relaxed`}>
              Authentication is required to view your account metadata, personal product catalogs, delivery instructions, and active service level agreements (SLAs).
            </p>
          </div>

          <div className="flex flex-col sm:flex-row gap-3 justify-center items-center max-w-sm mx-auto pt-2">
            <button
              onClick={() => {
                setAuthModalTab('register');
                setAuthModalOpen(true);
              }}
              className="w-full sm:w-auto px-6 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-xs font-black tracking-widest text-white uppercase rounded-xl shadow-lg hover:shadow-purple-500/20 transition-all cursor-pointer"
            >
              Sign Up Now
            </button>
            <button
              onClick={() => {
                setAuthModalTab('login');
                setAuthModalOpen(true);
              }}
              className={`w-full sm:w-auto px-6 py-3 border text-xs font-black tracking-widest uppercase rounded-xl transition-all cursor-pointer ${
                isDark 
                  ? 'border-white/10 hover:bg-white/5 text-slate-300' 
                  : 'border-slate-200 hover:bg-slate-50 text-slate-750'
              }`}
            >
              Sign In
            </button>
          </div>
        </motion.div>
      </div>
    );
  }

  return (
    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 py-8 space-y-8" id="authenticated-profile-view">
      
      {/* Local Toast Alert Banner */}
      <AnimatePresence>
        {localToast && (
          <motion.div
            initial={{ opacity: 0, y: -20, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -20, scale: 0.95 }}
            className={`fixed top-6 right-6 z-50 flex items-center gap-3 px-4 py-3 rounded-2xl shadow-2xl border backdrop-blur-md ${
              localToast.type === 'success'
                ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400'
                : localToast.type === 'error'
                  ? 'bg-rose-500/10 border-rose-500/20 text-rose-400'
                  : 'bg-cyan-500/10 border-cyan-500/20 text-cyan-400'
            }`}
          >
            <div className="flex-1 text-xs font-bold leading-tight">
              {localToast.message}
            </div>
            <button 
              onClick={() => setLocalToast(null)}
              className="p-1 rounded-lg hover:bg-white/10 text-slate-400 hover:text-white transition-colors cursor-pointer"
            >
              <X className="w-3.5 h-3.5" />
            </button>
          </motion.div>
        )}
      </AnimatePresence>
      
      {/* Upper Grid: Member identity card and stats ledger */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        {/* Profile Card */}
        <motion.div 
          initial={{ opacity: 0, y: 15 }}
          animate={{ opacity: 1, y: 0 }}
          className={`lg:col-span-1 p-6 rounded-3xl border flex flex-col justify-between backdrop-blur-xl relative overflow-hidden ${
            isDark 
              ? 'bg-[#100c25]/60 border-purple-500/10 shadow-xl' 
              : 'bg-white border-slate-200 shadow-md'
          }`}
        >
          <div className={`absolute top-0 right-0 w-32 h-32 rounded-full blur-[80px] pointer-events-none ${
            isDark ? 'bg-purple-500/10' : 'bg-purple-100/30'
          }`} />

          <div className="space-y-6">
            <div className="flex items-start justify-between">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-2xl bg-gradient-to-tr from-purple-500 to-cyan-400 flex items-center justify-center text-white font-display font-black text-lg shadow-md shadow-purple-500/20">
                  {currentUser.name.charAt(0).toUpperCase()}
                </div>
                <div>
                  <div className="flex items-center gap-1.5">
                    <h3 className={`font-display font-bold text-base ${isDark ? 'text-white' : 'text-slate-800'}`}>
                      {currentUser.name}
                    </h3>
                    <ShieldCheck className="w-4 h-4 text-cyan-400" />
                  </div>
                  <span className="text-[9px] font-mono tracking-widest uppercase text-purple-400 font-bold bg-purple-500/10 border border-purple-500/15 px-2 py-0.5 rounded-full">
                    SLA Partner
                  </span>
                </div>
              </div>
            </div>

            <div className={`space-y-3.5 pt-4 border-t ${isDark ? 'border-white/5' : 'border-slate-150'}`}>
              <div className="flex items-center gap-3 text-xs">
                <div className="p-2 rounded-lg bg-slate-500/5 border border-slate-500/10 text-slate-400">
                  <Mail className="w-3.5 h-3.5" />
                </div>
                <div className="truncate">
                  <span className="text-[10px] font-mono uppercase tracking-wider text-slate-500 block">Personal Email</span>
                  <span className={`font-semibold truncate block ${isDark ? 'text-slate-300' : 'text-slate-750'}`}>
                    {currentUser.email}
                  </span>
                </div>
              </div>

              {currentUser.contact && (
                <div className="flex items-center gap-3 text-xs">
                  <div className="p-2 rounded-lg bg-slate-500/5 border border-slate-500/10 text-slate-400">
                    <Phone className="w-3.5 h-3.5" />
                  </div>
                  <div>
                    <span className="text-[10px] font-mono uppercase tracking-wider text-slate-500 block">Fulfillment Contact</span>
                    <span className={`font-semibold block ${isDark ? 'text-slate-300' : 'text-slate-750'}`}>
                      {currentUser.contact}
                    </span>
                  </div>
                </div>
              )}

              <div className="flex items-center gap-3 text-xs">
                <div className="p-2 rounded-lg bg-slate-500/5 border border-slate-500/10 text-slate-400">
                  <User className="w-3.5 h-3.5" />
                </div>
                <div>
                  <span className="text-[10px] font-mono uppercase tracking-wider text-slate-500 block">User Identifier</span>
                  <span className="font-mono text-[10px] text-slate-500">
                    usr_{currentUser.id}
                  </span>
                </div>
              </div>
            </div>
          </div>


        </motion.div>

        {/* Stats Grid */}
        <div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <motion.div 
            initial={{ opacity: 0, scale: 0.97 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: 0.05 }}
            className={`p-6 rounded-3xl border backdrop-blur-md flex flex-col justify-between ${
              isDark ? 'bg-white/[0.02] border-white/5' : 'bg-white border-slate-205 shadow-sm'
            }`}
          >
            <div className="flex justify-between items-start">
              <span className="text-xs font-mono uppercase tracking-widest text-slate-400">SLA Volume</span>
              <div className="p-2 rounded-xl bg-purple-500/10 text-purple-400">
                <TrendingUp className="w-4 h-4" />
              </div>
            </div>
            <div className="mt-4">
              <span className={`text-4xl font-display font-black block ${isDark ? 'text-white' : 'text-slate-900'}`}>
                {userOrders.length}
              </span>
              <span className="text-[10px] text-slate-500">Total verified order references</span>
            </div>
          </motion.div>

          <motion.div 
            initial={{ opacity: 0, scale: 0.97 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: 0.1 }}
            className={`p-6 rounded-3xl border backdrop-blur-md flex flex-col justify-between ${
              isDark ? 'bg-white/[0.02] border-white/5' : 'bg-white border-slate-205 shadow-sm'
            }`}
          >
            <div className="flex justify-between items-start">
              <span className="text-xs font-mono uppercase tracking-widest text-slate-400">Partner Spend</span>
              <div className="p-2 rounded-xl bg-cyan-500/10 text-cyan-400">
                <DollarSign className="w-4 h-4" />
              </div>
            </div>
            <div className="mt-4">
              <span className={`text-4xl font-display font-black block truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>
                {currency === 'MMK' 
                  ? (Math.round(totalSpend * 4000)).toLocaleString() 
                  : '$' + totalSpend.toFixed(2)}
              </span>
              <span className="text-[10px] text-slate-500 font-mono block mt-1 uppercase">
                {currency === 'MMK' ? 'Total Settlement (MMK)' : 'Settlement currency: USD'}
              </span>
            </div>
          </motion.div>

          {/* Quick tracker status counts */}
          <motion.div 
            initial={{ opacity: 0, scale: 0.97 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: 0.15 }}
            className={`p-5 rounded-3xl border backdrop-blur-md flex flex-col justify-between sm:col-span-2 lg:col-span-1 ${
              isDark ? 'bg-white/[0.02] border-white/5' : 'bg-white border-slate-205 shadow-sm'
            }`}
          >
            <div className="flex justify-between items-start">
              <span className="text-xs font-mono uppercase tracking-widest text-slate-400">Task Pipelines</span>
              <div className="p-2 rounded-xl bg-emerald-500/10 text-emerald-400">
                <CheckCircle className="w-4 h-4" />
              </div>
            </div>
            <div className="mt-4 space-y-2">
              <div className="flex justify-between text-xs pb-1.5 border-b border-slate-500/10">
                <span className="text-slate-400">Pending Briefs:</span>
                <span className="font-bold text-amber-400">{pendingOrders}</span>
              </div>
              <div className="flex justify-between text-xs pb-1.5 border-b border-slate-500/10">
                <span className="text-slate-400">Active Works:</span>
                <span className="font-bold text-blue-400">{activeOrders}</span>
              </div>
              <div className="flex justify-between text-xs">
                <span className="text-slate-400">Signed-off Completes:</span>
                <span className="font-bold text-emerald-400">{completedOrders}</span>
              </div>
            </div>
          </motion.div>
        </div>
      </div>

      {/* Primary Row: Tabs Container and Ledger Sheet */}
      <motion.div 
        initial={{ opacity: 0, y: 15 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.2 }}
        className={`p-6 rounded-3xl border backdrop-blur-xl ${
          isDark ? 'bg-[#100c25]/30 border-white/5' : 'bg-white border-slate-200'
        }`}
      >
        {/* Interactive Tab switchers */}
        <div className="flex items-center gap-2 border-b border-slate-350/10 pb-3 mb-6 flex-wrap" id="profile-tabs-root">
          <button
            id="tab-select-orders"
            onClick={() => setActiveTab('orders')}
            className={`px-4 py-2 rounded-xl text-xs font-black tracking-widest uppercase transition-all flex items-center gap-2 cursor-pointer ${
              activeTab === 'orders'
                ? isDark 
                  ? 'bg-purple-600/30 text-purple-300 border border-purple-500/20' 
                  : 'bg-purple-100 text-purple-700 border border-purple-200 shadow-xs'
                : 'text-slate-400 hover:text-slate-350 bg-transparent border border-transparent'
            }`}
          >
            <History className="w-3.5 h-3.5" />
            <span>Fulfillment Orders ({userOrders.length})</span>
          </button>

          <button
            id="tab-select-settings"
            onClick={() => setActiveTab('settings')}
            className={`px-4 py-2 rounded-xl text-xs font-black tracking-widest uppercase transition-all flex items-center gap-2 cursor-pointer ${
              activeTab === 'settings'
                ? isDark 
                  ? 'bg-purple-600/30 text-purple-300 border border-purple-500/20' 
                  : 'bg-purple-100 text-purple-700 border border-purple-200 shadow-xs'
                : 'text-slate-400 hover:text-slate-350 bg-transparent border border-transparent'
            }`}
          >
            <Settings className="w-3.5 h-3.5" />
            <span>Account & Notifications</span>
          </button>

          <button
            id="tab-select-emails"
            onClick={() => {
              setActiveTab('emails');
              // Auto-select first email if any available
              const relevant = simulatedEmails.filter(e => 
                e.toEmail.toLowerCase() === currentUser.email.toLowerCase() ||
                e.toEmail.toLowerCase() === 'guest@masterdigital.agency' ||
                e.toEmail.toLowerCase() === 'client@masterdigital.agency'
              );
              if (relevant.length > 0 && !selectedEmailId) {
                setSelectedEmailId(relevant[0].id);
                markEmailAsRead(relevant[0].id);
              }
            }}
            className={`px-4 py-2 rounded-xl text-xs font-black tracking-widest uppercase transition-all flex items-center gap-2 relative cursor-pointer ${
              activeTab === 'emails'
                ? isDark 
                  ? 'bg-cyan-600/30 text-cyan-300 border border-cyan-500/20' 
                  : 'bg-cyan-50 text-cyan-700 border border-cyan-150 shadow-xs'
                : 'text-slate-400 hover:text-slate-350 bg-transparent border border-transparent'
            }`}
          >
            <Inbox className="w-3.5 h-3.5" />
            <span>SMTP Alerts Inbox</span>
            {simulatedEmails.filter(e => 
              (e.toEmail.toLowerCase() === currentUser.email.toLowerCase() ||
              e.toEmail.toLowerCase() === 'guest@masterdigital.agency' ||
              e.toEmail.toLowerCase() === 'client@masterdigital.agency') && !e.read
            ).length > 0 && (
              <span className="flex h-2 w-2 rounded-full bg-cyan-400 animate-ping absolute -top-1 -right-1" />
            )}
          </button>
        </div>

        {/* Dynamic view rendering depends on active tab selection */}
        {activeTab === 'orders' && (
          <div>
            <div className="flex items-center gap-2 mb-6 pb-4 border-b border-slate-300/10">
              <History className="w-5 h-5 text-purple-400" />
              <div>
                <h3 className={`font-display font-black text-lg ${isDark ? 'text-slate-100' : 'text-slate-800'}`}>
                  Account Order History & Real-Time Fulfilment
                </h3>
                <p className="text-[11px] text-slate-500 mt-0.5">
                  Secure ledger containing client specs, customized instructions, and design files transmission status.
                </p>
              </div>
            </div>

            {userOrders.length === 0 ? (
              <div className="text-center py-16 space-y-3">
                <div className="w-12 h-12 bg-slate-500/5 rounded-2xl flex items-center justify-center mx-auto text-slate-500 opacity-40">
                  <FileText className="w-6 h-6" />
                </div>
                <p className="text-xs text-slate-500 font-bold">No purchase or order logs discovered for your credentials.</p>
                <p className="text-[10px] text-slate-400 max-w-sm mx-auto leading-relaxed">
                  Enlist premium branding packages, graphic custom sets, or media services inside our digital catalog suite to generate real-time fulfillment pipelines.
                </p>
              </div>
            ) : (
              <div className="space-y-6">
                {userOrders.map((order) => {
                  const statusColors = {
                    pending: 'text-amber-400 bg-amber-400/10 border-amber-400/20',
                    in_progress: 'text-blue-400 bg-blue-400/10 border-blue-400/20',
                    completed: 'text-emerald-400 bg-emerald-400/10 border-emerald-400/20',
                    cancelled: 'text-red-400 bg-red-400/10 border-red-400/20',
                  }[order.status];

                  return (
                    <div 
                      key={order.id}
                      className={`rounded-2xl border transition-all duration-300 overflow-hidden ${
                        isDark 
                          ? 'bg-white/[0.01] hover:bg-white/[0.03] border-white/5' 
                          : 'bg-slate-50/60 hover:bg-slate-50 border-slate-200 shadow-sm'
                      }`}
                    >
                      {/* Top bar header */}
                      <div className={`p-4 md:px-6 py-4.5 border-b flex flex-col md:flex-row md:items-center justify-between gap-4 ${
                        isDark ? 'border-white/5 bg-white/[0.01]' : 'border-slate-150 bg-slate-100/30'
                      }`}>
                        <div className="flex flex-wrap items-center gap-3">
                          <div className="flex items-center gap-1.5 bg-slate-500/10 px-3 py-1.5 rounded-xl border border-slate-500/5">
                            <span className="text-[10px] font-mono tracking-wider font-bold text-slate-400">REF:</span>
                            <span className="font-mono text-xs font-black text-cyan-400 select-all">{order.reference}</span>
                          </div>
                          <button
                            onClick={() => handleCopyReference(order.reference, order.id)}
                            className={`p-1.5 rounded-lg border transition-all cursor-pointer ${
                              copiedOrderId === order.id
                                ? 'text-emerald-400 border-emerald-400/30 bg-emerald-400/5'
                                : 'text-slate-400 border-slate-500/15 hover:text-white hover:bg-white/5'
                            }`}
                            title="Copy Reference ID to clipboard"
                          >
                            {copiedOrderId === order.id ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
                          </button>
                          <span className={`text-[10px] px-3 py-1 rounded-full border ${statusColors} font-mono tracking-wider uppercase font-extrabold`}>
                            {order.status.replace('_', ' ')}
                          </span>
                        </div>

                        <div className="flex items-center gap-6 justify-between md:justify-end text-xs font-mono text-slate-500">
                          <div>
                            <span className="block text-[9px] uppercase tracking-wider text-slate-500 md:text-right">Ordered On</span>
                            <span className={`font-semibold ${isDark ? 'text-slate-300' : 'text-slate-700'}`}>
                              {new Date(order.createdAt).toLocaleDateString()} at {new Date(order.createdAt).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
                            </span>
                          </div>

                          <div className="border-l border-slate-500/20 pl-6">
                            <span className="block text-[9px] uppercase tracking-wider text-slate-500 md:text-right">Settled Amount</span>
                            <span className="text-sm font-black text-purple-400">
                              {currency === 'MMK' 
                                ? (Math.round(order.totalPrice * 4000)).toLocaleString() + ' MMK'
                                : '$' + order.totalPrice.toFixed(2)}
                            </span>
                          </div>
                        </div>
                      </div>

                      {/* Body items & spec list */}
                      <div className="p-4 md:p-6 space-y-4">
                        <div className="space-y-4">
                          {order.items.map((item, idx) => (
                            <div 
                              key={idx} 
                              className={`p-4 rounded-xl border flex flex-col md:flex-row justify-between gap-4 ${
                                isDark ? 'bg-slate-950/40 border-white/5' : 'bg-white border-slate-200 shadow-xs'
                              }`}
                            >
                              <div className="space-y-2">
                                <div className="flex items-center gap-2">
                                  <span className="text-xs font-black text-slate-300 dark:text-slate-205 uppercase tracking-wide">
                                    {item.product.name}
                                  </span>
                                  <span className="text-[10px] px-2 py-0.5 rounded-md bg-purple-500/10 text-purple-400 font-mono">
                                    {item.quantity}x unit
                                  </span>
                                </div>
                                
                                {item.customInstructions && (
                                  <div className="text-[11px] leading-relaxed text-slate-400 flex items-start gap-1.5 bg-slate-500/5 p-2 rounded-lg border border-slate-500/10">
                                    <MessageSquare className="w-3.5 h-3.5 mt-0.5 text-slate-500 shrink-0" />
                                    <div className="space-y-1">
                                      <span className="text-[9px] uppercase font-mono tracking-widest text-slate-500 block">Custom Requirements Brief</span>
                                      <p>{item.customInstructions}</p>
                                    </div>
                                  </div>
                                )}
                              </div>

                              <div className="md:text-right self-end md:self-center text-xs font-mono">
                                <span className="block text-[9px] text-slate-500 font-sans uppercase">Unit Rate</span>
                                <span className={`font-semibold ${isDark ? 'text-slate-300' : 'text-slate-700'}`}>
                                  {currency === 'MMK' 
                                    ? (Math.round(item.product.price * 4000)).toLocaleString() + ' MMK'
                                    : '$' + item.product.price.toFixed(2)}
                                </span>
                              </div>
                            </div>
                          ))}
                        </div>

                        {/* Live SLA Progress Bar & Status Pipeline */}
                        <div className={`p-4 rounded-2xl border transition-all text-left my-4 ${
                          isDark 
                            ? 'bg-purple-950/15 border-purple-500/10 text-slate-300' 
                            : 'bg-indigo-50/20 border-indigo-100 text-slate-705 shadow-xs'
                        }`}>
                          <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-2 mb-3.5">
                            <div className="flex items-center gap-2">
                              <div className="h-2 w-2 rounded-full bg-cyan-400 animate-pulse shrink-0" />
                              <span className="font-display font-black text-xs uppercase tracking-wider text-slate-450 dark:text-slate-205">
                                Live SLA Phase Progress
                              </span>
                            </div>
                            <span className="text-[10px] uppercase font-mono font-bold tracking-widest text-cyan-600 dark:text-cyan-400 bg-cyan-500/10 px-2.5 py-1 rounded-md">
                              {(() => {
                                const statusPct = {
                                  pending: "25% - Queue Verification",
                                  in_progress: "65% - Studio Creative Render",
                                  completed: "100% - Fully Transmitted",
                                  cancelled: "0% - Order Suspended/Cancelled"
                                }[order.status];
                                return statusPct;
                              })()}
                            </span>
                          </div>

                          <div className="space-y-4">
                            {/* The Progress bar */}
                            <div className="relative pt-0.5" id={`progress-bar-tracking-${order.id}`}>
                              <div className="w-full bg-slate-200 dark:bg-slate-900 h-2.5 rounded-full overflow-hidden relative border border-slate-300 dark:border-white/5">
                                <div 
                                  className={`h-full bg-gradient-to-r from-cyan-400 via-purple-500 to-indigo-505 rounded-full transition-all duration-700`}
                                  style={{ 
                                    width: {
                                      pending: '25%',
                                      in_progress: '65%',
                                      completed: '100%',
                                      cancelled: '0%'
                                    }[order.status] 
                                  }} 
                                />
                              </div>
                            </div>

                            {/* Phase steps nodes with indicators */}
                            <div className="grid grid-cols-4 gap-2 text-[9px] font-mono leading-tight pt-1">
                              {[
                                { phase: "Order Queue", active: true, desc: "Brief verified" },
                                { phase: "Design & Edit", active: order.status === 'in_progress' || order.status === 'completed', desc: "Workspace rendering" },
                                { phase: "QA Checking", active: order.status === 'in_progress' || order.status === 'completed', desc: "Checking quality" },
                                { phase: "Final Release", active: order.status === 'completed', desc: "Assets dispatched" }
                              ].map((step, idx) => {
                                const isFulfilled = step.active && (order.status === 'completed' || idx === 0 || (idx < 3 && order.status === 'in_progress'));
                                return (
                                  <div key={idx} className="flex flex-col space-y-1 relative">
                                    <div className="flex items-center gap-1.5">
                                      <span className={`h-2 w-2 rounded-full border ${
                                        isFulfilled 
                                          ? 'bg-cyan-400 border-cyan-300 shadow-[0_0_8px_rgba(34,211,238,0.5)]' 
                                          : 'bg-slate-300 dark:bg-slate-800 border-slate-400 dark:border-white/5'
                                      }`} />
                                      <span className={`font-black ${
                                        isFulfilled 
                                          ? 'text-cyan-600 dark:text-cyan-350' 
                                          : 'text-slate-400 dark:text-slate-500'
                                      }`}>
                                        {step.phase}
                                      </span>
                                    </div>
                                    <span className="text-[8px] text-slate-500 truncate block">
                                      {step.desc}
                                    </span>
                                  </div>
                                );
                              })}
                            </div>

                            {/* Estimated Target Completion details */}
                            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 text-[10px] text-slate-450 dark:text-slate-400 font-mono mt-2 pt-2 border-t border-slate-305 dark:border-white/5">
                              <span>Estimated Completion:</span>
                              <div className="flex flex-wrap gap-1 items-center">
                                {order.items.map((it, idx) => (
                                  <span key={idx} className="bg-purple-500/15 dark:bg-purple-500/20 text-purple-600 dark:text-purple-300 font-bold px-1.5 py-0.5 rounded text-[8px] whitespace-nowrap">
                                    {it.product.name.substring(0, 15)}... ({it.product.deliveryTime})
                                  </span>
                                ))}
                              </div>
                            </div>
                          </div>
                        </div>

                        {/* Admin notes follow-up details */}
                        {order.adminNotes && (
                          <div className="p-4 rounded-xl border border-dashed border-cyan-500/20 bg-cyan-950/5 text-xs text-slate-400 space-y-2.5">
                            <div className="flex items-center gap-1.5 text-cyan-400 font-mono tracking-wider uppercase font-semibold">
                              <Sparkles className="w-4 h-4 animate-pulse" />
                              <span>Creative Engineer Response Guide</span>
                            </div>
                            <p className="leading-relaxed">
                              {order.adminNotes}
                            </p>
                          </div>
                        )}

                        {/* General delivery feedback indicator */}
                        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2.5 pt-2 text-[10px] text-slate-500 border-t border-slate-300/10">
                          <div className="flex items-center gap-1.5">
                            <ShieldCheck className="w-3.5 h-3.5 text-cyan-400" />
                            <span>SLA Priority Level: <strong>High-Tier Escrow Protocol</strong></span>
                          </div>
                          <div className="flex items-center gap-1">
                            <span>Need adjustments or source files? Ping via</span>
                            <a 
                              href="https://t.me/" 
                              target="_blank" 
                              rel="noopener noreferrer" 
                              className="text-purple-400 hover:text-purple-300 flex items-center gap-0.5 font-bold hover:underline"
                            >
                              Telegram support channel <ExternalLink className="w-3 h-3 inline" />
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        )}

        {/* Account & Notifications Settings tab logic block */}
        {activeTab === 'settings' && (
          <div className="space-y-8 animate-fade-in" id="account-settings-container">
            {/* Header portion */}
            <div className="flex items-center gap-2.5 mb-6 pb-4 border-b border-slate-300/10">
              <Settings className="w-5 h-5 text-purple-400" />
              <div>
                <h3 className={`font-display font-black text-lg ${isDark ? 'text-slate-100' : 'text-slate-800'}`}>
                  Account Settings & Security Hub
                </h3>
                <p className="text-[11px] text-slate-500 mt-0.5">
                  Update your identity credentials, configure real-time notification alerts, adjust regional settings, or purge your local profile.
                </p>
              </div>
            </div>

            {/* Subgrid layout */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              
              {/* Left Column Section: Profile Configuration */}
              <div className="space-y-6">
                <div className={`p-6 rounded-2xl border ${isDark ? 'bg-white/[0.01] border-white/5' : 'bg-slate-50/50 border-slate-200'}`}>
                  <h4 className={`text-xs font-mono uppercase tracking-wider font-extrabold mb-4 flex items-center gap-2 ${isDark ? 'text-slate-300' : 'text-slate-700'}`}>
                    <User className="w-4 h-4 text-purple-400" />
                    <span>Personal Member Identity</span>
                  </h4>

                  <form onSubmit={handleSaveProfile} className="space-y-4">
                    <div>
                      <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
                        Register
                      </label>
                      <div className="relative">
                        <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                          <User className="w-4 h-4" />
                        </span>
                        <input
                          type="text"
                          value={editableName}
                          onChange={(e) => setEditableName(e.target.value)}
                          placeholder="Your Display Name"
                          className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl pl-10 pr-4 py-2.5 text-xs outline-none transition-all ${
                            isDark 
                              ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                              : 'bg-white border-slate-250 text-slate-800'
                          }`}
                        />
                      </div>
                    </div>

                    <div>
                      <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
                        User ID
                      </label>
                      <div className="relative">
                        <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                          <User className="w-4 h-4 text-purple-400" />
                        </span>
                        <input
                          type="text"
                          value={editableId}
                          onChange={(e) => setEditableId(e.target.value)}
                          placeholder="Your User ID"
                          className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl pl-10 pr-4 py-2.5 text-xs outline-none transition-all ${
                            isDark 
                              ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                              : 'bg-white border-slate-250 text-slate-800'
                          }`}
                        />
                      </div>
                    </div>

                    <div>
                      <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
                        Personal Contact / Telegram Number
                      </label>
                      <div className="relative">
                        <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                          <Phone className="w-4 h-4" />
                        </span>
                        <input
                          type="text"
                          value={editableContact}
                          onChange={(e) => setEditableContact(e.target.value)}
                          placeholder="+95xxxxxxx or @username"
                          className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl pl-10 pr-4 py-2.5 text-xs outline-none transition-all ${
                            isDark 
                              ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                              : 'bg-white border-slate-250 text-slate-800'
                          }`}
                        />
                      </div>
                    </div>

                    <div>
                      <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
                        Account Registered Email
                      </label>
                      <div className="relative">
                        <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-500">
                          <Mail className="w-4 h-4" />
                        </span>
                        <input
                          type="email"
                          value={editableEmail}
                          onChange={(e) => setEditableEmail(e.target.value)}
                          placeholder="your-email@example.com"
                          className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl pl-10 pr-4 py-2.5 text-xs outline-none transition-all ${
                            isDark 
                              ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                              : 'bg-white border-slate-250 text-slate-800'
                          }`}
                        />
                      </div>
                    </div>

                    <button
                      type="submit"
                      disabled={isUpdating}
                      className="w-full sm:w-auto px-5 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-xs font-bold text-white rounded-xl flex items-center justify-center gap-2 cursor-pointer transition-colors shadow-md shadow-purple-500/10"
                    >
                      <Save className="w-4 h-4" />
                      <span>{isUpdating ? 'Saving Settings...' : 'Save Profile Details'}</span>
                    </button>
                  </form>
                </div>

                {/* ACTIVE TEAM INVITATIONS AND CLEARANCES */}
                {(() => {
                  const myTeamRecords = (adminTeam || []).filter(
                    m => m.email.toLowerCase() === currentUser.email.toLowerCase()
                  );
                  const pendingInvite = myTeamRecords.find(m => m.status === 'pending');
                  const activeRecord = myTeamRecords.find(m => m.status === 'joined');

                  return (
                    <div className={`p-6 rounded-2xl border transition-all duration-300 mt-6 ${
                      isDark ? 'bg-white/[0.01] border-white/5' : 'bg-slate-50/50 border-slate-200'
                    }`}>
                      <h4 className={`text-xs font-mono uppercase tracking-wider font-extrabold mb-4 flex items-center gap-2 ${
                        isDark ? 'text-slate-350' : 'text-slate-705'
                      }`}>
                        <ShieldAlert className="w-4 h-4 text-purple-400" />
                        <span>SLA Team Clearance & Assignments</span>
                      </h4>

                      {pendingInvite ? (
                        <div className="p-4 rounded-xl border border-dashed border-amber-500/30 bg-amber-500/5 space-y-3">
                          <div className="flex items-center gap-1.5 text-amber-600 dark:text-amber-400 font-bold text-xs">
                            <span className="w-2 h-2 rounded-full bg-amber-500 animate-pulse" />
                            <span>CLEARED OPERATOR ASSIGNMENT PENDING</span>
                          </div>
                          <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed">
                            You have been nominated for a secure role on the Master Digital technical team: <strong className="text-purple-500 dark:text-purple-400 font-mono uppercase text-xs">[{pendingInvite.role}]</strong>. 
                            Accepting this assignment activates your security keys for system-wide auditing and storefront operator controls.
                          </p>
                          <div className="flex gap-2 pt-1">
                            <button
                              type="button"
                              onClick={() => {
                                acceptAdminInvite(pendingInvite.id);
                                triggerToast(`Congratulations! Welcome back to the SLA team as: ${pendingInvite.role}!`, 'success');
                              }}
                              className="px-4 py-1.5 bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 text-[10px] font-black text-white rounded-lg transition-all shadow cursor-pointer uppercase tracking-widest"
                            >
                              CLAIM SECURITY KEY / ACCEPT
                            </button>
                          </div>
                        </div>
                      ) : activeRecord ? (
                        <div className="p-4 rounded-xl border border-emerald-500/20 bg-emerald-500/5 space-y-2">
                          <div className="flex items-center gap-1.5 text-emerald-600 dark:text-emerald-400 font-bold text-xs font-mono">
                            <CheckCircle className="w-4 h-4" />
                            <span>ACTIVE DIRECTORY: CLEARANCE GRANTED</span>
                          </div>
                          <div className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed space-y-1.5">
                            <p>Assigned Security clearance: <strong className="text-purple-500 dark:text-purple-400 font-mono text-xs">[{activeRecord.role}]</strong></p>
                            <p className="text-[10px] font-mono text-slate-500">Node acceptance stamp: {activeRecord.joinedAt ? new Date(activeRecord.joinedAt).toLocaleString() : 'Registered'}</p>
                          </div>
                          <div className="pt-2">
                            <span className="text-[9px] bg-purple-500/10 px-2 py-0.5 rounded font-mono font-bold text-purple-400 border border-purple-500/25">
                              AUTHENTICALLY SIGNED SECURE PIPELINE
                            </span>
                          </div>
                        </div>
                      ) : (
                        <div className="p-4 rounded-xl border border-slate-500/5 bg-slate-500/[0.01] text-xs text-slate-450 dark:text-slate-400 text-center font-mono">
                          <p>No active operator invitation keys registered for email:</p>
                          <p className="font-bold text-purple-500 mt-1">{currentUser.email}</p>
                        </div>
                      )}
                    </div>
                  );
                })()}

              </div>

              {/* Right Column Section: Notifications and Danger Settings */}
              <div className="space-y-6">
                
                {/* Notification preferences panel */}
                <div className={`p-6 rounded-2xl border ${isDark ? 'bg-white/[0.01] border-white/5' : 'bg-slate-50/50 border-slate-200'}`}>
                  <h4 className={`text-xs font-mono uppercase tracking-wider font-extrabold mb-4 flex items-center gap-2 ${isDark ? 'text-slate-300' : 'text-slate-700'}`}>
                    <Bell className="w-4 h-4 text-indigo-400" />
                    <span>Real-Time Notifications Toggles</span>
                  </h4>

                  <div className="space-y-4">
                    
                    {/* Toggle item 1 */}
                    <div className="flex items-start justify-between gap-4 p-3 rounded-xl border border-slate-500/5 hover:bg-slate-500/[0.02] transition-all">
                      <div className="space-y-0.5">
                        <span className={`block text-xs font-extrabold ${isDark ? 'text-slate-200' : 'text-slate-800'}`}>SLA Email Alerts</span>
                        <p className="text-[10px] text-slate-500 leading-relaxed">
                          Intercept automated invoice dispatches and SLA phase updates whenever creative designers edit orders.
                        </p>
                      </div>
                      <button
                        type="button"
                        onClick={() => handleTogglePref('vgb_pref_email_alerts', prefEmailAlerts, setPrefEmailAlerts, 'SLA Email Alerts')}
                        className={`w-10 h-5.5 rounded-full p-0.5 flex items-center shrink-0 cursor-pointer transition-all duration-300 ${
                          prefEmailAlerts ? 'bg-gradient-to-r from-purple-500 to-indigo-500 justify-end' : 'bg-slate-600/40 dark:bg-white/10 justify-start'
                        }`}
                      >
                        <span className="w-4.5 h-4.5 bg-white rounded-full shadow-md shadow-slate-900/30" />
                      </button>
                    </div>

                    {/* Toggle item 2 */}
                    <div className="flex items-start justify-between gap-4 p-3 rounded-xl border border-slate-500/5 hover:bg-slate-500/[0.02] transition-all">
                      <div className="space-y-0.5">
                        <span className={`block text-xs font-extrabold ${isDark ? 'text-slate-200' : 'text-slate-800'}`}>Interactive Browser Alarms</span>
                        <p className="text-[10px] text-slate-500 leading-relaxed">
                          Launch rapid top-level slide-in notification toast banners during storefront sessions.
                        </p>
                      </div>
                      <button
                        type="button"
                        onClick={() => handleTogglePref('vgb_pref_push_alarms', prefPushAlarms, setPrefPushAlarms, 'In-App Toasts')}
                        className={`w-10 h-5.5 rounded-full p-0.5 flex items-center shrink-0 cursor-pointer transition-all duration-300 ${
                          prefPushAlarms ? 'bg-gradient-to-r from-purple-500 to-indigo-500 justify-end' : 'bg-slate-600/40 dark:bg-white/10 justify-start'
                        }`}
                      >
                        <span className="w-4.5 h-4.5 bg-white rounded-full shadow-md shadow-slate-900/30" />
                      </button>
                    </div>

                    {/* Toggle item 3 */}
                    <div className="flex items-start justify-between gap-4 p-3 rounded-xl border border-slate-500/5 hover:bg-slate-500/[0.02] transition-all">
                      <div className="space-y-0.5">
                        <span className={`block text-xs font-extrabold ${isDark ? 'text-slate-200' : 'text-slate-800'}`}>Security Audit Log Tracking</span>
                        <p className="text-[10px] text-slate-500 leading-relaxed">
                          Keep chronological logs of login events, session handshakes, and credential verification events.
                        </p>
                      </div>
                      <button
                        type="button"
                        onClick={() => handleTogglePref('vgb_pref_security_log', prefSecurityLog, setPrefSecurityLog, 'Security Logs')}
                        className={`w-10 h-5.5 rounded-full p-0.5 flex items-center shrink-0 cursor-pointer transition-all duration-300 ${
                          prefSecurityLog ? 'bg-gradient-to-r from-purple-500 to-indigo-500 justify-end' : 'bg-slate-600/40 dark:bg-white/10 justify-start'
                        }`}
                      >
                        <span className="w-4.5 h-4.5 bg-white rounded-full shadow-md shadow-slate-900/30" />
                      </button>
                    </div>

                    {/* Toggle item 4 */}
                    <div className="flex items-start justify-between gap-4 p-3 rounded-xl border border-slate-500/5 hover:bg-slate-500/[0.02] transition-all">
                      <div className="space-y-0.5">
                        <span className={`block text-xs font-extrabold ${isDark ? 'text-slate-200' : 'text-slate-800'}`}>Weekly Catalog Addition Alerts</span>
                        <p className="text-[10px] text-slate-500 leading-relaxed">
                          Get updates on newly published creative portfolios and digital templates.
                        </p>
                      </div>
                      <button
                        type="button"
                        onClick={() => handleTogglePref('vgb_pref_weekly_releases', prefWeeklyReleases, setPrefWeeklyReleases, 'Marketing Alerts')}
                        className={`w-10 h-5.5 rounded-full p-0.5 flex items-center shrink-0 cursor-pointer transition-all duration-300 ${
                          prefWeeklyReleases ? 'bg-gradient-to-r from-purple-500 to-indigo-500 justify-end' : 'bg-slate-600/40 dark:bg-white/10 justify-start'
                        }`}
                      >
                        <span className="w-4.5 h-4.5 bg-white rounded-full shadow-md shadow-slate-900/30" />
                      </button>
                    </div>

                  </div>
                </div>

                {/* THE DANGER ZONE: CONFIRM AND TYPE DELETE BLOCK */}
                <div className={`p-6 rounded-2xl border ${
                  isDark ? 'border-rose-500/10 bg-rose-950/5' : 'border-rose-200 bg-rose-50/20'
                }`}>
                  <h4 className="text-xs font-mono uppercase tracking-wider font-extrabold text-rose-500 mb-3 flex items-center gap-2">
                    <ShieldAlert className="w-4 h-4 text-rose-500 animate-pulse" />
                    <span>Danger Zone Account Security Protocol</span>
                  </h4>
                  
                  <div className="space-y-4">
                    <p className={`text-[11px] leading-relaxed ${isDark ? 'text-slate-400' : 'text-slate-600'}`}>
                      Deleting your account will trigger the instant deactivation of your credentials and permanently erase your active service agreements, purchase records, and locally recorded files securely. This is <strong>irreversible</strong> and recovery is disabled.
                    </p>

                    {!showDeleteConfirm ? (
                      <button
                        type="button"
                        onClick={() => setShowDeleteConfirm(true)}
                        className="px-4 py-2 bg-rose-500/10 hover:bg-rose-500/20 border border-rose-500/15 text-rose-400 text-xs font-bold rounded-xl cursor-pointer transition-colors"
                      >
                        Inquire Account Deletion Protocol
                      </button>
                    ) : (
                      <div className="space-y-4 pt-2 border-t border-rose-500/10 animate-fade-in text-left">
                        
                        {/* Checkbox confirmation */}
                        <label className="flex items-start gap-2.5 cursor-pointer select-none">
                          <input
                            type="checkbox"
                            checked={hasAcknowledgedDelete}
                            onChange={(e) => setHasAcknowledgedDelete(e.target.checked)}
                            className="mt-1 accent-rose-500 scale-105 cursor-pointer"
                          />
                          <span className={`text-[10px] leading-relaxed font-semibold ${isDark ? 'text-slate-305' : 'text-slate-700'}`}>
                            I verify that I wish to erase usr_{currentUser.id} permanently and destroy all logged transactions records.
                          </span>
                        </label>

                        {/* Input Type "Delete" */}
                        <div className="space-y-1.5">
                          <label className={`text-[10px] font-mono block uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-600'}`}>
                            Type <strong className="text-rose-500 font-bold">Delete</strong> inside the container below to confirm
                          </label>
                          <input
                            type="text"
                            value={deleteInput}
                            onChange={(e) => setDeleteInput(e.target.value)}
                            placeholder="Type Delete"
                            className={`w-full border focus:border-rose-500 focus:ring-1 focus:ring-rose-500/30 rounded-xl px-4 py-2 text-xs outline-none transition-all ${
                              isDark 
                                ? 'bg-slate-950 border-white/10 text-slate-100' 
                                : 'bg-white border-slate-300 text-slate-900'
                            }`}
                          />
                        </div>

                        {deleteError && (
                          <div className="flex items-center gap-1.5 text-[10px] text-rose-500 font-mono bg-rose-500/10 p-2 rounded-lg border border-rose-500/15">
                            <AlertCircle className="w-3.5 h-3.5 animate-bounce" />
                            <span>{deleteError}</span>
                          </div>
                        )}

                        {/* Buttons option bar */}
                        <div className="flex gap-2.5">
                          <button
                            type="button"
                            onClick={handleExecuteDeleteAccount}
                            disabled={!hasAcknowledgedDelete || deleteInput !== 'Delete'}
                            className={`px-4 py-2.5 rounded-xl text-xs font-bold text-white flex items-center gap-1.5 border transition-all ${
                              hasAcknowledgedDelete && deleteInput === 'Delete'
                                ? 'bg-rose-600 hover:bg-rose-500 border-rose-500 shadow-md shadow-rose-500/10 cursor-pointer animate-pulse'
                                : 'bg-slate-100 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-400 dark:text-slate-500 cursor-not-allowed'
                            }`}
                          >
                            <Trash2 className="w-3.5 h-3.5" />
                            <span>Wipe Account Permanently</span>
                          </button>
                          
                          <button
                            type="button"
                            onClick={() => {
                              setShowDeleteConfirm(false);
                              setDeleteInput('');
                              setHasAcknowledgedDelete(false);
                              setDeleteError('');
                            }}
                            className={`px-4 py-2.5 rounded-xl text-xs font-semibold border cursor-pointer hover:bg-slate-500/5 transition-all ${
                              isDark ? 'border-white/10 text-slate-300' : 'border-slate-250 text-slate-650'
                            }`}
                          >
                            Abort Protocol
                          </button>
                        </div>
                      </div>
                    )}
                  </div>
                </div>

              </div>

            </div>
          </div>
        )}

        {activeTab === 'emails' && (
          /* Emails Sandbox tab logic block */
          <div>
            <div className="flex items-center gap-2 mb-6 pb-4 border-b border-slate-300/10 justify-between">
              <div className="flex items-center gap-2">
                <Inbox className="w-5 h-5 text-cyan-400" />
                <div>
                  <h3 className={`font-display font-black text-lg ${isDark ? 'text-slate-100' : 'text-slate-800'}`}>
                    Simulated SMTP Mailbox & Automated Alerts
                  </h3>
                  <p className="text-[11px] text-slate-500 mt-0.5">
                    This sandbox environment intercepts automated system emails whenever designers alter your project phase in the Admin tab.
                  </p>
                </div>
              </div>

              {simulatedEmails.filter(e => 
                e.toEmail.toLowerCase() === currentUser.email.toLowerCase() ||
                e.toEmail.toLowerCase() === 'guest@masterdigital.agency' ||
                e.toEmail.toLowerCase() === 'client@masterdigital.agency'
              ).length > 0 && (
                <button
                  id="purge-emails-btn"
                  onClick={() => {
                    clearAllEmails();
                    setSelectedEmailId(null);
                  }}
                  className="px-3 py-1.5 rounded-xl border border-red-500/20 bg-red-500/10 hover:bg-red-500/20 text-red-400 text-[10px] font-bold tracking-tight cursor-pointer transition-colors flex items-center gap-1.5"
                >
                  <Trash2 className="w-3.5 h-3.5" />
                  <span>Purge Logs</span>
                </button>
              )}
            </div>

            {/* Simulated Emails Grid Panel */}
            {(() => {
              const relevant = simulatedEmails.filter(e => 
                e.toEmail.toLowerCase() === currentUser.email.toLowerCase() ||
                e.toEmail.toLowerCase() === 'guest@masterdigital.agency' ||
                e.toEmail.toLowerCase() === 'client@masterdigital.agency'
              );

              const selectedEmail = relevant.find(e => e.id === selectedEmailId) || relevant[0] || null;

              return (
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-6" id="secure-alerts-inbox">
                  {/* Left Column: Email list */}
                  <div className="lg:col-span-5 space-y-3.5 max-h-[500px] overflow-y-auto pr-1">
                    {relevant.length === 0 ? (
                      <div className="text-center py-16 rounded-3xl border border-dashed border-slate-500/10 bg-slate-500/[0.01] space-y-3">
                        <Mail className="w-8 h-8 text-slate-500/30 mx-auto" />
                        <p className="text-xs text-slate-400 font-bold">Mailbox Empty</p>
                        <p className="text-[10px] text-slate-500 leading-relaxed max-w-xs mx-auto">
                          Order receipts and pipeline alerts will show up here dynamically when you place a custom brief or update orders in the Administrator view.
                        </p>
                      </div>
                    ) : (
                      relevant.map((email) => {
                        const isSelected = selectedEmail?.id === email.id;
                        return (
                          <div
                            key={email.id}
                            onClick={() => {
                              setSelectedEmailId(email.id);
                              markEmailAsRead(email.id);
                            }}
                            className={`p-4 rounded-2xl border text-left transition-all relative overflow-hidden cursor-pointer ${
                              isSelected 
                                ? isDark 
                                  ? 'bg-purple-950/20 border-purple-500/35 shadow-md shadow-purple-950/10' 
                                  : 'bg-slate-100 border-slate-300 shadow-sm'
                                : isDark
                                  ? 'bg-white/[0.01] hover:bg-white/[0.02] border-white/5'
                                  : 'bg-white hover:bg-slate-50 border-slate-200'
                            }`}
                          >
                            {/* Blue dot indicator for Unread */}
                            {!email.read && (
                              <span className="absolute top-3.5 right-3.5 flex h-1.5 w-1.5 rounded-full bg-cyan-400 animate-pulse" />
                            )}

                            <div className="space-y-1">
                              <div className="flex items-center justify-between text-[9px] font-mono text-slate-500">
                                <span className="font-bold uppercase text-purple-400">SMTP: secure@masterdigital.agency</span>
                                <span>{new Date(email.timestamp).toLocaleDateString([], { month: 'short', day: 'numeric' })}</span>
                              </div>

                              <h4 className={`text-xs font-bold line-clamp-1 truncate ${
                                email.read ? 'text-slate-400 font-semibold' : 'text-slate-105 font-extrabold'
                              }`}>
                                {email.subject}
                              </h4>

                              <p className="text-[10px] text-slate-500 line-clamp-2 leading-relaxed">
                                {email.body}
                              </p>

                              {email.referenceCode && email.referenceCode !== 'SYSTEM' && (
                                <span className="inline-block mt-1 font-mono text-[8px] font-black uppercase tracking-widest bg-cyan-500/10 text-cyan-400 px-1.5 py-0.5 rounded-md">
                                  Ref: {email.referenceCode}
                                </span>
                              )}
                            </div>
                          </div>
                        );
                      })
                    )}
                  </div>

                  {/* Right Column: Email Sandbox Detail reader */}
                  <div className="lg:col-span-7">
                    {selectedEmail ? (
                      <div className={`p-6 rounded-3xl border h-full flex flex-col justify-between text-left ${
                        isDark ? 'bg-slate-500/[0.03] border-white/5' : 'bg-slate-50/70 border-slate-205'
                      }`}>
                        <div className="space-y-5">
                          {/* Subject and administrative triggers */}
                          <div className="flex items-start justify-between pb-4 border-b border-slate-500/10 gap-3">
                            <div className="space-y-1.5">
                              <div className="flex items-center gap-2">
                                <span className="text-[9px] font-mono uppercase tracking-widest bg-cyan-500/10 border border-cyan-500/15 text-cyan-400 px-2 py-0.5 rounded-md font-bold">
                                  INTERCEPT_SUCCESS
                                </span>
                                <span className="text-[9px] font-mono text-slate-500">
                                  DKIM Verified (2048-bit)
                                </span>
                              </div>
                              <h3 className={`font-display font-black text-sm sm:text-base ${isDark ? 'text-white' : 'text-slate-900'}`}>
                                {selectedEmail.subject}
                              </h3>
                            </div>
                            <button
                              id="individual-email-delete"
                              onClick={() => {
                                deleteSimulatedEmail(selectedEmail.id);
                                setSelectedEmailId(null);
                              }}
                              className="p-2 rounded-xl text-red-400 bg-red-400/5 hover:bg-red-500/10 border border-red-500/10 transition-colors cursor-pointer"
                              title="Delete email log"
                            >
                              <Trash2 className="w-4 h-4" />
                            </button>
                          </div>

                          {/* Email Envelop Metadata Pane */}
                          <div className={`p-3.5 rounded-2xl border text-[10px] font-mono space-y-1.5 ${
                            isDark ? 'bg-black/30 border-white/5' : 'bg-white border-slate-200'
                          }`}>
                            <div className="flex items-center justify-between">
                              <span className="text-slate-500">FROM:</span>
                              <span className="font-extrabold text-purple-400">notifications@masterdigital.agency &lt;SMTP Relay Node&gt;</span>
                            </div>
                            <div className="flex items-center justify-between">
                              <span className="text-slate-500">TO:</span>
                              <span className="font-extrabold text-slate-350">{selectedEmail.toEmail}</span>
                            </div>
                            <div className="flex items-center justify-between">
                              <span className="text-slate-500">TIMING:</span>
                              <span className="text-slate-400">{new Date(selectedEmail.timestamp).toUTCString()}</span>
                            </div>
                            <div className="flex items-center justify-between pt-1 border-t border-slate-500/10 text-[9px]">
                              <span className="text-emerald-400 font-bold flex items-center gap-1">
                                <CheckCircle className="w-3 h-3 text-emerald-400" /> SPF Authorization Approved (Pass)
                              </span>
                              <span className="text-cyan-400 font-mono">Simulated Delivery Node</span>
                            </div>
                          </div>

                          {/* Render Email Body contents with formatting */}
                          <div className={`py-2 whitespace-pre-wrap text-xs md:text-sm leading-relaxed tracking-wide font-sans ${
                            isDark ? 'text-slate-300' : 'text-slate-700'
                          }`}>
                            {selectedEmail.body}
                          </div>
                        </div>

                        {/* Security Ledger notice footer */}
                        <div className="mt-6 pt-4 border-t border-slate-500/10 flex items-center gap-2 t-[9px] text-slate-500 font-mono">
                          <AlertCircle className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
                          <span className="text-[10px]">Secure SMTP ledger is saved in secure local browser storage sandbox only.</span>
                        </div>
                      </div>
                    ) : (
                      <div className="h-full min-h-[350px] border border-dashed border-slate-500/10 bg-slate-500/[0.01] rounded-3xl flex flex-col items-center justify-center p-6 text-center space-y-3">
                        <Inbox className="w-8 h-8 text-slate-500/30 animate-bounce-slow" />
                        <h4 className="text-xs font-bold text-slate-400">Empty Reading Pane</h4>
                        <p className="text-[10px] text-slate-500 max-w-sm mx-auto leading-relaxed">
                          Select an intercepted dispatch alert from the inbox left pane to render the sandboxSMTP email headers, digital signatures, and metadata.
                        </p>
                      </div>
                    )}
                  </div>
                </div>
              );
            })()}
          </div>
        )}
      </motion.div>
    </div>
  );
}