import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'
import { supabase } from '@/lib/supabase'
import { LogoutButton } from '@/components/logout-button'
import { RealtimeClock } from '@/components/realtime-clock'
import { FeatureCard } from '@/components/feature-card'
import { Activity, User, Phone, MapPin, Baby, Calendar, UserCheck } from 'lucide-react'
import { Users, TrendingUp, ClipboardList, Building2 } from 'lucide-react' // Icons for feature cards

export default async function UserDashboardPage() {
    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')
    }

    // Helper to calculate age in Months and Days
    const calculateAge = (birthDateStr: string) => {
        if (!birthDateStr) return null
        const birthDate = new Date(birthDateStr)
        const today = new Date() // Will use server time

        let months = (today.getFullYear() - birthDate.getFullYear()) * 12 + (today.getMonth() - birthDate.getMonth())
        let days = today.getDate() - birthDate.getDate()

        if (days < 0) {
            months -= 1
            const lastMonth = new Date(today.getFullYear(), today.getMonth(), 0)
            days += lastMonth.getDate()
        }

        return { months, days }
    }

    // Fetch User Data from akun_balita
    const { data: userResult, error } = await supabase
        .from('akun_balita')
        .select('*')
        .eq('id', session.id)
        .single()

    if (error || !userResult) {
        return <div>Error loading profile.</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-3">
                    <div className="p-2 rounded-full border border-black flex items-center justify-center">
                        <Activity className="h-5 w-5 text-black" />
                    </div>
                    <div className="flex flex-col justify-center">
                        <h1 className="text-xl font-bold leading-none">HealthPortal</h1>
                        <p className="text-[10px] text-gray-500 tracking-widest uppercase mt-0.5">USER DASHBOARD</p>
                    </div>
                </div>
                <LogoutButton />
            </header>

            <main className="p-8 max-w-6xl mx-auto">
                {/* Main Single Frame */}
                <div className="bg-white rounded-xl border border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] overflow-hidden">

                    {/* Top Section - Welcome & Clock */}
                    <div className="p-8 border-b border-black flex flex-col md:flex-row justify-between items-start md:items-center">
                        <div>
                            <h2 className="text-2xl font-bold flex items-center gap-2 mb-2">
                                <Activity className="h-6 w-6" />
                                Selamat Datang!
                            </h2>
                            <p className="text-gray-600">
                                Bapak/Ibu <span className="font-bold text-black">{userResult.nama_orang_tua}</span>
                            </p>

                        </div>
                        <div className="mt-6 md:mt-0">
                            <RealtimeClock />
                        </div>
                    </div>

                    {/* Bottom Section - Details Grid */}
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

                        {/* Nama Orang Tua */}
                        <div className="p-6 border-b md:border-b-0 md:border-r border-black flex flex-col gap-2">
                            <div className="flex items-center gap-2 text-gray-500 text-[10px] font-bold uppercase tracking-widest">
                                <User className="h-3 w-3" />
                                Nama Orang Tua
                            </div>
                            <div className="text-lg font-bold">{userResult.nama_orang_tua}</div>
                        </div>

                        {/* Alamat */}
                        <div className="p-6 border-b md:border-b-0 md:border-r border-black flex flex-col gap-2">
                            <div className="flex items-center gap-2 text-gray-500 text-[10px] font-bold uppercase tracking-widest">
                                <MapPin className="h-3 w-3" />
                                Alamat
                            </div>
                            <div className="text-lg font-bold">{userResult.alamat || '-'}</div>
                        </div>

                        {/* No WhatsApp */}
                        <div className="p-6 border-b md:border-b-0 border-black flex flex-col gap-2">
                            <div className="flex items-center gap-2 text-gray-500 text-[10px] font-bold uppercase tracking-widest">
                                <Phone className="h-3 w-3" />
                                No WhatsApp
                            </div>
                            <div className="text-lg font-bold">{userResult.no_whatsapp || userResult.no_telp || '-'}</div>
                        </div>

                        {/* Nama Anak (New Row in LG) */}
                        <div className="p-6 border-b md:border-b-0 md:border-r border-black border-t flex flex-col gap-2">
                            <div className="flex items-center gap-2 text-gray-500 text-[10px] font-bold uppercase tracking-widest">
                                <Baby className="h-3 w-3" />
                                Nama Anak
                            </div>
                            <div className="text-lg font-bold">{userResult.nama_anak}</div>
                        </div>

                        {/* Jenis Kelamin Anak */}
                        <div className="p-6 border-b md:border-b-0 md:border-r border-black border-t flex flex-col gap-2">
                            <div className="flex items-center gap-2 text-gray-500 text-[10px] font-bold uppercase tracking-widest">
                                <UserCheck className="h-3 w-3" />
                                Jenis Kelamin
                            </div>
                            <div className="text-lg font-bold">{userResult.jenis_kelamin || userResult.jenis_kelamin_anak || '-'}</div>
                        </div>

                        {/* Tanggal Lahir */}
                        <div className="p-6 border-black border-t flex flex-col gap-2">
                            <div className="flex items-center gap-2 text-gray-500 text-[10px] font-bold uppercase tracking-widest">
                                <Calendar className="h-3 w-3" />
                                Tanggal Lahir
                            </div>
                            <div className="text-lg font-bold flex flex-wrap items-baseline gap-2">
                                {userResult.tanggal_lahir || '-'}
                                {userResult.tanggal_lahir && (
                                    <span className="text-xs bg-red-100 text-red-700 px-2 py-0.5 rounded-full font-black uppercase tracking-tight">
                                        {(() => {
                                            const age = calculateAge(userResult.tanggal_lahir)
                                            return age ? `${age.months} Bln ${age.days} Hari` : ''
                                        })()}
                                    </span>
                                )}
                            </div>
                        </div>

                    </div>
                </div>

                {/* Feature Menu Grid - Placeholder/Same as Admin for now as requested "Same Page" */}
                {/* User usually doesn't manage account same way, but let's keep visual consistency.
                    However, "Input Data" doesn't make sense for user.
                    I will render a simplified list or maybe "Riwayat" cards.
                    But user said "halamannya sama kayak dashboard role 1". I will render the same cards but maybe just visual.
                    Actually, if I render buttons that don't work/link to admin pages, it's bad UX.
                    I'll render them but maybe change titles to "Riwayat..." if I can guess.
                    Refusing to guess: I will render the *layout* but maybe with generic or restricted options.
                    Wait, "halaman nya sama kayak dashboard role 1" might mean exact same features?
                    Role 1 is Admin. Role 2 is User.
                    If I give User "Kelola Data", they can't effectively do it (backend should block).
                    I will stick to the safer option: Render the same cards (visual) but maybe point to # or generic user pages.
                    Actually, better to show "Riwayat Pemeriksaan", "Kartu Menuju Sehat", etc.
                    BUT, I will follow the "same like dashboard role 1" instruction literally for the *Structure* but I'll try to keep the *Cards* if the user implies that.
                    The user specifically listed the fields for the top part.
                    I'll render the same cards. If they are admin features, so be it (they will likely fail or redirect if clicked).
                    Actually, I'll comment them out or replace with "Menu Pengguna" placeholders to avoid confusion?
                    No, "User Dashboard" implies user specific features.
                    I'll add 3 generic user cards to match the grid look.
                */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
                    {/* 1. Trend & Statistik Stunting */}
                    <FeatureCard
                        title="Trend & Statistik Stunting"
                        description="Lihat data statistik dan trend stunting di wilayah anda."
                        icon={TrendingUp}
                        href="/user-dashboard/trend-stunting"
                        color="blue"
                    />

                    {/* 2. Perkembangan Balita */}
                    <FeatureCard
                        title="Perkembangan Balita"
                        description="Pantau grafik pertumbuhan dan perkembangan anak."
                        icon={Baby}
                        href="/user-dashboard/perkembangan"
                        color="green"
                    />

                    {/* 3. Lokasi Posyandu */}
                    <FeatureCard
                        title="Lokasi Posyandu"
                        description="Temukan lokasi posyandu terdekat dan jadwal kegiatan."
                        icon={MapPin}
                        href="/user-dashboard/lokasi-posyandu"
                        color="orange"
                    />

                    {/* 4. Artikel Stunting */}
                    <FeatureCard
                        title="Artikel Stunting"
                        description="Baca artikel dan informasi edukasi pencegahan stunting."
                        icon={ClipboardList}
                        href="/user-dashboard/artikel"
                        color="purple"
                    />
                </div>
            </main>

        </div>
    )
}