'use client'

import { useActionState, useEffect, useState } from 'react'
import { updatePetugas } from '@/app/actions'
import { User, Phone, Lock, UserCog, CheckCircle, XCircle, X } from 'lucide-react'

interface PetugasData {
    id: string
    nama: string
    username: string
    no_telp: string | null
    password: string
}

interface Props {
    petugas: PetugasData
}

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

export function EditPetugasForm({ petugas }: Props) {
    const [state, formAction, isPending] = useActionState(updatePetugas, null)

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

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

                {/* Nama */}
                <div className="flex flex-col gap-2">
                    <label className="text-sm font-bold flex items-center gap-2">
                        <User className="w-4 h-4" />
                        Nama Lengkap
                    </label>
                    <input
                        type="text"
                        name="nama"
                        defaultValue={petugas.nama}
                        className="border-2 border-gray-200 rounded-lg p-3 focus:outline-none focus:border-black transition-colors"
                        required
                    />
                </div>

                {/* Username */}
                <div className="flex flex-col gap-2">
                    <label className="text-sm font-bold flex items-center gap-2">
                        <UserCog className="w-4 h-4" />
                        Username
                    </label>
                    <input
                        type="text"
                        name="username"
                        defaultValue={petugas.username}
                        className="border-2 border-gray-200 rounded-lg p-3 focus:outline-none focus:border-black transition-colors"
                        required
                    />
                </div>

                {/* No Telp */}
                <div className="flex flex-col gap-2">
                    <label className="text-sm font-bold flex items-center gap-2">
                        <Phone className="w-4 h-4" />
                        Nomor Telepon
                    </label>
                    <input
                        type="tel"
                        name="no_telp"
                        defaultValue={petugas.no_telp || ''}
                        className="border-2 border-gray-200 rounded-lg p-3 focus:outline-none focus:border-black transition-colors"
                    />
                </div>

                {/* Password */}
                <div className="flex flex-col gap-2">
                    <label className="text-sm font-bold flex items-center gap-2">
                        <Lock className="w-4 h-4" />
                        Password
                    </label>
                    <input
                        type="text"
                        name="password"
                        defaultValue={petugas.password}
                        className="border-2 border-gray-200 rounded-lg p-3 focus:outline-none focus:border-black transition-colors"
                        required
                    />
                    <p className="text-[10px] text-gray-400">Pastikan password anda aman dan mudah diingat.</p>
                </div>

                <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>
        </>
    )
}