Stretch Tabs

"use client";

import * as React from "react";
import { Activity, CreditCard, LayoutDashboard, RotateCcw, Users } from "lucide-react";
import { StretchTabs } from "@/components/ui/stretch-tabs";
import type { StretchTabItem } from "@/components/ui/stretch-tabs";

type DemoProps = { autoplay?: boolean; bare?: boolean; variant?: "underline" | "pill" | "segment"; stretch?: number; panel?: "slide" | "fade" | "none" };

const Row = ({ label, meta, tone }: { label: string; meta: string; tone?: string }) => (
  <li className="flex items-center justify-between rounded-xl border border-border/70 px-3 py-2 text-sm"><span>{label}</span><span className={`rounded-full px-2 py-0.5 font-mono text-[10px] ${tone ?? "bg-muted text-muted-foreground"}`}>{meta}</span></li>
);

const ITEMS: StretchTabItem[] = [
  { value: "overview", label: "Overview", icon: <LayoutDashboard className="size-4" aria-hidden="true" />, content: <ul className="space-y-2"><Row label="Monthly active users" meta="12.4k" tone="bg-chart-2/15 text-foreground" /><Row label="Projects shipped" meta="38" /><Row label="Open incidents" meta="0" /></ul> },
  { value: "activity", label: "Activity", icon: <Activity className="size-4" aria-hidden="true" />, content: <ul className="space-y-2"><Row label="Maria deployed api v2.4" meta="2m ago" /><Row label="Jon merged #412" meta="18m ago" /><Row label="Nightly build passed" meta="1h ago" tone="bg-chart-2/15 text-foreground" /></ul> },
  { value: "members", label: "Members", badge: 3, icon: <Users className="size-4" aria-hidden="true" />, content: <ul className="space-y-2"><Row label="Maria Lopez" meta="owner" /><Row label="Jon Park" meta="editor" /><Row label="3 invites pending" meta="pending" tone="bg-chart-2/15 text-foreground" /></ul> },
  { value: "billing", label: "Billing", icon: <CreditCard className="size-4" aria-hidden="true" />, content: <ul className="space-y-2"><Row label="Team plan" meta="$48 / mo" /><Row label="Next invoice" meta="Nov 1" /><Row label="Card ending 4242" meta="active" tone="bg-chart-2/15 text-foreground" /></ul> },
];

const SMALL = [
  { value: "day", label: "Day" }, { value: "week", label: "Week" }, { value: "month", label: "Month" }, { value: "year", label: "Year" },
];

const SCRIPT: [number, string][] = [[700, "activity"], [1700, "billing"], [3000, "members"], [4300, "overview"], [5500, "billing"]];
const SMALL_SCRIPT: [number, string][] = [[1200, "month"], [2600, "day"], [4000, "year"], [5200, "week"]];

export default function StretchTabsDemo({ autoplay = true, bare = false, variant = "segment", stretch = 1, panel = "slide" }: DemoProps) {
  const [main, setMain] = React.useState("overview");
  const [small, setSmall] = React.useState("week");
  const [pill, setPill] = React.useState("week");
  const [motion, setMotion] = React.useState({ ready: false, reduced: true });
  const [run, setRun] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
    const update = () => setMotion({ ready: true, reduced: media.matches });
    update();
    media.addEventListener("change", update);
    return () => media.removeEventListener("change", update);
  }, []);

  React.useEffect(() => {
    if (!motion.ready || !autoplay || motion.reduced || paused) return;
    const timers: number[] = [];
    for (const [at, next] of SCRIPT) timers.push(window.setTimeout(() => setMain(next), at));
    for (const [at, next] of SMALL_SCRIPT) timers.push(window.setTimeout(() => { setSmall(next); setPill(next); }, at));
    timers.push(window.setTimeout(() => { setMain("overview"); setSmall("week"); setPill("week"); setRun((previous) => previous + 1); }, 8200));
    return () => timers.forEach((timer) => window.clearTimeout(timer));
  }, [motion.ready, motion.reduced, autoplay, paused, run]);

  const takeOver = () => autoplay && setPaused(true);

  return (
    <main className="flex min-h-svh w-full flex-col items-center justify-center gap-5 bg-background px-5 py-6 text-foreground" onPointerDownCapture={takeOver} onKeyDownCapture={takeOver}>
      {!bare && (
        <header className="w-full max-w-[480px]">
          <p className="mb-1 text-[10px] font-medium uppercase tracking-[0.2em] text-muted-foreground">You can see where it went</p>
          <h1 className="text-[24px] font-semibold leading-tight tracking-tight">Tabs that stretch to the next stop.</h1>
        </header>
      )}
      <section className="w-full max-w-[480px] rounded-3xl border border-border bg-card p-5 shadow-xl shadow-primary/5">
        <StretchTabs data-demo-main items={ITEMS} value={main} onValueChange={setMain} variant={variant} stretch={stretch} panelTransition={panel} aria-label="Workspace sections" panelClassName="min-h-[132px]" />
      </section>
      <section className="grid w-full max-w-[480px] grid-cols-1 gap-3 sm:grid-cols-2">
        <div className="rounded-2xl border border-border bg-card p-3">
          <p className="mb-2 text-[10px] font-medium uppercase tracking-[0.18em] text-muted-foreground">Underline</p>
          <StretchTabs data-demo-underline items={SMALL} value={small} onValueChange={setSmall} variant="underline" compact stretch={stretch} aria-label="Range" />
        </div>
        <div className="rounded-2xl border border-border bg-card p-3">
          <p className="mb-2 text-[10px] font-medium uppercase tracking-[0.18em] text-muted-foreground">Pill</p>
          <StretchTabs data-demo-pill items={SMALL} value={pill} onValueChange={setPill} variant="pill" compact stretch={stretch} aria-label="Range" listClassName="bg-muted/60 p-1" />
        </div>
      </section>
      {!bare && (
        <footer className="flex w-full max-w-[480px] items-center justify-between text-[10px] text-muted-foreground">
          <span>Click a tab or use the arrow keys</span>
          <button type="button" data-replay onClick={() => { setMain("overview"); setSmall("week"); setPill("week"); setPaused(false); setRun((previous) => previous + 1); }} className="inline-flex items-center gap-1 rounded px-1 underline decoration-border underline-offset-4 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><RotateCcw className="size-3" aria-hidden="true" />Replay</button>
        </footer>
      )}
    </main>
  );
}