import React, { useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import { ArrowLeft, User, Calendar, Share2 } from 'lucide-react';
import { MOCK_BLOG_POSTS } from '../services/mockData';

const BlogPostPage = () => {
  const { id } = useParams();
  const post = MOCK_BLOG_POSTS.find(p => p.id === id);

  // Scroll to top when loading a new post
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [id]);

  if (!post) {
    return (
      <div className="min-h-[60vh] flex flex-col items-center justify-center">
        <h2 className="text-3xl font-serif font-bold text-gray-900 mb-4">Article introuvable</h2>
        <p className="text-gray-600 mb-8">L'article que vous recherchez n'existe pas ou a été supprimé.</p>
        <Link to="/blog" className="text-brand-600 hover:text-brand-700 font-medium flex items-center">
          <ArrowLeft className="w-4 h-4 mr-2" /> Retour au blog
        </Link>
      </div>
    );
  }

  return (
    <article className="bg-white min-h-screen">
      {/* Hero Image */}
      <div className="w-full h-64 md:h-96 relative">
        <img 
          src={post.imageUrl} 
          alt={post.title} 
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
        <div className="absolute bottom-0 left-0 w-full p-4 sm:p-8 max-w-4xl mx-auto">
             <Link to="/blog" className="inline-flex items-center text-white/80 hover:text-white mb-4 text-sm font-medium transition-colors">
                <ArrowLeft className="w-4 h-4 mr-1" /> Retour aux articles
             </Link>
        </div>
      </div>

      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12 -mt-20 relative z-10">
        <div className="bg-white rounded-xl shadow-xl p-6 md:p-10 border border-gray-100">
            {/* Header */}
            <header className="mb-8 border-b border-gray-100 pb-8">
                <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                    <span className="flex items-center">
                        <User className="w-4 h-4 mr-1 text-brand-500" />
                        {post.author}
                    </span>
                    <span className="flex items-center">
                        <Calendar className="w-4 h-4 mr-1 text-brand-500" />
                        {post.date}
                    </span>
                    <span className="px-2 py-1 bg-brand-50 text-brand-700 rounded text-xs font-semibold uppercase tracking-wide">
                        Conseils
                    </span>
                </div>
                <h1 className="text-3xl md:text-4xl font-serif font-bold text-gray-900 leading-tight">
                    {post.title}
                </h1>
            </header>

            {/* Content */}
            <div className="prose prose-lg prose-orange max-w-none text-gray-600">
                <p className="lead text-xl text-gray-500 font-serif italic mb-6">
                    {post.excerpt}
                </p>
                {/* Rendering paragraphs manually for the mock data */}
                {post.content.split('\n').map((paragraph, index) => (
                    paragraph.trim() !== '' && (
                        <p key={index} className="mb-4 leading-relaxed">
                            {paragraph}
                        </p>
                    )
                ))}
            </div>

            {/* Footer / Share */}
            <div className="mt-12 pt-8 border-t border-gray-100 flex justify-between items-center">
                <p className="text-sm text-gray-500 font-medium">Vous avez aimé cet article ?</p>
                <div className="flex space-x-2">
                    <button className="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-brand-100 hover:text-brand-600 transition-colors">
                        <Share2 className="w-5 h-5" />
                    </button>
                </div>
            </div>
        </div>
      </div>
    </article>
  );
};

export default BlogPostPage;