'use client';

import React, { useState, useEffect, useRef } from 'react';
import { useApp, Order, Product } from '@/context/AppContext';
import { DollarSign, Inbox, Users, Layers, CheckCircle, Clock, Trash, Play, Check, Plus, FolderPlus, ClipboardList, RefreshCw, Download, Image as ImageIcon, Search, Bell, X, Calendar, Filter, Pencil, Trash2 } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';

function calculatePureSeed(str: string): number {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  return Math.abs(hash) % 1000;
}

let toastIdCounter = 0;

export default function AdminDashboardView() {
  const { products, orders, updateOrderStatus, updateOrderNotes, addProduct, updateProduct, deleteProduct, addPortfolioItem, updatePortfolioItem, deletePortfolioItem, portfolio, theme, formatPrice, deleteOrder, sendSimulatedEmail, adminTeam, inviteAdminMember, updateAdminRole, removeAdminMember } = useApp();
  const [adminSection, setAdminSection] = useState<'overview' | 'orders' | 'product_manager' | 'portfolio_manager' | 'team_manager'>('overview');

  const [toasts, setToasts] = useState<{ id: string; message: string; type: 'success' | 'info' | 'warning' | 'error' }[]>([]);

  // Real-time custom team invitation compose states
  const [inviteEmail, setInviteEmail] = useState('');
  const [inviteRole, setInviteRole] = useState<'Super Admin' | 'Editor' | 'Viewer' | 'SLA Operator'>('Editor');

  // Real-time custom notifications compose states
  const [notifyingOrder, setNotifyingOrder] = useState<Order | null>(null);
  const [customEmailSubject, setCustomEmailSubject] = useState('');
  const [customEmailBody, setCustomEmailBody] = useState('');
  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
  const [confirmDeleteMemberId, setConfirmDeleteMemberId] = useState<string | null>(null);

  // Product list editing states
  const [editingProduct, setEditingProduct] = useState<Product | null>(null);
  const [editFormData, setEditFormData] = useState({
    name: '',
    price: '',
    category: 'digital_products' as Product['category'],
    tags: 'Aged, Premium, Verified',
    deliveryTime: 'Instant Access',
    description: '',
    mediaUrl: '',
    isDigital: 'true',
    inStock: 'true',
  });
  const [editPriceCurrency, setEditPriceCurrency] = useState<'USD' | 'MMK'>('USD');
  const [editImageError, setEditImageError] = useState(false);
  const [editAiPrompt, setEditAiPrompt] = useState('');
  const [editIsGeneratingImage, setEditIsGeneratingImage] = useState(false);
  const [editAiGenError, setEditAiGenError] = useState<string | null>(null);

  // Portfolio manager list editing states
  const [editingPortfolio, setEditingPortfolio] = useState<any | null>(null);
  const [editPortfolioFormData, setEditPortfolioFormData] = useState({
    title: '',
    category: 'graphic_design' as 'graphic_design' | 'video_editing',
    mediaUrl: '',
    videoSrc: '',
    aspectRatio: 'aspect-square' as 'aspect-square' | 'aspect-[3/4]' | 'aspect-[4/5]' | 'aspect-[16/9]' | 'aspect-[4/3]',
    tags: 'Branding, Video, Visuals',
    description: '',
  });
  const [editPortfolioImageError, setEditPortfolioImageError] = useState(false);
  const [editPortfolioAiPrompt, setEditPortfolioAiPrompt] = useState('');
  const [editPortfolioIsGeneratingImage, setEditPortfolioIsGeneratingImage] = useState(false);
  const [editPortfolioAiGenError, setEditPortfolioAiGenError] = useState<string | null>(null);

  // Custom inline delete confirmation modal state (bypasses Sandboxed Iframe window.confirm blocks)
  const [deleteConfirmation, setDeleteConfirmation] = useState<{
    id: string;
    title: string;
    type: 'product' | 'portfolio';
    categoryLabel?: string;
  } | null>(null);

  // Draft product state from localStorage
  const [hasDraft, setHasDraft] = useState(false);

  useEffect(() => {
    try {
      const saved = localStorage.getItem('catalog_product_draft');
      if (saved) {
        setTimeout(() => {
          setHasDraft(true);
        }, 10);
      }
    } catch (e) {
      console.error('Error reading localStorage standard draft:', e);
    }
  }, []);

  const handleStartEdit = (product: Product) => {
    setEditingProduct(product);
    setEditFormData({
      name: product.name,
      price: product.price.toString(),
      category: product.category,
      tags: product.tags.join(', '),
      deliveryTime: product.deliveryTime || '',
      description: product.description,
      mediaUrl: product.mediaUrl || '',
      isDigital: product.isDigital ? 'true' : 'false',
      inStock: product.inStock !== false ? 'true' : 'false',
    });
    setEditPriceCurrency('USD');
    setEditImageError(false);
    setEditAiPrompt('');
    setEditAiGenError(null);
  };

  const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    setEditFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));
    if (e.target.name === 'mediaUrl') {
      setEditImageError(false);
    }
  };

  const handleUpdateProductSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!editingProduct) return;
    if (!editFormData.name || !editFormData.price || !editFormData.description) return;

    const formattedTags = editFormData.tags.split(',').map((t) => t.trim()).filter(Boolean);
    const seed = calculatePureSeed(editFormData.name);
    const resolvedMedia = editFormData.mediaUrl || `https://picsum.photos/seed/${seed}/600/400`;

    const rawPrice = parseFloat(editFormData.price);
    const priceInUSD = editPriceCurrency === 'MMK' ? rawPrice / 4000 : rawPrice;

    updateProduct(editingProduct.id, {
      name: editFormData.name,
      price: priceInUSD,
      category: editFormData.category,
      tags: formattedTags,
      deliveryTime: editFormData.deliveryTime,
      description: editFormData.description,
      mediaUrl: resolvedMedia,
      isDigital: editFormData.isDigital === 'true',
      inStock: editFormData.inStock === 'true',
    });

    addToast('Product successfully updated in live catalog!', 'success');
    setEditingProduct(null);
  };

  const handleGenerateAiImageEdit = async (promptText: string) => {
    if (!promptText.trim()) return;
    setEditIsGeneratingImage(true);
    setEditAiGenError(null);
    setEditImageError(false);

    try {
      const response = await fetch('/api/gemini/generate-image', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ prompt: promptText }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Failed to generate image');
      }

      if (data.imageUrl) {
        setEditFormData((prev) => ({ ...prev, mediaUrl: data.imageUrl }));
      } else {
        throw new Error('No image URL returned from server.');
      }
    } catch (err: any) {
      console.error(err);
      const errMsg = err.message || '';
      const isQuota = errMsg.includes('quota') || errMsg.includes('Quota') || errMsg.includes('limit') || errMsg.includes('RESOURCE_EXHAUSTED') || errMsg.includes('429');
      
      if (isQuota) {
        const keywords = promptText.trim().replace(/[^\w\s]/gi, '').split(/\s+/).filter(w => w.length > 3);
        const seedIndex = calculatePureSeed(promptText) % (keywords.length > 0 ? keywords.length : 1);
        const selectedKeyword = keywords.length > 0 ? keywords[seedIndex].toLowerCase() : 'digital';
        const seedVal = (calculatePureSeed(promptText) + 5) % 1000;
        const fallbackUrl = `https://picsum.photos/seed/${selectedKeyword}-${seedVal}/600/400`;
        
        setEditFormData((prev) => ({ ...prev, mediaUrl: fallbackUrl }));
        setEditAiGenError("Gemini API quota rate-limit exceeded. We have gracefully populated a vibrant placeholder visual.");
      } else {
        setEditAiGenError(err.message || 'An error occurred while generating the image.');
      }
    } finally {
      setEditIsGeneratingImage(false);
    }
  };

  const handleStartEditPortfolio = (item: any) => {
    setEditingPortfolio(item);
    setEditPortfolioFormData({
      title: item.title,
      category: item.category,
      mediaUrl: item.mediaUrl || '',
      videoSrc: item.videoSrc || '',
      aspectRatio: item.aspectRatio || 'aspect-[16/9]',
      tags: item.tags.join(', '),
      description: item.description,
    });
    setEditPortfolioImageError(false);
    setEditPortfolioAiPrompt('');
    setEditPortfolioAiGenError(null);
  };

  const handleEditPortfolioInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    setEditPortfolioFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));
    if (e.target.name === 'mediaUrl') {
      setEditPortfolioImageError(false);
    }
  };

  const handleUpdatePortfolioSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!editingPortfolio) return;
    if (!editPortfolioFormData.title || !editPortfolioFormData.description) return;

    const formattedTags = editPortfolioFormData.tags.split(',').map((t) => t.trim()).filter(Boolean);
    const resolvedMedia = editPortfolioFormData.mediaUrl || `https://picsum.photos/seed/${calculatePureSeed(editPortfolioFormData.title)}/600/400`;

    updatePortfolioItem(editingPortfolio.id, {
      title: editPortfolioFormData.title,
      category: editPortfolioFormData.category,
      mediaUrl: resolvedMedia,
      videoSrc: editPortfolioFormData.category === 'video_editing' ? editPortfolioFormData.videoSrc : undefined,
      aspectRatio: editPortfolioFormData.aspectRatio,
      tags: formattedTags,
      description: editPortfolioFormData.description,
    });

    addToast(`Portfolio item "${editPortfolioFormData.title}" updated successfully!`, 'success');
    setEditingPortfolio(null);
  };

  const handleGenerateAiImagePortfolioEdit = async (promptText: string) => {
    if (!promptText.trim()) return;
    setEditPortfolioIsGeneratingImage(true);
    setEditPortfolioAiGenError(null);
    setEditPortfolioImageError(false);

    try {
      const response = await fetch('/api/gemini/generate-image', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ prompt: promptText }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Failed to generate image');
      }

      if (data.imageUrl) {
        setEditPortfolioFormData((prev) => ({ ...prev, mediaUrl: data.imageUrl }));
      } else {
        throw new Error('No image URL returned from server.');
      }
    } catch (err: any) {
      console.error(err);
      const errMsg = err.message || '';
      const isQuota = errMsg.includes('quota') || errMsg.includes('Quota') || errMsg.includes('limit') || errMsg.includes('RESOURCE_EXHAUSTED') || errMsg.includes('429');
      
      if (isQuota) {
        const keywords = promptText.trim().replace(/[^\w\s]/gi, '').split(/\s+/).filter(w => w.length > 3);
        const seedIndex = calculatePureSeed(promptText) % (keywords.length > 0 ? keywords.length : 1);
        const selectedKeyword = keywords.length > 0 ? keywords[seedIndex].toLowerCase() : 'digital';
        const seedVal = (calculatePureSeed(promptText) + 9) % 1000;
        const fallbackUrl = `https://picsum.photos/seed/${selectedKeyword}-${seedVal}/600/400`;
        
        setEditPortfolioFormData((prev) => ({ ...prev, mediaUrl: fallbackUrl }));
        setEditPortfolioAiGenError("Gemini API quota rate-limit exceeded. We have gracefully populated a vibrant placeholder visual.");
      } else {
        setEditPortfolioAiGenError(err.message || 'An error occurred while generating the image.');
      }
    } finally {
      setEditPortfolioIsGeneratingImage(false);
    }
  };

  const addToast = (message: string, type: 'success' | 'info' | 'warning' | 'error' = 'info') => {
    const id = `toast-${toastIdCounter++}`;
    setToasts((prev) => [...prev, { id, message, type }]);
    
    // Auto-remove after 4.5 seconds
    setTimeout(() => {
      setToasts((prev) => prev.filter((t) => t.id !== id));
    }, 4500);
  };

  const removeToast = (id: string) => {
    setToasts((prev) => prev.filter((t) => t.id !== id));
  };

  const previousOrdersRef = useRef<Order[]>([]);

  // Correctly initialize reference map on first render
  useEffect(() => {
    if (orders && previousOrdersRef.current.length === 0) {
      previousOrdersRef.current = orders;
    }
  }, [orders]);

  // Track new orders and status updates using previousOrdersRef
  useEffect(() => {
    if (!orders) return;
    const prevOrders = previousOrdersRef.current;
    
    // If it's the exact same array reference, or we haven't seeded yet, skip toast triggers
    if (prevOrders === orders || prevOrders.length === 0) {
      previousOrdersRef.current = orders;
      return;
    }

    const newlyAdded: Order[] = [];
    const statusChanges: { order: Order; oldStatus: Order['status']; newStatus: Order['status'] }[] = [];

    const prevMap = new Map<string, Order>(prevOrders.map((o) => [o.id, o]));

    orders.forEach((or) => {
      const prevOrder = prevMap.get(or.id);
      if (!prevOrder) {
        newlyAdded.push(or);
      } else if (prevOrder.status !== or.status) {
        statusChanges.push({ order: or, oldStatus: prevOrder.status, newStatus: or.status });
      }
    });

    if (newlyAdded.length > 0 || statusChanges.length > 0) {
      newlyAdded.forEach((or) => {
        addToast(`New order ${or.reference} received from ${or.clientName} for ${formatPrice(or.totalPrice)}`, 'success');
      });

      statusChanges.forEach(({ order, oldStatus, newStatus }) => {
        const formatStatus = (s: string) => s.replace('_', ' ').toUpperCase();
        addToast(`Order ${order.reference} status updated: ${formatStatus(oldStatus)} → ${formatStatus(newStatus)}`, 'info');
      });
    }

    previousOrdersRef.current = orders;
  }, [orders, formatPrice]);

  const isDark = theme === 'dark';

  // New product form states
  const [formData, setFormData] = useState({
    name: '',
    price: '',
    category: 'digital_products' as Product['category'],
    tags: 'Aged, Premium, Verified',
    deliveryTime: 'Instant Access',
    description: '',
    mediaUrl: '',
    isDigital: 'true',
    inStock: 'true',
  });

  const [priceCurrency, setPriceCurrency] = useState<'USD' | 'MMK'>('USD');

  const [formSuccess, setFormSuccess] = useState(false);
  const [exportSuccess, setExportSuccess] = useState(false);
  const [imageError, setImageError] = useState(false);

  // Portfolio manager form states
  const [portfolioData, setPortfolioData] = useState({
    title: '',
    category: 'graphic_design' as 'graphic_design' | 'video_editing',
    mediaUrl: '',
    videoSrc: '',
    aspectRatio: 'aspect-[16/9]' as 'aspect-square' | 'aspect-[3/4]' | 'aspect-[16/9]' | 'aspect-[4/3]',
    tags: 'Branding, Video, Visuals',
    description: '',
  });

  const [portfolioSuccess, setPortfolioSuccess] = useState(false);
  const [portfolioImageError, setPortfolioImageError] = useState(false);

  const [aiPrompt, setAiPrompt] = useState('');
  const [isGeneratingImage, setIsGeneratingImage] = useState(false);
  const [aiGenError, setAiGenError] = useState<string | null>(null);
  const [statusFilter, setStatusFilter] = useState<'all' | 'pending' | 'in_progress' | 'completed'>('all');
  const [orderSearch, setOrderSearch] = useState('');
  const [inventoryFilter, setInventoryFilter] = useState<'all' | 'products' | 'services'>('all');

  // Date-range filter states for the Order Ledger
  const [startDate, setStartDate] = useState<string>('');
  const [endDate, setEndDate] = useState<string>('');

  const applyPreset = (preset: 'today' | 'week' | 'month' | 'all') => {
    const today = new Date();
    const todayStr = today.toISOString().slice(0, 10);
    
    if (preset === 'today') {
      setStartDate(todayStr);
      setEndDate(todayStr);
    } else if (preset === 'week') {
      const past = new Date();
      past.setDate(past.getDate() - 7);
      setStartDate(past.toISOString().slice(0, 10));
      setEndDate(todayStr);
    } else if (preset === 'month') {
      const past = new Date();
      past.setDate(past.getDate() - 30);
      setStartDate(past.toISOString().slice(0, 10));
      setEndDate(todayStr);
    } else {
      setStartDate('');
      setEndDate('');
    }
  };

  const filteredOrders = !orders ? [] : orders.filter((or) => {
    const query = orderSearch.trim().toLowerCase();
    if (!query) return true;
    return (
      or.clientName.toLowerCase().includes(query) ||
      or.reference.toLowerCase().includes(query)
    );
  });

  // Filtered orders specifically for the Audited System Ledger and analytic stats
  const ledgerOrders = !orders ? [] : orders.filter((or) => {
    if (!or.createdAt) return true;
    const orderDate = new Date(or.createdAt);
    
    if (startDate) {
      const start = new Date(startDate);
      start.setHours(0, 0, 0, 0);
      if (orderDate < start) return false;
    }
    
    if (endDate) {
      const end = new Date(endDate);
      end.setHours(23, 59, 59, 999);
      if (orderDate > end) return false;
    }
    
    return true;
  });

  const exportToCSV = () => {
    if (!ledgerOrders || ledgerOrders.length === 0) return;

    const headers = [
      'Order ID',
      'Reference',
      'Client Name',
      'Client Email',
      'Client Contact',
      'Total Price ($)',
      'Status',
      'Date Created',
      'Items Summary',
      'Custom Instructions'
    ];

    const rows = ledgerOrders.map((order) => {
      const itemsSummary = order.items
        .map((item) => `${item.product.name} (${item.quantity}x @ ${item.product.price})`)
        .join('; ');

      const customInst = order.items
        .map((item) => item.customInstructions || '')
        .filter(Boolean)
        .join('; ');

      return [
        order.id,
        order.reference,
        order.clientName,
        order.clientEmail,
        order.clientContact,
        order.totalPrice.toFixed(2),
        order.status,
        new Date(order.createdAt).toISOString(),
        itemsSummary,
        customInst
      ];
    });

    const csvContent = [
      headers.join(','),
      ...rows.map((row) =>
        row
          .map((field) => {
            const stringified = String(field || '');
            const escaped = stringified.replace(/"/g, '""');
            if (escaped.includes(',') || escaped.includes('"') || escaped.includes('\n') || escaped.includes(';')) {
              return `"${escaped}"`;
            }
            return escaped;
          })
          .join(',')
      )
    ].join('\n');

    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.setAttribute('href', url);
    link.setAttribute('download', `vibe_orders_ledger_${new Date().toISOString().slice(0, 10)}.csv`);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    setExportSuccess(true);
    setTimeout(() => setExportSuccess(false), 4000);
  };

  // Financial Stats Counters derived from filtered ledgerOrders
  const completedRevenue = ledgerOrders
    .filter((o) => o.status === 'completed')
    .reduce((sum, o) => sum + o.totalPrice, 0);

  const pendingRevenue = ledgerOrders
    .filter((o) => o.status === 'pending' || o.status === 'in_progress')
    .reduce((sum, o) => sum + o.totalPrice, 0);

  const activeOrdersCount = ledgerOrders.filter((o) => o.status === 'pending' || o.status === 'in_progress').length;
  const completedCount = ledgerOrders.filter((o) => o.status === 'completed').length;
  const totalUsersCount = Array.from(new Set(ledgerOrders.map((o) => o.clientEmail))).length;

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
    if (e.target.name === 'mediaUrl') {
      setImageError(false);
    }
  };

  const handleSaveDraft = () => {
    try {
      localStorage.setItem('catalog_product_draft', JSON.stringify({
        formData,
        priceCurrency
      }));
      setHasDraft(true);
      addToast('Catalog draft saved successfully to local storage!', 'success');
    } catch (e) {
      console.error(e);
      addToast('Failed to save draft catalog item', 'error');
    }
  };

  const handleLoadDraft = () => {
    try {
      const saved = localStorage.getItem('catalog_product_draft');
      if (saved) {
        const parsed = JSON.parse(saved);
        if (parsed.formData) {
          setFormData(parsed.formData);
        }
        if (parsed.priceCurrency) {
          setPriceCurrency(parsed.priceCurrency);
        }
        addToast('Catalog draft loaded successfully!', 'success');
      }
    } catch (e) {
      console.error(e);
      addToast('Failed to load draft catalog item', 'error');
    }
  };

  const handleDiscardDraft = () => {
    try {
      localStorage.removeItem('catalog_product_draft');
      setHasDraft(false);
      addToast('Draft catalog item discarded', 'info');
    } catch (e) {
      console.error(e);
    }
  };

  const handleGenerateAiImage = async (promptText: string) => {
    if (!promptText.trim()) return;
    setIsGeneratingImage(true);
    setAiGenError(null);
    setImageError(false);

    try {
      const response = await fetch('/api/gemini/generate-image', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ prompt: promptText }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Failed to generate image');
      }

      if (data.imageUrl) {
        setFormData((prev) => ({ ...prev, mediaUrl: data.imageUrl }));
      } else {
        throw new Error('No image URL returned from server.');
      }
    } catch (err: any) {
      console.error(err);
      const errMsg = err.message || '';
      const isQuota = errMsg.includes('quota') || errMsg.includes('Quota') || errMsg.includes('limit') || errMsg.includes('RESOURCE_EXHAUSTED') || errMsg.includes('429');
      
      if (isQuota) {
        // Derive clean keywords from prompt to generate a relevant premium placeholder seeded seed
        const keywords = promptText.trim().replace(/[^\w\s]/gi, '').split(/\s+/).filter(w => w.length > 3);
        const seedIndex = calculatePureSeed(promptText) % (keywords.length > 0 ? keywords.length : 1);
        const selectedKeyword = keywords.length > 0 ? keywords[seedIndex].toLowerCase() : 'digital';
        const seedVal = (calculatePureSeed(promptText) + 7) % 1000;
        const fallbackUrl = `https://picsum.photos/seed/${selectedKeyword}-${seedVal}/600/400`;
        
        setFormData((prev) => ({ ...prev, mediaUrl: fallbackUrl }));
        setAiGenError("Gemini API quota rate-limit exceeded. We have gracefully populated a vibrant, high-quality keyword placeholder so you can preserve your admin catalog flow!");
      } else {
        setAiGenError(err.message || 'An error occurred while generating the image.');
      }
    } finally {
      setIsGeneratingImage(false);
    }
  };

  const handleCreateProduct = (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.name || !formData.price || !formData.description) return;

    const formattedTags = formData.tags.split(',').map((t) => t.trim()).filter(Boolean);
    const seed = calculatePureSeed(formData.name);
    const resolvedMedia = formData.mediaUrl || `https://picsum.photos/seed/${seed}/600/400`;

    const rawPrice = parseFloat(formData.price);
    const priceInUSD = priceCurrency === 'MMK' ? rawPrice / 4000 : rawPrice;

    addProduct({
      name: formData.name,
      price: priceInUSD,
      category: formData.category,
      tags: formattedTags,
      deliveryTime: formData.deliveryTime,
      description: formData.description,
      mediaUrl: resolvedMedia,
      isDigital: formData.isDigital === 'true',
      inStock: formData.inStock === 'true',
    });

    setFormSuccess(true);
    setFormData({
      name: '',
      price: '',
      category: 'digital_products',
      tags: 'Aged, Premium, Verified',
      deliveryTime: 'Instant Access',
      description: '',
      mediaUrl: '',
      isDigital: 'true',
      inStock: 'true',
    });
    setPriceCurrency('USD');
    try {
      localStorage.removeItem('catalog_product_draft');
      setHasDraft(false);
    } catch (e) {
      console.error('Error clearing localStorage draft:', e);
    }

    setTimeout(() => setFormSuccess(false), 3000);
  };

  const handlePortfolioInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    setPortfolioData({ ...portfolioData, [e.target.name]: e.target.value });
    if (e.target.name === 'mediaUrl') {
      setPortfolioImageError(false);
    }
  };

  const handleCreatePortfolioItem = (e: React.FormEvent) => {
    e.preventDefault();
    if (!portfolioData.title || !portfolioData.description) return;

    const formattedTags = portfolioData.tags.split(',').map((t) => t.trim()).filter(Boolean);
    const seed = calculatePureSeed(portfolioData.title);
    const resolvedMedia = portfolioData.mediaUrl || `https://picsum.photos/seed/${seed}/600/400`;

    addPortfolioItem({
      title: portfolioData.title,
      category: portfolioData.category,
      mediaUrl: resolvedMedia,
      videoSrc: portfolioData.category === 'video_editing' ? portfolioData.videoSrc : undefined,
      aspectRatio: portfolioData.aspectRatio,
      tags: formattedTags,
      description: portfolioData.description,
    });

    setPortfolioSuccess(true);
    addToast(`Portfolio item "${portfolioData.title}" successfully loaded as context payload!`, 'success');
    
    setPortfolioData({
      title: '',
      category: 'graphic_design',
      mediaUrl: '',
      videoSrc: '',
      aspectRatio: 'aspect-[16/9]',
      tags: 'Concept, Modern, High-Vibe',
      description: '',
    });

    setTimeout(() => setPortfolioSuccess(false), 3000);
  };

  return (
    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 py-8" id="admin-dashboard-container">
      
      {/* Outer grid layout with responsive main content vs tab triggers sidebar */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
        
        {/* Sidebar glass navigation menu */}
        <div className="lg:col-span-3 space-y-4">
          <div className={`rounded-3xl border p-5 space-y-4 transition-all duration-300 ${
            isDark ? 'border-white/10 bg-white/5 backdrop-blur-md' : 'border-slate-200 bg-white shadow-sm'
          }`}>
            <div className={`flex items-center gap-2 mb-2 p-1.5 border-b transition-colors duration-300 ${
              isDark ? 'border-white/[0.04]' : 'border-slate-100'
            }`}>
              <Layers className="w-4 h-4 text-purple-500" />
              <h3 className="text-xs font-mono font-bold uppercase tracking-wider text-slate-400">Control Hub</h3>
            </div>

            <nav className="flex flex-col gap-1">
              <button
                onClick={() => setAdminSection('overview')}
                className={`w-full px-4 py-3 rounded-xl text-left text-xs font-semibold flex items-center justify-between cursor-pointer transition-all duration-300 ${
                  adminSection === 'overview'
                    ? isDark
                      ? 'bg-purple-500/15 text-purple-300 border border-purple-500/20 shadow-[0_0_15px_rgba(168,85,247,0.1)]'
                      : 'bg-purple-550/10 text-purple-600 border border-purple-200 shadow-sm'
                    : isDark
                      ? 'text-slate-400 hover:text-slate-100 hover:bg-white/5 border border-transparent'
                      : 'text-slate-500 hover:text-slate-900 hover:bg-slate-50 border border-transparent'
                }`}
              >
                <span>Analytics Overview</span>
                <DollarSign className="w-3.5 h-3.5" />
              </button>

              <button
                id="admin-orders-tab"
                onClick={() => setAdminSection('orders')}
                className={`w-full px-4 py-3 rounded-xl text-left text-xs font-semibold flex items-center justify-between cursor-pointer transition-all duration-300 ${
                  adminSection === 'orders'
                    ? isDark
                      ? 'bg-purple-500/15 text-purple-300 border border-purple-500/20 shadow-[0_0_15px_rgba(168,85,247,0.1)]'
                      : 'bg-purple-550/10 text-purple-600 border border-purple-200 shadow-sm'
                    : isDark
                      ? 'text-slate-400 hover:text-slate-100 hover:bg-white/5 border border-transparent'
                      : 'text-slate-500 hover:text-slate-900 hover:bg-slate-50 border border-transparent'
                }`}
              >
                <span className="flex items-center gap-1.5">
                  <span>SLA Orders Queue</span>
                  {activeOrdersCount > 0 && (
                    <span className="bg-cyan-500/20 text-cyan-600 dark:text-cyan-400 border border-cyan-500/30 text-[9px] px-1.5 py-0.2 rounded-full font-mono font-bold">
                      {activeOrdersCount}
                    </span>
                  )}
                </span>
                <Inbox className="w-3.5 h-3.5" />
              </button>

              <button
                onClick={() => setAdminSection('product_manager')}
                className={`w-full px-4 py-3 rounded-xl text-left text-xs font-semibold flex items-center justify-between cursor-pointer transition-all duration-300 ${
                  adminSection === 'product_manager'
                    ? isDark
                      ? 'bg-purple-500/15 text-purple-300 border border-purple-500/20 shadow-[0_0_15px_rgba(168,85,247,0.1)]'
                      : 'bg-purple-550/10 text-purple-600 border border-purple-200 shadow-sm'
                    : isDark
                      ? 'text-slate-400 hover:text-slate-100 hover:bg-white/5 border border-transparent'
                      : 'text-slate-500 hover:text-slate-900 hover:bg-slate-50 border border-transparent'
                }`}
              >
                <span>Add New Product Offer</span>
                <FolderPlus className="w-3.5 h-3.5" />
              </button>

              <button
                id="admin-portfolio-tab"
                onClick={() => setAdminSection('portfolio_manager')}
                className={`w-full px-4 py-3 rounded-xl text-left text-xs font-semibold flex items-center justify-between cursor-pointer transition-all duration-300 ${
                  adminSection === 'portfolio_manager'
                    ? isDark
                      ? 'bg-purple-500/15 text-purple-300 border border-purple-500/20 shadow-[0_0_15px_rgba(168,85,247,0.1)]'
                      : 'bg-purple-550/10 text-purple-600 border border-purple-200 shadow-sm'
                    : isDark
                      ? 'text-slate-400 hover:text-slate-100 hover:bg-white/5 border border-transparent'
                      : 'text-slate-500 hover:text-slate-900 hover:bg-slate-50 border border-transparent'
                }`}
              >
                <span>Upload Portfolio Work</span>
                <Play className="w-3.5 h-3.5" />
              </button>

              <button
                id="admin-team-tab"
                onClick={() => setAdminSection('team_manager')}
                className={`w-full px-4 py-3 rounded-xl text-left text-xs font-semibold flex items-center justify-between cursor-pointer transition-all duration-300 ${
                  adminSection === 'team_manager'
                    ? isDark
                      ? 'bg-purple-500/15 text-purple-300 border border-purple-500/20 shadow-[0_0_15px_rgba(168,85,247,0.1)]'
                      : 'bg-purple-550/10 text-purple-600 border border-purple-200 shadow-sm'
                    : isDark
                      ? 'text-slate-400 hover:text-slate-100 hover:bg-white/5 border border-transparent'
                      : 'text-slate-500 hover:text-slate-900 hover:bg-slate-50 border border-transparent'
                }`}
              >
                <span>Admin Team Console</span>
                <Users className="w-3.5 h-3.5" />
              </button>
            </nav>
            
            {/* Context meta logs */}
            <div className={`border p-3 rounded-xl text-[10px] space-y-2 transition-colors duration-300 ${
              isDark ? 'bg-white/5 border-white/10 text-slate-400' : 'bg-slate-50 border-slate-200 text-slate-550'
            }`}>
              <span className="text-[9px] font-mono text-purple-500 uppercase tracking-widest font-bold block">Operator Session</span>
              <p className="truncate leading-none font-mono">ID: labawkjohn@gmail.com</p>
              <p className="leading-none font-mono">Channel: US-SLA Gateway</p>
            </div>
          </div>
        </div>

        {/* Main interactive area content */}
        <div className="lg:col-span-9" id="admin-main-viewport">
          
          {/* VIEW A: ANALYTICS OVERVIEW */}
          {adminSection === 'overview' && (
            <div className="space-y-8 animate-fade-in" id="admin-overview-view">
              
              {/* Info ribbon header */}
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                  <h3 className={`font-display font-black text-xl transition-colors duration-300 ${
                    isDark ? 'text-slate-100' : 'text-slate-900'
                  }`}>Performance Metrics</h3>
                  <p className={`text-xs mt-0.5 transition-colors duration-300 ${
                    isDark ? 'text-slate-400' : 'text-slate-500'
                  }`}>Real-time ledger data calculated dynamically from context.</p>
                </div>
                <button
                  id="btn-export-ledger-top"
                  onClick={exportToCSV}
                  className="px-4 py-2 rounded-xl flex items-center justify-center gap-2 text-xs font-bold border border-cyan-400/30 bg-cyan-400/10 hover:bg-cyan-400/25 text-cyan-600 dark:text-cyan-400 hover:text-cyan-800 dark:hover:text-white transition-all duration-300 uppercase tracking-wider cursor-pointer shadow-[0_0_15px_rgba(34,211,238,0.1)] hover:shadow-[0_0_20px_rgba(34,211,238,0.25)]"
                >
                  <Download className="w-4 h-4 text-cyan-500" />
                  <span>Export Order Ledger</span>
                </button>
              </div>

              {exportSuccess && (
                <motion.div 
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  className="p-4 bg-emerald-500/10 border border-emerald-500/30 rounded-xl text-xs text-emerald-600 dark:text-emerald-300 flex items-center gap-2"
                >
                  <CheckCircle className="w-4.5 h-4.5 text-emerald-500" />
                  <span>Success: Order ledger (CSV) generated and downloaded.</span>
                </motion.div>
              )}

              {/* Date Filter & Presets Widget */}
              <div className={`p-4 sm:p-5 rounded-2xl border transition-all duration-300 ${
                isDark ? 'bg-white/5 border-white/5' : 'bg-white border-slate-200 shadow-sm'
              }`} id="ledger-date-filter-panel">
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                  <div className="flex items-center gap-2">
                    <div className="p-2 rounded-lg bg-purple-500/10 text-purple-500">
                      <Filter className="w-4 h-4" />
                    </div>
                    <div>
                      <h4 className={`text-xs font-bold leading-none transition-colors duration-300 ${isDark ? 'text-slate-200' : 'text-slate-800'}`}>
                        Order Ledger Date Filter
                      </h4>
                      <p className={`text-[10px] mt-1 transition-colors duration-300 ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
                        Select a range or dynamic preset to filter performance metrics and system order ledgers.
                      </p>
                    </div>
                  </div>

                  {/* Preset buttons */}
                  <div className="flex flex-wrap gap-1.5 items-center">
                    {[
                      { id: 'all', label: 'All Time' },
                      { id: 'today', label: 'Today' },
                      { id: 'week', label: 'Last 7 Days' },
                      { id: 'month', label: 'Last 30 Days' },
                    ].map((preset) => (
                      <button
                        key={preset.id}
                        type="button"
                        onClick={() => applyPreset(preset.id as 'today' | 'week' | 'month' | 'all')}
                        className={`px-2.5 py-1 rounded-lg text-[10px] font-semibold font-mono uppercase tracking-wider transition-all duration-200 cursor-pointer ${
                          (preset.id === 'all' && !startDate && !endDate) ||
                          (preset.id === 'today' && startDate && startDate === endDate && startDate === new Date().toISOString().slice(0, 10)) ||
                          (preset.id === 'week' && startDate && startDate !== endDate && startDate === (() => { const d = new Date(); d.setDate(d.getDate() - 7); return d.toISOString().slice(0, 10); })()) ||
                          (preset.id === 'month' && startDate && startDate !== endDate && startDate === (() => { const d = new Date(); d.setDate(d.getDate() - 30); return d.toISOString().slice(0, 10); })())
                            ? isDark
                              ? 'bg-purple-500/20 text-purple-300 border border-purple-500/40 shadow-sm'
                              : 'bg-purple-100 text-purple-700 border border-purple-200 shadow-sm'
                            : isDark
                              ? 'bg-transparent text-slate-400 hover:text-slate-200 border border-white/5 hover:bg-white/5'
                              : 'bg-transparent text-slate-600 hover:text-slate-950 border border-slate-205 hover:bg-slate-50'
                        }`}
                      >
                        {preset.label}
                      </button>
                    ))}
                  </div>
                </div>

                <div className={`h-px my-4 ${isDark ? 'bg-white/5' : 'bg-slate-100'}`} />

                {/* Form row */}
                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 items-end">
                  <div>
                    <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold transition-colors duration-305 ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>
                      Start Date
                    </label>
                    <div className="relative">
                      <span className="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none">
                        <Calendar className="w-3.5 h-3.5 text-slate-400" />
                      </span>
                      <input 
                        type="date"
                        value={startDate}
                        onChange={(e) => setStartDate(e.target.value)}
                        className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl pl-9 pr-3 py-2 text-xs outline-none transition-colors duration-300 ${
                          isDark 
                            ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                            : 'bg-slate-50 border-slate-250 text-slate-800'
                        }`}
                      />
                    </div>
                  </div>

                  <div>
                    <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold transition-colors duration-305 ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>
                      End Date
                    </label>
                    <div className="relative">
                      <span className="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none">
                        <Calendar className="w-3.5 h-3.5 text-slate-400" />
                      </span>
                      <input 
                        type="date"
                        value={endDate}
                        onChange={(e) => setEndDate(e.target.value)}
                        className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl pl-9 pr-3 py-2 text-xs outline-none transition-colors duration-300 ${
                          isDark 
                            ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                            : 'bg-slate-50 border-slate-250 text-slate-800'
                        }`}
                      />
                    </div>
                  </div>

                  <div>
                    <button
                      type="button"
                      onClick={() => { setStartDate(''); setEndDate(''); }}
                      disabled={!startDate && !endDate}
                      className={`w-full py-2.5 rounded-xl text-xs font-bold border transition-all duration-300 flex items-center justify-center gap-1.5 cursor-pointer ${
                        !startDate && !endDate
                          ? 'opacity-40 cursor-not-allowed border-slate-200 text-slate-400 bg-transparent'
                          : isDark
                            ? 'border-white/10 hover:border-slate-300 hover:bg-white/5 text-slate-350'
                            : 'border-slate-250 hover:bg-slate-100 text-slate-700'
                      }`}
                    >
                      <span>Reset Filters</span>
                    </button>
                  </div>
                </div>
              </div>

              {/* Stats Cards Row */}
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4" id="overview-metrics-cards">
                
                {/* Revenue Card */}
                <div className={`p-5 rounded-2xl relative overflow-hidden group border transition-colors duration-300 ${
                  isDark ? 'bg-white/5 border-white/5 shadow-none' : 'bg-white border-slate-200 shadow-sm'
                }`}>
                  <div className="absolute top-0 right-0 p-5 opacity-5 group-hover:opacity-10 transition-opacity">
                    <DollarSign className="w-20 h-20 text-slate-400" />
                  </div>
                  <span className="text-[10px] font-mono text-purple-500 uppercase tracking-widest block font-bold mb-1">
                    Settled Revenue
                  </span>
                  <p className={`text-3xl font-display font-black transition-colors duration-300 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                    {formatPrice(completedRevenue)}
                  </p>
                  <p className="text-[10px] text-slate-505 mt-2 flex items-center gap-1">
                    <span className="text-amber-600 font-semibold">{formatPrice(pendingRevenue)} pending</span> in active queue
                  </p>
                </div>

                {/* Orders Card */}
                <div className={`p-5 rounded-2xl relative overflow-hidden group border transition-colors duration-300 ${
                  isDark ? 'bg-white/5 border-white/5 shadow-none' : 'bg-white border-slate-200 shadow-sm'
                }`}>
                  <div className="absolute top-0 right-0 p-5 opacity-5 group-hover:opacity-10 transition-opacity">
                    <Inbox className="w-20 h-20 text-slate-400" />
                  </div>
                  <span className="text-[10px] font-mono text-cyan-550 uppercase tracking-widest block font-bold mb-1">
                    Active Commissions
                  </span>
                  <p className={`text-3xl font-display font-black transition-colors duration-300 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                    {activeOrdersCount}
                  </p>
                  <p className="text-[10px] text-slate-505 mt-2 flex items-center gap-1">
                    <span className="text-cyan-600 font-semibold">{completedCount} tasks completed</span> successfully
                  </p>
                </div>

                {/* Users Count Card */}
                <div className={`p-5 rounded-2xl relative overflow-hidden group border transition-colors duration-300 ${
                  isDark ? 'bg-white/5 border-white/5 shadow-none' : 'bg-white border-slate-200 shadow-sm'
                }`}>
                  <div className="absolute top-0 right-0 p-5 opacity-5 group-hover:opacity-10 transition-opacity">
                    <Users className="w-20 h-20 text-slate-400" />
                  </div>
                  <span className="text-[10px] font-mono text-pink-500 uppercase tracking-widest block font-bold mb-1">
                    Registered Clients
                  </span>
                  <p className={`text-3xl font-display font-black transition-colors duration-300 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                    {totalUsersCount}
                  </p>
                  <p className="text-[10px] text-slate-500 mt-2">
                    Unique secure emails in global pool
                  </p>
                </div>

              </div>

              {/* Advanced Recent transactions log */}
              <div className={`p-6 rounded-2xl border transition-all duration-300 ${
                isDark ? 'bg-white/5 border-white/5' : 'bg-white border-slate-200 shadow-sm'
              }`} id="transactions-ledger">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
                  <div className="flex items-center gap-2">
                    <ClipboardList className="w-4 h-4 text-purple-550" />
                    <h4 className={`font-display font-bold text-sm transition-colors duration-300 ${isDark ? 'text-slate-300' : 'text-slate-800'}`}>Audited System Ledgers (Recent Activity)</h4>
                  </div>
                  <button
                    id="btn-export-ledger-table"
                    onClick={exportToCSV}
                    className="px-3 py-1.5 rounded-xl flex items-center justify-center gap-1.5 text-[11px] font-bold border border-cyan-400/30 bg-cyan-400/5 hover:bg-cyan-400/15 text-cyan-600 dark:text-cyan-400 hover:text-cyan-800 dark:hover:text-white transition-all duration-300 uppercase tracking-wider cursor-pointer"
                  >
                    <Download className="w-3.5 h-3.5" />
                    <span>Download CSV Ledger</span>
                  </button>
                </div>                 <div className="overflow-x-auto">
                  <table className="w-full text-left text-xs border-collapse">
                    <thead>
                      <tr className={`border-b text-slate-500 bg-white/[0.01] transition-colors duration-305 ${
                        isDark ? 'border-white/5 bg-white/[0.01]' : 'border-slate-150 bg-slate-50/60'
                      }`}>
                        <th className="p-3 font-mono text-[9px] uppercase tracking-wider">Reference</th>
                        <th className="p-3 font-mono text-[9px] uppercase tracking-wider">Client Details</th>
                        <th className="p-3 font-mono text-[9px] uppercase tracking-wider">Total Charge</th>
                        <th className="p-3 font-mono text-[9px] uppercase tracking-wider">Status Node</th>
                        <th className="p-3 font-mono text-[9px] uppercase tracking-wider text-right">Activity Date</th>
                        <th className="p-3 font-mono text-[9px] uppercase tracking-wider text-right">Actions</th>
                      </tr>
                    </thead>
                    <tbody className={`divide-y transition-colors duration-300 ${isDark ? 'divide-white/[0.03]' : 'divide-slate-100'}`}>
                      {ledgerOrders.length === 0 ? (
                        <tr>
                          <td colSpan={6} className="p-8 text-center text-slate-500 font-mono text-[11px]">
                            No audited transactions found matching the selected date parameters.
                          </td>
                        </tr>
                      ) : (
                        ledgerOrders.map((or) => (
                          <tr key={or.id} className={`transition-colors duration-200 ${isDark ? 'hover:bg-white/[0.01]' : 'hover:bg-slate-50/50'}`}>
                            <td className="p-3 font-mono text-cyan-600 dark:text-cyan-400 font-bold">{or.reference}</td>
                            <td className="p-3">
                              <div className={`font-semibold transition-colors duration-305 ${isDark ? 'text-slate-200' : 'text-slate-800'}`}>{or.clientName}</div>
                              <div className="text-[10px] text-slate-500 font-mono mt-0.5">{or.clientEmail}</div>
                            </td>
                            <td className={`p-3 font-bold transition-colors duration-305 ${isDark ? 'text-slate-100' : 'text-slate-900'}`}>{formatPrice(or.totalPrice)}</td>
                            <td className="p-3">
                              <span className={`px-2 py-0.5 rounded-full font-mono text-[9px] uppercase tracking-wider font-bold border ${
                                or.status === 'completed'
                                  ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-300 border-emerald-500/25'
                                  : or.status === 'in_progress'
                                  ? 'bg-amber-500/10 text-amber-600 dark:text-amber-300 border-amber-500/25'
                                  : 'bg-blue-500/10 text-blue-600 dark:text-blue-300 border-blue-500/25'
                              }`}>
                                {or.status}
                              </span>
                            </td>
                            <td className="p-3 text-slate-505 font-mono text-right">
                              {new Date(or.createdAt).toLocaleDateString()}
                            </td>
                            <td className="p-3 text-right">
                              <div className="flex items-center justify-end gap-1.5">
                                {/* Send Notification */}
                                <button
                                  type="button"
                                  onClick={() => {
                                    setNotifyingOrder(or);
                                    setCustomEmailSubject(`[MASTER DIGITAL] Project Team Alert: Reference ${or.reference}`);
                                    setCustomEmailBody(`Dear ${or.clientName || 'Creative Partner'},\n\nWe would like to update you on your design & cinematic project (Ref: ${or.reference}).\n\n[Write details here]\n\nBest regards,\nMaster Digital SLA Audited Operations`);
                                  }}
                                  className={`p-1.5 rounded-lg border transition-all duration-200 cursor-pointer ${
                                    isDark 
                                      ? 'bg-purple-500/10 border-purple-500/20 text-purple-400 hover:bg-purple-500/20 hover:text-purple-300' 
                                      : 'bg-purple-50 border-purple-100 text-purple-600 hover:bg-purple-100 hover:text-purple-700'
                                  }`}
                                  title="Send Custom Notification"
                                >
                                  <Bell className="w-3.5 h-3.5" />
                                </button>

                                {/* Done (Mark Completed) */}
                                {or.status !== 'completed' && (
                                  <button
                                    type="button"
                                    onClick={() => {
                                      updateOrderStatus(or.id, 'completed');
                                      addToast(`Order ${or.reference} marked as completed!`, 'success');
                                    }}
                                    className={`p-1.5 rounded-lg border transition-all duration-200 cursor-pointer ${
                                      isDark 
                                        ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/20 hover:text-emerald-300' 
                                        : 'bg-emerald-50 border-emerald-100 text-emerald-600 hover:bg-emerald-100 hover:text-emerald-700'
                                    }`}
                                    title="Mark as Completed"
                                  >
                                    <Check className="w-3.5 h-3.5" />
                                  </button>
                                )}

                                {/* Delete buttons */}
                                {confirmDeleteId === or.id ? (
                                  <div className="flex items-center gap-1 bg-red-500/10 border border-red-500/20 rounded-lg p-0.5 animate-fade-in">
                                    <button
                                      type="button"
                                      onClick={() => {
                                        deleteOrder(or.id);
                                        setConfirmDeleteId(null);
                                        addToast(`Order ${or.reference} deleted successfully!`, 'success');
                                      }}
                                      className="px-2 py-0.5 text-[9px] font-bold text-red-500 hover:text-red-400 transition-colors cursor-pointer"
                                    >
                                      Sure?
                                    </button>
                                    <button
                                      type="button"
                                      onClick={() => setConfirmDeleteId(null)}
                                      className="p-0.5 text-slate-400 hover:text-slate-250 transition-colors cursor-pointer"
                                    >
                                      <X className="w-3 h-3" />
                                    </button>
                                  </div>
                                ) : (
                                  <button
                                    type="button"
                                    onClick={() => setConfirmDeleteId(or.id)}
                                    className={`p-1.5 rounded-lg border transition-all duration-200 cursor-pointer ${
                                      isDark 
                                        ? 'bg-red-500/10 border-red-500/20 text-red-400 hover:bg-red-500/20 hover:text-red-300' 
                                        : 'bg-red-50 border-red-100 text-red-600 hover:bg-red-100 hover:text-red-700'
                                    }`}
                                    title="Delete Order"
                                  >
                                    <Trash2 className="w-3.5 h-3.5" />
                                  </button>
                                )}
                              </div>
                            </td>
                          </tr>
                        ))
                      )}
                    </tbody>
                  </table>
                </div>
              </div>

            </div>
          )}

          {/* VIEW B: SLA ORDERS KANBAN QUEUE */}
          {adminSection === 'orders' && (
            <div className="space-y-6 animate-fade-in" id="admin-orders-kanban">
              <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                  <h3 className={`font-display font-black text-xl transition-colors duration-300 ${isDark ? 'text-slate-100' : 'text-slate-900'}`}>Task Commission Kanban Board</h3>
                  <p className={`text-xs mt-0.5 transition-colors duration-300 ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>Toggle active statuses from context node levels directly below.</p>
                </div>
              </div>

              {/* Status Filter Pills */}
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b pb-4 transition-colors duration-300 border-slate-100 dark:border-white/[0.04]" id="kanban-status-header">
                <div className="flex flex-wrap gap-2 items-center">
                  <span className={`text-[10px] font-mono uppercase tracking-wider font-bold mr-1.5 ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
                    Filter Queue:
                  </span>
                  {[
                    { value: 'all', label: 'All Orders' },
                    { value: 'pending', label: 'Pending Brief' },
                    { value: 'in_progress', label: 'In Production' },
                    { value: 'completed', label: 'Completed' },
                  ].map((pill) => {
                    const isActive = statusFilter === pill.value;
                    const count = pill.value === 'all' 
                      ? filteredOrders.length 
                      : filteredOrders.filter(o => o.status === pill.value).length;
                    
                    return (
                      <button
                        key={pill.value}
                        type="button"
                        onClick={() => setStatusFilter(pill.value as any)}
                        className={`px-3.5 py-1.5 rounded-xl text-xs font-mono font-bold tracking-wide transition-all duration-300 flex items-center gap-1.5 cursor-pointer border ${
                          isActive
                            ? isDark
                              ? 'bg-purple-500/15 border-purple-500/30 text-purple-300 shadow-[0_0_12px_rgba(168,85,247,0.15)]'
                              : 'bg-purple-550/10 border-purple-200 text-purple-600 shadow-sm'
                            : isDark
                              ? 'bg-white/5 border-transparent text-slate-400 hover:text-slate-200 hover:bg-white/10'
                              : 'bg-slate-100 border-transparent text-slate-500 hover:text-slate-800 hover:bg-slate-200'
                        }`}
                      >
                        <span>{pill.label}</span>
                        <span className={`text-[10px] px-1.5 py-0.2 rounded-full font-mono font-bold transition-colors ${
                          isActive
                            ? isDark ? 'bg-purple-500/30 text-purple-200' : 'bg-purple-200 text-purple-700'
                            : isDark ? 'bg-white/10 text-slate-400' : 'bg-slate-200 text-slate-600'
                        }`}>
                          {count}
                        </span>
                      </button>
                    );
                  })}
                </div>

                {/* Real-time Order Search Input */}
                <div className="relative w-full sm:w-64" id="kanban-search-box">
                  <span className="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none">
                    <Search className={`w-3.5 h-3.5 transition-colors ${
                      isDark ? 'text-slate-400' : 'text-slate-500'
                    }`} />
                  </span>
                  <input
                    type="text"
                    value={orderSearch}
                    onChange={(e) => setOrderSearch(e.target.value)}
                    placeholder="Search client or ref..."
                    className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl pl-9 pr-8 py-1.5 text-xs outline-none transition-all duration-300 ${
                      isDark 
                        ? 'bg-slate-900/40 border-white/10 text-slate-200 placeholder-slate-500' 
                        : 'bg-slate-50 border-slate-250 text-slate-800 placeholder-slate-450 shadow-sm'
                    }`}
                  />
                  {orderSearch && (
                    <button
                      type="button"
                      onClick={() => setOrderSearch('')}
                      className="absolute inset-y-0 right-0 flex items-center pr-3 text-[10px] font-mono hover:text-purple-500 text-slate-400 cursor-pointer"
                    >
                      Clear
                    </button>
                  )}
                </div>
              </div>

              {/* Kanban Columns */}
              <div className={`grid grid-cols-1 gap-5 ${
                statusFilter === 'all' ? 'md:grid-cols-3' : 'max-w-2xl mx-auto'
              }`}>
                
                {/* Column 1: Pending Verification */}
                {(statusFilter === 'all' || statusFilter === 'pending') && (
                  <div className={`p-4 rounded-xl border space-y-4 transition-all duration-300 ${
                    isDark ? 'bg-white/5 border-white/5' : 'bg-white border-slate-250 shadow-sm'
                  }`}>
                    <div className={`flex items-center justify-between border-b pb-2.5 transition-colors duration-300 ${isDark ? 'border-white/[0.04]' : 'border-slate-150'}`}>
                      <div className="flex items-center gap-1.5 text-blue-500 font-bold">
                        <Clock className="w-4 h-4" />
                        <span className="font-mono text-xs font-semibold uppercase tracking-wider">Pending Brief</span>
                      </div>
                      <span className={`px-2 py-0.5 rounded-full text-[10px] font-mono font-bold ${isDark ? 'bg-white/5 text-slate-300' : 'bg-slate-100 text-slate-600'}`}>
                        {filteredOrders.filter(o => o.status === 'pending').length}
                      </span>
                    </div>

                    <div className="space-y-3 max-h-[60vh] overflow-y-auto custom-scroll pr-1.5 relative">
                      <AnimatePresence mode="popLayout">
                        {filteredOrders.filter(o => o.status === 'pending').map((or) => (
                          <motion.div
                            key={or.id}
                            layout
                            initial={{ opacity: 0, y: 15, scale: 0.95 }}
                            animate={{ opacity: 1, y: 0, scale: 1 }}
                            exit={{ opacity: 0, y: -15, scale: 0.95 }}
                            transition={{ duration: 0.25, ease: 'easeOut' }}
                            className={`p-3.5 rounded-xl border text-xs space-y-3 transition-colors duration-300 ${
                              isDark ? 'border-white/5 bg-slate-950/60' : 'border-slate-205 bg-slate-50 shadow-sm'
                            }`}
                          >
                            <div className="flex justify-between items-center">
                              <span className="font-mono font-bold text-cyan-600 dark:text-cyan-400 text-[10px] leading-none">{or.reference}</span>
                              <span className={`font-mono font-bold leading-none ${isDark ? 'text-slate-200' : 'text-slate-800'}`}>{formatPrice(or.totalPrice)}</span>
                            </div>
                            
                            <div>
                              <p className={`font-semibold mt-1 leading-none ${isDark ? 'text-slate-300' : 'text-slate-700'}`}>{or.clientName}</p>
                              <span className="text-[10px] font-mono text-slate-400 block mt-1">{or.clientContact}</span>
                            </div>

                            {or.items[0]?.customInstructions && (
                              <div className={`p-2 border rounded text-[10px] leading-normal italic transition-colors duration-300 ${
                                isDark ? 'border-purple-500/10 bg-purple-950/20 text-purple-300' : 'border-purple-200 bg-purple-50 text-purple-700'
                              }`}>
                                Brief: {or.items[0].customInstructions}
                              </div>
                            )}

                            <AdminNoteField 
                              orderId={or.id} 
                              initialNotes={or.adminNotes || ''} 
                              updateOrderNotes={updateOrderNotes} 
                              isDark={isDark} 
                            />

                            <button
                              onClick={() => updateOrderStatus(or.id, 'in_progress')}
                              className="w-full py-1.5 rounded-lg bg-purple-550/10 hover:bg-purple-500/20 border border-purple-500/30 text-purple-600 dark:text-purple-300 font-bold tracking-wide text-[10px] uppercase cursor-pointer transition-colors flex items-center justify-center gap-1.5"
                            >
                              <Play className="w-3 h-3 text-purple-500 fill-purple-500" />
                              <span>Start Production</span>
                            </button>
                          </motion.div>
                        ))}
                      </AnimatePresence>
                      {filteredOrders.filter(o => o.status === 'pending').length === 0 && (
                        <p className="text-[10px] text-slate-505 font-mono text-center py-4">Column is empty</p>
                      )}
                    </div>
                  </div>
                )}

                {/* Column 2: In Production */}
                {(statusFilter === 'all' || statusFilter === 'in_progress') && (
                  <div className={`p-4 rounded-xl border space-y-4 transition-all duration-300 ${
                    isDark ? 'bg-white/5 border-white/5' : 'bg-white border-slate-250 shadow-sm'
                  }`}>
                    <div className={`flex items-center justify-between border-b pb-2.5 transition-colors duration-300 ${isDark ? 'border-white/[0.04]' : 'border-slate-150'}`}>
                      <div className="flex items-center gap-1.5 text-amber-500 font-bold text-xs font-semibold uppercase tracking-wider">
                        <RefreshCw className="w-3.5 h-3.5 animate-spin" />
                        <span>In Production</span>
                      </div>
                      <span className={`px-2 py-0.5 rounded-full text-[10px] font-mono font-bold ${isDark ? 'bg-white/5 text-slate-300' : 'bg-slate-100 text-slate-600'}`}>
                        {filteredOrders.filter(o => o.status === 'in_progress').length}
                      </span>
                    </div>

                    <div className="space-y-3 max-h-[60vh] overflow-y-auto custom-scroll pr-1.5 relative">
                      <AnimatePresence mode="popLayout">
                        {filteredOrders.filter(o => o.status === 'in_progress').map((or) => (
                          <motion.div
                            key={or.id}
                            layout
                            initial={{ opacity: 0, y: 15, scale: 0.95 }}
                            animate={{ opacity: 1, y: 0, scale: 1 }}
                            exit={{ opacity: 0, y: -15, scale: 0.95 }}
                            transition={{ duration: 0.25, ease: 'easeOut' }}
                            className={`p-3.5 rounded-xl border text-xs space-y-3 transition-colors duration-300 ${
                              isDark ? 'border-white/5 bg-slate-950/60' : 'border-slate-205 bg-slate-50 shadow-sm'
                            }`}
                          >
                            <div className="flex justify-between items-center">
                              <span className="font-mono font-bold text-cyan-600 dark:text-cyan-400 text-[10px] leading-none">{or.reference}</span>
                              <span className={`font-mono font-bold leading-none ${isDark ? 'text-slate-200' : 'text-slate-800'}`}>{formatPrice(or.totalPrice)}</span>
                            </div>
                            
                            <div>
                              <p className={`font-semibold mt-1 leading-none ${isDark ? 'text-slate-300' : 'text-slate-700'}`}>{or.clientName}</p>
                              <span className="text-[10px] font-mono text-slate-400 block mt-1">{or.clientContact}</span>
                            </div>

                            {or.items[0]?.customInstructions && (
                              <div className={`p-2 border rounded text-[10px] leading-normal italic transition-colors duration-300 ${
                                isDark ? 'border-purple-500/10 bg-purple-950/20 text-purple-300' : 'border-purple-200 bg-purple-50 text-purple-700'
                              }`}>
                                Brief: {or.items[0].customInstructions}
                              </div>
                            )}

                            <AdminNoteField 
                              orderId={or.id} 
                              initialNotes={or.adminNotes || ''} 
                              updateOrderNotes={updateOrderNotes} 
                              isDark={isDark} 
                            />

                            <button
                              onClick={() => updateOrderStatus(or.id, 'completed')}
                              className="w-full py-1.5 rounded-lg bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/30 text-emerald-600 dark:text-emerald-300 font-bold tracking-wide text-[10px] uppercase cursor-pointer transition-colors flex items-center justify-center gap-1"
                            >
                              <Check className="w-3.5 h-3.5 text-emerald-500" />
                              <span>Complete & Deliver</span>
                            </button>
                          </motion.div>
                        ))}
                      </AnimatePresence>
                      {filteredOrders.filter(o => o.status === 'in_progress').length === 0 && (
                        <p className="text-[10px] text-slate-505 font-mono text-center py-4">Column is empty</p>
                      )}
                    </div>
                  </div>
                )}

                {/* Column 3: Completed & Transferred */}
                {(statusFilter === 'all' || statusFilter === 'completed') && (
                  <div className={`p-4 rounded-xl border space-y-4 transition-all duration-300 ${
                    isDark ? 'bg-white/5 border-white/5' : 'bg-white border-slate-250 shadow-sm'
                  }`}>
                    <div className={`flex items-center justify-between border-b pb-2.5 transition-colors duration-300 ${isDark ? 'border-white/[0.04]' : 'border-slate-150'}`}>
                      <div className="flex items-center gap-1.5 text-emerald-500 font-bold text-xs uppercase tracking-wider">
                        <CheckCircle className="w-3.5 h-3.5" />
                        <span>Completed / Transferred</span>
                      </div>
                      <span className={`px-2 py-0.5 rounded-full text-[10px] font-mono font-bold ${isDark ? 'bg-white/5 text-slate-300' : 'bg-slate-100 text-slate-600'}`}>
                        {filteredOrders.filter(o => o.status === 'completed').length}
                      </span>
                    </div>

                    <div className="space-y-3 max-h-[60vh] overflow-y-auto custom-scroll pr-1.5 relative">
                      <AnimatePresence mode="popLayout">
                        {filteredOrders.filter(o => o.status === 'completed').map((or) => (
                          <motion.div
                            key={or.id}
                            layout
                            initial={{ opacity: 0, y: 15, scale: 0.95 }}
                            animate={{ opacity: 1, y: 0, scale: 1 }}
                            exit={{ opacity: 0, y: -15, scale: 0.95 }}
                            transition={{ duration: 0.25, ease: 'easeOut' }}
                            className={`p-3.5 rounded-xl border text-xs space-y-2 relative transition-colors duration-300 ${
                              isDark ? 'border-white/5 bg-slate-950/30' : 'border-slate-200 bg-slate-55 shadow-sm'
                            }`}
                          >
                            {/* Checked background seal */}
                            <div className="absolute top-2.5 right-2.5">
                              <CheckCircle className="w-4 h-4 text-emerald-500/60" />
                            </div>

                            <div className="flex justify-between items-center pr-5">
                              <span className="font-mono font-bold text-slate-400 text-[10px] leading-none">{or.reference}</span>
                              <span className={`font-mono font-bold leading-none ${isDark ? 'text-slate-300' : 'text-slate-700'}`}>{formatPrice(or.totalPrice)}</span>
                            </div>
                            
                            <div>
                              <p className={`font-medium leading-none ${isDark ? 'text-slate-400' : 'text-slate-600'}`}>{or.clientName}</p>
                              <span className="text-[10px] font-mono text-slate-500 block mt-1">{or.clientEmail}</span>
                            </div>
                            
                            <div className={`p-2 border rounded text-[9px] font-mono leading-relaxed transition-colors duration-300 ${
                              isDark ? 'bg-emerald-950/10 border-emerald-500/10 text-emerald-400/85' : 'bg-emerald-50 border-emerald-200 text-emerald-700'
                            }`}>
                              Delivery successful SLA. Mail credentials transfer log pushed to security gate.
                            </div>

                            <AdminNoteField 
                              orderId={or.id} 
                              initialNotes={or.adminNotes || ''} 
                              updateOrderNotes={updateOrderNotes} 
                              isDark={isDark} 
                            />
                          </motion.div>
                        ))}
                      </AnimatePresence>
                      {filteredOrders.filter(o => o.status === 'completed').length === 0 && (
                        <p className="text-[10px] text-slate-505 font-mono text-center py-4">Column is empty</p>
                      )}
                    </div>
                  </div>
                )}

              </div>
            </div>
          )}

          {/* VIEW C: PRODUCT MANAGER (ADD NEW PRODUCTS FORM) */}
          {adminSection === 'product_manager' && (
            <div className="space-y-6 animate-fade-in" id="admin-product-creator">
              <div className="flex justify-between items-center">
                <div>
                  <h3 className={`font-display font-black text-xl transition-colors duration-300 ${isDark ? 'text-slate-100' : 'text-slate-900'}`}>Create Catalog Product Token</h3>
                  <p className={`text-xs mt-0.5 transition-colors duration-300 ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>Publish new digital licenses, design parameters or editing packages live.</p>
                </div>
              </div>

              {formSuccess && (
                <div className="p-4 bg-emerald-500/10 border border-emerald-500/30 rounded-xl text-xs text-emerald-600 dark:text-emerald-300 flex items-center gap-2 animate-bounce">
                  <CheckCircle className="w-4.5 h-4.5 text-emerald-500" />
                  <span>Product successfully published! Switch to our Storefront to view catalog entry.</span>
                </div>
              )}

              {hasDraft && (
                <div className={`p-4 border rounded-xl text-xs flex flex-col sm:flex-row sm:items-center justify-between gap-3 animate-fade-in ${
                  isDark ? 'bg-purple-950/20 border-purple-500/30 text-purple-200' : 'bg-purple-50 border-purple-250 text-purple-900'
                }`}>
                  <div className="flex items-center gap-2.5 animate-pulse">
                    <ClipboardList className="w-4.5 h-4.5 text-purple-550" />
                    <span className="font-medium">You have a saved catalog item draft in this browser.</span>
                  </div>
                  <div className="flex gap-2">
                    <button
                      type="button"
                      onClick={handleLoadDraft}
                      className="px-3 py-1.5 rounded-lg bg-purple-600 hover:bg-purple-500 text-white font-bold text-[10px] uppercase tracking-wider transition-all cursor-pointer shadow-sm shadow-purple-500/10"
                    >
                      Load Draft
                    </button>
                    <button
                      type="button"
                      onClick={handleDiscardDraft}
                      className={`px-3 py-1.5 rounded-lg border font-bold text-[10px] uppercase tracking-wider transition-all cursor-pointer ${
                        isDark 
                          ? 'border-white/10 text-slate-400 hover:bg-white/5 hover:text-white' 
                          : 'border-slate-200 text-slate-500 hover:bg-slate-100 hover:text-slate-700'
                      }`}
                    >
                      Discard
                    </button>
                  </div>
                </div>
              )}

              <form onSubmit={handleCreateProduct} className={`p-6 sm:p-8 rounded-2xl border grid grid-cols-1 md:grid-cols-2 gap-5 transition-all duration-300 ${
                isDark ? 'bg-white/5 border-white/5' : 'bg-white border-slate-200 shadow-sm'
              }`}>
                
                {/* Form Col 1 */}
                <div 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-550'}`}>Product Offering Title</label>
                    <input 
                      type="text"
                      required
                      name="name"
                      value={formData.name}
                      onChange={handleInputChange}
                      placeholder="e.g. 50k TikTok Organic Followers Booster"
                      className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-3 text-xs outline-none transition-colors duration-300 ${
                        isDark 
                          ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                          : 'bg-slate-50 border-slate-250 text-slate-800'
                      }`}
                    />
                  </div>

                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <div className="flex justify-between items-center mb-1">
                        <label className={`text-[10px] font-mono block uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>
                          Price ({priceCurrency})
                        </label>
                        <div className="flex gap-1">
                          <button
                            type="button"
                            onClick={() => setPriceCurrency('USD')}
                            className={`px-1.5 py-0.5 rounded text-[8px] font-mono font-bold transition-all cursor-pointer ${
                              priceCurrency === 'USD'
                                ? 'bg-purple-600 text-white shadow-sm'
                                : 'bg-slate-200 dark:bg-white/10 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
                            }`}
                          >
                            USD
                          </button>
                          <button
                            type="button"
                            onClick={() => setPriceCurrency('MMK')}
                            className={`px-1.5 py-0.5 rounded text-[8px] font-mono font-bold transition-all cursor-pointer ${
                              priceCurrency === 'MMK'
                                ? 'bg-purple-600 text-white shadow-sm'
                                : 'bg-slate-200 dark:bg-white/10 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
                            }`}
                          >
                            MMK
                          </button>
                        </div>
                      </div>
                      <input 
                        type="number"
                        required
                        step={priceCurrency === 'MMK' ? '1' : '0.01'}
                        name="price"
                        value={formData.price}
                        onChange={handleInputChange}
                        placeholder={priceCurrency === 'MMK' ? '300000' : '79.99'}
                        className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-3 text-xs outline-none transition-colors duration-300 ${
                          isDark 
                            ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                            : 'bg-slate-50 border-slate-250 text-slate-800'
                        }`}
                      />
                    </div>

                    <div>
                      <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Delivery Time SLA</label>
                      <input 
                        type="text"
                        name="deliveryTime"
                        value={formData.deliveryTime}
                        onChange={handleInputChange}
                        placeholder="Instant Access / 4 days SLA"
                        className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-3 text-xs outline-none transition-all transition-colors duration-300 ${
                          isDark 
                            ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                            : 'bg-slate-50 border-slate-250 text-slate-800'
                        }`}
                      />
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className={`text-[10px] font-mono block mb-1.5 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Service Category</label>
                      <div className="flex flex-col gap-1.5">
                        {[
                          { id: 'digital_products', label: 'Digital Products' },
                          { id: 'graphic_design', label: 'Graphic Design' },
                          { id: 'video_editing', label: 'Video Editing' }
                        ].map((cat) => {
                          const isSelected = formData.category === cat.id;
                          return (
                            <button
                              key={cat.id}
                              type="button"
                              onClick={() => setFormData(prev => ({ ...prev, category: cat.id as Product['category'] }))}
                              className={`w-full flex items-center justify-between px-3 py-2 rounded-xl border text-[11px] font-semibold transition-all duration-300 cursor-pointer ${
                                isSelected
                                  ? isDark
                                    ? 'bg-purple-600/15 border-purple-500 text-purple-200 shadow-sm shadow-purple-500/10'
                                    : 'bg-purple-50/70 border-purple-600 text-purple-900 shadow-sm'
                                  : isDark
                                    ? 'bg-slate-900/40 border-white/5 text-slate-400 hover:text-slate-200 hover:border-white/10'
                                    : 'bg-slate-50 border-slate-200 text-slate-600 hover:text-slate-800 hover:border-slate-300'
                              }`}
                            >
                              <span>{cat.label}</span>
                              <div className={`w-3.5 h-3.5 rounded-full border flex items-center justify-center transition-all ${
                                isSelected
                                  ? 'border-purple-500 bg-purple-500 shadow-sm'
                                  : isDark
                                    ? 'border-white/20 bg-slate-950/40'
                                    : 'border-slate-300 bg-white'
                              }`}>
                                {isSelected && (
                                  <div className="w-1.5 h-1.5 rounded-full bg-white" />
                                )}
                              </div>
                            </button>
                          );
                        })}
                      </div>
                    </div>

                    <div 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-550'}`}>Delivery Type</label>
                        <select
                          name="isDigital"
                          value={formData.isDigital}
                          onChange={handleInputChange}
                          className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-3 text-xs outline-none transition-all transition-colors duration-300 cursor-pointer ${
                            isDark 
                              ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                              : 'bg-slate-50 border-slate-250 text-slate-800'
                          }`}
                        >
                          <option value="true" className="bg-slate-950 text-white">Direct Credentials</option>
                          <option value="false" className="bg-slate-950 text-white">Creative Brief Required</option>
                        </select>
                      </div>

                      <div>
                        <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Stock Availability</label>
                        <select
                          name="inStock"
                          value={formData.inStock}
                          onChange={handleInputChange}
                          className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-3 text-xs outline-none transition-all transition-colors duration-300 cursor-pointer ${
                            isDark 
                              ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                              : 'bg-slate-50 border-slate-250 text-slate-800'
                          }`}
                        >
                          <option value="true" className="bg-slate-950 text-white">In Stock</option>
                          <option value="false" className="bg-slate-950 text-white">Out of Stock</option>
                        </select>
                      </div>
                    </div>
                  </div>

                  <div>
                    <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Service Sub-Tags (Comma Separated)</label>
                    <input 
                      type="text"
                      name="tags"
                      value={formData.tags}
                      onChange={handleInputChange}
                      placeholder="Verified, Aged, Premium"
                      className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-3 text-xs outline-none transition-all transition-colors duration-300 ${
                        isDark 
                          ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                          : 'bg-slate-50 border-slate-250 text-slate-800'
                      }`}
                    />
                  </div>
                </div>

                 {/* Form Col 2 */}
                <div className="space-y-4 flex flex-col justify-between">
                  <div>
                    <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Cover Image Link URL</label>
                    <div className="flex gap-3 items-stretch">
                      <div className="flex-1 flex flex-col justify-center gap-2">
                        <input 
                          type="url"
                          name="mediaUrl"
                          value={formData.mediaUrl}
                          onChange={handleInputChange}
                          placeholder="https://picsum.photos/seed/agency/600/400"
                          className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-2.5 text-xs outline-none transition-all transition-colors duration-300 ${
                            isDark 
                              ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                              : 'bg-slate-50 border-slate-250 text-slate-800'
                          }`}
                        />
                        <div className="flex items-center gap-2">
                          <span className={`text-[10px] font-mono tracking-wide ${isDark ? 'text-slate-500' : 'text-slate-400'}`}>Or</span>
                          <label className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg border text-[10px] font-mono font-bold cursor-pointer transition-all duration-300 ${
                            isDark 
                              ? 'bg-purple-950/20 border-purple-500/20 text-purple-300 hover:bg-purple-950/30' 
                              : 'bg-purple-50 border-purple-200 text-purple-750 hover:bg-purple-100'
                          }`}>
                            <Download className="w-3 h-3" />
                            <span>Upload Local File</span>
                            <input 
                              type="file"
                              accept="image/*"
                              className="hidden"
                              onChange={(e) => {
                                const file = e.target.files?.[0];
                                if (file) {
                                  const reader = new FileReader();
                                  reader.onload = (etc) => {
                                    if (typeof etc.target?.result === 'string') {
                                      setFormData((prev) => ({ ...prev, mediaUrl: etc.target!.result as string }));
                                      setImageError(false);
                                      addToast("New catalog image uploaded", "success");
                                    }
                                  };
                                  reader.readAsDataURL(file);
                                }
                              }}
                            />
                          </label>
                          {formData.mediaUrl && formData.mediaUrl.startsWith('data:') && (
                            <button
                              type="button"
                              onClick={() => {
                                setFormData((prev) => ({ ...prev, mediaUrl: '' }));
                                addToast("Uploaded design image cleared", "info");
                              }}
                              className="text-[10px] font-mono text-red-500 hover:underline cursor-pointer"
                            >
                              Clear
                            </button>
                          )}
                        </div>
                      </div>

                      {/* Real-time Image Preview Component */}
                      <div 
                        id="image-preview-box"
                        className={`w-28 sm:w-32 aspect-video rounded-xl flex-shrink-0 border flex items-center justify-center relative overflow-hidden transition-all duration-300 ${
                          isDark 
                            ? 'bg-slate-900/40 border-white/10' 
                            : 'bg-slate-50 border-slate-250'
                        }`}
                      >
                        {formData.mediaUrl && !imageError ? (
                          <img 
                            src={formData.mediaUrl} 
                            alt="Live Preview" 
                            className="w-full h-full object-cover rounded-xl"
                            onError={() => setImageError(true)}
                          />
                        ) : (
                          <div className="flex flex-col items-center justify-center p-2 text-center text-[9px] font-mono select-none">
                            <ImageIcon className={`w-4.5 h-4.5 mb-1 opacity-70 ${imageError ? 'text-red-500' : 'text-purple-500'}`} />
                            <span className={imageError ? 'text-red-500 font-bold' : isDark ? 'text-slate-400' : 'text-slate-550'}>
                              {imageError ? 'Invalid URL' : 'Auto Pixel'}
                            </span>
                          </div>
                        )}
                      </div>
                    </div>

                    {/* Generative AI Image Section */}
                    <div className={`mt-3 p-4 rounded-xl border transition-all duration-300 ${
                      isDark ? 'bg-purple-950/20 border-purple-500/20' : 'bg-purple-50/50 border-purple-200'
                    }`}>
                      <div className="flex items-center gap-1.5 mb-2 text-purple-600 dark:text-purple-300 font-bold">
                        <RefreshCw className={`w-3.5 h-3.5 ${isGeneratingImage ? 'animate-spin' : ''}`} />
                        <span className="text-[10px] font-mono uppercase tracking-wider">AI Instant Cover Art Generator</span>
                      </div>
                      
                      <div className="flex gap-2">
                        <input 
                          type="text"
                          placeholder="e.g. A gorgeous realistic modern technology icon, flat neon vector..."
                          value={aiPrompt}
                          onChange={(e) => setAiPrompt(e.target.value)}
                          className={`flex-1 border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-lg px-3 py-2 text-xs outline-none transition-colors duration-300 ${
                            isDark 
                              ? 'bg-slate-900/60 border-white/10 text-slate-200 placeholder-slate-500' 
                              : 'bg-white border-slate-250 text-slate-800 placeholder-slate-400'
                          }`}
                        />
                        <button
                          type="button"
                          onClick={() => handleGenerateAiImage(aiPrompt)}
                          disabled={isGeneratingImage || !aiPrompt.trim()}
                          className="px-3.5 py-2.5 rounded-lg bg-purple-600 hover:bg-purple-500 text-white font-bold text-xs shadow transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-1.5 whitespace-nowrap"
                        >
                          {isGeneratingImage ? (
                            <>
                              <RefreshCw className="w-3 h-3 animate-spin" />
                              <span>Generating...</span>
                            </>
                          ) : (
                            <>
                              <span>Generate Cover</span>
                            </>
                          )}
                        </button>
                      </div>
                      {aiGenError && (
                        <p className="text-[10px] text-red-500 mt-1.5 font-mono">{aiGenError}</p>
                      )}
                    </div>
                  </div>

                  <div>
                    <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Product Catalog Description</label>
                    <textarea 
                      required
                      rows={5}
                      name="description"
                      value={formData.description}
                      onChange={handleInputChange}
                      placeholder="Insert high-converting catalog descriptions detailing account parameters or vector dimensions..."
                      className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl p-3 text-xs outline-none transition-all transition-colors duration-300 resize-none font-sans leading-relaxed ${
                        isDark 
                          ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                          : 'bg-slate-50 border-slate-250 text-slate-800'
                      }`}
                    />
                  </div>

                  <button
                    type="submit"
                    className="w-full py-4.5 rounded-xl bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-xs font-black text-white tracking-widest uppercase shadow-xl hover:shadow-[0_0_20px_rgba(139,92,246,0.3)] transition-all duration-300 flex items-center justify-center gap-2 cursor-pointer mt-4"
                  >
                    <Plus className="w-4.5 h-4.5" />
                    <span>Publish Catalog Entry</span>
                  </button>
                </div>

              </form>              {/* CATALOG INVENTORY LISTING */}
              <div className="mt-12 space-y-4" id="catalog-inventory-listing">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                  <div>
                    <h4 className={`font-display font-black text-lg transition-colors duration-300 ${isDark ? 'text-slate-100' : 'text-slate-900'}`}>
                      Catalog Inventory Listing
                    </h4>
                    <p className={`text-xs transition-colors duration-300 ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
                      Edit or remove any live products or services from the active database.
                    </p>
                  </div>

                  {/* Dynamic Category Filtering Tabs */}
                  <div className="flex items-center gap-1 p-1 rounded-xl bg-slate-100 dark:bg-white/5 border border-slate-200/50 dark:border-white/5 self-start sm:self-auto">
                    {[
                      { id: 'all', label: 'All Catalog', count: products.length },
                      { id: 'products', label: 'Digital Products', count: products.filter(p => p.category === 'digital_products').length },
                      { id: 'services', label: 'Services', count: products.filter(p => p.category !== 'digital_products').length }
                    ].map((tab) => {
                      const isSelected = inventoryFilter === tab.id;
                      return (
                        <button
                          key={tab.id}
                          type="button"
                          onClick={() => setInventoryFilter(tab.id as any)}
                          className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold cursor-pointer transition-all duration-300 ${
                            isSelected
                              ? isDark 
                                ? 'bg-slate-900 text-purple-300 border border-purple-500/15 shadow-md shadow-purple-500/5'
                                : 'bg-white text-purple-600 border border-slate-200 shadow-sm'
                              : isDark
                                ? 'text-slate-400 hover:text-slate-200 border border-transparent'
                                : 'text-slate-650 hover:text-slate-850 border border-transparent'
                          }`}
                        >
                          <span>{tab.label}</span>
                          <span className={`text-[9px] font-mono font-bold px-1.5 py-0.2 rounded-full leading-none ${
                            isSelected
                              ? isDark ? 'bg-purple-500/10 text-purple-400' : 'bg-purple-100 text-purple-750'
                              : isDark ? 'bg-white/5 text-slate-500' : 'bg-slate-200/70 text-slate-500'
                          }`}>
                            {tab.count}
                          </span>
                        </button>
                      );
                    })}
                  </div>
                </div>

                <div className={`border rounded-2xl overflow-hidden transition-all duration-300 ${
                  isDark ? 'bg-white/5 border-white/5 shadow-xl' : 'bg-white border-slate-250 shadow-sm'
                }`}>
                  {products.length === 0 ? (
                    <div className="p-12 text-center text-xs font-mono text-slate-500">
                      No products or services mapped in catalog. Post an entry above!
                    </div>
                  ) : (
                    <div className="overflow-x-auto">
                      <table className="w-full text-left border-collapse">
                        <thead>
                          <tr className={`border-b text-[10px] font-mono uppercase tracking-wider ${
                            isDark ? 'bg-white/[0.02] border-white/5 text-slate-400' : 'bg-slate-50 border-slate-200 text-slate-500'
                          }`}>
                            <th className="p-4 font-bold">Product / Service Offer</th>
                            <th className="p-4 font-bold">Category</th>
                            <th className="p-4 font-bold">Price Reference</th>
                            <th className="p-4 font-bold">Delivery SLA</th>
                            <th className="p-4 font-bold text-right">Actions</th>
                          </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-100 dark:divide-white/5">
                          {(() => {
                            const filteredItems = products.filter((prod) => {
                              if (inventoryFilter === 'products') {
                                return prod.category === 'digital_products';
                              }
                              if (inventoryFilter === 'services') {
                                return prod.category !== 'digital_products';
                              }
                              return true;
                            });

                            if (filteredItems.length === 0) {
                              return (
                                <tr>
                                  <td colSpan={5} className="p-12 text-center text-xs font-mono text-slate-500">
                                    No {inventoryFilter === 'products' ? 'digital products' : 'creative services'} currently mapped under this database view.
                                  </td>
                                </tr>
                              );
                            }

                            return filteredItems.map((prod) => (
                              <tr key={prod.id} className="hover:bg-slate-50/50 dark:hover:bg-white/[0.01] transition-colors">
                                <td className="p-4">
                                  <div className="flex items-center gap-3">
                                    <div className="w-10 h-10 rounded-lg object-cover bg-slate-100 dark:bg-white/5 overflow-hidden flex-shrink-0 relative">
                                      <img
                                        src={prod.mediaUrl}
                                        alt={prod.name}
                                        className="w-full h-full object-cover rounded-lg"
                                        onError={(e) => {
                                          (e.target as HTMLImageElement).src = 'https://picsum.photos/seed/default/60/40';
                                        }}
                                      />
                                    </div>
                                    <div>
                                      <div className={`text-xs font-bold leading-snug ${isDark ? 'text-white' : 'text-slate-900'}`}>{prod.name}</div>
                                      <div className="flex gap-1 mt-1 flex-wrap">
                                        {prod.tags.map(tag => (
                                          <span key={tag} className="text-[9px] px-1.5 py-0.2 rounded bg-purple-500/10 text-purple-600 dark:text-purple-300 font-mono font-medium">
                                            {tag}
                                          </span>
                                        ))}
                                        {prod.isDigital && (
                                          <span className="text-[9px] px-1.5 py-0.2 rounded bg-blue-500/10 text-blue-600 dark:text-blue-300 font-mono font-medium">
                                            Auto
                                          </span>
                                        )}
                                        <span className={`text-[9px] px-1.5 py-0.2 rounded font-mono font-semibold ${
                                          prod.inStock !== false
                                            ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
                                            : 'bg-rose-500/10 text-rose-600 dark:text-rose-400'
                                        }`}>
                                          {prod.inStock !== false ? 'In Stock' : 'Out of Stock'}
                                        </span>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td className="p-4 text-xs">
                                  <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-semibold tracking-wide uppercase ${
                                    prod.category === 'digital_products' 
                                      ? 'bg-blue-500/10 text-blue-600 dark:text-blue-400' 
                                      : prod.category === 'graphic_design'
                                        ? 'bg-rose-500/10 text-rose-600 dark:text-rose-400'
                                        : 'bg-green-500/10 text-green-600 dark:text-green-400'
                                  }`}>
                                    {prod.category.replace('_', ' ')}
                                  </span>
                                </td>
                                <td className="p-4 text-xs font-mono font-bold text-purple-600 dark:text-purple-400">
                                  {formatPrice(prod.price)}
                                </td>
                                <td className="p-4 text-xs font-medium text-slate-500 dark:text-slate-400">
                                  {prod.deliveryTime}
                                </td>
                                <td className="p-4 text-right">
                                  <div className="flex items-center justify-end gap-2">
                                    <button
                                      onClick={() => handleStartEdit(prod)}
                                      className={`p-2 rounded-lg border hover:scale-105 active:scale-95 transition-all text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 cursor-pointer ${
                                        isDark ? 'border-white/5 hover:bg-white/5' : 'border-slate-200 hover:bg-slate-100'
                                      }`}
                                      title={prod.category === 'digital_products' ? 'Edit Product' : 'Edit Service'}
                                    >
                                      <Pencil className="w-3.5 h-3.5" />
                                    </button>
                                    <button
                                      onClick={() => {
                                        const typeLabel = prod.category === 'digital_products' ? 'Product' : 'Service';
                                        setDeleteConfirmation({
                                          id: prod.id,
                                          title: prod.name,
                                          type: 'product',
                                          categoryLabel: typeLabel,
                                        });
                                      }}
                                      className={`p-2 rounded-lg border hover:scale-105 active:scale-95 transition-all text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-350 cursor-pointer ${
                                        isDark ? 'border-white/5 hover:bg-white/5' : 'border-slate-200 hover:bg-slate-100'
                                      }`}
                                      title={prod.category === 'digital_products' ? 'Delete Product' : 'Delete Service'}
                                    >
                                      <Trash2 className="w-3.5 h-3.5" />
                                    </button>
                                  </div>
                                </td>
                              </tr>
                            ));
                          })()}
                        </tbody>
                      </table>
                    </div>
                  )}
                </div>
              </div>
            </div>
          )}

          {/* VIEW D: PORTFOLIO MANAGER */}
          {adminSection === 'portfolio_manager' && (
            <div className="space-y-6 animate-fade-in" id="admin-portfolio-creator">
              <div className="flex justify-between items-center">
                <div>
                  <h3 className={`font-display font-black text-xl transition-colors duration-300 ${isDark ? 'text-slate-100' : 'text-slate-900'}`}>Sleek Portfolio Manager</h3>
                  <p className={`text-xs mt-0.5 transition-colors duration-300 ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>Upload custom graphic designs or showcase high-fidelity edited videos by providing standard or YouTube video links.</p>
                </div>
              </div>

              {portfolioSuccess && (
                <div className="p-4 bg-emerald-500/10 border border-emerald-500/30 rounded-xl text-xs text-emerald-600 dark:text-emerald-300 flex items-center gap-2 animate-bounce">
                  <CheckCircle className="w-4.5 h-4.5 text-emerald-500" />
                  <span>Portfolio showcase item successfully loaded as context payload! Go to Portfolio tab to preview.</span>
                </div>
              )}

              <form onSubmit={handleCreatePortfolioItem} className={`p-6 sm:p-8 rounded-2xl border grid grid-cols-1 md:grid-cols-2 gap-5 transition-all duration-300 ${
                isDark ? 'bg-white/5 border-white/5' : 'bg-white border-slate-200 shadow-sm'
              }`}>
                
                {/* Left Side fields */}
                <div 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-550'}`}>Work Title</label>
                    <input 
                      type="text"
                      required
                      name="title"
                      value={portfolioData.title}
                      onChange={handlePortfolioInputChange}
                      placeholder="e.g. Modern Cyberpunk Poster Art / Acoustic Session Live Video"
                      className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-3 text-xs outline-none transition-colors duration-300 ${
                        isDark 
                          ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                          : 'bg-slate-50 border-slate-250 text-slate-800'
                      }`}
                    />
                  </div>

                  <div>
                    <label className={`text-[10px] font-mono block mb-1.5 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Category</label>
                    <div className="grid grid-cols-2 gap-2">
                      {[
                        { id: 'graphic_design', label: 'Graphic Design' },
                        { id: 'video_editing', label: 'Video Editing' }
                      ].map((cat) => {
                        const isSelected = portfolioData.category === cat.id;
                        return (
                          <button
                            key={cat.id}
                            type="button"
                            onClick={() => setPortfolioData(prev => ({ ...prev, category: cat.id as 'graphic_design' | 'video_editing' }))}
                            className={`flex items-center justify-between px-3 py-2.5 rounded-xl border text-[11px] font-semibold transition-all duration-300 cursor-pointer ${
                              isSelected
                                ? isDark
                                  ? 'bg-purple-600/15 border-purple-500/55 text-purple-200 shadow-sm shadow-purple-500/10'
                                  : 'bg-purple-50/70 border-purple-600 text-purple-900 shadow-sm'
                                : isDark
                                  ? 'bg-slate-900/40 border-white/5 text-slate-400 hover:text-slate-200 hover:border-white/10'
                                  : 'bg-slate-50 border-slate-200 text-slate-600 hover:text-slate-800 hover:border-slate-300'
                            }`}
                          >
                            <span>{cat.label}</span>
                            <div className={`w-3.5 h-3.5 rounded-full border flex items-center justify-center transition-all ${
                              isSelected
                                ? 'border-purple-500 bg-purple-500 shadow-sm'
                                : isDark
                                  ? 'border-white/20 bg-slate-950/40'
                                  : 'border-slate-300 bg-white'
                            }`}>
                              {isSelected && (
                                <div className="w-1.5 h-1.5 rounded-full bg-white" />
                              )}
                            </div>
                          </button>
                        );
                      })}
                    </div>
                  </div>

                  <div>
                    <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Aspect Ratio Preset</label>
                    <select
                      name="aspectRatio"
                      value={portfolioData.aspectRatio}
                      onChange={handlePortfolioInputChange}
                      className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-3 text-xs outline-none transition-all transition-colors duration-300 cursor-pointer ${
                        isDark 
                          ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                          : 'bg-slate-50 border-slate-250 text-slate-800'
                      }`}
                    >
                      <option value="aspect-square" className="bg-slate-950 text-white">Square (1:1)</option>
                      <option value="aspect-[3/4]" className="bg-slate-950 text-white">Tall Profile (3:4)</option>
                      <option value="aspect-[4/5]" className="bg-slate-950 text-white">Instagram Portrait (4:5)</option>
                      <option value="aspect-[16/9]" className="bg-slate-950 text-white">Cinematic Widescreen (16:9)</option>
                      <option value="aspect-[4/3]" className="bg-slate-950 text-white">Standard Video (4:3)</option>
                    </select>
                  </div>

                  <div>
                    <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Work Tags (Comma Separated)</label>
                    <input 
                      type="text"
                      name="tags"
                      value={portfolioData.tags}
                      onChange={handlePortfolioInputChange}
                      placeholder="Branding, Retro, Typography"
                      className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-3 text-xs outline-none transition-all transition-colors duration-300 ${
                        isDark 
                          ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                          : 'bg-slate-50 border-slate-250 text-slate-800'
                      }`}
                    />
                  </div>
                </div>

                 {/* Right Side fields */}
                <div className="space-y-4 flex flex-col justify-between">
                  <div>
                    <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Cover Image Link URL</label>
                    <div className="flex gap-3 items-stretch">
                      <div className="flex-1 flex flex-col justify-center gap-2">
                        <input 
                          type="url"
                          name="mediaUrl"
                          value={portfolioData.mediaUrl}
                          onChange={handlePortfolioInputChange}
                          placeholder="https://picsum.photos/seed/work/600/400"
                          className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-2.5 text-xs outline-none transition-all transition-colors duration-300 ${
                            isDark 
                              ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                              : 'bg-slate-50 border-slate-250 text-slate-800'
                          }`}
                        />
                        <div className="flex items-center gap-2">
                          <span className={`text-[10px] font-mono tracking-wide ${isDark ? 'text-slate-500' : 'text-slate-400'}`}>Or</span>
                          <label className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg border text-[10px] font-mono font-bold cursor-pointer transition-all duration-300 ${
                            isDark 
                              ? 'bg-purple-950/20 border-purple-500/20 text-purple-300 hover:bg-purple-950/30' 
                              : 'bg-purple-50 border-purple-200 text-purple-750 hover:bg-purple-100'
                          }`}>
                            <Download className="w-3 h-3" />
                            <span>Upload Local File</span>
                            <input 
                              type="file"
                              accept="image/*"
                              className="hidden"
                              onChange={(e) => {
                                const file = e.target.files?.[0];
                                if (file) {
                                  const reader = new FileReader();
                                  reader.onload = (etc) => {
                                    if (typeof etc.target?.result === 'string') {
                                      setPortfolioData((prev) => ({ ...prev, mediaUrl: etc.target!.result as string }));
                                      setPortfolioImageError(false);
                                      addToast("Showcase work preview uploaded successfully", "success");
                                    }
                                  };
                                  reader.readAsDataURL(file);
                                }
                              }}
                            />
                          </label>
                          {portfolioData.mediaUrl && portfolioData.mediaUrl.startsWith('data:') && (
                            <button
                              type="button"
                              onClick={() => {
                                setPortfolioData((prev) => ({ ...prev, mediaUrl: '' }));
                                addToast("Uploaded showroom presentation cleared", "info");
                              }}
                              className="text-[10px] font-mono text-red-500 hover:underline cursor-pointer"
                            >
                              Clear
                            </button>
                          )}
                        </div>
                      </div>

                      {/* Cover Preview */}
                      <div 
                        id="portfolio-image-preview"
                        className={`w-28 sm:w-32 aspect-video rounded-xl flex-shrink-0 border flex items-center justify-center relative overflow-hidden transition-all duration-300 ${
                          isDark 
                            ? 'bg-slate-900/40 border-white/10' 
                            : 'bg-slate-50 border-slate-250'
                        }`}
                      >
                        {portfolioData.mediaUrl && !portfolioImageError ? (
                          <img 
                            src={portfolioData.mediaUrl} 
                            alt="Live Preview" 
                            className="w-full h-full object-cover rounded-xl"
                            onError={() => setPortfolioImageError(true)}
                          />
                        ) : (
                          <div className="flex flex-col items-center justify-center p-2 text-center text-[9px] font-mono select-none">
                            <ImageIcon className={`w-4.5 h-4.5 mb-1 opacity-70 ${portfolioImageError ? 'text-red-500' : 'text-purple-500'}`} />
                            <span className={portfolioImageError ? 'text-red-500 font-bold' : isDark ? 'text-slate-400' : 'text-slate-550'}>
                              {portfolioImageError ? 'Invalid img' : 'Art Preview'}
                            </span>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>

                  {portfolioData.category === 'video_editing' && (
                    <div>
                      <div className="flex justify-between items-center mb-1">
                        <label className={`text-[10px] font-mono block uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>
                          YouTube Video URL / Link
                        </label>
                        <span className="text-[9px] font-mono text-purple-400 dark:text-purple-300 font-bold uppercase tracking-wider">Automated Frame</span>
                      </div>
                      <input 
                        type="url"
                        required={portfolioData.category === 'video_editing'}
                        name="videoSrc"
                        value={portfolioData.videoSrc}
                        onChange={handlePortfolioInputChange}
                        placeholder="https://www.youtube.com/watch?v=S-j79N03Iao"
                        className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-3 text-xs outline-none transition-all transition-colors duration-300 ${
                          isDark 
                            ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                            : 'bg-slate-50 border-slate-250 text-slate-800'
                        }`}
                      />
                    </div>
                  )}

                  <div>
                    <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Work Case Description</label>
                    <textarea 
                      required
                      rows={portfolioData.category === 'video_editing' ? 3 : 5}
                      name="description"
                      value={portfolioData.description}
                      onChange={handlePortfolioInputChange}
                      placeholder="Insert details about your designing workflow or video grading parameters..."
                      className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl p-3 text-xs outline-none transition-all transition-colors duration-300 resize-none font-sans leading-relaxed ${
                        isDark 
                          ? 'bg-slate-900/40 border-white/10 text-slate-200' 
                          : 'bg-slate-50 border-slate-250 text-slate-800'
                      }`}
                    />
                  </div>

                  <button
                    type="submit"
                    className="w-full py-4.5 rounded-xl bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-xs font-black text-white tracking-widest uppercase shadow-xl hover:shadow-[0_0_20px_rgba(139,92,246,0.3)] transition-all duration-300 flex items-center justify-center gap-2 cursor-pointer mt-4"
                  >
                    <Plus className="w-4.5 h-4.5" />
                    <span>Upload to Showroom</span>
                  </button>
                </div>

              </form>

              {/* Sub-section: Live showcase items list */}
              <div className={`p-6 rounded-2xl border transition-all duration-300 ${
                isDark ? 'bg-white/5 border-white/5' : 'bg-white border-slate-200 shadow-sm'
              }`}>
                <h4 className={`font-display font-bold text-sm mb-4 flex items-center gap-2 transition-colors duration-300 ${
                  isDark ? 'text-slate-300' : 'text-slate-800'
                }`}>
                  <Play className="w-4 h-4 text-purple-500" />
                  <span>Currently Managed Exhibition (Count: {portfolio.length})</span>
                </h4>
                
                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                  {portfolio.map((item) => (
                    <div 
                      key={item.id} 
                      className={`p-3 rounded-xl border flex gap-3 items-center justify-between transition-all duration-300 ${
                        isDark ? 'bg-slate-950/40 border-white/5' : 'bg-slate-50 border-slate-200'
                      }`}
                    >
                      <div className="flex gap-3 items-center min-w-0 flex-1">
                        <img 
                          src={item.mediaUrl} 
                          alt={item.title} 
                          className="w-12 h-12 object-cover rounded-lg border border-slate-300/30 flex-shrink-0" 
                          referrerPolicy="no-referrer"
                          onError={(e) => {
                            (e.target as HTMLImageElement).src = 'https://picsum.photos/seed/default/60/40';
                          }}
                        />
                        <div className="min-w-0 flex-1">
                          <p className={`text-xs font-bold truncate leading-none ${isDark ? 'text-slate-200' : 'text-slate-800'}`}>{item.title}</p>
                          <span className="text-[9px] font-mono text-purple-500 font-bold uppercase tracking-wider block mt-1.5">{item.category.replace('_', ' ')}</span>
                        </div>
                      </div>
                      
                      <div className="flex gap-1 flex-shrink-0 ml-1.5">
                        <button
                          type="button"
                          onClick={() => handleStartEditPortfolio(item)}
                          className="p-1.5 rounded-lg hover:bg-purple-100 dark:hover:bg-purple-900/40 text-purple-600 dark:text-purple-400 transition-colors cursor-pointer"
                          title="Edit Portfolio Work"
                        >
                          <Pencil className="w-3.5 h-3.5" />
                        </button>
                        <button
                          type="button"
                          onClick={() => {
                            setDeleteConfirmation({
                              id: item.id,
                              title: item.title,
                              type: 'portfolio',
                              categoryLabel: item.category === 'graphic_design' ? 'Graphic Design Work' : 'Video Editing Work',
                            });
                          }}
                          className="p-1.5 rounded-lg hover:bg-red-100 dark:hover:bg-red-950/40 text-red-650 dark:text-red-400 transition-colors cursor-pointer"
                          title="Delete Portfolio Work"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

            </div>
          )}

          {/* VIEW E: ADMIN TEAM CONSOLE */}
          {adminSection === 'team_manager' && (
            <div className="space-y-6 animate-fade-in" id="admin-team-directory">
              <div className="flex justify-between items-center">
                <div>
                  <h3 className={`font-display font-black text-xl transition-colors duration-300 ${isDark ? 'text-slate-100' : 'text-slate-900'}`}>
                    Admin Team Console
                  </h3>
                  <p className={`text-xs mt-0.5 transition-colors duration-300 ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
                    Manage security clearance, adjust roles, and send simulated SMTP operator invitations. Securely synced to individual user ledger profiles.
                  </p>
                </div>
              </div>

              {/* Stats badges */}
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                <div className={`p-4 rounded-2xl border transition-all duration-300 ${
                  isDark ? 'bg-white/[0.02] border-white/5' : 'bg-white border-slate-200 shadow-sm'
                }`}>
                  <span className="text-[10px] font-mono text-slate-400 uppercase tracking-wider block mb-1">Active Operators</span>
                  <div className="flex items-center gap-2">
                    <div className="w-2.5 h-2.5 rounded-full bg-emerald-500" />
                    <span className={`text-2xl font-bold font-display ${isDark ? 'text-white' : 'text-slate-900'}`}>
                      {adminTeam.filter(m => m.status === 'joined').length}
                    </span>
                    <span className="text-[10px] text-slate-500 font-mono">Internal SLA Nodes</span>
                  </div>
                </div>

                <div className={`p-4 rounded-2xl border transition-all duration-300 ${
                  isDark ? 'bg-white/[0.02] border-white/5' : 'bg-white border-slate-205 shadow-sm'
                }`}>
                  <span className="text-[10px] font-mono text-slate-400 uppercase tracking-wider block mb-1">Pending Clearance</span>
                  <div className="flex items-center gap-2">
                    <div className="w-2.5 h-2.5 rounded-full bg-amber-500 animate-pulse" />
                    <span className={`text-2xl font-bold font-display ${isDark ? 'text-white' : 'text-slate-900'}`}>
                      {adminTeam.filter(m => m.status === 'pending').length}
                    </span>
                    <span className="text-[10px] text-slate-500 font-mono">Awaiting Credentials</span>
                  </div>
                </div>

                <div className={`p-4 rounded-2xl border transition-all duration-300 sm:col-span-2 lg:col-span-1 ${
                  isDark ? 'bg-gradient-to-br from-purple-500/5 to-indigo-500/5 border-purple-500/10' : 'bg-purple-50/40 border-purple-150 shadow-sm'
                }`}>
                  <span className="text-[10px] font-mono text-purple-600 dark:text-purple-400 uppercase tracking-wider font-bold block mb-1">Simulated Mail Dispatch</span>
                  <div className="flex items-center justify-between">
                    <span className={`text-xs ${isDark ? 'text-slate-300' : 'text-slate-600'}`}>Security SMTP logs active</span>
                    <span className="text-[10px] bg-purple-500/10 px-2 py-0.5 rounded font-mono font-bold text-purple-500 border border-purple-500/20">PORT 25/SMTPS</span>
                  </div>
                </div>
              </div>

              {/* Invitation Panel card */}
              <div className={`p-5 rounded-2xl border transition-all duration-305 ${
                isDark ? 'bg-white/5 border-white/5' : 'bg-white border-slate-200 shadow-sm'
              }`}>
                <h4 className={`text-xs font-mono font-bold uppercase tracking-wider mb-4 flex items-center gap-1.5 ${isDark ? 'text-purple-400' : 'text-purple-600'}`}>
                  <Plus className="w-4 h-4" />
                  <span>Invite New Platform Operator</span>
                </h4>

                <form
                  onSubmit={(e) => {
                    e.preventDefault();
                    if (!inviteEmail.trim()) return;
                    
                    // Simple email verification regex
                    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (!emailRegex.test(inviteEmail)) {
                      addToast('Please enter a valid developer/operator email address.', 'error');
                      return;
                    }

                    // Duplicate check
                    const duplicate = adminTeam.find(m => m.email.toLowerCase() === inviteEmail.trim().toLowerCase());
                    if (duplicate) {
                      addToast(`${inviteEmail} has already been registered or invited.`, 'error');
                      return;
                    }

                    inviteAdminMember(inviteEmail, inviteRole);
                    addToast(`High Priority Team Invite sent to: ${inviteEmail}`, 'success');
                    setInviteEmail('');
                  }}
                  className="grid grid-cols-1 md:grid-cols-12 gap-4"
                >
                  <div className="md:col-span-7">
                    <label className={`text-[9px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
                      SMTP Operator Email Address
                    </label>
                    <input
                      type="email"
                      required
                      value={inviteEmail}
                      onChange={(e) => setInviteEmail(e.target.value)}
                      placeholder="operator@masterdigital.agency or client@example.com"
                      className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-3 text-xs outline-none transition-colors duration-300 ${
                        isDark 
                          ? 'bg-slate-950 border-white/10 text-slate-200' 
                          : 'bg-slate-50 border-slate-250 text-slate-800'
                      }`}
                    />
                  </div>

                  <div className="md:col-span-3">
                    <label className={`text-[9px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-505'}`}>
                      Access Privilege & Role
                    </label>
                    <select
                      value={inviteRole}
                      onChange={(e: any) => setInviteRole(e.target.value)}
                      className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-3 py-3 text-xs outline-none transition-colors duration-300 ${
                        isDark 
                          ? 'bg-slate-950 border-white/10 text-slate-200' 
                          : 'bg-slate-50 border-slate-250 text-slate-800 font-medium'
                      }`}
                    >
                      <option value="Super Admin">Super Admin</option>
                      <option value="Editor">Editor</option>
                      <option value="Viewer">Viewer</option>
                      <option value="SLA Operator">SLA Operator</option>
                    </select>
                  </div>

                  <div className="md:col-span-2 flex items-end">
                    <button
                      type="submit"
                      className="w-full py-3 px-4 rounded-xl bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-550 hover:to-indigo-550 text-xs font-black tracking-wider uppercase text-white shadow-lg hover:shadow-[0_0_15px_rgba(139,92,246,0.25)] transition-all duration-300 cursor-pointer flex items-center justify-center gap-1.5"
                    >
                      <Plus className="w-3.5 h-3.5" />
                      <span>DISPATCH</span>
                    </button>
                  </div>
                </form>
              </div>

              {/* Team list table container */}
              <div className={`border rounded-2xl overflow-hidden transition-all duration-305 ${
                isDark ? 'bg-white/5 border-white/5' : 'bg-white border-slate-200'
              }`}>
                <div className={`p-5 border-b flex justify-between items-center flex-wrap gap-2 ${
                  isDark ? 'border-white/5' : 'border-slate-100'
                }`}>
                  <div>
                    <h4 className={`text-sm font-semibold transition-colors duration-300 ${isDark ? 'text-slate-100' : 'text-slate-900'}`}>Team Registry Directory</h4>
                    <p className={`text-[10px] transition-colors duration-300 ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
                      Active & pending clearance logs. Role upgrades are instantly synced and dispatch alerts dynamically.
                    </p>
                  </div>
                  <span className="text-[9px] bg-indigo-500/10 px-2.5 py-1 rounded-full font-mono text-indigo-500 border border-indigo-500/10 uppercase tracking-widest font-black">
                    {adminTeam.length} Members Audited
                  </span>
                </div>

                <div className="overflow-x-auto">
                  <table className="w-full text-left text-xs border-collapse">
                    <thead>
                      <tr className={`border-b text-slate-550 bg-white/[0.01] transition-colors duration-305 ${
                        isDark ? 'border-white/5 bg-white/[0.01] text-slate-400' : 'border-slate-150 bg-slate-50/60'
                      }`}>
                        <th className="p-3 font-mono text-[9px] uppercase tracking-wider pl-5">Operator Name / Email</th>
                        <th className="p-3 font-mono text-[9px] uppercase tracking-wider">Assigned Identity Role</th>
                        <th className="p-3 font-mono text-[9px] uppercase tracking-wider text-center">Clearance Node Status</th>
                        <th className="p-3 font-mono text-[9px] uppercase tracking-wider text-right">Added Stamp</th>
                        <th className="p-3 font-mono text-[9px] uppercase tracking-wider text-right pr-5">Revoke Access</th>
                      </tr>
                    </thead>
                    <tbody className={`divide-y transition-colors duration-300 ${isDark ? 'divide-white/[0.03]' : 'divide-slate-100'}`}>
                      {adminTeam.length === 0 ? (
                        <tr>
                          <td colSpan={5} className="p-8 text-center text-slate-500 font-mono text-[11px]">
                            No operator nodes found in active directory. Invite a user above.
                          </td>
                        </tr>
                      ) : (
                        adminTeam.map((member) => {
                          const seedVal = calculatePureSeed(member.email);
                          const initials = (member.name || member.email)
                            .split(' ')
                            .map((p) => p[0])
                            .slice(0, 2)
                            .join('')
                            .toUpperCase();
                          
                          // Determine colors based on seedVal
                          const colors = [
                            'bg-red-500/20 text-red-500 dark:text-red-400 border border-red-500/35',
                            'bg-blue-500/20 text-blue-500 dark:text-blue-400 border border-blue-500/35',
                            'bg-emerald-500/20 text-emerald-500 dark:text-emerald-400 border border-emerald-500/35',
                            'bg-purple-500/20 text-purple-500 dark:text-purple-400 border border-purple-500/35',
                            'bg-amber-500/20 text-amber-500 dark:text-amber-400 border border-amber-500/35',
                            'bg-cyan-500/20 text-cyan-500 dark:text-cyan-400 border border-cyan-500/35',
                            'bg-pink-500/20 text-pink-500 dark:text-pink-400 border border-pink-500/35',
                          ];
                          const selectedColor = colors[seedVal % colors.length];

                          return (
                            <tr key={member.id} className={`transition-colors duration-200 ${isDark ? 'hover:bg-white/[0.01]' : 'hover:bg-slate-50/50'}`}>
                              <td className="p-3 pl-5">
                                <div className="flex items-center gap-3">
                                  <div className={`w-8 h-8 rounded-xl font-mono font-bold text-xs flex items-center justify-center ${selectedColor}`}>
                                    {initials}
                                  </div>
                                  <div>
                                    <div className={`font-semibold text-xs transition-colors duration-300 ${isDark ? 'text-slate-200' : 'text-slate-800'}`}>
                                      {member.name || member.email.split('@')[0]}
                                    </div>
                                    <div className="text-[10px] text-slate-500 font-mono mt-0.5">{member.email}</div>
                                  </div>
                                </div>
                              </td>

                              <td className="p-3">
                                {member.role === 'Owner' ? (
                                  <span className={`px-2 py-1 rounded font-mono text-[9px] uppercase tracking-wider font-extrabold border bg-pink-500/10 text-pink-500 border-pink-500/20`}>
                                    System Owner
                                  </span>
                                ) : (
                                  <select
                                    value={member.role}
                                    onChange={(e: any) => {
                                      updateAdminRole(member.id, e.target.value);
                                      addToast(`Operator ${member.email} updated to ${e.target.value}!`, 'info');
                                    }}
                                    className={`border rounded-lg px-2.5 py-1 text-[11px] outline-none font-mono font-bold max-w-[150px] cursor-pointer transition-colors duration-200 ${
                                      isDark 
                                        ? 'bg-slate-900 border-white/10 text-slate-300 focus:border-purple-500' 
                                        : 'bg-slate-50 border-slate-200 text-slate-700 focus:border-purple-400 font-medium'
                                    }`}
                                  >
                                    <option value="Super Admin">Super Admin</option>
                                    <option value="Editor">Editor</option>
                                    <option value="Viewer">Viewer</option>
                                    <option value="SLA Operator">SLA Operator</option>
                                  </select>
                                )}
                              </td>

                              <td className="p-3 text-center">
                                <span className={`px-2 py-0.5 rounded-full font-mono text-[9px] uppercase tracking-widest font-bold border inline-flex items-center gap-1.5 ${
                                  member.status === 'joined'
                                    ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-500 dark:text-emerald-400'
                                    : 'bg-amber-500/10 border-amber-500/20 text-amber-550 dark:text-amber-400'
                                }`}>
                                  <span className={`w-1.5 h-1.5 rounded-full ${
                                    member.status === 'joined' ? 'bg-emerald-500 animate-pulse' : 'bg-amber-500 animate-pulse'
                                  }`} />
                                  <span>{member.status === 'joined' ? 'joined' : 'pending'}</span>
                                </span>
                              </td>

                              <td className="p-3 text-slate-500 font-mono text-right text-[11px]">
                                {member.joinedAt ? new Date(member.joinedAt).toLocaleDateString() : 'Awaiting Accepts'}
                              </td>

                              <td className="p-3 text-right pr-5">
                                {member.role === 'Owner' ? (
                                  <span className="text-[10px] text-slate-400 font-mono italic">Primary Core</span>
                                ) : confirmDeleteMemberId === member.id ? (
                                  <div className="flex items-center justify-end gap-1 bg-red-500/10 border border-red-500/20 rounded-lg p-0.5 animate-fade-in inline-flex">
                                    <button
                                      type="button"
                                      onClick={() => {
                                        removeAdminMember(member.id);
                                        setConfirmDeleteMemberId(null);
                                        addToast(`Operator access for ${member.email} successfully revoked.`, 'warning');
                                      }}
                                      className="px-2 py-0.5 text-[9px] font-bold text-red-500 hover:text-red-400 transition-colors cursor-pointer"
                                    >
                                      Sure?
                                    </button>
                                    <button
                                      type="button"
                                      onClick={() => setConfirmDeleteMemberId(null)}
                                      className="p-0.5 text-slate-400 hover:text-slate-200 transition-colors cursor-pointer"
                                    >
                                      <X className="w-3 h-3" />
                                    </button>
                                  </div>
                                ) : (
                                  <button
                                    type="button"
                                    onClick={() => setConfirmDeleteMemberId(member.id)}
                                    className={`p-1.5 rounded-lg border transition-all duration-200 cursor-pointer ${
                                      isDark 
                                        ? 'bg-red-500/10 border-red-500/20 text-red-400 hover:bg-red-500/20 hover:text-red-300' 
                                        : 'bg-red-50 border-red-100 text-red-600 hover:bg-red-100 hover:text-red-750'
                                    }`}
                                    title="Revoke operator credentials"
                                  >
                                    <Trash2 className="w-3.5 h-3.5" />
                                  </button>
                                )}
                              </td>
                            </tr>
                          );
                        })
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          )}

        </div>
      </div>

      {/* FULL RESPONSIVE PRODUCT EDIT MODAL */}
      <AnimatePresence>
        {editingProduct && (
          <div className="fixed inset-0 z-[10000] flex items-center justify-center p-4 overflow-y-auto animate-fade-in" id="edit-product-modal-viewport">
            {/* Backdrop Blur effect */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setEditingProduct(null)}
              className="fixed inset-0 bg-slate-950/65 backdrop-blur-sm cursor-pointer"
            />

            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: 15 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: 15 }}
              transition={{ duration: 0.2, ease: 'easeOut' }}
              className={`relative w-full max-w-2xl rounded-2xl border p-6 sm:p-8 shadow-2xl z-10 max-h-[90vh] overflow-y-auto transition-all ${
                isDark ? 'bg-slate-900 border-white/10 text-slate-100' : 'bg-white border-slate-200 text-slate-800'
              }`}
            >
              <div className="flex justify-between items-start mb-6">
                <div>
                  <h3 className="font-display font-black text-lg">Modify Catalog Offering</h3>
                  <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
                    ID Reference: <span className="font-mono">{editingProduct.id}</span>
                  </p>
                </div>
                <button
                  type="button"
                  onClick={() => setEditingProduct(null)}
                  className={`p-1.5 rounded-lg border transition-all cursor-pointer ${
                    isDark ? 'border-white/5 bg-white/5 hover:bg-white/10 text-slate-300' : 'border-slate-200 bg-slate-50 hover:bg-slate-100 text-slate-600'
                  }`}
                >
                  <X className="w-4 h-4" />
                </button>
              </div>

              <form onSubmit={handleUpdateProductSubmit} className="space-y-4">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>Product Offering Title</label>
                    <input 
                      type="text"
                      required
                      name="name"
                      value={editFormData.name}
                      onChange={handleEditInputChange}
                      placeholder="e.g. 50k TikTok Organic Followers Booster"
                      className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-3.5 py-2.5 text-xs outline-none transition-colors duration-350 ${
                        isDark 
                          ? 'bg-slate-950 border-white/10 text-slate-200' 
                          : 'bg-slate-50 border-slate-250 text-slate-800'
                      }`}
                    />
                  </div>

                  <div className="grid grid-cols-2 gap-2.5">
                    <div>
                      <div className="flex justify-between items-center mb-1">
                        <label className={`text-[10px] font-mono block uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
                          Price ({editPriceCurrency})
                        </label>
                        <div className="flex gap-1">
                          <button
                            type="button"
                            onClick={() => setEditPriceCurrency('USD')}
                            className={`px-1 rounded text-[8px] font-mono font-bold transition-all cursor-pointer ${
                              editPriceCurrency === 'USD'
                                ? 'bg-purple-600 text-white shadow-sm'
                                : 'bg-slate-200 dark:bg-white/10 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
                            }`}
                          >
                            USD
                          </button>
                          <button
                            type="button"
                            onClick={() => setEditPriceCurrency('MMK')}
                            className={`px-1 rounded text-[8px] font-mono font-bold transition-all cursor-pointer ${
                              editPriceCurrency === 'MMK'
                                ? 'bg-purple-600 text-white shadow-sm'
                                : 'bg-slate-200 dark:bg-white/10 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
                            }`}
                          >
                            MMK
                          </button>
                        </div>
                      </div>
                      <input 
                        type="number"
                        required
                        step={editPriceCurrency === 'MMK' ? '1' : '0.01'}
                        name="price"
                        value={editFormData.price}
                        onChange={handleEditInputChange}
                        placeholder={editPriceCurrency === 'MMK' ? '300000' : '79.99'}
                        className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-3.5 py-2.5 text-xs outline-none transition-colors duration-300 ${
                          isDark 
                            ? 'bg-slate-950 border-white/10 text-slate-200' 
                            : 'bg-slate-50 border-slate-250 text-slate-800'
                        }`}
                      />
                    </div>

                    <div>
                      <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>Delivery Time SLA</label>
                      <input 
                        type="text"
                        name="deliveryTime"
                        value={editFormData.deliveryTime}
                        onChange={handleEditInputChange}
                        placeholder="Instant Access / 4 days SLA"
                        className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/35 rounded-xl px-3.5 py-2.5 text-xs outline-none transition-all transition-colors duration-300 ${
                          isDark 
                            ? 'bg-slate-950 border-white/10 text-slate-200' 
                            : 'bg-slate-50 border-slate-250 text-slate-800'
                        }`}
                      />
                    </div>
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label className={`text-[10px] font-mono block mb-1.5 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>Service Category</label>
                    <div className="flex flex-col gap-1.5">
                      {[
                        { id: 'digital_products', label: 'Digital Products' },
                        { id: 'graphic_design', label: 'Graphic Design' },
                        { id: 'video_editing', label: 'Video Editing' }
                      ].map((cat) => {
                        const isSelected = editFormData.category === cat.id;
                        return (
                          <button
                            key={cat.id}
                            type="button"
                            onClick={() => setEditFormData(prev => ({ ...prev, category: cat.id as Product['category'] }))}
                            className={`w-full flex items-center justify-between px-3 py-2.5 rounded-xl border text-[11px] font-semibold transition-all duration-300 cursor-pointer ${
                              isSelected
                                ? isDark
                                  ? 'bg-purple-600/15 border-purple-500 text-purple-200 shadow-sm shadow-purple-500/10'
                                  : 'bg-purple-50/70 border-purple-600 text-purple-900 shadow-sm'
                                : isDark
                                  ? 'bg-slate-950 border-white/5 text-slate-400 hover:text-slate-200 hover:border-white/10'
                                  : 'bg-slate-50 border-slate-200 text-slate-600 hover:text-slate-800 hover:border-slate-300'
                            }`}
                          >
                            <span>{cat.label}</span>
                            <div className={`w-3.5 h-3.5 rounded-full border flex items-center justify-center transition-all ${
                              isSelected
                                ? 'border-purple-500 bg-purple-500'
                                : isDark
                                  ? 'border-white/20 bg-slate-950'
                                  : 'border-slate-300 bg-white'
                            }`}>
                              {isSelected && (
                                <div className="w-1.5 h-1.5 rounded-full bg-white" />
                              )}
                            </div>
                          </button>
                        );
                      })}
                    </div>
                  </div>

                  <div 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-550'}`}>Delivery Type</label>
                      <select
                        name="isDigital"
                        value={editFormData.isDigital}
                        onChange={handleEditInputChange}
                        className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-3.5 py-2.5 text-xs outline-none transition-all cursor-pointer ${
                          isDark 
                            ? 'bg-slate-950 border-white/10 text-slate-200' 
                            : 'bg-slate-50 border-slate-250 text-slate-800'
                        }`}
                      >
                        <option value="true" className="bg-slate-950 text-white">Direct Credentials</option>
                        <option value="false" className="bg-slate-950 text-white">Creative Brief Required</option>
                      </select>
                    </div>

                    <div>
                      <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>Stock Availability</label>
                      <select
                        name="inStock"
                        value={editFormData.inStock}
                        onChange={handleEditInputChange}
                        className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-3.5 py-2.5 text-xs outline-none transition-all cursor-pointer ${
                          isDark 
                            ? 'bg-slate-950 border-white/10 text-slate-200' 
                            : 'bg-slate-50 border-slate-250 text-slate-800'
                        }`}
                      >
                        <option value="true" className="bg-slate-950 text-white">In Stock</option>
                        <option value="false" className="bg-slate-950 text-white">Out of Stock</option>
                      </select>
                    </div>

                    <div>
                      <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Service Sub-Tags (Comma Separated)</label>
                      <input 
                        type="text"
                        name="tags"
                        value={editFormData.tags}
                        onChange={handleEditInputChange}
                        placeholder="Verified, Aged, Premium"
                        className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-3.5 py-2.5 text-xs outline-none transition-all transition-colors duration-300 ${
                          isDark 
                            ? 'bg-slate-950 border-white/10 text-slate-200' 
                            : 'bg-slate-50 border-slate-255 text-slate-800'
                        }`}
                      />
                    </div>
                  </div>
                </div>

                <div 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'}`}>Cover Image Link URL</label>
                    <div className="flex gap-3 items-stretch">
                      <div className="flex-1 flex flex-col justify-center gap-2">
                        <input 
                          type="url"
                          name="mediaUrl"
                          value={editFormData.mediaUrl}
                          onChange={handleEditInputChange}
                          placeholder="https://picsum.photos/seed/agency/600/400"
                          className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-3.5 py-2.5 text-xs outline-none transition-all transition-colors duration-300 ${
                            isDark 
                              ? 'bg-slate-950 border-white/10 text-slate-200' 
                              : 'bg-slate-50 border-slate-250 text-slate-800'
                          }`}
                        />
                        <div className="flex items-center gap-2">
                          <span className={`text-[10px] font-mono tracking-wide ${isDark ? 'text-slate-500' : 'text-slate-400'}`}>Or</span>
                          <label className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg border text-[10px] font-mono font-bold cursor-pointer transition-all duration-300 ${
                            isDark 
                              ? 'bg-purple-950/20 border-purple-500/20 text-purple-300 hover:bg-purple-950/30' 
                              : 'bg-purple-50 border-purple-200 text-purple-750 hover:bg-purple-100'
                          }`}>
                            <Download className="w-3 h-3" />
                            <span>Upload Local File</span>
                            <input 
                              type="file"
                              accept="image/*"
                              className="hidden"
                              onChange={(e) => {
                                const file = e.target.files?.[0];
                                if (file) {
                                  const reader = new FileReader();
                                  reader.onload = (etc) => {
                                    if (typeof etc.target?.result === 'string') {
                                      setEditFormData((prev) => ({ ...prev, mediaUrl: etc.target!.result as string }));
                                      setEditImageError(false);
                                      addToast("Updated catalog cover image uploaded successfully", "success");
                                    }
                                  };
                                  reader.readAsDataURL(file);
                                }
                              }}
                            />
                          </label>
                          {editFormData.mediaUrl && editFormData.mediaUrl.startsWith('data:') && (
                            <button
                              type="button"
                              onClick={() => {
                                setEditFormData((prev) => ({ ...prev, mediaUrl: '' }));
                                addToast("Uploaded design image cleared", "info");
                              }}
                              className="text-[10px] font-mono text-red-500 hover:underline cursor-pointer"
                            >
                              Clear
                            </button>
                          )}
                        </div>
                      </div>

                      {/* Real-time Image Preview */}
                      <div 
                        id="edit-image-preview-box"
                        className={`w-24 sm:w-28 aspect-video rounded-xl flex-shrink-0 border flex items-center justify-center relative overflow-hidden transition-all duration-300 ${
                          isDark 
                            ? 'bg-slate-950 border-white/10' 
                            : 'bg-slate-50 border-slate-250'
                        }`}
                      >
                        {editFormData.mediaUrl && !editImageError ? (
                          <img 
                            src={editFormData.mediaUrl} 
                            alt="Live Preview" 
                            className="w-full h-full object-cover rounded-xl"
                            onError={() => setEditImageError(true)}
                          />
                        ) : (
                          <div className="flex flex-col items-center justify-center p-2 text-center text-[9px] font-mono select-none">
                            <ImageIcon className={`w-4 h-4 mb-1 opacity-70 ${editImageError ? 'text-red-500' : 'text-purple-500'}`} />
                            <span className={editImageError ? 'text-red-500 font-bold' : isDark ? 'text-slate-400' : 'text-slate-500'}>
                              {editImageError ? 'Invalid URL' : 'Preview'}
                            </span>
                          </div>
                        )}
                      </div>
                    </div>

                    {/* Generative AI Image Cover Generator */}
                    <div className={`mt-3 p-3.5 rounded-xl border transition-all duration-300 ${
                      isDark ? 'bg-purple-950/20 border-purple-500/20' : 'bg-purple-50/50 border-purple-200'
                    }`}>
                      <div className="flex items-center gap-1.5 mb-2 text-purple-600 dark:text-purple-300 font-bold">
                        <RefreshCw className={`w-3.5 h-3.5 ${editIsGeneratingImage ? 'animate-spin' : ''}`} />
                        <span className="text-[10px] font-mono uppercase tracking-wider">AI Instant Cover Art Generator</span>
                      </div>
                      
                      <div className="flex gap-2">
                        <input 
                          type="text"
                          placeholder="Describe the aesthetic visualization..."
                          value={editAiPrompt}
                          onChange={(e) => setEditAiPrompt(e.target.value)}
                          className={`flex-1 border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-lg px-3 py-2 text-xs outline-none transition-colors duration-300 ${
                            isDark 
                              ? 'bg-slate-950 border-white/10 text-slate-200 placeholder-slate-500' 
                              : 'bg-white border-slate-250 text-slate-800 placeholder-slate-400'
                          }`}
                        />
                        <button
                          type="button"
                          onClick={() => handleGenerateAiImageEdit(editAiPrompt)}
                          disabled={editIsGeneratingImage || !editAiPrompt.trim()}
                          className="px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 text-white font-bold text-xs shadow transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-1.5 whitespace-nowrap"
                        >
                          {editIsGeneratingImage ? (
                            <>
                              <RefreshCw className="w-3 h-3 animate-spin" />
                              <span>Generating...</span>
                            </>
                          ) : (
                            <span>Generate Art</span>
                          )}
                        </button>
                      </div>
                      {editAiGenError && (
                        <p className="text-[10px] text-red-500 mt-1.5 font-mono leading-relaxed">{editAiGenError}</p>
                      )}
                    </div>
                  </div>

                  <div>
                    <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>Product Catalog Description</label>
                    <textarea 
                      required
                      rows={3}
                      name="description"
                      value={editFormData.description}
                      onChange={handleEditInputChange}
                      placeholder="Enter detailed parameters of this catalog service..."
                      className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl p-3 text-xs outline-none transition-all transition-colors duration-300 resize-none font-sans leading-relaxed ${
                        isDark 
                          ? 'bg-slate-950 border-white/10 text-slate-200' 
                          : 'bg-slate-50 border-slate-250 text-slate-800'
                      }`}
                    />
                  </div>
                </div>

                <div className="flex gap-3 justify-end pt-4 border-t border-slate-100 dark:border-white/5">
                  <button
                    type="button"
                    onClick={() => setEditingProduct(null)}
                    className={`px-4.5 py-2.5 rounded-xl border text-xs font-bold tracking-wide transition-all cursor-pointer ${
                      isDark 
                        ? 'border-white/10 bg-white/5 hover:bg-white/10 text-slate-300' 
                        : 'border-slate-250 bg-slate-50 hover:bg-slate-100 text-slate-600'
                    }`}
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="px-6 py-2.5 rounded-xl bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-xs font-black text-white tracking-wider uppercase shadow-md transition-all cursor-pointer"
                  >
                    Save Catalog Item
                  </button>
                </div>
              </form>
            </motion.div>
          </div>
        )}
      </AnimatePresence>

      {/* SHAPEWISE SHOWCASE PORTFOLIO EDIT MODAL */}
      <AnimatePresence>
        {editingPortfolio && (
          <div className="fixed inset-0 z-[10000] flex items-center justify-center p-4 overflow-y-auto animate-fade-in" id="edit-portfolio-modal-viewport">
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setEditingPortfolio(null)}
              className="fixed inset-0 bg-slate-950/65 backdrop-blur-sm cursor-pointer"
            />

            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: 15 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: 15 }}
              transition={{ type: 'spring', duration: 0.5 }}
              className={`relative w-full max-w-3xl rounded-3xl border p-6 shadow-2xl relative z-10 my-8 ${
                isDark 
                  ? 'bg-slate-900 border-white/5 shadow-purple-900/15' 
                  : 'bg-white border-slate-200'
              }`}
            >
              <button
                type="button"
                onClick={() => setEditingPortfolio(null)}
                className={`absolute top-5 right-5 p-2 rounded-xl transition-colors cursor-pointer ${
                  isDark ? 'hover:bg-white/10 text-slate-400 hover:text-white' : 'hover:bg-slate-100 text-slate-500 hover:text-slate-800'
                }`}
                title="Close editing modal"
              >
                <X className="w-4.5 h-4.5" />
              </button>

              <div className="flex gap-2.5 items-center mb-6">
                <div className="w-10 h-10 rounded-2xl bg-purple-500/10 flex items-center justify-center">
                  <Pencil className="w-5 h-5 text-purple-500" />
                </div>
                <div>
                  <h3 className={`font-display font-black text-base tracking-wide ${isDark ? 'text-white' : 'text-slate-900'}`}>Edit Portfolio Item</h3>
                  <p className={`text-[10px] font-mono mt-0.5 ${isDark ? 'text-slate-400' : 'text-slate-555'}`}>
                    ID: {editingPortfolio.id} &bull; CATEGORY: {editingPortfolio.category?.toUpperCase()}
                  </p>
                </div>
              </div>

              <form onSubmit={handleUpdatePortfolioSubmit} className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {/* Left Col */}
                  <div 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-550'}`}>Work Title</label>
                      <input 
                        type="text"
                        required
                        name="title"
                        value={editPortfolioFormData.title}
                        onChange={handleEditPortfolioInputChange}
                        placeholder="e.g. Minimalist Retro Branding Identity Set"
                        className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-3.5 py-2.5 text-xs outline-none transition-colors duration-300 ${
                          isDark 
                            ? 'bg-slate-950 border-white/10 text-slate-200' 
                            : 'bg-slate-50 border-slate-250 text-slate-800'
                        }`}
                      />
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 flex-wrap">
                      <div>
                        <label className={`text-[10px] font-mono block mb-1.5 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Service Category</label>
                        <div className="flex flex-col gap-1.5">
                          {[
                            { id: 'graphic_design', label: 'Graphic Design' },
                            { id: 'video_editing', label: 'Video Editing' }
                          ].map((cat) => {
                            const isSelected = editPortfolioFormData.category === cat.id;
                            return (
                              <button
                                key={cat.id}
                                type="button"
                                onClick={() => setEditPortfolioFormData(prev => ({ ...prev, category: cat.id as 'graphic_design' | 'video_editing' }))}
                                className={`w-full flex items-center justify-between px-3 py-2 rounded-xl border text-[11px] font-semibold transition-all duration-300 cursor-pointer ${
                                  isSelected
                                    ? isDark
                                      ? 'bg-purple-600/15 border-purple-500 text-purple-200 shadow-sm shadow-purple-500/10'
                                      : 'bg-purple-50/70 border-purple-600 text-purple-900 shadow-sm'
                                    : isDark
                                      ? 'bg-slate-950 border-white/5 text-slate-400 hover:text-slate-200 hover:border-white/10'
                                      : 'bg-slate-50 border-slate-200 text-slate-600 hover:text-slate-800 hover:border-slate-300'
                                }`}
                              >
                                <span>{cat.label}</span>
                                <div className={`w-3.5 h-3.5 rounded-full border flex items-center justify-center transition-all ${
                                  isSelected
                                    ? 'border-purple-500 bg-purple-500 shadow-sm'
                                    : isDark
                                      ? 'border-white/20 bg-slate-950/40'
                                      : 'border-slate-300 bg-white'
                                }`}>
                                  {isSelected && (
                                    <div className="w-1.5 h-1.5 rounded-full bg-white" />
                                  )}
                                </div>
                              </button>
                            );
                          })}
                        </div>
                      </div>

                      <div>
                        <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Aspect Ratio Preset</label>
                        <select
                          name="aspectRatio"
                          value={editPortfolioFormData.aspectRatio}
                          onChange={handleEditPortfolioInputChange}
                          className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-3 text-xs outline-none transition-all transition-colors duration-300 cursor-pointer ${
                            isDark 
                              ? 'bg-slate-950 border-white/10 text-slate-200' 
                              : 'bg-slate-50 border-slate-250 text-slate-800'
                          }`}
                        >
                          <option value="aspect-square" className="bg-slate-950 text-white">Square (1:1)</option>
                          <option value="aspect-[3/4]" className="bg-slate-950 text-white">Tall Profile (3:4)</option>
                          <option value="aspect-[4/5]" className="bg-slate-950 text-white">Instagram Portrait (4:5)</option>
                          <option value="aspect-[16/9]" className="bg-slate-950 text-white">Cinematic Widescreen (16:9)</option>
                          <option value="aspect-[4/3]" className="bg-slate-950 text-white">Standard Video (4:3)</option>
                        </select>
                      </div>
                    </div>

                    <div>
                      <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Work Tags (Comma Separated)</label>
                      <input 
                        type="text"
                        name="tags"
                        value={editPortfolioFormData.tags}
                        onChange={handleEditPortfolioInputChange}
                        placeholder="Branding, Retro, Typography"
                        className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-3 text-xs outline-none transition-all transition-colors duration-300 ${
                          isDark 
                            ? 'bg-slate-950 border-white/10 text-slate-200' 
                            : 'bg-slate-50 border-slate-250 text-slate-800'
                        }`}
                      />
                    </div>
                  </div>

                  {/* Right Col */}
                  <div className="space-y-4 flex flex-col justify-between">
                    <div>
                      <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Cover Image Link URL</label>
                      <div className="flex gap-3 items-stretch">
                        <div className="flex-1 flex flex-col justify-center gap-2">
                          <input 
                            type="url"
                            name="mediaUrl"
                            value={editPortfolioFormData.mediaUrl}
                            onChange={handleEditPortfolioInputChange}
                            placeholder="https://picsum.photos/seed/work/600/400"
                            className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-2 text-xs outline-none transition-all transition-colors duration-300 ${
                              isDark 
                                ? 'bg-slate-950 border-white/10 text-slate-200' 
                                : 'bg-slate-50 border-slate-250 text-slate-800'
                            }`}
                          />
                          <div className="flex items-center gap-2">
                            <span className={`text-[10px] font-mono tracking-wide ${isDark ? 'text-slate-500' : 'text-slate-400'}`}>Or</span>
                            <label className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg border text-[10px] font-mono font-bold cursor-pointer transition-all duration-300 ${
                              isDark 
                                ? 'bg-purple-950/20 border-purple-500/20 text-purple-300 hover:bg-purple-950/30' 
                                : 'bg-purple-50 border-purple-200 text-purple-750 hover:bg-purple-100'
                            }`}>
                              <Download className="w-3" />
                              <span>Upload Local File</span>
                              <input 
                                type="file"
                                accept="image/*"
                                className="hidden"
                                onChange={(e) => {
                                  const file = e.target.files?.[0];
                                  if (file) {
                                    const reader = new FileReader();
                                    reader.onload = (etc) => {
                                      if (typeof etc.target?.result === 'string') {
                                        setEditPortfolioFormData((prev) => ({ ...prev, mediaUrl: etc.target!.result as string }));
                                        setEditPortfolioImageError(false);
                                        addToast("Showcase work preview uploaded successfully", "success");
                                      }
                                    };
                                    reader.readAsDataURL(file);
                                  }
                                }}
                              />
                            </label>
                            {editPortfolioFormData.mediaUrl && editPortfolioFormData.mediaUrl.startsWith('data:') && (
                              <button
                                type="button"
                                onClick={() => {
                                  setEditPortfolioFormData((prev) => ({ ...prev, mediaUrl: '' }));
                                  addToast("Uploaded showroom presentation cleared", "info");
                                }}
                                className="text-[10px] font-mono text-red-500 hover:underline cursor-pointer"
                              >
                                Clear
                              </button>
                            )}
                          </div>
                        </div>

                        {/* Cover Preview inside Modal */}
                        <div 
                          id="edit-portfolio-image-preview"
                          className={`w-24 sm:w-28 aspect-video rounded-xl flex-shrink-0 border flex items-center justify-center relative overflow-hidden transition-all duration-300 ${
                            isDark 
                              ? 'bg-slate-950 border-white/10' 
                              : 'bg-slate-50 border-slate-250'
                          }`}
                        >
                          {editPortfolioFormData.mediaUrl && !editPortfolioImageError ? (
                            <img 
                              src={editPortfolioFormData.mediaUrl} 
                              alt="Live Preview" 
                              className="w-full h-full object-cover rounded-xl"
                              onError={() => setEditPortfolioImageError(true)}
                              referrerPolicy="no-referrer"
                            />
                          ) : (
                            <div className="flex flex-col items-center justify-center p-2 text-center text-[9px] font-mono select-none">
                              <ImageIcon className={`w-4 h-4 mb-1 opacity-70 ${editPortfolioImageError ? 'text-red-500' : 'text-purple-500'}`} />
                              <span className={editPortfolioImageError ? 'text-red-500 font-bold' : isDark ? 'text-slate-400' : 'text-slate-550'}>
                                {editPortfolioImageError ? 'Invalid img' : 'Art Preview'}
                              </span>
                            </div>
                          )}
                        </div>
                      </div>
                    </div>

                    {editPortfolioFormData.category === 'video_editing' && (
                      <div>
                        <div className="flex justify-between items-center mb-1">
                          <label className={`text-[10px] font-mono block uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>
                            YouTube Video URL / Link
                          </label>
                        </div>
                        <input 
                          type="url"
                          required={editPortfolioFormData.category === 'video_editing'}
                          name="videoSrc"
                          value={editPortfolioFormData.videoSrc}
                          onChange={handleEditPortfolioInputChange}
                          placeholder="https://www.youtube.com/watch?v=S-j79N03Iao"
                          className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-4 py-2.5 text-xs outline-none transition-all transition-colors duration-300 ${
                            isDark 
                              ? 'bg-slate-950 border-white/10 text-slate-200' 
                              : 'bg-slate-50 border-slate-250 text-slate-800'
                          }`}
                        />
                      </div>
                    )}

                    <div>
                      <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>Work Case Description</label>
                      <textarea 
                        required
                        rows={2}
                        name="description"
                        value={editPortfolioFormData.description}
                        onChange={handleEditPortfolioInputChange}
                        placeholder="Insert details about your designing workflow or video grading parameters..."
                        className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl p-2.5 text-xs outline-none transition-all transition-colors duration-300 resize-none font-sans leading-relaxed ${
                          isDark 
                            ? 'bg-slate-950 border-white/10 text-slate-200' 
                            : 'bg-slate-50 border-slate-250 text-slate-800'
                        }`}
                      />
                    </div>
                  </div>
                </div>

                <div className="flex justify-end gap-2.5 pt-4 border-t border-slate-100 dark:border-white/5">
                  <button
                    type="button"
                    onClick={() => setEditingPortfolio(null)}
                    className={`px-4.5 py-2.5 rounded-xl text-xs font-semibold tracking-wide transition-all duration-200 cursor-pointer ${
                      isDark 
                        ? 'bg-slate-950 hover:bg-slate-950/80 text-slate-300 hover:text-white border border-white/5' 
                        : 'bg-slate-100 hover:bg-slate-150 text-slate-650 hover:text-slate-900 border border-slate-200'
                    }`}
                  >
                    Discard Changes
                  </button>
                  <button
                    type="submit"
                    className="px-6 py-2.5 rounded-xl bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-550 text-xs font-black tracking-wider uppercase text-white shadow-xl hover:shadow-[0_0_15px_rgba(139,92,246,0.3)] transition-all duration-300 cursor-pointer"
                  >
                    Save Showroom Updates
                  </button>
                </div>
              </form>
            </motion.div>
          </div>
        )}
      </AnimatePresence>

      {/* INLINE DELETE CONFIRMATION MODAL */}
      <AnimatePresence>
        {deleteConfirmation && (
          <div className="fixed inset-0 z-[11000] flex items-center justify-center p-4" id="delete-confirmation-modal-viewport">
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setDeleteConfirmation(null)}
              className="fixed inset-0 bg-slate-950/65 backdrop-blur-sm cursor-pointer"
            />

            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: 10 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: 10 }}
              transition={{ type: 'spring', duration: 0.4 }}
              className={`relative w-full max-w-sm rounded-2xl border p-6 shadow-2xl z-10 ${
                isDark 
                  ? 'bg-slate-900 border-white/5 shadow-purple-950/20' 
                  : 'bg-white border-slate-200 shadow-slate-300/50'
              }`}
            >
              <button
                type="button"
                onClick={() => setDeleteConfirmation(null)}
                className={`absolute top-4 right-4 p-1.5 rounded-lg transition-colors cursor-pointer ${
                  isDark ? 'hover:bg-white/10 text-slate-400 hover:text-white' : 'hover:bg-slate-105 text-slate-500 hover:text-slate-800'
                }`}
                title="Cancel deletion"
              >
                <X className="w-4 h-4" />
              </button>

              <div className="flex flex-col items-center text-center mt-2">
                <div className="w-12 h-12 rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 text-red-500">
                  <Trash2 className="w-5 h-5 animate-pulse" />
                </div>
                
                <h3 className={`font-display font-black text-sm tracking-widest uppercase ${isDark ? 'text-white' : 'text-slate-950'}`}>
                  Confirm Deletion
                </h3>
                
                <p className={`text-xs mt-3 leading-relaxed max-w-xs ${isDark ? 'text-slate-400' : 'text-slate-600'}`}>
                  Are you absolutely sure you want to remove the {deleteConfirmation.categoryLabel?.toLowerCase() || 'item'} <span className="font-bold text-red-500">&quot;{deleteConfirmation.title}&quot;</span>? This action is permanent and cannot be undone.
                </p>

                <div className="flex gap-2.5 w-full mt-6">
                  <button
                    type="button"
                    onClick={() => setDeleteConfirmation(null)}
                    className={`flex-1 py-2 rounded-xl text-xs font-semibold tracking-wide transition-all duration-200 cursor-pointer ${
                      isDark 
                        ? 'bg-slate-950 hover:bg-slate-950/85 text-slate-300 hover:text-white border border-white/5' 
                        : 'bg-slate-100 hover:bg-slate-150 text-slate-655 hover:text-slate-900 border border-slate-200'
                    }`}
                  >
                    Cancel
                  </button>
                  <button
                    type="button"
                    onClick={() => {
                      if (deleteConfirmation.type === 'product') {
                        deleteProduct(deleteConfirmation.id);
                        addToast(`${deleteConfirmation.categoryLabel || 'Catalog'} item deleted successfully`, 'success');
                      } else {
                        deletePortfolioItem(deleteConfirmation.id);
                        addToast('Portfolio exhibition work deleted successfully', 'success');
                      }
                      setDeleteConfirmation(null);
                    }}
                    className="flex-1 py-2 rounded-xl bg-gradient-to-r from-red-600 to-rose-600 hover:from-red-500 hover:to-rose-500 text-xs font-black tracking-wider uppercase text-white shadow-lg hover:shadow-[0_0_15px_rgba(239,68,68,0.25)] transition-all duration-300 cursor-pointer"
                  >
                    Delete
                  </button>
                </div>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>

      {/* USER NOTIFICATION COMPOSE MODAL */}
      <AnimatePresence>
        {notifyingOrder && (
          <div className="fixed inset-0 z-[11000] flex items-center justify-center p-4 overflow-y-auto" id="custom-notification-modal-viewport">
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setNotifyingOrder(null)}
              className="fixed inset-0 bg-slate-950/65 backdrop-blur-sm cursor-pointer"
            />

            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: 10 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: 10 }}
              transition={{ type: 'spring', duration: 0.4 }}
              className={`relative w-full max-w-md rounded-2xl border p-6 shadow-2xl z-10 ${
                isDark 
                  ? 'bg-slate-900 border-white/5 shadow-purple-950/20' 
                  : 'bg-white border-slate-200 shadow-slate-300/50'
              }`}
            >
              <button
                type="button"
                onClick={() => setNotifyingOrder(null)}
                className={`absolute top-4 right-4 p-1.5 rounded-lg transition-colors cursor-pointer ${
                  isDark ? 'hover:bg-white/10 text-slate-400 hover:text-white' : 'hover:bg-slate-105 text-slate-500 hover:text-slate-800'
                }`}
                title="Cancel message"
              >
                <X className="w-4 h-4" />
              </button>

              <div className="flex flex-col mt-2">
                <div className="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center mb-4 text-purple-500">
                  <Bell className="w-5 h-5 animate-bounce" />
                </div>
                
                <h3 className={`font-display font-black text-sm tracking-widest uppercase ${isDark ? 'text-white' : 'text-slate-950'}`}>
                  Dispatch Team Notification
                </h3>
                <p className="text-[10px] text-slate-500 dark:text-slate-400 mt-1 font-mono">
                  To Client: <span className="font-bold text-cyan-600 dark:text-cyan-400">{notifyingOrder.clientName}</span> ({notifyingOrder.clientEmail})
                </p>

                <form
                  onSubmit={(e) => {
                    e.preventDefault();
                    if (!customEmailSubject.trim() || !customEmailBody.trim()) return;
                    sendSimulatedEmail(
                      notifyingOrder.clientEmail,
                      customEmailSubject,
                      customEmailBody,
                      notifyingOrder.reference
                    );
                    addToast(`Custom dispatch notification successfully sent to ${notifyingOrder.clientEmail}!`, 'success');
                    setNotifyingOrder(null);
                  }}
                  className="space-y-4 mt-4"
                >
                  <div>
                    <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>
                      Notification Subject
                    </label>
                    <input 
                      type="text"
                      required
                      value={customEmailSubject}
                      onChange={(e) => setCustomEmailSubject(e.target.value)}
                      placeholder="e.g., [MASTER DIGITAL] Delivery File Link Ready for Ref VBG-4822"
                      className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl px-3 py-2 text-xs outline-none transition-all transition-colors duration-305 ${
                        isDark 
                          ? 'bg-slate-950 border-white/10 text-slate-200' 
                          : 'bg-slate-50 border-slate-250 text-slate-800'
                      }`}
                    />
                  </div>

                  <div>
                    <label className={`text-[10px] font-mono block mb-1 uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-550'}`}>
                      Message Body (Simulated SMTP Email)
                    </label>
                    <textarea 
                      required
                      rows={6}
                      value={customEmailBody}
                      onChange={(e) => setCustomEmailBody(e.target.value)}
                      placeholder="Type your priority update description or fully rendered file links here..."
                      className={`w-full border focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 rounded-xl p-3 text-xs outline-none transition-all transition-colors duration-305 resize-none font-sans leading-relaxed ${
                        isDark 
                          ? 'bg-slate-950 border-white/10 text-slate-200' 
                          : 'bg-slate-50 border-slate-250 text-slate-800'
                      }`}
                    />
                  </div>

                  <div className="flex gap-2.5 pt-2">
                    <button
                      type="button"
                      onClick={() => setNotifyingOrder(null)}
                      className={`flex-1 py-2.5 rounded-xl text-xs font-semibold tracking-wide transition-all duration-200 cursor-pointer ${
                        isDark 
                          ? 'bg-slate-950 hover:bg-slate-950/85 text-slate-300 hover:text-white border border-white/5' 
                          : 'bg-slate-100 hover:bg-slate-150 text-slate-655 hover:text-slate-900 border border-slate-200'
                      }`}
                    >
                      Discard Draft
                    </button>
                    <button
                      type="submit"
                      className="flex-1 py-1 px-3 py-2.5 rounded-xl bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-xs font-black tracking-wider uppercase text-white shadow-lg hover:shadow-[0_0_15px_rgba(139,92,246,0.25)] transition-all duration-300 cursor-pointer"
                    >
                      Send Alert
                    </button>
                  </div>
                </form>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>

      {/* Floating Visual Toast Notification Deck */}
      <div id="toast-notification-deck" className="fixed bottom-6 right-6 z-[9999] flex flex-col gap-2.5 max-w-sm w-full pointer-events-none">
        <AnimatePresence mode="popLayout">
          {toasts.map((t) => {
            const isSuccess = t.type === 'success';
            return (
              <motion.div
                key={t.id}
                layout
                initial={{ opacity: 0, y: 30, scale: 0.9, x: 10 }}
                animate={{ opacity: 1, y: 0, scale: 1, x: 0 }}
                exit={{ opacity: 0, scale: 0.85, x: 40, transition: { duration: 0.2 } }}
                className={`pointer-events-auto relative overflow-hidden flex items-start gap-3 p-4 rounded-xl border backdrop-blur-md transition-all duration-300 shadow-xl ${
                  isSuccess
                    ? isDark
                      ? 'border-emerald-500/20 bg-slate-900/90 text-emerald-200'
                      : 'border-emerald-200 bg-white/95 text-slate-800'
                    : isDark
                      ? 'border-cyan-500/20 bg-slate-900/90 text-cyan-200'
                      : 'border-cyan-200 bg-white/95 text-slate-800'
                }`}
              >
                {/* Visual bar accent */}
                <div className={`absolute top-0 bottom-0 left-0 w-1 ${isSuccess ? 'bg-emerald-500' : 'bg-cyan-500'}`} />
                
                <div className="flex-shrink-0 mt-0.5">
                  {isSuccess ? (
                    <CheckCircle className="w-4.5 h-4.5 text-emerald-500" />
                  ) : (
                    <Bell className="w-4.5 h-4.5 text-cyan-500" />
                  )}
                </div>
                
                <div className="flex-1 text-xs font-semibold leading-relaxed tracking-wide pr-3">
                  {t.message}
                </div>
                
                <button
                  type="button"
                  onClick={() => removeToast(t.id)}
                  className={`flex-shrink-0 p-1 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors cursor-pointer`}
                >
                  <X className="w-3.5 h-3.5" />
                </button>
              </motion.div>
            );
          })}
        </AnimatePresence>
      </div>

    </div>
  );
}

function AdminNoteField({ orderId, initialNotes, updateOrderNotes, isDark }: { orderId: string; initialNotes: string; updateOrderNotes: (id: string, notes: string) => void; isDark: boolean }) {
  const [notes, setNotes] = useState(initialNotes || '');
  const [prevInitialNotes, setPrevInitialNotes] = useState(initialNotes);

  if (initialNotes !== prevInitialNotes) {
    setNotes(initialNotes || '');
    setPrevInitialNotes(initialNotes);
  }

  const handleBlur = () => {
    updateOrderNotes(orderId, notes);
  };

  return (
    <div className="space-y-1 mt-2.5">
      <label className={`text-[9px] font-mono block uppercase tracking-wider font-bold ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
        Internal Admin Notes
      </label>
      <textarea
        value={notes}
        onChange={(e) => setNotes(e.target.value)}
        onBlur={handleBlur}
        placeholder="Type internal progress update or details..."
        rows={2}
        className={`w-full text-[10px] p-2 rounded-lg border outline-none font-sans transition-all duration-300 resize-none ${
          isDark
            ? 'bg-slate-900/40 border-white/10 text-slate-200 placeholder-slate-600 focus:border-purple-500/50'
            : 'bg-white border-slate-200 text-slate-800 placeholder-slate-400 focus:border-purple-500'
        }`}
      />
    </div>
  );
}