"use client";

import Image from "next/image";
import { FaCalendarAlt, FaRegCalendarAlt } from "react-icons/fa";

// Import or define your blog data and categories
import BlogCard from "@/components/layouts/blog-card";
import Hero from "@/components/layouts/hero";
import { useBlogById } from "@/queries/use-blog-by-id";
import { useBlogs } from "@/queries/use-blogs";
import { Blog } from "@/types";
import Link from "next/link";
import { useParams } from "next/navigation";
import { useBlogCategories } from "@/queries/use-blog-categories";
import ErrorFallback from "@/components/layouts/error-fallback";
import ApiLoader from "@/components/layouts/api-loader";

export default function BlogDetailsPage() {
  const { id } = useParams();
  const {
    data: blogs,
    isLoading: isBlogLoading,
    isError: isBlogError,
  } = useBlogs();
  const {
    data: selectedBlog,
    isLoading: isSelectedBlogLoading,
    isError: isSelectedBlogError,
  } = useBlogById(id! as string);
  const {
    data: blogCategories,
    isLoading: isBlogCategoriesLoading,
    isError: isBlogCategoriesError,
  } = useBlogCategories();

  const formatDate = (dateString: string): string => {
    return new Date(dateString).toLocaleDateString();
  };

  if (!blogs || !selectedBlog || !blogCategories) return null;

  // Filter similar blogs (same category, excluding current blog)
  const similarBlogs: Blog[] = blogs
    .filter(
      (blog) =>
        blog.blogCategory === selectedBlog?.blogCategory &&
        blog.slug !== selectedBlog?.slug,
    )
    .slice(0, 3);

  const relatedBlogs: Blog[] = blogs
    .filter((blog) => blog.slug !== selectedBlog?.slug)
    .slice(0, 4);

  const breadCrumbPaths = [
    { text: "Home", routeTo: "/" },
    { text: "Blogs", routeTo: "/blogs" },
  ];

  if (isBlogCategoriesError || isSelectedBlogError || isBlogError) {
    return <ErrorFallback />;
  }

  if (isBlogCategoriesLoading || isSelectedBlogLoading || isBlogLoading) {
    return <ApiLoader />;
  }

  return (
    <div>
      <Hero title="Blog" breadCrumbPaths={breadCrumbPaths} />

      <div className="bg-gray-100 py-12">
        <section className="max-width section-padding-x lg:flex lg:gap-10">
          {/* Main Blog Content */}
          <div className="bg-white p-6 shadow-lg lg:w-2/3">
            <div className="relative mb-6">
              <Image
                src={selectedBlog.thumbnail}
                alt={selectedBlog.title}
                height={384}
                width={100}
                className="h-96 w-full rounded-lg object-cover"
              />
              <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6 text-white">
                <div className="mb-2 flex items-center gap-4">
                  <span className="rounded bg-blue-500 px-3 py-1 text-sm">
                    {selectedBlog.blogCategory}
                  </span>
                  <div className="flex items-center gap-2">
                    <FaRegCalendarAlt />
                    <span>{formatDate(selectedBlog.publishedDate)}</span>
                  </div>
                </div>
                <h1 className="text-2xl font-bold">{selectedBlog.title}</h1>
              </div>
            </div>

            <div
              className="mt-6"
              dangerouslySetInnerHTML={{ __html: selectedBlog.content || "" }}
            />
          </div>

          {/* Sidebar */}
          <div className="mt-8 lg:mt-0 lg:w-1/3">
            {/* Categories */}
            <div className="mb-6 bg-white p-4 shadow-lg">
              <h3 className="mb-4 border-b pb-2 text-xl font-semibold">
                Categories
              </h3>
              <div className="flex flex-wrap gap-2">
                {blogCategories?.map((category, i) => (
                  <span
                    key={i}
                    className="rounded-full bg-gray-200 px-3 py-1 text-sm"
                  >
                    {category.name}
                  </span>
                ))}
              </div>
            </div>

            {/* Recent Posts */}
            <div className="bg-white p-4 shadow-lg">
              <div className="flex items-center gap-3">
                {/* line */}
                <div className="h-8 w-2 bg-secondary"></div>
                <h3>Recent Blogs</h3>
              </div>
              {relatedBlogs.map((blog) => (
                <div
                  key={blog.id}
                  className="mb-4 mt-6 flex items-center border-b pb-4 last:border-b-0"
                >
                  <Image
                    src={blog.thumbnail}
                    alt={blog.title}
                    width={80}
                    height={80}
                    className="mr-4 h-20 w-20 rounded object-cover"
                  />
                  <div>
                    <Link href={`/blog/${blog.slug}`}>
                      <h5 className="line-clamp-2 font-semibold">
                        {blog.title}
                      </h5>
                    </Link>
                    <div className="mt-1 flex items-center text-xs text-gray-500">
                      <FaCalendarAlt className="mr-2" />
                      {formatDate(blog.publishedDate)}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        <div className="section-padding-x max-width mt-6">
          {similarBlogs.length > 0 && (
            <div>
              <div className="flex items-center gap-3">
                {/* line */}
                <div className="h-8 w-2 bg-secondary"></div>
                <h3>Similar Blogs</h3>
              </div>

              <div className="mt-6 grid gap-6 md:grid-cols-3">
                {similarBlogs.map((blog, i) => (
                  <BlogCard key={i} blog={blog} />
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}