"use client";

import React, { type FormEvent, useState } from "react";
import type { CreateRoomInput, FloorDto, RoomDto } from "../types";
import { FormModal } from "./form-modal";

interface RoomModalProps {
  floors: FloorDto[];
  initialRoom?: RoomDto;
  initialValues?: Partial<CreateRoomInput>;
  isSaving: boolean;
  onClose: () => void;
  onDelete?: () => void;
  onSave: (input: CreateRoomInput) => Promise<void>;
}

export function RoomModal({
  floors,
  initialRoom,
  initialValues,
  isSaving,
  onClose,
  onDelete,
  onSave,
}: RoomModalProps) {
  const [roomNumber, setRoomNumber] = useState(
    initialRoom?.roomNumber ?? initialValues?.roomNumber ?? ""
  );
  const [roomName, setRoomName] = useState(
    initialRoom?.roomName ?? initialValues?.roomName ?? ""
  );
  const [floorId, setFloorId] = useState(
    initialRoom?.floorId ?? initialValues?.floorId ?? ""
  );

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!roomNumber.trim() || !roomName.trim()) return;
    await onSave({
      floorId: floorId || undefined,
      roomNumber: roomNumber.trim(),
      roomName: roomName.trim(),
    });
  }

  return (
    <FormModal
      isSaving={isSaving}
      onClose={onClose}
      onSubmit={handleSubmit}
      submitDisabled={!roomNumber.trim() || !roomName.trim()}
      submitLabel={initialRoom ? "Änderungen speichern" : "Raum anlegen"}
      title={initialRoom ? "Raum bearbeiten" : "Raum hinzufügen"}
    >
      <div className="row g-3">
        <div className="col-12 col-md-4">
          <label className="form-label" htmlFor="room-number">Raumnummer</label>
          <input
            autoFocus
            className="form-control"
            id="room-number"
            onChange={(event) => setRoomNumber(event.target.value)}
            required
            value={roomNumber}
          />
        </div>
        <div className="col-12 col-md-8">
          <label className="form-label" htmlFor="room-name">Raumname</label>
          <input
            className="form-control"
            id="room-name"
            onChange={(event) => setRoomName(event.target.value)}
            required
            value={roomName}
          />
        </div>
        <div className="col-12">
          <label className="form-label" htmlFor="room-floor">Etage</label>
          <select
            className="form-select"
            id="room-floor"
            onChange={(event) => setFloorId(event.target.value)}
            value={floorId}
          >
            <option value="">Ohne Etage</option>
            {floors.map((floor) => <option key={floor.id} value={floor.id}>{floor.name}</option>)}
          </select>
        </div>
      </div>
      {initialRoom && onDelete ? (
        <div className="border-top mt-4 pt-3">
          <p className="text-secondary small mb-2">
            In Stromkreisen verwendete Räume können nicht gelöscht werden.
          </p>
          <button
            className="btn btn-outline-danger"
            disabled={isSaving}
            onClick={onDelete}
            type="button"
          >
            Raum löschen
          </button>
        </div>
      ) : null}
    </FormModal>
  );
}