import type { StoriesMedia } from '~/src/components/ItemPage/sections/StoriesSection/types';
import type { SelectedStoryMetrics } from '~/src/store/dashboard/selectors/analytics';
import type { SelectedCustomPage } from '~/src/store/types';

import Box from '~/src/components/Box';
import { PageSectionTypes } from '~/src/components/ItemPage/sections/types';
import { DEFAULT_IMAGE_URL } from '~/src/features/media/constants';
import { useI18n } from '~/src/lib/i18n';
import { formatDuration } from '../analyticsWidgetUtils';
import {
  MediaAnalyticsSection,
  MediaMetricCard,
  MetricRow,
} from '../MediaAnalyticsComponents';

interface StoryAnalyticsWidgetProps {
  customPage: SelectedCustomPage;
  storyMetrics: SelectedStoryMetrics;
  totalPageViews: number;
}

const StoryAnalyticsWidget = ({
  customPage,
  storyMetrics,
  totalPageViews,
}: StoryAnalyticsWidgetProps) => {
  const { t } = useI18n('dashboard');

  const storiesSection = customPage.config?.layout?.main?.find(
    (section) => section.component === PageSectionTypes.STORIES
  );

  const stories: StoriesMedia[] = storiesSection?.props?.items || [];

  return (
    <MediaAnalyticsSection
      testId="storyAnalyticsWidget"
      title={t('storyAnalytics.title')}
      items={stories}
      storyMetrics={storyMetrics}
      totalPageViews={totalPageViews}
      renderCard={(story, metrics, totalPageViews) => (
        <MediaMetricCard
          testId="storyMetricCard"
          imageUrl={story.imageUrl || DEFAULT_IMAGE_URL}
          title={story.title}
        >
          <Box
            style={{
              display: 'grid',
              gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
              gridTemplateRows: 'auto auto',
              rowGap: '4rem',
              columnGap: '1rem',
              padding: '0.5rem',
              overflow: 'visible',
            }}
          >
            <MetricRow
              value={`${metrics.totalUniqueFansPlayed}`}
              label={t('storyAnalytics.fansOpenedOf', { totalPageViews })}
            />
            <MetricRow
              value={metrics.averageListenPerFan.toFixed(1)}
              label={t('storyAnalytics.avgListenPerFan')}
            />
            <MetricRow
              value={formatDuration(metrics.averageDuration)}
              label={t('storyAnalytics.avgDuration')}
              tooltip={t('storyAnalytics.avgDurationTooltip')}
            />
            <MetricRow
              value={formatDuration(metrics.mediaLength)}
              label={t('storyAnalytics.mediaLength')}
            />
          </Box>
        </MediaMetricCard>
      )}
    />
  );
};

export default StoryAnalyticsWidget;