"use client";

/**
 * AppPartnerPlan — native overlay za /portal/paketi (plan upgrade marketplace).
 * Trenutni paket + lista dostupnih planova.
 */

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

import { nativeHaptic } from "@/components/native/CapacitorBootstrap";
import { trackScreen } from "@/lib/native/analytics";
import { getLocalePrefix, type Locale } from "@/lib/i18n/i18n";
import { useAppVariant } from "@/lib/native/app-variant";
import { usePartnerPreview } from "@/lib/native/preview-partner";

type Plan = {
  id: string;
  slug: string;
  name: string;
  description: string | null;
  tier: string;
  priceRsd: number | null;
  priceEur: number | null;
  durationDays: number | null;
  maxGalleryImages: number | null;
  maxCategories: number | null;
  eventsLimit: number | null;
  isFeaturedDefault: boolean;
};

type Payload = {
  current: {
    id: string | null;
    name: string | null;
    tier: string;
    validTo: string | null;
  };
  available: Plan[];
};

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

function isPath(p: string, prefix: string): boolean {
  const x = prefix && p.startsWith(prefix) ? p.slice(prefix.length) : p;
  return (x.replace(/\/+$/, "") || "/") === "/portal/paketi";
}

function fmtRsd(n: number | null): string {
  if (!n) return "—";
  return `${n.toLocaleString("sr-RS")} RSD`;
}

function tierLabel(t: string): string {
  return (
    {
      STANDARD: "Standard",
      BRONZE: "Bronze",
      SILVER: "Silver",
      GOLD: "Gold",
      PLATINUM: "Diamond",
    }[t] ?? t
  );
}

export function AppPartnerPlan({
  locale,
  dictionary,
}: {
  locale: Locale;
  dictionary: Record<string, string>;
}) {
  const native = useIsNative();
  const variant = useAppVariant();
  const preview = usePartnerPreview();
  const pathname = usePathname();
  const prefix = getLocalePrefix(locale);
  const active =
    (preview.enabled && preview.screen === "plan") ||
    (isPath(pathname, prefix) && native === true && variant === "partner");

  const [data, setData] = useState<Payload | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  const t = (k: string, fb: string) => dictionary[k] ?? fb;

  const load = useCallback(async () => {
    setLoading(true);
    setError(false);
    try {
      const url = preview.enabled
        ? "/api/app/partner/demo?kind=plan"
        : "/api/app/partner/plan";
      const res = await fetch(url, { cache: "no-store" });
      if (res.status === 401 && !preview.enabled) {
        window.location.assign(`${prefix}/portal/login`);
        return;
      }
      if (!res.ok) {
        setError(true);
        return;
      }
      setData((await res.json()) as Payload);
    } catch {
      setError(true);
    } finally {
      setLoading(false);
    }
  }, [prefix, preview.enabled]);

  useEffect(() => {
    if (active) void load();
  }, [active, load]);

  useEffect(() => {
    if (active) trackScreen("partner_plan");
  }, [active]);

  if (!active) return null;

  return (
    <div className="apppartner-root" role="region" aria-label="Plan i paketi">
      <div className="apppartner-hero apppartner-hero-compact">
        <div className="apppartner-hero-text">
          <p className="apppartner-kicker">{t("partner.plan.kicker", "Paketi")}</p>
          <h1 className="apppartner-title">{t("partner.plan.title", "Plan i pretplata")}</h1>
          {data?.current ? (
            <p className="apppartner-sub">
              {t("partner.plan.current", "Trenutni")}:{" "}
              <strong>{data.current.name ?? tierLabel(data.current.tier)}</strong>
            </p>
          ) : null}
        </div>
      </div>

      <div className="apppartner-body">
        {loading && !data ? (
          <div className="apppartner-skel-grid" aria-hidden>
            {Array.from({ length: 4 }).map((_, i) => (
              <div key={i} className="apppartner-skel apppartner-skel-row" />
            ))}
          </div>
        ) : error ? (
          <div className="apppartner-empty">
            <p>{t("partner.plan.err", "Trenutno ne mogu da učitam pakete.")}</p>
            <button
              type="button"
              className="apppartner-btn-primary"
              onClick={() => {
                void nativeHaptic();
                void load();
              }}
            >
              {t("common.retry", "Pokušaj ponovo")}
            </button>
          </div>
        ) : data ? (
          <ul className="apppartner-list">
            {data.available.map((p) => {
              const isCurrent = data.current.id === p.id;
              return (
                <li
                  key={p.id}
                  className={`apppartner-list-item apppartner-plan-card`}
                  data-tier={p.tier}
                  data-current={isCurrent ? "true" : "false"}
                >
                  <Link
                    href={`${prefix}/portal/plan`}
                    className="apppartner-list-link"
                    onClick={() => void nativeHaptic()}
                  >
                    <div className="apppartner-list-row">
                      <span className="apppartner-list-title">{p.name}</span>
                      <span className={`apppartner-pill apppartner-tier-${p.tier}`}>
                        {tierLabel(p.tier)}
                      </span>
                    </div>
                    {p.description ? (
                      <p className="apppartner-list-msg">{p.description}</p>
                    ) : null}
                    <div className="apppartner-list-meta">
                      <span className="apppartner-plan-price">{fmtRsd(p.priceRsd)}</span>
                      {p.durationDays ? (
                        <span>· {p.durationDays} dana</span>
                      ) : null}
                      {p.isFeaturedDefault ? (
                        <span className="apppartner-plan-flag">
                          ★ {t("partner.plan.featured", "Istaknuto")}
                        </span>
                      ) : null}
                    </div>
                    {isCurrent ? (
                      <span className="apppartner-pill apppartner-pill-good apppartner-plan-current-pill">
                        ✓ {t("partner.plan.youHave", "Tvoj paket")}
                      </span>
                    ) : null}
                  </Link>
                </li>
              );
            })}
          </ul>
        ) : null}
      </div>
    </div>
  );
}

export default AppPartnerPlan;