"use client";

/**
 * AppPartnerBoost — native overlay za /portal/boost (boost paketi + aktivni).
 */

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 {
  enumLabel,
  BOOST_STATUS_TONE,
} from "@/lib/native/enum-labels";
import { useAppVariant } from "@/lib/native/app-variant";
import { usePartnerPreview } from "@/lib/native/preview-partner";

type Pkg = {
  id: string;
  scope: string;
  durationDays: number;
  priceRsd: number;
  expectedLiftPct: number;
  label: string;
  description: string;
};

type Active = {
  id: string;
  scope: string;
  entityType: string;
  status: string;
  startsAt: string | null;
  expiresAt: string | null;
  durationDays: number;
  priceRsd: number;
};

type Payload = { packages: Pkg[]; active: Active[] };

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/boost";
}

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

function fmtDate(iso: string | null): string {
  if (!iso) return "—";
  try {
    return new Date(iso).toLocaleDateString("sr-RS", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    });
  } catch {
    return iso.slice(0, 10);
  }
}

export function AppPartnerBoost({
  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 === "boost") ||
    (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=boost"
        : "/api/app/partner/boost";
      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_boost");
  }, [active]);

  if (!active) return null;

  return (
    <div className="apppartner-root" role="region" aria-label="Boost">
      <div className="apppartner-hero apppartner-hero-compact">
        <div className="apppartner-hero-text">
          <p className="apppartner-kicker">{t("partner.boost.kicker", "Boost")}</p>
          <h1 className="apppartner-title">{t("partner.boost.title", "Pojačaj svoj profil")}</h1>
          <p className="apppartner-sub">
            {t("partner.boost.sub", "Veća vidljivost u listingu i pretragama na ograničen period.")}
          </p>
        </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" />
            ))}
          </div>
        ) : error ? (
          <div className="apppartner-empty">
            <p>{t("partner.boost.err", "Trenutno ne mogu da učitam boost.")}</p>
            <button
              type="button"
              className="apppartner-btn-primary"
              onClick={() => {
                void nativeHaptic();
                void load();
              }}
            >
              {t("common.retry", "Pokušaj ponovo")}
            </button>
          </div>
        ) : data ? (
          <>
            {data.active.length > 0 ? (
              <section className="apppartner-section">
                <h2 className="apppartner-h2">{t("partner.boost.activeTitle", "Aktivni boost-ovi")}</h2>
                <ul className="apppartner-list">
                  {data.active.map((b) => (
                    <li key={b.id} className="apppartner-list-item">
                      <div className="apppartner-list-link" data-static>
                        <div className="apppartner-list-row">
                          <span className="apppartner-list-title">
                            {enumLabel(dictionary, "boostScope", b.scope)}
                          </span>
                          <span
                            className={`apppartner-pill apppartner-pill-${
                              BOOST_STATUS_TONE[b.status] ?? "muted"
                            }`}
                          >
                            {enumLabel(dictionary, "boostStatus", b.status)}
                          </span>
                        </div>
                        <div className="apppartner-list-meta">
                          <span>
                            {enumLabel(dictionary, "boostEntity", b.entityType)}
                          </span>
                          <span>· {fmtDate(b.startsAt)} → {fmtDate(b.expiresAt)}</span>
                        </div>
                      </div>
                    </li>
                  ))}
                </ul>
              </section>
            ) : null}

            <section className="apppartner-section">
              <h2 className="apppartner-h2">{t("partner.boost.packagesTitle", "Dostupni paketi")}</h2>
              {data.packages.length === 0 ? (
                <p className="apppartner-empty-line">
                  {t("partner.boost.noPackages", "Nema dostupnih paketa.")}
                </p>
              ) : (
                <ul className="apppartner-list">
                  {data.packages.map((p) => (
                    <li key={p.id} className="apppartner-list-item">
                      <Link
                        href={`${prefix}/portal/boost`}
                        className="apppartner-list-link"
                        onClick={() => void nativeHaptic()}
                      >
                        <div className="apppartner-list-row">
                          <span className="apppartner-list-title">{p.label}</span>
                          <span className="apppartner-pill apppartner-pill-good">
                            +{p.expectedLiftPct}%
                          </span>
                        </div>
                        <p className="apppartner-list-msg">{p.description}</p>
                        <div className="apppartner-list-meta">
                          <span>{p.durationDays} dana</span>
                          <span>· {fmtRsd(p.priceRsd)}</span>
                          <span>
                            · {enumLabel(dictionary, "boostScope", p.scope)}
                          </span>
                        </div>
                      </Link>
                    </li>
                  ))}
                </ul>
              )}
            </section>
          </>
        ) : null}
      </div>
    </div>
  );
}

export default AppPartnerBoost;