// app/admin/AdminForm.tsx

'use client';

import { useActionState, useEffect, useState } from 'react';
import { saveConfigAction } from './actions';

export default function AdminForm({ initialConfig }: { initialConfig: any }) {
    const [state, formAction, isPending] = useActionState(saveConfigAction, null);
    const [showToast, setShowToast] = useState(false);

    useEffect(() => {
        if (state?.success) {
            setShowToast(true);
            const timer = setTimeout(() => setShowToast(false), 3000);
            return () => clearTimeout(timer);
        }
    }, [state]);

    return (
        <form action={formAction} className="flex flex-col gap-8">
            {showToast && (
                <div className="fixed top-5 right-5 bg-green-500 text-white px-6 py-3 rounded-lg shadow-2xl font-bold z-50 animate-bounce">
                    ✓ Ändringar sparade!
                </div>
            )}

            {/* Startsida */}
            <section className="border-b pb-6">
                <h2 className="text-xl font-bold mb-4 border-l-4 border-[#fdb84b] pl-2 text-[#406185]">Startsida</h2>
                <label className="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="showBeachPromo" defaultChecked={initialConfig.showBeachPromo} className="w-5 h-5 accent-[#406185]" />
                    <span className="font-semibold">Visa Beach-Promo bar</span>
                </label>
            </section>

            {/* Beach-Turnering */}
            <section className="flex flex-col gap-6">
                <h2 className="text-xl font-bold border-l-4 border-[#fdb84b] pl-2 text-[#406185]">Beach-Turnering</h2>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label className="block text-sm font-bold mb-1">Matchstart</label>
                        <input type="datetime-local" name="matchStart" defaultValue={initialConfig.beachPage.matchStart} className="w-full border p-2 rounded focus:ring-2 focus:ring-[#406185] outline-none" />
                    </div>
                    <div>
                        <label className="block text-sm font-bold mb-1">Länk till Mat- & Sommarfesten</label>
                        <input name="festivalLink" defaultValue={initialConfig.beachPage.festivalLink} className="w-full border p-2 rounded focus:ring-2 focus:ring-[#406185] outline-none" />
                    </div>
                </div>

                <div>
                    <label className="block text-sm font-bold mb-1">Meddelande vid stängd anmälan</label>
                    <textarea name="closeReason" defaultValue={initialConfig.beachPage.closeReason} className="w-full border p-2 rounded h-20" />
                </div>

                <div>
                    <label className="block text-sm font-bold mb-1">Övrig info (en rad per punkt på sajten)</label>
                    <textarea name="otherInfo" defaultValue={initialConfig.beachPage.otherInfo} className="w-full border p-2 rounded h-24" />
                </div>

                <div>
                    <label className="block text-sm font-bold mb-1">Pris-text (längst ner på infosidan)</label>
                    <input name="prizesText" defaultValue={initialConfig.beachPage.prizesText} className="w-full border p-2 rounded" />
                </div>

                <label className="flex items-center gap-2 cursor-pointer text-red-600 bg-red-50 p-3 rounded-lg border border-red-100">
                    <input type="checkbox" name="isClosedOverride" defaultChecked={initialConfig.beachPage.isClosedOverride} className="w-5 h-5 accent-red-600" />
                    <span className="font-bold uppercase">Stäng anmälan manuellt</span>
                </label>
            </section>

            <button type="submit" disabled={isPending} className="bg-[#406185] text-white py-4 rounded-lg font-bold text-lg hover:bg-black transition-all active:scale-95 disabled:bg-gray-400">
                {isPending ? 'Sparar...' : 'Spara inställningar'}
            </button>
        </form>
    );
}