Epicnabbo-Catalogus-Updated-Daily/src/app/admin/rooms/[id]/room-edit-form.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { Loader2, Lock, LogOut, RefreshCw, Save, Trash2, Unlock } from "lucide-react";
import { useForm } from "react-hook-form";
import { deleteRoom, roomRconAction, updateRoom } from "@/actions/rooms";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { useServerAction } from "@/hooks/use-server-action";
import { type UpdateRoomInput, updateRoomSchema } from "@/lib/validators/room";

interface RoomEditFormProps {
  room: {
    id: number;
    name: string;
    description: string;
    state: string;
    usersMax: number;
    users: number;
    ownerName: string;
  };
}

export function RoomEditForm({ room }: RoomEditFormProps) {
  const { run, isPending } = useServerAction();
  const {
    register,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm<UpdateRoomInput>({
    resolver: zodResolver(updateRoomSchema),
    defaultValues: {
      name: room.name,
      description: room.description,
      state: room.state as "open" | "locked" | "password" | "invisible",
      usersMax: room.usersMax,
    },
  });

  function onSubmit(data: UpdateRoomInput) {
    run(() => updateRoom({ id: room.id, ...data }), {
      successMessage: "Room updated successfully.",
    });
  }

  function handleDelete() {
    if (!confirm("Are you sure you want to delete this room? This cannot be undone.")) return;
    run(() => deleteRoom({ id: room.id }), { redirectTo: "/admin/rooms" });
  }

  function handleRconAction(action: "kick" | "lock" | "unlock" | "reload") {
    run(() => roomRconAction({ roomId: room.id, action }), {
      successMessage: `Action "${action}" executed successfully.`,
      errorMessage: `Action "${action}" failed. Is the emulator running?`,
    });
  }

  return (
    <div className="space-y-4">
      <div className="grid gap-6 lg:grid-cols-2">
        {/* Edit Form */}
        <Card>
          <CardHeader>
            <CardTitle>Room Details</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="name">Name</Label>
                <Input id="name" {...register("name")} />
                {errors.name && <p className="text-sm text-destructive">{errors.name.message}</p>}
              </div>

              <div className="space-y-2">
                <Label htmlFor="description">Description</Label>
                <Textarea id="description" rows={3} {...register("description")} />
              </div>

              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label>State</Label>
                  <Select
                    defaultValue={room.state}
                    onValueChange={(v) =>
                      setValue("state", v as "open" | "locked" | "password" | "invisible")
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="open">Open</SelectItem>
                      <SelectItem value="locked">Locked</SelectItem>
                      <SelectItem value="password">Password</SelectItem>
                      <SelectItem value="invisible">Invisible</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="usersMax">Max Users</Label>
                  <Input id="usersMax" type="number" {...register("usersMax", { valueAsNumber: true })} />
                </div>
              </div>

              <div className="flex items-center gap-3">
                <Button type="submit" disabled={isPending}>
                  {isPending ? (
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  ) : (
                    <Save className="mr-2 h-4 w-4" />
                  )}
                  Save Changes
                </Button>
                <Button type="button" variant="destructive" onClick={handleDelete} disabled={isPending}>
                  <Trash2 className="mr-2 h-4 w-4" />
                  Delete Room
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>

        {/* RCON Actions */}
        <Card>
          <CardHeader>
            <CardTitle>Quick Actions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between text-sm">
              <span className="text-muted-foreground">Owner</span>
              <span className="font-medium">{room.ownerName}</span>
            </div>
            <div className="flex items-center justify-between text-sm">
              <span className="text-muted-foreground">Current Users</span>
              <Badge>
                {room.users} / {room.usersMax}
              </Badge>
            </div>
            <div className="flex items-center justify-between text-sm">
              <span className="text-muted-foreground">State</span>
              <Badge
                variant={
                  room.state === "open" ? "default" : room.state === "locked" ? "secondary" : "destructive"
                }
              >
                {room.state}
              </Badge>
            </div>

            <div className="border-t pt-4 space-y-2">
              <p className="text-sm font-medium">RCON Commands</p>
              <div className="grid grid-cols-2 gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => handleRconAction("kick")}
                  disabled={isPending}
                >
                  <LogOut className="mr-2 h-4 w-4" />
                  Kick All
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => handleRconAction("lock")}
                  disabled={isPending}
                >
                  <Lock className="mr-2 h-4 w-4" />
                  Lock
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => handleRconAction("unlock")}
                  disabled={isPending}
                >
                  <Unlock className="mr-2 h-4 w-4" />
                  Unlock
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => handleRconAction("reload")}
                  disabled={isPending}
                >
                  <RefreshCw className="mr-2 h-4 w-4" />
                  Reload
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}