import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'
import { supabase } from '@/lib/supabase'
import { LogoutButton } from '@/components/logout-button'
import { ArrowLeft, Building2, Search } from 'lucide-react'
import Link from 'next/link'
import PosyanduList from "./PosyanduList"

export async function getPosyanduWithReviews() {
    const { data: posyandu, error } = await supabase
        .from('detail_posyandu')
        .select(`
            *,
            petugas:petugas_posyandu_lokal(*),
            reviews:ulasan_posyandu(
                rating,
                ulasan,
                nama_pengulas,
                created_at
            )
        `)
        .order('nama_posyandu', { ascending: true })

    if (error) {
        console.error('Error fetching posyandu:', error)
        return []
    }

    return posyandu
}

export default async function LokasiPosyanduPage() {
    const cookieStore = await cookies()
    const sessionCookie = cookieStore.get('user_session')
    if (!sessionCookie) redirect('/')

    const session = JSON.parse(sessionCookie.value)
    if (session.role !== 'user') redirect('/dashboard')

    // Fetch all posyandu data using server action
    const posyanduData = await getPosyanduWithReviews()

    if (!posyanduData) {
        return (
            <div className="min-h-screen flex items-center justify-center text-red-500 font-semibold bg-white p-8">
                <div className="bg-red-50 p-6 rounded-2xl border-2 border-red-200 text-center max-w-md">
                    <p className="font-black text-xl mb-2">Gagal Memuat Data</p>
                    <p className="text-sm opacity-80">Terjadi kesalahan pada server.</p>
                    <Link href="/user-dashboard" className="inline-block mt-4 text-xs font-bold underline">Kembali ke Dashboard</Link>
                </div>
            </div>
        )
    }

    return (
        <div className="min-h-screen bg-white font-sans text-black flex flex-col">
            {/* Header */}
            <header className="flex justify-between items-center px-8 py-6 border-b border-gray-100">
                <div className="flex items-center gap-4">
                    <Link href="/user-dashboard" className="group flex items-center gap-2 text-sm font-bold hover:text-gray-600 transition-colors">
                        <div className="p-2 rounded-full border border-black flex items-center justify-center group-hover:bg-black group-hover:text-white transition-all">
                            <ArrowLeft className="h-5 w-5" />
                        </div>
                        <span className="hidden md:block">Kembali</span>
                    </Link>
                    <div className="h-8 w-px bg-gray-200 mx-2 hidden md:block"></div>
                    <div className="flex flex-col justify-center">
                        <h1 className="text-xl font-bold leading-none text-purple-600">Lokasi Posyandu</h1>
                        <p className="text-[10px] text-gray-500 tracking-widest uppercase mt-0.5">LAYANAN KESEHATAN</p>
                    </div>
                </div>
                <LogoutButton />
            </header>

            <main className="p-8 max-w-6xl mx-auto flex-1 w-full flex flex-col gap-8">
                {/* Hero Section */}
                <div className="flex flex-col md:flex-row items-center gap-8 bg-purple-50 p-8 rounded-3xl border-2 border-purple-100 relative overflow-hidden">
                    <div className="flex-1 z-10">
                        <h2 className="text-3xl font-black mb-2 text-purple-900">Temukan Layanan Terdekat</h2>
                        <p className="text-purple-600/80 max-w-lg leading-relaxed font-semibold">
                            Cari lokasi posyandu di wilayah Anda, cek petugas yang bertugas, dan berikan ulasan untuk meningkatkan kualitas layanan.
                        </p>
                    </div>
                    <div className="w-20 h-20 bg-purple-600 rounded-2xl flex items-center justify-center text-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] rotate-3 z-10">
                        <Building2 className="w-10 h-10" />
                    </div>
                    <div className="absolute -right-10 -bottom-10 w-48 h-48 bg-purple-200/50 rounded-full blur-3xl"></div>
                </div>

                {/* Client Component for Search and Cards */}
                <PosyanduList initialData={(posyanduData as any) ?? []} />

            </main>
        </div>
    )
}