import React, { useEffect } from 'react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { useStore } from '../src/context/StoreContext';

interface BlogPostLayoutProps {
    title: string;
    category: string;
    date: string;
    image: string;
    imageAlt: string;
    children: React.ReactNode;
    author?: string;
}

const BlogPostLayout: React.FC<BlogPostLayoutProps> = ({
    title,
    category,
    date,
    image,
    imageAlt,
    children,
    author = 'Claudia Knuth',
}) => {
    const { articles } = useStore();
    const getArticleHref = (slug: string) => (
        slug.startsWith('/editorial/') ? slug : `/editorial/${slug}`
    );

    useEffect(() => {
        window.scrollTo(0, 0);
    }, []);

    const nextArticles = articles.filter(post => post.title !== title).slice(0, 2);

    return (
        <div className="bg-stone-50 dark:bg-black min-h-screen font-body transition-colors duration-500">
            <main className="pt-32 pb-24">
                <article className="max-w-4xl mx-auto px-6 md:px-12">
                    <div className="flex items-center space-x-4 mb-8 justify-center flex-wrap gap-y-2">
                        <span className="text-xs uppercase tracking-[0.2em] text-text-muted border border-text-muted/30 px-3 py-1 rounded-full">{category}</span>
                        <span className="text-xs uppercase tracking-[0.2em] text-text-muted">{date}</span>
                        <span className="text-xs text-text-muted">by <span className="font-medium" itemProp="author">{author}</span></span>
                    </div>

                    <motion.h1
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8 }}
                        className="font-display text-5xl md:text-6xl lg:text-7xl text-center text-text-main dark:text-white mb-16 leading-tight"
                    >
                        {title}
                    </motion.h1>

                    <motion.div
                        initial={{ opacity: 0, scale: 0.95 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ duration: 0.8, delay: 0.2 }}
                        className="w-full h-[40vh] md:h-[50vh] relative mb-16 overflow-hidden shadow-xl rounded-sm"
                    >
                        <img
                            src={image}
                            alt={imageAlt}
                            className="w-full h-full object-cover"
                        />
                    </motion.div>

                    <div className="prose prose-stone dark:prose-invert max-w-none mx-auto prose-headings:font-display prose-headings:font-light prose-p:font-light prose-p:leading-loose prose-a:text-terracotta hover:prose-a:text-terracotta-dark prose-img:rounded-sm">
                        {children}
                    </div>

                    {nextArticles.length > 0 && (
                        <div className="mt-24 pt-16 border-t border-stone-200 dark:border-stone-800">
                            <h3 className="font-display text-3xl text-center mb-12 text-text-main dark:text-white">Read Next</h3>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                                {nextArticles.map((post) => (
                                    <Link key={post.id} to={getArticleHref(post.slug)} className="group block">
                                        <div className="aspect-[3/2] overflow-hidden bg-stone-100 mb-4">
                                            <img
                                                src={post.image}
                                                alt={post.title}
                                                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                                            />
                                        </div>
                                        <h4 className="font-display text-2xl text-text-main dark:text-white group-hover:underline decoration-1 underline-offset-4 mb-2">
                                            {post.title}
                                        </h4>
                                        <div className="flex items-center space-x-2 text-sm text-stone-500 uppercase tracking-widest">
                                            <span>{post.category}</span>
                                            <span>-</span>
                                            <span>{post.date}</span>
                                        </div>
                                    </Link>
                                ))}
                            </div>
                        </div>
                    )}

                    <div className="mt-20 text-center">
                        <Link to="/editorial" className="inline-block border-b border-black dark:border-white pb-1 text-sm uppercase tracking-widest hover:text-stone-500 transition-colors">
                            Back to Editorial
                        </Link>
                    </div>
                </article>
            </main>
        </div>
    );
};

export default BlogPostLayout;