"use client";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import "./blog.css";
import axios from "axios";
import { backendUrl } from "@/utils/axios";
import DOMPurify from 'dompurify';
import { useParams } from "next/navigation";



const SingleBlog = () => {
  const [blog, setBlog] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Debug log to check if slug is received
  const params = useParams();
  
  console.log("BlogPage params:", params);
  console.log("SingleBlog received slug:", params?.["blog-id"]);
  const slug = params?.["blog-id"]

  useEffect(() => {
    const fetchBlogData = async () => {
      if (!slug) {
        console.error("No slug provided");
        setError("Blog not found. Missing identifier.");
        setLoading(false);
        return;
      }

      try {
        console.log(`Fetching blog with slug: ${slug}`);
        setLoading(true);
        
        // Log the full URL being called for debugging
        const url = `${backendUrl}/blogs/${slug}/`;
        console.log(`Making API call to: ${url}`);
        
        const response = await axios.get(url);
        console.log("API response:", response.data);
        
        if (response.data) {
          setBlog(response.data);
        } else {
          setError("No blog data received from server");
        }
        setLoading(false);
      } catch (err) {
        console.error("Error fetching blog data:", err);
        setError(`Failed to load blog content: ${err.message || "Unknown error"}`);
        setLoading(false);
      }
    };

    fetchBlogData();
  }, [slug]);

  if (loading) {
    return (
      <div className="max-w-4xl mx-auto p-5 text-center">
        <p className="text-gray-500">Loading blog content for slug: {slug}...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="max-w-4xl mx-auto p-5 text-center">
        <p className="text-red-500">Error: {error}</p>
      </div>
    );
  }

  if (!blog) {
    return (
      <div className="max-w-4xl mx-auto p-5 text-center">
        <p className="text-gray-500">Blog not found for slug: {slug}</p>
      </div>
    );
  }

  // Format the image URL
  const imageUrl = blog.imageUrl !== "NA" 
    ? (blog.imageUrl.startsWith('http') ? blog.imageUrl : `${backendUrl}${blog.imageUrl}`)
    : "/api/placeholder/800/500";

  // Sanitize the blog description
  const sanitizedDescription = DOMPurify.sanitize(blog.description);

  return (
    <div className="max-w-4xl mx-auto p-5 space-y-6 bg-white shadow-lg rounded-lg">
      {/* Blog Title */}
      <h1 className="text-3xl font-bold text-center mb-6">{blog.title}</h1>
      
      {/* Blog Meta Information */}
      <div className="text-center text-gray-600 mb-6">
        <p>{blog.author} | {blog.date}</p>
      </div>
      
      {/* Blog Image */}
      <div className="w-full flex justify-center">
        <Image
          src={imageUrl}
          height={500}
          width={800}
          alt={blog.title || "Blog Cover Image"}
          className="rounded-lg object-cover"
        />
      </div>

      {/* Blog Content */}
      <div className="prose lg:prose-xl mx-auto text-gray-800 leading-relaxed">
        <div 
          className="blog-content"
          dangerouslySetInnerHTML={{ __html: sanitizedDescription }}
        />
      </div>
    </div>
  );
};

export default SingleBlog;