'use client';

import { motion, AnimatePresence } from 'framer-motion';
import { Cookie, Shield, X } from 'lucide-react';
import { useCookieConsent } from '@/hooks/useCookieConsent';
import Link from 'next/link';

/**
 * EU GDPR-compliant cookie consent banner
 * Shows on first visit, stores consent in localStorage
 */
export default function CookieBanner() {
    const { hasConsent, isLoading, acceptAll, acceptEssential } = useCookieConsent();

    // Don't render while loading or if consent already given
    if (isLoading || hasConsent) {
        return null;
    }

    return (
        <AnimatePresence>
            <motion.div
                initial={{ y: 100, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                exit={{ y: 100, opacity: 0 }}
                transition={{ type: 'spring', damping: 25, stiffness: 300 }}
                className="fixed bottom-0 left-0 right-0 z-[100] p-4 md:p-6"
            >
                <div className="max-w-4xl mx-auto bg-zinc-900 border border-zinc-800 rounded-2xl shadow-2xl overflow-hidden">
                    {/* Header */}
                    <div className="p-6 pb-4">
                        <div className="flex items-center gap-3 mb-4">
                            <div className="p-2 bg-orange-500/10 rounded-xl">
                                <Cookie size={24} className="text-orange-500" />
                            </div>
                            <h3 className="text-lg font-bold text-white">Cookie-Einstellungen</h3>
                        </div>

                        <p className="text-zinc-400 text-sm leading-relaxed">
                            Wir verwenden Cookies, um die Funktionalität unserer App zu gewährleisten.
                            Wir setzen <span className="text-white font-medium">keine Tracking- oder Marketing-Cookies</span> ein.
                        </p>

                        {/* Cookie types */}
                        <div className="mt-4 space-y-2">
                            <div className="flex items-center gap-2 text-sm">
                                <Shield size={14} className="text-green-500" />
                                <span className="text-zinc-300">
                                    <span className="font-medium text-white">Notwendig:</span> Authentifizierung & Sicherheit
                                </span>
                            </div>
                            <div className="flex items-center gap-2 text-sm">
                                <Shield size={14} className="text-blue-500" />
                                <span className="text-zinc-300">
                                    <span className="font-medium text-white">Funktional:</span> Spracheinstellungen & UI-Präferenzen
                                </span>
                            </div>
                        </div>
                    </div>

                    {/* Actions */}
                    <div className="p-4 bg-zinc-950/50 border-t border-zinc-800 flex flex-col sm:flex-row gap-3">
                        <button
                            onClick={acceptEssential}
                            className="flex-1 px-4 py-3 text-sm font-bold text-zinc-400 hover:text-white border border-zinc-700 hover:border-zinc-600 rounded-xl transition-all"
                        >
                            Nur Notwendige
                        </button>
                        <button
                            onClick={acceptAll}
                            className="flex-1 px-4 py-3 text-sm font-bold text-zinc-900 bg-orange-500 hover:bg-orange-400 rounded-xl transition-all"
                        >
                            Alle akzeptieren
                        </button>
                    </div>

                    {/* Privacy link */}
                    <div className="px-4 pb-4 text-center">
                        <Link
                            href="/privacy"
                            className="text-xs text-zinc-500 hover:text-zinc-400 underline"
                        >
                            Datenschutzerklärung
                        </Link>
                    </div>
                </div>
            </motion.div>
        </AnimatePresence>
    );
}
