"use client";

/**
 * AppAdminInvoices — native overlay za /admin/naplata (računi).
 * Lista invoices sa filterom + brze akcije: Mark Paid + Send.
 */

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 Invoice = {
  id: string;
  number: string;
  type?: string;
  status: string;
  currency: string;
  totalAmount: number;
  dueAt?: string | null;
  createdAt: string;
  paidAt?: string | null;
  companyId?: string | null;
  companyName?: string | null;
  client?: { name?: string | null } | null;
  company?: { name?: string | null } | null;
};

type Filter = "ALL" | "ISSUED" | "OVERDUE" | "PAID";

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

function fmtMoney(n: number, currency = "RSD"): string {
  return `${n.toLocaleString("sr-RS")} ${currency}`;
}

function fmtDate(iso: string | null | undefined): 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);
  }
}

function statusPill(s: string): { label: string; cls: string } {
  switch (s) {
    case "PAID":
      return { label: "Plaćeno", cls: "apppartner-pill-good" };
    case "OVERDUE":
      return { label: "Dospelo", cls: "apppartner-pill-new" };
    case "ISSUED":
      return { label: "Izdato", cls: "apppartner-pill-muted" };
    case "PARTIALLY_PAID":
      return { label: "Delim.", cls: "apppartner-pill-muted" };
    case "DRAFT":
      return { label: "Nacrt", cls: "apppartner-pill-muted" };
    default:
      return { label: s, cls: "apppartner-pill-muted" };
  }
}

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

  const [data, setData] = useState<{ invoices: Invoice[] } | null>(null);
  const [filter, setFilter] = useState<Filter>("ISSUED");
  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 () => {
    setLoading(true);
    setError(false);
    try {
      const res = await fetch(
        preview.enabled
          ? "/api/app/admin/demo?kind=invoices"
          : "/api/admin/invoices",
        { cache: "no-store" },
      );
      if (res.status === 401) {
        window.location.assign(`${prefix}/admin/login`);
        return;
      }
      if (!res.ok) {
        setError(true);
        return;
      }
      const j = (await res.json()) as { data?: { invoices?: Invoice[] }; invoices?: Invoice[] };
      const arr = j.data?.invoices ?? j.invoices ?? [];
      setData({ invoices: arr });
    } catch {
      setError(true);
    } finally {
      setLoading(false);
    }
  }, [prefix, preview.enabled]);

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

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

  const markPaid = useCallback(
    async (id: string) => {
      setMsg(null);
      setBusy(id + ":paid");
      try {
        const res = await fetch(
          preview.enabled
            ? "/api/app/admin/demo"
            : "/api/admin/invoices/mark-paid",
          {
          method: "POST",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ id }),
          },
        );
        if (!res.ok) {
          setMsg("Greška pri markiranju.");
          return;
        }
        setExpanded(null);
        await load();
      } catch {
        setMsg("Greška pri markiranju.");
      } finally {
        setBusy(null);
      }
    },
    [load, preview.enabled],
  );

  if (!active) return null;

  const tabs: Array<{ key: Filter; label: string }> = [
    { key: "ISSUED", label: t("admin.inv.issued", "Izdato") },
    { key: "OVERDUE", label: t("admin.inv.overdue", "Dospelo") },
    { key: "PAID", label: t("admin.inv.paid", "Plaćeno") },
    { key: "ALL", label: t("admin.inv.all", "Sve") },
  ];

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

  return (
    <div className="apppartner-root" role="region" aria-label="Naplata">
      <div className="apppartner-hero apppartner-hero-compact">
        <div className="apppartner-hero-text">
          <p className="apppartner-kicker">{t("admin.inv.kicker", "Naplata")}</p>
          <h1 className="apppartner-title">{t("admin.inv.title", "Računi")}</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: 4 }).map((_, i) => (
              <div key={i} className="apppartner-skel apppartner-skel-row" />
            ))}
          </div>
        ) : error ? (
          <div className="apppartner-empty">
            <p>{t("admin.inv.err", "Trenutno ne mogu da učitam račune.")}</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">{t("admin.inv.empty", "Nema računa u ovoj kategoriji.")}</p>
        ) : (
          <ul className="apppartner-list">
            {filtered.map((inv) => {
              const sp = statusPill(inv.status);
              const isOpen = expanded === inv.id;
              const canMarkPaid = ["ISSUED", "PARTIALLY_PAID", "OVERDUE"].includes(inv.status);
              return (
                <li key={inv.id} className="apppartner-list-item">
                  <div
                    className="apppartner-list-link"
                    role="button"
                    tabIndex={0}
                    onClick={() => {
                      void nativeHaptic();
                      setExpanded(isOpen ? null : inv.id);
                      setMsg(null);
                    }}
                  >
                    <div className="apppartner-list-row">
                      <span className="apppartner-list-title">{inv.number}</span>
                      <span className={`apppartner-pill ${sp.cls}`}>{sp.label}</span>
                    </div>
                    <p className="apppartner-list-msg">
                      <strong>{fmtMoney(inv.totalAmount, inv.currency)}</strong>
                      {inv.companyName ?? inv.company?.name ?? inv.client?.name ? ` · ${inv.companyName ?? inv.company?.name ?? inv.client?.name}` : ""}
                    </p>
                    <div className="apppartner-list-meta">
                      <span>Rok: {fmtDate(inv.dueAt)}</span>
                      <span>· {fmtDate(inv.createdAt)}</span>
                    </div>

                    {isOpen ? (
                      <div className="apppartner-form-actions" onClick={(e) => e.stopPropagation()}>
                        {canMarkPaid ? (
                          <button
                            type="button"
                            className="apppartner-btn-primary apppartner-btn-block"
                            disabled={busy === inv.id + ":paid"}
                            onClick={() => {
                              void nativeHaptic();
                              void markPaid(inv.id);
                            }}
                          >
                            {busy === inv.id + ":paid" ? "Markiram…" : "✓ Označi kao plaćeno"}
                          </button>
                        ) : null}
                        <a
                          href={`/admin/naplata/racuni/${inv.id}`}
                          className="apppartner-btn-ghost apppartner-btn-as-link"
                          onClick={() => void nativeHaptic()}
                        >
                          Otvori detalj →
                        </a>
                      </div>
                    ) : null}
                    {isOpen && msg ? <p className="apppartner-form-msg">{msg}</p> : null}
                  </div>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </div>
  );
}

export default AppAdminInvoices;