'use client';

import {VStack} from '@astryxdesign/core/Layout';
import {PageHeader} from '@/shared/components/primitives/PageHeader';
import {ScopeControls} from '@/shared/components/scope/ScopeControls';
import {ActivityTimeline} from '@/features/dashboard/components/ActivityTimeline';
import {useDashboardActivity} from '@/features/dashboard/hooks/useDashboard';
import {useScopeLabel} from '@/features/stores/hooks/useStoreDirectory';

/**
 * The complete event history — where the dashboard's "View all" leads.
 *
 * Not in the sidebar on purpose. It is a drill-down from one panel, the same
 * relationship /stores/[storeId] has to the store roster, and the nav is the
 * four modules the product is organised around. Adding a fifth entry for a log
 * would put an operational archive at the same level as Lyts and Staff, which
 * is the weighting this whole change is correcting.
 *
 * Reads the same resource and the same component the dashboard panel does,
 * uncapped: one feed implementation, two budgets.
 */
export default function ActivityPage() {
  const activity = useDashboardActivity();
  const scopeLabel = useScopeLabel();

  return (
    <VStack gap={5}>
      <PageHeader
        title="Activity"
        description={`Every recorded event across ${scopeLabel}, newest first.`}
        controls={<ScopeControls />}
      />

      <ActivityTimeline
        resource={activity}
        title="All activity"
        subtitle="Redemptions, purchases, attendance, store events and expiries"
      />
    </VStack>
  );
}