pelagia-portal/App/components/reports/reports-toolbar.tsx

"use client";

import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { Download } from "lucide-react";
import { cn } from "@/lib/utils";
import { fyLabel, SCOPE_LABELS, type Granularity, type ScopeMode } from "@/lib/reports";

interface Props {
  fys: number[];
  fy: number;
  gran: Granularity;
  /** Pass a scope to render the Top/Bottom-N "Show" control (index pages only). */
  scope?: ScopeMode;
  exportHref: string;
}

// Pinned filter toolbar shared by the report index pages. Each control writes its
// value into the URL query string (preserving the rest) so the server component
// re-renders the report for the new filters — no client-side data fetching.
export function ReportsToolbar({ fys, fy, gran, scope, exportHref }: Props) {
  const router = useRouter();
  const pathname = usePathname();
  const sp = useSearchParams();

  function update(patch: Record<string, string | null>) {
    const q = new URLSearchParams(sp.toString());
    for (const [k, v] of Object.entries(patch)) {
      if (v === null || v === "") q.delete(k);
      else q.set(k, v);
    }
    const qs = q.toString();
    router.push(qs ? `${pathname}?${qs}` : pathname);
  }

  const yearly = gran === "yearly";

  return (
    <div className="sticky top-0 z-20 -mx-4 mb-6 border-b border-neutral-200 bg-neutral-50/95 px-4 py-3 backdrop-blur md:-mx-6 md:px-6">
      <div className="flex flex-wrap items-center gap-4">
        <div className="flex items-center gap-2">
          <span className="text-xs font-semibold uppercase tracking-wider text-neutral-400">Granularity</span>
          <div className="inline-flex rounded-lg border border-neutral-200 bg-white p-0.5 text-sm">
            {(["monthly", "yearly"] as Granularity[]).map((g) => (
              <button
                key={g}
                onClick={() => update({ gran: g === "monthly" ? null : g })}
                className={cn(
                  "rounded-md px-3 py-1 font-medium capitalize transition-colors",
                  gran === g ? "bg-primary-600 text-white shadow-sm" : "text-neutral-500 hover:text-neutral-800"
                )}
              >
                {g}
              </button>
            ))}
          </div>
        </div>

        {!yearly && (
          <label className="flex items-center gap-2">
            <span className="text-xs font-semibold uppercase tracking-wider text-neutral-400">Financial Year</span>
            <select
              value={fy}
              onChange={(e) => update({ fy: e.target.value })}
              className="rounded-lg border border-neutral-200 bg-white px-3 py-1.5 text-sm font-medium text-neutral-700 focus:border-primary-600 focus:outline-none"
            >
              {[...fys].reverse().map((y) => (
                <option key={y} value={y}>{fyLabel(y)}</option>
              ))}
            </select>
          </label>
        )}

        {scope && (
          <label className="flex items-center gap-2">
            <span className="text-xs font-semibold uppercase tracking-wider text-neutral-400">Show</span>
            <select
              value={scope}
              onChange={(e) => update({ scope: e.target.value === "top5" ? null : e.target.value })}
              className="rounded-lg border border-neutral-200 bg-white px-3 py-1.5 text-sm font-medium text-neutral-700 focus:border-primary-600 focus:outline-none"
            >
              {(Object.keys(SCOPE_LABELS) as ScopeMode[]).map((s) => (
                <option key={s} value={s}>{SCOPE_LABELS[s]}</option>
              ))}
            </select>
          </label>
        )}

        <a
          href={exportHref}
          className="ml-auto inline-flex items-center gap-1.5 rounded-lg border border-neutral-200 bg-white px-3 py-1.5 text-sm font-medium text-neutral-600 hover:bg-neutral-50"
        >
          <Download className="h-4 w-4" />
          Export
        </a>
      </div>
    </div>
  );
}