EpicNext-Cms/src/app/admin/moderation/actions/mod-actions-client.tsx

"use client";

import { DoorOpen, Loader2, Megaphone, MessageSquare, Shield, Volume2, VolumeX, Zap } from "lucide-react";
import { useState } from "react";
import {
  broadcastAlert,
  quickAlert,
  quickKick,
  quickMute,
  quickRoomKick,
  quickUnmute,
} from "@/actions/moderation";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { useServerAction } from "@/hooks/use-server-action";

export function ModActionsClient() {
  const { run, isPending } = useServerAction();

  // User actions
  const [userId, setUserId] = useState("");
  const [muteDuration, setMuteDuration] = useState("10");
  const [alertMessage, setAlertMessage] = useState("");

  // Room actions
  const [roomId, setRoomId] = useState("");

  // Broadcast
  const [broadcastMsg, setBroadcastMsg] = useState("");

  const uid = parseInt(userId, 10);
  const rid = parseInt(roomId, 10);

  return (
    <div className="grid gap-6 lg:grid-cols-2">
      {/* User Actions */}
      <Card>
        <CardHeader>
          <CardTitle className="text-sm flex items-center gap-2">
            <Zap className="h-4 w-4 text-[var(--admin-warning)]" />
            User Actions
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <span className="text-xs text-muted-foreground mb-1 block">User ID</span>
            <Input
              type="number"
              value={userId}
              onChange={(e) => setUserId(e.target.value)}
              placeholder="Enter user ID"
            />
          </div>

          <div className="grid grid-cols-2 gap-2">
            <Button
              variant="destructive"
              size="sm"
              disabled={isPending || !uid}
              onClick={() => run(() => quickKick({ userId: uid }), { successMessage: "User disconnected" })}
            >
              {isPending ? (
                <Loader2 className="mr-1 h-3 w-3 animate-spin" />
              ) : (
                <Zap className="mr-1 h-3 w-3" />
              )}
              Kick / Disconnect
            </Button>
            <Button
              variant="outline"
              size="sm"
              disabled={isPending || !uid}
              onClick={() => run(() => quickUnmute({ userId: uid }), { successMessage: "User unmuted" })}
            >
              <Volume2 className="mr-1 h-3 w-3" /> Unmute
            </Button>
          </div>

          <div className="flex gap-2">
            <Input
              type="number"
              min={1}
              max={1440}
              value={muteDuration}
              onChange={(e) => setMuteDuration(e.target.value)}
              className="w-24"
              placeholder="Min"
            />
            <Button
              variant="outline"
              size="sm"
              className="flex-1"
              disabled={isPending || !uid || !parseInt(muteDuration, 10)}
              onClick={() =>
                run(() => quickMute({ userId: uid, duration: parseInt(muteDuration, 10) }), {
                  successMessage: `Muted for ${muteDuration} min`,
                })
              }
            >
              <VolumeX className="mr-1 h-3 w-3" /> Mute
            </Button>
          </div>

          <div className="flex gap-2">
            <Textarea
              value={alertMessage}
              onChange={(e) => setAlertMessage(e.target.value)}
              placeholder="Alert message to user..."
              rows={2}
              className="resize-none text-xs"
            />
            <Button
              variant="outline"
              size="sm"
              className="shrink-0 h-auto"
              disabled={isPending || !uid || !alertMessage.trim()}
              onClick={() => {
                run(() => quickAlert({ userId: uid, message: alertMessage.trim() }), {
                  successMessage: "Alert sent",
                  onSuccess: () => setAlertMessage(""),
                });
              }}
            >
              <MessageSquare className="h-4 w-4" />
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Room Actions */}
      <div className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle className="text-sm flex items-center gap-2">
              <DoorOpen className="h-4 w-4 text-[var(--admin-warning)]" />
              Room Actions
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div>
              <span className="text-xs text-muted-foreground mb-1 block">Room ID</span>
              <Input
                type="number"
                value={roomId}
                onChange={(e) => setRoomId(e.target.value)}
                placeholder="Enter room ID"
              />
            </div>
            <Button
              variant="destructive"
              size="sm"
              className="w-full"
              disabled={isPending || !rid}
              onClick={() =>
                run(() => quickRoomKick({ roomId: rid }), {
                  successMessage: "All users kicked from room",
                })
              }
            >
              <Zap className="mr-1 h-3 w-3" /> Kick All From Room
            </Button>
          </CardContent>
        </Card>

        {/* Broadcast */}
        <Card>
          <CardHeader>
            <CardTitle className="text-sm flex items-center gap-2">
              <Megaphone className="h-4 w-4 text-primary" />
              Broadcast Alert
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <Textarea
              value={broadcastMsg}
              onChange={(e) => setBroadcastMsg(e.target.value)}
              placeholder="Type broadcast message..."
              rows={3}
              className="resize-none"
            />
            <div className="grid grid-cols-2 gap-2">
              <Button
                size="sm"
                disabled={isPending || !broadcastMsg.trim()}
                onClick={() => {
                  run(() => broadcastAlert({ message: broadcastMsg.trim(), type: "hotel" }), {
                    successMessage: "Hotel alert sent!",
                    onSuccess: () => setBroadcastMsg(""),
                  });
                }}
              >
                <Megaphone className="mr-1 h-3 w-3" /> Hotel Alert
              </Button>
              <Button
                variant="secondary"
                size="sm"
                disabled={isPending || !broadcastMsg.trim()}
                onClick={() => {
                  run(() => broadcastAlert({ message: broadcastMsg.trim(), type: "staff" }), {
                    successMessage: "Staff alert sent!",
                    onSuccess: () => setBroadcastMsg(""),
                  });
                }}
              >
                <Shield className="mr-1 h-3 w-3" /> Staff Alert
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}