"use client";

import { useAppSelector } from "@/store/hooks";
import { selectCategorySections } from "@/store/slices/homeSlice";
import { slugify } from "@/lib/utils/slugify";
import type { Section } from "@/types/api/section.types";

// Reuse existing layout components
import LatestNewsSection from "@/features/home/components/LatestNewsSection";
import TrendingSection from "@/features/home/components/TrendingSection";
import ListenSection from "@/features/home/components/ListenSection";
import ArticleLandscapeSection from "@/features/home/components/ArticleLandscapeSection";
import ArticleSmallLandscapeSection from "@/features/home/components/ArticleSmallLandscapeSection";
import ArticleSquareSection from "@/features/home/components/ArticleSquareSection";
import ArticlePortraitSection from "@/features/home/components/ArticlePortraitSection";

// Visible screen_layout values only (ignore display:none ones)
const VISIBLE_LAYOUTS = new Set([
  "landscape",
  "portrait",
  "square",
  "list_view",
  "small_landscape",
  "small_portrait",
]);

function renderCategorySection(section: Section, locale: string) {
  // Category page only shows type = 1 (Article) sections
  if (section.type !== 1) return null;
  // Skip hidden screen_layout types
  if (!VISIBLE_LAYOUTS.has(section.screen_layout)) return null;
  // Skip empty data sections (except list_view / small_portrait / portrait which have fallbacks)
  const hasData = section.data.length > 0;

  switch (section.screen_layout) {
    case "list_view":
      return (
        <LatestNewsSection key={section.id} section={section} locale={locale} />
      );

    case "small_portrait":
      return (
        <TrendingSection key={section.id} section={section} locale={locale} />
      );

    case "portrait":
      return section.article_type === 3 ? (
        <ListenSection key={section.id} section={section} locale={locale} />
      ) : (
        <ArticlePortraitSection
          key={section.id}
          section={section}
          locale={locale}
        />
      );

    case "landscape":
      if (!hasData) return null;
      return (
        <ArticleLandscapeSection
          key={section.id}
          section={section}
          locale={locale}
        />
      );

    case "small_landscape":
      if (!hasData) return null;
      return (
        <ArticleSmallLandscapeSection
          key={section.id}
          section={section}
          locale={locale}
        />
      );

    case "square":
      if (!hasData) return null;
      return (
        <ArticleSquareSection
          key={section.id}
          section={section}
          locale={locale}
        />
      );

    default:
      return null;
  }
}

interface Props {
  categorySlug: string;
  locale: string;
}

export default function CategorySectionRenderer({
  categorySlug,
  locale,
}: Props) {
  const navCategories = useAppSelector((s) => s.navCategories.items);
  const category = navCategories.find((c) => slugify(c.name) === categorySlug);
  const categoryId = category?.id ?? 0;
  const sections = useAppSelector((s) => selectCategorySections(s, categoryId));

  if (!sections.length) {
    return (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          padding: "5rem 1rem",
          gap: "0.75rem",
          color: "var(--text-secondary, #6b7280)",
        }}
      >
        <svg
          width="48"
          height="48"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          opacity={0.35}
        >
          <circle cx="11" cy="11" r="8" />
          <path d="M21 21l-4.35-4.35" />
        </svg>
        <p style={{ margin: 0, fontSize: "1rem", fontWeight: 600 }}>
          No articles found
        </p>
        <p style={{ margin: 0, fontSize: "0.875rem" }}>
          There are no articles in this category yet.
        </p>
      </div>
    );
  }

  const sorted = sections.slice().sort((a, b) => a.sort_order - b.sort_order);

  return <>{sorted.map((section) => renderCategorySection(section, locale))}</>;
}