'use client';

import { useRef } from 'react';
import { motion, useInView } from 'framer-motion';
import { useTranslations } from 'next-intl';
import {
  Cookie,
  Settings,
  BarChart3,
  Target,
  Shield,
  ToggleLeft,
  Mail,
  type LucideIcon,
} from 'lucide-react';
import { LandingHeader, LandingFooter } from '@/components/layout';
import { ESSENTIAL_STORAGE, FUNCTIONAL_STORAGE, type StoredItem } from '@/lib/legal/processing';

type CookieTypeKey = 'essential' | 'analytics' | 'marketing' | 'functional';

interface CookieTypeConfig {
  key: CookieTypeKey;
  icon: LucideIcon;
  required: boolean;
  items: readonly StoredItem[];
}

/**
 * Inventaire reel de ce que le site depose.
 *
 * La version precedente listait Google Analytics (`_ga`, `_gid`, `_gat`),
 * Facebook Pixel (`_fbp`), LinkedIn (`li_fat_id`) et HubSpot (`hubspotutk`).
 * Aucun de ces scripts n'est charge par l'application : annoncer des traceurs
 * qui n'existent pas est aussi inexact que d'en dissimuler, et rendait le
 * consentement demande sans objet. Les categories analytiques et marketing
 * restent affichees, vides, pour que leur absence soit une information.
 */
const COOKIE_TYPES: CookieTypeConfig[] = [
  { key: 'essential', icon: Shield, required: true, items: ESSENTIAL_STORAGE },
  { key: 'functional', icon: Settings, required: false, items: FUNCTIONAL_STORAGE },
  { key: 'analytics', icon: BarChart3, required: false, items: [] },
  { key: 'marketing', icon: Target, required: false, items: [] },
];

export default function CookiesPage() {
  const t = useTranslations('marketing.cookies');
  const tCommon = useTranslations('marketing.common');
  const heroRef = useRef(null);
  const contentRef = useRef(null);

  const isHeroInView = useInView(heroRef, { once: true });
  const isContentInView = useInView(contentRef, { once: true });

  const containerVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.6,
        staggerChildren: 0.1,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5 },
    },
  };

  return (
    <div className="min-h-screen bg-white">
      <LandingHeader />

      {/* Hero Section */}
      <section
        ref={heroRef}
        className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden"
      >
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
        </div>

        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center"
          >
            <motion.div
              initial={{ scale: 0.8, opacity: 0 }}
              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
            >
              <Cookie className="w-5 h-5 text-brand-turquoise" />
              <span className="text-white/90 text-sm font-medium">{t('badge')}</span>
            </motion.div>

            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
              {t('title1')}
              <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
                {t('title2')}
              </span>
            </h1>

            <p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
              {t('intro')}
            </p>

            <p className="text-white/60 text-sm">{tCommon('lastUpdated')}</p>
          </motion.div>
        </div>

        <div className="absolute bottom-0 left-0 right-0">
          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
            <path
              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
              fill="white"
            />
          </svg>
        </div>
      </section>

      {/* Introduction */}
      <section className="py-16 bg-neutral-50">
        <div className="max-w-4xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="bg-white p-8 rounded-2xl shadow-lg border border-border"
          >
            <h2 className="text-2xl font-bold text-brand-navy mb-4">{t('introBoxTitle')}</h2>
            <p className="text-neutral-600 leading-relaxed mb-4">{t('introBoxBody1')}</p>
            <p className="text-neutral-600 leading-relaxed">{t('introBoxBody2')}</p>
          </motion.div>
        </div>
      </section>

      {/* Cookie Types Section */}
      <section ref={contentRef} className="py-20">
        <div className="max-w-4xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center mb-12"
          >
            <h2 className="text-3xl font-bold text-brand-navy mb-4">{t('typesTitle')}</h2>
            <p className="text-neutral-600">{t('typesSubtitle')}</p>
          </motion.div>

          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate={isContentInView ? 'visible' : 'hidden'}
            className="space-y-8"
          >
            {COOKIE_TYPES.map(type => {
              const IconComponent = type.icon;
              return (
                <motion.div
                  key={type.key}
                  variants={itemVariants}
                  className="bg-white p-8 rounded-2xl shadow-lg border border-border"
                >
                  <div className="flex items-start justify-between mb-6">
                    <div className="flex items-center space-x-4">
                      <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center">
                        <IconComponent className="w-6 h-6 text-brand-turquoise" />
                      </div>
                      <div>
                        <h3 className="text-xl font-bold text-brand-navy">
                          {t(`types.${type.key}.title`)}
                        </h3>
                        <p className="text-neutral-500 text-sm">
                          {t(`types.${type.key}.description`)}
                        </p>
                      </div>
                    </div>
                    {type.required ? (
                      <span className="px-3 py-1 bg-brand-navy/10 text-brand-navy text-xs font-medium rounded-full">
                        {t('required')}
                      </span>
                    ) : (
                      <div className="flex items-center space-x-2">
                        <ToggleLeft className="w-8 h-8 text-neutral-400" />
                        <span className="text-sm text-neutral-500">{t('optional')}</span>
                      </div>
                    )}
                  </div>

                  {type.items.length === 0 ? (
                    <p className="rounded-xl border border-dashed border-border px-4 py-6 text-center text-sm text-neutral-500">
                      {t('noneInUse')}
                    </p>
                  ) : (
                    <div className="overflow-x-auto">
                      <table className="w-full text-sm">
                        <thead>
                          <tr className="border-b border-border">
                            <th className="text-left py-3 px-4 font-semibold text-brand-navy">
                              {t('tableHeaders.name')}
                            </th>
                            <th className="text-left py-3 px-4 font-semibold text-brand-navy">
                              {t('tableHeaders.storage')}
                            </th>
                            <th className="text-left py-3 px-4 font-semibold text-brand-navy">
                              {t('tableHeaders.purpose')}
                            </th>
                            <th className="text-left py-3 px-4 font-semibold text-brand-navy">
                              {t('tableHeaders.duration')}
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          {type.items.map(item => (
                            <tr key={item.name} className="border-b border-border last:border-0">
                              <td className="py-3 px-4 font-mono text-brand-turquoise">
                                {item.name}
                              </td>
                              <td className="py-3 px-4 text-neutral-500">
                                {t(`storageKinds.${item.kind}`)}
                              </td>
                              <td className="py-3 px-4 text-neutral-600">
                                {t(`storage.${item.name}.purpose`)}
                              </td>
                              <td className="py-3 px-4 text-neutral-500">
                                {t(`storage.${item.name}.duration`)}
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  )}
                </motion.div>
              );
            })}
          </motion.div>

          {/* How to manage cookies */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="mt-12 bg-gradient-to-br from-neutral-50 to-white p-8 rounded-2xl border border-border"
          >
            <h3 className="text-2xl font-bold text-brand-navy mb-4">{t('manageTitle')}</h3>
            <div className="space-y-4 text-neutral-600">
              <p>{t('manageIntro')}</p>
              <ul className="list-disc pl-6 space-y-2">
                <li>{t('manageBullet1')}</li>
                <li>{t('manageBullet2')}</li>
                <li>{t('manageBullet3')}</li>
              </ul>
              <p className="text-sm text-neutral-500 mt-4">{t('manageNote')}</p>
            </div>
          </motion.div>

          {/* Contact Section */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.6 }}
            className="mt-16 bg-gradient-to-br from-brand-navy to-brand-navy/95 p-10 rounded-3xl text-center"
          >
            <Mail className="w-12 h-12 text-brand-turquoise mx-auto mb-4" />
            <h3 className="text-2xl font-bold text-white mb-4">{t('contact.title')}</h3>
            <p className="text-white/80 mb-6">{t('contact.body')}</p>
            <a
              href="mailto:privacy@xpeditis.com"
              className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
            >
              <Mail className="w-5 h-5" />
              <span>privacy@xpeditis.com</span>
            </a>
          </motion.div>
        </div>
      </section>

      <LandingFooter />
    </div>
  );
}