"use client";

import React, { useState } from "react";
import { Maximize2 } from "lucide-react";
import { FLOOR_PLAN_CONTENT } from "@/config/siteContent";

interface FloorPlanProps {
  onOpenImageModal: (imageSrc: string, title: string) => void;
}

export default function FloorPlan({ onOpenImageModal }: FloorPlanProps) {
  const [selectedFloor, setSelectedFloor] = useState<"floor1" | "floor2" | "floor3">("floor1");

  const currentData = FLOOR_PLAN_CONTENT.floors[selectedFloor];

  return (
    <section id="rooms" className="py-20 lg:py-28 bg-[#f5f6f8] text-zinc-900 overflow-hidden">
      <div className="max-w-7xl mx-auto px-6 lg:px-12">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
          
          {/* Left Column 3D Rendering Image */}
          <div className="lg:col-span-6 relative group">
            <div className="bg-white p-4 rounded-2xl shadow-xl border border-zinc-200 overflow-hidden">
              <img
                src={currentData.image}
                alt={currentData.name}
                className="w-full h-[380px] sm:h-[460px] object-contain transition-transform duration-300 group-hover:scale-105"
              />
              <button
                onClick={() => onOpenImageModal(currentData.image, currentData.name)}
                className="absolute top-8 right-8 bg-zinc-900/80 hover:bg-amber-600 text-white p-3 rounded-full shadow-lg transition"
                title="Expand Floor Plan"
              >
                <Maximize2 size={18} />
              </button>
            </div>
          </div>

          {/* Right Column Dimensions & Selector */}
          <div className="lg:col-span-6 space-y-8">
            <div>
              <h2 className="text-4xl sm:text-5xl font-black font-serif tracking-tight text-zinc-900 mb-6">
                {FLOOR_PLAN_CONTENT.sectionTitle}
              </h2>

              {/* Floor Tabs */}
              <div className="flex items-center gap-6 border-b border-zinc-300 pb-3 mb-6 text-sm font-extrabold uppercase tracking-widest">
                <button
                  onClick={() => setSelectedFloor("floor1")}
                  className={`pb-3 transition relative ${
                    selectedFloor === "floor1"
                      ? "text-zinc-900 border-b-2 border-amber-600 font-extrabold"
                      : "text-zinc-400 hover:text-zinc-700"
                  }`}
                >
                  FLOOR 1
                </button>

                <button
                  onClick={() => setSelectedFloor("floor2")}
                  className={`pb-3 transition relative ${
                    selectedFloor === "floor2"
                      ? "text-zinc-900 border-b-2 border-amber-600 font-extrabold"
                      : "text-zinc-400 hover:text-zinc-700"
                  }`}
                >
                  FLOOR 2
                </button>

                <button
                  onClick={() => setSelectedFloor("floor3")}
                  className={`pb-3 transition relative ${
                    selectedFloor === "floor3"
                      ? "text-zinc-900 border-b-2 border-amber-600 font-extrabold"
                      : "text-zinc-400 hover:text-zinc-700"
                  }`}
                >
                  FLOOR 3
                </button>
              </div>

              <p className="text-zinc-600 text-base leading-relaxed mb-8">
                {FLOOR_PLAN_CONTENT.sectionDescription}
              </p>
            </div>

            {/* Room Dimension Leader Lines List */}
            <div className="space-y-4">
              {currentData.rooms.map((room, idx) => (
                <div key={idx} className="flex items-baseline justify-between text-sm sm:text-base font-bold text-zinc-800">
                  <span className="shrink-0">{room.name}</span>
                  <div className="grow mx-3 border-b-2 border-dotted border-zinc-300" />
                  <span className="shrink-0 font-extrabold text-amber-700">{room.area}</span>
                </div>
              ))}
            </div>

          </div>

        </div>
      </div>
    </section>
  );
}