import Link from 'next/link'
import { Users, Building2, MapPin, Landmark } from 'lucide-react'

const API_URL = process.env.API_URL || process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api'

async function getStats() {
  try {
    const res = await fetch(`${API_URL}/public/sites/butonkab/statistics/penduduk`, {
      cache: 'no-store',
    })
    if (!res.ok) return []
    const data = await res.json()
    const cards = (data.data || []).filter((s: any) => s.type === 'card')
    return cards.slice(0, 4)
  } catch {
    return []
  }
}

export default async function StatsSection() {
  const cards = await getStats()

  const icons = [Users, MapPin, Building2, Landmark]
  const descs = ['Jiwa', 'Laki-laki', 'Perempuan', 'Index']

  const stats = cards.length > 0
    ? cards.map((card: any, i: number) => ({
        label: card.label || card.title,
        value: card.value || '-',
        desc: descs[i] || '',
        icon: icons[i] || Users,
      }))
    : [
        { label: 'Penduduk', value: '264.769', desc: 'Jiwa', icon: Users },
        { label: 'Laki-laki', value: '133.412', desc: 'Jiwa', icon: Users },
        { label: 'Perempuan', value: '131.357', desc: 'Jiwa', icon: Users },
        { label: 'Rasio Sex', value: '96', desc: 'Index', icon: Landmark },
      ]

  return (
    <section className="relative py-16 overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-br from-[#1e3a5f] via-[#152d4a] to-[#0f2942]" />
      <div className="absolute inset-0 dot-pattern opacity-40" />
      <div className="absolute top-0 right-0 w-96 h-96 bg-[#f59e0b]/5 rounded-full blur-3xl" />
      <div className="absolute bottom-0 left-0 w-96 h-96 bg-[#c8102e]/5 rounded-full blur-3xl" />

      <div className="relative max-w-7xl mx-auto px-4">
        <div className="text-center mb-12">
          <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm rounded-full px-4 py-1.5 mb-4">
            <span className="w-1.5 h-1.5 bg-[#f59e0b] rounded-full" />
            <span className="text-xs text-white/70 uppercase tracking-wider font-medium">Data Daerah</span>
          </div>
          <h2 className="text-2xl sm:text-3xl font-display font-bold text-white">Statistik Kabupaten Buton</h2>
          <p className="text-white/50 text-sm mt-2">Data demografi dan pemerintahan Kabupaten Buton</p>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {stats.map((stat: any) => {
            const Icon = stat.icon
            return (
              <div key={stat.label} className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center hover:bg-white/10 transition-all group">
                <div className="w-12 h-12 bg-[#f59e0b]/10 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                  <Icon size={22} className="text-[#f59e0b]" />
                </div>
                <div className="text-3xl md:text-4xl font-display font-bold text-white mb-1">{stat.value}</div>
                <div className="text-sm font-medium text-white/80">{stat.label}</div>
                <div className="text-xs text-white/40 mt-0.5">{stat.desc}</div>
              </div>
            )
          })}
        </div>

        <div className="mt-8 text-center">
          <Link href="/statistik/penduduk" className="inline-flex items-center gap-2 text-[#f59e0b] font-medium text-sm hover:underline">
            Lihat Data Lengkap
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>
          </Link>
        </div>
      </div>
    </section>
  )
}