"use client";

/**
 * AppAdminDashboard — native overlay za /admin (admin home).
 * KPI: nove prijave, otvoreni chat-ovi, neisplaćeni računi, aktivni klijenti.
 */

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

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

type Payload = {
  user: { id: string; name: string; email: string };
  kpi: {
    pendingSubmissions: number;
    openChats: number;
    unreadChatMessages: number;
    overdueInvoices: number;
    outstandingInvoiceAmount: number;
    activeClients: number;
    revenueThisMonth: number;
  };
};

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(/\/+$/, "") || "/") === "/admin";
}

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

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

  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 res = await fetch(
        preview.enabled
          ? "/api/app/admin/demo?kind=dashboard"
          : "/api/app/admin/dashboard",
        { cache: "no-store" },
      );
      if (res.status === 401 && !preview.enabled) {
        window.location.assign(`${prefix}/admin/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, preview.enabled]);

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

  if (!active) return null;

  return (
    <div className="apppartner-root" role="region" aria-label="Admin pregled">
      <div className="apppartner-hero">
        <div className="apppartner-hero-text">
          <p className="apppartner-kicker">{t("admin.home.kicker", "Admin")}</p>
          <h1 className="apppartner-title">
            {data ? `Zdravo, ${data.user.name.split(" ")[0]}` : t("admin.home.loading", "Učitavam…")}
          </h1>
          <p className="apppartner-sub">{t("admin.home.sub", "Operativni pregled portala")}</p>
        </div>
      </div>

      <div className="apppartner-body">
        {loading && !data ? (
          <div className="apppartner-skel-grid" aria-hidden>
            {Array.from({ length: 6 }).map((_, i) => (
              <div key={i} className="apppartner-skel" />
            ))}
          </div>
        ) : error ? (
          <div className="apppartner-empty">
            <p>{t("admin.home.err", "Trenutno ne mogu da učitam pregled.")}</p>
            <button
              type="button"
              className="apppartner-btn-primary"
              onClick={() => {
                void nativeHaptic();
                void load();
              }}
            >
              {t("common.retry", "Pokušaj ponovo")}
            </button>
          </div>
        ) : data ? (
          <>
            <section className="apppartner-section">
              <h2 className="apppartner-h2">{t("admin.home.priority", "Prioritetno")}</h2>
              <div className="apppartner-kpi-grid">
                <Link
                  href={`${prefix}/admin/prijave`}
                  className="apppartner-kpi"
                  data-tone={data.kpi.pendingSubmissions > 0 ? "accent" : "neutral"}
                  onClick={() => void nativeHaptic()}
                >
                  <span className="apppartner-kpi-label">{t("admin.home.submissions", "Prijave")}</span>
                  <span className="apppartner-kpi-value">{data.kpi.pendingSubmissions}</span>
                  <span className="apppartner-kpi-meta">{t("admin.home.pending", "na čekanju")}</span>
                </Link>
                <Link
                  href={`${prefix}/admin/live-chat`}
                  className="apppartner-kpi"
                  data-tone={data.kpi.unreadChatMessages > 0 ? "accent" : "neutral"}
                  onClick={() => void nativeHaptic()}
                >
                  <span className="apppartner-kpi-label">{t("admin.home.chats", "Chat")}</span>
                  <span className="apppartner-kpi-value">{data.kpi.unreadChatMessages}</span>
                  <span className="apppartner-kpi-meta">
                    {data.kpi.openChats} {t("admin.home.openSessions", "otv. sesija")}
                  </span>
                </Link>
                <Link
                  href={`${prefix}/admin/naplata`}
                  className="apppartner-kpi"
                  data-tone={data.kpi.overdueInvoices > 0 ? "warn" : "neutral"}
                  onClick={() => void nativeHaptic()}
                >
                  <span className="apppartner-kpi-label">{t("admin.home.overdue", "Dospelo")}</span>
                  <span className="apppartner-kpi-value">{data.kpi.overdueInvoices}</span>
                  <span className="apppartner-kpi-meta">{t("admin.home.invoicesUnpaid", "neisplaćeno")}</span>
                </Link>
                <Link
                  href={`${prefix}/admin/portal-nalozi`}
                  className="apppartner-kpi"
                  onClick={() => void nativeHaptic()}
                >
                  <span className="apppartner-kpi-label">{t("admin.home.activeClients", "Aktivni")}</span>
                  <span className="apppartner-kpi-value">{data.kpi.activeClients}</span>
                  <span className="apppartner-kpi-meta">{t("admin.home.clients", "klijenata")}</span>
                </Link>
              </div>
            </section>

            <section className="apppartner-section">
              <h2 className="apppartner-h2">{t("admin.home.finance", "Finansije")}</h2>
              <div className="apppartner-kpi-grid">
                <div className="apppartner-kpi">
                  <span className="apppartner-kpi-label">{t("admin.home.revenue", "Prihod meseca")}</span>
                  <span className="apppartner-kpi-value apppartner-kpi-value-money">
                    {fmtRsd(data.kpi.revenueThisMonth)}
                  </span>
                  <span className="apppartner-kpi-meta">{t("admin.home.paid", "naplaćeno")}</span>
                </div>
                <div className="apppartner-kpi" data-tone={data.kpi.outstandingInvoiceAmount > 0 ? "warn" : "neutral"}>
                  <span className="apppartner-kpi-label">{t("admin.home.outstanding", "Potraživanja")}</span>
                  <span className="apppartner-kpi-value apppartner-kpi-value-money">
                    {fmtRsd(data.kpi.outstandingInvoiceAmount)}
                  </span>
                  <span className="apppartner-kpi-meta">{t("admin.home.outstandingMeta", "još neplaćeno")}</span>
                </div>
              </div>
            </section>

            <section className="apppartner-section">
              <h2 className="apppartner-h2">{t("admin.home.quick", "Brze akcije")}</h2>
              <div className="apppartner-actions">
                <Link href={`${prefix}/admin/kompanije/nova`} className="apppartner-action" onClick={() => void nativeHaptic()}>
                  <ArrowRightIcon /> {t("admin.home.newCompany", "Nova firma")}
                </Link>
                <Link href={`${prefix}/admin/oglasi`} className="apppartner-action" onClick={() => void nativeHaptic()}>
                  <ArrowRightIcon /> {t("admin.home.ads", "Oglasi")}
                </Link>
                <Link href={`${prefix}/admin/notifikacije`} className="apppartner-action" onClick={() => void nativeHaptic()}>
                  <ArrowRightIcon /> {t("admin.home.notifications", "Notifikacije")}
                </Link>
                <Link href={`${prefix}/admin/podesavanja`} className="apppartner-action" onClick={() => void nativeHaptic()}>
                  <ArrowRightIcon /> {t("admin.home.settings", "Podešavanja")}
                </Link>
              </div>
            </section>
          </>
        ) : null}
      </div>
    </div>
  );
}

export default AppAdminDashboard;