import type {
  ContentLinkMetricsResult,
  ContentLinkTimeseriesResult,
} from '~/src/lib/songwhipApi/analytics/types';

import { useI18n } from '~/src/lib/i18n';
import { Layout } from '~/src/ui/layouts/layout';
import TimelineHero from '../../TimelineHero';
import { domainToService } from '../utils';

export interface ContentLinkTimelineChartProps {
  isLoading: boolean;
  timeseries: ContentLinkTimeseriesResult | undefined;
  metrics: ContentLinkMetricsResult | undefined;
  period: '28days' | 'allTime';
}

export const ContentLinkTimelineChart = ({
  isLoading,
  timeseries,
  metrics,
  period,
}: ContentLinkTimelineChartProps) => {
  const { t } = useI18n();

  const topReferrers =
    metrics?.byReferrer
      .slice(0, 5)
      .map((r) => domainToService(r.referrer) ?? r.referrer) ?? [];

  const items =
    timeseries?.results.map((item) => ({
      ...item,
      referrers: item.byReferrer.reduce(
        (acc, r) => ({
          ...acc,
          [domainToService(r.referrer) ?? r.referrer]: r.total,
        }),
        {}
      ),
    })) ?? [];

  const total =
    metrics?.byContentLink.reduce((acc, r) => acc + r.total, 0) ?? 0;

  const isSingle = metrics?.byContentLink.length === 1;

  return (
    <Layout width="100%">
      <TimelineHero
        isLoading={isLoading}
        maxWidth="100%"
        minWidth="100%"
        analytics={{
          total,
          items,
          topReferrers,
        }}
        renderDefaultText={() => {
          if (isSingle) {
            return period === '28days'
              ? t('dashboard.visitsToLinkPastDays', { totalDays: 28 })
              : t('dashboard.visitsToLinkAllTime');
          }

          return period === '28days'
            ? t('dashboard.visitsToAllLinksPastDays', { totalDays: 28 })
            : t('dashboard.visitsToAllLinksAllTime');
        }}
      />
    </Layout>
  );
};