'use client'

import { useActionState, useEffect, useState } from 'react'
import { updateAkunBalita } from '@/app/actions'
import { User, MapPin, Phone, Baby, Calendar, Lock, AtSign, CheckCircle, XCircle, X } from 'lucide-react'

interface AkunBalita {
    id: string
    nama_orang_tua: string
    alamat: string | null
    no_whatsapp: string | null
    nama_anak: string
    tanggal_lahir: string | null
    username: string
    password: string
}

interface Props {
    pengguna: AkunBalita
}

import { showSwal } from '@/lib/swal'

export function EditPenggunaForm({ pengguna }: Props) {
    const [state, formAction, isPending] = useActionState(updateAkunBalita, null)

    useEffect(() => {
        if (state) {
            if (state.success) {
                showSwal.success('Berhasil!', state.message)
            } else {
                showSwal.error('Gagal!', state.message)
            }
        }
    }, [state])

    const inputClass = "border-2 border-gray-200 rounded-lg p-3 focus:outline-none focus:border-black transition-colors w-full text-sm"
    const labelClass = "text-sm font-bold flex items-center gap-2 mb-1"

    return (
        <>
            <form action={formAction} className="flex flex-col gap-5">
                <input type="hidden" name="id" value={pengguna.id} />

                {/* Section: Data Orang Tua */}
                <div className="pb-2 mb-1 border-b border-gray-100">
                    <p className="text-xs font-bold uppercase tracking-widest text-gray-400">Data Orang Tua</p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                    {/* Nama Orang Tua */}
                    <div>
                        <label className={labelClass}><User className="w-4 h-4" /> Nama Orang Tua <span className="text-red-400">*</span></label>
                        <input type="text" name="nama_orang_tua" defaultValue={pengguna.nama_orang_tua} className={inputClass} required />
                    </div>

                    {/* No WhatsApp */}
                    <div>
                        <label className={labelClass}><Phone className="w-4 h-4" /> No. WhatsApp</label>
                        <input type="tel" name="no_whatsapp" defaultValue={pengguna.no_whatsapp || ''} className={inputClass} placeholder="08xxxxxxxxxx" />
                    </div>
                </div>

                {/* Alamat */}
                <div>
                    <label className={labelClass}><MapPin className="w-4 h-4" /> Alamat</label>
                    <textarea
                        name="alamat"
                        defaultValue={pengguna.alamat || ''}
                        className={`${inputClass} resize-none`}
                        rows={3}
                        placeholder="Masukkan alamat lengkap..."
                    />
                </div>

                {/* Section: Data Anak */}
                <div className="pb-2 mb-1 border-b border-gray-100 mt-2">
                    <p className="text-xs font-bold uppercase tracking-widest text-gray-400">Data Anak</p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                    {/* Nama Anak */}
                    <div>
                        <label className={labelClass}><Baby className="w-4 h-4" /> Nama Anak <span className="text-red-400">*</span></label>
                        <input type="text" name="nama_anak" defaultValue={pengguna.nama_anak} className={inputClass} required />
                    </div>

                    {/* Tanggal Lahir */}
                    <div>
                        <label className={labelClass}><Calendar className="w-4 h-4" /> Tanggal Lahir</label>
                        <input
                            type="date"
                            name="tanggal_lahir"
                            defaultValue={pengguna.tanggal_lahir || ''}
                            className={inputClass}
                        />
                    </div>
                </div>

                {/* Section: Akun */}
                <div className="pb-2 mb-1 border-b border-gray-100 mt-2">
                    <p className="text-xs font-bold uppercase tracking-widest text-gray-400">Data Akun</p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                    {/* Username */}
                    <div>
                        <label className={labelClass}><AtSign className="w-4 h-4" /> Username <span className="text-red-400">*</span></label>
                        <input type="text" name="username" defaultValue={pengguna.username} className={inputClass} required />
                    </div>

                    {/* Password */}
                    <div>
                        <label className={labelClass}><Lock className="w-4 h-4" /> Password <span className="text-red-400">*</span></label>
                        <input type="text" name="password" defaultValue={pengguna.password} className={inputClass} required />
                        <p className="text-[10px] text-gray-400 mt-1">Pastikan password aman dan mudah diingat.</p>
                    </div>
                </div>

                {/* Submit */}
                <div className="pt-4">
                    <button
                        type="submit"
                        disabled={isPending}
                        className="w-full bg-black text-white font-bold py-4 rounded-lg hover:bg-gray-800 transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,0.2)] hover:translate-x-[2px] hover:translate-y-[2px] disabled:opacity-60 disabled:cursor-not-allowed disabled:transform-none"
                    >
                        {isPending ? 'Menyimpan...' : 'Simpan Perubahan'}
                    </button>
                </div>
            </form>
        </>
    )
}