'use client'
import { useEffect, useState } from 'react'
import posthog from 'posthog-js'
import { Button } from '@/components/ui/button'
import { motion, AnimatePresence } from 'framer-motion'
import Link from 'next/link'
import { Cookie } from 'lucide-react'

export function CookieBanner() {
    const [show, setShow] = useState(false)

    useEffect(() => {
        const optedIn = posthog.has_opted_in_capturing()
        const optedOut = posthog.has_opted_out_capturing()

        if (!optedIn && !optedOut) {
            setShow(true)
        }
    }, [])

    const handleAccept = () => {
        posthog.opt_in_capturing()
        setShow(false)
    }

    const handleDecline = () => {
        posthog.opt_out_capturing()
        setShow(false)
    }

    return (
        <AnimatePresence>
            {show && (
                <motion.div
                    initial={{ opacity: 0, scale: 0.9, y: 20 }}
                    animate={{ opacity: 1, scale: 1, y: 0 }}
                    exit={{ opacity: 0, scale: 0.9, y: 20 }}
                    className="fixed bottom-4 right-4 z-[100] max-w-sm w-full p-4"
                >
                    <div className="rounded-xl border border-border bg-background/95 p-6 shadow-2xl backdrop-blur-xl supports-[backdrop-filter]:bg-background/60">
                        <div className="flex items-start gap-4">
                            <div className="rounded-full bg-primary/10 p-2 text-primary">
                                <Cookie className="h-6 w-6" />
                            </div>
                            <div className="flex-1">
                                <h3 className="text-lg font-semibold text-foreground mb-2">We value your privacy</h3>
                                <p className="text-sm text-muted-foreground mb-4 leading-relaxed">
                                    We use cookies to enhance your browsing experience and analyze our traffic. By clicking "Accept", you consent to our use of cookies.
                                    Read our <Link href="/privacy" className="underline hover:text-foreground">Privacy Policy</Link>.
                                </p>
                                <div className="flex flex-col gap-2 sm:flex-row">
                                    <Button variant="outline" onClick={handleDecline} className="flex-1">
                                        Decline
                                    </Button>
                                    <Button onClick={handleAccept} className="flex-1">
                                        Accept
                                    </Button>
                                </div>
                            </div>
                        </div>
                    </div>
                </motion.div>
            )}
        </AnimatePresence>
    )
}