tfm_ainventory/frontend/components/AdminOverlay.tsx

'use client';

import { useState } from 'react';
import { X, Shield, UserPlus, User, Trash2, Tag, Plus, AlertTriangle, LogOut, Layers } from 'lucide-react';
import { inventoryApi } from '@/lib/api';
import { toast } from 'react-hot-toast';
import CreateUserModal from './CreateUserModal';

interface AdminOverlayProps {
  show: boolean;
  onClose: () => void;
  users: any[];
  categories: any[];
  onUpdateUsers: (users: any[]) => void;
  onUpdateCategories: (categories: any[]) => void;
}

export default function AdminOverlay({
  show,
  onClose,
  users,
  categories,
  onUpdateUsers,
  onUpdateCategories
}: AdminOverlayProps) {
  const [showCreateUserModal, setShowCreateUserModal] = useState(false);

  if (!show) return null;

  const handleUserCreated = () => {
    inventoryApi.getUsers().then(onUpdateUsers);
  };

  return (
    <>
      <CreateUserModal
        show={showCreateUserModal}
        onClose={() => setShowCreateUserModal(false)}
        onUserCreated={handleUserCreated}
      />
      <div className="fixed inset-0 z-50 bg-slate-950/60 animate-in fade-in duration-300">
      <div className="absolute inset-y-0 right-0 w-full max-w-md sm:max-w-lg md: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">System Admin</h2>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-slate-800 rounded-full transition-colors text-slate-500 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
            aria-label="Close"
          >
            <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-sm font-black text-slate-500">User Management</h3>
              <button
                onClick={() => setShowCreateUserModal(true)}
                className="flex items-center gap-1 text-xs font-black text-primary hover:underline focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1"
              >
                <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={`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-xs font-bold text-slate-500">{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(onUpdateUsers);
                            })
                            .catch(() => toast.error("Delete failed"));
                        }
                      }}
                      className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
                      aria-label={`Delete user ${u.username}`}
                    >
                      <Trash2 size={16} />
                    </button>
                  )}
                </div>
              ))}
            </div>
          </section>

          <section className="space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="text-sm font-black text-slate-500">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(onUpdateCategories);
                    })
                    .catch(() => toast.error("Failed to add category"));
                }}
                className="flex items-center gap-1 text-xs font-black text-primary 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-primary/10 rounded-lg text-primary">
                      <Layers size={16} />
                    </div>
                    <div>
                      <p className="text-sm font-bold text-white">{cat.name}</p>
                      <p className="text-xs 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(onUpdateCategories);
                           })
                           .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 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
                     aria-label={`Delete category ${cat.name}`}
                  >
                     <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-sm font-black">Logout</p>
            </div>
            <p className="text-xs text-slate-500">Exit current session and return to identity check.</p>
            <button
              onClick={() => {
                import('@/lib/auth').then(m => m.clearAuth());
                window.location.href = '/login';
              }}
              className="w-full bg-rose-500/10 hover:bg-rose-500/20 text-rose-500 border border-rose-500/20 font-black py-3 rounded-xl transition-all flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
            >
              <LogOut size={16} /> End Session
            </button>
          </section>
        </div>
      </div>
      </div>
    </>
  );
}