"use client";
import React from "react";
import { useScrollSnap } from "./dashboard/hooks/useScrollSnap";
import { cn } from "../lib/utils";

const SECTION_IDS = ["s1", "s2", "s3", "s4"];
const SECTIONS = [
  { id: "s1", label: "Overview" },
  { id: "s2", label: "Accounts" },
  { id: "s3", label: "Products" },
  { id: "s4", label: "Page 4" },
];

function DummySection({ sectionId, title, pageTitle, onJumpToSection, activeSection }) {
  return (
    <section
      id={sectionId}
      className="flex min-h-screen w-auto flex-col gap-[18px] rounded-2xl px-4 py-4"
      style={{
        scrollSnapAlign: "start",
        scrollSnapStop: "normal",
        color: "var(--text)",
        background: "transparent",
      }}
    >
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-baseline gap-2.5">
          <h1 className="m-0 text-lg font-medium tracking-wide text-[var(--text)]">{pageTitle}</h1>
          <span className="rounded-full border border-[var(--line)] bg-white/3 px-2.5 py-1.5 text-xs text-[var(--muted)]">
            snap page
          </span>
        </div>
        <div className="flex flex-wrap items-center justify-end gap-2.5">
          {SECTIONS.map(({ id, label }) => (
            <button
              key={id}
              onClick={() => onJumpToSection(id)}
              className={cn(
                "rounded-xl px-3 py-2.5 text-xs transition-all active:translate-y-[1px]",
                activeSection === id
                  ? "border border-[rgba(106,166,255,0.7)] bg-[rgba(106,166,255,0.12)] text-[var(--text)] hover:border-[rgba(106,166,255,0.55)] hover:bg-[rgba(106,166,255,0.08)]"
                  : "border border-[var(--line)] bg-white/3 text-[var(--text)] hover:border-[rgba(106,166,255,0.55)] hover:bg-[rgba(106,166,255,0.08)]"
              )}
            >
              {label}
            </button>
          ))}
        </div>
      </div>

      <div className="flex items-end justify-between gap-4">
        <div>
          <h2 className="m-0 text-xl tracking-wide text-[var(--text)]">{title}</h2>
          <p className="mt-1.5 mb-0 text-xs text-[var(--muted)]">
            Dummy section – smooth scroll categories.
          </p>
        </div>
      </div>

      <div className="relative overflow-hidden rounded-[18px] border border-[var(--line)] bg-gradient-to-b from-white/4 to-white/2 p-6 shadow-[0_10px_30px_rgba(0,0,0,0.35)]">
        <div
          className="pointer-events-none absolute inset-[-1px] opacity-55"
          style={{
            background:
              "radial-gradient(600px 280px at 20% 0%, rgba(106,166,255,0.14), transparent 60%)",
          }}
        />
        <div className="relative">
          <p className="text-sm text-[var(--muted)]">
            This is <strong className="text-[var(--text)]">{title}</strong>. Use the buttons above to jump between Overview, Accounts, Products, and Page 4.
          </p>
        </div>
      </div>
    </section>
  );
}

export function ScrollSnapDummyPage({ pageTitle }) {
  const { scrollToSection, activeSection } = useScrollSnap(SECTION_IDS);

  const handleJumpToSection = (sectionId) => {
    scrollToSection(sectionId);
  };

  return (
    <div className="flex flex-1">
      <div className="flex h-full w-full flex-1 flex-col gap-2 rounded-2xl border border-neutral-200 bg-white p-2 md:p-4 dark:border-neutral-700 dark:bg-neutral-900">
        <div
          className="h-full w-full overflow-y-scroll hide-scrollbar"
          style={{
            scrollSnapType: "y mandatory",
            scrollBehavior: "smooth",
          }}
        >
          <div className="min-h-screen">
            <DummySection
              sectionId="s1"
              title="Overview"
              pageTitle={pageTitle}
              onJumpToSection={handleJumpToSection}
              activeSection={activeSection}
            />
            <DummySection
              sectionId="s2"
              title="Accounts"
              pageTitle={pageTitle}
              onJumpToSection={handleJumpToSection}
              activeSection={activeSection}
            />
            <DummySection
              sectionId="s3"
              title="Products"
              pageTitle={pageTitle}
              onJumpToSection={handleJumpToSection}
              activeSection={activeSection}
            />
            <DummySection
              sectionId="s4"
              title="Page 4"
              pageTitle={pageTitle}
              onJumpToSection={handleJumpToSection}
              activeSection={activeSection}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
