'use client';

import {VStack} from '@astryxdesign/core/Layout';
import {PageHeader} from '@/components/primitives/PageHeader';
import {StoreGrid} from '@/features/stores/StoreGrid';
import {useResource} from '@/lib/api/useResource';
import {endpoints} from '@/lib/api/client';
import {
  RANGE_LABELS,
  useWorkspace,
} from '@/components/shell/WorkspaceProvider';
import {ScopeControls} from '@/components/scope/ScopeControls';

/**
 * The store roster.
 *
 * This page deliberately ignores the shared STORE scope — a list of every
 * store is the whole point, and narrowing it to the one already selected would
 * leave a one-card page. The RANGE scope still applies, because the totals on
 * each card have to be measured over some period.
 */
export default function StoresPage() {
  const {range} = useWorkspace();
  const stores = useResource(endpoints.stores({range, storeId: 'all'}));

  return (
    <VStack gap={5}>
      <PageHeader
        title="Store"
        description={`Performance and status for every store in the network, over ${RANGE_LABELS[range].toLowerCase()}.`}
        controls={<ScopeControls hasStore={false} />}
      />
      <StoreGrid resource={stores} />
    </VStack>
  );
}