import { router } from '@inertiajs/react';
import { AnimatePresence, motion } from 'framer-motion';
import React, { memo, useCallback, useRef, useState } from 'react';

interface NewsItem {
    id: number;
    title: string;
    slug: string;
    category: 'patch' | 'download' | 'guide' | 'promo' | 'event';
    image: string | null;
    description: string;
    keywords: string;
    is_active: boolean;
    created_at: string;
    updated_at: string;
}

interface NewsCardProps {
    news: NewsItem;
    getCategoryBadge?: (category: string) => React.ReactNode;
    formatDate?: (dateString: string) => string;
    featured?: boolean;
    variant?: 'grand' | 'master' | 'shadow';
    index?: number;
}

export const NewsCard = memo(function NewsCard({ news, featured = false, index = 0 }: NewsCardProps) {
    const [isNavigating, setIsNavigating] = useState(false);
    const [ripplePos, setRipplePos] = useState({ x: 0, y: 0 });
    const cardRef = useRef<HTMLDivElement>(null);

    const imageUrl = news.image ? `/storage/${news.image}` : null;

    const dateObj = new Date(news.created_at);
    const day = dateObj.getDate();
    const month = dateObj.toLocaleString('en-US', { month: 'short' });
    const year = dateObj.getFullYear();

    const handleClick = useCallback(
        (e: React.MouseEvent) => {
            e.preventDefault();
            if (!cardRef.current) return;

            const rect = cardRef.current.getBoundingClientRect();
            setRipplePos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
            setIsNavigating(true);

            setTimeout(() => {
                router.visit(`/news/${news.slug || news.id}`, {
                    preserveScroll: false,
                    preserveState: false,
                });
            }, 450);
        },
        [news.slug, news.id],
    );

    return (
        <AnimatePresence mode="wait">
            <motion.div
                ref={cardRef}
                initial={{ opacity: 0, y: 40, scale: 0.95 }}
                animate={isNavigating ? { opacity: 0, scale: 1.05, y: -10 } : { opacity: 1, y: 0, scale: 1 }}
                transition={isNavigating ? { duration: 0.4, ease: 'easeInOut' } : { duration: 0.5, delay: index * 0.1, ease: 'easeOut' }}
                whileHover={{ y: -5, transition: { duration: 0.25 } }}
                onClick={handleClick}
                className="group relative block cursor-pointer overflow-hidden rounded-xl bg-[#070012]"
                style={{
                    minHeight: featured ? '280px' : '240px',
                    boxShadow: isNavigating ? '0 0 40px rgba(168,85,247,0.45), 0 20px 60px rgba(0,0,0,0.8)' : '0 10px 30px rgba(0,0,0,0.5)',
                }}
            >
                {/* Background Image */}
                {imageUrl ? (
                    <motion.div
                        className="absolute inset-0 bg-cover bg-center"
                        style={{ backgroundImage: `url(${imageUrl})` }}
                        animate={isNavigating ? { scale: 1.15 } : { scale: 1 }}
                        transition={{ duration: 0.6, ease: 'easeOut' }}
                    />
                ) : (
                    <div
                        className="absolute inset-0"
                        style={{
                            background: 'linear-gradient(135deg, rgba(168,85,247,0.22) 0%, rgba(7,0,18,0.95) 100%)',
                        }}
                    />
                )}

                {/* Ripple Effect */}
                {isNavigating && (
                    <motion.div
                        className="pointer-events-none absolute z-30 rounded-full"
                        style={{
                            left: ripplePos.x,
                            top: ripplePos.y,
                            width: 600,
                            height: 600,
                            transform: 'translate(-50%, -50%)',
                            background: 'radial-gradient(circle, rgba(217,70,239,0.32) 0%, rgba(217,70,239,0) 70%)',
                        }}
                        initial={{ scale: 0, opacity: 1 }}
                        animate={{ scale: 1, opacity: 0.8 }}
                        transition={{ duration: 0.6, ease: 'easeOut' }}
                    />
                )}

                {/* Overlay during navigation */}
                <motion.div
                    className="pointer-events-none absolute inset-0 z-25"
                    style={{
                        background: 'linear-gradient(135deg, rgba(168,85,247,0.18), rgba(217,70,239,0.14))',
                    }}
                    initial={{ opacity: 0 }}
                    animate={{ opacity: isNavigating ? 1 : 0 }}
                    transition={{ duration: 0.3 }}
                />

                {/* Dark Overlay for Text Readability */}
                <div
                    className="absolute inset-0"
                    style={{
                        background: 'linear-gradient(180deg, rgba(7,0,18,0) 0%, rgba(7,0,18,0.34) 30%, rgba(7,0,18,0.9) 70%, rgba(7,0,18,1) 100%)',
                    }}
                />

                {/* Date Badge (Top Right) */}
                <div
                    className="absolute top-0 right-4 z-10 flex min-w-[60px] flex-col items-center justify-center rounded-b-xl px-3 shadow-[0_4px_15px_rgba(0,0,0,0.4)] transition-transform duration-300 group-hover:translate-y-1"
                    style={{
                        background: 'linear-gradient(135deg, #7e22ce, #d946ef)',
                        color: '#ffffff',
                        height: '60px',
                        border: '1px solid rgba(245,208,254,0.36)',
                        borderTop: 'none',
                    }}
                >
                    <span
                        style={{
                            fontFamily: 'Cinzel, serif',
                            fontWeight: 800,
                            fontSize: '0.85rem',
                            lineHeight: '1',
                            textShadow: '0 1px 2px rgba(255,255,255,0.3)',
                        }}
                    >
                        {day}, {month}
                    </span>
                    <span
                        style={{
                            fontFamily: 'Cinzel, serif',
                            fontWeight: 800,
                            fontSize: '0.75rem',
                            marginTop: '4px',
                            textShadow: '0 1px 2px rgba(255,255,255,0.3)',
                        }}
                    >
                        {year}
                    </span>
                </div>

                {/* Inner Glow Border */}
                <div
                    className="pointer-events-none absolute inset-0 rounded-xl opacity-0 transition-opacity duration-500 group-hover:opacity-100"
                    style={{
                        border: '1px solid rgba(168,85,247,0.52)',
                        boxShadow: 'inset 0 0 24px rgba(168,85,247,0.16)',
                    }}
                />

                {/* Content Container */}
                <div className="relative z-10 flex h-full flex-col p-5" style={{ minHeight: featured ? '280px' : '240px' }}>
                    <div className="flex-grow" />

                    <h3
                        className="mb-2 line-clamp-1 font-bold uppercase transition-colors duration-300 group-hover:text-[#fff]"
                        style={{
                            color: '#f5d0fe',
                            fontFamily: 'Cinzel Decorative, serif',
                            fontSize: featured ? '1.25rem' : '1.1rem',
                            lineHeight: '1.2',
                            letterSpacing: '0.1em',
                            textShadow: '0 2px 10px rgba(0,0,0,0.9), 2px 2px 0 rgba(0,0,0,0.7)',
                        }}
                    >
                        {news.title}
                    </h3>

                    <p
                        className="mb-4 line-clamp-2 text-sm"
                        style={{
                            color: '#c4b5fd',
                            fontFamily: "'Rajdhani', sans-serif",
                            fontSize: '0.9rem',
                            lineHeight: '1.5',
                            fontWeight: 500,
                            textShadow: '0 2px 4px rgba(0,0,0,0.8)',
                        }}
                    >
                        {news.description}
                    </p>

                    <div
                        className="inline-flex items-center justify-center rounded transition-all duration-300 group-hover:shadow-[0_0_15px_rgba(217,70,239,0.45)] group-hover:brightness-110"
                        style={{
                            background: 'linear-gradient(135deg, #7e22ce, #d946ef)',
                            color: '#ffffff',
                            fontFamily: "'Rajdhani', sans-serif",
                            fontWeight: 700,
                            fontSize: '0.85rem',
                            letterSpacing: '0.15em',
                            width: 'fit-content',
                            padding: '0.4rem 1.8rem',
                            border: '1px solid rgba(217,70,239,0.55)',
                            boxShadow: '0 4px 15px rgba(0,0,0,0.4)',
                        }}
                    >
                        READ MORE
                    </div>
                </div>
            </motion.div>
        </AnimatePresence>
    );
});