"use client";

// Demo of `defineAsyncLoad` + MSW.
//
// Without mocks (`pnpm dev`): /api/widgets returns an empty list, so the
// Empty slot renders with a nudge toward `pnpm dev:mocks`. With mocks
// on, MSW intercepts before the route fires and the Success slot
// renders canned data.
//
// Delete this `/demo` subtree once you have your own pages.

import { asyncSource, defineAsyncLoad } from "@raredays/core";

interface Widget {
  id: string;
  name: string;
  inventory: number;
}

interface WidgetsData {
  widgets: Widget[];
  total: number;
}

const Widgets = defineAsyncLoad<WidgetsData>({
  source: asyncSource(async () => {
    const r = await fetch("/api/widgets");
    if (!r.ok) throw new Error(`/api/widgets responded ${r.status}`);
    return (await r.json()) as WidgetsData;
  }),
  Loading: () => <p data-testid="widgets-state">Loading widgets…</p>,
  Empty: ({ retry }) => (
    <div data-testid="widgets-state">
      <p>No widgets yet.</p>
      <p className="mt-1 text-sm text-neutral-600">
        Run <code>pnpm dev:mocks</code> to see canned data, or add real ones via the API route at{" "}
        <code>app/api/widgets/route.ts</code>.
      </p>
      <button
        type="button"
        onClick={retry}
        className="mt-3 rounded border border-neutral-300 px-3 py-1 text-sm"
      >
        Reload
      </button>
    </div>
  ),
  Success: ({ widgets, total }) => (
    <ul data-testid="widgets-state" className="mt-2 space-y-1">
      <li className="text-sm text-neutral-600" data-testid="widgets-total">
        {total} widget{total === 1 ? "" : "s"}
      </li>
      {widgets.map((w) => (
        <li key={w.id} data-testid="widget-row">
          <span className="font-medium">{w.name}</span>
          <span className="ml-2 text-sm text-neutral-600">({w.inventory} in stock)</span>
        </li>
      ))}
    </ul>
  ),
  Failure: ({ error, retry }) => (
    <div data-testid="widgets-state">
      <p className="text-red-700">Failed to load widgets: {error.message}</p>
      <button
        type="button"
        onClick={retry}
        className="mt-3 rounded border border-neutral-300 px-3 py-1 text-sm"
      >
        Retry
      </button>
    </div>
  ),
});

export default function WidgetsDemoPage(): React.ReactElement {
  return (
    <main className="mx-auto max-w-2xl p-8 font-sans">
      <h1 className="text-2xl font-bold">Widgets demo</h1>
      <p className="mt-2 text-sm text-neutral-600">
        <code>defineAsyncLoad</code> against <code>/api/widgets</code>. MSW intercepts in dev when{" "}
        <code>NEXT_PUBLIC_MOCKS=on</code>.
      </p>
      <Widgets />
    </main>
  );
}