"use client";

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

import type { PortalAnalyticsDashboard } from "@/lib/data/portal-analytics";
import {
  getNativePushPermissionState,
  getPartnerDeviceSnapshot,
  isNativePartnerApp,
  registerPartnerNativeListeners,
  requestNativePushRegistration,
} from "@/lib/partner-capacitor";

type DeviceItem = {
  id: string;
  browserId: string;
  runtime: string;
  platform: string;
  nativePlatform: string | null;
  deviceName: string | null;
  appVersion: string | null;
  pushPermission: string;
  notificationsEnabled: boolean;
  installedAsApp: boolean;
  nativePushToken: string | null;
  nativePushProvider: string | null;
  lastSeenAt: Date | string;
  createdAt: Date | string;
};

function formatDateTime(value: Date | string) {
  return new Intl.DateTimeFormat("sr-Latn-RS", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  }).format(new Date(value));
}

function urlBase64ToUint8Array(base64String: string) {
  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; i += 1) {
    outputArray[i] = rawData.charCodeAt(i);
  }

  return outputArray;
}

function permissionLabel(permission: string) {
  if (permission === "granted") {
    return "Dozvoljeno";
  }

  if (permission === "denied") {
    return "Blokirano";
  }

  if (permission === "unsupported") {
    return "Nije podržano";
  }

  return "Nije aktivirano";
}

function runtimeLabel(runtime: string, installedAsApp: boolean) {
  if (runtime === "CAPACITOR") {
    return "Native Partner App";
  }

  return installedAsApp ? "Dodato na početni ekran" : "Otvoreno kroz browser";
}

function pushModeLabel(item: DeviceItem) {
  if (item.nativePushToken) {
    return `Native push aktivan${item.nativePushProvider ? ` • ${item.nativePushProvider}` : ""}`;
  }

  if (item.notificationsEnabled) {
    return "Web push aktivan";
  }

  return permissionLabel(item.pushPermission);
}

export function PortalMobileControlCenter({
  leadSignals,
  initialDevices,
  pushEnabled,
  webPushPublicKey,
  nativePushEnabled,
  hasBillingAccess,
}: {
  leadSignals: PortalAnalyticsDashboard["leadSignals"];
  initialDevices: DeviceItem[];
  pushEnabled: boolean;
  webPushPublicKey: string;
  nativePushEnabled: boolean;
  hasBillingAccess: boolean;
}) {
  const [devices, setDevices] = useState<DeviceItem[]>(initialDevices);
  const [statusMessage, setStatusMessage] = useState<string | null>(null);
  const [permission, setPermission] = useState<NotificationPermission | "unsupported">("unsupported");
  const [deviceId, setDeviceId] = useState("");
  const [isInstalled, setIsInstalled] = useState(false);
  const [platformLabel, setPlatformLabel] = useState("Nepoznat uređaj");
  const [runtimeMode, setRuntimeMode] = useState("WEB");
  const [isPending, startTransition] = useTransition();
  const nativeRuntime = runtimeMode === "CAPACITOR";

  const quickActions = useMemo(
    () => [
      {
        href: "/portal?requestType=PROFILE_UPDATE#zahtevi",
        label: "Izmena profila",
        copy: "Pošaljite korekciju kontakta, opisa ili lokacije.",
        icon: "companies" as const,
      },
      {
        href: "/portal?requestType=MEDIA_UPLOAD#zahtevi",
        label: "Kamera i upload",
        copy: "Snimi kamerom, dodaj iz galerije ili pošalji dokument direktno iz partner aplikacije.",
        icon: "camera" as const,
      },
      {
        href: "/portal#analitika",
        label: "Pogledaj statistiku",
        copy: "Otvorite preglede, pozive i jedinstvene posetioce.",
        icon: "medal" as const,
      },
      {
        href: hasBillingAccess ? "/portal#naplata" : "/portal#zahtevi",
        label: hasBillingAccess ? "Plati ili obnovi" : "Zatraži obnovu",
        copy: hasBillingAccess
          ? "Otvorite račun, platite online ili proverite rokove."
          : "Pošaljite zahtev za renewal ili komercijalni upgrade.",
        icon: "price" as const,
      },
    ],
    [hasBillingAccess],
  );

  const currentDevice = useMemo(
    () => devices.find((item) => item.browserId === deviceId) || devices[0] || null,
    [deviceId, devices],
  );
  const pushActivated = nativeRuntime
    ? Boolean(currentDevice?.nativePushToken)
    : permission === "granted";

  const syncDevice = useCallback(
    async (options?: {
      pushSubscription?: PushSubscriptionJSON | null;
      nativePushToken?: string | null;
      nativePushProvider?: string | null;
      permissionOverride?: string;
    }) => {
      const snapshot = await getPartnerDeviceSnapshot();
      const nextPermission = options?.permissionOverride || permission;
      const notificationsEnabled = nextPermission === "granted";
      const payload: Record<string, unknown> = {
        browserId: snapshot.browserId,
        runtime: snapshot.runtime,
        platform: snapshot.platform,
        nativePlatform: snapshot.nativePlatform,
        deviceName: snapshot.deviceName,
        appVersion: snapshot.appVersion,
        userAgent: snapshot.userAgent,
        pushPermission: nextPermission,
        notificationsEnabled,
        installedAsApp: snapshot.installedAsApp,
      };

      if (options?.pushSubscription !== undefined) {
        payload.pushEndpoint = options.pushSubscription?.endpoint || null;
        payload.pushSubscription = options.pushSubscription || null;
      }

      if (options?.nativePushToken !== undefined) {
        payload.nativePushToken = options.nativePushToken || null;
        payload.nativePushProvider = options.nativePushProvider || null;
      }

      const response = await fetch("/api/portal/devices", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(payload),
      });

      const result = (await response.json()) as {
        message?: string;
        items?: DeviceItem[];
      };

      if (!response.ok) {
        throw new Error(result.message || "Sinhronizacija uređaja nije uspela.");
      }

      setDeviceId(snapshot.browserId);
      setRuntimeMode(snapshot.runtime);
      setPlatformLabel(snapshot.platform);
      setIsInstalled(snapshot.installedAsApp);
      setDevices(result.items ?? []);
    },
    [permission],
  );

  useEffect(() => {
    let active = true;

    void (async () => {
      const snapshot = await getPartnerDeviceSnapshot();
      if (!active) {
        return;
      }

      setDeviceId(snapshot.browserId);
      setRuntimeMode(snapshot.runtime);
      setPlatformLabel(snapshot.platform);
      setIsInstalled(snapshot.installedAsApp);

      if (snapshot.runtime === "CAPACITOR") {
        setPermission((await getNativePushPermissionState()) as NotificationPermission | "unsupported");
        return;
      }

      if (typeof window !== "undefined" && "Notification" in window) {
        setPermission(Notification.permission);
      } else {
        setPermission("unsupported");
      }
    })();

    return () => {
      active = false;
    };
  }, []);

  useEffect(() => {
    if (!deviceId) {
      return;
    }

    const timerId = window.setTimeout(() => {
      void syncDevice().catch(() => undefined);
    }, 0);

    return () => {
      window.clearTimeout(timerId);
    };
  }, [deviceId, syncDevice]);

  useEffect(() => {
    if (!isNativePartnerApp()) {
      return;
    }

    let removeListeners: (() => Promise<void> | void) | null = null;

    void registerPartnerNativeListeners({
      onNotificationRoute: (url) => {
        if (typeof window !== "undefined") {
          window.location.href = url;
        }
      },
      onPushPermission: (nextPermission) => {
        setPermission(nextPermission as NotificationPermission | "unsupported");
      },
      onPushToken: (token, provider) => {
        setPermission("granted");
        startTransition(async () => {
          try {
            await syncDevice({
              nativePushToken: token,
              nativePushProvider: provider,
              permissionOverride: "granted",
            });
            setStatusMessage("Native push token je uspešno registrovan za partner aplikaciju.");
          } catch (error) {
            setStatusMessage(
              error instanceof Error ? error.message : "Sinhronizacija native uređaja nije uspela.",
            );
          }
        });
      },
      onError: (message) => {
        setStatusMessage(message);
      },
    }).then((cleanup) => {
      removeListeners = cleanup;
    });

    return () => {
      void removeListeners?.();
    };
  }, [syncDevice]);

  async function enablePush() {
    if (nativeRuntime) {
      if (!nativePushEnabled) {
        setStatusMessage(
          "Native push će biti dostupan čim administracija aktivira gateway i unese produkcione ključeve.",
        );
        return;
      }

      startTransition(async () => {
        try {
          const result = await requestNativePushRegistration();
          setPermission(result.permission as NotificationPermission | "unsupported");

          if (result.permission !== "granted" || !result.token) {
            await syncDevice({ permissionOverride: result.permission });
            setStatusMessage(
              result.permission === "denied"
                ? "Native push dozvola nije odobrena na ovom uređaju."
                : "Native push nije aktiviran. Proverite dozvole uređaja i pokušajte ponovo.",
            );
            return;
          }

          await syncDevice({
            nativePushToken: result.token,
            nativePushProvider: result.provider,
            permissionOverride: result.permission,
          });
          setStatusMessage("Native push obaveštenja su uspešno aktivirana za ovu Partner aplikaciju.");
        } catch (error) {
          setStatusMessage(
            error instanceof Error ? error.message : "Aktivacija native push obaveštenja nije uspela.",
          );
        }
      });
      return;
    }

    if (typeof window === "undefined" || !("Notification" in window) || !("serviceWorker" in navigator)) {
      setPermission("unsupported");
      setStatusMessage("Push obaveštenja nisu podržana na ovom uređaju.");
      return;
    }

    if (!pushEnabled || !webPushPublicKey) {
      setStatusMessage("Push obaveštenja će biti dostupna čim ih administracija aktivira u podešavanjima.");
      return;
    }

    startTransition(async () => {
      try {
        const requestedPermission = await Notification.requestPermission();
        setPermission(requestedPermission);

        if (requestedPermission !== "granted") {
          setStatusMessage("Push obaveštenja nisu odobrena. Možete ih kasnije uključiti u podešavanjima browsera.");
          await syncDevice();
          return;
        }

        const registration = await navigator.serviceWorker.ready;
        let subscription = await registration.pushManager.getSubscription();

        if (!subscription) {
          subscription = await registration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: urlBase64ToUint8Array(webPushPublicKey),
          });
        }

        await syncDevice({ pushSubscription: subscription.toJSON() });
        setStatusMessage("Push obaveštenja su uspešno aktivirana za ovaj uređaj.");
      } catch (error) {
        setStatusMessage(
          error instanceof Error ? error.message : "Aktivacija push obaveštenja nije uspela.",
        );
      }
    });
  }

  return (
    <section className="partner-mobile-grid">
      <div className="space-y-6">
        <div className="partner-app-panel">
          <div className="flex flex-wrap items-start justify-between gap-4">
            <div>
              <p className="eyebrow">Brze akcije</p>
              <h2 className="mt-3 font-display text-3xl font-semibold text-foreground">
                Najvažniji potezi sa telefona
              </h2>
              <p className="mt-3 max-w-3xl text-sm leading-7 text-muted-foreground">
                Ovo su četiri akcije koje klijent najčešće koristi kada želi da reaguje odmah:
                izmena profila, slanje novih materijala, analitika i obnova ili plaćanje.
              </p>
            </div>
            <span className="admin-chip !normal-case !tracking-normal">
              Partner Mobile v2 osnova
            </span>
          </div>

          <div className="partner-quick-action-grid mt-5">
            {quickActions.map((item) => (
              <a key={item.label} href={item.href} className="partner-quick-action">
                <div className="min-w-0">
                  <div className="partner-quick-action-title">{item.label}</div>
                  <div className="partner-quick-action-copy">{item.copy}</div>
                </div>
              </a>
            ))}
          </div>
        </div>

        <div className="partner-app-panel">
          <div className="flex flex-wrap items-start justify-between gap-4">
            <div>
              <p className="eyebrow">Lead signali</p>
              <h2 className="mt-3 font-display text-3xl font-semibold text-foreground">
                Šta se trenutno dešava na profilu
              </h2>
            </div>
            <span className="admin-chip !normal-case !tracking-normal">Danas + 7 dana</span>
          </div>

          <div className="partner-signal-grid mt-5">
            <div className="partner-signal-card">
              <div className="partner-signal-label">Danas interakcije</div>
              <div className="partner-signal-value">{leadSignals.today.interactions}</div>
              <p className="partner-signal-copy">
                {leadSignals.today.views} pregleda • {leadSignals.today.calls} poziva • {leadSignals.today.uniqueVisitors} jedinstvenih
              </p>
            </div>
            <div className="partner-signal-card">
              <div className="partner-signal-label">Poslednjih 7 dana</div>
              <div className="partner-signal-value">{leadSignals.last7Days.interactions}</div>
              <p className="partner-signal-copy">
                {leadSignals.last7Days.views} pregleda • {leadSignals.last7Days.calls} poziva • {leadSignals.last7Days.uniqueVisitors} jedinstvenih
              </p>
            </div>
            <div className="partner-signal-card">
              <div className="partner-signal-label">Najjači sadržaj</div>
              <div className="partner-signal-title">
                {leadSignals.topContent?.title || "Profil i dalje skuplja prve signale"}
              </div>
              <p className="partner-signal-copy">
                {leadSignals.topContent
                  ? `${leadSignals.topContent.entityLabel} trenutno donosi najviše aktivnosti.`
                  : "Čim sadržaj dobije više aktivnosti, ovde će se pojaviti najjači lead driver."}
              </p>
            </div>
            <div className="partner-signal-card partner-signal-card--accent">
              <div className="partner-signal-label">Preporučena akcija</div>
              <div className="partner-signal-title">{leadSignals.recommendedAction.title}</div>
              <p className="partner-signal-copy">{leadSignals.recommendedAction.copy}</p>
              <a href={leadSignals.recommendedAction.href} className="ghost-button mt-4 w-fit px-4 py-2 text-sm">
                Otvori
              </a>
            </div>
          </div>
        </div>
      </div>

      <aside className="space-y-6">
        <div className="partner-app-panel">
          <div className="flex items-start justify-between gap-4">
            <div>
              <p className="eyebrow">Push i uređaji</p>
              <h2 className="mt-3 font-display text-3xl font-semibold text-foreground">
                Mobilna spremnost partner aplikacije
              </h2>
              <p className="mt-3 text-sm leading-7 text-muted-foreground">
                Sinhronizujte ovaj uređaj, uključite push obaveštenja i pripremite telefon za brze lead alert-e.
              </p>
            </div>
          </div>

          <div className="mt-5 grid gap-3 sm:grid-cols-2">
            <div className="portal-metric">
              <div className="portal-metric-label">Push status</div>
              <div className="portal-metric-value">
                {currentDevice ? pushModeLabel(currentDevice) : permissionLabel(permission)}
              </div>
            </div>
            <div className="portal-metric">
              <div className="portal-metric-label">Registrovani uređaji</div>
              <div className="portal-metric-value">{devices.length}</div>
            </div>
          </div>

          <div className="mt-5 rounded-[1.4rem] border border-border bg-white/78 p-4">
            <div className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
              Trenutni uređaj
            </div>
            <div className="mt-2 text-lg font-semibold text-foreground">
              {currentDevice?.deviceName || platformLabel}
            </div>
            <p className="mt-2 text-sm leading-6 text-muted-foreground">
              {currentDevice?.platform || platformLabel} •{" "}
              {runtimeLabel(currentDevice?.runtime || runtimeMode, isInstalled)}
            </p>
            <p className="mt-2 text-sm leading-6 text-muted-foreground">
              {nativeRuntime
                ? "Native wrapper sada podržava FCM/APNS token registraciju, deep link otvaranje iz push poruka i kameru iz partner aplikacije."
                : "Lead alert-i sada pokrivaju pozive, email klikove, klikove na sajt, uputstva, recenzije, status zahteva i naplatu."}
            </p>
            {currentDevice?.lastSeenAt ? (
              <p className="mt-2 text-xs uppercase tracking-[0.14em] text-muted-foreground">
                Poslednja aktivnost: {formatDateTime(currentDevice.lastSeenAt)}
              </p>
            ) : null}
          </div>

          {statusMessage ? (
            <div className="mt-4 rounded-[1.2rem] border border-primary/15 bg-primary/8 px-4 py-3 text-sm text-primary">
              {statusMessage}
            </div>
          ) : null}

          <div className="mt-4 flex flex-wrap gap-3">
            <button
              type="button"
              className="primary-button"
              onClick={enablePush}
              disabled={isPending || pushActivated}
            >
              {pushActivated
                ? nativeRuntime
                  ? "Native push je aktivan"
                  : "Push je aktivan"
                : isPending
                  ? "Aktivacija..."
                  : nativeRuntime
                    ? "Uključi native push"
                    : "Uključi push obaveštenja"}
            </button>
            <button
              type="button"
              className="ghost-button"
              onClick={() => {
                startTransition(async () => {
                  try {
                    await syncDevice();
                    setStatusMessage("Uređaj je osvežen i sinhronizovan.");
                  } catch (error) {
                    setStatusMessage(
                      error instanceof Error ? error.message : "Sinhronizacija uređaja nije uspela.",
                    );
                  }
                });
              }}
              disabled={isPending}
            >
              Osveži uređaj
            </button>
          </div>

          <div className="partner-device-list mt-5">
            <div className="summary-item border-dashed text-sm leading-7 text-muted-foreground">
              Partner aplikacija grupiše iste lead signale u vremenske prozore kako biste dobijali korisne alert-e, a ne spam za svaki pojedinačni klik.
            </div>
            {devices.length ? (
              devices.map((item) => (
                <div key={item.id} className="partner-device-item">
                  <div>
                    <div className="partner-device-title">
                      {item.deviceName || item.platform}
                    </div>
                    <div className="partner-device-copy">
                      {pushModeLabel(item)} • {runtimeLabel(item.runtime, item.installedAsApp)}
                    </div>
                  </div>
                  <div className="text-right text-xs uppercase tracking-[0.14em] text-muted-foreground">
                    {formatDateTime(item.lastSeenAt)}
                  </div>
                </div>
              ))
            ) : (
              <div className="summary-item text-sm leading-7 text-muted-foreground">
                Još nema sinhronizovanih uređaja za ovaj nalog.
              </div>
            )}
          </div>
        </div>
      </aside>
    </section>
  );
}