import React from "react";
import Link from "next/link";
import styles from "./index.module.scss";
import LoaderComponent from "@/components/LoaderComponent";
import { useGetSuggestedBlogsQuery } from "../../services/blogApi";

interface SuggestedBlogsSectionProps {
    blogType: string;
    type: string;
    blogId: string;
}

interface SuggestedBlog {
    _id: string;
    image?: string;
    title?: string;
    description?: string;
    [key: string]: any;
}

const SuggestedBlogsSection: React.FC<SuggestedBlogsSectionProps> = ({
    blogType,
    type,
    blogId,
}) => {
    const {
        data: suggestedBlogsData,
        isLoading: suggestedBlogsLoading,
    } = useGetSuggestedBlogsQuery(
        {
            type: type || "",
            blogType: blogType || "",
            id: blogId || "",
        },
        {
            skip: !blogId || !type || !blogType,
            refetchOnMountOrArgChange: true,
            refetchOnFocus: true,
            refetchOnReconnect: true,
        }
    );

    const suggestedBlogs: SuggestedBlog[] = suggestedBlogsData?.data || [];

    const renderBlogCard = (blog: SuggestedBlog) => (
        <Link
            key={blog._id}
            href={`/dashboard/blog-video-detail/detail?id=${blog._id}`}
            className={styles.blogCard}
        >
            <div className={styles.blogImageWrapper}>
                <img
                    className={styles.blogImage}
                    src={
                        blog.image
                            ? `${process.env.NEXT_PUBLIC_IMAGES_BASE_URL}${blog.image}`
                            : "/images/kalenzra/product/product-1.png"
                    }
                    alt={blog.title || "Suggested Blog"}
                    onError={(e) => {
                        e.currentTarget.src = "/images/kalenzra/product/product-1.png";
                    }}
                />
                <div className={styles.blogOverlay} />
            </div>
            <div className={styles.blogContent}>
                <h5 className={styles.blogTitle}>
                    {blog.title || "Untitled Blog"}
                </h5>
            </div>
        </Link>
    );

    const renderVideoCard = (video: SuggestedBlog) => (
        <Link
            key={video._id}
            href={`/dashboard/blog-video-detail/detail?id=${video._id}`}
            className={styles.videoCard}
        >
            <div className={styles.videoThumbnailWrapper}>
                <img
                    className={styles.videoThumbnail}
                    src={
                        video.image
                            ? `${process.env.NEXT_PUBLIC_IMAGES_BASE_URL}${video.image}`
                            : "/images/kalenzra/product/product-1.png"
                    }
                    alt={video.title || "Suggested Video"}
                    onError={(e) => {
                        e.currentTarget.src = "/images/kalenzra/product/product-1.png";
                    }}
                />
                <div className={styles.videoOverlay}>
                    <div className={styles.playIcon}>
                        <img
                            src="/images/kalenzra/icons/play-icon.svg"
                            alt="Play"
                        />
                    </div>
                </div>
            </div>
            <div className={styles.videoContent}>
                <h6 className={styles.videoTitle}>
                    {video.title || "Untitled Video"}
                </h6>
                {video.description && (
                    <p className={styles.videoDescription}>
                        {video.description.length > 100
                            ? `${video.description.substring(0, 100)}...`
                            : video.description}
                    </p>
                )}
            </div>
        </Link>
    );

    return (
        <div className={styles.suggestedBlogsContainer}>
            <div className={styles.sectionHeader}>
                <h5>
                    Suggested {type === "blog" ? "Blogs" : "Videos"}
                </h5>
            </div>

            {suggestedBlogsLoading ? (
                <div className={styles.loadingContainer}>
                    <LoaderComponent />
                </div>
            ) : suggestedBlogs.length === 0 ? (
                <div className={styles.emptyState}>
                    <p>No {type === "blog" ? "blogs" : "videos"} found</p>
                </div>
            ) : (
                <div className={styles.blogsList}>
                    {type === "blog"
                        ? suggestedBlogs.map(renderBlogCard)
                        : suggestedBlogs.map(renderVideoCard)}
                </div>
            )}
        </div>
    );
};

export default SuggestedBlogsSection;