// articleDetailPage.jsx
'use client';

import { Suspense } from "react";
import Container from "../atoms/Container";
import ArticleHeader from "./singleblog/ArticleHeader";
import ArticleContent from "./singleblog/ArticleContent";
import RelatedArticles from "./singleblog/RelatedArticles";
import CommentSection from "./singleblog/CommentSection";
import LoadingSpinner from "./singleblog/LoadingSpinner";
import Link from "next/link";
import Image from "next/image";
import { ArrowRight, BookOpen, ExternalLink, Facebook, Instagram, Linkedin, Twitter } from "lucide-react";
import AuthorSection from "./AuthorSection";

export default function ArticleDetailPage({ 
  singleData, 
  blogData,
  initialComments = [],
  initialReplies = [],
  authorData
}) {
  if (!singleData.success) {
    throw new Error(singleData.message);
  }

  const article = singleData?.data;
  const blogs = blogData?.data;

  const getS3Url = (imagePath) => {
    if (!imagePath) return null;
    
    if (imagePath.startsWith('/')) {
      return `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${imagePath.replace(/^\/+/, "")}`;
    }
    
    if (imagePath.startsWith('http')) {
      return imagePath;
    }
    
    return `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${imagePath}`;
  };

  return (
    <div className="min-h-screen bg-linear-to-b from-gray-50 to-white">
      
      <Suspense fallback={<LoadingSpinner />}>
        <ArticleHeader article={article} />
      </Suspense>

      <Container>
        <Suspense fallback={<ArticleContentSkeleton />}>
          <ArticleContent article={article} />
        </Suspense>
      </Container>
      
      <Container>
        <Suspense>
          <AuthorSection authorData={authorData} />
        </Suspense>
      </Container>

      <Container>
        <Suspense fallback={<RelatedArticlesSkeleton />}>
          <RelatedArticles blogs={blogs} />
        </Suspense>
      </Container>

      <Container>
        <Suspense fallback={<CommentSectionSkeleton />}>
          <CommentSection 
            article={article}
            initialComments={initialComments}
            initialReplies={initialReplies}
          />
        </Suspense>
      </Container>
    </div>
  );
}

// Skeleton Components
function ArticleContentSkeleton() {
  return (
    <div className="relative -mt-10 bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden animate-pulse">
      <div className="h-8 bg-gray-200 rounded w-3/4 mx-auto my-12"></div>
      <div className="p-8 md:p-12">
        <div className="h-6 bg-gray-200 rounded w-3/4 mb-4"></div>
        <div className="h-4 bg-gray-200 rounded w-full mb-2"></div>
        <div className="h-4 bg-gray-200 rounded w-5/6 mb-2"></div>
        <div className="h-4 bg-gray-200 rounded w-4/6"></div>
      </div>
    </div>
  );
}

function RelatedArticlesSkeleton() {
  return (
    <div className="py-16">
      <div className="text-center mb-12">
        <div className="h-8 bg-gray-200 rounded w-48 mx-auto mb-4"></div>
        <div className="h-4 bg-gray-200 rounded w-64 mx-auto"></div>
      </div>
      <div className="flex gap-6">
        {[1, 2, 3].map(i => (
          <div key={i} className="flex-1">
            <div className="h-48 bg-gray-200 rounded-xl mb-4"></div>
            <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
            <div className="h-3 bg-gray-200 rounded w-full mb-1"></div>
            <div className="h-3 bg-gray-200 rounded w-5/6"></div>
          </div>
        ))}
      </div>
    </div>
  );
}

function CommentSectionSkeleton() {
  return (
    <div className="py-16">
      <div className="bg-linear-to-r from-teal-50/50 to-blue-50/50 rounded-2xl p-8 md:p-12 border border-teal-100">
        <div className="text-center mb-12">
          <div className="h-8 bg-gray-200 rounded w-56 mx-auto mb-4"></div>
          <div className="h-4 bg-gray-200 rounded w-72 mx-auto"></div>
        </div>
      </div>
    </div>
  );
}