"use client";

/**
 * AppPartnerOnboarding — 3-step welcome ekran za prvi launch.
 * Pamti se u localStorage (`bp-partner-onboarded`) — prikazuje se samo jednom.
 * Gejtovan na native partner varijantu + nepostavljen flag.
 */

import { useCallback, useEffect, useState } from "react";

import { nativeHaptic } from "@/components/native/CapacitorBootstrap";
import {
  ArrowRightIcon,
  ChartIcon,
  MessageIcon,
  ZapIcon,
} from "@/components/native/PartnerIcons";
import { usePathname } from "next/navigation";

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

const KEY = "bp-partner-onboarded-v1";

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;
}

export function AppPartnerOnboarding({
  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 [step, setStep] = useState(0);
  const [dismissed, setDismissed] = useState<boolean>(() => {
    if (typeof window === "undefined") return true;
    try {
      return window.localStorage.getItem(KEY) === "1";
    } catch {
      return true;
    }
  });

  const active =
    (preview.enabled && preview.screen === "onboarding") ||
    (native === true &&
      variant === "partner" &&
      dismissed === false &&
      // Uvod se ranije pojavljivao PREKO login ekrana — pre nego što
      // korisnik uopšte može da dođe do onoga što mu uvod objašnjava.
      !isPartnerAuthPath(pathname, prefix));

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

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

  const finish = useCallback(() => {
    try {
      window.localStorage.setItem(KEY, "1");
    } catch {
      /* no-op */
    }
    setDismissed(true);
  }, [setDismissed]);

  if (!active) return null;

  const steps = [
    {
      icon: <MessageIcon />,
      kicker: t("partner.onb.step1.kicker", "1 / 3"),
      title: t("partner.onb.step1.title", "Tvoji upiti, na jednom mestu"),
      body: t(
        "partner.onb.step1.body",
        "Svaki upit kupca stiže u inbox aplikacije. Tap → odgovor mejlom u jednom koraku.",
      ),
    },
    {
      icon: <ChartIcon />,
      kicker: t("partner.onb.step2.kicker", "2 / 3"),
      title: t("partner.onb.step2.title", "Pratiš sve metrike"),
      body: t(
        "partner.onb.step2.body",
        "Pregled novih upita, pitanja, otvorenih zahteva i računa — sve na Pregled ekranu.",
      ),
    },
    {
      icon: <ZapIcon />,
      kicker: t("partner.onb.step3.kicker", "3 / 3"),
      title: t("partner.onb.step3.title", "Boost + Berza lidova"),
      body: t(
        "partner.onb.step3.body",
        "Aktiviraj boost za veću vidljivost, ili kupi kvalifikovane lid-ove u Berzi.",
      ),
    },
  ];

  const cur = steps[step];

  return (
    <div className="apppartner-onb" role="dialog" aria-modal="true">
      <div className="apppartner-onb-card">
        <div className="apppartner-onb-icon">{cur.icon}</div>
        <p className="apppartner-onb-kicker">{cur.kicker}</p>
        <h2 className="apppartner-onb-title">{cur.title}</h2>
        <p className="apppartner-onb-body">{cur.body}</p>

        <div className="apppartner-onb-dots">
          {steps.map((_, i) => (
            <span
              key={i}
              className="apppartner-onb-dot"
              data-active={i === step ? "true" : "false"}
            />
          ))}
        </div>

        <div className="apppartner-onb-actions">
          {step < steps.length - 1 ? (
            <>
              <button
                type="button"
                className="apppartner-btn-ghost"
                onClick={() => {
                  void nativeHaptic();
                  finish();
                }}
              >
                {t("partner.onb.skip", "Preskoči")}
              </button>
              <button
                type="button"
                className="apppartner-btn-primary apppartner-onb-next"
                onClick={() => {
                  void nativeHaptic();
                  setStep((s) => s + 1);
                }}
              >
                {t("partner.onb.next", "Dalje")}
                <ArrowRightIcon />
              </button>
            </>
          ) : (
            <button
              type="button"
              className="apppartner-btn-primary apppartner-btn-block"
              onClick={() => {
                void nativeHaptic();
                finish();
              }}
            >
              {t("partner.onb.start", "Počni")}
              <ArrowRightIcon />
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

export default AppPartnerOnboarding;