"use client";

/**
 * AppPartnerVerification — native overlay za /portal/verifikacija.
 * 4 nivoa: E-mail / Telefon / APR / Premium. APR ima form za PIB/MB +
 * POST `/api/portal/verification/apr`. Tap "Otvori verifikaciju" iz Nalog
 * ekrana vodi ovde umesto hibrid web prikaza.
 */

import { usePathname, useRouter } from "next/navigation";
import Link from "next/link";
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";

type CheckStatus =
  | "NOT_STARTED"
  | "PENDING"
  | "APPROVED"
  | "REJECTED"
  | "EXPIRED";

type Check = {
  status: CheckStatus;
  approvedAt?: string | null;
  rejectedReason?: string | null;
};

type Payload = {
  company: {
    id: string;
    name: string;
    verificationLevel: number;
    aprPib: string | null;
    aprMaticniBroj: string | null;
  };
  checks: Record<"EMAIL" | "PHONE" | "APR" | "PREMIUM", Check>;
};

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 isVerificationPath(pathname: string, prefix: string): boolean {
  const path =
    prefix && pathname.startsWith(prefix) ? pathname.slice(prefix.length) : pathname;
  const norm = path.replace(/\/+$/, "") || "/";
  return norm === "/portal/verifikacija";
}

function statusPill(s: CheckStatus, d: Record<string, string>): {
  label: string;
  className: string;
} {
  switch (s) {
    case "APPROVED":
      return {
        label: d["partner.verif.status.approved"] ?? "Verifikovano",
        className: "apppartner-pill-good",
      };
    case "PENDING":
      return {
        label: d["partner.verif.status.pending"] ?? "U obradi",
        className: "apppartner-pill-muted",
      };
    case "REJECTED":
      return {
        label: d["partner.verif.status.rejected"] ?? "Odbijeno",
        className: "apppartner-pill-muted",
      };
    case "EXPIRED":
      return {
        label: d["partner.verif.status.expired"] ?? "Isteklo",
        className: "apppartner-pill-muted",
      };
    default:
      return {
        label: d["partner.verif.status.notStarted"] ?? "Nije pokrenuto",
        className: "apppartner-pill-muted",
      };
  }
}

export function AppPartnerVerification({
  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 === "verification") ||
    (isVerificationPath(pathname, prefix) &&
      native === true &&
      variant === "partner");

  const [data, setData] = useState<Payload | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [pib, setPib] = useState("");
  const [mb, setMb] = useState("");
  const [aprBusy, setAprBusy] = useState(false);
  const [aprMsg, setAprMsg] = useState<string | null>(null);

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

  const load = useCallback(async () => {
    setLoading(true);
    setError(false);
    try {
      const url = preview.enabled
        ? "/api/app/partner/demo?kind=verification"
        : "/api/app/partner/verification";
      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;
      }
      const j = (await res.json()) as Payload;
      setData(j);
      setPib(j.company.aprPib ?? "");
      setMb(j.company.aprMaticniBroj ?? "");
    } catch {
      setError(true);
    } finally {
      setLoading(false);
    }
  }, [prefix, preview.enabled]);

  useEffect(() => {
    if (active) void load();
  }, [active, load]);

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

  const submitApr = useCallback(async () => {
    setAprMsg(null);
    setAprBusy(true);
    try {
      if (preview.enabled) {
        await new Promise((r) => setTimeout(r, 700));
        setAprMsg(
          t("partner.verif.apr.previewOk", "Demo režim — APR provera bi krenula."),
        );
        return;
      }
      const res = await fetch("/api/portal/verification/apr", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ pib, maticniBroj: mb }),
      });
      const j = (await res.json().catch(() => null)) as {
        error?: string;
        message?: string;
      } | null;
      if (!res.ok) {
        setAprMsg(
          j?.error ??
            t("partner.verif.apr.err", "Greška pri pokretanju APR provere."),
        );
        return;
      }
      setAprMsg(
        j?.message ?? t("partner.verif.apr.ok", "APR provera je pokrenuta."),
      );
      router.refresh();
      void load();
    } catch {
      setAprMsg(t("partner.verif.apr.err", "Greška pri pokretanju APR provere."));
    } finally {
      setAprBusy(false);
    }
  }, [pib, mb, preview.enabled, router, load, t]);

  if (!active) return null;

  const levelLabel = (n: number) =>
    n === 0
      ? t("partner.verif.level.0", "Bez verifikacije")
      : n === 1
        ? t("partner.verif.level.1", "Osnovno")
        : n === 2
          ? t("partner.verif.level.2", "Potvrđen kontakt")
          : n === 3
            ? t("partner.verif.level.3", "Verifikovan APR")
            : t("partner.verif.level.4", "Premium verifikacija");

  return (
    <div className="apppartner-root" role="region" aria-label="Verifikacija">
      <div className="apppartner-hero">
        <div className="apppartner-hero-text">
          <p className="apppartner-kicker">
            {t("partner.verif.kicker", "Verifikacija")}
          </p>
          <h1 className="apppartner-title">
            {t("partner.verif.title", "Trust & verifikacija")}
          </h1>
          <p className="apppartner-sub">
            {data
              ? `${t("partner.verif.currentLevel", "Trenutni nivo")}: ${levelLabel(data.company.verificationLevel)} (${data.company.verificationLevel}/4)`
              : t("partner.home.loading", "Učitavam profil…")}
          </p>
        </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 apppartner-skel-row" />
            ))}
          </div>
        ) : error ? (
          <div className="apppartner-empty">
            <p>{t("partner.verif.err", "Trenutno ne mogu da učitam verifikaciju.")}</p>
            <button
              type="button"
              className="apppartner-btn-primary"
              onClick={() => {
                void nativeHaptic();
                void load();
              }}
            >
              {t("common.retry", "Pokušaj ponovo")}
            </button>
          </div>
        ) : data ? (
          <ul className="apppartner-list">
            {/* NIVO 1: E-mail */}
            <li className="apppartner-list-item">
              <div className="apppartner-list-link" data-static>
                <div className="apppartner-list-row">
                  <span className="apppartner-list-title">
                    {t("partner.verif.l1.title", "Nivo 1 — E-mail provera")}
                  </span>
                  <span
                    className={`apppartner-pill ${statusPill(data.checks.EMAIL.status, dictionary).className}`}
                  >
                    {statusPill(data.checks.EMAIL.status, dictionary).label}
                  </span>
                </div>
                <p className="apppartner-list-msg">
                  {t(
                    "partner.verif.l1.desc",
                    "Vlasnik je potvrdio pristup e-mail nalogu firme. Automatski se verifikuje pri otvaranju portal naloga.",
                  )}
                </p>
              </div>
            </li>

            {/* NIVO 2: Telefon */}
            <li className="apppartner-list-item">
              <div className="apppartner-list-link" data-static>
                <div className="apppartner-list-row">
                  <span className="apppartner-list-title">
                    {t("partner.verif.l2.title", "Nivo 2 — Telefon provera")}
                  </span>
                  <span
                    className={`apppartner-pill ${statusPill(data.checks.PHONE.status, dictionary).className}`}
                  >
                    {statusPill(data.checks.PHONE.status, dictionary).label}
                  </span>
                </div>
                <p className="apppartner-list-msg">
                  {t(
                    "partner.verif.l2.desc",
                    "SMS verifikacija telefona firme. Biće dostupna u sledećem update-u.",
                  )}
                </p>
              </div>
            </li>

            {/* NIVO 3: APR */}
            <li className="apppartner-list-item">
              <div className="apppartner-list-link" data-static>
                <div className="apppartner-list-row">
                  <span className="apppartner-list-title">
                    {t("partner.verif.l3.title", "Nivo 3 — APR provera")}
                  </span>
                  <span
                    className={`apppartner-pill ${statusPill(data.checks.APR.status, dictionary).className}`}
                  >
                    {statusPill(data.checks.APR.status, dictionary).label}
                  </span>
                </div>
                <p className="apppartner-list-msg">
                  {t(
                    "partner.verif.l3.desc",
                    "Automatska provera u Agenciji za privredne registre. Unesi PIB ili matični broj.",
                  )}
                </p>
                {data.checks.APR.status !== "APPROVED" ? (
                  <div className="apppartner-form">
                    <label className="apppartner-label" htmlFor="apr-pib">
                      PIB
                    </label>
                    <input
                      id="apr-pib"
                      className="apppartner-input"
                      type="text"
                      inputMode="numeric"
                      autoComplete="off"
                      placeholder="9 cifara"
                      value={pib}
                      onChange={(e) => setPib(e.target.value)}
                    />
                    <label className="apppartner-label" htmlFor="apr-mb">
                      {t("partner.verif.apr.mb", "Matični broj")}
                    </label>
                    <input
                      id="apr-mb"
                      className="apppartner-input"
                      type="text"
                      inputMode="numeric"
                      autoComplete="off"
                      placeholder="8 cifara"
                      value={mb}
                      onChange={(e) => setMb(e.target.value)}
                    />
                    <button
                      type="button"
                      className="apppartner-btn-primary apppartner-btn-block"
                      disabled={aprBusy || (!pib && !mb)}
                      onClick={() => {
                        void nativeHaptic();
                        void submitApr();
                      }}
                    >
                      {aprBusy
                        ? t("partner.verif.apr.busy", "Pokrećem…")
                        : t(
                            "partner.verif.apr.submit",
                            "Pokreni APR proveru",
                          )}
                    </button>
                    {aprMsg ? (
                      <p className="apppartner-form-msg">{aprMsg}</p>
                    ) : null}
                  </div>
                ) : null}
              </div>
            </li>

            {/* NIVO 4: Premium */}
            <li className="apppartner-list-item">
              <div className="apppartner-list-link" data-static>
                <div className="apppartner-list-row">
                  <span className="apppartner-list-title">
                    {t("partner.verif.l4.title", "Nivo 4 — Premium pregled")}
                  </span>
                  <span
                    className={`apppartner-pill ${statusPill(data.checks.PREMIUM.status, dictionary).className}`}
                  >
                    {statusPill(data.checks.PREMIUM.status, dictionary).label}
                  </span>
                </div>
                <p className="apppartner-list-msg">
                  {t(
                    "partner.verif.l4.desc",
                    "Manualan pregled BiznisPortal admin tima, uključujući video poziv i dodatne dokumente. Kontaktiraj podršku.",
                  )}
                </p>
                <Link
                  href={`${prefix}/portal/poruke`}
                  className="apppartner-link"
                  onClick={() => void nativeHaptic()}
                >
                  {t("partner.verif.l4.cta", "Kontaktiraj podršku")} →
                </Link>
              </div>
            </li>
          </ul>
        ) : null}
      </div>
    </div>
  );
}

export default AppPartnerVerification;