"use client";

/**
 * AppPartnerAccount — native overlay za /portal/plan (paket, računi, verifikacija).
 * Logout vodi nazad u /portal/login. Računi sa CTA za "Uputstvo za uplatu".
 */

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

type Payload = {
  user: { id: string; name: string; email: string; permissions: string[] };
  company: {
    id: string;
    name: string;
    slug: string;
    tier: string | null;
    planName: string | null;
    planValidTo: string | null;
    verificationLevel: number;
  };
  invoices: Array<{
    id: string;
    number: string;
    type: string;
    status: string;
    currency: string;
    totalAmount: number;
    dueAt: string | null;
    createdAt: string;
  }>;
  verificationChecks: Array<{
    id: string;
    kind: string;
    status: string;
    createdAt: string;
  }>;
};

function useIsNative(): boolean | null {
  const [native, setNative] = useState<boolean | null>(null);
  useEffect(() => {
    let disposed = false;
    (async () => {
      try {
        const { Capacitor } = await import("@capacitor/core");
        if (!disposed) setNative(Capacitor.isNativePlatform());
      } catch {
        if (!disposed) setNative(false);
      }
    })();
    return () => {
      disposed = true;
    };
  }, []);
  return native;
}

function isAccountPath(pathname: string, prefix: string): boolean {
  const path =
    prefix && pathname.startsWith(prefix) ? pathname.slice(prefix.length) : pathname;
  const norm = path.replace(/\/+$/, "") || "/";
  return norm === "/portal/plan";
}

function fmtCurrency(amount: number, currency: string): string {
  try {
    return new Intl.NumberFormat("sr-RS", {
      style: "currency",
      currency: currency || "RSD",
      maximumFractionDigits: 0,
    }).format(amount);
  } catch {
    return `${amount} ${currency}`;
  }
}

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 AppPartnerAccount({
  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 === "account") ||
    (isAccountPath(pathname, prefix) &&
      native === true &&
      variant === "partner");

  const [data, setData] = useState<Payload | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [loggingOut, setLoggingOut] = 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=account"
        : "/api/app/partner/account";
      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_account");
  }, [active]);

  if (!active) return null;

  const outstanding =
    data?.invoices.filter((i) =>
      ["ISSUED", "PARTIALLY_PAID", "OVERDUE"].includes(i.status),
    ) ?? [];

  const onLogout = async () => {
    void nativeHaptic();
    setLoggingOut(true);
    try {
      await fetch("/api/portal/auth/logout", { method: "POST" }).catch(() => null);
    } finally {
      window.location.assign(`${prefix}/portal/login`);
    }
  };

  return (
    <div className="apppartner-root" role="region" aria-label="Nalog">
      <div className="apppartner-hero apppartner-hero-compact">
        <div className="apppartner-hero-text">
          <p className="apppartner-kicker">{t("partner.account.kicker", "Nalog")}</p>
          <h1 className="apppartner-title">
            {data?.company.name ?? t("partner.account.loading", "Učitavam nalog…")}
          </h1>
          {data ? (
            <p className="apppartner-sub">
              {data.company.planName ?? t("partner.home.noPlan", "Bez paketa")}
              {data.company.planValidTo
                ? ` • ${t("partner.account.until", "do")} ${fmtDate(data.company.planValidTo)}`
                : ""}
            </p>
          ) : null}
        </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.account.error", "Trenutno ne mogu da učitam nalog.")}</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("partner.account.user", "Prijavljen kao")}
              </h2>
              <div className="apppartner-card">
                <p className="apppartner-card-name">{data.user.name}</p>
                <p className="apppartner-card-meta">{data.user.email}</p>
                <p className="apppartner-card-meta">
                  {t("partner.account.permissions", "Dozvole")}:{" "}
                  {data.user.permissions.length}
                </p>
              </div>
            </section>

            <section className="apppartner-section">
              <div className="apppartner-section-head">
                <h2 className="apppartner-h2">
                  {t("partner.account.invoices", "Računi")}
                </h2>
                <Link
                  href={`${prefix}/portal/invoices`}
                  className="apppartner-link"
                  onClick={() => void nativeHaptic()}
                >
                  {t("common.viewAll", "Pogledaj sve")} →
                </Link>
              </div>
              {outstanding.length === 0 ? (
                <p className="apppartner-empty-line">
                  {t("partner.account.noOutstanding", "Nema računa za uplatu.")}
                </p>
              ) : (
                <ul className="apppartner-list">
                  {outstanding.map((inv) => (
                    <li key={inv.id} className="apppartner-list-item">
                      <Link
                        href={`${prefix}/portal/invoices/${inv.id}/placanje`}
                        className="apppartner-list-link"
                        onClick={() => void nativeHaptic()}
                      >
                        <div className="apppartner-list-row">
                          <span className="apppartner-list-title">{inv.number}</span>
                          <span
                            className={`apppartner-pill apppartner-pill-${
                              INVOICE_STATUS_TONE[inv.status] ?? "muted"
                            }`}
                          >
                            {enumLabel(dictionary, "invoiceStatus", inv.status)}
                          </span>
                        </div>
                        <p className="apppartner-list-msg">
                          {fmtCurrency(inv.totalAmount, inv.currency)}
                        </p>
                        <div className="apppartner-list-meta">
                          <span>
                            {t("partner.account.due", "Rok")}: {fmtDate(inv.dueAt)}
                          </span>
                        </div>
                      </Link>
                    </li>
                  ))}
                </ul>
              )}
            </section>

            <section className="apppartner-section">
              <h2 className="apppartner-h2">
                {t("partner.account.verification", "Verifikacija")}
              </h2>
              <div className="apppartner-card">
                <p className="apppartner-card-name">
                  {t("partner.account.level", "Nivo")}:{" "}
                  {data.company.verificationLevel}/4
                </p>
                <Link
                  href={`${prefix}/portal/verifikacija`}
                  className="apppartner-link"
                  onClick={() => void nativeHaptic()}
                >
                  {t("partner.account.openVerification", "Otvori verifikaciju")} →
                </Link>
              </div>
            </section>

            <section className="apppartner-section">
              {/* Drugi ulaz u ceo portal — „Nalog" je mesto gde se traži ono
                  što nije u tabovima. */}
              <Link
                href={`${prefix}/portal/sekcije`}
                className="apppartner-btn-ghost apppartner-btn-as-link"
                onClick={() => void nativeHaptic()}
              >
                ▤ {t("partner.account.allSections", "Sve sekcije portala")}
              </Link>
              <Link
                href={`${prefix}/portal/podesavanja`}
                className="apppartner-btn-ghost apppartner-btn-as-link"
                onClick={() => void nativeHaptic()}
              >
                ⚙ {t("partner.account.settings", "Podešavanja")}
              </Link>
              <button
                type="button"
                className="apppartner-btn-ghost"
                disabled={loggingOut}
                onClick={() => void onLogout()}
              >
                {loggingOut
                  ? t("partner.account.loggingOut", "Odjavljujem…")
                  : t("partner.account.logout", "Odjavi se")}
              </button>
            </section>
          </>
        ) : null}
      </div>
    </div>
  );
}

export default AppPartnerAccount;