"use client";

import { useState } from "react";
import Link from "next/link";

interface RoomProps {
  id: string;
  title: string;
  price: number | string;
  images: string[];
}

export default function InnerRoomSlider({ room }: { room: RoomProps }) {
  const [currentIndex, setCurrentIndex] = useState(0);
  // Ensure we always have an array even if the DB returned an empty or malformed one
  const safeImages = Array.isArray(room.images) && room.images.length > 0 ? room.images : ["/placeholder.jpg"];

  const nextImage = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setCurrentIndex((prev) => (prev + 1) % safeImages.length);
  };

  const prevImage = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setCurrentIndex((prev) => (prev - 1 + safeImages.length) % safeImages.length);
  };

  return (
    <div className="room-card glass" style={{ borderRadius: "1rem", overflow: "hidden", display: "flex", flexDirection: "column", height: "100%" }}>
      {/* Image Slider Area */}
      <div style={{ position: "relative", height: "250px", overflow: "hidden", flexShrink: 0 }}>
        {safeImages.map((img, idx) => (
          <div 
            key={idx}
            style={{ 
              position: "absolute",
              top: 0,
              left: 0,
              width: "100%",
              height: "100%", 
              backgroundImage: `url('${img}')`,
              backgroundSize: "cover",
              backgroundPosition: "center",
              opacity: idx === currentIndex ? 1 : 0,
              transition: "opacity 0.3s ease",
              zIndex: idx === currentIndex ? 1 : 0
            }}
          />
        ))}

        {safeImages.length > 1 && (
          <>
            <button 
              onClick={prevImage}
              style={{
                position: "absolute", top: "50%", left: "10px", transform: "translateY(-50%)",
                background: "rgba(0,0,0,0.4)", color: "white", border: "none", borderRadius: "50%",
                width: "30px", height: "30px", zIndex: 10, cursor: "pointer",
                display: "flex", alignItems: "center", justifyContent: "center"
              }}
            >&#10094;</button>
            <button 
              onClick={nextImage}
              style={{
                position: "absolute", top: "50%", right: "10px", transform: "translateY(-50%)",
                background: "rgba(0,0,0,0.4)", color: "white", border: "none", borderRadius: "50%",
                width: "30px", height: "30px", zIndex: 10, cursor: "pointer",
                display: "flex", alignItems: "center", justifyContent: "center"
              }}
            >&#10095;</button>

            {/* Indicators */}
            <div style={{ position: "absolute", bottom: "10px", left: "0", right: "0", display: "flex", justifyContent: "center", gap: "4px", zIndex: 10 }}>
              {safeImages.map((_, idx) => (
                <div 
                  key={idx} 
                  style={{ 
                    width: "6px", height: "6px", borderRadius: "50%", 
                    background: idx === currentIndex ? "white" : "rgba(255,255,255,0.5)",
                    transition: "background-color 0.3s ease"
                  }} 
                />
              ))}
            </div>
          </>
        )}
      </div>

      {/* Content Area */}
      <div className="room-content" style={{ padding: "1.5rem", display: "flex", flexDirection: "column", flexGrow: 1 }}>
        <h3 style={{ fontSize: "1.5rem", marginBottom: "0.5rem", fontFamily: "var(--font-serif)" }}>{room.title}</h3>
        <p style={{ color: "var(--accent-gold)", fontWeight: "600", marginBottom: "1.5rem" }}>From ${room.price} / night</p>
        
        <div style={{ marginTop: "auto" }}>
          <Link href={`/rooms`} className="btn btn-secondary" style={{ width: "100%", display: "block", textAlign: "center" }}>
            View Details
          </Link>
        </div>
      </div>
    </div>
  );
}