"use client";
import { Suspense, use, useState } from "react";
import { Tabs } from "@funstack/ui/tabs";
import { sleep } from "./fake-api.js";

// Cache the promises so `use()` sees the same one on every render.
const cache = new Map<string, Promise<string[]>>();
function loadOrders(status: string): Promise<string[]> {
  let promise = cache.get(status);
  if (promise === undefined) {
    promise = sleep(1200).then(() => [1, 2, 3].map((n) => `${status} order #${n}0${n}`));
    cache.set(status, promise);
  }
  return promise;
}

function Orders({ status }: { status: string }) {
  const orders = use(loadOrders(status));
  return (
    <ul>
      {orders.map((order) => (
        <li key={order}>{order}</li>
      ))}
    </ul>
  );
}

const statuses = ["Open", "Shipped", "Returned"];
const tabs = ["Summary", ...statuses];

// Panels suspend while their data loads. The Suspense boundary sits above Tabs.Root, yet its
// fallback never replaces a loaded panel: selection is a transition, so the old panel stays
// (dimmed through .demo-tabs[data-pending]) and the selected tab shows a spinner.
export function TabsSuspending() {
  const [generation, setGeneration] = useState(0);
  return (
    <>
      <Suspense key={generation} fallback={<p>Loading orders…</p>}>
        <Tabs.Root className="demo-tabs" defaultValue="Summary">
          <Tabs.List className="demo-tabs-list" aria-label="Orders">
            {tabs.map((status) => (
              <Tabs.Tab key={status} value={status} className="demo-tab">
                {({ pending }) => (
                  <>
                    {status}
                    {pending && <span className="demo-spinner" aria-hidden />}
                  </>
                )}
              </Tabs.Tab>
            ))}
            <Tabs.Indicator className="demo-tabs-indicator" />
          </Tabs.List>
          {/* The first panel needs no data, so the server-rendered HTML is complete. */}
          <Tabs.Panel value="Summary" className="demo-tab-panel">
            <p>Pick a status. Each list takes 1.2 s to load the first time.</p>
          </Tabs.Panel>
          {statuses.map((status) => (
            <Tabs.Panel key={status} value={status} className="demo-tab-panel">
              <Orders status={status} />
            </Tabs.Panel>
          ))}
        </Tabs.Root>
      </Suspense>
      <button
        type="button"
        className="demo-button"
        onClick={() => {
          cache.clear();
          setGeneration((g) => g + 1);
        }}
      >
        Clear the cache and start over
      </button>
    </>
  );
}

"use client";
import { use, useState } from "react";
import { Accordion } from "@funstack/ui/accordion";
import { sleep } from "./fake-api.js";

const cache = new Map<string, Promise<string[]>>();
function loadReplies(thread: string): Promise<string[]> {
  let promise = cache.get(thread);
  if (promise === undefined) {
    promise = sleep(1200).then(() => [`First reply to ${thread}`, `Second reply to ${thread}`]);
    cache.set(thread, promise);
  }
  return promise;
}

function Replies({ thread }: { thread: string }) {
  const replies = use(loadReplies(thread));
  return (
    <ul>
      {replies.map((reply) => (
        <li key={reply}>{reply}</li>
      ))}
    </ul>
  );
}

const threads = ["Release planning", "Bug triage", "Design review"];

// Library mode (controlled, exclusive). The Panel's function child mounts <Replies> only once
// the item is open in committed state. Replies suspend for 1.2 s; because opening is a
// transition, the item stays closed with a spinner on its trigger until the data is ready, then
// opens with its content. No Suspense fallback is ever shown.
export function AccordionThreads() {
  const [open, setOpen] = useState<string | null>(null);
  return (
    <>
      <Accordion.Root
        exclusive
        className="demo-accordion"
        value={open}
        valueChangeAction={(next) => {
          setOpen(next); // sync prefix: a Transition update
        }}
      >
        {threads.map((thread) => (
          <Accordion.Item key={thread} value={thread} className="demo-accordion-item">
            <Accordion.Trigger className="demo-accordion-trigger">
              {({ pending }) => (
                <>
                  <h4>{thread}</h4>
                  {pending && <span className="demo-spinner" aria-hidden />}
                </>
              )}
            </Accordion.Trigger>
            <Accordion.Panel className="demo-accordion-panel">
              {({ open }) => open && <Replies thread={thread} />}
            </Accordion.Panel>
          </Accordion.Item>
        ))}
      </Accordion.Root>
      <output className="demo-readout">
        value: <code>{JSON.stringify(open)}</code>
      </output>
    </>
  );
}