'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 { toast, Toaster } from 'react-hot-toast';
import { 
  Package, 
  Plus, 
  Minus, 
  Trash2, 
  AlertTriangle, 
  X, 
  History, 
  LayoutGrid, 
  Wifi, 
  WifiOff,
  ChevronRight,
  Edit2,
  RefreshCw,
  CloudOff,
  Sparkles,
  Smartphone,
  CheckCircle2,
  User,
  Settings,
  Lock,
  Shield,
  Key,
  LogOut,
  UserPlus,
  Tag
} from 'lucide-react';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
import axios from 'axios';

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 [selectedItem, setSelectedItem] = useState<Item | null>(null);
  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 [showLogs, setShowLogs] = useState(false);
  const [auditLogs, setAuditLogs] = useState<any[]>([]);
  const [users, setUsers] = useState<any[]>([]);
  const [currentUser, setCurrentUser] = useState<any | null>(null);
  const [showUserSelect, setShowUserSelect] = useState(false);
  const [showSettings, setShowSettings] = useState(false);
  const [selectedUserForLogin, setSelectedUserForLogin] = useState<any | null>(null);
  const [loginPassword, setLoginPassword] = useState('');
  const [categories, setCategories] = useState<any[]>([]);

  useEffect(() => {
    setMounted(true);
    const savedUser = localStorage.getItem('inventory_user');
    if (savedUser) {
      setCurrentUser(JSON.parse(savedUser));
    } else {
      setShowUserSelect(true);
    }
    
    // Initial users and categories fetch
    inventoryApi.getUsers().then(u => setUsers(u)).catch(() => {});
    inventoryApi.getCategories().then(c => setCategories(c)).catch(() => {});
  }, []);

  const handleSelectUser = async (user: any) => {
    // If user has a password (Admin always has one), prompt for it
    if (user.username === 'Admin' || user.id > 1) { // Assume others might need it too
      setSelectedUserForLogin(user);
      setLoginPassword('');
      return;
    }
    
    // Auto-login for passwordless users (if any)
    setCurrentUser(user);
    localStorage.setItem('inventory_user', JSON.stringify(user));
    setShowUserSelect(false);
    toast.success(`Welcome back, ${user.username}`);
  };

  const handleLogin = async () => {
    if (!selectedUserForLogin) return;
    
    try {
      const user = await inventoryApi.login({
        username: selectedUserForLogin.username,
        password: loginPassword
      });
      setCurrentUser(user);
      localStorage.setItem('inventory_user', JSON.stringify(user));
      setShowUserSelect(false);
      setSelectedUserForLogin(null);
      setLoginPassword('');
      toast.success(`Authenticated: ${user.username}`);
    } catch (error) {
      toast.error("Invalid password");
    }
  };

  const fetchLogs = async () => {
    if (!isOnline) return;
    try {
      const logs = await inventoryApi.getAuditLogs(30);
      setAuditLogs(logs);
    } catch (err) {
      console.error(err);
    }
  };

  const toggleLogs = async () => {
    if (!showLogs) {
      await fetchLogs();
    }
    setShowLogs(!showLogs);
  };

  useEffect(() => {
    setMounted(true);
    setIsOnline(navigator.onLine);
    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);

    loadInventory();
    preloadOCR();

    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);
      console.log("OCR Engine Pre-warmed & Ready Offline");
    } 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.toUpperCase();
      }
      // 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 upperBarcode = barcode.toUpperCase();
    const item = await db.items.where('barcode').equals(barcode)
      .or('part_number').equals(upperBarcode).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.toUpperCase().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;

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

    let bestMatch = null;
    let maxMatchScore = 0;

    for (const item of inventory) {
      let score = 0;
      const pn = (item.part_number || '').toUpperCase();
      const sn = (item.serial_number || '').toUpperCase();
      const name = item.name.toUpperCase();
      const category = item.category.toUpperCase();

      // 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.toUpperCase();

      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) {
      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) {
      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.specs?.toLowerCase().includes(query) ?? false) ||
      (item.part_number?.toLowerCase().includes(query) ?? false) ||
      (item.color?.toLowerCase().includes(query) ?? false)
    );
  });

  if (!mounted) return null;

  return (
    <main className="min-h-screen bg-slate-950 text-slate-100 p-3 pb-48 md:p-8 overflow-x-hidden w-full">
      <Toaster position="top-center" />
      
      {/* Header */}
      <header className="flex flex-col sm:flex-row justify-between sm:items-center gap-4 mb-6 w-full max-w-4xl mx-auto 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-lg md:text-xl font-black tracking-normal text-white leading-none">
              TFM <span className="font-mono text-primary bg-primary/5 px-2 py-0.5 rounded-lg border border-primary/10 ml-1">aInventory</span>
            </h1>
            <div className="flex items-center gap-2 mt-1">
              <p className="text-[9px] font-bold text-slate-500 tracking-[0.2em] font-mono">
                VERSION 1.1.0
              </p>
              <span className="w-1 h-1 rounded-full bg-slate-800" />
              <button 
                onClick={() => setShowUserSelect(true)}
                className="text-[9px] font-black text-primary/80 hover:text-primary transition-colors flex items-center gap-1"
              >
                <User size={8} />
                {currentUser?.username || 'Guest'}
              </button>
            </div>
          </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 p-3 sm:p-0 rounded-2xl border border-slate-800/50 sm:border-none">
          <div className="flex flex-wrap items-center gap-4">
            {isScannerReady && (
              <div className="flex items-center gap-1.5">
                <div className="w-1 h-1 rounded-full bg-green-500 shadow-[0_0_5px_rgba(34,197,94,0.5)]" />
                <span className="text-[9px] font-black text-green-500/80 uppercase tracking-widest whitespace-nowrap">
                  OFFLINE SCAN: OK
                </span>
              </div>
            )}
            <div className="flex items-center gap-1.5">
              <div className={`w-1 h-1 rounded-full ${isOnline ? 'bg-green-500 animate-pulse shadow-[0_0_5px_rgba(34,197,94,0.5)]' : 'bg-rose-500 shadow-[0_0_5px_rgba(244,63,94,0.5)]'}`} />
              <span className={`text-[9px] font-black uppercase tracking-widest whitespace-nowrap ${isOnline ? 'text-green-500/80' : 'text-rose-500/80'}`}>
                SERVER SYNC: {isOnline ? 'OK' : 'NO'}
              </span>
            </div>
          </div>
          
          <button 
            onClick={handleSync}
            disabled={syncing || !isOnline}
            className="bg-primary/10 hover:bg-primary/20 border border-primary/20 text-primary px-3 sm:px-4 py-1.5 rounded-xl text-[9px] font-black uppercase tracking-[0.2em] transition-all active:scale-95 disabled:opacity-30 flex items-center gap-2"
          >
            <RefreshCw size={10} className={cn(syncing && "animate-spin")} />
            Sync
          </button>
        </div>
      </header>

      <div className="max-w-4xl mx-auto w-full px-1 space-y-6">
        {/* Mode Switcher */}
        <div className="flex p-1 bg-slate-900/80 backdrop-blur-md rounded-2xl shadow-inner w-full">
          {[
            { id: 'CHECK_IN', label: 'Check In' },
            { id: 'CHECK_OUT', label: 'Check Out' },
            { id: 'TRASH', label: 'Trash/Waste' }
          ].map((m) => (
            <button
              key={m.id}
              onClick={() => setMode(m.id as any)}
              className={cn(
                "flex-1 py-3 rounded-xl text-xs font-black uppercase tracking-widest transition-all",
                mode === m.id ? "bg-slate-800 text-primary shadow-lg" : "text-slate-500"
              )}
            >
              {m.label}
            </button>
          ))}
        </div>

        {/* Scanner Section */}
        <section className="bg-slate-900/50 border border-slate-800 rounded-3xl p-6 backdrop-blur-sm shadow-xl">
          {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="text-sm text-slate-400 hover:text-white"
                >
                  Cancel
                </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>
                <p className="text-lg font-medium">Tap to start scanning</p>
                <p className="text-sm text-slate-400">Scan barcodes for routine {mode.toLowerCase().replace('_', ' ')}</p>
              </div>

              <div className="w-full h-px bg-slate-800 my-2" />

              <button 
                onClick={() => setShowOnboarding(true)}
                className="w-full h-16 rounded-[1.5rem] bg-slate-900/50 border border-slate-800 flex items-center justify-center gap-3 group hover:border-primary/40 transition-all font-bold"
              >
                 <Sparkles size={18} className="text-primary group-hover:scale-110 transition-transform" />
                 <span className="text-sm">New Item (AI Onboarding)</span>
              </button>
            </div>
          )}
        </section>

        {/* Inventory List */}
        <section>
          <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4 mb-6">
            <h3 className="text-lg font-semibold flex items-center gap-2">
              <Package size={20} className="text-primary" />
              Catalog Items
            </h3>
            <div className="relative flex-1 md:max-w-xs">
              <input 
                type="text"
                placeholder="Search specs, PN, OM4..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full bg-slate-900 border border-slate-800 rounded-xl py-2 pl-3 pr-10 text-sm focus:border-primary outline-none transition-all"
              />
              <div className="absolute right-3 top-2.5 text-slate-600">
                🔍
              </div>
            </div>
          </div>
          
          <div className="grid gap-3">
            {filteredInventory.map(item => (
              <div 
                key={item.id} 
                onClick={() => {
                  setSelectedItem(item);
                  setAdjustType('ADD');
                }}
                className="bg-slate-900/40 border border-slate-800/50 p-3 rounded-[1.5rem] flex items-center justify-between group hover:border-primary/40 hover:bg-slate-900/60 active:scale-[0.98] transition-all cursor-pointer shadow-sm"
              >
                <div className="flex-1 min-w-0 pr-4">
                  <div className="flex items-center gap-2 mb-1">
                     <span className="text-[9px] font-black bg-primary/10 text-primary px-2 py-0.5 rounded-full uppercase tracking-tighter">
                       {item.category}
                     </span>
                     {item.type && (
                       <span className="text-[9px] font-bold bg-slate-800 text-slate-400 px-2 py-0.5 rounded-full uppercase tracking-tighter">
                         {item.type}
                       </span>
                     )}
                     {item.color && (
                       <span className="text-[9px] font-bold border border-slate-800 px-2 py-0.5 rounded-full flex items-center gap-1.5">
                         <div className="w-1.5 h-1.5 rounded-full" style={{backgroundColor: item.color}} />
                         {item.color}
                       </span>
                     )}
                  </div>
                  <h4 className="font-bold text-slate-200 break-words leading-tight">{item.name}</h4>
                  <p className="text-[10px] text-slate-500 font-medium break-words mt-1 opacity-80">
                    {item.specs}
                  </p>
                  <p className="text-[9px] text-slate-600 font-mono mt-1 flex items-center gap-2">
                    PN: {item.part_number || 'N/A'} <ChevronRight size={10} />
                  </p>
                </div>
                <div className="text-right shrink-0">
                  <span className={cn(
                    "text-xl font-black",
                    item.quantity <= item.min_quantity ? "text-amber-500" : "text-primary"
                   )}>
                    {item.quantity}
                  </span>
                  <p className="text-[9px] text-slate-600 uppercase tracking-[0.2em] font-black">Stock</p>
                </div>
              </div>
            ))}
            {filteredInventory.length === 0 && (
              <div className="py-12 text-center text-slate-500 bg-slate-900/20 rounded-3xl border border-dashed border-slate-800">
                <p className="font-medium">No results for "{searchQuery}"</p>
                <p className="text-xs">Try searching by category, specs (e.g. OM4) or color.</p>
              </div>
            )}
          </div>
        </section>
      </div>

      {/* Onboarding Overlay */}
      {showOnboarding && (
        <AIOnboarding 
          categories={categories}
          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 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">
                {isEditing ? (
                  <h3 className="text-xl font-black tracking-tight">Edit Metadata</h3>
                ) : (
                  <h3 className="text-xl font-black tracking-tight">{selectedItem.name}</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>
                    <label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">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 outline-none text-slate-100"
                    />
                  </div>
                  <div>
                    <label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Part Number (for OCR match)</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. OM4-TURQ-2M"
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Category</label>
                      <select 
                        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"
                      >
                        <option value="">Select Category</option>
                        {categories.map(c => (
                          <option key={c.id} value={c.name}>{c.name}</option>
                        ))}
                      </select>
                    </div>
                    <div>
                      <label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Item Type (e.g. SFP, Patch Cord)</label>
                      <input 
                        type="text" 
                        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. SFP+"
                      />
                    </div>
                    <div className="col-span-2">
                      <label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Specs</label>
                      <input 
                        type="text" 
                        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 outline-none text-slate-100"
                      />
                    </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-[10px] font-black uppercase tracking-widest 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-5xl font-black tabular-nums">{adjustQty}</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-xs font-bold text-red-400 uppercase tracking-widest">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>
      )}

      {/* Audit Logs Overlay */}
      {showLogs && (
        <div className="fixed inset-0 z-50 flex flex-col bg-slate-950 p-6 animate-in slide-in-from-bottom-20 duration-500">
          <div className="flex justify-between items-center mb-8">
            <div>
              <h2 className="text-2xl font-black tracking-tight">Audit History</h2>
              <p className="text-xs text-slate-500">Live transaction log from cloud</p>
            </div>
            <button 
              onClick={() => setShowLogs(false)}
              className="p-3 bg-slate-900 rounded-full text-slate-400"
            >
              <X size={24} />
            </button>
          </div>

          <div className="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar">
            {auditLogs.length === 0 ? (
              <div className="h-full flex flex-col items-center justify-center text-slate-600 gap-4">
                 <History size={48} className="opacity-20" />
                 <p>No transactions found</p>
              </div>
            ) : (
              auditLogs.map((log) => (
                <div key={log.id} className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl flex items-center justify-between gap-4">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <p className={cn(
                        "text-[10px] font-black uppercase tracking-widest",
                        log.action.includes('CHECK_IN') ? "text-green-500" : (log.action.includes('TRASH') ? "text-rose-500" : "text-amber-500")
                      )}>
                        {log.action}
                      </p>
                      <span className="text-[10px] font-bold text-slate-500">by</span>
                      <span className="text-[10px] font-black text-slate-400">{log.username || 'System'}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-bold text-slate-200">
                         {inventory.find(i => i.id === log.target_item_id)?.name || `Item #${log.target_item_id}`}
                      </span>
                    </div>
                    {(log.details || log.timestamp) && (
                      <div className="flex items-center gap-3 mt-2">
                         <p className="text-[9px] text-slate-600 font-mono">
                          {new Date(log.timestamp).toLocaleString()}
                        </p>
                        {log.details && (
                          <span className="text-[9px] bg-slate-800 text-slate-500 px-2 py-0.5 rounded border border-slate-700 font-mono">
                            {log.details}
                          </span>
                        )}
                      </div>
                    )}
                  </div>
                  <div className="text-right">
                    <p className={cn(
                      "text-lg font-black",
                      log.quantity_change > 0 ? "text-green-400" : "text-rose-400"
                    )}>
                      {log.quantity_change > 0 ? '+' : ''}{log.quantity_change}
                    </p>
                  </div>
                </div>
              ))
            )}
          </div>
        </div>
      )}

      {/* Footer Branding */}
      <footer className="mt-20 mb-8 flex flex-col items-center gap-2 opacity-30">
        <p className="text-[10px] font-bold tracking-[0.3em] uppercase">Powered by TFM Group Software</p>
        <div className="h-px w-12 bg-slate-800" />
        <p className="text-[9px] font-mono">v1.1.0 • 2026-04-10 • BUILD: dev-84140</p>
      </footer>

      {/* Bottom Nav */}
      <footer className="fixed bottom-0 left-0 right-0 p-4 bg-slate-950/80 backdrop-blur-md border-t border-slate-900 z-40">
        <div className="max-w-4xl mx-auto flex justify-around items-center text-slate-400">
          <button 
            onClick={() => setShowScanner(true)}
            className={cn("flex flex-col items-center gap-1", showScanner && !showOnboarding && "text-primary")}
          >
            <Smartphone size={20} />
            <span className="text-[10px] font-bold uppercase transition-all">Scan</span>
          </button>

          {/* Central Add Button */}
          <button 
            onClick={() => setShowOnboarding(true)}
            className="bg-primary text-white p-4 rounded-full -mt-12 shadow-2xl shadow-primary/40 border-4 border-slate-950 active:scale-90 transition-transform"
          >
            <Sparkles size={24} />
          </button>

          <button 
            onClick={toggleLogs}
            className={cn("flex flex-col items-center gap-1", showLogs && "text-primary")}
          >
            <History size={20} />
            <span className="text-[10px] font-bold uppercase">Logs</span>
          </button>

          {currentUser?.role === 'admin' && (
            <button 
              onClick={() => setShowSettings(true)}
              className={cn("flex flex-col items-center gap-1", showSettings && "text-primary")}
            >
              <Settings size={20} />
              <span className="text-[10px] font-bold uppercase transition-all">Admin</span>
            </button>
          )}
        </div>
      </footer>
      
      {/* Settings Drawer (User Management) */}
      {showSettings && (
        <div className="fixed inset-0 z-40 bg-slate-950/60 backdrop-blur-sm animate-in fade-in duration-300">
          <div className="absolute inset-y-0 right-0 w-full max-w-md bg-slate-900 border-l border-slate-800 shadow-2xl flex flex-col animate-in slide-in-from-right duration-500">
            <div className="p-6 border-b border-slate-800 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-slate-800 rounded-xl text-primary">
                  <Shield size={20} />
                </div>
                <h2 className="text-xl font-black text-white uppercase tracking-tight">System Admin</h2>
              </div>
              <button 
                onClick={() => {
                  setShowSettings(false);
                  loadInventory();
                }}
                className="p-2 hover:bg-slate-800 rounded-full transition-colors text-slate-500"
              >
                <X size={20} />
              </button>
            </div>
            
            <div className="flex-1 overflow-y-auto p-6 space-y-8">
              <section className="space-y-4">
                <div className="flex items-center justify-between">
                  <h3 className="text-xs font-black text-slate-500 uppercase tracking-widest">User Management</h3>
                  <button 
                    onClick={() => {
                      const name = prompt("Enter new username:");
                      if (!name) return;
                      const pwd = prompt("Enter password for " + name + ":");
                      if (!pwd) return;
                      inventoryApi.createUser({ username: name, password: pwd, role: 'user' })
                        .then(() => {
                           toast.success("User created");
                           inventoryApi.getUsers().then(setUsers);
                        })
                        .catch(e => toast.error("Failed to create user"));
                    }}
                    className="flex items-center gap-1 text-[10px] font-black text-primary uppercase hover:underline"
                  >
                    <UserPlus size={12} /> Add User
                  </button>
                </div>
                
                <div className="grid gap-2">
                  {users.map(u => (
                    <div key={u.id} className="bg-slate-800/40 border border-slate-800 p-4 rounded-2xl flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <div className={cn("p-2 rounded-lg", u.role === 'admin' ? "bg-primary/20 text-primary" : "bg-slate-700 text-slate-400")}>
                          <User size={16} />
                        </div>
                        <div>
                          <p className="text-sm font-bold text-white">{u.username}</p>
                          <p className="text-[10px] font-bold text-slate-500 tracking-widest">{u.role}</p>
                        </div>
                      </div>
                      
                      {u.username !== 'Admin' && (
                        <button 
                          onClick={() => {
                            if(confirm(`Delete user ${u.username}?`)) {
                              inventoryApi.deleteUser(u.id)
                                .then(() => {
                                  toast.success("User removed");
                                  inventoryApi.getUsers().then(setUsers);
                                })
                                .catch(() => toast.error("Delete failed"));
                            }
                          }}
                          className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all"
                        >
                          <Trash2 size={16} />
                        </button>
                      )}
                    </div>
                  ))}
                </div>
              </section>

              <section className="space-y-4">
                <div className="flex items-center justify-between">
                  <h3 className="text-xs font-black text-slate-500 uppercase tracking-widest">Category Groups</h3>
                  <button 
                    onClick={() => {
                      const name = prompt("New category name:");
                      if (!name) return;
                      const desc = prompt("Description (optional):");
                      inventoryApi.createCategory({ name, description: desc })
                        .then(() => {
                           toast.success("Category added");
                           inventoryApi.getCategories().then(setCategories);
                        })
                        .catch(e => toast.error("Failed to add category"));
                    }}
                    className="flex items-center gap-1 text-[10px] font-black text-primary uppercase hover:underline"
                  >
                    <Plus size={12} /> Add Category
                  </button>
                </div>
                
                <div className="grid gap-2">
                  {categories.map(cat => (
                    <div key={cat.id} className="bg-slate-800/40 border border-slate-800 p-4 rounded-2xl flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <div className="p-2 bg-slate-700 rounded-lg text-slate-400">
                          <Tag size={16} />
                        </div>
                        <div>
                          <p className="text-sm font-bold text-white">{cat.name}</p>
                          <p className="text-[9px] text-slate-500 font-mono">{cat.description || 'No description'}</p>
                        </div>
                      </div>
                      
                      <button 
                         onClick={() => {
                           if(confirm(`Delete category ${cat.name}?`)) {
                             inventoryApi.deleteCategory(cat.id)
                               .then(() => {
                                 toast.success("Category removed");
                                 inventoryApi.getCategories().then(setCategories);
                               })
                               .catch(e => toast.error(e.response?.data?.detail || "Delete failed"));
                           }
                         }}
                         className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all"
                      >
                         <Trash2 size={16} />
                      </button>
                    </div>
                  ))}
                </div>
              </section>

              <section className="p-6 bg-slate-800/30 rounded-3xl border border-slate-800 space-y-4">
                <div className="flex items-center gap-2 text-rose-500">
                  <AlertTriangle size={16} />
                  <p className="text-xs font-black uppercase tracking-widest">Logout</p>
                </div>
                <p className="text-xs text-slate-500">Exit current session and return to identity check.</p>
                <button 
                  onClick={() => {
                    localStorage.removeItem('inventory_user');
                    window.location.reload();
                  }}
                  className="w-full bg-rose-500/10 hover:bg-rose-500/20 text-rose-500 border border-rose-500/20 font-black uppercase tracking-widest py-3 rounded-xl transition-all flex items-center justify-center gap-2"
                >
                  <LogOut size={16} /> End Session
                </button>
              </section>
            </div>
          </div>
        </div>
      )}
      {/* User Selection Overlay */}
      {showUserSelect && (
        <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 zoom-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-8">
            <div className="text-center space-y-2">
              <div className="w-16 h-16 bg-primary/10 text-primary rounded-2xl flex items-center justify-center mx-auto mb-4 border border-primary/20">
                <User size={32} />
              </div>
              <h2 className="text-2xl font-black text-white uppercase tracking-tight">Identity Check</h2>
              <p className="text-slate-500 text-sm">Select operator profile to continue</p>
            </div>
            
            <div className="grid gap-3">
              {!selectedUserForLogin ? (
                users.map(user => (
                  <button
                    key={user.id}
                    onClick={() => handleSelectUser(user)}
                    className="bg-slate-800/50 hover:bg-slate-800 border border-slate-800 hover:border-primary/40 p-4 rounded-2xl text-left transition-all group flex items-center justify-between"
                  >
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 rounded-full bg-slate-900 border border-slate-700 flex items-center justify-center text-slate-500 group-hover:text-primary transition-colors">
                        {user.role === 'admin' ? <Shield size={14} /> : <User size={14} />}
                      </div>
                      <div>
                        <p className="text-white font-black text-sm tracking-widest">{user.username}</p>
                        <p className="text-[10px] text-slate-500 font-bold mt-1 tracking-widest">{user.role}</p>
                      </div>
                    </div>
                    <ChevronRight size={16} className="text-slate-600 group-hover:text-primary transition-colors" />
                  </button>
                ))
              ) : (
                <div className="space-y-4 animate-in slide-in-from-right-4 duration-300">
                  <div className="bg-slate-800/30 p-4 rounded-2xl border border-slate-800 flex items-center gap-3">
                    <button 
                      onClick={() => setSelectedUserForLogin(null)}
                      className="p-1 hover:bg-slate-700 rounded-lg transition-colors"
                    >
                      <X size={16} className="text-slate-400" />
                    </button>
                    <div>
                      <p className="text-xs font-bold text-slate-500 uppercase tracking-widest">Logging in as</p>
                      <p className="text-white font-black tracking-tight">{selectedUserForLogin.username}</p>
                    </div>
                  </div>
                  
                  <div className="space-y-2">
                    <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest px-1">Password</label>
                    <div className="relative">
                      <Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500" size={16} />
                      <input 
                        type="password"
                        autoFocus
                        value={loginPassword}
                        onChange={(e) => setLoginPassword(e.target.value)}
                        onKeyDown={(e) => e.key === 'Enter' && handleLogin()}
                        className="w-full bg-slate-800/50 border border-slate-800 focus:border-primary rounded-2xl py-4 pl-12 pr-4 text-white focus:outline-none transition-all"
                        placeholder="••••••••"
                      />
                    </div>
                  </div>
                  
                  <button 
                    onClick={handleLogin}
                    className="w-full bg-primary text-white font-black uppercase tracking-widest py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all"
                  >
                    Verify Identity
                  </button>
                </div>
              )}
            </div>
            
            {users.length === 0 && (
              <div className="text-center p-8 text-slate-500 animate-pulse">
                Initializing users...
              </div>
            )}
          </div>
        </div>
      )}
    </main>
  );
}