"use client";

/**
 * AppPartnerInbox — native overlay za /portal/upiti (listing leads).
 * Filter tabovi: Svi / Novi / Pročitani / Odgovoreni. Tap upita vodi u
 * /portal/upiti (hibrid) gde postoji puni detalj + akcije.
 */

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

import { nativeHaptic } from "@/components/native/CapacitorBootstrap";
import { MailIcon, PhoneIcon } 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 { usePartnerPreview } from "@/lib/native/preview-partner";
import { usePoll } from "@/lib/native/use-poll";

type Lead = {
  id: string;
  name: string;
  email: string;
  phone: string | null;
  message: string;
  status: "NEW" | "READ" | "REPLIED" | "ARCHIVED" | "SPAM";
  entityType: string;
  entityTitle: string;
  createdAt: string;
  readAt: string | null;
  repliedAt: string | null;
};

type Payload = { items: Lead[]; total: number };
type Filter = "ALL" | "NEW" | "READ" | "REPLIED";

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

function timeAgo(iso: string): string {
  const t = new Date(iso).getTime();
  const diff = Math.max(0, Date.now() - t);
  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`;
}

function statusLabel(s: string, d: Record<string, string>): string {
  return (
    {
      NEW: d["partner.lead.status.new"] ?? "Novo",
      READ: d["partner.lead.status.read"] ?? "Pročitano",
      REPLIED: d["partner.lead.status.replied"] ?? "Odgovoreno",
      ARCHIVED: d["partner.lead.status.archived"] ?? "Arhivirano",
      SPAM: d["partner.lead.status.spam"] ?? "Spam",
    }[s] ?? s
  );
}

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

  const [data, setData] = useState<Payload | null>(null);
  const [filter, setFilter] = useState<Filter>("ALL");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [expanded, setExpanded] = useState<string | null>(null);
  const [busy, setBusy] = useState<string | null>(null);
  const [msg, setMsg] = useState<string | null>(null);

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

  const load = useCallback(
    async (f: Filter) => {
      setLoading(true);
      setError(false);
      try {
        const url = preview.enabled
          ? "/api/app/partner/demo?kind=inbox"
          : `/api/app/partner/inbox?status=${f}`;
        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 json = (await res.json()) as Payload;
        if (preview.enabled && f !== "ALL") {
          setData({
            items: json.items.filter((l) => l.status === f),
            total: json.items.filter((l) => l.status === f).length,
          });
        } else {
          setData(json);
        }
      } catch {
        setError(true);
      } finally {
        setLoading(false);
      }
    },
    [prefix, preview.enabled],
  );

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

  // Novi upit je posao — ne sme da čeka da korisnik ručno povuče refresh.
  usePoll(() => load(filter), 20_000, active && !preview.enabled);

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

  const updateStatus = useCallback(
    async (id: string, status: "READ" | "REPLIED" | "ARCHIVED" | "SPAM") => {
      setMsg(null);
      setBusy(id + ":" + status);
      try {
        if (preview.enabled) {
          await new Promise((r) => setTimeout(r, 400));
          setMsg("Demo: status promenjen.");
          await load(filter);
          return;
        }
        const res = await fetch(`/api/portal/leads/${id}`, {
          method: "PATCH",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ status }),
        });
        const j = (await res.json().catch(() => null)) as { error?: string } | null;
        if (!res.ok) {
          setMsg(j?.error ?? "Greška pri promeni statusa.");
          return;
        }
        await load(filter);
      } catch {
        setMsg("Greška pri promeni statusa.");
      } finally {
        setBusy(null);
      }
    },
    [filter, load, preview.enabled],
  );

  // Auto-mark NEW kao READ kada se otvori detail
  useEffect(() => {
    if (!expanded || !data || preview.enabled) return;
    const item = data.items.find((l) => l.id === expanded);
    if (item && item.status === "NEW") {
      void fetch(`/api/portal/leads/${expanded}`, {
        method: "PATCH",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ status: "READ" }),
      }).catch(() => undefined);
    }
  }, [expanded, data, preview.enabled]);

  if (!active) return null;

  const tabs: Array<{ key: Filter; label: string }> = [
    { key: "ALL", label: t("partner.inbox.all", "Svi") },
    { key: "NEW", label: t("partner.inbox.new", "Novi") },
    { key: "READ", label: t("partner.inbox.read", "Pročitani") },
    { key: "REPLIED", label: t("partner.inbox.replied", "Odgovoreni") },
  ];

  return (
    <div className="apppartner-root" role="region" aria-label="Inbox">
      <div className="apppartner-hero apppartner-hero-compact">
        <div className="apppartner-hero-text">
          <p className="apppartner-kicker">{t("partner.inbox.kicker", "Inbox")}</p>
          <h1 className="apppartner-title">
            {t("partner.inbox.title", "Upiti kupaca")}
          </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 && !data ? (
          <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("partner.inbox.error", "Trenutno ne mogu da učitam upite.")}</p>
            <button
              type="button"
              className="apppartner-btn-primary"
              onClick={() => {
                void nativeHaptic();
                void load(filter);
              }}
            >
              {t("common.retry", "Pokušaj ponovo")}
            </button>
          </div>
        ) : !data || data.items.length === 0 ? (
          <p className="apppartner-empty-line">
            {t(
              "partner.inbox.empty",
              "Nema upita u ovoj kategoriji. Aktivnim profilom javljaš se kupcima brže.",
            )}
          </p>
        ) : (
          <ul className="apppartner-list">
            {data.items.map((l) => {
              const isOpen = expanded === l.id;
              return (
              <li key={l.id} className="apppartner-list-item">
                <div
                  className="apppartner-list-link"
                  role="button"
                  tabIndex={0}
                  onClick={() => {
                    void nativeHaptic();
                    setExpanded(isOpen ? null : l.id);
                    setMsg(null);
                  }}
                  onKeyDown={(e) => {
                    if (e.key === "Enter" || e.key === " ") {
                      e.preventDefault();
                      setExpanded(isOpen ? null : l.id);
                    }
                  }}
                >
                  <div className="apppartner-list-row">
                    <span className="apppartner-list-title">{l.name}</span>
                    <span
                      className={`apppartner-pill ${
                        l.status === "NEW"
                          ? "apppartner-pill-new"
                          : l.status === "REPLIED"
                            ? "apppartner-pill-good"
                            : "apppartner-pill-muted"
                      }`}
                    >
                      {statusLabel(l.status, dictionary)}
                    </span>
                  </div>
                  <p className="apppartner-list-msg">{l.message}</p>
                  <div className="apppartner-list-meta">
                    <span>{l.entityTitle}</span>
                    <span>• {timeAgo(l.createdAt)}</span>
                  </div>
                  <div className="apppartner-list-contact">
                    {l.phone ? (
                      <a
                        href={`tel:${l.phone}`}
                        className="apppartner-mini-action"
                        onClick={(e) => {
                          e.stopPropagation();
                          void nativeHaptic();
                        }}
                      >
                        <PhoneIcon />
                        {l.phone}
                      </a>
                    ) : null}
                    <a
                      href={`mailto:${l.email}`}
                      className="apppartner-mini-action"
                      onClick={(e) => {
                        e.stopPropagation();
                        void nativeHaptic();
                      }}
                    >
                      <MailIcon />
                      {l.email}
                    </a>
                  </div>

                  {isOpen ? (
                    <div className="apppartner-form-actions" onClick={(e) => e.stopPropagation()}>
                      <a
                        href={`mailto:${l.email}?subject=Odgovor%20na%20upit&body=Po%C5%A1tovani%20${encodeURIComponent(l.name)}%2C%0A%0A`}
                        className="apppartner-btn-primary apppartner-btn-block apppartner-btn-as-link"
                        onClick={() => {
                          void nativeHaptic();
                          void updateStatus(l.id, "REPLIED");
                        }}
                      >
                        {t("partner.inbox.reply", "Odgovori mejlom")}
                      </a>
                      <button
                        type="button"
                        className="apppartner-btn-ghost"
                        disabled={busy === l.id + ":ARCHIVED"}
                        onClick={() => {
                          void nativeHaptic();
                          void updateStatus(l.id, "ARCHIVED");
                        }}
                      >
                        {busy === l.id + ":ARCHIVED"
                          ? "Arhiviram…"
                          : t("partner.inbox.archive", "Arhiviraj")}
                      </button>
                    </div>
                  ) : null}
                  {isOpen && msg ? <p className="apppartner-form-msg">{msg}</p> : null}
                </div>
              </li>
              );
            })}
          </ul>
        )}
      </div>
    </div>
  );
}

export default AppPartnerInbox;