import { jsxs as a, jsx as e, Fragment as S } from "react/jsx-runtime";
import { useMemo as A, useState as d, useCallback as D, useEffect as $ } from "react";
import { useNavigate as z } from "react-router-dom";
import { useTranslation as M } from "react-i18next";
import { Users as V, Clock as B, ChevronRight as E, Loader2 as G, AlertTriangle as P, Search as R, LayoutGrid as U, LayoutList as q } from "lucide-react";
import { a as H, k as _, B as I } from "./index-CwSaRXXg.js";
const J = ({
  id: k,
  name: r,
  description: b,
  icon: v,
  isActive: c,
  userCount: h,
  lastAccessedAt: f,
  onClick: y
}) => {
  const { t: i } = M("admin"), x = A(() => {
    const n = [
      "from-blue-500 to-cyan-500",
      "from-purple-500 to-pink-500",
      "from-green-500 to-emerald-500",
      "from-orange-500 to-red-500",
      "from-indigo-500 to-blue-500",
      "from-teal-500 to-green-500"
    ], s = r.split("").reduce((N, o) => N + o.charCodeAt(0), 0);
    return n[s % n.length];
  }, [r]), m = (n) => {
    if (!n) return i("applications.card.never");
    const s = new Date(n), o = (/* @__PURE__ */ new Date()).getTime() - s.getTime(), p = Math.floor(o / 6e4), l = Math.floor(p / 60), w = Math.floor(l / 24);
    return p < 1 ? i("applications.card.justNow") : p < 60 ? i("applications.card.minutesAgo", { count: p }) : l < 24 ? i("applications.card.hoursAgo", { count: l }) : w < 7 ? i("applications.card.daysAgo", { count: w }) : s.toLocaleDateString();
  };
  return /* @__PURE__ */ a(
    "button",
    {
      onClick: y,
      className: "group relative overflow-hidden rounded-[var(--radius-card)] border border-[var(--item-color-border)] bg-[var(--bg-card)] p-6 text-left shadow-sm transition-all duration-300 hover:shadow-md hover:scale-105 hover:border-[var(--color-primary-600)]",
      children: [
        /* @__PURE__ */ e("div", { className: "absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-5", children: /* @__PURE__ */ e("div", { className: `absolute inset-0 bg-gradient-to-br ${x}` }) }),
        /* @__PURE__ */ a("div", { className: "relative z-10", children: [
          /* @__PURE__ */ a("div", { className: "mb-4 flex items-start justify-between", children: [
            /* @__PURE__ */ e(
              "div",
              {
                className: `flex h-12 w-12 items-center justify-center rounded-[var(--radius-button)] bg-gradient-to-br ${x} text-white text-lg font-bold`,
                children: v && v.length <= 2 ? v : r.charAt(0).toUpperCase()
              }
            ),
            /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
              c && /* @__PURE__ */ a("div", { className: "flex items-center gap-1 rounded-full bg-[var(--success-bg)] px-2 py-1", children: [
                /* @__PURE__ */ e("div", { className: "h-2 w-2 rounded-full bg-[var(--success-text)]" }),
                /* @__PURE__ */ e("span", { className: "text-xs font-medium text-[var(--success-text)]", children: i("applications.card.active") })
              ] }),
              !c && /* @__PURE__ */ a("div", { className: "flex items-center gap-1 rounded-full bg-[var(--warning-bg)] px-2 py-1", children: [
                /* @__PURE__ */ e("div", { className: "h-2 w-2 rounded-full bg-[var(--warning-text)]" }),
                /* @__PURE__ */ e("span", { className: "text-xs font-medium text-[var(--warning-text)]", children: i("applications.card.inactive") })
              ] })
            ] })
          ] }),
          /* @__PURE__ */ e("h3", { className: "mb-2 text-lg font-bold text-[var(--text-primary)]", children: r }),
          b && /* @__PURE__ */ e("p", { className: "mb-4 line-clamp-2 text-sm text-[var(--text-secondary)]", children: b }),
          /* @__PURE__ */ a("div", { className: "mb-4 flex items-center gap-4 text-xs text-[var(--text-tertiary)]", children: [
            h !== void 0 && /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
              /* @__PURE__ */ e(V, { className: "h-4 w-4" }),
              /* @__PURE__ */ a("span", { children: [
                h,
                " ",
                i(h !== 1 ? "applications.card.users" : "applications.card.user")
              ] })
            ] }),
            f && /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
              /* @__PURE__ */ e(B, { className: "h-4 w-4" }),
              /* @__PURE__ */ e("span", { children: m(f) })
            ] })
          ] }),
          /* @__PURE__ */ a("div", { className: "inline-flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-primary-600)] px-3 py-2 text-xs font-medium text-white transition-all duration-200 group-hover:gap-3", children: [
            i("applications.card.viewDetails"),
            /* @__PURE__ */ e(E, { className: "h-4 w-4" })
          ] })
        ] })
      ]
    }
  );
}, Z = () => {
  const k = z(), { t: r } = M("admin"), { currentTenant: b, isGlobalView: v } = H(), [c, h] = d([]), [f, y] = d(!0), [i, x] = d(null), [m, n] = d("cards"), [s, N] = d(""), [o, p] = d(""), [l, w] = d("all"), L = D(async () => {
    try {
      y(!0);
      const t = await _.applications.getAll();
      h(t), x(null);
    } catch (t) {
      x(t instanceof Error ? t.message : "Failed to load applications");
    } finally {
      y(!1);
    }
  }, [b?.id, v]);
  $(() => {
    L();
  }, [L]);
  const T = A(() => {
    const t = new Set(c.map((g) => g.zone));
    return Array.from(t).filter(Boolean);
  }, [c]), u = A(() => c.filter((t) => {
    const g = t.label.toLowerCase().includes(s.toLowerCase()) || (t.description?.toLowerCase().includes(s.toLowerCase()) ?? !1), j = !o || t.zone === o, F = l === "all" || l === "active" && t.isActive || l === "inactive" && !t.isActive;
    return g && j && F;
  }), [c, s, o, l]), C = (t) => {
    k(`/administration/applications/${t}`);
  };
  return f ? /* @__PURE__ */ e("div", { className: "flex h-96 items-center justify-center", children: /* @__PURE__ */ e(G, { className: "h-8 w-8 animate-spin text-[var(--color-primary-600)]" }) }) : i ? /* @__PURE__ */ e("div", { className: "rounded-lg border border-[var(--error-border)] bg-[var(--error-bg)] p-4", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
    /* @__PURE__ */ e(P, { className: "h-5 w-5 text-[var(--error-text)]" }),
    /* @__PURE__ */ e("p", { className: "text-[var(--error-text)]", children: i })
  ] }) }) : /* @__PURE__ */ a("div", { className: "space-y-6", children: [
    /* @__PURE__ */ e(
      I,
      {
        items: [
          { label: r("header.title"), href: "/administration" },
          { label: r("applications.title", "Applications") }
        ]
      }
    ),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e("h1", { className: "text-3xl font-bold text-[var(--text-primary)]", children: r("applications.list.heading") }),
      /* @__PURE__ */ e("p", { className: "mt-2 text-[var(--text-secondary)]", children: r("applications.list.description") })
    ] }),
    /* @__PURE__ */ a("div", { className: "space-y-4 rounded-[var(--radius-card)] border border-[var(--item-color-border)] bg-[var(--bg-card)] p-4", children: [
      /* @__PURE__ */ a("div", { className: "flex flex-col gap-4 md:flex-row md:items-center", children: [
        /* @__PURE__ */ a("div", { className: "flex-1 relative", children: [
          /* @__PURE__ */ e(R, { className: "absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-[var(--text-tertiary)]" }),
          /* @__PURE__ */ e(
            "input",
            {
              type: "text",
              placeholder: r("applications.list.search"),
              value: s,
              onChange: (t) => N(t.target.value),
              className: "w-full rounded-[var(--radius-input)] border border-[var(--item-color-border)] bg-[var(--bg-secondary)] py-2 pl-10 pr-4 text-[var(--text-primary)] placeholder-[var(--text-tertiary)] focus:border-[var(--color-primary-600)] focus:outline-none"
            }
          )
        ] }),
        /* @__PURE__ */ a(
          "select",
          {
            value: o,
            onChange: (t) => p(t.target.value),
            className: "rounded-[var(--radius-input)] border border-[var(--item-color-border)] bg-[var(--bg-secondary)] px-4 py-2 text-[var(--text-primary)] focus:border-[var(--color-primary-600)] focus:outline-none",
            children: [
              /* @__PURE__ */ e("option", { value: "", children: r("applications.list.allContexts") }),
              T.map((t) => /* @__PURE__ */ e("option", { value: t, children: t }, t))
            ]
          }
        ),
        /* @__PURE__ */ a(
          "select",
          {
            value: l,
            onChange: (t) => w(t.target.value),
            className: "rounded-[var(--radius-input)] border border-[var(--item-color-border)] bg-[var(--bg-secondary)] px-4 py-2 text-[var(--text-primary)] focus:border-[var(--color-primary-600)] focus:outline-none",
            children: [
              /* @__PURE__ */ e("option", { value: "all", children: r("applications.list.allStatus") }),
              /* @__PURE__ */ e("option", { value: "active", children: r("applications.list.active") }),
              /* @__PURE__ */ e("option", { value: "inactive", children: r("applications.list.inactive") })
            ]
          }
        )
      ] }),
      /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ e(
          "button",
          {
            onClick: () => n("cards"),
            className: `rounded-lg p-2 transition-all ${m === "cards" ? "bg-[var(--color-primary-600)] text-white" : "bg-[var(--bg-secondary)] text-[var(--text-tertiary)] hover:text-[var(--text-primary)]"}`,
            title: r("applications.list.cardView"),
            children: /* @__PURE__ */ e(U, { className: "h-5 w-5" })
          }
        ),
        /* @__PURE__ */ e(
          "button",
          {
            onClick: () => n("table"),
            className: `rounded-lg p-2 transition-all ${m === "table" ? "bg-[var(--color-primary-600)] text-white" : "bg-[var(--bg-secondary)] text-[var(--text-tertiary)] hover:text-[var(--text-primary)]"}`,
            title: r("applications.list.tableView"),
            children: /* @__PURE__ */ e(q, { className: "h-5 w-5" })
          }
        ),
        /* @__PURE__ */ e("span", { className: "ml-auto text-sm text-[var(--text-tertiary)]", children: r("applications.list.count", { count: u.length }) })
      ] })
    ] }),
    u.length === 0 && /* @__PURE__ */ e("div", { className: "rounded-[var(--radius-card)] border border-[var(--item-color-border)] bg-[var(--bg-card)] p-12 text-center", children: /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)]", children: r("applications.list.noResults") }) }),
    u.length > 0 && m === "cards" && // Card View
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: u.map((t) => /* @__PURE__ */ e(
      J,
      {
        id: t.id,
        name: t.label,
        description: t.description ?? void 0,
        icon: t.icon ?? void 0,
        isActive: t.isActive,
        onClick: () => C(t.id)
      },
      t.id
    )) }),
    u.length > 0 && m !== "cards" && // Table View
    /* @__PURE__ */ e("div", { className: "card overflow-hidden", children: /* @__PURE__ */ a("table", { className: "w-full", children: [
      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { className: "bg-[var(--bg-secondary)]", children: [
        /* @__PURE__ */ e("th", { className: "text-left px-4 py-3 text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wider", children: r("applications.list.columns.application") }),
        /* @__PURE__ */ e("th", { className: "text-left px-4 py-3 text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wider hidden md:table-cell", children: r("applications.list.columns.context") }),
        /* @__PURE__ */ e("th", { className: "text-left px-4 py-3 text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wider hidden lg:table-cell", children: r("applications.list.columns.modules") }),
        /* @__PURE__ */ e("th", { className: "text-left px-4 py-3 text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wider", children: r("applications.list.columns.status") }),
        /* @__PURE__ */ e("th", { className: "w-24 px-4 py-3" })
      ] }) }),
      /* @__PURE__ */ e("tbody", { className: "divide-y divide-[var(--border-color)]", children: u.map((t) => /* @__PURE__ */ a(
        "tr",
        {
          className: "hover:bg-[var(--bg-hover)] transition-colors cursor-pointer group",
          onClick: () => C(t.id),
          children: [
            /* @__PURE__ */ a("td", { className: "px-4 py-3", children: [
              /* @__PURE__ */ e("p", { className: "font-medium text-[var(--text-primary)] group-hover:text-[var(--color-accent-600)] transition-colors", children: t.label }),
              t.description && /* @__PURE__ */ e("p", { className: "mt-0.5 text-xs text-[var(--text-tertiary)]", children: t.description })
            ] }),
            /* @__PURE__ */ e("td", { className: "px-4 py-3 text-sm text-[var(--text-secondary)] hidden md:table-cell", children: t.zone }),
            /* @__PURE__ */ e("td", { className: "px-4 py-3 text-sm text-[var(--text-secondary)] hidden lg:table-cell", children: t.modulesCount || 0 }),
            /* @__PURE__ */ e("td", { className: "px-4 py-3", children: /* @__PURE__ */ e("div", { className: "inline-flex items-center gap-2 rounded-full px-2.5 py-0.5 text-xs font-medium", children: t.isActive ? /* @__PURE__ */ a(S, { children: [
              /* @__PURE__ */ e("div", { className: "h-2 w-2 rounded-full bg-[var(--success-text)]" }),
              /* @__PURE__ */ e("span", { className: "text-[var(--success-text)]", children: r("applications.list.active") })
            ] }) : /* @__PURE__ */ a(S, { children: [
              /* @__PURE__ */ e("div", { className: "h-2 w-2 rounded-full bg-[var(--warning-text)]" }),
              /* @__PURE__ */ e("span", { className: "text-[var(--warning-text)]", children: r("applications.list.inactive") })
            ] }) }) }),
            /* @__PURE__ */ e("td", { className: "px-4 py-3", onClick: (g) => g.stopPropagation(), children: /* @__PURE__ */ e(
              "button",
              {
                onClick: () => C(t.id),
                className: "inline-flex items-center justify-center rounded-lg bg-[var(--color-primary-600)] p-2 text-white transition-all hover:shadow-md",
                children: /* @__PURE__ */ e("span", { className: "text-xs font-medium", children: r("applications.list.view") })
              }
            ) })
          ]
        },
        t.id
      )) })
    ] }) })
  ] });
};
export {
  Z as ApplicationsListPage
};
//# sourceMappingURL=ApplicationsListPage-C91v2rZt.js.map
