import { Link, useParams, Navigate } from 'react-router-dom';
import { useEffect, useState } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';
import { getPostBySlug, formatDate } from '@/lib/blog';
import { ArrowLeft } from 'lucide-react';
import 'highlight.js/styles/github-dark.css';

const BlogPost = () => {
  const { slug } = useParams<{ slug: string }>();
  const post = slug ? getPostBySlug(slug) : undefined;
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });

  useEffect(() => {
    if (post) {
      document.title = `${post.title} — damaj.tech`;
      const meta = document.querySelector('meta[name="description"]');
      if (meta && post.description) meta.setAttribute('content', post.description);
    }
  }, [post]);

  if (!post) return <Navigate to="/blog" replace />;

  return (
    <div
      onMouseMove={(e) => setMousePos({ x: e.clientX, y: e.clientY })}
      className="min-h-screen bg-background relative overflow-hidden"
    >
      <div
        className="fixed pointer-events-none z-0"
        style={{
          left: mousePos.x,
          top: mousePos.y,
          width: 500,
          height: 500,
          transform: 'translate(-50%, -50%)',
          background: 'radial-gradient(circle, hsl(25 95% 55% / 0.06) 0%, transparent 70%)',
        }}
      />

      <article className="relative z-10 max-w-3xl mx-auto px-4 sm:px-6 py-12 md:py-20">
        <Link
          to="/blog"
          className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors font-mono mb-8"
        >
          <ArrowLeft className="w-4 h-4" />
          all posts
        </Link>

        <header className="mb-10 pb-6 border-b border-border">
          <p className="text-xs text-muted-foreground font-mono mb-2">
            {formatDate(post.date)}
          </p>
          <h1 className="text-3xl md:text-4xl font-heading font-bold text-foreground mb-3">
            {post.title}
          </h1>
          {post.description && (
            <p className="text-muted-foreground text-lg leading-relaxed">{post.description}</p>
          )}
          {post.tags && post.tags.length > 0 && (
            <div className="flex flex-wrap gap-1.5 mt-4">
              {post.tags.map((tag) => (
                <span
                  key={tag}
                  className="text-[10px] font-mono px-2 py-0.5 rounded-full bg-primary/10 text-primary border border-primary/20"
                >
                  {tag}
                </span>
              ))}
            </div>
          )}
        </header>

        <div className="prose-blog">
          <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
            {post.content}
          </ReactMarkdown>
        </div>
      </article>
    </div>
  );
};

export default BlogPost;