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

interface Props {
    params: Promise<{ id: string }>
}

export default async function DetailPenggunaPage({ params }: Props) {
    const { id } = await params

    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: pengguna, error } = await supabase
        .from('akun_balita')
        .select('id, nama_orang_tua, alamat, no_whatsapp, nama_anak, tanggal_lahir, username, password')
        .eq('id', id)
        .single()

    if (error || !pengguna) {
        return (
            <div className="min-h-screen flex items-center justify-center text-red-500 font-semibold">
                Data pengguna tidak ditemukan.
            </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/manajemen-akun/pengguna" 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 Daftar</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">Edit Akun Pengguna</h1>
                        <p className="text-[10px] text-gray-500 tracking-widest uppercase mt-0.5">DETAIL & EDIT DATA</p>
                    </div>
                </div>
                <LogoutButton />
            </header>

            <main className="p-8 max-w-3xl mx-auto flex-1 w-full">
                <div className="bg-white rounded-xl border border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] p-8">

                    {/* Card Header */}
                    <div className="flex items-center gap-4 mb-8 pb-6 border-b border-gray-100">
                        <div className="w-16 h-16 rounded-full bg-blue-50 border-2 border-blue-200 flex items-center justify-center text-blue-600 text-2xl font-bold">
                            {pengguna.nama_orang_tua?.charAt(0).toUpperCase() ?? '?'}
                        </div>
                        <div>
                            <h2 className="text-2xl font-bold">{pengguna.nama_orang_tua}</h2>
                            <div className="flex items-center gap-2 mt-1">
                                <span className="text-xs bg-blue-100 border border-blue-200 text-blue-700 px-2 py-0.5 rounded-full font-semibold flex items-center gap-1">
                                    <Users className="w-3 h-3" /> Pengguna
                                </span>
                                <span className="text-xs text-gray-400 font-mono">@{pengguna.username}</span>
                            </div>
                        </div>
                    </div>

                    <EditPenggunaForm pengguna={pengguna} />
                </div>
            </main>
        </div>
    )
}