'use client';

import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
import Button from "@/components/Button";

export default function CookiesPage() {
  const [preferences, setPreferences] = useState({
    essential: true,
    analytics: false,
    marketing: false,
  });

  const handleToggle = (type: 'analytics' | 'marketing') => {
    setPreferences(prev => ({
      ...prev,
      [type]: !prev[type]
    }));
  };

  const handleAcceptAll = () => {
    setPreferences({
      essential: true,
      analytics: true,
      marketing: true,
    });
    alert('Vos préférences ont été enregistrées');
  };

  const handleRejectAll = () => {
    setPreferences({
      essential: true,
      analytics: false,
      marketing: false,
    });
    alert('Vos préférences ont été enregistrées');
  };

  const handleSavePreferences = () => {
    alert('Vos préférences ont été enregistrées');
  };

  return (
    <div className="py-12">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-4xl md:text-5xl font-bold text-primary-300 mb-8 text-center">
          Gestion des cookies
        </h1>

        <div className="mb-8 text-center text-gray-600">
          <p>Gérez vos préférences en matière de cookies</p>
        </div>

        {/* Introduction */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle className="text-xl">Qu'est-ce qu'un cookie ?</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <p className="text-gray-700">
              Un cookie est un petit fichier texte déposé sur votre terminal (ordinateur, tablette,
              smartphone) lors de la visite d'un site internet.
            </p>
            <p className="text-gray-700">
              Les cookies permettent de reconnaître votre navigateur et de mémoriser certaines
              informations concernant votre visite (langue, préférences, etc.).
            </p>
          </CardContent>
        </Card>

        {/* Types de cookies */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle className="text-xl">Les cookies que nous utilisons</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* Cookies essentiels */}
            <div className="border-l-4 border-primary-600 pl-4">
              <div className="flex items-center justify-between mb-3">
                <h3 className="font-semibold text-gray-900">Cookies essentiels</h3>
                <span className="text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded">
                  Toujours actifs
                </span>
              </div>
              <p className="text-gray-700 mb-2">
                Ces cookies sont nécessaires au fonctionnement du site et ne peuvent pas être
                désactivés. Ils permettent notamment :
              </p>
              <ul className="list-disc list-inside space-y-1 text-gray-700 ml-4">
                <li>La gestion de votre session de connexion</li>
                <li>La sécurité du site</li>
                <li>Le bon fonctionnement du panier et des formulaires</li>
              </ul>
              <p className="text-sm text-gray-600 mt-2">
                Durée de conservation : Session / 1 an
              </p>
            </div>

            {/* Cookies analytiques */}
            <div className="border-l-4 border-blue-600 pl-4">
              <div className="flex items-center justify-between mb-3">
                <h3 className="font-semibold text-gray-900">Cookies analytiques</h3>
                <label className="relative inline-flex items-center cursor-pointer">
                  <input
                    type="checkbox"
                    checked={preferences.analytics}
                    onChange={() => handleToggle('analytics')}
                    className="sr-only peer"
                  />
                  <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
                </label>
              </div>
              <p className="text-gray-700 mb-2">
                Ces cookies nous permettent de mesurer l'audience du site et d'analyser la
                navigation afin d'améliorer nos services :
              </p>
              <ul className="list-disc list-inside space-y-1 text-gray-700 ml-4">
                <li>Nombre de visiteurs et pages consultées</li>
                <li>Durée de visite et parcours utilisateur</li>
                <li>Analyse des performances du site</li>
              </ul>
              <p className="text-sm text-gray-600 mt-2">
                Outils : Google Analytics, Matomo<br />
                Durée de conservation : 13 mois
              </p>
            </div>

            {/* Cookies marketing */}
            <div className="border-l-4 border-purple-600 pl-4">
              <div className="flex items-center justify-between mb-3">
                <h3 className="font-semibold text-gray-900">Cookies marketing</h3>
                <label className="relative inline-flex items-center cursor-pointer">
                  <input
                    type="checkbox"
                    checked={preferences.marketing}
                    onChange={() => handleToggle('marketing')}
                    className="sr-only peer"
                  />
                  <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
                </label>
              </div>
              <p className="text-gray-700 mb-2">
                Ces cookies permettent de vous proposer des publicités adaptées à vos centres
                d'intérêt :
              </p>
              <ul className="list-disc list-inside space-y-1 text-gray-700 ml-4">
                <li>Personnalisation des contenus publicitaires</li>
                <li>Mesure de l'efficacité des campagnes</li>
                <li>Partage sur les réseaux sociaux</li>
              </ul>
              <p className="text-sm text-gray-600 mt-2">
                Partenaires : Facebook, Google Ads<br />
                Durée de conservation : 13 mois
              </p>
            </div>
          </CardContent>
        </Card>

        {/* Boutons d'action */}
        <Card className="mb-8">
          <CardContent className="pt-6">
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                onClick={handleAcceptAll}
                variant="primary"
                size="lg"
                className="px-8"
              >
                Tout accepter
              </Button>
              <Button
                onClick={handleSavePreferences}
                variant="outline"
                size="lg"
                className="px-8"
              >
                Enregistrer mes choix
              </Button>
              <Button
                onClick={handleRejectAll}
                variant="outline"
                size="lg"
                className="px-8"
              >
                Tout refuser
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* Gestion des cookies */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle className="text-xl">Comment gérer vos cookies ?</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <p className="text-gray-700">
              Vous pouvez à tout moment modifier vos préférences en matière de cookies en
              revenant sur cette page.
            </p>
            <p className="text-gray-700">
              Vous pouvez également gérer les cookies directement depuis votre navigateur :
            </p>
            <ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
              <li>
                <strong>Chrome :</strong>{" "}
                <a
                  href="https://support.google.com/chrome/answer/95647"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary-600 hover:text-primary-700 underline"
                >
                  Gérer les cookies sur Chrome
                </a>
              </li>
              <li>
                <strong>Firefox :</strong>{" "}
                <a
                  href="https://support.mozilla.org/fr/kb/activer-desactiver-cookies"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary-600 hover:text-primary-700 underline"
                >
                  Gérer les cookies sur Firefox
                </a>
              </li>
              <li>
                <strong>Safari :</strong>{" "}
                <a
                  href="https://support.apple.com/fr-fr/HT201265"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary-600 hover:text-primary-700 underline"
                >
                  Gérer les cookies sur Safari
                </a>
              </li>
              <li>
                <strong>Edge :</strong>{" "}
                <a
                  href="https://support.microsoft.com/fr-fr/microsoft-edge/supprimer-les-cookies-dans-microsoft-edge-63947406-40ac-c3b8-57b9-2a946a29ae09"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary-600 hover:text-primary-700 underline"
                >
                  Gérer les cookies sur Edge
                </a>
              </li>
            </ul>
          </CardContent>
        </Card>

        {/* Informations complémentaires */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle className="text-xl">En savoir plus</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <p className="text-gray-700">
              Pour plus d'informations sur les cookies et la protection de vos données personnelles,
              vous pouvez consulter :
            </p>
            <ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
              <li>
                Notre{" "}
                <a href="/privacy" className="text-primary-600 hover:text-primary-700 underline">
                  Politique de confidentialité
                </a>
              </li>
              <li>
                Le site de la CNIL :{" "}
                <a
                  href="https://www.cnil.fr/fr/cookies-et-autres-traceurs"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary-600 hover:text-primary-700 underline"
                >
                  www.cnil.fr
                </a>
              </li>
            </ul>
          </CardContent>
        </Card>

        {/* Contact */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle className="text-xl">Contact</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-gray-700">
              Pour toute question concernant les cookies :{" "}
              <a href="mailto:thetiptopgr3@gmail.com" className="text-primary-600 hover:text-primary-700 underline">
                thetiptopgr3@gmail.com
              </a>
            </p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}