'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
}

interface ToastProps {
    message: string
    type: 'success' | 'error'
    onClose: () => void
}

function Toast({ message, type, onClose }: ToastProps) {
    useEffect(() => {
        const timer = setTimeout(onClose, 4000)
        return () => clearTimeout(timer)
    }, [onClose])

    return (
        <div
            className={`fixed top-6 right-6 z-50 flex items-center gap-3 px-5 py-4 rounded-xl border-2 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] animate-slide-in
                ${type === 'success'
                    ? 'bg-green-50 border-green-500 text-green-800'
                    : 'bg-red-50 border-red-500 text-red-800'
                }`}
            style={{ animation: 'slideIn 0.3s ease-out' }}
        >
            {type === 'success'
                ? <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0" />
                : <XCircle className="w-5 h-5 text-red-600 flex-shrink-0" />
            }
            <span className="font-semibold text-sm">{message}</span>
            <button
                onClick={onClose}
                className="ml-2 p-1 rounded-full hover:bg-black/10 transition-colors"
            >
                <X className="w-4 h-4" />
            </button>
        </div>
    )
}

export function EditPetugasForm({ petugas }: Props) {
    const [state, formAction, isPending] = useActionState(updatePetugas, null)
    const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null)

    useEffect(() => {
        if (state) {
            setToast({
                message: state.message,
                type: state.success ? 'success' : 'error',
            })
        }
    }, [state])

    return (
        <>
            {/* Toast Notification */}
            {toast && (
                <Toast
                    message={toast.message}
                    type={toast.type}
                    onClose={() => setToast(null)}
                />
            )}

            <style>{`
                @keyframes slideIn {
                    from { transform: translateX(110%); opacity: 0; }
                    to { transform: translateX(0); opacity: 1; }
                }
            `}</style>

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