import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'
import { supabase } from '@/lib/supabase'
import { LogoutButton } from '@/components/logout-button'
import { ArrowLeft, Calendar, Info } from 'lucide-react'
import Link from 'next/link'
import { JadwalTable } from './JadwalTable'

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

    if (!sessionCookie) redirect('/')

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

    const { data: jadwal, error } = await supabase
        .from('jadwal_posyandu')
        .select(`
            *,
            detail_posyandu (
                nama_posyandu,
                alamat
            )
        `)
        .order('tanggal', { ascending: true })
        .order('jam_mulai', { ascending: true })

    if (error) {
        return <div className="p-8 text-red-500">Gagal memuat data jadwal.</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="/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 ke Dashboard</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 uppercase tracking-tighter">Kelola Jadwal Posyandu</h1>
                        <p className="text-[10px] text-gray-500 tracking-widest uppercase mt-0.5">ADMINISTRASI PENJADWALAN</p>
                    </div>
                </div>
                <LogoutButton />
            </header>

            <main className="p-8 max-w-7xl mx-auto flex-1 w-full flex flex-col gap-8">

                {/* Info Card */}
                <div className="bg-red-50 border-2 border-red-500 rounded-3xl p-6 md:p-8 relative overflow-hidden flex flex-col md:flex-row items-center gap-6 shadow-[8px_8px_0px_0px_rgba(239,68,68,0.2)]">
                    <div className="w-16 h-16 bg-red-500 rounded-2xl flex items-center justify-center text-white shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] flex-shrink-0">
                        <Calendar className="w-8 h-8" />
                    </div>
                    <div className="flex-1 flex flex-col gap-2">
                        <h2 className="text-xl font-black text-gray-900 uppercase tracking-tight">Optimasi Penjadwalan Bulanan</h2>
                        <p className="text-sm font-semibold text-gray-600 leading-relaxed max-w-2xl">
                            Kelola jadwal operasional seluruh Posyandu di wilayah Anda secara efisien. Gunakan fitur <span className="text-red-600 font-black">Penjadwalan Instan</span> untuk mengotomatisasi pembagian sesi dengan mempertimbangkan waktu istirahat (jeda 1 jam).
                        </p>
                    </div>
                    <div className="hidden lg:block absolute -right-4 -bottom-4 opacity-5 pointer-events-none">
                        <Calendar className="w-48 h-48 text-black" />
                    </div>
                </div>

                {/* Table Section */}
                <JadwalTable data={jadwal || []} userName={session.name} />

            </main>
        </div>
    )
}