'use client';

import { useRGPD } from "../../../../app/hooks/useRGPD";
import RGPDHistory from "./RGPDHistory";
import RGPDStatusBadge from "./RGPDStatusBadge";
import { useRGPDDetails } from "../../../../app/hooks/useRGPDDetails";
import { RGPDRequestStatus } from "../../../../app/config/rgpd.types";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { DateUtils } from "../../../../app/utils/date";

interface Props {
    id: string;
}

export function RGPDDetail({ id }: Props) {
    const router = useRouter();

    const { request, loading, error } = useRGPDDetails(id);

    const { updateRequestStatus, removeRequest } = useRGPD();

    const updateStatus = async (statut: string) => {
        if (!request?.id) return;

        await updateRequestStatus(request.id, statut);
    };

    async function handleDelete() {
        const confirmed = window.confirm("Supprimer cette demande RGPD ?");

        if (!confirmed) return;

        await removeRequest(Number(id));

        router.push("/admin/rgpd");
    }

    function handleEdit() {
        router.push(`/admin/rgpd/${id}/edit`);
    }

    if (loading) {
        return (
            <div className="p-6">
                Chargement...
            </div>
        );
    }

    if (error) {
        return (
            <div className="p-6 text-red-500">
                {error}
            </div>
        );
    }

    if (!request) {
        return (
            <div className="p-6">
                Demande introuvable
            </div>
        );
    }

    return (
        <div className="p-2 bg-[#f4f8f6] min-h-screen">
            <div className="max-w-8xl mx-auto flex flex-col gap-2">

                <div className="flex gap-2">

                    <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="bg-gradient-to-r from-[#2f7d5f] to-[#3f9b74] rounded-3xl p-4 shadow-xl text-white">

                    <div className="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-2">

                        <div>
                            <p className="text-white/80 text-sm mb-1">
                                Administration / RGPD
                            </p>


                            <h1 className="text-4xl font-bold mb-1">
                                Demande RGPD #{request.id}
                            </h1>

                            <p className="text-white/90">
                                Gestion de la demande de droits RGPD
                            </p>

                        </div>

                        <RGPDStatusBadge
                            status={request.statut}
                        />

                        <button
                            onClick={handleEdit}
                            className="
      px-1 py-1
      rounded-xl
      bg-amber-500
      text-white
      font-medium
      hover:bg-amber-600
      transition
      cursor-pointer
    "
                        >
                            Modifier
                        </button>


                        <button
                            onClick={handleDelete}
                            className="
      px-1 py-1
      rounded-xl
      bg-red-600
      text-white
      font-medium
      hover:bg-red-700
      transition
      cursor-pointer
    "
                        >
                            Supprimer
                        </button>

                    </div>

                </div>

                <div className="bg-white rounded-3xl p-4 shadow-sm border border-[#dce8e2]">

                    <h2 className="text-xl font-semibold text-[#1f5f4a] mb-1">
                        Informations générales
                    </h2>

                    <div className="grid md:grid-cols-3 gap-2">

                        <div>
                            <span className="text-sm text-[#6b7f77]">
                                Usager
                            </span>

                            <p className="font-medium">
                                {request.usager_prenom} {request.usager_nom}
                            </p>
                        </div>

                        <div>
                            <span className="text-sm text-[#6b7f77]">
                                Référence dossier
                            </span>

                            <p className="font-medium">
                                {request.dossier_reference}
                            </p>
                        </div>

                        <div>
                            <span className="text-sm text-[#6b7f77]">
                                Type
                            </span>

                            <p className="font-medium">
                                {request.type}
                            </p>
                        </div>

                        <div>
                            <span className="text-sm text-[#6b7f77]">
                                Canal
                            </span>

                            <p className="font-medium">
                                {request.canal}
                            </p>
                        </div>

                        <div>
                            <span className="text-sm text-[#6b7f77]">
                                Réception
                            </span>

                            <p className="font-medium">
                                {DateUtils.short(request.date_reception)}
                            </p>
                        </div>

                        <div>
                            <span className="text-sm text-[#6b7f77]">
                                Date limite
                            </span>

                            <p className="font-medium">
                                {DateUtils.short(request.date_limite)}
                            </p>
                        </div>
                    </div>

                </div>

                <div className="
  bg-white
  rounded-3xl
  p-4
  shadow-sm
  border border-[#dce8e2]
">

                    <h2 className="
    text-xl
    font-semibold
    text-[#1f5f4a]
    mb-1.5
  ">
                        Description
                    </h2>

                    <div className="
    bg-[#f8fbf9]
    rounded-2xl
    p-2.5
  ">
                        {request.description_demande}
                    </div>

                    {request.notes_internes && (
                        <div className="md:col-span-2">
                            <strong>Notes internes : </strong>
                            {request.notes_internes}
                        </div>
                    )}

                </div>

                <div className="
  bg-white
  rounded-3xl
  p-4
  shadow-sm
  border border-[#dce8e2]
">

                    <h2 className="
    text-xl
    font-semibold
    text-[#1f5f4a]
    mb-2
  ">
                        Traitement
                    </h2>

                    <div className="flex flex-wrap gap-2">

                        <button
                            onClick={() =>
                                updateStatus(RGPDRequestStatus.EN_COURS.toString())
                            }
                            className="
        px-1 py-1
        rounded-xl
        bg-amber-500
        text-white
        cursor-pointer
      "
                        >
                            Passer en cours
                        </button>

                        <button
                            onClick={() =>
                                updateStatus(RGPDRequestStatus.TERMINEE.toString())
                            }
                            className="
        px-1 py-1
        rounded-xl
        bg-green-600
        text-white
        cursor-pointer
      "
                        >
                            Marquer terminée
                        </button>

                        <button
                            onClick={() =>
                                updateStatus(RGPDRequestStatus.REFUSEE.toString())
                            }
                            className="
        px-1 py-1
        rounded-xl
        bg-red-600
        text-white
        cursor-pointer
      "
                        >
                            Refuser
                        </button>

                    </div>

                </div>

                <div className="
  bg-white
  rounded-3xl
  p-4
  shadow-sm
  border border-[#dce8e2]
">

                    <h2 className="
    text-xl
    font-semibold
    text-[#1f5f4a]
    mb-2
  ">
                        Actions RGPD
                    </h2>

                    <div className="grid md:grid-cols-3 gap-2">

                        <button
                            className="
        p-1 rounded-2xl
        border border-[#dce8e2]
        hover:bg-[#f4f8f6]
        cursor-pointer
      "
                        >
                            📄 Export Accès
                        </button>

                        <button
                            className="
        p-1 rounded-2xl
        border border-[#dce8e2]
        hover:bg-[#f4f8f6]
        cursor-pointer
      "
                        >
                            📦 Export Portabilité
                        </button>

                        <button
                            className="
        p-1 rounded-2xl
        border border-red-300
        text-red-600
        hover:bg-red-50
        cursor-pointer
      "
                        >
                            🗑 Anonymiser
                        </button>

                    </div>

                </div>

                <RGPDHistory
                    history={request.historique || []}
                />

            </div>
        </div>
    );
}