'use client'

import { Users, BarChart3, Settings, Trash2, ShieldCheck } from 'lucide-react';
import Link from 'next/link';

export default function AdminControlMenu() {
    return (
        <div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50">
            <div className="flex items-center gap-2 bg-wtihub-surface/80 backdrop-blur-md border border-wtihub-green/30 p-2 rounded-full shadow-[0_0_30px_rgba(0,200,150,0.15)]">

             {/* Status Indicator */}

             <div className="px-4 py-2 border-r border-wtihub-border flex items-center gap-2">
                <ShieldCheck className="w-4 h-4 text-wtihub-green" />
                <span className="text-[10px] font-black uppercase tracking-widest text-wtihub-green">
                    Admin Mode
                </span>
             </div>

             {/* Navigation Actions */}
             <nav className="flex items-center px-2">
                <AdminNavItem icon={<Users size={18} />} label="Manage Members" href="/users" />
                <AdminNavItem icon={<Settings size={18} />} label="System Settings" href="/settings" />
             </nav>
            </div>
        </div>
    );
}

function AdminNavItem({icon, label, href} : {icon: React.ReactNode, label: string, href: string}) {
    return (
        <Link
          href={href}
          className="p-3 text-gray-400 hover:text-wtihub-green transition-all relative group"
        >
            {icon}
            <span className="absolute -top-10 left-1/2 -translate-x-1/2 bg-wtihub-bg border border-wtihub-border px-2 py-1 rounded text-[10px] whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
              {label}
            </span>
        </Link>
    )
}