nxtgauge-admin-solid/src/routes/admin/index.tsx

import {
  For,
  Show,
  createEffect,
  createMemo,
  createSignal,
  onCleanup,
  onMount,
  createResource,
} from "solid-js";
import { useSearchParams } from "@solidjs/router";
import {
  BarChart3,
  Building2,
  CircleDashed,
  Coins,
  EllipsisVertical,
  Eye,
  EyeOff,
  GripVertical,
  LineChart,
  RotateCcw,
  Search,
  Settings2,
  TrendingUp,
  Users,
} from "lucide-solid";
import {
  ADMIN_DASHBOARD_WIDGETS,
  type DashboardWidgetDefinition,
  type DashboardWidgetSize,
} from "~/lib/admin/dashboard";
import type { RuntimeDashboardLayout } from "~/lib/runtime/types";
import { loadAdminDashboardLayout, saveAdminDashboardLayout } from "~/lib/runtime/storage";

const API = "";

async function fetchMetrics() {
  const accessToken =
    typeof sessionStorage !== "undefined"
      ? (sessionStorage.getItem("nxtgauge_admin_access_token") || "").trim()
      : "";
  const res = await fetch(`${API}/api/admin/dashboard/metrics`, {
    headers: {
      Accept: "application/json",
      ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
    },
    credentials: "include",
  });
  if (!res.ok) throw new Error("Failed to load metrics");
  return res.json();
}

type WidgetStateKind = "live" | "empty" | "pending";
type WidgetType = "summary" | "analytics";
type SortMode = "layout" | "name" | "status";
type FilterMode = "all" | WidgetType;
type GridLayoutMode = "3x4" | "3x3";

type WidgetMeta = {
  state: WidgetStateKind;
  type: WidgetType;
  statusLabel: string;
  subtitle: string;
  emptyMessage?: string;
  pendingMessage?: string;
};

const WIDGET_DEFINITION_MAP = Object.fromEntries(
  ADMIN_DASHBOARD_WIDGETS.map((definition) => [definition.widgetKey, definition])
);

const DEFAULT_LAYOUT: RuntimeDashboardLayout = {
  order: ADMIN_DASHBOARD_WIDGETS.slice()
    .sort((a, b) => a.order - b.order)
    .map((definition) => definition.widgetKey),
  visibility: Object.fromEntries(
    ADMIN_DASHBOARD_WIDGETS.map((definition) => [definition.widgetKey, definition.defaultVisible])
  ),
  size: Object.fromEntries(
    ADMIN_DASHBOARD_WIDGETS.map((definition) => [definition.widgetKey, definition.defaultSize])
  ),
};

const WIDGET_META: Record<string, WidgetMeta> = {
  kpi_total_users: {
    state: "live",
    type: "summary",
    statusLabel: "Live Data",
    subtitle: "Powered by USER_MANAGEMENT",
  },
  kpi_active_companies: {
    state: "live",
    type: "summary",
    statusLabel: "Live Data",
    subtitle: "Powered by COMPANY_MANAGEMENT",
  },
  kpi_open_leads: {
    state: "live",
    type: "summary",
    statusLabel: "Live Data",
    subtitle: "Powered by REQUIREMENTS_MANAGEMENT",
  },
  kpi_pending_approvals: {
    state: "live",
    type: "summary",
    statusLabel: "Live Data",
    subtitle: "Powered by APPROVAL_MANAGEMENT",
  },
  kpi_total_revenue: {
    state: "live",
    type: "summary",
    statusLabel: "Live Data",
    subtitle: "Powered by REVENUE_LEDGER",
  },
  kpi_credits_purchased: {
    state: "empty",
    type: "summary",
    statusLabel: "No Data",
    subtitle: "Powered by CREDIT_MANAGEMENT",
    emptyMessage: "No credit activity available yet",
  },
  chart_leads_trend: {
    state: "live",
    type: "analytics",
    statusLabel: "Live Data",
    subtitle: "Weekly leads performance overview • Powered by REPORTS",
  },
  chart_revenue_overview: {
    state: "live",
    type: "analytics",
    statusLabel: "Live Data",
    subtitle: "Weekly revenue overview • Powered by REVENUE_LEDGER",
  },
};

function sanitizeLayout(layout: RuntimeDashboardLayout | null | undefined): RuntimeDashboardLayout {
  const knownKeys = new Set(ADMIN_DASHBOARD_WIDGETS.map((definition) => definition.widgetKey));
  const fallbackOrder = DEFAULT_LAYOUT.order;
  const incomingOrder = Array.isArray(layout?.order) ? layout!.order : [];

  const seen = new Set<string>();
  const normalizedOrder: string[] = [];

  for (const key of incomingOrder) {
    const normalizedKey = String(key || "");
    if (!knownKeys.has(normalizedKey) || seen.has(normalizedKey)) continue;
    seen.add(normalizedKey);
    normalizedOrder.push(normalizedKey);
  }

  for (const key of fallbackOrder) {
    if (!seen.has(key)) normalizedOrder.push(key);
  }

  const visibility: Record<string, boolean> = {};
  const size: Record<string, DashboardWidgetSize> = {};

  for (const definition of ADMIN_DASHBOARD_WIDGETS) {
    const key = definition.widgetKey;
    visibility[key] =
      typeof layout?.visibility?.[key] === "boolean"
        ? Boolean(layout?.visibility?.[key])
        : definition.defaultVisible;

    const rawSize = String(layout?.size?.[key] || "").toUpperCase();
    size[key] =
      rawSize === "S" || rawSize === "M" || rawSize === "L"
        ? (rawSize as DashboardWidgetSize)
        : definition.defaultSize;
  }

  return {
    order: normalizedOrder,
    visibility,
    size,
  };
}

function reorderKeys(order: string[], draggedKey: string, targetKey: string): string[] {
  if (draggedKey === targetKey) return order;
  const next = order.slice();
  const fromIndex = next.indexOf(draggedKey);
  const toIndex = next.indexOf(targetKey);
  if (fromIndex === -1 || toIndex === -1) return order;
  next.splice(fromIndex, 1);
  next.splice(toIndex, 0, draggedKey);
  return next;
}

function iconForWidget(widgetKey: string) {
  const cls = "text-[#FA5014]";
  if (widgetKey.includes("users")) return <Users size={22} class={cls} />;
  if (widgetKey.includes("companies")) return <Building2 size={22} class={cls} />;
  if (widgetKey.includes("leads")) return <TrendingUp size={22} class={cls} />;
  if (widgetKey.includes("credits")) return <Coins size={22} class={cls} />;
  if (widgetKey.includes("revenue")) return <BarChart3 size={22} class={cls} />;
  if (widgetKey.includes("approvals")) return <CircleDashed size={22} class={cls} />;
  return <LineChart size={22} class={cls} />;
}

function badgeClass(state: WidgetStateKind): string {
  if (state === "live") return "border-[#FDBA8C] bg-[#FFF1EB] text-[#FA5014]";
  if (state === "pending") return "border-[#D1D5DB] bg-[#F3F4F6] text-[#6B7280]";
  return "border-[#E5E7EB] bg-white text-[#6B7280]";
}

function widgetSpan(mode: GridLayoutMode): string {
  return mode === "3x3" ? "xl:col-span-4" : "xl:col-span-3";
}

function EmptyPreview() {
  return (
    <div class="flex h-full flex-col items-center justify-center">
      <CircleDashed size={22} class="text-[#FA5014]" />
      <div class="mt-3 text-2xl font-bold leading-none text-[#9CA3AF]">--</div>
    </div>
  );
}

function PendingPreview() {
  return (
    <div class="flex h-full flex-col items-center justify-center gap-3">
      <LineChart size={22} class="text-[#FA5014]" />
      <div class="w-full max-w-[130px] space-y-2">
        <div class="h-2 rounded bg-[#E5E7EB]" />
        <div class="h-2 w-5/6 rounded bg-[#E5E7EB]" />
        <div class="h-2 w-4/6 rounded bg-[#E5E7EB]" />
      </div>
    </div>
  );
}

function LivePreview(props: { value?: string; trend?: string; trendUp?: boolean }) {
  return (
    <div class="flex h-full flex-col items-center justify-center">
      <p class="text-[26px] font-bold leading-none text-[#111827]">{props.value || "0"}</p>
      <p class="mt-2 inline-flex items-center gap-1 text-xs font-semibold text-[#FA5014]">
        {props.trendUp ? "↗" : "↘"} {props.trend || "0%"}
      </p>
    </div>
  );
}

export default function AdminHomePage() {
  const [searchParams] = useSearchParams();
  const [layout, setLayout] = createSignal<RuntimeDashboardLayout>(sanitizeLayout(DEFAULT_LAYOUT));
  const [settingsOpen, setSettingsOpen] = createSignal(false);
  const [isHydrating, setIsHydrating] = createSignal(true);
  const [isAutoSaving, setIsAutoSaving] = createSignal(false);
  const [autoSaveNotice, setAutoSaveNotice] = createSignal("");
  const [lastSavedSnapshot, setLastSavedSnapshot] = createSignal("");
  const [draggingKey, setDraggingKey] = createSignal<string | null>(null);
  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);

  const [search, setSearch] = createSignal("");
  const [filterMode, setFilterMode] = createSignal<FilterMode>("all");
  const [sortMode, setSortMode] = createSignal<SortMode>("layout");
  const [gridLayout, setGridLayout] = createSignal<GridLayoutMode>("3x4");

  const [metrics] = createResource(fetchMetrics);

  const getWidgetState = (key: string) => {
    if (key.startsWith("kpi_")) {
      const idMap: Record<string, string> = {
        kpi_total_users: "users",
        kpi_active_companies: "companies",
        kpi_open_leads: "leads",
        kpi_pending_approvals: "approvals",
        kpi_total_revenue: "revenue",
        kpi_credits_purchased: "credits",
      };
      if (metrics.loading) return { state: "pending", statusLabel: "Loading..." };
      const m = metrics()?.kpis?.find((k: any) => k.id === idMap[key]);
      if (m) return { state: "live", statusLabel: "Live Data", data: m };
      return { state: "empty", statusLabel: "No Data" };
    }
    if (metrics.loading) return { state: "pending", statusLabel: "Loading..." };
    const m = metrics();
    if (key === "chart_leads_trend") {
      const data = m?.trend_series;
      if (data && data.length > 0)
        return { state: "live", statusLabel: "Live Data", data: { trend_series: data } };
      return { state: "empty", statusLabel: "No Data" };
    }
    if (key === "chart_revenue_overview") {
      const data = m?.rev_series;
      if (data && data.length > 0)
        return { state: "live", statusLabel: "Live Data", data: { rev_series: data } };
      return { state: "empty", statusLabel: "No Data" };
    }
    const meta = WIDGET_META[key];
    return { state: meta?.state || "empty", statusLabel: meta?.statusLabel || "No Data" };
  };

  const orderedWidgets = createMemo(() => {
    const current = layout();
    const rows = current.order
      .map((key) => WIDGET_DEFINITION_MAP[key])
      .filter((definition): definition is DashboardWidgetDefinition => Boolean(definition))
      .filter((definition) => current.visibility[definition.widgetKey] !== false)
      .filter((definition) => {
        const query = search().trim().toLowerCase();
        if (!query) return true;
        const meta = WIDGET_META[definition.widgetKey];
        return (
          definition.title.toLowerCase().includes(query) ||
          definition.moduleKey.toLowerCase().includes(query) ||
          (meta?.subtitle || "").toLowerCase().includes(query)
        );
      })
      .filter((definition) => {
        const mode = filterMode();
        if (mode === "all") return true;
        return (WIDGET_META[definition.widgetKey]?.type || "summary") === mode;
      });

    const mode = sortMode();
    if (mode === "layout") return rows;

    const next = rows.slice();
    next.sort((a, b) => {
      if (mode === "name") return a.title.localeCompare(b.title);
      const rank = (key: string) => {
        const info = getWidgetState(key);
        if (info.state === "live") return 1;
        if (info.state === "empty") return 2;
        return 3;
      };
      return rank(a.widgetKey) - rank(b.widgetKey);
    });

    return next;
  });

  onMount(async () => {
    try {
      const persistedLayout = await loadAdminDashboardLayout();
      const normalized = sanitizeLayout(persistedLayout || DEFAULT_LAYOUT);
      setLayout(normalized);
      setLastSavedSnapshot(JSON.stringify(normalized));
    } finally {
      setIsHydrating(false);
    }
  });

  createEffect(() => {
    if (isHydrating()) return;
    const nextLayout = layout();
    const nextSnapshot = JSON.stringify(nextLayout);
    if (nextSnapshot === lastSavedSnapshot()) return;

    setIsAutoSaving(true);
    setAutoSaveNotice("");

    const timer = setTimeout(async () => {
      const ok = await saveAdminDashboardLayout(nextLayout);
      setIsAutoSaving(false);
      if (ok) {
        setLastSavedSnapshot(nextSnapshot);
        setAutoSaveNotice("Layout saved automatically.");
      } else {
        setAutoSaveNotice("Auto-save failed. Please try again.");
      }
    }, 450);

    onCleanup(() => clearTimeout(timer));
  });

  const setWidgetVisibility = (widgetKey: string, visible: boolean) => {
    setLayout((current) => ({
      ...current,
      visibility: {
        ...current.visibility,
        [widgetKey]: visible,
      },
    }));
  };

  const resetLayout = () => {
    const normalized = sanitizeLayout(DEFAULT_LAYOUT);
    setLayout(normalized);
    setAutoSaveNotice("Layout reset to default.");
  };

  const handleDragStart = (event: DragEvent, widgetKey: string) => {
    event.dataTransfer?.setData("text/plain", widgetKey);
    if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
    setDraggingKey(widgetKey);
  };

  const handleDrop = (event: DragEvent, targetKey: string) => {
    event.preventDefault();
    const dragged = event.dataTransfer?.getData("text/plain") || draggingKey();
    if (!dragged) return;

    setLayout((current) => ({
      ...current,
      order: reorderKeys(current.order, dragged, targetKey),
    }));
    setDraggingKey(null);
  };

  return (
    <div class="w-full">
      <Show when={Boolean(searchParams.denied)}>
        <div
          class="rounded-2xl border border-[#E5E7EB] bg-white shadow-sm"
          style="margin-bottom: 18px"
        >
          <p class="notice">
            You don’t have access to {String(searchParams.denied || "").replace(/_/g, " ")}.
          </p>
        </div>
      </Show>
      <div
        class="rounded-2xl border border-[#E5E7EB] bg-white px-6 py-5 shadow-sm md:px-8"
        style="margin-bottom: 28px"
      >
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 class="text-[22px] font-bold leading-tight text-[#111827]">Dashboard Overview</h1>
            <p class="mt-0.5 text-[13px] text-[#6B7280]">
              Manage widget layout, visibility, sizing, and dashboard presentation
            </p>
          </div>

          <div class="flex shrink-0">
            <button
              type="button"
              class="inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-xl bg-[#0D0D2A] px-5 text-[13px] font-semibold leading-none text-white shadow-sm"
              onClick={() => {
                const next = !settingsOpen();
                setSettingsOpen(next);
                if (!next) setOpenMenuId(null);
              }}
            >
              <Settings2 size={14} class="text-[#FA5014]" />
              {settingsOpen() ? "Close Settings" : "Customize Widgets"}
            </button>
          </div>
        </div>
      </div>

      <Show when={settingsOpen()}>
        <div class="rounded-2xl border border-[#E5E7EB] bg-white p-6 shadow-sm md:p-7">
          {/* Settings header */}
          <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
              <h2 class="text-[15px] font-semibold text-[#111827]">Widget Settings</h2>
              <p class="mt-1 text-[13px] text-[#6B7280]">
                Choose visible widgets and select a grid layout.
              </p>
            </div>
            <button
              type="button"
              class="inline-flex h-9 items-center gap-1.5 rounded-lg border border-[#E5E7EB] bg-white px-3 text-xs font-semibold text-[#111827] shadow-sm"
              onClick={resetLayout}
            >
              <RotateCcw size={13} class="text-[#FA5014]" />
              Reset Layout
            </button>
          </div>

          {/* Filter controls */}
          <div class="mt-5 flex flex-wrap gap-3">
            <div class="relative min-w-[200px] flex-1">
              <Search
                size={14}
                class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[#FA5014]"
                style="z-index:1"
              />
              <input
                value={search()}
                onInput={(event) => setSearch(event.currentTarget.value)}
                placeholder="Search widgets"
                class="h-10 w-full rounded-lg border border-[#E5E7EB] bg-white pl-10 pr-3 text-sm text-[#111827] outline-none focus:border-[#FA5014]"
              />
            </div>

            <select
              class="h-10 rounded-lg border border-[#E5E7EB] bg-white px-3 text-sm text-[#111827]"
              value={filterMode()}
              onChange={(event) => setFilterMode(event.currentTarget.value as FilterMode)}
            >
              <option value="all">All Widgets</option>
              <option value="summary">Summary Only</option>
              <option value="analytics">Analytical Only</option>
            </select>

            <select
              class="h-10 rounded-lg border border-[#E5E7EB] bg-white px-3 text-sm text-[#111827]"
              value={sortMode()}
              onChange={(event) => setSortMode(event.currentTarget.value as SortMode)}
            >
              <option value="layout">Layout Order</option>
              <option value="name">Name</option>
              <option value="status">Status</option>
            </select>

            <select
              class="h-10 rounded-lg border border-[#E5E7EB] bg-white px-3 text-sm text-[#111827]"
              value={gridLayout()}
              onChange={(event) => setGridLayout(event.currentTarget.value as GridLayoutMode)}
            >
              <option value="3x4">Grid 3 × 4</option>
              <option value="3x3">Grid 3 × 3</option>
            </select>
          </div>

          {/* Widget list */}
          <div class="mt-5 grid gap-3 md:grid-cols-2">
            <For each={ADMIN_DASHBOARD_WIDGETS}>
              {(definition) => {
                const visible = () => layout().visibility[definition.widgetKey] !== false;
                const meta = WIDGET_META[definition.widgetKey];
                const stateInfo = getWidgetState(definition.widgetKey);
                const state = stateInfo.state;

                return (
                  <div class="flex items-center justify-between gap-4 rounded-xl border border-[#E5E7EB] bg-[#F9FAFB] px-4 py-4">
                    <div class="flex items-center gap-3 min-w-0">
                      <div class="shrink-0 text-[#FA5014]">
                        {iconForWidget(definition.widgetKey)}
                      </div>
                      <div class="min-w-0">
                        <p class="text-sm font-semibold text-[#111827]">{definition.title}</p>
                        <p class="mt-0.5 text-[11px] font-medium uppercase tracking-wide text-[#9CA3AF]">
                          {definition.moduleKey}
                        </p>
                      </div>
                    </div>
                    <div class="flex shrink-0 items-center gap-2">
                      <span
                        class={`hidden rounded-full border px-2 py-0.5 text-[10px] font-semibold sm:inline-flex ${badgeClass(state as WidgetStateKind)}`}
                      >
                        {stateInfo.statusLabel}
                      </span>
                      <button
                        type="button"
                        class={`inline-flex h-8 items-center gap-1.5 rounded-md border px-3 text-xs font-semibold ${
                          visible()
                            ? "border-[#FDBA8C] bg-[#FFF1EB] text-[#FA5014]"
                            : "border-[#E5E7EB] bg-white text-[#6B7280]"
                        }`}
                        onClick={() => setWidgetVisibility(definition.widgetKey, !visible())}
                      >
                        {visible() ? <Eye size={12} /> : <EyeOff size={12} />}
                        {visible() ? "Visible" : "Hidden"}
                      </button>
                    </div>
                  </div>
                );
              }}
            </For>
          </div>

          <Show when={isAutoSaving() || autoSaveNotice()}>
            <p class="mt-4 text-xs text-[#6B7280]">
              {isAutoSaving() ? "Saving layout..." : autoSaveNotice()}
            </p>
          </Show>
        </div>
      </Show>

      <div class="grid grid-cols-1 gap-5 xl:grid-cols-12" style="margin-top: 28px">
        <For each={orderedWidgets()}>
          {(definition) => {
            const meta = WIDGET_META[definition.widgetKey];
            const stateInfo = getWidgetState(definition.widgetKey);
            const state = stateInfo.state;
            const isOpenMenu = () => openMenuId() === definition.widgetKey;

            return (
              <section
                draggable={settingsOpen()}
                onDragStart={(event) => handleDragStart(event, definition.widgetKey)}
                onDragOver={(event) => event.preventDefault()}
                onDrop={(event) => handleDrop(event, definition.widgetKey)}
                onDragEnd={() => setDraggingKey(null)}
                class={`relative aspect-square min-h-[235px] rounded-2xl border border-[#E5E7EB] bg-white p-5 shadow-sm md:min-h-[260px] md:p-6 ${widgetSpan(gridLayout())} ${
                  state === "pending" ? "opacity-95" : ""
                } ${draggingKey() === definition.widgetKey ? "opacity-60" : ""}`}
              >
                <Show when={settingsOpen()}>
                  <>
                    <button
                      type="button"
                      class="absolute left-3 top-3 inline-flex h-8 w-8 items-center justify-center rounded-md border border-[#E5E7EB] bg-white cursor-grab text-[#FA5014]"
                      aria-label="Drag to reorder"
                    >
                      <GripVertical size={14} class="text-[#FA5014]" />
                    </button>
                    <div class="absolute right-3 top-3">
                      <button
                        type="button"
                        class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-[#E5E7EB] bg-white text-[#FA5014]"
                        onClick={() => setOpenMenuId(isOpenMenu() ? null : definition.widgetKey)}
                      >
                        <EllipsisVertical size={14} class="text-[#FA5014]" />
                      </button>

                      <Show when={isOpenMenu()}>
                        <div class="absolute right-0 top-10 z-20 w-40 rounded-lg border border-[#E5E7EB] bg-white p-1 shadow-md">
                          {["Edit Widget", "Duplicate Widget", "Hide Widget", "Remove Widget"].map(
                            (item) => (
                              <button
                                type="button"
                                class="block w-full rounded-md px-2 py-2 text-left text-xs font-medium text-[#111827] hover:bg-[#F9FAFB]"
                                onClick={() => setOpenMenuId(null)}
                              >
                                {item}
                              </button>
                            )
                          )}
                        </div>
                      </Show>
                    </div>
                  </>
                </Show>

                <div class="flex h-full flex-col items-center justify-center px-4">
                  <div class="mb-3 text-[#FA5014]">{iconForWidget(definition.widgetKey)}</div>
                  <h3 class="text-center text-[15px] font-semibold text-[#111827]">
                    {definition.title}
                  </h3>
                  <div class="mt-4 h-[116px] w-full max-w-[210px] rounded-xl border border-[#E5E7EB] bg-[#F9FAFB] p-4">
                    <Show when={state === "live"}>
                      <LivePreview
                        value={stateInfo.data?.value}
                        trend={stateInfo.data?.trend}
                        trendUp={stateInfo.data?.trendUp}
                      />
                    </Show>
                    <Show when={state === "empty"}>
                      <EmptyPreview />
                    </Show>
                    <Show when={state === "pending"}>
                      <PendingPreview />
                    </Show>
                  </div>
                  <span
                    class={`mt-4 inline-flex rounded-full border px-2 py-1 text-[11px] font-semibold ${badgeClass(state as WidgetStateKind)}`}
                  >
                    {stateInfo.statusLabel}
                  </span>
                </div>
              </section>
            );
          }}
        </For>
      </div>
    </div>
  );
}