import React from "react";
import Link from "next/link";
import { notFound } from "next/navigation";
import Breadcrumb from "../../../components/Common/Breadcrumb";
import BlogSidebar from "../../../components/Blog/BlogSidebar";
import BlogCard from "../../../components/Blog/BlogCard";
import blogsData from "../blogs.json";

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

export async function generateStaticParams() {
  return blogsData.blogs.map((blog) => ({ slug: blog.slug }));
}

export async function generateMetadata({ params }: PageProps) {
  const blog = blogsData.blogs.find((b) => b.slug === params.slug);

  if (!blog) {
    return { title: "Blog Not Found | Digi Horizon Technologies" };
  }

  return {
    title: `${blog.title} | Digi Horizon Technologies`,
    description: blog.description,
    icons: {
      icon: "/img/favicon.png",
    },
  };
}

function formatDate(dateStr: string) {
  return new Date(dateStr).toLocaleDateString("en-US", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  });
}

export default function BlogDetailsPage({ params }: PageProps) {
  const blog = blogsData.blogs.find((b) => b.slug === params.slug);

  if (!blog) {
    notFound();
  }

  const relatedBlogs = blogsData.blogs
    .filter((b) => b.category === blog!.category && b.id !== blog!.id)
    .slice(0, 3);

  return (
    <>
      <Breadcrumb
        pageTitle={blog!.title}
        Breadcrumbitems={[
          { name: "Home", url: "/" },
          { name: "Blog", url: "/blog" },
          { name: blog!.title },
        ]}
      />

      <section className="blog-details-area py-5">
        <div className="container">
          <div className="row">
            {/* Main Content */}
            <div className="col-lg-8 mb-5 mb-lg-0">
              <article className="blog-details-content">
                {blog?.coverImage && blog?.coverImage.trim() !== "" ? (
                  <img
                    src={blog!.coverImage}
                    alt={blog!.title}
                    className="img-fluid rounded mb-4 w-100"
                    style={{ maxHeight: "440px", objectFit: "cover" }}
                  />
                ) : (<></>)}

                <div className="d-flex flex-wrap align-items-center gap-3 mb-3">
                  <span className="badge bg-primary px-3 py-2">{blog!.category}</span>
                  <span className="text-muted small">
                    <i className="fa-regular fa-user me-1"></i>
                    {blog!.author}
                  </span>
                  <span className="text-muted small">
                    <i className="fa-regular fa-calendar me-1"></i>
                    {formatDate(blog!.datePosted)}
                  </span>
                  <span className="text-muted small">
                    <i className="fa-regular fa-clock me-1"></i>
                    {blog!.readTime}
                  </span>
                </div>

                <h1 className="mb-4 blog-details-title">{blog!.title}</h1>

                <p className="lead text-muted mb-4">{blog!.description}</p>

                {/* <div className="d-flex align-items-center gap-3 mt-5 pt-4 border-top">
                  <span className="fw-semibold">Share:</span>
                  <a href="#" className="btn btn-sm btn-outline-secondary rounded-circle">
                    <i className="fa-brands fa-facebook-f"></i>
                  </a>
                  <a href="#" className="btn btn-sm btn-outline-secondary rounded-circle">
                    <i className="fa-brands fa-x-twitter"></i>
                  </a>
                  <a href="#" className="btn btn-sm btn-outline-secondary rounded-circle">
                    <i className="fa-brands fa-linkedin-in"></i>
                  </a>
                </div> */}
              </article>

              {/* Related Posts */}
              {relatedBlogs.length > 0 && (
                <div className="related-posts mt-5 pt-4 border-top">
                  <h4 className="mb-4">Related Articles</h4>
                  <div className="row">
                    {relatedBlogs.map((related) => (
                      <BlogCard key={related.id} blog={related} />
                    ))}
                  </div>
                </div>
              )}
            </div>

            {/* Sidebar */}
            <div className="col-lg-4">
              <BlogSidebar blogs={blogsData.blogs} currentSlug={blog!.slug} />
            </div>
          </div>

          <div className="mt-4">
            <Link href="/blog" className="default-btn btn btn-outline-primary btn-sm">
              <i className="fa-solid fa-arrow-left me-2"></i>
              Back to all articles
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}