import React, {useEffect, useRef, useState} from 'react';
import {Inertia} from '@inertiajs/inertia';
import {Head, router, usePage} from '@inertiajs/react';
import NewRoomModal from '@/Components/modals/NewRoomModal';
import EditRoomModal from '@/Components/modals/EditRoomModal';
import axios from "axios";
import {Toaster} from "react-hot-toast";
import AppLayout from "@/Layouts/AppLayout";
import BatchInfoWindow from "@/Components/BatchInfoWindow";

export default function StorageSetup() {
    const {rooms} = usePage<{ rooms: any[] }>().props;
    const [showNew, setShowNew] = useState(false);
    const [editingRoom, setEditingRoom] = useState<any>(null);


    // Modal ref
    const dialogRef = useRef<HTMLDialogElement>(null);
    const openModal = () => dialogRef.current?.showModal();
    const closeModal = () => dialogRef.current?.close();

    return (
        <AppLayout title="Storage setup" renderHeader={() => <h2 className="font-semibold text-xl">Storage setup</h2>}>
            <Head title="Storage setup"/>
            <Toaster position="top-center"/>
            <div className="py-12">
                <div className="p-6">
                    <div className="flex justify-between items-center mb-4">
                        <h1 className="text-2xl font-bold">Rooms</h1>
                        <button onClick={() =>  {setShowNew(true); openModal();}} className="btn btn-primary">
                            + New Room
                        </button>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                        {rooms.map(room => (
                            <div
                                key={room.room_id}
                                className="card p-4 cursor-pointer hover:shadow"
                                onClick={() => {setEditingRoom(room); openModal();}}
                            >
                                <h2 className="text-lg font-medium">{room.room_name}</h2>
                                <p className="text-sm text-gray-500">{room.room_symbol}</p>
                            </div>
                        ))}
                        {rooms.length === 0 && (
                            <p className="italic text-gray-500">No rooms defined yet.</p>
                        )}
                    </div>
                </div>



                <dialog ref={dialogRef} className="modal">

                    {showNew && (
                        <NewRoomModal
                            onClose={() => {setShowNew(false); closeModal();}}
                            onSaved={() => {
                                Inertia.reload();
                                setShowNew(false);
                            }}
                        />
                    )}

                    {editingRoom && (
                        <EditRoomModal
                            room={editingRoom}
                            onClose={() => {setEditingRoom(null); closeModal();}}
                            onUpdated={() => {
                                Inertia.reload();
                                setEditingRoom(null);
                            }}
                        />
                    )}
                </dialog>
            </div>
        </AppLayout>
    );
}
