import { fetchBlogPostById } from "@/lib/blog-api";
import Image from "next/image";
import Link from "next/link";
import {
  CalendarDays,
  User,
  ArrowLeft,
  Facebook,
  Twitter,
  Linkedin,
} from "lucide-react";
import BlogHeader from "@/components/blog/blog-header";
import { notFound } from "next/navigation";
import RelatedPosts from "@/components/blog/related-posts";

interface PageProps {
  params: { id: string };
}

export default async function BlogPostPage({ params }: PageProps) {
  try {
    const post = await fetchBlogPostById(params.id);

    return (
      <>
        <BlogHeader />
        <div className="bg-white min-h-screen px-4 md:px-8">
          <article className="container max-w-7xl mx-auto ">
            <div className="mb-8">
              <Link
                href="/blogs"
                className="inline-flex items-center text-gray-600 hover:text-red-600 transition-colors"
              >
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Blog
              </Link>
            </div>

            <header className="mb-12">
              <div className="flex flex-col sm:flex-row gap-4 mb-4">
                <span className="px-3 py-1 bg-red-100 text-red-600 rounded-full text-sm font-medium">
                  {post.category}
                </span>
                <span className="text-gray-500 flex items-center text-sm">
                  <CalendarDays className="h-4 w-4 mr-1" />
                  {post.author.date}
                </span>
              </div>

              <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
                {post.title}
              </h1>

              <p className="text-xl text-gray-600 mb-8">{post.description}</p>

              <div className="flex items-center justify-between border-t border-b border-gray-200 py-4">
                <div className="flex items-center">
                  <div className="w-12 h-12 rounded-full overflow-hidden mr-4 bg-gray-200">
                    {post.author.avatar ? (
                      <Image
                        src={post.author.avatar || "/placeholder.svg"}
                        alt={post.author.name}
                        width={48}
                        height={48}
                        className="object-cover w-full h-full"
                      />
                    ) : (
                      <div className="w-full h-full flex items-center justify-center bg-red-100 text-red-600">
                        <User className="h-6 w-6" />
                      </div>
                    )}
                  </div>
                  <div>
                    <p className="font-medium text-gray-900">omicron</p>
                    <p className="text-sm text-gray-500">Author</p>
                  </div>
                </div>

                <div className="flex items-center space-x-2">
                  <span className="text-sm text-gray-500 mr-2">Share:</span>
                  <button className="w-8 h-8 flex items-center justify-center rounded-full bg-blue-600 text-white hover:bg-blue-700">
                    <Facebook className="h-4 w-4" />
                  </button>
                  <button className="w-8 h-8 flex items-center justify-center rounded-full bg-sky-500 text-white hover:bg-sky-600">
                    <Twitter className="h-4 w-4" />
                  </button>
                  <button className="w-8 h-8 flex items-center justify-center rounded-full bg-blue-700 text-white hover:bg-blue-800">
                    <Linkedin className="h-4 w-4" />
                  </button>
                </div>
              </div>
            </header>

            {post.backgroundImage && (
              <div className="max-w-5xl mb-12 rounded-xl overflow-hidden shadow-lg">
                <div className="relative aspect-[16/9]">
                  <Image
                    src={post.backgroundImage || "/placeholder.svg"}
                    alt={post.title}
                    fill
                    className="object-cover"
                    priority
                  />
                </div>
              </div>
            )}

            <div className="mb-16">
              {post.content ? (
                <div dangerouslySetInnerHTML={{ __html: post.content }} />
              ) : (
                <p className="text-gray-500 italic">
                  No content available for this article.
                </p>
              )}
            </div>

            <div className="max-w-4xl mx-auto mb-16">
              <div className="flex flex-wrap gap-2">
                <span className="px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200 cursor-pointer">
                  Electrical
                </span>
                <span className="px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200 cursor-pointer">
                  Industry
                </span>
                <span className="px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200 cursor-pointer">
                  {post.category}
                </span>
                <span className="px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200 cursor-pointer">
                  Products
                </span>
              </div>
            </div>
          </article>

          {/* Related Posts */}
          <RelatedPosts currentPostId={post.id} category={post.category} />
        </div>
      </>
    );
  } catch (error) {
    console.log(error);
    return notFound();
  }
}