"use client";

import clsx from "clsx";
import type { ReactNode } from "react";
import { Button } from "@/components/ui/kit";

export function StatTile({ label, value, sub, tone }: { label: string; value: ReactNode; sub?: ReactNode; tone?: "brick" | "amber" }) {
  return (
    <div className="rounded-lg border border-line bg-white p-4">
      <p className="text-[13px] text-muted">{label}</p>
      <p className={clsx("tabular mt-1 text-2xl font-semibold tracking-tight", tone === "brick" ? "text-brick" : tone === "amber" ? "text-amber" : "text-ink")}>{value}</p>
      {sub && <p className="mt-0.5 text-xs text-muted">{sub}</p>}
    </div>
  );
}

export function Pager({ page, last, onPage, total }: { page: number; last: number; onPage: (p: number) => void; total?: number }) {
  if (last <= 1) return null;
  return (
    <div className="flex items-center justify-end gap-2 border-t border-line px-5 py-3 text-sm text-muted">
      <span className="tabular mr-auto">
        {total !== undefined ? `${total.toLocaleString("en-IN")} total, ` : ""}page {page} of {last}
      </span>
      <Button size="sm" disabled={page <= 1} onClick={() => onPage(page - 1)}>
        Previous
      </Button>
      <Button size="sm" disabled={page >= last} onClick={() => onPage(page + 1)}>
        Next
      </Button>
    </div>
  );
}

export function FilterTabs<T extends string>({ value, onChange, options, label }: { value: T; onChange: (v: T) => void; options: readonly (readonly [T, string])[]; label: string }) {
  return (
    <div className="flex gap-1 overflow-x-auto" role="tablist" aria-label={label}>
      {options.map(([v, l]) => (
        <button key={v} role="tab" aria-selected={value === v} onClick={() => onChange(v)} className={clsx("shrink-0 rounded-full px-3 py-1.5 text-sm", value === v ? "bg-ink text-white" : "text-muted hover:bg-white")}>
          {l}
        </button>
      ))}
    </div>
  );
}

/** Fresh key per open dialog for idempotent money actions. */
export const newKey = () => (typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `k-${Date.now()}-${Math.random().toString(16).slice(2)}`);

export const bpToPct = (bp: number) => `${(bp / 100).toFixed(bp % 100 ? 2 : 0)}%`;