import { db } from '@/lib/db'
import { 
  Shield, 
  Scroll,
  TrafficCone,
  MessageSquare,
  Phone,
  Facebook,
  Instagram,
  Twitter,
  Youtube,
  MessageCircle
} from 'lucide-react'
import GlassmorphismButton from './GlassmorphismButton'

async function getSettings() {
  try {
    const settings = await db.systemSettings.findFirst({
      select: {
        siteName: true,
        siteDescription: true,
        contactEmail: true,
        contactPhone: true,
        contactWhatsApp: true,
        address: true,
        workingHours: true,
        heroTitle: true,
        heroSubtitle: true,
        heroDescription: true,
        heroButtonText: true,
        heroButtonLink: true,
        heroSecondaryButtonText: true,
        heroSecondaryButtonLink: true,
        heroBackgroundImage: true,
        siteLogo: true,
        polresLogo: true,
        metaTitle: true,
        metaDescription: true,
        metaKeywords: true,
        ogImage: true
      }
    })
    return settings || {}
  } catch (error) {
    console.error('Error fetching settings:', error)
    return {}
  }
}

async function getActiveSliders() {
  try {
    const sliders = await db.slider.findMany({
      where: { 
        isActive: true 
      },
      orderBy: { 
        order: 'asc' 
      },
      take: 5
    })
    return sliders
  } catch (error) {
    console.error('Error fetching sliders:', error)
    return []
  }
}

export default async function WonosoboLandingPage() {
  const settings = await getSettings()
  const sliders = await getActiveSliders()

  const defaultSettings = {
    siteName: 'Polres Wonosobo',
    siteDescription: 'Layanan Kepolisian Profesional',
    contactEmail: 'polreswonosobo@polri.go.id',
    contactPhone: '(0286) 321001',
    contactWhatsApp: '+62 812-3456-7890',
    address: 'Jl. Pahlawan No. 15, Wonosobo',
    workingHours: 'Senin - Jumat: 08:00 - 16:00',
    heroTitle: 'Kepolisian Resort Wonosobo',
    heroSubtitle: 'Layanan Profesional & Terpercaya',
    heroDescription: 'Institusi kepolisian yang berkomitmen memberikan pelayanan terbaik dengan standar profesionalisme tinggi',
    heroButtonText: 'Layanan Kami',
    heroButtonLink: '#layanan',
    heroSecondaryButtonText: 'Hubungi Kami',
    heroSecondaryButtonLink: '#kontak',
    heroBackgroundImage: '',
    siteLogo: '',
    polresLogo: ''
  }

  const mergedSettings = { ...defaultSettings, ...settings }

  // Get background image from sliders or fallback to settings
  const getBackgroundImage = () => {
    if (sliders && sliders.length > 0) {
      const firstSlider = sliders[0]
      const imagePath = firstSlider.imageFile || firstSlider.imageUrl
      if (imagePath) {
        return imagePath.startsWith('/') ? imagePath : `/${imagePath}`
      }
    }
    return mergedSettings.heroBackgroundImage
  }

  const whatsappNumber = mergedSettings.contactWhatsApp?.replace(/[^\d]/g, '') || '6281234567890'
  const whatsappMessage = 'Halo%20Polres%20Wonosobo,%20saya%20ingin%20bertanya%20mengenai%20layanan%20yang%20tersedia.'

  return (
    <div className="bg-gray-900 min-h-screen flex flex-col relative">
      {/* Background Container */}
      <div 
        className="absolute inset-0 z-[-20] bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: `url('${getBackgroundImage() || 'https://placehold.co/1200x800/222222/FFFFFF?text=Gedung+Polres+Wonosobo'}')`,
          filter: 'brightness(0.6) blur(2px)'
        }}
      />
      
      {/* Background Overlay */}
      <div 
        className="absolute inset-0 z-[-10]"
        style={{
          background: 'radial-gradient(circle at center top, rgba(255, 192, 0, 0.4) 10%, rgba(0, 0, 0, 0.9) 70%, #000 100%)'
        }}
      />

      {/* Main Content */}
      <main className="flex-grow flex flex-col items-center justify-end px-6 pt-6 pb-20 text-center relative z-10">
        
        {/* Services Grid */}
        <section className="w-full max-w-5xl">
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            
            {/* SPKT Service */}
            <GlassmorphismButton href="/ajuan/spkt">
              <div className="w-10 h-10 mb-2 border-2 border-amber-400 p-1 rounded-full bg-red-800 flex items-center justify-center text-xs font-bold shadow-lg">
                <Shield className="w-6 h-6 text-white" />
              </div>
              <span className="text-sm font-semibold">Layanan</span>
              <span className="text-lg font-bold">SPKT</span>
            </GlassmorphismButton>

            {/* SKCK Service */}
            <GlassmorphismButton href="#">
              <div className="w-10 h-10 mb-2 border-2 border-amber-400 p-1 rounded-full bg-yellow-700 flex items-center justify-center text-xs font-bold shadow-lg">
                <Scroll className="w-6 h-6 text-white" />
              </div>
              <span className="text-sm font-semibold">Layanan</span>
              <span className="text-lg font-bold">SKCK</span>
            </GlassmorphismButton>

            {/* Lalu Lintas Service */}
            <GlassmorphismButton href="#">
              <div className="w-10 h-10 mb-2 border-2 border-amber-400 p-1 rounded-full bg-blue-700 flex items-center justify-center text-xs font-bold shadow-lg">
                <TrafficCone className="w-6 h-6 text-white" />
              </div>
              <span className="text-sm font-semibold">Layanan</span>
              <span className="text-lg font-bold">Lalu Lintas</span>
            </GlassmorphismButton>

            {/* Live Chat */}
            <GlassmorphismButton href="#">
              <div className="w-10 h-10 mb-2 bg-green-500 rounded-full flex items-center justify-center shadow-lg">
                <MessageSquare className="w-6 h-6 text-white fill-current" />
              </div>
              <span className="text-lg font-bold mt-2">Live chat</span>
            </GlassmorphismButton>

            {/* Call Center 110 */}
            <GlassmorphismButton href="#">
              <div className="w-10 h-10 mb-2 bg-red-600 rounded-full flex items-center justify-center shadow-lg">
                <Phone className="w-6 h-6 text-white" />
              </div>
              <span className="text-lg font-bold mt-2">Call Center 110</span>
            </GlassmorphismButton>
          </div>
        </section>

        {/* Social Media Section */}
        <section className="mt-12 w-full max-w-lg">
          <h3 className="text-lg font-semibold text-amber-300 mb-4 tracking-wider uppercase">Ikuti Kami di Media Sosial</h3>
          <div className="flex justify-center space-x-6">
            {/* Facebook */}
            <a href="#" target="_blank" className="w-12 h-12 bg-blue-700 rounded-full flex items-center justify-center text-white shadow-xl hover:bg-blue-800 transition duration-300">
              <Facebook className="w-6 h-6" />
            </a>
            {/* Instagram */}
            <a href="#" target="_blank" className="w-12 h-12 bg-pink-600 rounded-full flex items-center justify-center text-white shadow-xl hover:bg-pink-700 transition duration-300">
              <Instagram className="w-6 h-6" />
            </a>
            {/* Twitter/X */}
            <a href="#" target="_blank" className="w-12 h-12 bg-black rounded-full flex items-center justify-center text-white shadow-xl hover:bg-gray-800 transition duration-300">
              <Twitter className="w-6 h-6" />
            </a>
            {/* YouTube */}
            <a href="#" target="_blank" className="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center text-white shadow-xl hover:bg-red-700 transition duration-300">
              <Youtube className="w-6 h-6" />
            </a>
          </div>
        </section>
      </main>

      {/* Floating Action Button (FAB) WhatsApp */}
      <a href={`https://wa.me/${whatsappNumber}?text=${whatsappMessage}`} 
         target="_blank" 
         className="fixed bottom-5 right-5 z-100 bg-green-500 rounded-full w-14 h-14 flex items-center justify-center shadow-lg hover:scale-110 transition-transform duration-300"
         style={{
           backgroundColor: '#25D366',
           boxShadow: '0 4px 10px rgba(0, 0, 0, 0.5), 0 0 20px #25D366'
         }}
         title="Hubungi Kami via WhatsApp">
        <MessageCircle className="w-8 h-8 text-white fill-white" />
      </a>

      {/* Footer */}
      <footer className="p-3 text-center text-xs font-medium text-amber-300 relative z-10"
              style={{
                background: 'linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.8))',
                boxShadow: '0 0 10px rgba(255, 192, 0, 0.5)'
              }}>
        POLRES WONOSOBO TULUS DAN RELIGIUS
      </footer>
    </div>
  )
}