"use client";

import { motion } from "framer-motion";
import { resortData } from "@/src/data/resort";
import Image from "next/image";
import Link from "next/link";
import { notFound, useParams } from "next/navigation";

const getCloudinaryUrl = (publicId: string) => {
  return `https://res.cloudinary.com/du7xohbct/image/upload/q_auto,f_auto,w_2000/${publicId}`;
};

export default function RoomDetailsPage() {
  const params = useParams();
  const slug = params.slug as string;
  const lang = "tr"; // Mocked locale

  const room = resortData.rooms.find((r) => r.slug === slug);

  if (!room) {
    notFound();
  }

  return (
    <div className="bg-[#FAF9F6] min-h-screen">
      {/* Hero Header */}
      <section className="relative h-[65vh] w-full overflow-hidden">
        <motion.div 
          initial={{ scale: 1.1 }}
          animate={{ scale: 1 }}
          transition={{ duration: 1.5 }}
          className="absolute inset-0"
        >
          <Image
            src={getCloudinaryUrl(room.mainImageId)}
            alt={room.name[lang]}
            fill
            className="object-cover brightness-75"
            priority
          />
        </motion.div>
        
        <div className="absolute inset-0 flex flex-col items-center justify-center text-center z-10 px-6">
          <motion.span 
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-white text-xs tracking-[0.5em] font-bold uppercase mb-4"
          >
            {room.size} — {room.capacity}
          </motion.span>
          <motion.h1 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            className="text-white text-5xl md:text-8xl font-serif"
          >
            {room.name[lang]}
          </motion.h1>
        </div>
      </section>

      {/* Content Section */}
      <section className="max-w-7xl mx-auto px-6 py-32">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-20">
          
          {/* Left: Description & Details */}
          <div className="lg:col-span-2 space-y-16">
            <div className="space-y-6">
              <h2 className="text-sm font-bold tracking-[0.3em] text-gold uppercase">ODA HAKKINDA</h2>
              <p className="text-2xl md:text-3xl font-serif text-gray-900 leading-relaxed font-light italic">
                {room.description[lang]}
              </p>
            </div>

            <div className="grid grid-cols-2 md:grid-cols-3 gap-8 pt-10 border-t border-black/5">
              {room.features.map((f) => {
                const feat = resortData.featureIcons[f];
                return feat ? (
                  <div key={f} className="flex items-center gap-4 group">
                    <div className="w-12 h-12 rounded-full border border-black/5 flex items-center justify-center text-xl bg-white transition-colors group-hover:border-gold group-hover:bg-gold/5">
                      {feat.icon}
                    </div>
                    <span className="text-[10px] font-bold tracking-widest text-gray-400 uppercase">
                      {feat.label[lang]}
                    </span>
                  </div>
                ) : null;
              })}
            </div>
          </div>

          {/* Right: Sticky Sidebar / Call to Action */}
          <div className="lg:col-span-1">
            <div className="sticky top-32 bg-white p-10 shadow-2xl shadow-black/5 border border-black/5">
              <div className="space-y-8">
                <div>
                  <h4 className="text-[10px] font-bold tracking-widest text-gray-400 uppercase mb-2">KONAKLAMA TİPİ</h4>
                  <p className="text-xl font-serif text-gray-900">{room.capacity}</p>
                </div>
                
                <div>
                  <h4 className="text-[10px] font-bold tracking-widest text-gray-400 uppercase mb-2">ODA BÜYÜKLÜĞÜ</h4>
                  <p className="text-xl font-serif text-gray-900">{room.size}</p>
                </div>

                <div className="pt-8">
                  <Link 
                    href={resortData.bookingUrl}
                    className="block w-full bg-[#5C6353] text-white text-center py-5 text-[10px] font-bold tracking-[0.3em] uppercase hover:bg-gold transition-all"
                  >
                    ŞİMDİ REZERVASYON YAP
                  </Link>
                  <p className="mt-4 text-[9px] text-gray-400 text-center tracking-tight leading-normal">
                    * En iyi fiyat garantisi ve resmi web sitesi avantajları ile yerinizi ayırtın.
                  </p>
                </div>
              </div>
            </div>
          </div>

        </div>
      </section>

      {/* Gallery Highlight */}
      <section className="bg-white py-24 pb-48">
        <div className="max-w-7xl mx-auto px-6">
           <div className="grid grid-cols-1 md:grid-cols-3 gap-1">
              {room.galleryImageIds.slice(0, 3).map((id, i) => (
                <div key={id} className="relative aspect-square overflow-hidden group">
                  <Image
                    src={getCloudinaryUrl(id)}
                    alt={`${room.name[lang]} Gallery ${i + 1}`}
                    fill
                    className="object-cover grayscale hover:grayscale-0 transition-all duration-700"
                  />
                </div>
              ))}
           </div>
           
           <div className="mt-20 text-center">
             <Link 
              href="/accommodation"
              className="text-[10px] font-bold tracking-[0.4em] text-gray-400 hover:text-gold transition-colors inline-flex items-center gap-4"
             >
               <span className="w-12 h-px bg-current" />
               GERİ DÖN
               <span className="w-12 h-px bg-current" />
             </Link>
           </div>
        </div>
      </section>
    </div>
  );
}