'use client'

import { useState } from 'react'
import Image from 'next/image'
import { Info, Home, ArrowRight, Maximize2, Tag, Layout } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useSiteSettings } from '@/hooks/use-site-settings'

interface Hotspot {
  id: string
  title: string
  description: string
  price: string
  area: string
  x: number
  y: number
  polygon: string
}

const hotspots: Hotspot[] = [
  {
    id: 'penthouse-1',
    title: 'بنتهاوس فاخر - الطابق الأخير',
    description: 'إطلالة بانورامية خلابة مع تراس واسع وتشطيبات عصرية فائقة الجودة.',
    price: '4,500,000 ر.س',
    area: '450 م²',
    x: 50,
    y: 15,
    polygon: '35,2 65,2 68,18 32,18',
  },
  {
    id: 'balcony-unit-1',
    title: 'شقة سكنية بلكونة شمالية',
    description: 'تصميم ذكي يستغل المساحات مع إضاءة طبيعية ممتازة وتهوية مثالية.',
    price: '1,800,000 ر.س',
    area: '185 م²',
    x: 30,
    y: 45,
    polygon: '17,36 43,36 43,58 17,58',
  },
  {
    id: 'retail-1',
    title: 'معرض تجاري - الواجهة',
    description: 'موقع استراتيجي على الشارع الرئيسي، مثالي للعلامات التجارية الراقية.',
    price: '3,200,000 ر.س',
    area: '210 م²',
    x: 70,
    y: 80,
    polygon: '56,72 84,72 84,92 56,92',
  },
]

export function VisionImageMap() {
  const [activeId, setActiveId] = useState<string | null>(null)
  const activeHotspot = hotspots.find((h) => h.id === activeId)
  const s = useSiteSettings()
  const v = s.vision ?? {}

  return (
    <section className="py-16 sm:py-24 bg-white overflow-hidden" id="vision-tool">
      <div className="container mx-auto px-4">
        <div className="flex flex-col lg:flex-row gap-10 lg:gap-16 items-start">

          {/* Content Side */}
          <div className="w-full lg:w-2/5 space-y-6 sm:space-y-8">
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm font-medium">
              <Layout className="w-4 h-4" />
              <span>{v.badge || 'أداة خرائط الصور (Vision)'}</span>
            </div>

            <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-900 leading-tight">
              {v.title || 'استكشف تفاصيل المشروع'} <br />
              <span className="text-blue-600">{v.titleHighlight || 'من الخارج إلى الداخل'}</span>
            </h2>

            <p className="text-base sm:text-lg text-gray-600 leading-relaxed">
              {v.subtitle || 'تتيح لك أداة Vision التفاعلية تصفح الوحدات العقارية مباشرة من خلال واجهة المبنى. انقر على أي منطقة لاستعراض تفاصيل الشقة، المساحة، والسعر المتوقع.'}
            </p>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 pt-2 sm:pt-4">
              <div className="p-4 border border-gray-100 rounded-2xl bg-gray-50/50">
                <div className="w-10 h-10 bg-white rounded-lg shadow-sm flex items-center justify-center mb-4 text-blue-600">
                  <Maximize2 className="w-5 h-5" />
                </div>
                <h4 className="font-bold mb-1">{v.feature1Title || 'تحديد دقيق'}</h4>
                <p className="text-sm text-gray-500">{v.feature1Desc || 'خرائط حرارية دقيقة لكل وحدة سكنية أو تجارية.'}</p>
              </div>
              <div className="p-4 border border-gray-100 rounded-2xl bg-gray-50/50">
                <div className="w-10 h-10 bg-white rounded-lg shadow-sm flex items-center justify-center mb-4 text-blue-600">
                  <Tag className="w-5 h-5" />
                </div>
                <h4 className="font-bold mb-1">{v.feature2Title || 'معلومات فورية'}</h4>
                <p className="text-sm text-gray-500">{v.feature2Desc || 'احصل على السعر والحالة في لحظات بمجرد النقر.'}</p>
              </div>
            </div>

            {/* Selection Card */}
            <div
              className={cn(
                'transition-all duration-500 transform',
                activeHotspot
                  ? 'opacity-100 translate-y-0'
                  : 'opacity-0 translate-y-4 pointer-events-none h-0 overflow-hidden'
              )}
            >
              {activeHotspot && (
                <div className="bg-blue-600 rounded-3xl p-6 sm:p-8 text-white shadow-2xl shadow-blue-200">
                  <div className="flex justify-between items-start mb-6">
                    <h3 className="text-xl sm:text-2xl font-bold leading-snug">{activeHotspot.title}</h3>
                    <div className="bg-white/20 p-2 rounded-xl backdrop-blur-md shrink-0">
                      <Home className="w-5 h-5 sm:w-6 sm:h-6" />
                    </div>
                  </div>

                  <p className="text-blue-100 mb-6 sm:mb-8 leading-relaxed text-sm sm:text-base">
                    {activeHotspot.description}
                  </p>

                  <div className="flex flex-wrap gap-6 mb-6 sm:mb-8 border-t border-white/10 pt-6">
                    <div>
                      <div className="text-blue-200 text-xs uppercase tracking-wider mb-1">{v.areaLabel || 'المساحة'}</div>
                      <div className="text-lg sm:text-xl font-bold">{activeHotspot.area}</div>
                    </div>
                    <div>
                      <div className="text-blue-200 text-xs uppercase tracking-wider mb-1">{v.priceLabel || 'السعر التقديري'}</div>
                      <div className="text-lg sm:text-xl font-bold">{activeHotspot.price}</div>
                    </div>
                  </div>

                  <button className="w-full bg-white text-blue-600 py-3 sm:py-4 rounded-2xl font-bold flex items-center justify-center gap-2 hover:bg-blue-50 transition-colors">
                    {v.bookingText || 'احجز موعد للمعاينة'}
                    <ArrowRight className="w-5 h-5" />
                  </button>
                </div>
              )}
            </div>

            {!activeHotspot && (
              <div className="p-6 sm:p-8 border-2 border-dashed border-gray-200 rounded-3xl flex flex-col items-center justify-center text-center text-gray-400">
                <Info className="w-10 h-10 sm:w-12 sm:h-12 mb-4 opacity-20" />
                <p className="text-sm sm:text-base">{v.emptyText || 'قم باختيار وحدة من المبنى المقابل لاستعراض بياناتها'}</p>
              </div>
            )}
          </div>

          {/* Image Side */}
          <div className="w-full lg:w-3/5">
            <div className="relative w-full aspect-[4/3] sm:aspect-[16/10] rounded-2xl sm:rounded-[40px] overflow-hidden bg-gray-100 border-4 sm:border-8 border-white shadow-2xl">
              <Image
                src="/sample-building-vision.png"
                alt="Modern Building Facade"
                fill
                className="object-cover"
                priority
                sizes="(max-width: 1024px) 100vw, 60vw"
              />

              {/* SVG Overlay */}
              <svg
                viewBox="0 0 100 100"
                preserveAspectRatio="none"
                className="absolute inset-0 w-full h-full"
                style={{ zIndex: 10 }}
              >
                {hotspots.map((hotspot) => {
                  const isActive = activeId === hotspot.id
                  return (
                    <g
                      key={hotspot.id}
                      className="cursor-pointer"
                      onClick={(e) => {
                        e.stopPropagation()
                        setActiveId(hotspot.id)
                      }}
                    >
                      <polygon
                        points={hotspot.polygon}
                        fill={isActive ? 'rgba(37, 99, 235, 0.35)' : 'rgba(37, 99, 235, 0.08)'}
                        stroke={isActive ? '#2563eb' : 'rgba(37, 99, 235, 0.4)'}
                        strokeWidth={isActive ? '0.8' : '0.4'}
                        className="transition-all duration-300"
                      />
                      <circle
                        cx={hotspot.x}
                        cy={hotspot.y}
                        r={isActive ? '3' : '2'}
                        fill="#2563eb"
                        stroke="white"
                        strokeWidth="0.8"
                        className="transition-all duration-300"
                      />
                      <circle
                        cx={hotspot.x}
                        cy={hotspot.y}
                        r={isActive ? '6' : '4'}
                        fill="none"
                        stroke="rgba(37, 99, 235, 0.25)"
                        strokeWidth="0.3"
                        className="transition-all duration-300"
                      />
                    </g>
                  )
                })}
              </svg>

              {/* Float Hint */}
              <div className="absolute bottom-4 sm:bottom-10 left-1/2 -translate-x-1/2 bg-white/90 backdrop-blur-md px-4 sm:px-6 py-2.5 sm:py-3 rounded-full shadow-lg flex items-center gap-2 sm:gap-3 pointer-events-none z-20">
                <span className="w-2.5 h-2.5 sm:w-3 sm:h-3 bg-blue-500 rounded-full animate-pulse" />
                <span className="text-xs sm:text-sm font-bold text-gray-700">{v.hintText || 'تفاعل مع واجهة المبنى'}</span>
              </div>
            </div>
          </div>

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