import {
    ChefHat,
    ClipboardList,
    type LucideIcon,
    PackageSearch,
    TrendingUp,
} from 'lucide-react';
import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
import { useEffect, useState } from 'react';
import { cn } from '@/lib/utils';

type Slide = {
    icon: LucideIcon;
    title: string;
    description: string;
};

const slides: Slide[] = [
    {
        icon: ClipboardList,
        title: 'Vos tables et commandes, en un coup d’œil',
        description:
            'Suivez l’état de chaque table et le statut de chaque commande en temps réel.',
    },
    {
        icon: ChefHat,
        title: 'Cuisine et bar synchronisés',
        description:
            'Les commandes arrivent automatiquement en cuisine et au bar, sans ticket papier.',
    },
    {
        icon: PackageSearch,
        title: 'Stock et caisse sous contrôle',
        description:
            'Alertes de rupture, encaissements et écarts de caisse suivis au quotidien.',
    },
    {
        icon: TrendingUp,
        title: 'Vos performances en un clin d’œil',
        description:
            'Chiffre d’affaires, produits les plus vendus et marges, jour après jour.',
    },
];

const AUTOPLAY_INTERVAL_MS = 5000;

export default function AuthCarousel() {
    const [activeIndex, setActiveIndex] = useState(0);
    const shouldReduceMotion = useReducedMotion();

    useEffect(() => {
        const interval = setInterval(() => {
            setActiveIndex((index) => (index + 1) % slides.length);
        }, AUTOPLAY_INTERVAL_MS);

        return () => clearInterval(interval);
    }, []);

    const activeSlide = slides[activeIndex];

    return (
        <div className="relative flex flex-1 flex-col">
            <div className="relative flex flex-1 flex-col items-center justify-center text-center">
                <AnimatePresence mode="wait">
                    <motion.div
                        key={activeIndex}
                        initial={
                            shouldReduceMotion ? false : { opacity: 0, x: 16 }
                        }
                        animate={{ opacity: 1, x: 0 }}
                        exit={
                            shouldReduceMotion
                                ? undefined
                                : { opacity: 0, x: -16 }
                        }
                        transition={{ duration: 0.4, ease: 'easeOut' }}
                        className="flex flex-col items-center"
                    >
                        <div className="bg-primary-foreground/10 mb-8 flex size-20 items-center justify-center rounded-3xl">
                            <activeSlide.icon
                                className="size-10"
                                strokeWidth={1.5}
                            />
                        </div>

                        <div className="space-y-3">
                            <h2 className="text-2xl font-bold text-balance">
                                {activeSlide.title}
                            </h2>
                            <p className="mx-auto max-w-sm text-sm text-balance opacity-80">
                                {activeSlide.description}
                            </p>
                        </div>
                    </motion.div>
                </AnimatePresence>
            </div>

            <div className="relative flex items-center justify-center gap-2 pt-8">
                {slides.map((slide, index) => (
                    <button
                        key={slide.title}
                        type="button"
                        onClick={() => setActiveIndex(index)}
                        aria-label={`Aller à la diapositive ${index + 1}`}
                        aria-current={index === activeIndex}
                        className={cn(
                            'bg-primary-foreground h-1.5 rounded-full transition-all',
                            index === activeIndex
                                ? 'w-6 opacity-100'
                                : 'w-1.5 opacity-30 hover:opacity-50',
                        )}
                    />
                ))}
            </div>
        </div>
    );
}