import { Link } from '@inertiajs/react';
import { AnimatePresence, motion } from 'framer-motion';
import { Cookie, ShieldCheck, X } from 'lucide-react';
import { useEffect, useState } from 'react';

const CONSENT_KEY = 'uf-cookie-consent';
export type CookieConsent = 'accepted' | 'declined';

export function getCookieConsent(): CookieConsent | null {
    if (typeof window === 'undefined') return null;
    return (localStorage.getItem(CONSENT_KEY) as CookieConsent) ?? null;
}

export default function CookieBanner() {
    const [visible, setVisible] = useState(false);

    useEffect(() => {
        if (!localStorage.getItem(CONSENT_KEY)) setVisible(true);
    }, []);

    const save = (value: CookieConsent) => {
        localStorage.setItem(CONSENT_KEY, value);
        setVisible(false);
    };

    return (
        <AnimatePresence>
            {visible && (
                <>
                    {/* Soft backdrop gradient so the banner lifts off the page */}
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        transition={{ duration: 0.35 }}
                        className="pointer-events-none fixed inset-x-0 bottom-0 z-40 h-52"
                        style={{
                            background:
                                'linear-gradient(to top, hsl(var(--background) / 0.85) 0%, transparent 100%)',
                        }}
                    />

                    {/* Banner */}
                    <motion.div
                        initial={{ y: '110%', opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        exit={{ y: '110%', opacity: 0 }}
                        transition={{
                            duration: 0.5,
                            ease: [0.16, 1, 0.3, 1],
                        }}
                        className="fixed inset-x-0 bottom-0 z-50 px-4 pb-4 md:px-6 md:pb-6"
                    >
                        <div className="pf-glass relative mx-auto max-w-3xl overflow-hidden rounded-2xl">
                            {/* Lime top accent line */}
                            <div
                                className="absolute inset-x-0 top-0 h-[2px]"
                                style={{
                                    background:
                                        'linear-gradient(90deg, transparent 0%, hsl(var(--lime)) 40%, hsl(var(--primary)) 100%)',
                                }}
                            />

                            <div className="flex flex-col gap-5 p-5 sm:flex-row sm:items-center sm:gap-6 md:p-6">
                                {/* Icon */}
                                <div className="flex shrink-0 items-center gap-3">
                                    <div className="pf-icon-box h-11 w-11 rounded-xl">
                                        <Cookie className="h-5 w-5" />
                                    </div>
                                    {/* Brand micro-badge — visible on sm+ */}
                                    <div className="hidden sm:block">
                                        <img
                                            src="/images/logo.png"
                                            alt="Upepo Finance"
                                            className="h-5 w-5 opacity-40"
                                        />
                                    </div>
                                </div>

                                {/* Copy */}
                                <div className="min-w-0 flex-1">
                                    <div className="mb-1 flex items-center gap-2">
                                        <p className="text-foreground text-sm font-semibold">
                                            We use cookies
                                        </p>
                                        <span className="pf-chip py-0.5 text-[9px]">
                                            Notice
                                        </span>
                                    </div>
                                    <p className="text-muted-foreground text-xs leading-relaxed">
                                        We use cookies to understand how people
                                        use our site, improve performance, and
                                        keep it secure. You can accept or
                                        decline non-essential cookies.{' '}
                                        <Link
                                            href="/cookies"
                                            className="text-primary underline underline-offset-2 hover:opacity-75"
                                        >
                                            Cookie&nbsp;Policy
                                        </Link>
                                    </p>
                                </div>

                                {/* Actions */}
                                <div className="flex shrink-0 items-center gap-2.5">
                                    <button
                                        onClick={() => save('declined')}
                                        className="pf-btn-ghost px-4 py-2 text-sm"
                                    >
                                        Decline
                                    </button>
                                    <button
                                        onClick={() => save('accepted')}
                                        className="pf-btn flex items-center gap-2 px-5 py-2 text-sm"
                                    >
                                        <ShieldCheck className="h-3.5 w-3.5" />
                                        Accept all
                                    </button>
                                </div>

                                {/* Close — also declines */}
                                <button
                                    onClick={() => save('declined')}
                                    aria-label="Dismiss"
                                    className="text-muted-foreground hover:text-foreground absolute top-3 right-3 rounded-lg p-1 transition-colors"
                                >
                                    <X className="h-3.5 w-3.5" />
                                </button>
                            </div>
                        </div>
                    </motion.div>
                </>
            )}
        </AnimatePresence>
    );
}