import Link from "next/link";

interface BlogPost {
  keyword: string;
  platform: string;
  slug: string;
  title: string;
  description: string;
  cta: string;
  relatedPages?: Array<{ slug: string; title: string }>; // Made optional since we'll calculate this dynamically
  content: {
    intro: string;
    platformImpact: string;
    commonMistakes: string[];
    howWeHelp: string;
  };
}

// Dynamic function to get the latest blog content file
async function getLatestBlogContent() {
  const websiteId = "WEBSITE_ID_PLACEHOLDER";
  const firebaseUrl =
    "https://firebasestorage.googleapis.com/v0/b/slashblog-ai.firebasestorage.app/o/blogs%2Fblog-content-WEBSITE_ID_PLACEHOLDER.json?alt=media";

  try {
    // Use revalidate instead of no-store for better performance
    const response = await fetch(firebaseUrl, {
      next: { revalidate: 3600 }, // Revalidate every hour
    });

    if (!response.ok) {
      throw new Error(`Failed to fetch blog content: ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    console.error("Error fetching blog content:", error);
    // Return empty array as fallback instead of throwing
    return [];
  }
}

// Fetch blog posts from Firebase Cloud Storage
async function getBlogPosts(): Promise<BlogPost[]> {
  try {
    const data = await getLatestBlogContent();
    // Check if data is an array (direct posts) or has a posts property
    return Array.isArray(data) ? data : data.posts || [];
  } catch (error) {
    console.error("Error fetching blog posts:", error);
    return [];
  }
}

export const metadata = {
  title: "Blog - Expert Web Development & SEO Guides",
  description:
    "Expert insights and guides on website optimization, SEO, and performance for various platforms. Learn from industry professionals.",
  keywords: [
    "web development",
    "SEO",
    "website optimization",
    "performance",
    "guides",
  ],
  openGraph: {
    title: "Blog - Expert Web Development & SEO Guides",
    description:
      "Expert insights and guides on website optimization, SEO, and performance.",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Blog - Expert Web Development & SEO Guides",
    description:
      "Expert insights and guides on website optimization, SEO, and performance.",
  },
};

export default async function BlogIndex() {
  const posts = await getBlogPosts();

  // Group posts by platform
  const postsByPlatform = posts.reduce(
    (acc: Record<string, BlogPost[]>, post: BlogPost) => {
      if (!acc[post.platform]) {
        acc[post.platform] = [];
      }
      acc[post.platform].push(post);
      return acc;
    },
    {}
  );

  const currentDate = new Date().toISOString();

  return (
    <>
      {/* JSON-LD Schema for Blog */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Blog",
            name: "Expert Web Development & SEO Blog",
            description:
              "Expert insights and guides on website optimization, SEO, and performance",
            url: process.env.NEXT_PUBLIC_BASE_URL
              ? `${process.env.NEXT_PUBLIC_BASE_URL}/blog`
              : "/blog",
            author: {
              "@type": "Organization",
              name: "SlashBlog",
            },
            dateModified: currentDate,
            blogPost: posts.map((post) => ({
              "@type": "BlogPosting",
              headline: post.title,
              description: post.description,
              url: process.env.NEXT_PUBLIC_BASE_URL
                ? `${process.env.NEXT_PUBLIC_BASE_URL}/blog/${post.slug}`
                : `/blog/${post.slug}`,
              author: {
                "@type": "Organization",
                name: "SlashBlog",
              },
              datePublished: currentDate,
              keywords: [post.keyword, post.platform],
            })),
          }),
        }}
      />

      <div className="min-h-screen bg-white">
        {/* Hero Section */}
        <header className="border-b border-gray-100 py-12 sm:py-16 lg:py-20">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center space-y-6">
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 tracking-tight">
                Blog
              </h1>
              <p className="max-w-2xl mx-auto text-lg text-gray-600 leading-relaxed">
                Expert insights and guides on web development, SEO optimization,
                and performance improvements.
              </p>
              {Object.keys(postsByPlatform).length > 0 && (
                <div className="flex flex-wrap justify-center gap-2 pt-4">
                  {Object.keys(postsByPlatform).map((platform) => (
                    <span
                      key={platform}
                      className="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-gray-100 text-gray-700 border border-gray-200"
                    >
                      {platform}
                    </span>
                  ))}
                </div>
              )}
            </div>
          </div>
        </header>

        {/* Main Content */}
        <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          {posts.length === 0 ? (
            <div className="text-center py-16">
              <div className="w-16 h-16 mx-auto mb-6 rounded-lg bg-gray-100 flex items-center justify-center">
                <svg
                  className="w-8 h-8 text-gray-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
                  />
                </svg>
              </div>
              <h2 className="text-xl font-medium text-gray-900 mb-2">
                No posts yet
              </h2>
              <p className="text-gray-600 max-w-md mx-auto">
                Check back soon for expert insights and guides.
              </p>
            </div>
          ) : (
            <div className="space-y-16">
              {Object.entries(postsByPlatform).map(
                ([platform, platformPosts]: [string, BlogPost[]]) => (
                  <section key={platform} className="space-y-8">
                    <header className="text-center">
                      <h2 className="text-2xl sm:text-3xl font-semibold text-gray-900 mb-4">
                        {platform}{" "}
                        <span className="text-gray-600 font-normal">
                          Guides
                        </span>
                      </h2>
                      <div className="w-16 h-px bg-gray-300 mx-auto" />
                    </header>

                    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                      {platformPosts.map((post: BlogPost, index: number) => (
                        <article
                          key={post.slug}
                          className="group bg-white rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all duration-300 overflow-hidden"
                          itemScope
                          itemType="https://schema.org/BlogPosting"
                        >
                          {/* Card Header */}
                          <div className="p-6">
                            <div className="flex items-start justify-between mb-4">
                              <span className="inline-flex items-center px-3 py-1 rounded-md text-xs font-medium bg-gray-100 text-gray-700 border border-gray-200">
                                {post.platform}
                              </span>
                              <div className="w-6 h-6 rounded-full bg-gray-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                                <svg
                                  className="w-3 h-3 text-gray-400"
                                  fill="none"
                                  stroke="currentColor"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth={2}
                                    d="M9 5l7 7-7 7"
                                  />
                                </svg>
                              </div>
                            </div>

                            <Link
                              href={`/blog/${post.slug}`}
                              className="block group"
                            >
                              <h3
                                className="text-lg font-semibold text-gray-900 mb-3 group-hover:text-gray-700 transition-colors duration-200 leading-tight"
                                itemProp="headline"
                              >
                                {post.title}
                              </h3>
                              <p
                                className="text-gray-600 text-sm leading-relaxed mb-4 line-clamp-3"
                                itemProp="description"
                              >
                                {post.description}
                              </p>
                            </Link>

                            {/* Card Footer */}
                            <div className="flex items-center justify-between pt-2 border-t border-gray-100">
                              <div className="flex items-center space-x-2 text-xs text-gray-500">
                                <svg
                                  className="w-3 h-3"
                                  fill="none"
                                  stroke="currentColor"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth={2}
                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                                  />
                                </svg>
                                <span>5 min read</span>
                              </div>
                              <Link
                                href={`/blog/${post.slug}`}
                                className="inline-flex items-center text-gray-600 hover:text-gray-900 text-xs font-medium transition-colors"
                              >
                                Read more
                                <svg
                                  className="ml-1 w-3 h-3 transition-transform group-hover:translate-x-0.5"
                                  fill="none"
                                  stroke="currentColor"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth={2}
                                    d="M9 5l7 7-7 7"
                                  />
                                </svg>
                              </Link>
                            </div>
                          </div>
                        </article>
                      ))}
                    </div>
                  </section>
                )
              )}
            </div>
          )}
        </main>
      </div>
    </>
  );
}