'use client';

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import { updateBidang } from '@/lib/admin-actions';
import { X, LayoutGrid, Palette } from 'lucide-react';

export default function BidangForm({
    isOpen,
    setIsOpen,
    initialData,
}: {
    isOpen: boolean;
    setIsOpen: (val: boolean) => void;
    initialData: any;
}) {
    const [isSubmitting, setIsSubmitting] = useState(false);

    const form = useForm({
        defaultValues: {
            name: initialData?.name || '',
            shortName: initialData?.shortName || '',
            desc: initialData?.desc || '',
            icon: initialData?.icon || '',
            color: initialData?.color || '',
        },
    });

    const onSubmit = async (values: any) => {
        setIsSubmitting(true);
        try {
            const result = await updateBidang(initialData.slug, values);
            if (result.success) {
                toast.success(result.message);
                setIsOpen(false);
            } else {
                toast.error(result.message);
            }
        } catch (e: any) {
            toast.error('Gagal memproses form', { description: e.message });
        } finally {
            setIsSubmitting(false);
        }
    };

    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50 flex items-center justify-center p-4">
            <div className="bg-white rounded-2xl shadow-2xl w-full max-w-xl max-h-[90vh] overflow-hidden flex flex-col">

                {/* Modal Header */}
                <div className="px-6 py-5 border-b border-slate-100 flex items-center justify-between shrink-0">
                    <div className="flex items-center gap-3">
                        <div className="w-9 h-9 rounded-xl bg-[#1e3a5f]/10 flex items-center justify-center">
                            <LayoutGrid className="w-4.5 h-4.5 text-[#1e3a5f]" />
                        </div>
                        <div>
                            <h2 className="text-lg font-bold text-slate-800">Edit Bidang / Lembaga</h2>
                            <p className="text-xs text-slate-400">{initialData?.name}</p>
                        </div>
                    </div>
                    <button
                        onClick={() => setIsOpen(false)}
                        className="p-2 rounded-xl hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-colors"
                    >
                        <X className="w-5 h-5" />
                    </button>
                </div>

                {/* Modal Body */}
                <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 overflow-hidden">
                    <div className="px-6 py-5 overflow-y-auto flex-1 space-y-5">

                        {/* Section: Informasi Dasar */}
                        <p className="text-xs font-bold text-slate-400 uppercase tracking-widest pb-1.5 border-b border-slate-100">
                            Informasi Dasar
                        </p>

                        <div className="grid grid-cols-2 gap-4">
                            <div className="col-span-2">
                                <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">
                                    Nama Lengkap
                                </label>
                                <input
                                    {...form.register('name')}
                                    placeholder="Nama lengkap bidang/lembaga"
                                    className="w-full px-3.5 py-2.5 rounded-lg border border-slate-200 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/10 transition-all bg-white"
                                />
                            </div>

                            <div>
                                <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">
                                    Singkatan (Short Name)
                                </label>
                                <input
                                    {...form.register('shortName')}
                                    placeholder="Akronim/Singkatan"
                                    className="w-full px-3.5 py-2.5 rounded-lg border border-slate-200 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/10 transition-all bg-white"
                                />
                            </div>
                        </div>

                        <div>
                            <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">
                                Deskripsi
                            </label>
                            <textarea
                                {...form.register('desc')}
                                rows={5}
                                placeholder="Penjelasan mengenai bidang/lembaga ini..."
                                className="w-full px-3.5 py-2.5 rounded-lg border border-slate-200 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/10 transition-all bg-white resize-none"
                            />
                            <p className="text-xs text-slate-400 mt-1">
                                Deskripsi ini akan tampil di Halaman Profil Publik HMF.
                            </p>
                        </div>

                        {/* Section: Tampilan & Gaya */}
                        <p className="text-xs font-bold text-slate-400 uppercase tracking-widest mt-5 pb-1.5 border-b border-slate-100">
                            Tampilan &amp; Gaya
                        </p>

                        <div className="grid grid-cols-2 gap-4">
                            <div>
                                <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">
                                    Ikon (Lucide)
                                </label>
                                <input
                                    {...form.register('icon')}
                                    placeholder="contoh: Users"
                                    className="w-full px-3.5 py-2.5 rounded-lg border border-slate-200 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/10 transition-all bg-white"
                                />
                                <p className="text-xs text-slate-400 mt-1">Nama ikon dari lucide-react</p>
                            </div>

                            <div>
                                <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">
                                    Gaya Warna (Tailwind)
                                </label>
                                <div className="relative">
                                    <Palette className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                                    <input
                                        {...form.register('color')}
                                        placeholder="from-red-500 to-rose-400"
                                        className="w-full pl-9 pr-3.5 py-2.5 rounded-lg border border-slate-200 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/10 transition-all bg-white"
                                    />
                                </div>
                                <p className="text-xs text-slate-400 mt-1">Gradient Tailwind untuk kartu bidang</p>
                            </div>
                        </div>
                    </div>

                    {/* Modal Footer */}
                    <div className="px-6 py-4 border-t border-slate-100 flex gap-3 justify-end shrink-0">
                        <button
                            type="button"
                            onClick={() => setIsOpen(false)}
                            className="border border-slate-200 text-slate-600 px-4 py-2 rounded-lg text-sm hover:bg-slate-50 transition-colors"
                        >
                            Batal
                        </button>
                        <button
                            type="submit"
                            disabled={isSubmitting}
                            className="bg-[#1e3a5f] text-white px-6 py-2 rounded-lg text-sm font-semibold hover:bg-[#1e3a5f]/90 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
                        >
                            {isSubmitting ? (
                                <span className="flex items-center gap-2">
                                    <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
                                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
                                    </svg>
                                    Menyimpan...
                                </span>
                            ) : 'Simpan Perubahan'}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
}