'use client';

import React from 'react';
import { useSession } from '@/context/SessionContext';
import { GlassWater, Square, ArrowRight, Sparkles } from 'lucide-react';
import Link from 'next/link';
import { useI18n } from '@/i18n/I18nContext';

import { motion, AnimatePresence } from 'framer-motion';

export default function ActiveSessionBanner() {
    const { activeSession, setActiveSession } = useSession();
    const { t } = useI18n();

    return (
        <AnimatePresence>
            {activeSession && (
                <motion.div
                    initial={{ y: 50, opacity: 0, x: '-50%' }}
                    animate={{ y: 0, opacity: 1, x: '-50%' }}
                    exit={{ y: 50, opacity: 0, x: '-50%' }}
                    className="fixed bottom-32 left-1/2 z-50 w-[calc(100%-2rem)] max-w-sm"
                >
                    <div className="bg-zinc-900/90 backdrop-blur-2xl border border-orange-500/20 rounded-[32px] p-2 flex items-center justify-between shadow-2xl ring-1 ring-white/5 overflow-hidden">
                        {/* Session Info Link */}
                        <Link
                            href={`/sessions/${activeSession.id}`}
                            className="flex items-center gap-3 px-3 py-2 flex-1 min-w-0 hover:bg-white/5 rounded-2xl transition-colors"
                        >
                            <div className="relative shrink-0">
                                <div className="bg-orange-600/10 p-2.5 rounded-2xl border border-orange-500/20">
                                    <Sparkles size={16} className="text-orange-500" />
                                </div>
                                <div className="absolute -top-1 -right-1 w-3 h-3 bg-orange-600 rounded-full border-2 border-zinc-900 animate-pulse shadow-[0_0_8px_rgba(234,88,12,0.6)]" />
                            </div>
                            <div className="min-w-0">
                                <div className="flex items-center gap-2 mb-0.5">
                                    <span className="text-[8px] font-black uppercase tracking-widest text-orange-600 animate-pulse">Live</span>
                                    <p className="text-[9px] font-bold uppercase tracking-wider text-zinc-500 truncate leading-none">{t('session.activeSession')}</p>
                                </div>
                                <p className="text-sm font-bold text-zinc-100 truncate leading-none tracking-tight">{activeSession.name}</p>
                            </div>
                        </Link>

                        {/* Action Buttons */}
                        <div className="flex items-center gap-1 pr-1">
                            <Link
                                href={`/sessions/${activeSession.id}`}
                                className="p-3 text-zinc-400 hover:text-orange-500 transition-colors"
                            >
                                <ArrowRight size={18} />
                            </Link>
                            <div className="w-px h-8 bg-zinc-800 mx-1" />
                            <button
                                onClick={() => setActiveSession(null)}
                                className="p-3 text-zinc-600 hover:text-red-500 transition-colors"
                                title="End Session"
                            >
                                <Square size={16} fill="currentColor" className="opacity-40" />
                            </button>
                        </div>
                    </div>
                </motion.div>
            )}
        </AnimatePresence>
    );
}