import type { VideoMedia } from '~/src/components/ItemPage/sections/VideoSection/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 VideoAnalyticsWidgetProps {
  customPage: SelectedCustomPage;
  storyMetrics: SelectedStoryMetrics;
  totalPageViews: number;
}

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

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

  const videos: VideoMedia[] = videoSection?.props?.items || [];

  return (
    <MediaAnalyticsSection
      testId="videoAnalyticsWidget"
      title={t('videoAnalytics.title')}
      items={videos}
      storyMetrics={storyMetrics}
      totalPageViews={totalPageViews}
      renderCard={(video, metrics, totalPageViews) => (
        <MediaMetricCard
          testId="videoMetricCard"
          imageUrl={video.thumbnailUrl || DEFAULT_IMAGE_URL}
          title={video.title}
        >
          <Box
            style={{
              display: 'grid',
              gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
              gridTemplateRows: 'auto auto auto',
              rowGap: '3rem',
              columnGap: '1rem',
              padding: '0.5rem',
              overflow: 'visible',
            }}
          >
            <MetricRow
              value={`${metrics.totalUniqueFansPlayed}`}
              label={t('videoAnalytics.fansOpenedOf', { totalPageViews })}
            />
            <MetricRow
              value={metrics.averageListenPerFan.toFixed(1)}
              label={t('videoAnalytics.avgViewsPerFan')}
            />
            <MetricRow
              value={formatDuration(metrics.averageDuration)}
              label={t('videoAnalytics.avgDurationLabel', {
                mediaLength: formatDuration(metrics.mediaLength),
              })}
              tooltip={t('videoAnalytics.avgDurationTooltip')}
            />
            <MetricRow
              value={
                metrics.completionRate != null
                  ? `${Math.round(metrics.completionRate)}%`
                  : '-'
              }
              label={t('videoAnalytics.completionRate')}
            />
            <MetricRow
              value={
                metrics.viewedQuarter != null
                  ? `${Math.round(metrics.viewedQuarter)}%`
                  : '-'
              }
              label={t('videoAnalytics.viewedQuarter')}
            />
            <MetricRow
              value={
                metrics.viewedHalf != null
                  ? `${Math.round(metrics.viewedHalf)}%`
                  : '-'
              }
              label={t('videoAnalytics.viewedHalf')}
            />
          </Box>
        </MediaMetricCard>
      )}
    />
  );
};

export default VideoAnalyticsWidget;