discord-rpg-concept/web/src/components/ControlPanel.tsx

import { useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
import { Button } from "./ui/button";
import { RefreshCw, Trash2, ShieldAlert, Loader2, Power } from "lucide-react";

/**
 * Props for the ControlPanel component
 */
interface ControlPanelProps {
    maintenanceMode: boolean;
}

/**
 * ControlPanel component provides quick administrative actions for the bot.
 * Integrated with the premium glassmorphic theme.
 */
export function ControlPanel({ maintenanceMode }: ControlPanelProps) {
    const [loading, setLoading] = useState<string | null>(null);

    /**
     * Handles triggering an administrative action via the API
     */
    const handleAction = async (action: string, payload?: Record<string, unknown>) => {
        setLoading(action);
        try {
            const response = await fetch(`/api/actions/${action}`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: payload ? JSON.stringify(payload) : undefined,
            });
            if (!response.ok) throw new Error(`Action ${action} failed`);
        } catch (error) {
            console.error("Action Error:", error);
            // Ideally we'd show a toast here
        } finally {
            setLoading(null);
        }
    };

    return (
        <Card className="glass border-white/5 overflow-hidden group">
            <CardHeader className="relative">
                <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                    <ShieldAlert className="h-12 w-12" />
                </div>
                <CardTitle className="text-xl font-bold flex items-center gap-2">
                    <div className="h-5 w-1 bg-primary rounded-full" />
                    System Controls
                </CardTitle>
                <CardDescription className="text-white/40">Administrative bot operations</CardDescription>
            </CardHeader>
            <CardContent className="grid grid-cols-1 gap-4">
                <div className="grid grid-cols-2 gap-4">
                    {/* Reload Commands Button */}
                    <Button
                        variant="outline"
                        className="glass hover:bg-white/10 border-white/10 hover:border-primary/50 flex flex-col items-start gap-2 h-auto py-4 px-4 transition-all group/btn"
                        onClick={() => handleAction("reload-commands")}
                        disabled={!!loading}
                    >
                        <div className="p-2 rounded-lg bg-primary/10 text-primary group-hover/btn:scale-110 transition-transform">
                            {loading === "reload-commands" ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
                        </div>
                        <div className="space-y-0.5 text-left">
                            <p className="text-sm font-bold">Reload</p>
                            <p className="text-[10px] text-white/30">Sync commands</p>
                        </div>
                    </Button>

                    {/* Clear Cache Button */}
                    <Button
                        variant="outline"
                        className="glass hover:bg-white/10 border-white/10 hover:border-blue-500/50 flex flex-col items-start gap-2 h-auto py-4 px-4 transition-all group/btn"
                        onClick={() => handleAction("clear-cache")}
                        disabled={!!loading}
                    >
                        <div className="p-2 rounded-lg bg-blue-500/10 text-blue-500 group-hover/btn:scale-110 transition-transform">
                            {loading === "clear-cache" ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
                        </div>
                        <div className="space-y-0.5 text-left">
                            <p className="text-sm font-bold">Flush</p>
                            <p className="text-[10px] text-white/30">Clear caches</p>
                        </div>
                    </Button>
                </div>

                {/* Maintenance Mode Toggle Button */}
                <Button
                    variant="outline"
                    className={`glass flex items-center justify-between h-auto py-4 px-5 border-white/10 transition-all group/maint ${maintenanceMode
                        ? 'bg-red-500/10 border-red-500/50 hover:bg-red-500/20'
                        : 'hover:border-yellow-500/50 hover:bg-yellow-500/5'
                        }`}
                    onClick={() => handleAction("maintenance-mode", { enabled: !maintenanceMode, reason: "Dashboard toggle" })}
                    disabled={!!loading}
                >
                    <div className="flex items-center gap-4">
                        <div className={`p-2.5 rounded-full transition-all ${maintenanceMode ? 'bg-red-500 text-white animate-pulse shadow-[0_0_15px_rgba(239,68,68,0.4)]' : 'bg-white/5 text-white/40'
                            }`}>
                            {loading === "maintenance-mode" ? <Loader2 className="h-5 w-5 animate-spin" /> : <Power className="h-5 w-5" />}
                        </div>
                        <div className="text-left">
                            <p className="text-sm font-bold">Maintenance Mode</p>
                            <p className="text-[10px] text-white/30">
                                {maintenanceMode ? "Bot is currently restricted" : "Restrict bot access"}
                            </p>
                        </div>
                    </div>
                    <div className={`h-2 w-2 rounded-full ${maintenanceMode ? 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.5)]' : 'bg-white/10'}`} />
                </Button>
            </CardContent>
        </Card>
    );
}