import { useParams, Link } from 'react-router-dom';
import { motion } from 'motion/react';
import { ArrowLeft, ArrowRight, Clock, User, Share2, Facebook, Twitter, Linkedin } from 'lucide-react';
import { articles } from '@/data/articles';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import SEO from '@/components/SEO';

export default function BlogPost() {
  const { slug } = useParams();
  const article = articles.find(a => a.slug === slug);

  if (!article) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[70vh] pt-32 px-6">
        <SEO title="Artigo não encontrado | Onyx Growth" description="Página não encontrada." />
        <h1 className="text-4xl font-display font-bold mb-4">Artigo não encontrado</h1>
        <p className="text-gray-400 mb-8">Essa URL pode ter sido alterada ou não existe mais.</p>
        <Link to="/blog" className="text-blue-400 hover:text-white transition-colors flex items-center gap-2">
          <ArrowLeft className="w-4 h-4" /> Voltar para o Blog
        </Link>
      </div>
    );
  }

  // Handle rich tags schema for BlogPosting
  const articleSchema = {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": `https://onyx.com.br/blog/${article.slug}`
    },
    "headline": article.title,
    "image": article.imageUrl ? [article.imageUrl] : [],
    "author": {
      "@type": "Person",
      "name": article.author
    },
    "publisher": {
      "@type": "Organization",
      "name": "Onyx Growth",
      "logo": {
        "@type": "ImageObject",
        "url": "https://onyx.com.br/icon.png"
      }
    },
    // Mocking date format since it's just '12 de Maio, 2026' string
    "datePublished": "2026-05-12",
    "description": article.excerpt
  };

  return (
    <article className="flex flex-col w-full pb-32">
      <SEO 
        title={`${article.title} | Blog Onyx`}
        description={article.excerpt}
        type="article"
        image={article.imageUrl}
        url={`https://onyx.com.br/blog/${article.slug}`}
        schema={articleSchema}
      />
      {/* Header */}
      <section className="pt-40 pb-16 px-6 relative">
         <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-purple-600/10 rounded-full blur-[120px] pointer-events-none" />
         <div className="container mx-auto max-w-4xl relative z-10">
            <Link to="/blog" className="inline-flex items-center gap-2 text-gray-400 hover:text-white transition-colors mb-12 text-sm font-medium">
               <ArrowLeft className="w-4 h-4" /> Todos os Artigos
            </Link>

            <div className="flex items-center gap-4 text-sm text-gray-400 mb-6">
               <span className="text-white font-medium uppercase tracking-widest">{article.category}</span>
               <div className="w-1 h-1 rounded-full bg-gray-600" />
               <span className="flex items-center gap-2"><Clock className="w-4 h-4" /> {article.readTime}</span>
               <div className="w-1 h-1 rounded-full bg-gray-600" />
               <span>{article.date}</span>
            </div>

            <motion.h1 
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               className="text-3xl md:text-5xl font-display font-semibold tracking-tighter mb-8 leading-tight"
            >
               {article.title}
            </motion.h1>

            <motion.div 
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.1 }}
               className="flex items-center justify-between py-6 border-y border-white/10"
            >
               <div className="flex items-center gap-4">
                  <div className="w-12 h-12 rounded-full bg-white/10 border border-white/20 flex items-center justify-center">
                     <User className="w-6 h-6 text-gray-300" />
                  </div>
                  <div className="flex flex-col">
                     <span className="font-medium text-white">{article.author}</span>
                     <span className="text-sm text-gray-500">Especialista Onyx</span>
                  </div>
               </div>
               
               <div className="flex items-center gap-4">
                  <span className="text-sm text-gray-500 font-medium hidden sm:block">Compartilhar:</span>
                  <button className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-white/10 transition-colors">
                     <Twitter className="w-4 h-4" />
                  </button>
                  <button className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-white/10 transition-colors">
                     <Linkedin className="w-4 h-4" />
                  </button>
                  <button className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-white/10 transition-colors">
                     <Share2 className="w-4 h-4" />
                  </button>
               </div>
            </motion.div>
         </div>
      </section>

      {/* Hero Image */}
      <section className="px-6 mb-16">
         <div className="container mx-auto max-w-5xl">
            <motion.div 
               initial={{ opacity: 0, scale: 0.95 }}
               animate={{ opacity: 1, scale: 1 }}
               transition={{ delay: 0.2 }}
               className={`w-full aspect-[21/9] rounded-[32px] overflow-hidden relative border border-white/10 ${article.color || 'bg-gradient-to-tr from-gray-900 to-zinc-900'}`}
            >
               {article.imageUrl && (
                  <img src={article.imageUrl} alt={article.title} className="w-full h-full object-cover opacity-80 mix-blend-overlay" />
               )}
            </motion.div>
         </div>
      </section>

      {/* Content */}
      <section className="px-6">
         <div className="container mx-auto max-w-3xl">
            <div className="prose prose-invert prose-lg max-w-none prose-headings:font-display prose-headings:font-semibold prose-a:text-blue-400 hover:prose-a:text-blue-300 prose-img:rounded-2xl prose-img:border prose-img:border-white/10">
               <ReactMarkdown 
                  remarkPlugins={[remarkGfm]}
                  components={{
                     a: ({node, ...props}) => {
                        const isInternal = props.href?.startsWith('/');
                        if (isInternal) {
                           return <Link to={props.href!} className={props.className}>{props.children}</Link>;
                        }
                        return <a target="_blank" rel="noopener noreferrer" {...props} />;
                     }
                  }}
               >
                  {article.content}
               </ReactMarkdown>
            </div>
            
            {/* Tags */}
            <div className="flex flex-wrap gap-2 mt-16 pt-8 border-t border-white/10">
               {['Growth', 'SEO Tático', 'Métricas', 'Performance'].map(tag => (
                  <span key={tag} className="px-4 py-2 rounded-full border border-white/10 bg-white/5 text-sm font-medium text-gray-400">
                     {tag}
                  </span>
               ))}
            </div>
         </div>
      </section>

      {/* Footer CTA */}
      <section className="container mx-auto max-w-3xl px-6 text-center mt-24">
         <div className="glass-panel p-10 md:p-14 rounded-[32px] relative overflow-hidden bg-gradient-to-b from-blue-900/20 to-black">
            <h2 className="text-2xl md:text-4xl font-display font-semibold mb-6">Pronto para aplicar essa estratégia?</h2>
            <p className="text-gray-400 text-lg mb-10 max-w-lg mx-auto">Nós podemos auditar os seus números atuais de forma gratuita e indicar o seu potencial de crescimento escondido para os próximos 6 meses.</p>
            <Link to="/contact" className="inline-flex items-center gap-2 bg-white text-black px-8 py-4 rounded-full text-lg font-medium hover:bg-gray-200 transition-colors">
              Falar com o nosso time <ArrowRight className="w-5 h-5" />
            </Link>
         </div>
      </section>

    </article>
  );
}
