'use client';

import { useState, useEffect, useCallback } from 'react';
import { db, Item } from '@/lib/db';
import { inventoryApi } from '@/lib/api';
import PageShell from '@/components/PageShell';
import Scanner from '@/components/Scanner';
import { toast } from 'react-hot-toast';
import { 
  Package, 
  ChevronRight, 
  ChevronDown, 
  BarChart3, 
  Layers, 
  Plus, 
  Minus, 
  Trash2, 
  X,
  AlertTriangle,
  Tag,
  Edit2,
  Camera,
  Layout,
  Printer,
  Download,
  Search
} from 'lucide-react';
import { generateBarcode128, getQRCodeURL } from '@/lib/labels';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

export default function InventoryPage() {
  const [mounted, setMounted] = useState(false);
  const [inventory, setInventory] = useState<Item[]>([]);
  const [stats, setStats] = useState<any>(null);
  const [expandedCategory, setExpandedCategory] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [currentUser, setCurrentUser] = useState<any | null>(null);
  
  // Stock Adjustment State
  const [selectedItem, setSelectedItem] = useState<Item | null>(null);
  const [adjustQty, setAdjustQty] = useState<number>(1);
  const [adjustType, setAdjustType] = useState<'ADD' | 'REMOVE' | 'TRASH'>('ADD');
  const [trashReason, setTrashReason] = useState('Damaged');

  // Item Editing state
  const [isEditing, setIsEditing] = useState(false);
  const [editedItem, setEditedItem] = useState<Partial<Item>>({});
  const [categoriesList, setCategoriesList] = useState<any[]>([]);

  // Category Editing state
  const [editingCategory, setEditingCategory] = useState<any | null>(null);
  const [catEditedName, setCatEditedName] = useState('');
  const [catEditedDesc, setCatEditedDesc] = useState('');

  // Scanner state
  const [showScanner, setShowScanner] = useState(false);
  const [fieldScanning, setFieldScanning] = useState<{ active: boolean, field: string } | null>(null);

  // Box Manager State
  const [showBoxManager, setShowBoxManager] = useState(false);
  const [selectedBoxLabel, setSelectedBoxLabel] = useState<string | null>(null);
  const [boxSearchQuery, setBoxSearchQuery] = useState('');

  useEffect(() => {
    setMounted(true);
    const savedUser = localStorage.getItem('inventory_user');
    if (savedUser) {
      setCurrentUser(JSON.parse(savedUser));
    }
    
    loadData();
  }, []);

  const loadData = async () => {
    // Load local items
    const cached = await db.items.toArray();
    setInventory(cached);

    try {
      // Load backend stats
      const s = await inventoryApi.getStats();
      setStats(s);
      
      const cats = await inventoryApi.getCategories();
      setCategoriesList(cats);

      // Load fresh items
      const res = await inventoryApi.getItems();
      setInventory(res);
      // Sync local DB
      await db.items.clear();
      await db.items.bulkPut(res);
    } catch (err: any) {
      console.error("Failed to load backend data", err);
    }
  };

  const handleAdjustStock = async () => {
    if (!selectedItem) return;
    const toastId = toast.loading("Processing...");
    
    try {
      const isOnline = navigator.onLine;
      const finalAdjustQty = adjustQty;
      const newQty = selectedItem.quantity + (adjustType === 'ADD' ? adjustQty : -adjustQty);

      // Local Update
      await db.items.update(selectedItem.id!, { quantity: newQty });
      setInventory(prev => prev.map(i => i.id === selectedItem.id ? { ...i, quantity: newQty } : i));
      
      if (isOnline) {
        const endpoint = adjustType === 'ADD' ? 'check-in' : (adjustType === 'TRASH' ? 'trash' : 'check-out');
        const payload: any = {
           barcode: selectedItem.barcode,
           quantity: finalAdjustQty,
           user_id: currentUser?.id || 1
        };
        if (adjustType === 'TRASH') payload.reason = trashReason;
        
        await inventoryApi.adjustStock(endpoint, payload);
        toast.success("Inventory updated & synced", { id: toastId });
      } else {
        await db.pendingOperations.add({
          type: adjustType === 'ADD' ? 'CHECK_IN' : (adjustType === 'TRASH' ? 'TRASH' : 'CHECK_OUT'),
          barcode: selectedItem.barcode,
          quantity: finalAdjustQty,
          timestamp: Date.now(),
          synced: 0,
          uuid: crypto.randomUUID()
        } as any);
        toast.success("Saved locally (Offline)", { id: toastId });
      }

      setSelectedItem(null);
      setAdjustQty(1);
    } catch (error: any) {
       console.error("Adjustment failure:", error);
       toast.error("Error saving operation", { id: toastId });
    }
  };

  const handleUpdateItem = async () => {
    if (!selectedItem) return;
    try {
      const updated = { ...selectedItem, ...editedItem };
      if (updated.part_number) updated.part_number = updated.part_number.toUpperCase();

      await db.items.update(selectedItem.id!, updated);
      if (navigator.onLine) {
        await inventoryApi.updateItem(selectedItem.id!, updated);
      }
      
      toast.success("Item updated successfully");
      setIsEditing(false);
      setSelectedItem(updated as Item);
      await loadData();
    } catch (err: any) {
      console.error(err);
      toast.error("Failed to update item");
    }
  };

  const handleDeleteItem = async () => {
    if (!selectedItem || !selectedItem.id) return;
    if (!window.confirm(`Are you sure you want to delete "${selectedItem.name}"?`)) return;
    
    try {
      await db.items.delete(selectedItem.id);
      if (navigator.onLine) {
        await inventoryApi.deleteItem(selectedItem.id);
      }
      toast.success("Item deleted");
      setSelectedItem(null);
      await loadData();
    } catch (err: any) {
      console.error(err);
      toast.error("Failed to delete item");
    }
  };

  const handleUpdateCategory = async () => {
    if (!editingCategory) return;
    try {
      await inventoryApi.updateCategory(editingCategory.id, {
        name: catEditedName,
        description: catEditedDesc
      });
      toast.success("Category updated");
      setEditingCategory(null);
      await loadData();
    } catch (err: any) {
      toast.error("Update failed");
    }
  };

  const onOCRMatch = useCallback(async (text: string) => {
    const cleanText = text.toUpperCase().replace(/[^A-Z0-9\s/+-]/g, ' ');
    const tokens = cleanText.split(/[\s\n,]+/).filter(t => t.length >= 3);
    
    if (fieldScanning?.active && fieldScanning.field === 'box_label') {
      const label = tokens[0] || cleanText;
      setEditedItem(prev => ({ ...prev, box_label: label }));
      setFieldScanning(null);
      setShowScanner(false);
      toast.success(`Captured: ${label}`);
      return;
    }
  }, [fieldScanning]);

  const onScanSuccess = useCallback((barcode: string) => {
    // Inventory page doesn't do check-in via scanner, it just finds the item
    const item = inventory.find(i => i.barcode === barcode);
    if (item) {
      setSelectedItem(item);
      setShowScanner(false);
    } else {
      toast.error(`Item with barcode ${barcode} not found in catalog`);
    }
  }, [inventory]);

  // Group items by category
  const categories = Array.from(new Set(inventory.map(i => i.category)));
  const filteredCategories = categories.filter(c => 
    c.toLowerCase().includes(searchQuery.toLowerCase()) ||
    inventory.some(i => i.category === c && i.name.toLowerCase().includes(searchQuery.toLowerCase()))
  );

  // Extract unique item types and box labels for suggestions
  const existingTypes = Array.from(new Set(inventory.map(i => i.type).filter(Boolean))).sort() as string[];
  const existingBoxes = Array.from(new Set(inventory.map(i => i.box_label).filter(Boolean))).sort() as string[];

  if (!mounted) return null;

  return (
    <PageShell>
      <div className="p-3 md:p-8 max-w-7xl mx-auto space-y-6">
      <datalist id="existing-types">
        {existingTypes.map(t => <option key={t} value={t} />)}
      </datalist>
      <datalist id="existing-boxes">
        {existingBoxes.map(b => <option key={b} value={b} />)}
      </datalist>
      
      <header className="flex items-center gap-5 mb-10">
        <div className="p-4 bg-primary/10 rounded-[2rem] text-primary border border-primary/20 shadow-xl shadow-primary/5">
          <Package size={32} />
        </div>
        <div>
          <h1 className="text-3xl font-black tracking-tight text-white">Inventory Catalog</h1>
          <p className="text-xs text-slate-500 font-bold mt-1">Enterprise Stock Overview</p>
        </div>
        <button 
          onClick={() => setShowBoxManager(true)}
          className="ml-auto p-3 bg-slate-900 border border-slate-800 text-slate-400 rounded-2xl hover:text-primary transition-all active:scale-95 shadow-xl"
          title="Manage Boxes"
        >
          <Layout size={20} />
        </button>
      </header>

      <div className="w-full space-y-8">
        {/* Stats Dashboard */}
        <section className="grid grid-cols-2 md:grid-cols-4 gap-3">
          <div className="bg-slate-900/80 border border-slate-700/40 p-2 px-4 rounded-xl flex items-center gap-4 shadow-lg backdrop-blur-sm">
            <Layers size={18} className="text-primary shrink-0 opacity-80" />
            <p className="text-sm font-bold text-slate-300 whitespace-nowrap">Categories</p>
            <p className="text-xl font-black text-white tabular-nums ml-auto">{stats?.total_categories || categories.length}</p>
          </div>
          <div className="bg-slate-900/80 border border-slate-700/40 p-2 px-4 rounded-xl flex items-center gap-4 shadow-lg backdrop-blur-sm">
            <Package size={18} className="text-green-500 shrink-0 opacity-80" />
            <p className="text-sm font-bold text-slate-300 whitespace-nowrap">Item Types</p>
            <p className="text-xl font-black text-white tabular-nums ml-auto">{stats?.total_items || inventory.length}</p>
          </div>
          <div className="bg-slate-900/80 border border-slate-700/40 p-2 px-4 rounded-xl flex items-center gap-4 shadow-lg backdrop-blur-sm">
            <Layout size={18} className="text-amber-500 shrink-0 opacity-80" />
            <p className="text-sm font-bold text-slate-300 whitespace-nowrap">Total Boxes</p>
            <p className="text-xl font-black text-white tabular-nums ml-auto">{existingBoxes.length}</p>
          </div>
        </section>

        {/* Search */}
        <div className="relative">
          <input 
            type="text"
            placeholder="Search categories or items..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full bg-slate-900 border border-slate-800 rounded-2xl py-4 pl-12 pr-4 text-sm focus:border-primary outline-none transition-all"
          />
          <div className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-600">
            🔍
          </div>
        </div>

        {/* Categorized List (Accordion) */}
        <section className="space-y-3">
          {filteredCategories.map(cat => (
            <div key={cat} className="bg-slate-900/40 border border-slate-800/50 rounded-3xl overflow-hidden active:scale-[0.995] transition-all">
              <div 
                className="w-full p-5 flex items-center justify-between hover:bg-slate-900/60 transition-colors cursor-pointer"
                onClick={() => setExpandedCategory(expandedCategory === cat ? null : cat)}
              >
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-2xl bg-primary/10 flex items-center justify-center text-primary transition-colors">
                    <Layers size={20} />
                  </div>
                  <div className="text-left">
                    <h3 className="font-bold text-lg">{cat}</h3>
                    <p className="text-[9px] font-black text-slate-400">
                       {inventory.filter(i => i.category === cat).length} Item types in stock
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  {expandedCategory === cat ? <ChevronDown size={20} className="text-primary" /> : <ChevronRight size={20} className="text-slate-600" />}
                  <button 
                    onClick={(e) => {
                      e.stopPropagation();
                      const categoryObj = categoriesList.find(c => c.name === cat);
                      if (categoryObj) {
                        setEditingCategory(categoryObj);
                        setCatEditedName(categoryObj.name);
                        setCatEditedDesc(categoryObj.description || '');
                      }
                    }}
                    className="p-2 hover:bg-slate-800 rounded-full text-slate-500 hover:text-primary transition-colors relative z-10"
                  >
                    <Edit2 size={16} />
                  </button>
                </div>
              </div>
              
              {expandedCategory === cat && (
                <div className="p-4 pt-0 space-y-2 animate-in slide-in-from-top-4 duration-300">
                  <div className="h-px bg-slate-800/50 mb-4 mx-2" />
                  {inventory
                    .filter(i => i.category === cat)
                    .filter(i => i.name.toLowerCase().includes(searchQuery.toLowerCase()))
                    .map(item => (
                      <div 
                        key={item.id}
                        onClick={() => setSelectedItem(item)}
                        className="bg-slate-950/40 border border-slate-800/50 p-4 rounded-2xl flex items-center justify-between hover:border-primary/40 cursor-pointer transition-all active:scale-[0.98]"
                      >
                        <div className="flex items-center gap-3 flex-1 min-w-0 pr-4">
                          <div className="w-8 h-8 rounded-xl bg-green-500/10 flex items-center justify-center text-green-500 shrink-0">
                            <Package size={14} />
                          </div>
                          <div className="truncate">
                            <h4 className="font-bold text-slate-200 truncate">{item.name}</h4>
                            <p className="text-[10px] text-slate-500 truncate mt-0.5">{item.specs}</p>
                          </div>
                        </div>
                        <div className="text-right shrink-0">
                          <span className={cn(
                            "text-lg font-black",
                            item.quantity <= item.min_quantity ? "text-amber-500" : "text-primary"
                          )}>
                            {item.quantity}
                          </span>
                          <p className="text-xs text-slate-600 font-bold">Stock</p>
                        </div>
                      </div>
                    ))}
                </div>
              )}
            </div>
          ))}

          {filteredCategories.length === 0 && (
            <div className="py-20 text-center text-slate-600">
               <Package size={48} className="mx-auto mb-4 opacity-10" />
               <p className="font-medium">No results found</p>
            </div>
          )}
        </section>
      </div>

      {/* Stock Adjustment / Edit Item Overlay */}
      {selectedItem && (
        <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm animate-in fade-in duration-200">
          <div className="w-full max-w-lg bg-slate-900 border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
              <div className="flex justify-between items-center mb-6">
                <h3 className="text-xl font-black tracking-tight flex items-center gap-2">
                  {isEditing ? "Edit Item" : selectedItem.name}
                  {!isEditing && (
                    <span className="text-[10px] bg-slate-800 text-slate-400 px-2 py-0.5 rounded-md font-black uppercase">
                      In Stock: {selectedItem.quantity}
                    </span>
                  )}
                </h3>
                <div className="flex gap-2">
                  {!isEditing && (
                    <button 
                      onClick={() => {
                        setEditedItem(selectedItem);
                        setIsEditing(true);
                      }} 
                      className="p-2 hover:bg-slate-800 rounded-full text-slate-400"
                    >
                      <Edit2 size={20} />
                    </button>
                  )}
                  {isEditing && (
                    <button 
                      onClick={handleDeleteItem} 
                      className="p-2 hover:bg-red-500/20 rounded-full text-red-500"
                    >
                      <Trash2 size={20} />
                    </button>
                  )}
                  <button 
                    onClick={() => {
                      setSelectedItem(null);
                      setIsEditing(false);
                      setAdjustQty(1);
                    }} 
                    className="p-2 hover:bg-slate-800 rounded-full"
                  >
                    <X size={20} />
                  </button>
                </div>
              </div>

              {isEditing ? (
                <div className="max-h-[60vh] overflow-y-auto pr-2 space-y-4 mb-6 scrollbar-hide">
                  <div>
                    <label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Item Name</label>
                    <input 
                      type="text" 
                      value={editedItem.name || ''} 
                      onChange={e => setEditedItem({...editedItem, name: e.target.value})}
                      className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100 placeholder:text-slate-700"
                    />
                  </div>
                  <div>
                    <label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Part Number</label>
                    <input 
                      type="text" 
                      value={editedItem.part_number || ''} 
                      onChange={e => setEditedItem({...editedItem, part_number: e.target.value})}
                      className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100 placeholder:text-slate-700 uppercase"
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Category</label>
                      <input 
                        type="text"
                        list="existing-categories"
                        value={editedItem.category || ''} 
                        onChange={e => setEditedItem({ ...editedItem, category: e.target.value })}
                        className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100 placeholder:text-slate-700"
                        placeholder="e.g. storage"
                      />
                      <datalist id="existing-categories">
                        {categoriesList.map(c => (
                          <option key={c.id} value={c.name} />
                        ))}
                      </datalist>
                    </div>
                    <div>
                      <label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Item Type</label>
                      <input 
                        type="text" 
                        list="existing-types"
                        value={editedItem.type || ''} 
                        onChange={e => setEditedItem({...editedItem, type: e.target.value})}
                        className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100"
                      />
                    </div>
                    <div>
                      <label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Connector</label>
                      <input 
                        type="text" 
                        value={editedItem.connector || ''} 
                        onChange={e => setEditedItem({...editedItem, connector: e.target.value})}
                        className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100"
                        placeholder="e.g. LC/UPC"
                      />
                    </div>
                    <div>
                      <label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Size / Length</label>
                      <input 
                        type="text" 
                        value={editedItem.size || ''} 
                        onChange={e => setEditedItem({...editedItem, size: e.target.value})}
                        className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100"
                        placeholder="e.g. 1.6TB"
                      />
                    </div>
                    <div className="col-span-2">
                      <label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Item Color</label>
                      <input 
                        type="text" 
                        value={editedItem.color || ''} 
                        onChange={e => setEditedItem({...editedItem, color: e.target.value})}
                        className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100"
                        placeholder="e.g. Blue"
                      />
                    </div>
                    <div className="col-span-2">
                       <label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Box / Container Label</label>
                       <div className="relative flex items-center">
                         <input 
                           type="text" 
                           list="existing-boxes"
                           value={editedItem.box_label || ''} 
                           onChange={e => setEditedItem({...editedItem, box_label: e.target.value})}
                           className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 pl-4 pr-12 text-sm font-bold outline-none text-slate-100 placeholder:text-slate-700 focus:border-primary transition-colors"
                           placeholder="e.g. Box 5"
                         />
                         <button 
                           type="button"
                           onClick={() => {
                             setFieldScanning({ active: true, field: 'box_label' });
                             setShowScanner(true);
                             toast.success("Ready to scan Box label...");
                           }}
                           className={cn(
                             "absolute right-2 p-2 rounded-lg transition-all",
                             fieldScanning?.active ? "bg-primary text-white animate-pulse" : "text-slate-500 hover:bg-slate-800"
                           )}
                         >
                           <Camera size={18} />
                         </button>
                       </div>
                    </div>
                  </div>
                  <div>
                    <label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Specs / Comments</label>
                    <textarea 
                      value={editedItem.specs || ''} 
                      onChange={e => setEditedItem({...editedItem, specs: e.target.value})}
                      className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100 h-20 resize-none"
                    />
                  </div>
                  <div>
                    <label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">OCR Matching Key</label>
                    <textarea 
                      value={editedItem.ocr_text || ''} 
                      onChange={e => setEditedItem({...editedItem, ocr_text: e.target.value})}
                      className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-primary/80 h-16 resize-none"
                    />
                  </div>
                </div>
              ) : (
                <>
                  <div className="flex p-1 bg-slate-950 rounded-2xl mb-8">
                    {[
                      { id: 'ADD', label: 'Buy More', icon: Plus, color: 'text-primary' },
                      { id: 'REMOVE', label: 'Subtract', icon: Minus, color: 'text-amber-500' },
                      { id: 'TRASH', label: 'Discard', icon: Trash2, color: 'text-red-500' }
                    ].map((t) => (
                      <button
                        key={t.id}
                        onClick={() => setAdjustType(t.id as any)}
                        className={cn(
                          "flex-1 flex flex-col items-center py-3 rounded-xl transition-all",
                          adjustType === t.id ? "bg-slate-800 shadow-lg" : "text-slate-500"
                        )}
                      >
                        <t.icon size={20} className={adjustType === t.id ? t.color : ""} />
                        <span className="text-xs font-black mt-1">{t.label}</span>
                      </button>
                    ))}
                  </div>

                  <div className="flex flex-col items-center gap-6 mb-8">
                    <div className="flex items-center gap-8">
                      <button 
                        onClick={() => setAdjustQty(Math.max(1, adjustQty - 1))}
                        className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center hover:bg-slate-800 transition-colors"
                      >
                        <Minus size={24} />
                      </button>
                      <span className="text-5xl font-black tabular-nums">{adjustQty}</span>
                      <button 
                        onClick={() => setAdjustQty(adjustQty + 1)}
                        className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center hover:bg-slate-800 transition-colors"
                      >
                        <Plus size={24} />
                      </button>
                    </div>
                    
                    {adjustType === 'TRASH' && (
                      <div className="w-full bg-red-500/5 border border-red-500/20 p-4 rounded-2xl">
                         <select 
                          value={trashReason} 
                          onChange={(e) => setTrashReason(e.target.value)}
                          className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-300"
                        >
                          <option>Damaged</option>
                          <option>Expired</option>
                          <option>Lost</option>
                          <option>Technical Failure</option>
                        </select>
                      </div>
                    )}
                  </div>
                </>
              )}

              <button 
                onClick={isEditing ? handleUpdateItem : handleAdjustStock}
                className={cn(
                  "w-full py-5 rounded-[1.8rem] font-black text-lg transition-all active:scale-[0.98] shadow-xl",
                  isEditing ? "bg-white text-slate-950 shadow-white/10" : (
                    adjustType === 'ADD' ? "bg-primary text-white shadow-primary/20" : 
                    adjustType === 'REMOVE' ? "bg-amber-600 text-white shadow-amber-600/20" : 
                    "bg-red-600 text-white shadow-red-600/20"
                  )
                )}
              >
                {isEditing ? "Save Changes" : (
                  adjustType === 'ADD' ? `Add ${adjustQty} to Stock` : 
                  adjustType === 'REMOVE' ? `Subtract ${adjustQty} from Stock` : 
                  `Discard ${adjustQty} items`
                )}
              </button>
          </div>
        </div>
      )}

      {/* Category Edit Overlay */}
      {editingCategory && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-xl animate-in fade-in duration-300">
          <div className="bg-slate-900 border border-slate-800 rounded-3xl p-8 max-w-sm w-full shadow-2xl space-y-6 animate-in zoom-in-95 duration-200">
            <div className="flex justify-between items-center">
               <h2 className="text-xl font-black">Edit Category</h2>
               <button onClick={() => setEditingCategory(null)} className="p-2 hover:bg-slate-800 rounded-full transition-colors text-slate-400">
                 <X size={20} />
               </button>
            </div>
            
            <div className="space-y-4">
              <div>
                <label className="text-xs font-black text-slate-500 ml-1">Name</label>
                <input 
                  type="text" 
                  value={catEditedName}
                  onChange={e => setCatEditedName(e.target.value)}
                  className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
                />
              </div>
              <div>
                <label className="text-xs font-black text-slate-500 ml-1">Description</label>
                <textarea 
                  value={catEditedDesc}
                  onChange={e => setCatEditedDesc(e.target.value)}
                  className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100 h-24 resize-none"
                />
              </div>
            </div>

            <button 
              onClick={handleUpdateCategory}
              className="w-full bg-primary text-white font-black py-4 rounded-2xl shadow-xl shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all"
            >
              Update Category
            </button>
          </div>
        </div>
      )}

      {showScanner && (
        <Scanner 
          onScanSuccess={onScanSuccess} 
          onOCRMatch={onOCRMatch} 
        />
      )}
      </div>

      {/* Box Manager Modal */}
      {showBoxManager && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-md animate-in fade-in duration-300">
          <div className="w-full max-w-2xl bg-slate-900 border border-slate-800 rounded-[2.5rem] shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
            <div className="p-8 pb-4 flex flex-col gap-6 shrink-0 bg-slate-900/50">
               <div className="flex justify-between items-center">
                  <div>
                    <h3 className="text-2xl font-black tracking-tight flex items-center gap-3">
                      <Package className="text-primary" size={28} />
                      Box Inventory
                    </h3>
                    <p className="text-sm text-slate-500 font-bold mt-1">Manage physical box labels & printing</p>
                  </div>
                  <button onClick={() => { setShowBoxManager(false); setBoxSearchQuery(''); }} className="p-3 hover:bg-slate-800 rounded-full transition-colors text-slate-400">
                    <X size={24} />
                  </button>
               </div>

               <div className="relative">
                 <input 
                   type="text"
                   placeholder="Search boxes..."
                   value={boxSearchQuery}
                   onChange={(e) => setBoxSearchQuery(e.target.value)}
                   className="w-full bg-slate-950 border border-slate-800 rounded-2xl py-3.5 pl-11 pr-4 text-sm focus:border-primary outline-none transition-all placeholder:text-slate-600"
                 />
                 <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-600" size={18} />
                 {boxSearchQuery && (
                   <button 
                     onClick={() => setBoxSearchQuery('')}
                     className="absolute right-3 top-1/2 -translate-y-1/2 p-1.5 hover:bg-slate-800 rounded-lg text-slate-500"
                   >
                     <X size={14} />
                   </button>
                 )}
               </div>
            </div>

            <div className="flex-1 overflow-y-auto p-6 space-y-4 pt-4">
               {existingBoxes.filter(b => b.toLowerCase().includes(boxSearchQuery.toLowerCase())).length === 0 ? (
                 <div className="py-20 text-center space-y-4 opacity-40">
                    <Package size={48} className="mx-auto" />
                    <p className="font-bold">{existingBoxes.length === 0 ? 'No box labels defined yet.' : 'No matching boxes found.'}</p>
                    <p className="text-xs max-w-xs mx-auto">Associate items with a "Box Label" in their metadata to see them here.</p>
                 </div>
               ) : (
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-3 pb-4">
                    {existingBoxes
                      .filter(box => box.toLowerCase().includes(boxSearchQuery.toLowerCase()))
                      .map(box => {
                        const itemCount = inventory.filter(i => i.box_label === box).length;
                        return (
                          <div key={box} className="bg-slate-950/50 border border-slate-800/60 p-5 rounded-3xl flex flex-col gap-4 group hover:border-primary/40 transition-all">
                             <div className="flex-1 min-w-0">
                                <h4 className="text-lg font-black text-white truncate">{box}</h4>
                                <p className="text-xs text-slate-500 font-bold mt-0.5">{itemCount} items linked</p>
                             </div>
                             <div className="flex gap-2 shrink-0">
                                <button 
                                  onClick={() => setSelectedBoxLabel(box)}
                                  className="flex-1 py-3 bg-primary text-white text-[11px] font-black rounded-xl flex items-center justify-center gap-2 hover:bg-blue-500 transition-colors shadow-lg shadow-primary/10 active:scale-95"
                                >
                                  <Printer size={14} /> Print Label
                                </button>
                                <button 
                                  onClick={() => { setSearchQuery(box); setShowBoxManager(false); setBoxSearchQuery(''); }}
                                  className="px-4 py-3 bg-slate-900 border border-slate-800 text-slate-400 text-[11px] font-bold rounded-xl hover:bg-slate-800 active:scale-95"
                                >
                                  View
                                </button>
                             </div>
                          </div>
                        );
                      })}
                 </div>
               )}
            </div>
            
            <div className="p-6 py-4 bg-slate-950/50 border-t border-slate-800 text-center flex items-center justify-center gap-2">
               <div className="w-1 h-1 rounded-full bg-primary animate-pulse" />
               <p className="text-[10px] text-slate-500 font-bold font-mono">TFM aInventory • Box management mode</p>
            </div>
          </div>
        </div>
      )}

      {/* Label Print Preview Modal */}
      {selectedBoxLabel && (
        <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/95 animate-in zoom-in-95 duration-200">
           <div className="w-full max-w-md flex flex-col gap-6">
              
              <div id="print-label-area" className="w-full bg-white p-8 rounded-lg shadow-2xl flex flex-col items-center gap-6">
                 <h2 className="text-2xl font-black text-black tracking-tighter text-center uppercase">
                   {selectedBoxLabel}
                 </h2>
                 
                 <div className="w-full aspect-[2/1] bg-white flex flex-col items-center justify-center overflow-hidden" dangerouslySetInnerHTML={{ __html: generateBarcode128(selectedBoxLabel) }} />
                 
                 <div className="flex flex-col items-center gap-1">
                    <p className="text-[10px] font-black tracking-[0.2em] text-black/50">TFM INVENTORY BOX LABEL</p>
                    <img src={getQRCodeURL(selectedBoxLabel)} className="w-24 h-24" alt="QR Code" />
                 </div>
              </div>

              <div className="flex flex-col gap-3 no-print">
                 <button 
                   onClick={() => window.print()}
                   className="w-full py-5 bg-primary text-white rounded-[2rem] font-black text-lg flex items-center justify-center gap-3 shadow-2xl shadow-primary/40 active:scale-95 transition-all"
                 >
                   <Printer size={20} /> Print to Dymo/Brother
                 </button>
                 
                 <button 
                    onClick={() => {
                        const svg = document.querySelector("#print-label-area svg");
                        if (svg) {
                            const svgData = new XMLSerializer().serializeToString(svg);
                            const canvas = document.createElement("canvas");
                            const ctx = canvas.getContext("2d");
                            const img = new Image();
                            img.onload = () => {
                                canvas.width = img.width * 4;
                                canvas.height = img.height * 4;
                                if (ctx) {
                                    ctx.fillStyle = "white";
                                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                                    const link = document.createElement("a");
                                    link.download = `Label-${selectedBoxLabel}.png`;
                                    link.href = canvas.toDataURL("image/png");
                                    link.click();
                                }
                            };
                            img.src = "data:image/svg+xml;base64," + btoa(svgData);
                        }
                    }}
                    className="w-full py-4 bg-slate-900 border border-slate-800 text-white rounded-[2rem] font-black text-sm flex items-center justify-center gap-2 active:scale-95 transition-all"
                 >
                    <Download size={16} /> Save for Mobile App
                 </button>
                 
                 <button 
                   onClick={() => setSelectedBoxLabel(null)}
                   className="w-full py-4 text-slate-500 font-bold text-xs"
                 >
                   Cancel
                 </button>
              </div>

              {/* Print CSS Injection */}
              <style dangerouslySetInnerHTML={{ __html: `
                @media print {
                  body * { display: none !important; }
                  #print-label-area { 
                    display: flex !important; 
                    position: fixed !important;
                    top: 0 !important;
                    left: 0 !important;
                    width: 100% !important;
                    height: 100% !important;
                    margin: 0 !important;
                    padding: 40px !important;
                    border: none !important;
                    box-shadow: none !important;
                  }
                  .no-print { display: none !important; }
                }
                @page {
                  size: auto;
                  margin: 0;
                }
              `}} />
           </div>
        </div>
      )}
    </PageShell>
  );
}