'use client';

import { useState, useEffect } from 'react';
import { inventoryApi } from '@/lib/api';
import PageShell from '@/components/PageShell';
import StatCard from '@/components/StatCard';
import {
  Shield,
  ShieldAlert,
  UserPlus,
  User,
  Trash2,
  Tag,
  Plus,
  AlertTriangle,
  LogOut,
  HardDrive,
  Download,
  RotateCcw,
  FileText,
  Upload,
  Brain,
  Globe,
  Edit2,
  Server,
  Wifi,
  WifiOff,
  Clock,
  History,
  Database,
  Layers,
  X,
  ChevronDown
} from 'lucide-react';
import { toast } from 'react-hot-toast';
import { cn } from '@/lib/utils';

export default function AdminPage() {
  const [users, setUsers] = useState<any[]>([]);
  const [categories, setCategories] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  
  // LDAP Config State
  const [ldapConfig, setLdapConfig] = useState<any>({
    ldap_enabled: false,
    server_uri: 'ldap://192.168.84.107:3890',
    base_dn: 'dc=example,dc=com',
    user_template: 'cn={username},ou=people,dc=example,dc=com',
    groups_dn: 'ou=groups',
    use_tls: false,
    role_mappings: []
  });
  const [testingLdap, setTestingLdap] = useState(false);
  
  // Edit States
  const [editingUser, setEditingUser] = useState<any | null>(null);
  const [editUserForm, setEditUserForm] = useState({ username: '', password: '', role: 'user' });
  
  const [editingCategory, setEditingCategory] = useState<any | null>(null);
  const [editCatForm, setEditCatForm] = useState({ name: '', description: '' });

  // DB Management State
  const [backups, setBackups] = useState<any[]>([]);
  const [dbStats, setDbStats] = useState({ backup_count: 0, total_size_bytes: 0 });
  const [dbSettings, setDbSettings] = useState({ retention_count: 10, schedule_hour: 3, schedule_freq_days: 1 });
  const [isBackingUp, setIsBackingUp] = useState(false);
  const [isImporting, setIsImporting] = useState(false);

  // AI Prompt State
  const [aiPrompt, setAiPrompt] = useState("");
  const [isSavingPrompt, setIsSavingPrompt] = useState(false);

  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    setLoading(true);
    try {
      const [u, c, l, b, s, st] = await Promise.all([
        inventoryApi.getUsers(),
        inventoryApi.getCategories(),
        inventoryApi.getLdapConfig(),
        inventoryApi.getDbBackups(),
        inventoryApi.getDbStats(),
        inventoryApi.getDbSettings()
      ]);
      setUsers(u);
      setCategories(c);
      if (l && l.server_uri) setLdapConfig(l);
      setBackups(b);
      setDbStats(s);
      setDbSettings(st);
      
      const p = await inventoryApi.getAiPrompt();
      setAiPrompt(p.value);
    } catch (err: any) {
      console.error(err);
      toast.error("Failed to load admin data");
    } finally {
      setLoading(false);
    }
  };

  const handleAddUser = async () => {
    const name = prompt("Enter new username:");
    if (!name) return;
    const pwd = prompt("Enter password for " + name + ":");
    if (!pwd) return;
    
    try {
      await inventoryApi.createUser({ username: name, password: pwd, role: 'user' });
      toast.success("User created successfully");
      loadData();
    } catch (err: any) {
      toast.error("Failed to create user");
    }
  };

  const handleDeleteUser = async (id: number, username: string) => {
    if (username === 'Admin') return;
    if (!confirm(`Delete user ${username}?`)) return;
    
    try {
      await inventoryApi.deleteUser(id);
      toast.success("User removed");
      loadData();
    } catch (err: any) {
      toast.error("Delete failed");
    }
  };

  const handleAddCategory = async () => {
    const name = prompt("New category name:");
    if (!name) return;
    const desc = prompt("Description (optional):");
    
    try {
      await inventoryApi.createCategory({ name, description: desc });
      toast.success("Category added");
      loadData();
    } catch (err: any) {
      toast.error("Failed to add category");
    }
  };

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

  const handleDeleteCategory = async (id: number, name: string) => {
    if (!confirm(`Delete category ${name}?`)) return;
    
    try {
      await inventoryApi.deleteCategory(id);
      toast.success("Category removed");
      loadData();
    } catch (err: any) {
      toast.error(err.response?.data?.detail || "Delete failed");
    }
  };

  const handleUpdateUserSubmit = async () => {
    if (!editingUser) return;
    try {
      const payload: any = { username: editUserForm.username, role: editUserForm.role };
      if (editUserForm.password) payload.password = editUserForm.password;
      
      await inventoryApi.updateUser(editingUser.id, payload);
      toast.success("User updated successfully");
      setEditingUser(null);
      loadData();
    } catch (err: any) {
      toast.error("Update failed");
    }
  };

  const handleLogout = () => {
    import('@/lib/auth').then(m => m.clearAuth());
    window.location.href = '/login';
  };

  const handleCreateBackup = async () => {
    setIsBackingUp(true);
    try {
      await inventoryApi.triggerBackup();
      toast.success("Snapshot created successfully");
      loadData();
    } catch (err: any) {
      toast.error("Backup failed");
    } finally {
      setIsBackingUp(false);
    }
  };

  const handleRestore = async (filename: string) => {
    if (!confirm(`DANGEROUS: Restore database from ${filename}? Current data will be replaced. A rollback snapshot will be created automatically.`)) return;
    
    const loadingToast = toast.loading("Restoring database...");
    try {
      await inventoryApi.restoreDatabase(filename);
      toast.success("Database restored! Reloading system...", { id: loadingToast });
      setTimeout(() => window.location.reload(), 2000);
    } catch (err: any) {
      toast.error("Restore failed", { id: loadingToast });
    }
  };

  const handleUpdateDbSettings = async (newSettings: any) => {
    try {
      await inventoryApi.updateDbSettings(newSettings);
      toast.success("System policy updated");
      setDbSettings(newSettings);
    } catch (err: any) {
      toast.error("Failed to update settings");
    }
  };

  const handleUpdatePrompt = async () => {
    setIsSavingPrompt(true);
    try {
      await inventoryApi.updateAiPrompt(aiPrompt);
      toast.success("AI Extraction Prompt updated");
    } catch (err: any) {
      toast.error("Failed to update AI prompt");
    } finally {
      setIsSavingPrompt(false);
    }
  };

  const handleExportDb = async () => {
    try {
      const blob = await inventoryApi.exportDb();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `inventory_backup_${new Date().toISOString().split('T')[0]}.db`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      toast.success("Database exported successfully");
    } catch (err: any) {
      toast.error("Export failed");
    }
  };

  const handleImportDb = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    
    if (!confirm("DANGEROUS: You are about to REPLACE the entire database with this file. All current data will be lost. Proceed?")) {
      e.target.value = '';
      return;
    }

    setIsImporting(true);
    const formData = new FormData();
    formData.append('file', file);

    const loadingToast = toast.loading("Importing database...");
    try {
      await inventoryApi.importDb(formData);
      toast.success("Database imported! Reloading system...", { id: loadingToast });
      setTimeout(() => window.location.reload(), 2000);
    } catch (err: any) {
      toast.error("Import failed: " + (err.response?.data?.detail || err.message), { id: loadingToast });
    } finally {
      setIsImporting(false);
      e.target.value = '';
    }
  };

  const handleUpdateLdap = async () => {
    setLoading(true);
    try {
      await inventoryApi.updateLdapConfig(ldapConfig);
      toast.success("Enterprise configuration updated");
    } catch (err: any) {
      toast.error("Failed to update LDAP config");
    } finally {
      setLoading(false);
    }
  };

  const handleTestLdap = async () => {
    setTestingLdap(true);
    try {
      const res = await inventoryApi.testLdapConnection(ldapConfig);
      if (res.status === 'success') {
        toast.success(res.message || "LDAP Connection Successful!");
      } else {
        toast.error(`LDAP Error: ${res.message || "Unknown error"}`);
      }
    } catch (err: any) {
      toast.error(`Connection failed: ${err.response?.data?.detail || err.message}`);
    } finally {
      setTestingLdap(false);
    }
  };

  const formatSize = (bytes: number) => {
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
  };

  return (
    <PageShell requireAdmin={true}>
      <main className="p-4 md:p-8 max-w-7xl mx-auto space-y-16">
        <header className="flex items-center gap-5">
          <div className="p-4 bg-primary/10 rounded-[2rem] text-primary border border-primary/20 shadow-xl shadow-primary/5">
            <Shield size={32} />
          </div>
          <div>
            <h1 className="text-3xl font-black tracking-tight text-white">System Admin</h1>
            <p className="text-xs text-slate-500 font-bold mt-1">Enterprise Control Center</p>
          </div>
        </header>

        {/* User Management Section */}
        <section className="glass-card p-6 md:p-8 rounded-[2.5rem] md:rounded-[3rem] space-y-8">
          <div className="flex items-center justify-between px-2">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-primary/10 rounded-2xl text-primary border border-primary/20">
                <User size={24} />
              </div>
              <div>
                <h2 className="text-xl font-black text-white">User Accounts</h2>
                <p className="text-xs text-slate-500 font-bold mt-1">Manage local and network synchronized identities</p>
              </div>
            </div>
            <button 
              onClick={handleAddUser}
              className="flex items-center justify-center gap-2 bg-primary/10 hover:bg-primary text-primary hover:text-white font-black text-xs px-5 py-2.5 rounded-xl transition-all border border-primary/20 active:scale-95"
            >
              <UserPlus size={14} /> Add Local User
            </button>
          </div>
          
          <div className="space-y-10">
            {/* Local Users Group */}
            <div className="space-y-4">
              <div className="flex items-center gap-2 px-1">
                 <div className="w-1.5 h-1.5 rounded-full bg-primary" />
                 <h3 className="text-sm font-black text-white">Local Users</h3>
              </div>
              <div className="bg-slate-950/40 border border-slate-800/50 rounded-2xl overflow-hidden shadow-xl divide-y divide-slate-800/50">
                {loading ? (
                  <div className="p-8 text-center animate-pulse text-slate-600 text-xs font-black">Loading...</div>
                ) : (
                  users.filter(u => (u.origin || 'local') === 'local').map(u => (
                    <div key={u.id} className="flex items-center justify-between p-4 hover:bg-slate-800/30 transition-all group">
                      <div className="flex items-center gap-4">
                        <div className={cn(
                          "p-2.5 rounded-xl",
                          u.role === 'admin' ? "bg-primary/10 text-primary border border-primary/20" : "bg-slate-800 text-slate-500 border border-slate-800"
                        )}>
                          {u.role === 'admin' ? <Shield size={16} /> : <User size={16} />}
                        </div>
                        <div>
                          <p className="text-sm font-bold text-white group-hover:text-primary transition-colors">{u.username}</p>
                          <span className="text-[8px] font-black text-slate-500 opacity-60 font-mono tracking-tighter">{u.role}</span>
                        </div>
                      </div>
                      
                      <div className="flex items-center gap-1 pr-2">
                        <button 
                          onClick={() => {
                            setEditingUser(u);
                            setEditUserForm({ username: u.username, password: '', role: u.role });
                          }}
                          className="p-2.5 bg-slate-800/50 hover:bg-slate-700 text-slate-400 hover:text-white rounded-lg transition-all border border-slate-800"
                        >
                          <Edit2 size={14} />
                        </button>
                        {u.username !== 'Admin' && (
                          <button 
                            onClick={() => handleDeleteUser(u.id, u.username)}
                            className="p-2.5 bg-rose-500/5 hover:bg-rose-500 text-rose-500 hover:text-white rounded-lg transition-all border border-rose-500/10"
                          >
                            <Trash2 size={14} />
                          </button>
                        )}
                      </div>
                    </div>
                  ))
                )}
              </div>
            </div>

            {/* enterprise Users Group */}
            {users.some(u => u.origin === 'ldap') && (
              <div className="space-y-4">
                <div className="flex items-center gap-2 px-1">
                   <div className="w-1.5 h-1.5 rounded-full bg-indigo-500" />
                   <h3 className="text-sm font-black text-white">Enterprise Users (LDAP)</h3>
                </div>
                <div className="bg-indigo-500/5 border border-indigo-500/10 rounded-2xl overflow-hidden shadow-xl divide-y divide-indigo-500/10">
                  {users.filter(u => u.origin === 'ldap').map(u => (
                    <div key={u.id} className="flex items-center justify-between p-4 hover:bg-indigo-500/10 transition-all group">
                      <div className="flex items-center gap-4">
                        <div className={cn(
                          "p-2.5 rounded-xl",
                          u.role === 'admin' ? "bg-indigo-500/20 text-indigo-400 border border-indigo-400/20" : "bg-slate-800/50 text-slate-500 border border-slate-800"
                        )}>
                           <Shield size={16} />
                        </div>
                        <div>
                          <p className="text-sm font-bold text-white">{u.username}</p>
                          <div className="flex items-center gap-2">
                            <span className="text-[8px] bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 px-1.5 py-0.5 rounded-md font-black">Ldap Profile</span>
                            <span className="text-[8px] font-black text-slate-500 opacity-60 font-mono tracking-tighter">{u.role}</span>
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-1 pr-2">
                        <div className="text-[10px] font-black text-indigo-400/50 pr-4 italic">
                          Cached Profile
                        </div>
                        <button 
                           onClick={() => handleDeleteUser(u.id, u.username)}
                           className="p-2.5 bg-rose-500/5 hover:bg-rose-500 text-rose-500 hover:text-white rounded-lg transition-all border border-rose-500/10"
                           title="Clear local cache for this user"
                        >
                           <Trash2 size={14} />
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </section>

        {/* Enterprise Integration (LDAP) Section */}
        <section className="glass-card p-6 md:p-8 rounded-[2.5rem] md:rounded-[3rem] space-y-8">
           <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6 px-2">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-indigo-500/10 rounded-2xl text-indigo-500 border border-indigo-500/20">
                <Globe size={24} />
              </div>
              <div>
                <h2 className="text-xl font-black text-white">Enterprise Integration</h2>
                <p className="text-xs text-slate-500 font-bold mt-1">Configure directory services and single sign-on synchronization</p>
              </div>
            </div>
            <div className="flex items-center gap-3 bg-slate-950/50 p-2 rounded-2xl border border-slate-800">
               <span className={cn("text-[10px] font-black px-3 transition-colors", ldapConfig.ldap_enabled ? "text-slate-600" : "text-rose-500")}>Offline Only</span>
               <button 
                onClick={() => setLdapConfig({ ...ldapConfig, ldap_enabled: !ldapConfig.ldap_enabled })}
                className={cn(
                  "relative inline-flex h-7 w-12 items-center rounded-full transition-all duration-300 outline-none",
                  ldapConfig.ldap_enabled ? "bg-indigo-600" : "bg-slate-800"
                )}
               >
                 <span className={cn(
                   "inline-block h-5 w-5 transform rounded-full bg-white transition-transform duration-300",
                   ldapConfig.ldap_enabled ? "translate-x-6" : "translate-x-1"
                 )} />
               </button>
               <span className={cn("text-[10px] font-black px-3 transition-colors", ldapConfig.ldap_enabled ? "text-indigo-400" : "text-slate-600")}>LDAP Active</span>
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-8">
            <div className="space-y-6">
              <div className="grid sm:grid-cols-2 gap-4">
                 <div className="space-y-1.5">
                    <label className="text-[10px] font-black text-slate-500 px-1">Server URI</label>
                    <div className="relative flex items-center">
                      <Server className="absolute left-4 text-slate-600" size={14} />
                      <input 
                        type="text"
                        placeholder="ldap://192.168.1.10:389"
                        value={ldapConfig.server_uri}
                        onChange={(e) => setLdapConfig({ ...ldapConfig, server_uri: e.target.value })}
                        className="w-full bg-slate-950 border border-slate-800 rounded-2xl py-3 pl-10 pr-4 text-sm text-white outline-none focus:border-indigo-500/30 transition-all font-mono"
                      />
                    </div>
                 </div>
                 <div className="space-y-1.5">
                    <label className="text-[10px] font-black text-slate-500 px-1">Base DN</label>
                    <input 
                      type="text"
                      placeholder="dc=example,dc=com"
                      value={ldapConfig.base_dn}
                      onChange={(e) => setLdapConfig({ ...ldapConfig, base_dn: e.target.value })}
                      className="w-full bg-slate-950 border border-slate-800 rounded-2xl py-3 px-4 text-sm text-white outline-none focus:border-indigo-500/30 transition-all font-mono"
                    />
                 </div>
              </div>

              <div className="space-y-1.5">
                  <label className="text-[10px] font-black text-slate-500 px-1">User Template (LDAP query path)</label>
                  <input 
                    type="text"
                    placeholder="cn={username},ou=people,dc=example,dc=com"
                    value={ldapConfig.user_template}
                    onChange={(e) => setLdapConfig({ ...ldapConfig, user_template: e.target.value })}
                    className="w-full bg-slate-950 border border-slate-800 rounded-2xl py-3 px-4 text-sm text-white outline-none focus:border-indigo-500/30 transition-all font-mono"
                  />
              </div>

              <div className="space-y-1.5">
                  <label className="text-[10px] font-black text-slate-500 px-1">Groups DN (Search base for groups)</label>
                  <input 
                    type="text"
                    placeholder="ou=groups,dc=example,dc=com"
                    value={ldapConfig.groups_dn}
                    onChange={(e) => setLdapConfig({ ...ldapConfig, groups_dn: e.target.value })}
                    className="w-full bg-slate-950 border border-slate-800 rounded-2xl py-3 px-4 text-sm text-white outline-none focus:border-indigo-500/30 transition-all font-mono"
                  />
              </div>

              <div className="grid sm:grid-cols-2 gap-4">
                 <div className="space-y-1.5">
                    <label className="text-[10px] font-black text-slate-500 px-1">Admin Security Group</label>
                    <input 
                      type="text"
                      placeholder="inventory_admins"
                      value={ldapConfig.role_mappings?.find((m: any) => m.role === 'admin')?.group || ''}
                      onChange={(e) => {
                        const newMappings = [...(ldapConfig.role_mappings || [])];
                        const idx = newMappings.findIndex((m: any) => m.role === 'admin');
                        if (idx >= 0) newMappings[idx] = { ...newMappings[idx], group: e.target.value };
                        else newMappings.push({ role: 'admin', group: e.target.value });
                        setLdapConfig({ ...ldapConfig, role_mappings: newMappings });
                      }}
                      className="w-full bg-slate-950 border border-slate-800 rounded-2xl py-3 px-4 text-sm text-white outline-none focus:border-indigo-500/30 transition-all font-mono"
                    />
                 </div>
                 <div className="space-y-1.5">
                    <label className="text-[10px] font-black text-slate-500 px-1">User Security Group</label>
                    <input 
                      type="text"
                      placeholder="inventory_users"
                      value={ldapConfig.role_mappings?.find((m: any) => m.role === 'user')?.group || ''}
                      onChange={(e) => {
                        const newMappings = [...(ldapConfig.role_mappings || [])];
                        const idx = newMappings.findIndex((m: any) => m.role === 'user');
                        if (idx >= 0) newMappings[idx] = { ...newMappings[idx], group: e.target.value };
                        else newMappings.push({ role: 'user', group: e.target.value });
                        setLdapConfig({ ...ldapConfig, role_mappings: newMappings });
                      }}
                      className="w-full bg-slate-950 border border-slate-800 rounded-2xl py-3 px-4 text-sm text-white outline-none focus:border-indigo-500/30 transition-all font-mono"
                    />
                 </div>
              </div>
            </div>

            <div className="space-y-6 flex flex-col justify-between">
               <div className="bg-indigo-500/5 border border-indigo-500/10 rounded-3xl p-6 space-y-4">
                  <div className="flex items-center gap-3">
                    <Wifi className={cn("transition-colors", ldapConfig.ldap_enabled ? "text-indigo-400" : "text-slate-700")} size={20} />
                    <h3 className="text-sm font-black text-slate-300">Synchronization Shield</h3>
                  </div>
                  <p className="text-xs text-slate-500 leading-relaxed font-bold">
                    Enabling LDAP will allow users from your network domain to log in using their enterprise credentials. 
                    Local account passwords will still function as a fail-safe backup.
                  </p>
                  <div className="flex items-center justify-between gap-4 pt-2">
                     <div className="flex items-center gap-2">
                        <Shield size={14} className={cn("transition-colors", ldapConfig.use_tls ? "text-green-400" : "text-slate-600")} />
                        <span className="text-[10px] font-black text-slate-400">LDAPS / TLS Encryption</span>
                     </div>
                     <button 
                      onClick={() => setLdapConfig({ ...ldapConfig, use_tls: !ldapConfig.use_tls })}
                      className={cn(
                        "relative inline-flex h-6 w-10 items-center rounded-full transition-all duration-300 outline-none",
                        ldapConfig.use_tls ? "bg-green-600" : "bg-slate-800"
                      )}
                     >
                       <span className={cn(
                         "inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-300",
                         ldapConfig.use_tls ? "translate-x-5" : "translate-x-1"
                       )} />
                     </button>
                  </div>

                  {ldapConfig.use_tls && (
                    <div className="flex items-center justify-between gap-4 pt-1 animate-in fade-in slide-in-from-top-1 duration-300">
                       <div className="flex items-center gap-2">
                          <ShieldAlert size={14} className={cn("transition-colors", ldapConfig.ignore_cert ? "text-amber-400" : "text-slate-600")} />
                          <span className="text-[10px] font-black text-slate-400 italic">Ignore Certificate Validation (Self-signed)</span>
                       </div>
                       <button 
                        onClick={() => setLdapConfig({ ...ldapConfig, ignore_cert: !ldapConfig.ignore_cert })}
                        className={cn(
                          "relative inline-flex h-6 w-10 items-center rounded-full transition-all duration-300 outline-none",
                          ldapConfig.ignore_cert ? "bg-amber-600" : "bg-slate-800"
                        )}
                       >
                         <span className={cn(
                           "inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-300",
                           ldapConfig.ignore_cert ? "translate-x-5" : "translate-x-1"
                         )} />
                       </button>
                    </div>
                  )}
               </div>

               <div className="flex gap-3 pt-2">
                 <button 
                  onClick={handleTestLdap}
                  disabled={testingLdap}
                  className="flex-1 bg-slate-950 border border-slate-800 hover:border-indigo-500/50 text-slate-400 hover:text-white font-black text-xs py-4 rounded-2xl transition-all active:scale-95 disabled:opacity-50 flex items-center justify-center gap-2"
                 >
                   {testingLdap ? <div className="w-3 h-3 border-2 border-indigo-500 border-t-transparent animate-spin rounded-full" /> : <WifiOff size={14} />}
                   Test Connection
                 </button>
                 <button 
                  onClick={handleUpdateLdap}
                  className="flex-[1.5] bg-indigo-600 hover:bg-indigo-500 text-white font-black text-xs py-4 rounded-2xl shadow-xl shadow-indigo-500/20 transition-all active:scale-95"
                 >
                   Save Enterprise Settings
                 </button>
               </div>
            </div>
          </div>
        </section>

        {/* AI Configuration Section */}
        <section className="glass-card p-6 md:p-8 rounded-[2.5rem] md:rounded-[3rem] space-y-8">
           <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6 px-2">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-purple-500/10 rounded-2xl text-purple-500 border border-purple-500/20">
                <Brain size={24} />
              </div>
              <div>
                <h2 className="text-xl font-black text-white">AI Vision Intelligence</h2>
                <p className="text-xs text-slate-500 font-bold mt-1">Configure extraction prompts and heuristic models</p>
              </div>
            </div>
            <button 
              onClick={handleUpdatePrompt}
              disabled={isSavingPrompt}
              className="bg-purple-600 hover:bg-purple-500 text-white font-black text-xs px-6 py-3 rounded-xl shadow-xl shadow-purple-500/20 transition-all active:scale-95 disabled:opacity-50 flex items-center gap-2"
            >
              {isSavingPrompt ? <div className="w-3 h-3 border-2 border-white border-t-transparent animate-spin rounded-full" /> : <Edit2 size={14} />}
              Save AI Prompt
            </button>
          </div>

          <div className="space-y-4">
             <div className="flex items-center gap-2 px-1">
                <FileText size={14} className="text-purple-400" />
                <label className="text-xs font-black text-slate-300">Global Extraction Prompt</label>
             </div>
             <textarea 
               value={aiPrompt}
               onChange={(e) => setAiPrompt(e.target.value)}
               placeholder="Enter the AI system prompt for label extraction..."
               className="w-full bg-slate-950/80 border border-slate-800 rounded-3xl p-6 text-sm text-slate-300 font-mono leading-relaxed min-h-[300px] outline-none focus:border-purple-500/30 transition-all custom-scrollbar"
             />
             <div className="bg-purple-500/5 border border-purple-500/10 p-5 rounded-2xl">
                <p className="text-[10px] text-slate-500 leading-relaxed font-bold italic">
                  Tip: Use specific instructions like "Return ONLY valid JSON" to ensure consistent results. 
                  Reference fields: <span className="text-purple-400/80">Item, Type, Description, Category, Connector, Size, Color, PartNr, OCR</span>.
                </p>
             </div>
          </div>
        </section>

        {/* Category Management Section */}
        <section className="glass-card p-6 md:p-8 rounded-[2.5rem] md:rounded-[3rem] space-y-8">
          <div className="flex items-center justify-between px-2">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-primary/10 rounded-2xl text-primary border border-primary/20">
                <Layers size={24} />
              </div>
              <div>
                <h2 className="text-xl font-black text-white">Category Groups</h2>
                <p className="text-xs text-slate-500 font-bold mt-1">Classify inventory items into logical clusters</p>
              </div>
            </div>
            <button 
              onClick={handleAddCategory}
              className="flex items-center justify-center gap-2 bg-primary/10 hover:bg-primary text-primary hover:text-white font-black text-xs px-5 py-2.5 rounded-xl transition-all border border-primary/20 active:scale-95"
            >
              <Plus size={14} /> Add New Group
            </button>
          </div>
          
          <div className="bg-slate-950/40 border border-slate-800/50 rounded-2xl overflow-hidden shadow-xl divide-y divide-slate-800/50">
            {loading ? (
              <div className="p-8 text-center animate-pulse text-slate-600 text-xs font-black">Loading Categories...</div>
            ) : (
              categories.map(cat => (
                <div key={cat.id} className="flex items-center justify-between p-4 hover:bg-slate-800/30 transition-all group">
                  <div className="flex items-center gap-4 min-w-0 flex-1">
                    <div className="p-2.5 bg-slate-800 text-slate-500 rounded-xl border border-slate-700 shadow-inner group-hover:text-primary group-hover:bg-primary/5 transition-all shrink-0">
                      <Layers size={16} />
                    </div>
                    <div className="min-w-0 flex-1">
                      <p className="text-sm font-bold text-white group-hover:text-primary transition-colors truncate">{cat.name}</p>
                      <p className="text-[10px] text-slate-500 font-medium truncate opacity-60">
                        {cat.description || 'General Purpose Group'}
                      </p>
                    </div>
                  </div>
                  
                  <div className="flex items-center gap-1 ml-4 pr-2">
                    <button 
                      onClick={() => {
                        setEditingCategory(cat);
                        setEditCatForm({ name: cat.name, description: cat.description || '' });
                      }}
                      className="p-2.5 bg-slate-800/50 hover:bg-slate-700 text-slate-400 hover:text-white rounded-lg transition-all border border-slate-800"
                    >
                      <Edit2 size={14} />
                    </button>
                    <button 
                       onClick={() => handleDeleteCategory(cat.id, cat.name)}
                       className="p-2.5 bg-rose-500/5 hover:bg-rose-500 text-rose-500 hover:text-white rounded-lg transition-all border border-rose-500/10"
                    >
                       <Trash2 size={14} />
                    </button>
                  </div>
                </div>
              ))
            )}
            {categories.length === 0 && !loading && (
              <div className="p-8 text-center text-slate-600 text-[10px] font-black italic">
                No categories defined
              </div>
            )}
          </div>
        </section>

        {/* System Integrity (Compacted and left-aligned) */}
        <section className="bg-slate-900/30 border border-slate-800/40 p-5 px-8 rounded-3xl flex items-center justify-between gap-6 shadow-sm">
          <div className="flex items-center gap-5 min-w-0 flex-1">
            <div className="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center text-primary border border-primary/20 shrink-0">
              <Database size={20} />
            </div>
            <div className="min-w-0 flex-1">
              <h3 className="text-sm font-black text-white">System Integrity</h3>
              <p className="text-[10px] text-slate-500 mt-0.5 max-w-xl truncate">
                Hybrid storage model active. Real-time synchronization between local memory and cloud-hosted SQLite instance.
              </p>
            </div>
          </div>
          <div className="flex items-center gap-6 divide-x divide-slate-800/50">
            <div className="flex flex-col items-end">
              <span className="text-[8px] font-black text-slate-500 uppercase tracking-widest">Storage Status</span>
              <div className="flex items-center gap-2 mt-1">
                <div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.3)]" />
                <span className="text-[10px] font-black text-green-500 tracking-tight">Online</span>
              </div>
            </div>
            <div className="pl-6">
              <StatCard label="Local Archives" value={dbStats.backup_count} icon={Database} />
            </div>
          </div>
        </section>

        {/* Database & Continuity Card */}
        <section className="glass-card p-6 md:p-8 rounded-[2.5rem] md:rounded-[3rem] space-y-8">
           <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6 px-2">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-amber-500/10 rounded-2xl text-amber-500 border border-amber-500/20">
                <HardDrive size={24} />
              </div>
              <div>
                <h2 className="text-xl font-black text-white">Database & Continuity</h2>
                <p className="text-xs text-slate-500 font-bold mt-1">Snapshot management and disaster recovery tools</p>
              </div>
            </div>
            <div className="flex items-center gap-3">
               <button 
                 onClick={handleExportDb}
                 className="flex items-center justify-center gap-2 bg-slate-800 hover:bg-slate-700 text-slate-300 font-black text-xs px-5 py-3 rounded-xl transition-all border border-slate-700 active:scale-95"
                 title="Download current database as .db file"
               >
                 <Download size={14} /> Export
               </button>
               <label className="flex items-center justify-center gap-2 bg-slate-800 hover:bg-rose-900/20 text-slate-300 hover:text-rose-400 font-black text-xs px-5 py-3 rounded-xl transition-all border border-slate-700 hover:border-rose-500/30 cursor-pointer active:scale-95">
                 <Upload size={14} /> Import
                 <input 
                   type="file" 
                   accept=".db,.sqlite,.sqlite3" 
                   className="hidden" 
                   onChange={handleImportDb}
                   disabled={isImporting}
                 />
               </label>
               <div className="w-px h-8 bg-slate-800 mx-2" />
               <button 
                 onClick={handleCreateBackup}
                 disabled={isBackingUp}
                 className="group flex items-center justify-center gap-2 bg-amber-500/10 hover:bg-amber-500 text-amber-500 hover:text-white font-black text-xs px-6 py-3 rounded-xl transition-all border border-amber-500/20 active:scale-95 disabled:opacity-50"
               >
                 {isBackingUp ? (
                   <div className="w-3 h-3 border-2 border-current border-t-transparent animate-spin rounded-full" />
                 ) : (
                   <Download size={14} className="group-hover:-translate-y-0.5 transition-transform" />
                 )}
                 Snapshot
               </button>
            </div>
          </div>

          <div className="grid lg:grid-cols-3 gap-6">
             {/* Scheduling Configuration */}
             <div className="lg:col-span-1 space-y-6">
                <div className="p-6 bg-slate-950/40 border border-slate-800/50 rounded-3xl space-y-6">
                  <div className="flex items-center gap-2 text-amber-500/80">
                    <Clock size={16} />
                    <span className="text-xs font-black">Retention & Automation</span>
                  </div>

                  <div className="space-y-4">
                    <div className="space-y-1.5">
                      <label className="text-[10px] font-black text-slate-500 px-1">Retention Limit (Max Files)</label>
                      <input 
                        type="number"
                        value={dbSettings.retention_count}
                        onChange={(e) => handleUpdateDbSettings({ ...dbSettings, retention_count: parseInt(e.target.value) || 1 })}
                        className="w-full bg-slate-900 border border-slate-800 rounded-xl py-2 px-4 text-sm text-white outline-none focus:border-amber-500/30 transition-all font-mono"
                      />
                    </div>

                    <div className="grid grid-cols-2 gap-3">
                      <div className="space-y-1.5">
                        <label className="text-[10px] font-black text-slate-500 px-1">Backup Hour</label>
                        <select 
                          value={dbSettings.schedule_hour}
                          onChange={(e) => handleUpdateDbSettings({ ...dbSettings, schedule_hour: parseInt(e.target.value) })}
                          className="w-full bg-slate-900 border border-slate-800 rounded-xl py-2 px-3 text-sm text-white outline-none focus:border-amber-500/30 transition-all appearance-none"
                        >
                          {Array.from({ length: 24 }).map((_, i) => (
                            <option key={i} value={i}>{String(i).padStart(2, '0')}:00</option>
                          ))}
                        </select>
                      </div>
                      <div className="space-y-1.5">
                        <label className="text-[10px] font-black text-slate-500 px-1">Frequency (Days)</label>
                        <select 
                          value={dbSettings.schedule_freq_days}
                          onChange={(e) => handleUpdateDbSettings({ ...dbSettings, schedule_freq_days: parseInt(e.target.value) })}
                          className="w-full bg-slate-900 border border-slate-800 rounded-xl py-2 px-3 text-sm text-white outline-none focus:border-amber-500/30 transition-all appearance-none"
                        >
                          <option value={1}>Daily</option>
                          <option value={2}>Every 2 days</option>
                          <option value={3}>Every 3 days</option>
                          <option value={5}>Every 5 days</option>
                          <option value={7}>Weekly</option>
                          <option value={14}>Bi-weekly</option>
                          <option value={30}>Monthly</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  
                  <div className="pt-2">
                    <p className="text-[10px] text-slate-500 italic leading-relaxed px-1">
                      Automated backups are stored in <code className="text-amber-500/60 font-mono">/data/backups</code>. Restoring data will overwrite the current live primary database.
                    </p>
                  </div>
                </div>
             </div>

             {/* Backup History List */}
             <div className="lg:col-span-2">
                <div className="bg-slate-950/40 border border-slate-800/50 rounded-3xl overflow-hidden shadow-xl flex flex-col h-full max-h-[400px]">
                  <div className="px-5 py-3 border-b border-slate-800/50 bg-slate-900/20 flex items-center justify-between">
                    <span className="text-xs font-black text-slate-400">Available Snapshots</span>
                    <span className="text-[10px] font-bold text-slate-500">Sorted by newest</span>
                  </div>
                  <div className="overflow-y-auto flex-1 divide-y divide-slate-800/50 custom-scrollbar">
                    {backups.length === 0 ? (
                      <div className="p-12 text-center text-slate-600 italic text-xs font-bold">No backups available on disk</div>
                    ) : (
                      backups.map((b) => (
                        <div key={b.filename} className="flex items-center justify-between p-4 hover:bg-slate-800/20 transition-all group">
                          <div className="flex items-center gap-4 min-w-0">
                            <div className="p-2.5 bg-slate-800 rounded-xl text-slate-500 group-hover:text-amber-500 transition-colors shrink-0">
                               <History size={16} />
                            </div>
                            <div className="min-w-0">
                              <p className="text-sm font-bold text-slate-200 truncate">{b.filename}</p>
                              <div className="flex items-center gap-3 mt-0.5">
                                <span className="text-[10px] font-black text-slate-500">{new Date(b.created_at).toLocaleString()}</span>
                                <span className="text-[10px] font-black text-amber-500/40">{formatSize(b.size_bytes)}</span>
                              </div>
                            </div>
                          </div>
                          <button 
                            onClick={() => handleRestore(b.filename)}
                            className="flex items-center gap-2 bg-slate-800 hover:bg-amber-600 text-slate-400 hover:text-white px-3 py-2 rounded-xl text-[10px] font-black transition-all border border-slate-700 hover:border-amber-500"
                          >
                            <RotateCcw size={12} />
                            Restore
                          </button>
                        </div>
                      ))
                    )}
                  </div>
                </div>
             </div>
          </div>
        </section>


        {/* Edit User Modal */}
        {editingUser && (
          <div className="fixed inset-0 z-[100] 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-md w-full shadow-2xl space-y-8">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <div className="p-3 bg-primary/10 rounded-xl text-primary border border-primary/20">
                    <User size={20} />
                  </div>
                  <h3 className="text-xl font-black text-white tracking-tight">Edit Profile</h3>
                </div>
                <button onClick={() => setEditingUser(null)} className="p-2 hover:bg-slate-800 rounded-lg text-slate-500 transition-colors">
                  <X size={20} />
                </button>
              </div>

              <div className="space-y-6">
                <div className="space-y-2">
                  <label className="text-xs font-black text-slate-500 px-1">Username</label>
                  <input 
                    type="text"
                    disabled={editingUser.username === 'Admin'}
                    value={editUserForm.username}
                    onChange={(e) => setEditUserForm({ ...editUserForm, username: e.target.value })}
                    className="w-full bg-slate-950 border border-slate-800 focus:border-primary rounded-2xl py-4 px-5 text-white outline-none transition-all disabled:opacity-50"
                  />
                  {editingUser.username === 'Admin' && <p className="text-xs text-amber-500/60 font-bold px-1 italic">Default Admin name is protected</p>}
                </div>

                <div className="space-y-2">
                  <label className="text-xs font-black text-slate-500 px-1">New Password (leave empty to keep current)</label>
                  <input 
                    type="password"
                    placeholder="••••••••"
                    value={editUserForm.password}
                    onChange={(e) => setEditUserForm({ ...editUserForm, password: e.target.value })}
                    className="w-full bg-slate-950 border border-slate-800 focus:border-primary rounded-2xl py-4 px-5 text-white/50 focus:text-white outline-none transition-all placeholder:text-slate-800"
                  />
                </div>

                <div className="space-y-2">
                  <label className="text-xs font-black text-slate-500 px-1">Access Role</label>
                  <div className="relative flex items-center">
                    <select 
                      value={editUserForm.role}
                      onChange={(e) => setEditUserForm({ ...editUserForm, role: e.target.value })}
                      className="w-full bg-slate-950 border border-slate-800 focus:border-primary rounded-2xl py-4 px-5 text-white outline-none transition-all appearance-none"
                    >
                      <option value="user">USER (Standard)</option>
                      <option value="admin">ADMIN (Root Access)</option>
                    </select>
                    <ChevronDown size={20} className="absolute right-5 text-slate-500 pointer-events-none" />
                  </div>
                </div>

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

        {/* Edit Category Modal */}
        {editingCategory && (
          <div className="fixed inset-0 z-[100] 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-md w-full shadow-2xl space-y-8">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <div className="p-3 bg-primary/10 rounded-xl text-primary border border-primary/20">
                    <Tag size={20} />
                  </div>
                  <h3 className="text-xl font-black text-white tracking-tight">Edit Group</h3>
                </div>
                <button onClick={() => setEditingCategory(null)} className="p-2 hover:bg-slate-800 rounded-lg text-slate-500 transition-colors">
                  <X size={20} />
                </button>
              </div>

              <div className="space-y-6">
                <div className="space-y-2">
                  <label className="text-xs font-black text-slate-500 px-1">Group Name</label>
                  <input 
                    type="text"
                    value={editCatForm.name}
                    onChange={(e) => setEditCatForm({ ...editCatForm, name: e.target.value })}
                    className="w-full bg-slate-950 border border-slate-800 focus:border-primary rounded-2xl py-4 px-5 text-white outline-none transition-all"
                  />
                </div>

                <div className="space-y-2">
                  <label className="text-xs font-black text-slate-500 px-1">Description</label>
                  <textarea 
                    value={editCatForm.description}
                    onChange={(e) => setEditCatForm({ ...editCatForm, description: e.target.value })}
                    className="w-full bg-slate-950 border border-slate-800 focus:border-primary rounded-2xl py-4 px-5 text-white outline-none transition-all h-32 resize-none"
                  />
                </div>

                <button 
                  onClick={handleUpdateCategorySubmit}
                  className="w-full bg-primary text-white font-black py-5 rounded-2xl shadow-xl shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all"
                >
                  Save Group Changes
                </button>
              </div>
            </div>
          </div>
        )}
      </main>
    </PageShell>
  );
}