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, CreditCard, Phone, Users, TrendingUp, ClipboardList, Building2, Calendar } from 'lucide-react'

export default async function DashboardPage() {
    const cookieStore = await cookies()
    const sessionCookie = cookieStore.get('user_session')

    if (!sessionCookie) {
        redirect('/')
    }

    const session = JSON.parse(sessionCookie.value)

    if (session.role !== 'admin') {
        redirect('/')
    }

    const { data: petugas, error } = await supabase
        .from('petugas_posyandu')
        .select('*')
        .eq('id', session.id)
        .single()

    if (error || !petugas) {
        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-4 md:px-8 py-4 md: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">DASHBOARD</p>
                    </div>
                </div>
                <LogoutButton />
            </header>

            <main className="p-4 md:p-8 max-w-6xl mx-auto w-full">
                {/* 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-6 md: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">
                                Anda log in sebagai <span className="font-bold text-black">{petugas.nama}</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">

                        {/* Nama */}
                        <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
                            </div>
                            <div className="text-lg font-bold">{petugas.nama}</div>
                        </div>

                        {/* Username */}
                        <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">
                                <User className="h-3 w-3" />
                                Username
                            </div>
                            <div className="text-lg font-bold">{petugas.username}</div>
                        </div>

                        {/* Nomor Petugas - Full Width */}
                        <div className="p-6 border-b border-black border-t md:col-span-2 flex flex-col gap-2">
                            <div className="flex items-center gap-2 text-gray-500 text-[10px] font-bold uppercase tracking-widest">
                                <CreditCard className="h-3 w-3" />
                                Nomor Petugas
                            </div>
                            <div className="text-lg font-bold">{petugas.nomor_petugas}</div>
                        </div>

                        {/* No Telp - Full Width */}
                        <div className="p-6 md:col-span-2 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" />
                                Nomor Telepon
                            </div>
                            <div className="text-lg font-bold">{petugas.no_telp || '-'}</div>
                        </div>

                    </div>
                </div>

                {/* Feature Menu Grid */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
                    {/* 1. Manajemen Akun */}
                    <FeatureCard
                        title="Manajemen Akun"
                        description="Kelola data akun pengguna dan hak akses dalam sistem."
                        icon={Users}
                        href="/dashboard/manajemen-akun"
                        color="green"
                    />

                    {/* 2. Trend Stunting Daerah */}
                    <FeatureCard
                        title="Trend Stunting Daerah"
                        description="Analisis grafik dan data statistik stunting di wilayah kerja."
                        icon={TrendingUp}
                        href="/dashboard/trend-stunting"
                        color="blue"
                    />

                    {/* 3. Kelola Data */}
                    <FeatureCard
                        title="Kelola Data"
                        description="Input, ubah, dan validasi data posyandu secara terpusat."
                        icon={ClipboardList}
                        href="/dashboard/kelola-data"
                        color="orange"
                    />

                    {/* 4. Manajemen Posyandu */}
                    <FeatureCard
                        title="Manajemen Posyandu"
                        description="Pengaturan operasional dan administrasi posyandu."
                        icon={Building2}
                        href="/dashboard/manajemen-posyandu"
                        color="purple"
                    />

                    {/* 5. Kelola Jadwal Posyandu */}
                    <FeatureCard
                        title="Kelola Jadwal Posyandu"
                        description="Buat dan atur jadwal kegiatan posyandu bulanan."
                        icon={Calendar}
                        href="/dashboard/kelola-jadwal"
                        color="red"
                        className="md:col-span-2"
                    />
                </div>
            </main>

        </div>
    )
}