Arkie-Library-Frontend/src/pages/Home/index.tsx

import { ChevronRight } from "lucide-react";
import { Link } from "react-router-dom";
import { useEffect, useRef, useState } from "react";
import { getJSON, itemsOrEmpty, type Category } from "../../api";
import { CategoryIcon } from "../../components/CategoryIcon";
import { FigmaBanner } from "../../components/FigmaBanner";
import {
  ComingSoonLatestUpdateRow,
  LatestUpdateRow,
} from "../../components/LatestUpdateRow";
import { RecommendedCard } from "../../components/RecommendedCard";
import { SectionHeader } from "../../components/SectionHeader";
import { langQuery, useI18n } from "../../i18n";
import { sourceLanguageQuery } from "../../i18nLanguages";
import { categoryCardLines } from "../../utils/categoryDisplay";
import {
  postToResource,
  type PostBackedResource,
} from "../../utils/postResourceAdapter";
import type { Post } from "../../types/post";

export function Home() {
  const { t, lang } = useI18n();
  const [cats, setCats] = useState<Category[]>([]);
  const [rec, setRec] = useState<PostBackedResource[]>([]);
  const [latest, setLatest] = useState<PostBackedResource[]>([]);
  const [err, setErr] = useState<string | null>(null);
  const recRowRef = useRef<HTMLDivElement>(null);
  const [canScrollRec, setCanScrollRec] = useState(false);

  useEffect(() => {
    const langParam = encodeURIComponent(langQuery(lang));
    const languageParam = encodeURIComponent(sourceLanguageQuery(lang));
    const catQ = `?lang=${langParam}`;
    const postQ = `?lang=${langParam}&language=${languageParam}`;
    Promise.all([
      getJSON<Category[]>(`/api/categories${catQ}`),
      getJSON<{ items: Post[] }>(`/api/posts/recommended${postQ}&limit=12`),
      getJSON<{ items: Post[] }>(`/api/posts/latest${postQ}&limit=8`),
    ])
      .then(([c, r, l]) => {
        setCats(itemsOrEmpty(c));
        setRec(
          itemsOrEmpty(r.items).map((post) =>
            postToResource(post, lang, itemsOrEmpty(c)),
          ),
        );
        setLatest(
          itemsOrEmpty(l.items).map((post) =>
            postToResource(post, lang, itemsOrEmpty(c)),
          ),
        );
      })
      .catch((e) => setErr(String(e)));
  }, [lang]);

  const iconKeyForResource = (r: PostBackedResource) =>
    cats.find((c) => c.id === r.categoryId)?.iconKey ?? "folder";

  useEffect(() => {
    const row = recRowRef.current;
    if (!row) {
      setCanScrollRec(false);
      return;
    }

    const updateCanScroll = () => {
      setCanScrollRec(row.scrollWidth > row.clientWidth + 1);
    };

    updateCanScroll();
    const resizeObserver = new ResizeObserver(updateCanScroll);
    resizeObserver.observe(row);
    return () => resizeObserver.disconnect();
  }, [rec.length]);

  const scrollRec = (dir: 1 | -1) => {
    recRowRef.current?.scrollBy({ left: dir * 280, behavior: "smooth" });
  };

  const latestPlaceholderCount = Math.max(0, 5 - latest.length);

  if (err) {
    return (
      <div className="mt-6 rounded-xl border border-red-900 bg-red-950/40 p-4 text-red-200 md:mt-0">
        {err}
      </div>
    );
  }

  return (
    <div className="space-y-[30px] pb-10 md:space-y-10 md:pb-16 xl:space-y-[34px]">
      <section className="-mt-6 md:mt-0">
        <FigmaBanner />
      </section>

      <section id="categories" className="scroll-mt-24">
        <SectionHeader
          title={t("categorySection")}
          viewAllTo="/browse"
          viewAllLabel={t("viewAll")}
        />
        <div className="mt-7 grid grid-cols-3 gap-3 min-[440px]:gap-3.5 md:grid-cols-5 md:gap-3 lg:grid-cols-6 xl:grid-cols-7 xl:gap-4">
          {cats.map((c) => {
            const { line1, line2 } = categoryCardLines(c.name);
            return (
              <Link
                key={c.id}
                to={`/category/${c.slug}`}
                className="group flex min-h-[111px] min-w-0 flex-col items-center justify-center gap-3 rounded-xl border border-ark-line bg-ark-panel px-2.5 py-4 text-center transition hover:border-ark-gold/55 hover:shadow-[0_0_0_1px_rgba(238,183,38,0.12)] md:min-h-24 md:flex-row md:justify-start md:gap-4 md:px-5 md:text-left"
              >
                <CategoryIcon
                  iconKey={c.iconKey}
                  categorySlug={c.slug}
                  className="h-9 w-9 shrink-0 text-ark-gold md:h-9 md:w-9"
                />
                <div className="min-w-0">
                  <div className="text-[15px] font-bold leading-snug text-white line-clamp-2 md:text-sm">
                    {line1}
                  </div>
                  {line2 ? (
                    <div className="mt-0.5 text-[15px] font-bold leading-snug text-white line-clamp-2 md:text-sm">
                      {line2}
                    </div>
                  ) : null}
                </div>
              </Link>
            );
          })}
        </div>
      </section>

      <section>
        <SectionHeader
          title={t("officialSection")}
          viewAllTo="/browse?sort=recommended"
          viewAllLabel={t("viewAll")}
        />
        <div className="relative mt-7">
          <div
            ref={recRowRef}
            className="flex gap-3 overflow-x-auto pb-5 pr-0 scroll-smooth snap-x snap-mandatory [-ms-overflow-style:none] [scrollbar-width:none] md:gap-4 [&::-webkit-scrollbar]:hidden"
          >
            {rec.map((r, index) => (
              <div key={r.id} className="snap-start">
                <RecommendedCard r={r} visualIndex={index} />
              </div>
            ))}
          </div>
          <div className="h-1 rounded-full bg-black/80 md:hidden">
            <div className="h-full w-24 rounded-full bg-[#353740]" />
          </div>
          {canScrollRec ? (
            <button
              type="button"
              onClick={() => scrollRec(1)}
              className="absolute right-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
              aria-label={t("viewAll")}
            >
              <ChevronRight className="h-5 w-5" />
            </button>
          ) : null}
        </div>
      </section>

      <section>
        <SectionHeader
          title={t("latestSection")}
          viewAllTo="/browse?sort=latest"
          viewAllLabel={t("viewAll")}
        />
        <div className="mt-7 grid gap-3 min-[576px]:grid-cols-2 md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
          {latest.map((r) => (
            <LatestUpdateRow key={r.id} r={r} iconKey={iconKeyForResource(r)} />
          ))}
          {Array.from({ length: latestPlaceholderCount }).map((_, index) => (
            <ComingSoonLatestUpdateRow
              key={`latest-coming-soon-${index}`}
              index={latest.length + index}
            />
          ))}
        </div>
      </section>
    </div>
  );
}