"use client";

/**
 * AppAdminChat — native overlay za /admin/live-chat (live chat lista).
 * Tap razgovora → /admin/live-chat?session=<id> (AppAdminChatThread overlay).
 */

import { usePathname, useRouter, useSearchParams } 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, CHAT_STATUS_TONE } from "@/lib/native/enum-labels";
import { usePoll } from "@/lib/native/use-poll";
import { useAppVariant } from "@/lib/native/app-variant";
import { useAdminPreview } from "@/lib/native/preview-admin";

type Session = {
  id: string;
  visitorName: string | null;
  visitorEmail: string | null;
  visitorPhone: string | null;
  topic: string | null;
  pageUrl: string | null;
  status: string;
  unreadByAdmin: number;
  lastMessageAt: string;
  lastMessagePreview: string | null;
  lastFromVisitor: boolean | null;
};

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/live-chat";
}

function timeAgo(iso: string): string {
  const diff = Math.max(0, Date.now() - new Date(iso).getTime());
  const m = Math.floor(diff / 60000);
  if (m < 1) return "sad";
  if (m < 60) return `${m}m`;
  const h = Math.floor(m / 60);
  if (h < 24) return `${h}h`;
  return `${Math.floor(h / 24)}d`;
}

export function AppAdminChat({
  locale,
  dictionary,
}: {
  locale: Locale;
  dictionary: Record<string, string>;
}) {
  const native = useIsNative();
  const variant = useAppVariant();
  const pathname = usePathname();
  const router = useRouter();
  const search = useSearchParams();
  const prefix = getLocalePrefix(locale);
  const hasSession = !!search.get("session");
  const preview = useAdminPreview();
  const active =
    (preview.enabled && preview.screen === "chat") ||
    (isPath(pathname, prefix) &&
      !hasSession &&
      native === true &&
      variant === "admin");

  const [items, setItems] = useState<Session[] | null>(null);
  const [filter, setFilter] = useState<"ALL" | "OPEN" | "CLOSED">("OPEN");
  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 url = preview.enabled
        ? "/api/app/admin/demo?kind=chat"
        : filter === "ALL"
          ? "/api/admin/live-chat"
          : `/api/admin/live-chat?status=${filter}`;
      const res = await fetch(url, { cache: "no-store" });
      if (res.status === 401 && !preview.enabled) {
        window.location.assign(`${prefix}/admin/login`);
        return;
      }
      if (!res.ok) {
        setError(true);
        return;
      }
      const j = (await res.json()) as { items: Session[] };
      setItems(j.items ?? []);
    } catch {
      setError(true);
    } finally {
      setLoading(false);
    }
  }, [prefix, filter, preview.enabled]);

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

  // Polling — refresh every 15s when active
  // Bilo `setInterval` koji je kucao i dok je app u pozadini.
  usePoll(load, 15_000, active && !preview.enabled);

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

  if (!active) return null;

  const tabs: Array<{ key: "OPEN" | "CLOSED" | "ALL"; label: string }> = [
    { key: "OPEN", label: t("admin.chat.open", "Otvoreni") },
    { key: "CLOSED", label: t("admin.chat.closed", "Zatvoreni") },
    { key: "ALL", label: t("admin.chat.all", "Svi") },
  ];

  return (
    <div className="apppartner-root" role="region" aria-label="Live chat">
      <div className="apppartner-hero apppartner-hero-compact">
        <div className="apppartner-hero-text">
          <p className="apppartner-kicker">{t("admin.chat.kicker", "Chat")}</p>
          <h1 className="apppartner-title">{t("admin.chat.title", "Live podrška")}</h1>
        </div>
      </div>

      <div className="apppartner-tabs" role="tablist">
        {tabs.map((tab) => (
          <button
            key={tab.key}
            type="button"
            role="tab"
            aria-selected={filter === tab.key}
            className="apppartner-tab"
            data-active={filter === tab.key ? "true" : "false"}
            onClick={() => {
              void nativeHaptic();
              setFilter(tab.key);
            }}
          >
            {tab.label}
          </button>
        ))}
      </div>

      <div className="apppartner-body">
        {loading && !items ? (
          <div className="apppartner-skel-grid" aria-hidden>
            {Array.from({ length: 5 }).map((_, i) => (
              <div key={i} className="apppartner-skel apppartner-skel-row" />
            ))}
          </div>
        ) : error ? (
          <div className="apppartner-empty">
            <p>{t("admin.chat.err", "Trenutno ne mogu da učitam razgovore.")}</p>
            <button
              type="button"
              className="apppartner-btn-primary"
              onClick={() => {
                void nativeHaptic();
                void load();
              }}
            >
              {t("common.retry", "Pokušaj ponovo")}
            </button>
          </div>
        ) : !items || items.length === 0 ? (
          <p className="apppartner-empty-line">
            {t("admin.chat.empty", "Nema razgovora u ovoj kategoriji.")}
          </p>
        ) : (
          <ul className="apppartner-list">
            {items.map((s) => (
              <li key={s.id} className="apppartner-list-item">
                <button
                  type="button"
                  className="apppartner-list-link"
                  onClick={() => {
                    void nativeHaptic();
                    router.push(`${prefix}/admin/live-chat?session=${s.id}`);
                  }}
                >
                  <div className="apppartner-list-row">
                    <span className="apppartner-list-title">
                      {s.visitorName ?? s.visitorEmail ?? t("admin.chat.anon", "Anoniman posetilac")}
                    </span>
                    {s.unreadByAdmin > 0 ? (
                      <span className="apppartner-pill apppartner-pill-new">{s.unreadByAdmin}</span>
                    ) : (
                      /* Ranije: sirov enum (WAITING/CLOSED) i kriptično "OTV". */
                      <span
                        className={`apppartner-pill apppartner-pill-${
                          CHAT_STATUS_TONE[s.status] ?? "muted"
                        }`}
                      >
                        {enumLabel(dictionary, "chatStatus", s.status)}
                      </span>
                    )}
                  </div>
                  {s.lastMessagePreview ? (
                    <p className="apppartner-list-msg">
                      {s.lastFromVisitor ? "" : "↳ "}
                      {s.lastMessagePreview}
                    </p>
                  ) : null}
                  <div className="apppartner-list-meta">
                    {s.topic ? <span>{s.topic}</span> : null}
                    <span>{s.topic ? "· " : ""}{timeAgo(s.lastMessageAt)}</span>
                  </div>
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

export default AppAdminChat;