import { useTheme } from "@xtablo/shared/contexts/ThemeContext";
import { Button } from "@xtablo/ui/components/button";
import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
import { Link } from "react-router-dom";

export function PrivacyPolicyPage() {
  const { theme, setTheme } = useTheme();

  const toggleTheme = () => {
    if (theme === "light") {
      setTheme("dark");
    } else if (theme === "dark") {
      setTheme("system");
    } else {
      setTheme("light");
    }
  };

  const getThemeIcon = () => {
    switch (theme) {
      case "light":
        return <SunIcon className="w-5 h-5" />;
      case "dark":
        return <MoonIcon className="w-5 h-5" />;
      case "system":
        return <MonitorIcon className="w-5 h-5" />;
      default:
        return <SunIcon className="w-5 h-5" />;
    }
  };

  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-8 max-w-4xl">
        {/* Header */}
        <div className="mb-8 flex items-center justify-between">
          <Link
            to="/"
            className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
          >
            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M15 19l-7-7 7-7"
              />
            </svg>
            Retour
          </Link>

          <Button
            variant="ghost"
            size="icon"
            onClick={toggleTheme}
            className="text-muted-foreground hover:text-foreground p-2"
            aria-label="Changer le thème"
          >
            {getThemeIcon()}
          </Button>
        </div>

        {/* Content */}
        <div className="bg-card rounded-lg border border-border p-8 shadow-sm">
          <h1 className="text-4xl font-bold text-foreground mb-8">Politique de confidentialité</h1>

          <div className="prose prose-slate dark:prose-invert max-w-none space-y-6">
            {/* Introduction */}
            <section>
              <p className="text-muted-foreground mb-3">
                Chez Xtablo, nous accordons une grande importance à la protection de vos données
                personnelles. Cette politique de confidentialité a pour objectif de vous informer
                sur la manière dont nous collectons, utilisons, partageons et protégeons vos
                informations personnelles conformément au Règlement Général sur la Protection des
                Données (RGPD) et à la loi Informatique et Libertés.
              </p>
              <p className="text-muted-foreground">
                En utilisant notre site web et nos services, vous acceptez les pratiques décrites
                dans cette politique de confidentialité.
              </p>
            </section>

            {/* Responsable du traitement */}
            <section>
              <h2 className="text-2xl font-semibold text-foreground mb-4">
                1. Responsable du traitement des données
              </h2>
              <div className="text-muted-foreground space-y-2">
                <p>Le responsable du traitement de vos données personnelles est :</p>
                <p>
                  <strong className="text-foreground">Xtablo</strong>
                  <br />
                  Société par actions simplifiée (SAS)
                  <br />
                  Siège social : France
                  <br />
                  Email :{" "}
                  <a href="mailto:support@xtablo.com" className="text-primary hover:underline">
                    support@xtablo.com
                  </a>
                </p>
              </div>
            </section>

            {/* Données collectées */}
            <section>
              <h2 className="text-2xl font-semibold text-foreground mb-4">
                2. Données personnelles collectées
              </h2>
              <p className="text-muted-foreground mb-3">
                Nous collectons différentes catégories de données personnelles en fonction de votre
                utilisation de nos services :
              </p>

              <div className="text-muted-foreground space-y-4">
                <div>
                  <h3 className="text-lg font-semibold text-foreground mb-2">
                    2.1. Données d'identification
                  </h3>
                  <ul className="list-disc pl-6 space-y-1">
                    <li>Prénom et nom</li>
                    <li>Adresse email professionnelle</li>
                    <li>Nom de l'entreprise</li>
                    <li>Mot de passe (crypté)</li>
                  </ul>
                </div>

                <div>
                  <h3 className="text-lg font-semibold text-foreground mb-2">
                    2.2. Données de connexion
                  </h3>
                  <ul className="list-disc pl-6 space-y-1">
                    <li>Adresse IP</li>
                    <li>Type et version du navigateur</li>
                    <li>Système d'exploitation</li>
                    <li>Date et heure de connexion</li>
                    <li>Pages visitées</li>
                  </ul>
                </div>

                <div>
                  <h3 className="text-lg font-semibold text-foreground mb-2">
                    2.3. Données d'utilisation
                  </h3>
                  <ul className="list-disc pl-6 space-y-1">
                    <li>Informations sur vos tablos et tableaux</li>
                    <li>Événements et rendez-vous créés</li>
                    <li>Messages et communications via la plateforme</li>
                    <li>Fichiers et documents partagés</li>
                  </ul>
                </div>
              </div>
            </section>

            {/* Finalités du traitement */}
            <section>
              <h2 className="text-2xl font-semibold text-foreground mb-4">
                3. Finalités du traitement
              </h2>
              <p className="text-muted-foreground mb-3">
                Nous utilisons vos données personnelles pour les finalités suivantes :
              </p>
              <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
                <li>
                  <strong className="text-foreground">Fourniture du service :</strong> Créer et
                  gérer votre compte, vous permettre d'accéder à nos fonctionnalités de
                  planification, de collaboration et de gestion de tablos.
                </li>
                <li>
                  <strong className="text-foreground">Communication :</strong> Vous envoyer des
                  notifications importantes concernant votre compte, des mises à jour du service, et
                  répondre à vos demandes de support.
                </li>
                <li>
                  <strong className="text-foreground">Amélioration du service :</strong> Analyser
                  l'utilisation de la plateforme pour améliorer nos fonctionnalités et votre
                  expérience utilisateur.
                </li>
                <li>
                  <strong className="text-foreground">Sécurité :</strong> Protéger nos services
                  contre les fraudes, les abus et les accès non autorisés.
                </li>
                <li>
                  <strong className="text-foreground">Obligations légales :</strong> Respecter nos
                  obligations légales et réglementaires.
                </li>
              </ul>
            </section>

            {/* Base légale */}
            <section>
              <h2 className="text-2xl font-semibold text-foreground mb-4">
                4. Base légale du traitement
              </h2>
              <p className="text-muted-foreground mb-3">
                Le traitement de vos données personnelles repose sur les bases légales suivantes :
              </p>
              <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
                <li>
                  <strong className="text-foreground">Exécution du contrat :</strong> Le traitement
                  est nécessaire à l'exécution du contrat de service que vous avez conclu avec nous.
                </li>
                <li>
                  <strong className="text-foreground">Consentement :</strong> Vous avez donné votre
                  consentement explicite pour certains traitements spécifiques.
                </li>
                <li>
                  <strong className="text-foreground">Intérêt légitime :</strong> Le traitement est
                  nécessaire aux fins de nos intérêts légitimes (amélioration du service, sécurité).
                </li>
                <li>
                  <strong className="text-foreground">Obligation légale :</strong> Le traitement est
                  nécessaire pour respecter une obligation légale qui nous incombe.
                </li>
              </ul>
            </section>

            {/* Partage des données */}
            <section>
              <h2 className="text-2xl font-semibold text-foreground mb-4">
                5. Partage et destinataires des données
              </h2>
              <p className="text-muted-foreground mb-3">
                Vos données personnelles peuvent être partagées avec :
              </p>
              <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
                <li>
                  <strong className="text-foreground">Membres de votre équipe :</strong> Les
                  utilisateurs avec lesquels vous collaborez sur des tablos partagés peuvent accéder
                  aux informations que vous partagez volontairement.
                </li>
                <li>
                  <strong className="text-foreground">Prestataires de services :</strong> Nous
                  faisons appel à des prestataires tiers pour l'hébergement, l'envoi d'emails,
                  l'analyse de données et le support client. Ces prestataires sont contractuellement
                  tenus de protéger vos données.
                </li>
                <li>
                  <strong className="text-foreground">Autorités légales :</strong> Nous pouvons
                  divulguer vos données si la loi l'exige ou en réponse à une demande légale valide.
                </li>
              </ul>
              <p className="text-muted-foreground mt-3">
                Nous ne vendons jamais vos données personnelles à des tiers à des fins marketing.
              </p>
            </section>

            {/* Transferts internationaux */}
            <section>
              <h2 className="text-2xl font-semibold text-foreground mb-4">
                6. Transferts internationaux de données
              </h2>
              <p className="text-muted-foreground mb-3">
                Vos données peuvent être transférées et traitées dans des pays situés en dehors de
                l'Union européenne. Dans ce cas, nous veillons à ce que des garanties appropriées
                soient mises en place pour protéger vos données conformément au RGPD, notamment par
                le biais de :
              </p>
              <ul className="list-disc pl-6 space-y-1 text-muted-foreground">
                <li>Clauses contractuelles types approuvées par la Commission européenne</li>
                <li>Certification Privacy Shield (pour les États-Unis)</li>
                <li>Autres mécanismes de transfert reconnus par le RGPD</li>
              </ul>
            </section>

            {/* Durée de conservation */}
            <section>
              <h2 className="text-2xl font-semibold text-foreground mb-4">
                7. Durée de conservation des données
              </h2>
              <p className="text-muted-foreground mb-3">
                Nous conservons vos données personnelles pendant la durée nécessaire aux finalités
                pour lesquelles elles ont été collectées :
              </p>
              <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
                <li>
                  <strong className="text-foreground">Données de compte :</strong> Pendant toute la
                  durée de votre utilisation du service, puis 3 ans après la fermeture de votre
                  compte.
                </li>
                <li>
                  <strong className="text-foreground">Données de connexion :</strong> Maximum 12
                  mois.
                </li>
                <li>
                  <strong className="text-foreground">Données de facturation :</strong> 10 ans
                  conformément aux obligations comptables et fiscales.
                </li>
              </ul>
              <p className="text-muted-foreground mt-3">
                À l'issue de ces périodes, vos données sont supprimées ou anonymisées de manière
                irréversible.
              </p>
            </section>

            {/* Sécurité */}
            <section>
              <h2 className="text-2xl font-semibold text-foreground mb-4">
                8. Sécurité des données
              </h2>
              <p className="text-muted-foreground mb-3">
                Nous mettons en œuvre des mesures techniques et organisationnelles appropriées pour
                protéger vos données personnelles contre tout accès non autorisé, modification,
                divulgation ou destruction :
              </p>
              <ul className="list-disc pl-6 space-y-1 text-muted-foreground">
                <li>Chiffrement des données en transit (HTTPS/TLS) et au repos</li>
                <li>Authentification sécurisée et gestion des accès</li>
                <li>Surveillance et journalisation des accès</li>
                <li>Sauvegardes régulières et plans de continuité d'activité</li>
                <li>Formation régulière de nos équipes sur la protection des données</li>
              </ul>
            </section>

            {/* Droits des utilisateurs */}
            <section>
              <h2 className="text-2xl font-semibold text-foreground mb-4">9. Vos droits</h2>
              <p className="text-muted-foreground mb-3">
                Conformément au RGPD et à la loi Informatique et Libertés, vous disposez des droits
                suivants concernant vos données personnelles :
              </p>
              <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
                <li>
                  <strong className="text-foreground">Droit d'accès :</strong> Vous pouvez obtenir
                  une copie de vos données personnelles.
                </li>
                <li>
                  <strong className="text-foreground">Droit de rectification :</strong> Vous pouvez
                  demander la correction de données inexactes ou incomplètes.
                </li>
                <li>
                  <strong className="text-foreground">Droit à l'effacement :</strong> Vous pouvez
                  demander la suppression de vos données dans certaines circonstances.
                </li>
                <li>
                  <strong className="text-foreground">Droit à la limitation du traitement :</strong>{" "}
                  Vous pouvez demander la limitation du traitement de vos données dans certains cas.
                </li>
                <li>
                  <strong className="text-foreground">Droit à la portabilité :</strong> Vous pouvez
                  recevoir vos données dans un format structuré et couramment utilisé.
                </li>
                <li>
                  <strong className="text-foreground">Droit d'opposition :</strong> Vous pouvez vous
                  opposer au traitement de vos données pour des motifs légitimes.
                </li>
                <li>
                  <strong className="text-foreground">Droit de retirer votre consentement :</strong>{" "}
                  Lorsque le traitement est fondé sur votre consentement, vous pouvez le retirer à
                  tout moment.
                </li>
              </ul>
              <p className="text-muted-foreground mt-4">
                Pour exercer ces droits, vous pouvez nous contacter à l'adresse suivante :{" "}
                <a href="mailto:support@xtablo.com" className="text-primary hover:underline">
                  support@xtablo.com
                </a>
              </p>
              <p className="text-muted-foreground mt-2">
                Nous nous engageons à répondre à votre demande dans un délai d'un mois à compter de
                sa réception.
              </p>
            </section>

            {/* Cookies */}
            <section>
              <h2 className="text-2xl font-semibold text-foreground mb-4">
                10. Cookies et technologies similaires
              </h2>
              <p className="text-muted-foreground mb-3">
                Notre site utilise des cookies et des technologies similaires pour améliorer votre
                expérience utilisateur et analyser l'utilisation de nos services.
              </p>

              <div className="text-muted-foreground space-y-3">
                <div>
                  <h3 className="text-lg font-semibold text-foreground mb-2">
                    Types de cookies utilisés :
                  </h3>
                  <ul className="list-disc pl-6 space-y-1">
                    <li>
                      <strong className="text-foreground">Cookies essentiels :</strong> Nécessaires
                      au fonctionnement du site (authentification, sécurité).
                    </li>
                    <li>
                      <strong className="text-foreground">Cookies de performance :</strong> Nous
                      permettent d'analyser l'utilisation du site et d'améliorer ses performances.
                    </li>
                    <li>
                      <strong className="text-foreground">Cookies de préférences :</strong>{" "}
                      Mémorisent vos préférences (langue, thème).
                    </li>
                  </ul>
                </div>
                <p>
                  Vous pouvez gérer vos préférences en matière de cookies via les paramètres de
                  votre navigateur. Notez que la désactivation de certains cookies peut affecter le
                  fonctionnement du site.
                </p>
              </div>
            </section>

            {/* Modifications */}
            <section>
              <h2 className="text-2xl font-semibold text-foreground mb-4">
                11. Modifications de la politique de confidentialité
              </h2>
              <p className="text-muted-foreground">
                Nous nous réservons le droit de modifier cette politique de confidentialité à tout
                moment pour refléter les changements dans nos pratiques ou pour des raisons légales.
                Toute modification sera publiée sur cette page avec une date de mise à jour. Nous
                vous encourageons à consulter régulièrement cette page pour rester informé de la
                manière dont nous protégeons vos données.
              </p>
            </section>

            {/* Réclamations */}
            <section>
              <h2 className="text-2xl font-semibold text-foreground mb-4">12. Réclamations</h2>
              <p className="text-muted-foreground mb-3">
                Si vous estimez que vos droits en matière de protection des données n'ont pas été
                respectés, vous avez le droit d'introduire une réclamation auprès de la Commission
                Nationale de l'Informatique et des Libertés (CNIL) :
              </p>
              <div className="text-muted-foreground space-y-1">
                <p>
                  <strong className="text-foreground">CNIL</strong>
                  <br />3 Place de Fontenoy
                  <br />
                  TSA 80715
                  <br />
                  75334 PARIS CEDEX 07
                  <br />
                  Téléphone : 01 53 73 22 22
                  <br />
                  Site web :{" "}
                  <a
                    href="https://www.cnil.fr"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-primary hover:underline"
                  >
                    https://www.cnil.fr
                  </a>
                </p>
              </div>
            </section>

            {/* Contact */}
            <section>
              <h2 className="text-2xl font-semibold text-foreground mb-4">13. Nous contacter</h2>
              <p className="text-muted-foreground mb-3">
                Pour toute question concernant cette politique de confidentialité ou le traitement
                de vos données personnelles, vous pouvez nous contacter :
              </p>
              <div className="text-muted-foreground space-y-1">
                <p>
                  <strong className="text-foreground">Par email :</strong>{" "}
                  <a href="mailto:support@xtablo.com" className="text-primary hover:underline">
                    support@xtablo.com
                  </a>
                </p>
                <p>
                  <strong className="text-foreground">Par courrier :</strong> Xtablo, France
                </p>
              </div>
            </section>

            {/* Date de mise à jour */}
            <section className="pt-6 border-t border-border">
              <p className="text-sm text-muted-foreground italic">
                Dernière mise à jour :{" "}
                {new Date().toLocaleDateString("fr-FR", {
                  year: "numeric",
                  month: "long",
                  day: "numeric",
                })}
              </p>
            </section>
          </div>
        </div>
      </div>
    </div>
  );
}
