"use client";

/**
 * AppMagazine — NATIVE "Magazin" ekran.
 *
 * Renderuje se SAMO u Capacitor native ljusci I kada je ruta tačno
 * `/magazin` (+ `/en/magazin`) — NE na članku `/magazin/<slug>`. Pun
 * fixed overlay (isti pristup kao AppCatalog); na web-u `null` → web
 * bajt-identičan. Podaci iz read-only `/api/app/magazine`. Svaka kartica
 * vodi u POSTOJEĆU rutu `/magazin/<slug>` (renderuje se u native ljusci).
 */

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useCallback, useEffect, useMemo, useState } from "react";

import { nativeHaptic } from "@/components/native/CapacitorBootstrap";
import { trackScreen } from "@/lib/native/analytics";
import { getLocalePrefix, type Locale } from "@/lib/i18n/i18n";

type Article = {
  slug: string;
  title: string;
  category: string;
  excerpt: string;
  coverUrl: string | null;
  readingMinutes: number | null;
  publishedAt: string;
};

function useIsNative(): boolean | null {
  const [native, setNative] = useState<boolean | null>(null);
  useEffect(() => {
    let disposed = false;
    (async () => {
      try {
        const { Capacitor } = await import("@capacitor/core");
        if (!disposed) setNative(Capacitor.isNativePlatform());
      } catch {
        if (!disposed) setNative(false);
      }
    })();
    return () => {
      disposed = true;
    };
  }, []);
  return native;
}

export function AppMagazine({
  locale,
  dictionary,
}: {
  locale: Locale;
  dictionary: Record<string, string>;
}) {
  const native = useIsNative();
  const pathname = usePathname();
  const prefix = getLocalePrefix(locale);
  const t = (k: string, fb: string) => dictionary[k] ?? fb;

  const isMagRoute = useMemo(() => {
    const path =
      prefix && pathname.startsWith(prefix)
        ? pathname.slice(prefix.length)
        : pathname;
    const norm = path.replace(/\/+$/, "") || "/";
    return norm === "/magazin";
  }, [pathname, prefix]);

  const [items, setItems] = useState<Article[] | null>(null);
  const [cats, setCats] = useState<string[]>([]);
  const [activeCat, setActiveCat] = useState<string | null>(null);
  const [error, setError] = useState(false);

  const load = useCallback(async () => {
    setError(false);
    try {
      const res = await fetch("/api/app/magazine", { cache: "no-store" });
      if (!res.ok) throw new Error("bad");
      const j = (await res.json()) as { items: Article[]; categories: string[] };
      setItems(Array.isArray(j.items) ? j.items : []);
      setCats(Array.isArray(j.categories) ? j.categories : []);
    } catch {
      setError(true);
      setItems([]);
    }
  }, []);

  useEffect(() => {
    if (native === true && isMagRoute) void load();
  }, [native, isMagRoute, load]);

  useEffect(() => {
    if (native === true && isMagRoute) trackScreen("magazine");
  }, [native, isMagRoute]);

  if (native !== true || !isMagRoute) return null;

  const loading = items === null;
  const shown =
    items && activeCat
      ? items.filter((a) => a.category === activeCat)
      : items ?? [];
  const featured = shown[0];
  const rest = shown.slice(1);

  return (
    <div
      className="appmag-root"
      role="region"
      aria-label={t("nav.magazine", "Magazin")}
    >
      <div className="appmag-hero">
        <p className="appmag-title">{t("app.magazine.title", "Magazin")}</p>
        <p className="appmag-sub">
          {t(
            "app.magazine.subtitle",
            "Vodiči, analize i priče iz sveta biznisa",
          )}
        </p>
      </div>

      {cats.length > 0 ? (
        <div className="appmag-chips">
          <button
            type="button"
            className="appmag-chip"
            data-active={activeCat === null ? "1" : "0"}
            onClick={() => {
              void nativeHaptic();
              setActiveCat(null);
            }}
          >
            {t("app.magazine.all", "Sve")}
          </button>
          {cats.map((c) => (
            <button
              key={c}
              type="button"
              className="appmag-chip"
              data-active={activeCat === c ? "1" : "0"}
              onClick={() => {
                void nativeHaptic();
                setActiveCat(c);
              }}
            >
              {c}
            </button>
          ))}
        </div>
      ) : null}

      <div className="appmag-body">
        {loading ? (
          <div className="appmag-skel-wrap" aria-hidden>
            {Array.from({ length: 5 }).map((_, i) => (
              <div key={i} className="appmag-skel" />
            ))}
          </div>
        ) : error ? (
          <div className="appmag-empty">
            <p>{t("app.magazine.error", "Nešto je pošlo po zlu.")}</p>
            <button
              type="button"
              className="appmag-retry"
              onClick={() => {
                void nativeHaptic();
                setItems(null);
                void load();
              }}
            >
              {t("app.magazine.retry", "Pokušaj ponovo")}
            </button>
          </div>
        ) : shown.length === 0 ? (
          <p className="appmag-empty">
            {t("app.magazine.empty", "Trenutno nema članaka.")}
          </p>
        ) : (
          <>
            {featured ? (
              <Link
                href={`${prefix}/magazin/${featured.slug}`}
                className="appmag-feature"
                onClick={() => void nativeHaptic()}
              >
                {featured.coverUrl ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={featured.coverUrl}
                    alt=""
                    className="appmag-feature-img"
                    loading="lazy"
                  />
                ) : (
                  <span className="appmag-feature-img appmag-feature-fallback" aria-hidden />
                )}
                <span className="appmag-feature-body">
                  <span className="appmag-cat">{featured.category}</span>
                  <span className="appmag-feature-title">{featured.title}</span>
                  <span className="appmag-feature-excerpt">
                    {featured.excerpt}
                  </span>
                </span>
              </Link>
            ) : null}

            <div className="appmag-list">
              {rest.map((a) => (
                <Link
                  key={a.slug}
                  href={`${prefix}/magazin/${a.slug}`}
                  className="appmag-card"
                  onClick={() => void nativeHaptic()}
                >
                  {a.coverUrl ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                      src={a.coverUrl}
                      alt=""
                      className="appmag-card-img"
                      loading="lazy"
                    />
                  ) : (
                    <span
                      className="appmag-card-img appmag-feature-fallback"
                      aria-hidden
                    />
                  )}
                  <span className="appmag-card-body">
                    <span className="appmag-cat">{a.category}</span>
                    <span className="appmag-card-title">{a.title}</span>
                    {a.readingMinutes ? (
                      <span className="appmag-card-meta">
                        {a.readingMinutes} min
                      </span>
                    ) : null}
                  </span>
                </Link>
              ))}
            </div>
          </>
        )}
      </div>
    </div>
  );
}

export default AppMagazine;