"use client";

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

interface Room {
  title: string;
  price: string;
  images: string[];
}

export default function RoomSlider({ rooms }: { rooms: Room[] }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  // Inner image index for each room
  const [innerIndexes, setInnerIndexes] = useState<{ [key: number]: number }>({ 0: 0, 1: 0, 2: 0 });

  const nextInnerImage = (e: React.MouseEvent, roomIdx: number, maxImages: number) => {
    e.preventDefault();
    e.stopPropagation();
    setInnerIndexes(prev => ({
      ...prev,
      [roomIdx]: (prev[roomIdx] + 1) % maxImages
    }));
  };

  const prevInnerImage = (e: React.MouseEvent, roomIdx: number, maxImages: number) => {
    e.preventDefault();
    e.stopPropagation();
    setInnerIndexes(prev => ({
      ...prev,
      [roomIdx]: (prev[roomIdx] - 1 + maxImages) % maxImages
    }));
  };

  return (
    <div style={{ position: "relative", width: "100%", overflow: "hidden", padding: "1rem 0" }}>
      <div 
        style={{ 
          display: "flex", 
          transition: "transform 0.5s ease-in-out",
          transform: `translateX(-${currentIndex * 100}%)`,
        }}
      >
        {rooms.map((room, i) => (
          <div key={i} style={{ minWidth: "100%", padding: "0 1rem" }}>
            <div className="room-card glass" style={{ maxWidth: "600px", margin: "0 auto", borderRadius: "1rem", overflow: "hidden", position: "relative" }}>
              
              {/* Inner Image Slider for the Room */}
              <div style={{ position: "relative", height: "350px", overflow: "hidden" }}>
                {room.images.map((img, imgIdx) => (
                  <div 
                    key={imgIdx}
                    style={{ 
                      position: "absolute",
                      top: 0,
                      left: 0,
                      width: "100%",
                      height: "100%", 
                      backgroundImage: `url('${img}')`,
                      backgroundSize: "cover",
                      backgroundPosition: "center",
                      opacity: imgIdx === innerIndexes[i] ? 1 : 0,
                      transition: "opacity 0.3s ease",
                      zIndex: imgIdx === innerIndexes[i] ? 1 : 0
                    }}
                  />
                ))}

                {/* Inner Arrows */}
                <button 
                  onClick={(e) => prevInnerImage(e, i, room.images.length)}
                  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"
                  }}
                >&#10094;</button>
                <button 
                  onClick={(e) => nextInnerImage(e, i, room.images.length)}
                  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"
                  }}
                >&#10095;</button>

                {/* Inner Indicators */}
                <div style={{ position: "absolute", bottom: "10px", left: "0", right: "0", display: "flex", justifyContent: "center", gap: "4px", zIndex: 10 }}>
                  {room.images.map((_, imgIdx) => (
                    <div 
                      key={imgIdx} 
                      style={{ 
                        width: "6px", height: "6px", borderRadius: "50%", 
                        background: imgIdx === innerIndexes[i] ? "white" : "rgba(255,255,255,0.5)" 
                      }} 
                    />
                  ))}
                </div>
              </div>

              <div className="room-content" style={{ padding: "2rem", textAlign: "center" }}>
                <h3 style={{ fontSize: "2rem", marginBottom: "0.5rem", fontFamily: "var(--font-serif)" }}>{room.title}</h3>
                <p style={{ color: "var(--accent-gold)", fontWeight: "600", marginBottom: "1.5rem", fontSize: "1.25rem" }}>
                  From {room.price} / night
                </p>
                <Link href={`/rooms`} className="btn btn-secondary" style={{ padding: "0.75rem 2rem" }}>
                  View Details
                </Link>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Main Room Navigation Arrows */}
      <button 
        onClick={() => setCurrentIndex((prev) => (prev - 1 + rooms.length) % rooms.length)}
        style={{
          position: "absolute", top: "50%", left: "5%", transform: "translateY(-50%)",
          background: "var(--glass-bg)", border: "none", borderRadius: "50%",
          width: "50px", height: "50px", fontSize: "1.5rem", cursor: "pointer",
          backdropFilter: "blur(10px)", boxShadow: "var(--shadow-md)"
        }}
      >
        &#10094;
      </button>
      <button 
        onClick={() => setCurrentIndex((prev) => (prev + 1) % rooms.length)}
        style={{
          position: "absolute", top: "50%", right: "5%", transform: "translateY(-50%)",
          background: "var(--glass-bg)", border: "none", borderRadius: "50%",
          width: "50px", height: "50px", fontSize: "1.5rem", cursor: "pointer",
          backdropFilter: "blur(10px)", boxShadow: "var(--shadow-md)"
        }}
      >
        &#10095;
      </button>
      
      {/* Main Indicators */}
      <div style={{ display: "flex", justifyContent: "center", gap: "0.5rem", marginTop: "2rem" }}>
        {rooms.map((_, idx) => (
          <button
            key={idx}
            onClick={() => setCurrentIndex(idx)}
            style={{
              width: "12px", height: "12px", borderRadius: "50%",
              backgroundColor: idx === currentIndex ? "var(--accent-gold)" : "var(--border-light)",
              border: "none", cursor: "pointer", transition: "background-color 0.3s ease"
            }}
          />
        ))}
      </div>
    </div>
  );
}