"use client";

import Image from "next/image";
import Link from "next/link";
import { resortData } from "@/src/data/resort";
import { motion } from "framer-motion";
import { useRef } from "react";

interface AccommodationCardProps {
  room: any;
  lang: "tr";
}

const getCloudinaryUrl = (publicId: string, width = 1200) => {
  if (!publicId) return "https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&q=80&w=1200";
  return `https://res.cloudinary.com/du7xohbct/image/upload/q_auto,f_auto,w_${width}/${publicId}`;
};

export default function AccommodationCard({ room, lang }: AccommodationCardProps) {
  const allImages = [
    room.mainImageId,
    ...(room.galleryImageIds || [])
  ];

  const scrollRef = useRef<HTMLDivElement>(null);

  return (
    <div className="flex flex-col w-full bg-[#ECE7E1] mb-12 shadow-sm">
      {/* Precision Header Section */}
      <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center px-10 py-12 gap-10">
        
        {/* Left: Title & Descriptions */}
        <div className="flex-[2] space-y-3">
          <h3 className="text-[#4F5B3A] text-2xl font-serif tracking-tight leading-none mb-1">
            {room.name[lang]} <span className="text-sm font-sans opacity-60">({room.size})</span>
          </h3>
          <p className="text-[13px] leading-relaxed text-[#4F5B3A] opacity-90 font-light max-w-2xl">
            {room.description[lang]}
          </p>
        </div>

        {/* Right: Booking Button */}
        <div className="flex-shrink-0 w-full lg:w-auto">
          <Link 
            href={`/accommodation/${room.slug}`}
            className="block w-full lg:w-auto bg-[#C87E4B] hover:bg-[#A6693E] text-black px-12 py-4 text-[11px] font-bold tracking-[0.2em] rounded-md transition-all duration-300 transform hover:-translate-y-1 shadow-xl hover:shadow-[#C87E4B]/20 text-center uppercase"
          >
            Odayı İncele
          </Link>
        </div>
      </div>

      {/* DRAGGABLE SLIDER */}
      <div 
        style={{ height: '550px', position: 'relative', width: '100vw', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw' }}
        className="overflow-hidden cursor-grab active:cursor-grabbing bg-zinc-200"
      >
        <motion.div 
            ref={scrollRef}
            drag="x"
            dragConstraints={{ right: 80, left: -((allImages.length - 1) * 720) }}
            className="flex h-full gap-4 px-[15vw]"
        >
            {allImages.map((id, idx) => (
              <div 
                key={`${id}-${idx}`}
                style={{ height: '100%', position: 'relative', minWidth: '700px', flexShrink: 0 }}
                className="rounded-sm overflow-hidden shadow-sm group"
              >
                <Image
                  src={getCloudinaryUrl(id, 1200)}
                  alt="Gallery"
                  fill
                  style={{ objectFit: 'cover' }}
                  sizes="(max-width: 1024px) 100vw, 80vw"
                  className="transition-transform duration-700 group-hover:scale-105 pointer-events-none"
                  draggable={false}
                  priority={idx < 2}
                />
              </div>
            ))}
        </motion.div>
      </div>
    </div>
  );
}