"use client";

import { useTransition } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { MARKETING_PAGE_SIZES, marketingPaginationHref, type MarketingPagination } from "@/lib/marketing-pagination";

export function KavenixMarketingPagination({ pagination }: { pagination: MarketingPagination }) {
  const router = useRouter();
  const query = useSearchParams();
  const [pending, startTransition] = useTransition();
  const { page, pageCount, pageSize, total } = pagination;
  function navigate(nextPage: number, nextSize = pageSize) {
    startTransition(() => router.push(marketingPaginationHref(query.toString(), nextPage, nextSize), { scroll: false }));
  }
  return (
    <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 text-[12px] text-[#7183a1]" aria-label="방문 목록 페이지 이동" aria-busy={pending}>
      <span className="mr-1 whitespace-nowrap">총 {total.toLocaleString("ko-KR")}건</span>
      <button type="button" aria-label="이전 페이지" disabled={pending || page <= 1} onClick={() => navigate(page - 1)} className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-[6px] transition-colors hover:bg-[#f2f6fc] hover:text-[#2f6df6] disabled:cursor-not-allowed disabled:opacity-30">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-4 w-4" aria-hidden="true"><path d="m14 6-6 6 6 6" /></svg>
      </button>
      <span className="min-w-[48px] whitespace-nowrap text-center tabular-nums" role="status" aria-live="polite">{page}/{pageCount}</span>
      <button type="button" aria-label="다음 페이지" disabled={pending || page >= pageCount} onClick={() => navigate(page + 1)} className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-[6px] transition-colors hover:bg-[#f2f6fc] hover:text-[#2f6df6] disabled:cursor-not-allowed disabled:opacity-30">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-4 w-4" aria-hidden="true"><path d="m10 6 6 6-6 6" /></svg>
      </button>
      <select aria-label="페이지당 표시 개수" value={pageSize} disabled={pending} onChange={(event) => navigate(1, Number(event.target.value))} className="h-8 cursor-pointer border-0 bg-transparent pl-2 pr-1 text-[12px] text-[#536986] outline-offset-2 focus-visible:outline-[#2f6df6] disabled:cursor-wait">
        {MARKETING_PAGE_SIZES.map((size) => <option key={size} value={size}>{size}개씩 보기</option>)}
      </select>
    </div>
  );
}