"use client";

/**
 * AppAdminClients — native overlay za /admin/portal-nalozi (klijenti CRM).
 * Lista klijenata + brza akcija "Otvori detalj" (hibrid /admin/portal-nalozi/[id]).
 */

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 { useAppVariant } from "@/lib/native/app-variant";
import { useAdminPreview } from "@/lib/native/preview-admin";

type Client = {
  id: string;
  name: string;
  email: string;
  status: string;
  isPrimary?: boolean;
  company?: { id?: string; name?: string; slug?: string };
  notifications?: { id: string }[];
};

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

function statusPill(s: string): { label: string; cls: string } {
  switch (s) {
    case "ACTIVE":
      return { label: "Aktivan", cls: "apppartner-pill-good" };
    case "INVITED":
      return { label: "Pozvan", cls: "apppartner-pill-muted" };
    case "SUSPENDED":
      return { label: "Suspendovan", cls: "apppartner-pill-muted" };
    default:
      return { label: s, cls: "apppartner-pill-muted" };
  }
}

export function AppAdminClients({
  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 === "clients") ||
    (isPath(pathname, prefix) && native === true && variant === "admin");

  const [items, setItems] = useState<Client[] | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [query, setQuery] = useState("");

  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=clients"
          : "/api/admin/client-accounts",
        { cache: "no-store" },
      );
      if (res.status === 401 && !preview.enabled) {
        window.location.assign(`${prefix}/admin/login`);
        return;
      }
      if (res.status === 404) {
        // Fallback: koristi direktan endpoint ako gore ne postoji
        setItems([]);
        return;
      }
      if (!res.ok) {
        setError(true);
        return;
      }
      const j = (await res.json()) as { items?: Client[]; data?: { items?: Client[] } };
      setItems(j.items ?? j.data?.items ?? []);
    } catch {
      setError(true);
    } finally {
      setLoading(false);
    }
  }, [prefix, preview.enabled]);

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

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

  if (!active) return null;

  const filtered = items
    ? query
      ? items.filter(
          (c) =>
            c.name.toLowerCase().includes(query.toLowerCase()) ||
            c.email.toLowerCase().includes(query.toLowerCase()) ||
            (c.company?.name ?? "").toLowerCase().includes(query.toLowerCase()),
        )
      : items
    : [];

  return (
    <div className="apppartner-root" role="region" aria-label="Klijenti">
      <div className="apppartner-hero apppartner-hero-compact">
        <div className="apppartner-hero-text">
          <p className="apppartner-kicker">{t("admin.clients.kicker", "Klijenti")}</p>
          <h1 className="apppartner-title">{t("admin.clients.title", "Portal nalozi")}</h1>
        </div>
      </div>

      <div className="apppartner-body">
        <input
          type="search"
          className="apppartner-input"
          placeholder={t("admin.clients.search", "Pretraži po imenu ili emailu…")}
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />

        {loading && !items ? (
          <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("admin.clients.err", "Trenutno ne mogu da učitam klijente.")}</p>
            <button
              type="button"
              className="apppartner-btn-primary"
              onClick={() => {
                void nativeHaptic();
                void load();
              }}
            >
              {t("common.retry", "Pokušaj ponovo")}
            </button>
          </div>
        ) : filtered.length === 0 ? (
          <p className="apppartner-empty-line">
            {query ? t("admin.clients.noMatch", "Nema poklapanja.") : t("admin.clients.empty", "Nema klijenata.")}
          </p>
        ) : (
          <ul className="apppartner-list">
            {filtered.map((c) => {
              const sp = statusPill(c.status);
              return (
                <li key={c.id} className="apppartner-list-item">
                  <Link
                    href={`${prefix}/admin/portal-nalozi/${c.id}`}
                    className="apppartner-list-link"
                    onClick={() => void nativeHaptic()}
                  >
                    <div className="apppartner-list-row">
                      <span className="apppartner-list-title">{c.name}</span>
                      <span className={`apppartner-pill ${sp.cls}`}>{sp.label}</span>
                    </div>
                    <p className="apppartner-list-msg">
                      {c.email}
                      {c.company?.name ? ` · ${c.company.name}` : ""}
                    </p>
                  </Link>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </div>
  );
}

export default AppAdminClients;