'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import type { UmamiMetricRow } from '@/lib/services/umami.service';

interface Props {
  title: string;
  rows: UmamiMetricRow[] | null;
  loading: boolean;
  /** Label substituted when `x` is empty (e.g. direct traffic referrers). */
  defaultLabel?: string;
}

/**
 * Compact "top N" list used for top pages / referrers / countries.
 * Renders each row as label + numeric count, with a thin progress bar
 * scaled to the largest count in the set so the visual density tells
 * the same story at a glance as the numbers.
 */
export function TopList({ title, rows, loading, defaultLabel = '-' }: Props) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">{title}</CardTitle>
      </CardHeader>
      <CardContent>
        {loading ? (
          <div className="space-y-2">
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-5/6" />
            <Skeleton className="h-4 w-4/6" />
            <Skeleton className="h-4 w-3/6" />
          </div>
        ) : !rows || rows.length === 0 ? (
          <div className="py-6 text-center text-sm text-muted-foreground">No data</div>
        ) : (
          <ul className="space-y-1.5">
            {rows.slice(0, 10).map((row, i) => {
              const max = rows[0]?.y ?? 1;
              const pct = (row.y / max) * 100;
              const label = row.x?.trim() || defaultLabel;
              return (
                <li key={`${row.x}-${i}`} className="text-sm">
                  <div className="flex items-baseline justify-between gap-2">
                    <span className="truncate font-medium">{label}</span>
                    <span className="shrink-0 tabular-nums text-muted-foreground">
                      {row.y.toLocaleString()}
                    </span>
                  </div>
                  <div className="mt-0.5 h-1 w-full rounded-full bg-muted">
                    <div
                      className="h-1 rounded-full bg-brand"
                      style={{ width: `${Math.max(2, pct)}%` }}
                      aria-hidden
                    />
                  </div>
                </li>
              );
            })}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}
