import type { SelectedStoryMetrics } from '~/src/store/dashboard/selectors/analytics';
import type { ReactNode } from 'react';

import Box from '~/src/components/Box';
import InfoIcon from '~/src/components/Icon/InfoIcon';
import BackgroundImage from '~/src/components/Image/BackgroundImage';
import HorizontalScroller from '~/src/components/Scroller2/HorizontalScroller';
import Text from '~/src/components/Text';
import Tooltip from '~/src/components/Tooltip';
import useIsLargeScreen from '~/src/hooks/useIsLargeScreen';
import useTheme from '~/src/hooks/useTheme';

export interface MediaItem {
  storyId: string;
  title: string;
}

interface MediaAnalyticsSectionProps<T extends MediaItem> {
  testId: string;
  title: string;
  items: T[];
  storyMetrics: SelectedStoryMetrics;
  totalPageViews: number;
  renderCard: (
    item: T,
    metrics: SelectedStoryMetrics[string],
    totalPageViews: number
  ) => ReactNode;
}

export const MediaAnalyticsSection = <T extends MediaItem>({
  testId,
  title,
  items,
  storyMetrics,
  totalPageViews,
  renderCard,
}: MediaAnalyticsSectionProps<T>) => {
  const theme = useTheme();
  const isLargeScreen = useIsLargeScreen();

  const itemsWithMetrics = items.filter(
    (item) => item.storyId && storyMetrics[item.storyId]
  );

  if (itemsWithMetrics.length === 0) {
    return null;
  }

  return (
    <Box
      testId={testId}
      fullWidth
      style={{ margin: '4rem 0 4rem', overflow: 'visible' }}
    >
      <Text
        isBold
        centered
        size="1.5em"
        color={theme.textColor90}
        margin="0 0 1.5rem"
      >
        {title}
      </Text>
      <Box
        fullWidth
        maxWidth={isLargeScreen ? 900 : undefined}
        style={{ margin: '0 auto', overflow: 'visible', paddingTop: '4rem' }}
      >
        <HorizontalScroller
          overflowStyle={isLargeScreen ? 'outside' : undefined}
          withSnapping
          forceOverflowing={itemsWithMetrics.length > 2}
          gradientColor={theme.background}
          contentStyle={{
            gap: isLargeScreen ? '1.5rem' : '0',
            justifyContent:
              itemsWithMetrics.length === 1 ? 'center' : undefined,
          }}
          renderContent={({ snapItemStyle }) =>
            itemsWithMetrics.map((item, index) => {
              const metrics = storyMetrics[item.storyId];
              return (
                <Box
                  key={item.storyId || index}
                  style={{
                    ...snapItemStyle,
                    scrollSnapAlign: 'start',
                    width: isLargeScreen ? 'calc(50% - 0.75rem)' : '100%',
                    flexShrink: 0,
                    overflow: 'visible',
                  }}
                >
                  {renderCard(item, metrics, totalPageViews)}
                </Box>
              );
            })
          }
        />
      </Box>
    </Box>
  );
};

interface MediaMetricCardProps {
  testId: string;
  imageUrl: string;
  title: string;
  children: ReactNode;
}

export const MediaMetricCard = ({
  testId,
  imageUrl,
  title,
  children,
}: MediaMetricCardProps) => {
  return (
    <Box
      testId={testId}
      positionRelative
      fullWidth
      style={{
        aspectRatio: '3 / 3.5',
        borderRadius: '1rem',
        border: '1px solid #333',
        overflow: 'visible',
      }}
    >
      <BackgroundImage
        coverParent
        zIndex={0}
        src={imageUrl}
        gradient="linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.85) 100%)"
        style={{ overflow: 'hidden', borderRadius: '1rem' }}
      />
      <Box
        positionRelative
        zIndex={1}
        fullHeight
        flexBox
        flexColumn
        spaceBetween
        padding="1.5rem"
        style={{ overflow: 'visible' }}
      >
        <Text
          isBold
          size="1.3rem"
          lineHeight="1.7rem"
          color="#fff"
          withEllipsis
          centered
        >
          {title}
        </Text>
        {children}
        <div />
      </Box>
    </Box>
  );
};

export const MetricRow = ({
  value,
  label,
  tooltip,
}: {
  value: string;
  label: string;
  tooltip?: string;
}) => {
  return (
    <div
      data-testid="metricRow"
      style={{
        textAlign: 'center',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        minWidth: 0,
      }}
    >
      <Text
        isBold
        size="5rem"
        color="#fff"
        lineHeight="1.2"
        style={{ wordBreak: 'break-word', maxWidth: '100%' }}
      >
        {value}
      </Text>
      <Box
        flexBox
        centerContent
        gap="0.4rem"
        style={{
          alignItems: 'center',
          position: 'relative',
          flexWrap: 'wrap',
          maxWidth: '100%',
        }}
      >
        <Text
          size="1.25rem"
          color="rgba(255,255,255,0.7)"
          lineHeight="1.3"
          style={{
            wordBreak: 'break-word',
            textAlign: 'center',
            maxWidth: '100%',
            whiteSpace: 'pre-line',
          }}
        >
          {label}
        </Text>
        {tooltip && (
          <Tooltip content={tooltip}>
            <InfoIcon size="1.2rem" color="rgba(255,255,255,0.5)" />
          </Tooltip>
        )}
      </Box>
    </div>
  );
};