import styled from 'styled-components';
import { fonts } from '@times-components/ts-styleguide';
import {
  backgroundColor,
  borderColor,
  darkBackgroundColor,
  darkTextColor,
  darkBorderColor
} from '../shared/styles';

// Same chart background used by the Momentum component
const chartBackground = '#e5f0ea';
import { TeamColor } from '../shared/types';

/**
 * Outer container — mirrors MomentumWrapper exactly:
 * white background, shared border colour, 4px radius.
 */
export const WPWrapper = styled.div<{ isApp: boolean }>`
  background-color: ${backgroundColor};
  border: 1px solid ${borderColor};
  border-radius: 8px;

  @media (max-width: 767px) {
    border-radius: 0;
  }

  ${({ isApp }) =>
    isApp &&
    `
    @media(prefers-color-scheme: dark) {
      background-color: ${darkBackgroundColor} !important;
      color: ${darkTextColor} !important;
      border-color: ${darkBorderColor} !important;
    }
  `};
`;

export const WPTitle = styled.h3<{ isApp: boolean }>`
  text-align: center;
  font-family: ${fonts.headline};
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  padding: 24px 0;

  @media (max-width: 767px) {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 20px 0 0 0;
  }

  ${({ isApp }) =>
    isApp &&
    `
    @media(prefers-color-scheme: dark) {
      color: ${darkTextColor} !important;
    }
  `};
`;

/**
 * Inner container — mirrors XGWrapper:
 * greenLight background holds the bar track and labels.
 */
export const WPBarContainer = styled.div<{ isApp: boolean }>`
  background-color: ${chartBackground};
  padding: 20px 16px;
  margin: 0 20px 20px 20px;

  @media (min-width: 768px) {
    border-radius: 4px;
    border: 1px solid ${borderColor};
  }

  @media (max-width: 767px) {
    background-color: transparent;
    margin: 0;
  }

  ${({ isApp }) =>
    isApp &&
    `
    @media(prefers-color-scheme: dark) {
      background-color: ${darkBackgroundColor} !important;
    }
  `};
`;

export const WPBarTrack = styled.div`
  display: flex;
  height: 10px;
  gap: 2px;
  border-radius: 4px;
  overflow: hidden;
`;

export const WPBarSegment = styled.div<{
  percent: number;
  teamColor: TeamColor;
  isApp: boolean;
}>`
  width: ${({ percent }) => percent}%;
  height: 100%;
  background-color: ${({ teamColor }) => teamColor.light};
  transition: width 0.4s ease;

  ${({ isApp, teamColor }) =>
    isApp &&
    `
    @media(prefers-color-scheme: dark) {
      background-color: ${teamColor.dark} !important;
    }
  `};
`;

export const WPDrawSegment = styled.div<{ percent: number; isApp: boolean }>`
  width: ${({ percent }) => percent}%;
  height: 100%;
  background-color: #ffffff;
  transition: width 0.4s ease;

  @media (max-width: 767px) {
    background-color: #d9d9d9;
  }
`;

export const WPLoadingWrapper = styled.div`
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;

  @media (max-width: 767px) {
    border-radius: 0;
  }
`;

export const WPSkeletonBarTrack = styled.div`
  height: 10px;
`;

export const WPSkeletonLabelsRow = styled.div`
  margin-top: 8px;
  height: 21px;
`;

export const WPStateOverlay = styled.div`
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
`;

export const WPStateMessage = styled.p<{ isApp: boolean }>`
  margin: 0;
  padding: 20px 16px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #000000;

  ${({ isApp }) =>
    isApp &&
    `
    @media(prefers-color-scheme: dark) {
      color: ${darkTextColor} !important;
    }
  `};
`;

export const WPLabelsRow = styled.div`
  display: flex;
  align-items: flex-start;
  margin-top: 8px;
`;

export const WPLabel = styled.span<{
  side: 'home' | 'draw' | 'away';
  percent: number;
  teamColor?: TeamColor;
  isApp: boolean;
}>`
  width: ${({ percent }) => percent}%;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: ${({ side, teamColor }) => {
    if (side === 'draw') {
      return '#666666';
    }
    return teamColor ? teamColor.light : '#000000';
  }};
  text-align: ${({ side }) => {
    if (side === 'home') {
      return 'left';
    }
    if (side === 'away') {
      return 'right';
    }
    return 'center';
  }};
  overflow: hidden;

  ${({ isApp, side, teamColor }) =>
    isApp &&
    side !== 'draw' &&
    teamColor &&
    `
    @media(prefers-color-scheme: dark) {
      color: ${teamColor.dark};
    }
  `};

  ${({ isApp, side }) =>
    isApp &&
    side === 'draw' &&
    `
    @media(prefers-color-scheme: dark) {
      color: ${darkTextColor};
    }
  `};
`;