Pagination

"use client";

import * as React from "react";
import { Pagination } from "@/components/ui/pagination";

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

const primitivePreviewCardSurfaceFrameClass = cn(
  "relative isolate overflow-hidden rounded-2xl",
  "border",
);

const primitivePreviewCardSurfaceLightClass = cn(
  "border-black/[0.08] bg-[#f4f4f5]",
  "[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);

const primitivePreviewCardSurfaceClass = cn(
  primitivePreviewCardSurfaceFrameClass,
  primitivePreviewCardSurfaceLightClass,
  // Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
  // PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
  "dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);

const wensityCardSurfaceClass = primitivePreviewCardSurfaceClass;

function PreviewPanel({
  children,
  className,
  title,
  subtitle,
}: {
  children: React.ReactNode;
  className?: string;
  title?: string;
  subtitle?: string;
}) {
  return (
    <div
      className={cn(
        wensityCardSurfaceClass,
        "w-full max-w-lg p-5 sm:p-6",
        className,
      )}
    >
      {title ? (
        <div className="mb-5 border-b border-[var(--border)] pb-4">
          <p className="text-sm font-semibold tracking-[-0.015em] text-[var(--foreground)]">
            {title}
          </p>
          {subtitle ? (
            <p className="mt-1 text-[12px] leading-[1.5] text-[var(--muted-foreground)]">
              {subtitle}
            </p>
          ) : null}
        </div>
      ) : null}
      {children}
    </div>
  );
}

/* ── Main Preview ─────────────────────────────────────────── */

export function PaginationPreview() {
  const [defaultPage, setDefaultPage] = React.useState(4);
  const [compactPage, setCompactPage] = React.useState(3);
  const [firstLastPage, setFirstLastPage] = React.useState(5);
  const [loadMoreCount, setLoadMoreCount] = React.useState(20);
  const [loadMoreLoading, setLoadMoreLoading] = React.useState(false);

  return (
    <PreviewPanel
      title="Pagination"
      subtitle="Page navigation with sliding indicator, compact counter, and progressive loading."
    >
      <div className="space-y-7">
        {/* Default */}
        <div>
          <p className="mb-3 text-xs font-semibold text-[var(--muted-foreground)] opacity-60">
            Default
          </p>
          <div className="flex justify-center">
            <Pagination
              page={defaultPage}
              totalPages={12}
              onPageChange={setDefaultPage}
            />
          </div>
        </div>

        {/* Compact */}
        <div>
          <p className="mb-3 text-xs font-semibold text-[var(--muted-foreground)] opacity-60">
            Compact
          </p>
          <div className="flex justify-center">
            <Pagination
              variant="compact"
              page={compactPage}
              totalPages={8}
              onPageChange={setCompactPage}
            />
          </div>
        </div>

        {/* With First & Last */}
        <div>
          <p className="mb-3 text-xs font-semibold text-[var(--muted-foreground)] opacity-60">
            With First & Last
          </p>
          <div className="flex justify-center">
            <Pagination
              variant="with-first-last"
              page={firstLastPage}
              totalPages={20}
              onPageChange={setFirstLastPage}
            />
          </div>
        </div>

        {/* Load More */}
        <div>
          <p className="mb-3 text-xs font-semibold text-[var(--muted-foreground)] opacity-60">
            Load More
          </p>
          <div className="flex justify-center">
            <Pagination
              variant="load-more"
              page={1}
              totalPages={5}
              onPageChange={() => {}}
              isLoading={loadMoreLoading}
              hasMore={loadMoreCount < 60}
              onLoadMore={() => {
                setLoadMoreLoading(true);
                setTimeout(() => {
                  setLoadMoreCount((c) => Math.min(c + 10, 60));
                  setLoadMoreLoading(false);
                }, 1500);
              }}
              loadedCount={loadMoreCount}
              totalCount={60}
            />
          </div>
        </div>
      </div>
    </PreviewPanel>
  );
}

/* ── Card Preview (compact) ──────────────────────────────────── */

/* ── Example: Default ─────────────────────────────────────── */

/* ── Example: Compact ─────────────────────────────────────── */

/* ── Example: With First & Last ───────────────────────────── */

/* ── Example: Load More ────────────────────────────────────── */

export default function Demo() {
  return <PaginationPreview />;
}