Kuma/src/modules/rooms/ui/views/rooms-create-view.tsx

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import InputComponent from "@/src/components/layout/InputComponent";
import { Button } from "@/src/components/ui/button";
import { createRoom, updateRoom } from "../../actions/room-actions";
import { toast } from "sonner";
import { Room } from "../../types/room.types";
import { LayoutGrid, Trash2 } from "lucide-react";
import DeleteDialog from "@/src/components/layout/DeleteDialog";
import { useDeleteRoom } from "../../hooks/useDeleteRoom";
import FloorPlanEditor from "../components/floor-plan/FloorPlanEditor";
import {
  DEFAULT_ROOM_SIZE,
  floorPlanSchema,
  parseFloorPlan,
  type FloorPlan,
} from "../../lib/floor-plan";

interface RoomsCreateViewProps {
  mode?: "create" | "edit";
  roomId?: string;
  initialData?: Room;
}

const RoomsCreateView = ({ mode = "create", roomId, initialData }: RoomsCreateViewProps = {}) => {
  const router = useRouter();
  const [roomName, setRoomName] = useState(mode === "edit" ? initialData?.name || "" : "");
  const [floorPlan, setFloorPlan] = useState<FloorPlan>(
    () => parseFloorPlan(initialData?.floorPlan) ?? { ...DEFAULT_ROOM_SIZE, items: [] }
  );
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const {
    deleteDialogOpen,
    setDeleteDialogOpen,
    roomToDelete,
    setRoomToDelete,
    isDeleting,
    handleDeleteClick,
    handleDeleteConfirm,
  } = useDeleteRoom({
    onSuccess: () => router.push("/rooms"),
  });

  const validateForm = () => {
    const newErrors: Record<string, string> = {};

    if (!roomName.trim()) newErrors.name = "Raumname ist erforderlich";

    if (floorPlan.items.length > 0) {
      const plan = floorPlanSchema.safeParse(floorPlan);
      if (!plan.success)
        newErrors.floorPlan = plan.error.issues[0]?.message ?? "Ungültiger Grundriss";
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = async () => {
    if (!validateForm()) {
      toast.error("Bitte prüfen Sie Ihre Eingaben");
      return;
    }

    setIsSubmitting(true);

    try {
      const roomData = {
        name: roomName,
        floorPlan: floorPlan.items.length > 0 ? floorPlan : null,
      };

      if (mode === "edit" && !roomId) {
        throw new Error("Missing roomId in edit mode");
      }

      const result =
        mode === "edit" ? await updateRoom(roomId!, roomData) : await createRoom(roomData);

      if (result.success) {
        toast.success(result.message);
        router.push("/rooms");
      } else {
        toast.error(result.error || "Ein Fehler ist aufgetreten");
        if (result.fieldErrors) {
          const fieldErrors: Record<string, string> = {};
          Object.entries(result.fieldErrors).forEach(([key, value]) => {
            if (Array.isArray(value) && value.length > 0) {
              fieldErrors[key] = value[0];
            }
          });
          setErrors(fieldErrors);
        }
      }
    } catch (error) {
      toast.error("Ein unerwarteter Fehler ist aufgetreten");
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div>
      <div className="flex w-full items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">
            {mode === "edit" ? "Raum bearbeiten" : "Raum anlegen"}
          </h1>
          <p className="text-xl mt-2">
            {mode === "edit"
              ? "Ändern Sie Name und Grundriss und speichern Sie Ihre Änderungen"
              : "Alle Räume können nach dem Speichern angepasst oder gelöscht werden"}
          </p>
        </div>
        {mode === "edit" && (
          <Button variant="destructive" onClick={() => handleDeleteClick(roomId!, roomName)}>
            <Trash2 size={20} className="mb-1" /> Löschen
          </Button>
        )}
      </div>
      <div className="mt-6 flex flex-col gap-5 max-w-5xl">
        <div className="max-w-xl">
          <InputComponent
            isLabel
            label="Name"
            type="text"
            id="room-create-name"
            value={roomName}
            onChange={(e) => setRoomName(e.target.value)}
          />
          {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
        </div>

        <div className="border border-white/60 bg-white/60 backdrop-blur-xl rounded-2xl shadow-sm p-5 sm:p-6">
          <div className="flex items-start gap-2 mb-5">
            <div className="flex items-center justify-center size-8 shrink-0 rounded-lg bg-[#c9a84c]/10 text-[#c9a84c]">
              <LayoutGrid className="size-4" />
            </div>
            <div>
              <h2 className="text-base font-semibold text-gray-900">Grundriss (optional)</h2>
              <p className="text-sm text-gray-500 mt-0.5">
                Stellen Sie Reformer, Matten und andere Geräte so auf, wie sie im Raum stehen. Bei
                Kursen mit Platzwahl suchen sich Kunden ihr Gerät dann selbst aus.
              </p>
            </div>
          </div>
          <FloorPlanEditor value={floorPlan} onChange={setFloorPlan} />
          {errors.floorPlan && <p className="text-red-500 text-sm mt-2">{errors.floorPlan}</p>}
        </div>

        <div className="flex gap-2 pb-4">
          <Button onClick={handleSubmit} disabled={isSubmitting}>
            {isSubmitting
              ? "Wird gespeichert..."
              : mode === "edit"
                ? "Änderungen speichern"
                : "Raum erstellen"}
          </Button>
          <Button variant="outline" onClick={() => router.push("/rooms")} disabled={isSubmitting}>
            Abbrechen
          </Button>
        </div>
      </div>

      <DeleteDialog
        open={deleteDialogOpen}
        onOpenChange={(open) => {
          setDeleteDialogOpen(open);
          if (!open) setRoomToDelete(null);
        }}
        itemName={roomToDelete?.name}
        topicName="Raum"
        onConfirm={handleDeleteConfirm}
        isLoading={isDeleting}
      />
    </div>
  );
};

export default RoomsCreateView;