'use client'

import { useEffect, useRef, useState } from 'react'
import { Home, Glasses, Box, Bot } from 'lucide-react'
import { useSiteSettings } from '@/hooks/use-site-settings'

function Counter({ target, suffix = '' }: { target: number; suffix?: string }) {
  const [count, setCount] = useState(0)
  const ref = useRef<HTMLDivElement>(null)
  const started = useRef(false)

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting && !started.current) {
          started.current = true
          const duration = 1800
          const start = performance.now()
          const animate = (now: number) => {
            const elapsed = now - start
            const progress = Math.min(elapsed / duration, 1)
            const ease = 1 - Math.pow(1 - progress, 3)
            setCount(Math.round(target * ease))
            if (progress < 1) requestAnimationFrame(animate)
          }
          requestAnimationFrame(animate)
        }
      },
      { threshold: 0.5 }
    )
    if (ref.current) observer.observe(ref.current)
    return () => observer.disconnect()
  }, [target])

  return (
    <div ref={ref} className="text-3xl sm:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-white to-white/70 tabular-nums">
      {count.toLocaleString('ar-MA')}{suffix}
    </div>
  )
}

export function Stats() {
  const s = useSiteSettings()
  const st = s.stats ?? {}
  const STATS = [
    { icon: Home, value: 10000, suffix: '+', label: st.propertiesLabel || 'عقار متاح', color: 'from-blue-400 to-blue-500' },
    { icon: Glasses, value: 100, suffix: '+', label: st.toursLabel || 'جولة 360°', color: 'from-emerald-400 to-emerald-500' },
    { icon: Box, value: 50, suffix: '+', label: st.threeDLabel || 'تصميم 3D', color: 'from-violet-400 to-violet-500' },
    { icon: Bot, value: 24, suffix: '/7', label: st.agentsLabel || 'دعم AI', color: 'from-amber-400 to-amber-500' },
  ]
  return (
    <section className="py-16 sm:py-20 bg-gradient-to-br from-slate-900 via-blue-950 to-indigo-950 text-white overflow-hidden relative">
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl" />
        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-indigo-500/5 rounded-full blur-3xl" />
      </div>
      <div className="container mx-auto px-4 sm:px-6 relative z-10">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 text-center">
          {STATS.map((stat, i) => (
            <div key={i} className="space-y-3 group">
              <div className="flex justify-center">
                <div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${stat.color} flex items-center justify-center shadow-lg opacity-80 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300`}>
                  <stat.icon className="w-7 h-7 text-white" />
                </div>
              </div>
              <Counter target={stat.value} suffix={stat.suffix} />
              <div className="text-white/50 text-sm font-medium">{stat.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}