'use client';

import { useRouter } from "next/navigation";
import RGPDForm from "./RGPDForm";
import { useRGPDForm } from "../../../../app/hooks/useRGPDForm";
import { useRGPD } from "../../../../app/hooks/useRGPD";
import { useToast } from "../../../../context/ToastContext";
import { measure } from "../../../../app/utils/performance";
import Link from "next/link";

export function RGPDCreate() {
    const router = useRouter();

    const { createRequest } = useRGPD();

    const { formData, updateField } = useRGPDForm();

    const { showToast } = useToast();

    async function handleSubmit() {
        const request = await measure("Chargement création demande RGPD", () => createRequest(formData));
        showToast('success', 'Demande RGPD enregistrée.');
        router.push(`/admin/rgpd/${request.id}`);
    }

    return (
        <div className="p-2 bg-[#f4f8f6] min-h-screen">

            <div className="flex gap-3">

                <Link
                    href="/admin/rgpd"
                    className="
          px-1 py-1 rounded-xl
          bg-white border border-[#dce8e2]
          text-[#2f5d4b]
        "
                >
                    ← Retour liste demandes
                </Link>
            </div>

            <div className="max-w-8xl mx-auto flex flex-col gap-1 mt-4">


                <div
                    className="
            bg-gradient-to-r
            from-[#2f7d5f]
            to-[#3f9b74]
            rounded-3xl
            p-4
            shadow-xl
            text-white
          "
                >
                    <h1 className="text-4xl font-bold mb-1">
                        Nouvelle demande RGPD
                    </h1>

                    <p className="text-white/90">
                        Création d'une demande d'exercice des droits.
                    </p>
                </div>
                <RGPDForm
                    formData={formData}
                    updateField={updateField}
                    onSubmit={handleSubmit}
                />

            </div>

        </div>
    );
}