import { notFound } from 'next/navigation';

import { MetricDetailShell } from '@/components/website-analytics/metric-detail-shell';

/**
 * Full ranked-list view for one analytics metric (pages / referrers /
 * countries / browsers / os / devices). Reached via the "View all" link
 * on each top-N card. Honours the `range` (and optional `from`/`to`)
 * query params so the detail page mirrors the time window the operator
 * had selected on the parent page.
 */

const VALID_METRICS = ['pages', 'referrers', 'countries', 'browsers', 'os', 'devices'] as const;
type ValidMetric = (typeof VALID_METRICS)[number];

interface PageProps {
  params: Promise<{ portSlug: string; metric: string }>;
  searchParams: Promise<{ range?: string; from?: string; to?: string }>;
}

export default async function Page({ params, searchParams }: PageProps) {
  const { metric } = await params;
  const { range, from, to } = await searchParams;
  if (!VALID_METRICS.includes(metric as ValidMetric)) notFound();
  return (
    <MetricDetailShell
      metric={metric as ValidMetric}
      initialRange={range ?? '30d'}
      initialFrom={from}
      initialTo={to}
    />
  );
}
