"use client";

import React from "react";
import Link from "next/link";
import { ChevronLeftIcon, StarIcon } from "lucide-react";

export default function PageRenderer({ content }: { content: any }) {
  if (!content || !content.sections) return null;

  return (
    <div className="w-full flex flex-col font-sans">
      {content.sections.map((section: any, sIdx: number) => (
        <section
          key={section.id || sIdx}
          className={`w-full ${section.settings?.padding || "py-8"}`}
          style={{
            backgroundColor: section.settings?.backgroundColor || "transparent",
            backgroundImage: section.settings?.backgroundImage
              ? `url(${section.settings.backgroundImage})`
              : "none",
          }}
        >
          <div className="container mx-auto px-4 max-w-7xl">
            <div className="grid grid-cols-12 gap-6">
              {section.columns.map((col: any, cIdx: number) => (
                <div key={col.id || cIdx} className={col.span || "col-span-12"}>
                  <div className="flex flex-col gap-4">
                    {col.elements.map((el: any, eIdx: number) => (
                      <div key={el.id || eIdx} className={`w-full ${el.props?.className || ""}`}>
                        {/* Global Block Header */}
                        {el.props?.blockTitle && (
                          <div className="flex items-center gap-3 mb-6 mt-2">
                            {el.props.blockIcon && (
                              <div
                                className="w-12 h-12 rounded-2xl flex items-center justify-center p-2 shadow-sm"
                                style={{ backgroundColor: el.props.blockIconBgColor || "#f0f0f0" }}
                              >
                                <img src={el.props.blockIcon} alt="icon" className="w-full h-full object-contain" />
                              </div>
                            )}
                            <h3
                              className="text-2xl font-bold"
                              style={{ color: el.props.blockTitleColor || "#333333" }}
                            >
                              {el.props.blockTitle}
                            </h3>
                          </div>
                        )}

                        {/* Rendering elements based on type */}
                        {el.type === "heading" && React.createElement(el.props.tag || "h2", { className: "text-2xl font-bold" }, el.props.text)}
                        
                        {el.type === "text" && <p className="text-slate-600 leading-relaxed">{el.props.text}</p>}
                        
                        {el.type === "image" && el.props.url && (
                          <img src={el.props.url} alt={el.props.alt || ""} className="max-w-full h-auto rounded-2xl shadow-sm" />
                        )}
                        
                        {el.type === "slideshow" && (
                          <div className="w-full relative rounded-[2.5rem] overflow-hidden shadow-xl aspect-[21/9] bg-slate-900 group">
                            {el.props.slides && el.props.slides.length > 0 && (
                              <>
                                <img src={el.props.slides[0].url} className="w-full h-full object-cover opacity-80" alt={el.props.slides[0].title} />
                                <div className="absolute inset-0 flex flex-col justify-center p-8 md:p-16 lg:p-24 bg-gradient-to-l from-black/60 to-transparent">
                                  <h3 className="text-3xl md:text-5xl lg:text-6xl font-extrabold text-white mb-4 leading-tight">{el.props.slides[0].title}</h3>
                                  <p className="text-lg md:text-xl text-white/90 mb-8 max-w-lg">{el.props.slides[0].text}</p>
                                  {el.props.slides[0].btnText && (
                                    <Link href={el.props.slides[0].link || "#"} className="bg-white text-slate-900 px-8 py-3 rounded-full font-bold w-max shadow-lg hover:scale-105 transition-transform">
                                      {el.props.slides[0].btnText}
                                    </Link>
                                  )}
                                </div>
                              </>
                            )}
                          </div>
                        )}

                        {el.type === "category_grid" && (
                          <div className="w-full grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4 py-4">
                            {[...Array(el.props.count || 6)].map((_, i) => {
                              const item = el.props.items?.[i];
                              return (
                                <Link href={item?.link || "#"} key={i} className="flex flex-col items-center gap-3 group/cat cursor-pointer">
                                  <div className="w-16 h-16 md:w-24 md:h-24 rounded-full bg-slate-100 border-[6px] border-white shadow-lg flex items-center justify-center overflow-hidden group-hover/cat:border-indigo-100 transition-all group-hover/cat:-translate-y-2">
                                    {item?.image ? (
                                      <img src={item.image} alt={item.title} className="w-full h-full object-cover" />
                                    ) : (
                                      <span className="text-slate-400 text-xs text-center">بدون عکس</span>
                                    )}
                                  </div>
                                  <span className="text-sm font-bold text-center text-slate-700">{item?.title || `دسته ${i + 1}`}</span>
                                </Link>
                              );
                            })}
                          </div>
                        )}

                        {el.type === "banner_grid" && (
                          <div className={`w-full grid gap-6 ${el.props.columns === 2 ? "grid-cols-1 md:grid-cols-2" : el.props.columns === 4 ? "grid-cols-2 md:grid-cols-4" : el.props.columns === 3 ? "grid-cols-1 md:grid-cols-3" : "grid-cols-1 md:grid-cols-2"}`}>
                            {[...Array(el.props.columns || 2)].map((_, i) => {
                              const item = el.props.items?.[i];
                              return (
                                <Link href={item?.link || "#"} key={i} className={`w-full ${el.props.aspectRatio === "square" ? "aspect-square" : el.props.aspectRatio === "tall" ? "aspect-[3/4]" : "aspect-[2/1]"} bg-slate-200 rounded-[2rem] flex items-center justify-center text-slate-500 font-bold overflow-hidden cursor-pointer relative group/banner shadow-sm hover:shadow-xl transition-shadow`}>
                                  {item?.image ? (
                                    <img src={item.image} alt={item.title} className="w-full h-full object-cover group-hover/banner:scale-110 transition-transform duration-700" />
                                  ) : (
                                    <span>بنر {i + 1}</span>
                                  )}
                                  {item?.title && (
                                    <div className="absolute inset-0 flex items-center justify-center bg-black/20 group-hover/banner:bg-black/40 transition-colors">
                                      <span className="text-white font-bold text-2xl drop-shadow-md">{item.title}</span>
                                    </div>
                                  )}
                                </Link>
                              );
                            })}
                          </div>
                        )}

                        {el.type === "features_list" && (
                          <div className="w-full flex flex-wrap justify-around items-center gap-6 py-8 border-y border-slate-100 bg-slate-50/50 rounded-3xl my-4">
                            {[...Array(el.props.count || 4)].map((_, i) => {
                              const item = el.props.items?.[i];
                              return (
                                <div key={i} className="flex items-center gap-4">
                                  <div className="w-16 h-16 rounded-2xl flex items-center justify-center shadow-sm" style={{ backgroundColor: el.props.iconBgColor || "#e0e7ff", color: el.props.iconColor || "#4f46e5" }}>
                                    {item?.icon ? (
                                      <img src={item.icon} className="w-8 h-8 object-contain" />
                                    ) : (
                                      <span className="text-2xl">✨</span>
                                    )}
                                  </div>
                                  <div>
                                    <div className="font-bold text-base text-slate-800">{item?.title || "ویژگی"}</div>
                                    <div className="text-sm text-slate-500 mt-1">{item?.desc || "توضیحات کوتاه ویژگی"}</div>
                                  </div>
                                </div>
                              );
                            })}
                          </div>
                        )}

                        {el.type === "product_slider" && (
                          <div className="w-full relative">
                            {/* Dummy Product Slider for rendering. In a real app this would fetch real products based on categoryId and sortBy */}
                            <div className={`grid ${el.props.displayType === "grid" ? "grid-cols-2 md:grid-cols-4 gap-6" : "grid-cols-4 gap-4 flex-nowrap overflow-x-auto pb-4 hide-scrollbar"}`}>
                              {[1, 2, 3, 4].map(num => (
                                <div key={num} className="min-w-[250px] bg-white border border-slate-100 rounded-3xl p-4 shadow-sm hover:shadow-xl transition-all group/prod">
                                  <div className="w-full aspect-square rounded-2xl bg-slate-100 mb-4 overflow-hidden relative">
                                    <img src={`https://fakeimg.pl/400x400/f8fafc/94a3b8?text=Product+${num}`} className="w-full h-full object-cover group-hover/prod:scale-105 transition-transform" />
                                    <div className="absolute top-2 right-2 bg-rose-500 text-white text-xs font-bold px-2 py-1 rounded-lg">-20%</div>
                                  </div>
                                  <div className="space-y-1">
                                    <h4 className="font-bold text-slate-800 line-clamp-1">محصول تستی {num}</h4>
                                    <div className="flex gap-1 text-amber-400 text-xs">
                                      <StarIcon className="w-3 h-3 fill-current" />
                                      <StarIcon className="w-3 h-3 fill-current" />
                                      <StarIcon className="w-3 h-3 fill-current" />
                                      <StarIcon className="w-3 h-3 fill-current" />
                                      <StarIcon className="w-3 h-3" />
                                    </div>
                                    <div className="flex items-center justify-between mt-2 pt-2 border-t border-slate-50">
                                      <div className="flex flex-col">
                                        <span className="text-xs text-slate-400 line-through">۴۵۰,۰۰۰</span>
                                        <span className="font-bold text-indigo-600">۳۶۰,۰۰۰ تومان</span>
                                      </div>
                                      <button className="w-8 h-8 rounded-full bg-indigo-50 text-indigo-600 flex items-center justify-center group-hover/prod:bg-indigo-600 group-hover/prod:text-white transition-colors">
                                        +
                                      </button>
                                    </div>
                                  </div>
                                </div>
                              ))}
                            </div>
                          </div>
                        )}
                        
                        {el.type === "divider" && <hr className="my-8 border-slate-200" />}
                        {el.type === "spacer" && <div className="h-16 w-full" />}
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      ))}
    </div>
  );
}