'use client';

import { useRGPD } from "../../../../app/hooks/useRGPD";
import RGPDTable from "../../../../app/components/admin/rgpd/RGPDTable";
import RGPDStats from "../../../../app/components/admin/rgpd/RGPDStats";
import Link from "next/link";

export function RGPDList() {
  const { requests, stats, loading } = useRGPD();

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

  if (!stats) {
    return (
      <div className="p-6 text-red-600">
        Impossible de charger les statistiques.
      </div>
    );
  }

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

      <Link
        href="/admin"
        className="
          px-1 py-1 rounded-xl
          bg-white border border-[#dce8e2]
          text-[#2f5d4b]
        "
      >
        ← Retour à l'espace admin
      </Link>

      <div className="max-w-8xl mx-auto flex flex-col gap-2 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">
            Gestion RGPD
          </h1>


          <p className="text-white/90">
            Gestion des demandes d'exercice des droits
            des usagers (accès, rectification,
            effacement, portabilité, opposition...).
          </p>
        </div>

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

          <Link
            href="/admin/rgpd/create"
            className="
        px-1 py-1
        rounded-xl
        bg-[#2f7d5f]
        text-white text-sm font-medium
        hover:bg-[#256b52]
        transition
      "
          >
            ➕ Nouvelle demande
          </Link>

        </div>

        <RGPDStats stats={stats} />

        <div
          className="
            bg-white
            rounded-2xl
            shadow-sm
            border border-[#dce8e2]
            overflow-hidden
          "
        >

          <div className="px-3 py-3 border-b border-[#eef2ef]">

            <div className="flex justify-between items-center">

              <h2
                className="
                  font-semibold
                  text-[#1f5f4a]
                "
              >
                Liste des demandes
              </h2>

              <span
                className="
                  text-sm
                  text-[#6b7f77]
                "
              >
                {requests.length} demande(s)
              </span>

            </div>

          </div>

          {requests.length === 0 ? (
            <div
              className="
                p-12
                text-center
                text-[#6b7f77]
              "
            >
              Aucune demande trouvée.
            </div>
          ) : (
            <RGPDTable
              requests={requests}
            />
          )}

        </div>
      </div>
    </div>
  );
}