import React from "react";
import { useTranslation } from "react-i18next";

export default function RoomGrid({ rooms, onRoomClick }) {
  const { t } = useTranslation();

  const roomsByFloor = rooms.reduce((acc, room) => {
    const floor = room.floor ?? 1;
    if (!acc[floor]) acc[floor] = [];
    acc[floor].push(room);
    return acc;
  }, {});

  const sortedFloors = Object.keys(roomsByFloor)
    .map(Number)
    .sort((a, b) => a - b);

  return (
    <div>
      {sortedFloors.map((floor) => (
        <div key={floor} style={{ marginBottom: "var(--space-xl)" }}>
          <h3
            style={{
              color: "var(--text-secondary)",
              fontSize: "0.875rem",
              fontWeight: 600,
              textTransform: "uppercase",
              letterSpacing: "0.05em",
              marginBottom: "var(--space-md)",
            }}
          >
            {t("rooms.floor")} {floor}
          </h3>
          <div className="grid-5">
            {roomsByFloor[floor].map((room) => (
              <div
                key={room.id}
                className={`room-card ${room.status || "available"}`}
                onClick={() => onRoomClick(room)}
              >
                <div className="room-number">{room.room_number}</div>
                {room.guest_name && (
                  <div className="room-info">{room.guest_name}</div>
                )}
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    marginTop: "var(--space-sm)",
                  }}
                >
                  <span className={`badge badge-${room.status || "available"}`}>
                    {t(`rooms.${room.status || "available"}`)}
                  </span>
                  <span
                    style={{
                      color: "var(--accent-gold)",
                      fontSize: "0.8rem",
                      fontWeight: 600,
                    }}
                  >
                    ${room.cost_per_nigth}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}