'use client';

import { useState, useEffect, useCallback } from 'react';
import { db, Item } from '@/lib/db';
import { inventoryApi } from '@/lib/api';
import { fetchAndCacheItems, syncOfflineOperations } from '@/lib/sync';
import Scanner from '@/components/Scanner';
import AIOnboarding from '@/components/AIOnboarding';
import PageShell from '@/components/PageShell';
import { toast } from 'react-hot-toast';
import {
  Package,
  Camera,
  Plus,
  Minus,
  Trash2,
  AlertTriangle,
  X,
  ChevronRight,
  Edit2,
  RefreshCw,
  Sparkles,
  Smartphone,
  ArrowDownCircle,
  ArrowUpCircle,
  Search
} from 'lucide-react';
import { generateBarcode128, getQRCodeURL } from '@/lib/labels';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
import axios from 'axios';
import versionData from '../VERSION.json';

interface User {
  id: number;
  username: string;
  role: string;
}

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

export default function Home() {
  const [mounted, setMounted] = useState(false);
  const [isOnline, setIsOnline] = useState(true);
  const [mode, setMode] = useState<'CHECK_IN' | 'CHECK_OUT' | 'TRASH'>('CHECK_OUT');
  const [showScanner, setShowScanner] = useState(false);
  const [showOnboarding, setShowOnboarding] = useState(false);
  const [selectedBoxLabel, setSelectedBoxLabel] = useState<string | null>(null);
  const [selectedItem, setSelectedItem] = useState<Item | null>(null);
  const [boxMatches, setBoxMatches] = useState<Item[]>([]);
  const [isEditing, setIsEditing] = useState(false);
  const [isScannerReady, setIsScannerReady] = useState(false);
  const [editedItem, setEditedItem] = useState<Partial<Item>>({});
  const [adjustQty, setAdjustQty] = useState<number>(1);
  const [adjustType, setAdjustType] = useState<'ADD' | 'REMOVE' | 'TRASH'>('ADD');
  const [trashReason, setTrashReason] = useState('Damaged');
  const [lastScanned, setLastScanned] = useState<string | null>(null);
  const [inventory, setInventory] = useState<Item[]>([]);
  const [syncing, setSyncing] = useState(false);
  const [currentUser, setCurrentUser] = useState<any | null>(null);
  const [categories, setCategories] = useState<any[]>([]);
  const [fieldScanning, setFieldScanning] = useState<{ active: boolean, field: string } | null>(null);

  useEffect(() => {
    if (!localStorage.getItem('inventory_token')) {
      window.location.href = '/login';
      return;
    }
    
    setMounted(true);
    setIsOnline(navigator.onLine);

    const savedUser = localStorage.getItem('inventory_user');
    if (savedUser) {
      setCurrentUser(JSON.parse(savedUser));
    }

    // Initial data fetch
    inventoryApi.getCategories().then(c => setCategories(c)).catch(() => { });
    loadInventory();
    preloadOCR();

    const handleOnline = () => {
      setIsOnline(true);
      handleSync(); // Auto-sync pending ops when back online
    };
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    // Active polling for network status AND periodic background refresh (30s)
    const interval = setInterval(() => {
      setIsOnline(navigator.onLine);
      if (navigator.onLine) {
        loadInventory(); // Keep other devices in sync
      }
    }, 30000);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
      clearInterval(interval);
    };
  }, []);

  const loadInventory = async () => {
    const cached = await db.items.toArray();
    setInventory(cached);

    if (navigator.onLine) {
      const fresh = await fetchAndCacheItems();
      setInventory(fresh);
    }
  };

  const preloadOCR = async () => {
    try {
      // Import the library only when needed to keep bundle small
      const { createWorker } = await import('tesseract.js');
      const worker = await createWorker('eng');
      await worker.terminate();
      setIsScannerReady(true);
    } catch (e) {
      console.warn("OCR Preload failed - will retry on demand", e);
    }
  };

  const handleOnboardingComplete = async (itemData: any) => {
    try {
      if (itemData.part_number) {
        itemData.part_number = itemData.part_number.toLowerCase();
      }
      // 1. Add to local DB cache
      await db.items.add(itemData);

      // 2. If online, try to push to backend immediately
      if (isOnline) {
        await inventoryApi.createItem(1, itemData);
        toast.success("Item saved to cloud catalog!");
      } else {
        toast.success("Item saved locally. Will sync when online.");
      }

      setShowOnboarding(false);
      await loadInventory();
    } catch (error) {
      console.error(error);
      toast.error("Failed to save item");
    }
  };

  const handleSync = useCallback(async () => {
    if (!isOnline || !currentUser) return;
    setSyncing(true);
    try {
      const result = await syncOfflineOperations(currentUser.id);
      if (result.success > 0) {
        toast.success(`Synced ${result.success} operations!`);
      }
      await loadInventory();
    } catch (error) {
      console.error("Sync failed", error);
    } finally {
      setSyncing(false);
    }
  }, [isOnline, currentUser]);

  const onScanSuccess = useCallback(async (barcode: string) => {
    setLastScanned(barcode);
    setShowScanner(false);

    const normalizedBarcode = barcode.toLowerCase();
    const item = await db.items.where('barcode').equals(barcode)
      .or('part_number').equals(normalizedBarcode).first();

    if (!item) {
      toast.error(`Item ${barcode} not found in catalog.`);
      return;
    }

    await db.pendingOperations.add({
      type: mode,
      barcode: item.barcode,
      quantity: 1,
      timestamp: Date.now(),
      synced: 0,
      uuid: crypto.randomUUID()
    });

    const newQty = mode === 'CHECK_IN' ? item.quantity + 1 : item.quantity - 1;
    await db.items.update(item.id!, { quantity: newQty });

    setInventory(prev => prev.map(i => i.id === item.id ? { ...i, quantity: newQty } : i));

    toast.success(`${mode === 'CHECK_IN' ? 'Checked in' : 'Checked out'} ${item.name}`);

    if (isOnline) {
      handleSync();
    }
  }, [mode, isOnline, handleSync]);

  const onOCRMatch = useCallback(async (text: string) => {
    // 1. Clean and normalize
    const cleanText = text.toLowerCase().replace(/[^a-z0-9\s/+-]/g, ' ');

    // Garbage Filter: Ignore noisy strings (measurements like 0.11, dates like 2024-07-25)
    // We only keep tokens that are at least 3 chars AND not just decimals
    const tokens = cleanText.split(/[\s\n,]+/)
      .filter(t => t.length >= 3)
      .filter(t => !/^\d+\.\d+$/.test(t)) // Filter out decimals like 0.11 or 0.12
      .filter(t => !/^\d{2,4}-\d{2}-\d{2}$/.test(t)); // Filter out dates

    if (tokens.length === 0) return;

    // [NEW] Targeted Field Scan Logic
    if (fieldScanning?.active) {
      if (fieldScanning.field === 'box_label') {
        const potentialLabel = tokens[0] || cleanText;
        setEditedItem(prev => ({ ...prev, box_label: potentialLabel }));
        setFieldScanning(null);
        toast.success(`Captured: ${potentialLabel}`);
        return;
      }
    }

    // Toast only potentially useful scans
    toast(`Scanning: ${cleanText.substring(0, 30)}...`, { icon: '🔍', duration: 1500, id: 'ocr-scan' });

    // [BOX SCANNING LOGIC] Prioritize checking if this is a known box
    const possibleBoxItems = inventory.filter(item => {
      if (!item.box_label) return false;
      const boxText = item.box_label.toLowerCase().replace(/[^a-z0-9\s/+-]/g, ' ');
      // Exact or Partial include match for box label
      if (cleanText.includes(boxText)) return true;
      // Strong token matching (for words >= 4 chars)
      const boxTokens = boxText.split(/[\s/+-]/).filter(t => t.length >= 4);
      const matchedTokens = boxTokens.filter(bt => tokens.includes(bt));
      return matchedTokens.length >= 2 || (boxTokens.length === 1 && matchedTokens.length === 1);
    });

    if (possibleBoxItems.length === 1) {
      toast.success(`Box identified: 1 item found`, { duration: 3000, id: 'ocr-success' });
      setSelectedItem(possibleBoxItems[0]);
      setAdjustType(mode === 'CHECK_IN' ? 'ADD' : 'REMOVE');
      setShowScanner(false);
      return;
    } else if (possibleBoxItems.length > 1) {
      toast.success(`Box identified: ${possibleBoxItems.length} items found`, { duration: 3000, id: 'ocr-success' });
      setBoxMatches(possibleBoxItems);
      setShowScanner(false);
      return;
    }

    // [INDIVIDUAL ITEM MATCHING] Fallback to classic specific identification
    let bestMatch = null;
    let maxMatchScore = 0;

    for (const item of inventory) {
      let score = 0;
      const pn = (item.part_number || '').toLowerCase();
      const sn = (item.serial_number || '').toLowerCase();
      const name = item.name.toLowerCase();
      const category = item.category.toLowerCase();
      const ocrKey = (item.ocr_text || '').toLowerCase().replace(/[^a-z0-9\s/+-]/g, ' ');

      // Priority 0: Exact OCR Key match (Heuristic provided by AI)
      if (ocrKey && cleanText.includes(ocrKey)) score += 1000;

      // Priority 1: Serial Number (Absolute match)
      if (sn && cleanText.includes(sn)) score += 500;

      // Priority 2: Part Number (High confidence)
      if (pn && cleanText.includes(pn)) score += 200;

      // Priority 3: Token based matching for PN (LC/UPC etc)
      if (pn) {
        const pnTokens = pn.split(/[\s/+-]/).filter(t => t.length >= 3);
        pnTokens.forEach(t => { if (cleanText.includes(t)) score += 50; });
      }

      // Priority 4: Name & Category
      const nameTokens = name.split(/[\s/+-]/).filter(t => t.length >= 3);
      nameTokens.forEach(t => { if (cleanText.includes(t)) score += 10; });

      if (category && cleanText.includes(category)) score += 20;

      if (score > maxMatchScore) {
        maxMatchScore = score;
        bestMatch = item;
      }
    }

    // Threshold: Need a significant score to match automatically
    if (bestMatch && maxMatchScore >= 40) {
      toast.success(`Matched: ${bestMatch.name}`, { duration: 3000, id: 'ocr-success' });
      setSelectedItem(bestMatch);
      setAdjustType(mode === 'CHECK_IN' ? 'ADD' : 'REMOVE');
      setShowScanner(false);
    }
  }, [mode, inventory]);

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

      await db.items.update(selectedItem.id!, updated);

      if (isOnline) {
        await inventoryApi.updateItem(selectedItem.id!, updated);
      }

      toast.success("Item updated successfully");
      setIsEditing(false);
      setSelectedItem(updated as Item);
      await loadInventory();
    } 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}" completely from the catalog?`)) return;

    try {
      await db.items.delete(selectedItem.id);
      if (isOnline) {
        await inventoryApi.deleteItem(selectedItem.id);
      }
      toast.success("Item deleted from catalog");
      setSelectedItem(null);
      await loadInventory();
    } catch (err: any) {
      console.error(err);
      toast.error("Failed to delete item");
    }
  };

  const handleAdjustStock = async () => {
    if (!selectedItem) return;

    const toastId = toast.loading("Processing...");

    try {
      const finalAdjustQty = adjustQty;
      const newQty = selectedItem.quantity + (adjustType === 'ADD' ? adjustQty : -adjustQty);

      // 1. Create a unique ID for this operation to prevent double-counting on server
      const operationId = crypto.randomUUID();

      // 2. Queue local operation
      const opType = adjustType === 'ADD' ? 'CHECK_IN' : (adjustType === 'TRASH' ? 'TRASH' : 'CHECK_OUT');

      await db.pendingOperations.add({
        type: opType as any,
        barcode: selectedItem.barcode,
        quantity: finalAdjustQty,
        timestamp: Date.now(),
        synced: 0,
        // We add this to our DB even if it doesn't have it yet, Dexie handles it
        uuid: operationId
      } as any);

      // 3. Update local UI & DB
      await db.items.update(selectedItem.id!, { quantity: newQty });
      setInventory(prev => prev.map(i => i.id === selectedItem.id ? { ...i, quantity: newQty } : i));

      // 4. Trigger Sync
      if (isOnline) {
        await handleSync();
        toast.success("Inventory updated & synced", { id: toastId });
      } else {
        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 [searchQuery, setSearchQuery] = useState('');

  const filteredInventory = inventory.filter(item => {
    const query = searchQuery.toLowerCase();
    return (
      item.name.toLowerCase().includes(query) ||
      item.category.toLowerCase().includes(query) ||
      (item.description?.toLowerCase().includes(query) ?? false) ||
      (item.connector?.toLowerCase().includes(query) ?? false) ||
      (item.size?.toLowerCase().includes(query) ?? false) ||
      (item.part_number?.toLowerCase().includes(query) ?? false) ||
      (item.color?.toLowerCase().includes(query) ?? false) ||
      (item.box_label?.toLowerCase().includes(query) ?? false) ||
      (item.ocr_text?.toLowerCase().includes(query) ?? false)
    );
  });

  // 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 overflow-x-hidden w-full max-w-7xl mx-auto">
        {/* Search datalists for autocomplete */}
      <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 */}
        <header className="flex flex-col sm:flex-row justify-between sm:items-center gap-4 mb-6 w-full px-1">
          <div className="flex items-center gap-3">
            <div className="p-1">
              <img
                src="/logo.png"
                alt="TFM aInventory"
                className="h-8 md:h-10 object-contain drop-shadow-xl rounded-lg"
              />
            </div>
            <div>
              <h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Inventory Control</h1>
            <p className="text-xs md:text-sm text-slate-400 font-bold tracking-tight mt-1 leading-relaxed">Check-in, Check-out & Trash Operations</p>
            </div>
          </div>

          <div className="flex flex-wrap items-center justify-between sm:justify-end gap-3 sm:gap-6 bg-slate-900/40 sm:bg-transparent px-4 py-2 sm:p-0 rounded-2xl border border-slate-800/50 sm:border-none">
            <div className="flex flex-wrap items-center gap-4 sm:gap-6">
              {isScannerReady && (
                <div className="flex items-center gap-2">
                  <div className="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" />
                  <span className="text-xs font-black text-green-500/90 whitespace-nowrap">
                    Scanner: OK
                  </span>
                </div>
              )}
              <div className="flex items-center gap-2">
                <div className={`w-1.5 h-1.5 rounded-full ${isOnline ? 'bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.6)]' : 'bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.6)]'}`} />
                <span className={`text-xs font-black whitespace-nowrap ${isOnline ? 'text-green-500/90' : 'text-rose-500/90'}`}>
                  Sync: {isOnline ? 'Active' : 'Offline'}
                </span>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <button 
                onClick={handleSync} 
                disabled={syncing}
                className="p-2.5 bg-slate-900/80 border border-slate-800 text-slate-400 rounded-xl hover:text-white transition-all active:scale-95 disabled:opacity-50"
              >
                <RefreshCw size={18} className={syncing ? "animate-spin text-primary" : ""} />
              </button>
            </div>
          </div>
        </header>

        <div className="w-full px-1 space-y-6">
          {/* Mode Switcher */}
          <div className="flex p-1.5 bg-slate-900/80 rounded-2xl shadow-inner w-full gap-1">
            {[
              { id: 'CHECK_IN', label: 'Check In', icon: ArrowDownCircle },
              { id: 'CHECK_OUT', label: 'Check Out', icon: ArrowUpCircle },
              { id: 'TRASH', label: 'Trash', icon: Trash2 }
            ].map((m) => (
              <button
                key={m.id}
                onClick={() => setMode(m.id as any)}
                className={cn(
                  "flex-1 py-3.5 rounded-xl text-xs sm:text-sm font-black transition-all flex items-center justify-center gap-3",
                  mode === m.id ? "bg-slate-800 text-primary shadow-lg ring-1 ring-primary/20" : "text-slate-500 hover:text-slate-300"
                )}
              >
                <m.icon size={18} className={mode === m.id ? "scale-110 transition-transform" : ""} />
                <span className="truncate">{m.label}</span>
              </button>
            ))}
          </div>

          {/* Scanner Section */}
          <section className="glass-card rounded-3xl p-6">
            {showScanner ? (
              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <h2 className="text-lg font-semibold">scanning...</h2>
                  <button 
                    onClick={() => setShowScanner(false)}
                    className="p-2.5 bg-slate-900 border border-slate-800 text-slate-400 rounded-xl hover:text-rose-500 transition-all active:scale-95"
                  >
                    <X size={18} />
                  </button>
                </div>
                <Scanner onScanSuccess={onScanSuccess} onOCRMatch={onOCRMatch} />
              </div>
            ) : (
              <div className="flex flex-col items-center py-8 text-center gap-6">
                <button
                  onClick={() => setShowScanner(true)}
                  className="w-24 h-24 rounded-full bg-primary/20 hover:bg-primary/30 border-2 border-primary border-dashed flex items-center justify-center group transition-all"
                >
                  <Smartphone className="w-10 h-10 text-primary group-hover:scale-110 transition-transform" />
                </button>

                <div className="w-full flex justify-center mt-4">
                  <button
                    onClick={() => setShowOnboarding(true)}
                    className="w-full flex flex-col items-center justify-center p-8 rounded-[2rem] bg-indigo-500/5 border border-indigo-500/20 group hover:border-indigo-500/50 transition-all font-black text-indigo-400 gap-4"
                  >
                    <div className="p-4 bg-indigo-500/10 rounded-2xl group-hover:scale-110 transition-transform shadow-lg shadow-indigo-500/10">
                      <Sparkles size={32} />
                    </div>
                    <div className="text-center">
                      <p className="text-lg leading-tight">Add New Item</p>
                      <p className="text-xs opacity-60 font-mono mt-1">AI Smart Discovery</p>
                    </div>
                  </button>
                </div>
              </div>
            )}
          </section>
        </div>

        {/* Onboarding Overlay */}
        {showOnboarding && (
          <AIOnboarding
            categories={categories}
            inventory={inventory}
            onCancel={() => setShowOnboarding(false)}
            onComplete={handleOnboardingComplete}
          />
        )}

        {/* Stock Adjustment Overlay */}
        {selectedItem && (
          <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-slate-950/80 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 Metadata" : selectedItem.name}
                  {!isEditing && (
                    <span className="text-[11px] bg-slate-800 text-slate-400 px-2 py-0.5 rounded-md font-black tracking-tight shadow-sm border border-slate-700/50">
                      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);
                    }}
                    className="p-2 hover:bg-slate-800 rounded-full"
                  >
                    <X size={20} />
                  </button>
                </div>
              </div>

              {isEditing ? (
                <div className="space-y-4 mb-8">
                   <div>
               <div className="bg-slate-900/80 py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
               <label className="text-xs text-slate-400 font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Name</label>
               <textarea 
                 value={editedItem.name || ''} 
                 onChange={(e) => setEditedItem({ ...editedItem, name: e.target.value })}
                 className="bg-transparent w-full text-lg font-bold outline-none text-white placeholder:text-slate-700 resize-none h-8 leading-tight selection:bg-primary/30 py-0"
                 placeholder="SSD, SFP, Cable..."
               />
             </div>
                  </div>
                   <div>
                    <label className="text-sm font-bold text-slate-400 ml-1 tracking-tight">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-mono outline-none text-slate-100"
                      placeholder="e.g. PN-12345"
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                     <div>
                      <label className="text-sm font-bold text-slate-400 ml-1 tracking-tight">Category Group</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 outline-none text-slate-100 placeholder:text-slate-700"
                        placeholder="e.g. storage"
                      />
                      <datalist id="existing-categories">
                        {categories.map(c => (
                          <option key={c.id} value={c.name} />
                        ))}
                      </datalist>
                    </div>
                     <div>
                      <label className="text-sm font-bold text-slate-400 ml-1 tracking-tight">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 outline-none text-slate-100"
                        placeholder="e.g. spare parts"
                      />
                    </div>
                     <div className="col-span-2">
                        <label className="text-sm font-bold text-slate-400 ml-1">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 outline-none text-slate-100 placeholder:text-slate-700 focus:border-primary transition-colors"
                           placeholder="e.g. SFPs 40G Cisco"
                         />
                         <button 
                           type="button"
                           onClick={() => {
                             setFieldScanning({ active: true, field: 'box_label' });
                             setShowScanner(true);
                             toast.success("Scanning for 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>
                      <label className="text-sm font-bold text-slate-400 ml-1 tracking-tight">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 outline-none text-slate-100"
                        placeholder="e.g. LC/UPC"
                      />
                    </div>
                     <div>
                      <label className="text-sm font-bold text-slate-400 ml-1 tracking-tight">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 outline-none text-slate-100"
                        placeholder="e.g. 5m / 1600GB"
                      />
                    </div>
                     <div className="col-span-2">
                        <label className="text-sm font-bold text-slate-400 ml-1 tracking-tight">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 outline-none text-slate-100"
                         placeholder="e.g. Black"
                       />
                    </div>
                     <div className="col-span-2">
                        <label className="text-sm font-bold text-slate-400 ml-1">Description</label>
                       <textarea
                         value={editedItem.description || ''}
                         onChange={e => setEditedItem({ ...editedItem, description: 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 resize-none h-20"
                         placeholder="Item description..."
                       />
                    </div>
                    <div className="bg-slate-900/80 py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
               <label className="text-xs text-slate-400 font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">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-slate-400 resize-none h-12"
                         placeholder="Paste identification string here..."
                       />
                    </div>
                  </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 text-slate-400 active:bg-slate-800"
                      >
                        <Minus size={24} />
                      </button>
                      <div className="text-center">
                        <span className="text-xs font-black tabular-nums">{adjustQty}</span>
                        <span className="text-[10px] text-primary/80 font-bold tracking-tight">Units</span>
                      </div>
                      <button
                        onClick={() => setAdjustQty(adjustQty + 1)}
                        className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center text-slate-400 active:bg-slate-800"
                      >
                        <Plus size={24} />
                      </button>
                    </div>

                    {adjustType === 'TRASH' && (
                      <div className="w-full bg-red-500/5 border border-red-500/20 p-4 rounded-2xl animate-in shake duration-500">
                        <div className="flex items-center gap-2 mb-3">
                          <AlertTriangle size={16} className="text-red-500" />
                          <span className="text-sm font-bold text-red-400">Waste Declaration</span>
                        </div>
                        <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>
                          <option>Other</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-2xl",
                  isEditing ? "bg-slate-100 text-slate-900" : (
                    adjustType === 'ADD' ? "bg-primary shadow-primary/20 text-white" :
                      adjustType === 'REMOVE' ? "bg-amber-600 shadow-amber-500/20 text-white" :
                        "bg-red-600 shadow-red-500/20 text-white"
                  )
                )}
              >
                {isEditing ? "Save Changes" : (
                  adjustType === 'ADD' ? `Add ${adjustQty} to Stock` :
                    adjustType === 'REMOVE' ? `Subtract ${adjustQty} from Stock` :
                      `Discard ${adjustQty} items`
                )}
              </button>
            </div>
          </div>
        )}


        {/* Box Contents Selection Modal */}
      {boxMatches.length > 0 && !selectedItem && (
        <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-slate-950/80 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 flex flex-col max-h-[85vh]">
            <div className="flex justify-between items-center mb-6 shrink-0">
              <div>
                <h3 className="text-xl font-black tracking-tight flex items-center gap-2">
                  <Package className="text-primary" />
                  Box Contents
                </h3>
                <p className="text-xs text-slate-400 font-bold mt-1">Select the item you want to {mode.replace('_', ' ').toLowerCase()}</p>
              </div>
              <button onClick={() => setBoxMatches([])} className="p-2 hover:bg-slate-800 rounded-full">
                <X size={20} />
              </button>
            </div>
                      <div className="overflow-y-auto w-full pr-2 space-y-3 pb-4">
              {boxMatches.map(item => (
                <button
                  key={item.id}
                  onClick={() => {
                    setSelectedItem(item);
                    setBoxMatches([]);
                    setAdjustType(mode === 'CHECK_IN' ? 'ADD' : 'REMOVE');
                  }}
                  className="w-full text-left bg-slate-950/50 hover:bg-slate-800 border border-slate-800/80 p-4 rounded-2xl flex items-center gap-4 transition-all active:scale-[0.98] group"
                >
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-black text-white">{item.name}</p>
                    <p className="text-xs text-slate-400 font-bold mt-1">Part #: {item.part_number || 'N/A'}</p>
                  </div>
                  <ChevronRight size={18} className="text-slate-600 group-hover:text-primary" />
                </button>
              ))}
            </div>
          </div>
        </div>
      )}


      {/* Footer Branding */}
        <footer className="mt-20 mb-8 flex flex-col items-center gap-2 opacity-30">
          <p className="text-xs font-bold">Powered by TFM Group Software</p>
          <div className="h-px w-12 bg-slate-800" />
          <p className="text-[11px] font-mono text-slate-500">v{versionData.version} • {versionData.last_build} • BUILD: dev-{(versionData as any).commit || 'N/A'}</p>
        </footer>
      </div>
    </PageShell>
  );
}