import { useDateScope } from '@/components/shell/DateScope';
import { useNavigate } from 'react-router-dom';
import { VStack } from '@astryxdesign/core/VStack';
import { PageHeader } from '@/components/PageHeader';
import { UploadsPanel } from '@/features/uploads/UploadsPanel';

/**
 * Every spreadsheet on the platform, whoever sent it.
 *
 * No tenant scope, which is the whole difference from the two store versions:
 * the Nearle Admin is who chases the catalogue team when a drop sits unreviewed,
 * and they cannot do that from one merchant at a time. The panel shows the
 * merchant name on each row when it is not given one.
 */
export function UploadsPage() {
  const navigate = useNavigate();
  /*
  No date filter by default, unlike the reporting pages.

  This is a receipt log, and the reason somebody opens it is to find an upload
  from a while ago. Starting at month-to-date hid every receipt older than the
  1st — the list read "Nothing matches" while the tab beside it said there were
  two. The read already returns only the most recent fifty, so the range is a
  narrowing rather than the thing that makes the page tractable.
  */
  const dates = useDateScope();

  return (
    <VStack gap={3}>
      <PageHeader
        title="Uploads"
      />
      {/* A platform operator's upload writes the GLOBAL catalogue, which is a
          different action from a merchant sending their own list — so this goes
          to the page that owns it rather than opening a merchant's drawer. */}
      <UploadsPanel range={dates.range} onClearRange={dates.clear} onUpload={() => navigate('/nearle/catalogue?tab=sheet')} />
    </VStack>
  );
}