"use client";

/**
 * AppPartnerSettings — settings overlay za /portal/podesavanja
 * Push toggle (Capacitor), jezik (sr/en), reset onboarding, app version.
 */

import { usePathname, useRouter } 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";

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

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

  const [pushEnabled, setPushEnabled] = useState<boolean | null>(null);
  const [pushBusy, setPushBusy] = useState(false);
  const [appInfo, setAppInfo] = useState<{ name: string; version: string; build: string } | null>(null);

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

  // Load push state + app info
  useEffect(() => {
    if (!active) return;
    (async () => {
      try {
        const { Capacitor } = await import("@capacitor/core");
        if (Capacitor.isNativePlatform()) {
          const { PushNotifications } = await import("@capacitor/push-notifications");
          const perm = await PushNotifications.checkPermissions();
          setPushEnabled(perm.receive === "granted");
          const { App } = await import("@capacitor/app");
          const info = await App.getInfo();
          setAppInfo({ name: info.name, version: info.version, build: info.build });
        }
      } catch {
        setPushEnabled(false);
      }
    })();
  }, [active]);

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

  const togglePush = useCallback(async () => {
    setPushBusy(true);
    try {
      const { Capacitor } = await import("@capacitor/core");
      if (!Capacitor.isNativePlatform()) return;
      const { PushNotifications } = await import("@capacitor/push-notifications");
      if (pushEnabled) {
        // User can disable from system settings — we just show status here.
        setPushEnabled(false);
        return;
      }
      const result = await PushNotifications.requestPermissions();
      if (result.receive === "granted") {
        await PushNotifications.register();
        setPushEnabled(true);
      } else {
        setPushEnabled(false);
      }
    } catch {
      /* no-op */
    } finally {
      setPushBusy(false);
    }
  }, [pushEnabled]);

  const resetOnboarding = useCallback(() => {
    try {
      window.localStorage.removeItem("bp-partner-onboarded-v1");
    } catch {
      /* no-op */
    }
    window.location.assign(`${prefix}/portal`);
  }, [prefix]);

  const switchLocale = useCallback(
    (next: "sr" | "en") => {
      if (locale === next) return;
      const path = pathname.replace(/^\/en/, "") || "/";
      const target = next === "en" ? `/en${path}` : path;
      router.push(target);
    },
    [locale, pathname, router],
  );

  if (!active) return null;

  return (
    <div className="apppartner-root" role="region" aria-label="Podešavanja">
      <div className="apppartner-hero apppartner-hero-compact">
        <div className="apppartner-hero-text">
          <button
            type="button"
            className="apppartner-back"
            onClick={() => {
              void nativeHaptic();
              router.push(`${prefix}/portal/plan`);
            }}
            aria-label={t("common.back", "Nazad")}
          >
            ←
          </button>
          <h1 className="apppartner-title">
            {t("partner.settings.title", "Podešavanja")}
          </h1>
        </div>
      </div>

      <div className="apppartner-body">
        <section className="apppartner-section">
          <h2 className="apppartner-h2">{t("partner.settings.notif", "Notifikacije")}</h2>
          <div className="apppartner-row">
            <div className="apppartner-row-text">
              <span className="apppartner-row-title">
                {t("partner.settings.push", "Push obaveštenja")}
              </span>
              <span className="apppartner-row-desc">
                {t(
                  "partner.settings.pushDesc",
                  "Primaj odmah obaveštenja za nove upite, pitanja i poruke.",
                )}
              </span>
            </div>
            <button
              type="button"
              role="switch"
              aria-checked={pushEnabled === true}
              className="apppartner-switch"
              data-on={pushEnabled === true ? "true" : "false"}
              disabled={pushBusy}
              onClick={() => {
                void nativeHaptic();
                void togglePush();
              }}
            >
              <span className="apppartner-switch-thumb" />
            </button>
          </div>
        </section>

        <section className="apppartner-section">
          <h2 className="apppartner-h2">{t("partner.settings.lang", "Jezik")}</h2>
          <div className="apppartner-actions">
            <button
              type="button"
              className="apppartner-action"
              data-active={locale === "sr" ? "true" : "false"}
              onClick={() => {
                void nativeHaptic();
                switchLocale("sr");
              }}
            >
              🇷🇸 Srpski
            </button>
            <button
              type="button"
              className="apppartner-action"
              data-active={locale === "en" ? "true" : "false"}
              onClick={() => {
                void nativeHaptic();
                switchLocale("en");
              }}
            >
              🇬🇧 English
            </button>
          </div>
        </section>

        <section className="apppartner-section">
          <h2 className="apppartner-h2">{t("partner.settings.app", "Aplikacija")}</h2>
          <button
            type="button"
            className="apppartner-btn-ghost"
            onClick={() => {
              void nativeHaptic();
              resetOnboarding();
            }}
          >
            {t("partner.settings.resetOnb", "Ponovo prikaži uvod")}
          </button>
          {appInfo ? (
            <p className="apppartner-empty-line apppartner-settings-version">
              {appInfo.name} · v{appInfo.version} ({appInfo.build})
            </p>
          ) : null}
        </section>
      </div>
    </div>
  );
}

export default AppPartnerSettings;