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

const chartBackground = '#e5f0ea';
const timelineBarColor = '#C8DFD0';
const yellowCard = '#F3D92B';
const redCard = '#EB001F';

const homeColorLight = '#111111';
const homeColorDark = '#a19c9c';
const awayColorLight = '#0B7D3E';
const awayColorDark = '#0B7D3E';

export const TimelineWrapper = styled.div<{
  isApp: boolean;
  hasBorder?: boolean;
}>`
  position: relative;
  background-color: ${chartBackground};
  color: #111111;
  overflow: hidden;
  min-height: 305px;
  padding-bottom: 24px;

  @media (max-width: ${maxMDBreakpoint}px) {
    background-color: ${backgroundColor};
    border-radius: 0;
    min-height: 270px;
  }

  ${({ hasBorder }) =>
    hasBorder &&
    `
    border: 1px solid ${borderColor};
    border-radius: 8px;

    @media (max-width: ${maxMDBreakpoint}px) {
      border-radius: 0;
    }
  `} ${props =>
    props.isApp &&
    `
    @media(prefers-color-scheme: dark) {
      background-color: ${darkBackgroundColor} !important;
      color: ${darkTextColor} !important;
      ${props.hasBorder ? `border-color: ${darkBorderColor} !important;` : ''}
    }
  `}

  h3 {
    text-align: center;
    font-family: ${fonts.headline};
    font-size: 24px;
    font-weight: 800;
    padding-top: 24px;
    padding-bottom: 8px;
    margin: 0;

    @media (max-width: ${maxMDBreakpoint}px) {
      font-size: 20px;
      padding-top: 16px;
    }

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

export const WidgetContent = styled.div`
  min-height: 168px;
  position: relative;
  overflow: visible;
`;

export const WidgetContainer = styled.div<{
  isApp: boolean;
  hasBorder: boolean;
}>`
  position: relative;
  overflow: visible;

  // ─── Ensure all Opta containers allow vertical overflow for HT text ───
  .Opta,
  .Opta_W,
  .Opta-Cf,
  .Opta-Timeline-Bar,
  .Opta-Timeline,
  .Opta-Events,
  .Opta-Event-Type-Whistle {
    overflow: visible !important;
  }

  ${props =>
    props.isApp &&
    `
    @media(prefers-color-scheme: dark) {
      color: ${darkTextColor} !important;
    }
  `} // ─── Hide Opta chrome title bar ───
  .Opta_W h2,
  .Opta_W .Opta-Title {
    display: none !important;
  }

  // ─── Loading state: prevent layout shift by taking out of flow ───
  .Opta:not(:has(.Opta-Cf)) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: ${chartBackground} !important;

    * {
      background-color: ${chartBackground} !important;
      color: ${homeColorLight} !important;
    }

    @media (max-width: ${maxMDBreakpoint}px) {
      background-color: ${backgroundColor} !important;

      * {
        background-color: ${backgroundColor} !important;
      }
    }

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

        * {
          background-color: ${darkBackgroundColor} !important;
          color: ${darkTextColor} !important;
        }
      }
    `};
  }

  .Opta > .Opta_W {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    background-color: ${chartBackground} !important;

    @media (max-width: ${maxMDBreakpoint}px) {
      background-color: ${backgroundColor} !important;
    }

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

  // ─── Chart area: remove its own bg since parent TimelineWrapper handles it ───
  .Opta-Cf.Opta-block {
    background-color: ${chartBackground};
    padding-left: 20px;

    @media (max-width: ${maxMDBreakpoint}px) {
      padding-left: 16px;
      background-color: ${backgroundColor};
    }

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

  // ─── Hide original left crest column ───
  .Opta-Time:not(.Opta-VarContainer) {
    display: none !important;
  }

  // ─── Timeline bar + events area ───
  // Opta's CSS sets width: calc(100% - 150px) to reserve space for both crest columns.
  // We hide the left column so override to only subtract the right clock column width.
  .Opta-Timeline-Bar {
    position: relative;
    width: calc(100% - 50px) !important;
  }

  // ─── Clock: style only, let Opta handle placement ───
  .Opta-VarContainer {
    display: flex;
    align-items: center;
    width: auto !important;
    padding: 0 8px !important;

    * {
      font-family: ${fonts.headline} !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      color: ${homeColorLight} !important;
    }

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

  // ─── Timeline bar color ───
  .Opta-Timeline > div {
    background-color: ${timelineBarColor} !important;

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

  // ─── Live indicator line at the progress edge ───
  .Opta-Timeline > div:first-child {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: -80px;
      bottom: -80px;
      width: 2px;
      background-color: #c3322a;
    }
  }

  // Hide live line before kick-off and when match is finished
  [data-period='PreMatch'] .Opta-Timeline > div:first-child::after,
  [data-period='FullTime'] .Opta-Timeline > div:first-child::after,
  [data-period='PostMatch'] .Opta-Timeline > div:first-child::after {
    display: none;
  }

  // During half time, restyle live line as dashed HT marker
  [data-period='HalfTime'] .Opta-Timeline > div:first-child::after {
    background-color: transparent;
    width: 1px;
    border-left: 1px dashed #9dbfab;

    ${props =>
      props.isApp &&
      `
      @media(prefers-color-scheme: dark) {
        border-left-color: ${darkTextColor};
      }
    `};
  }

  // ─── Injected team name labels (above/below bar) ───
  .timeline-chart-team-label {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 20px 4px 16px;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 600;
    background-color: ${chartBackground};

    @media (max-width: ${maxMDBreakpoint}px) {
      font-size: 12px;
      background-color: ${backgroundColor};
      padding: 4px 0 4px 16px;
    }

    ${props =>
      props.isApp &&
      `
      @media(prefers-color-scheme: dark) {
        background-color: ${darkBackgroundColor};
      }
    `} .timeline-team-swatch {
      width: 6px;
      height: 1em;
      flex-shrink: 0;
    }

    &.timeline-team-home {
      color: ${homeColorLight};

      .timeline-team-swatch {
        background-color: ${homeColorLight};
      }

      ${props =>
        props.isApp &&
        `
        @media(prefers-color-scheme: dark) {
          color: ${homeColorDark};
          .timeline-team-swatch { background-color: ${homeColorDark}; }
        }
      `};
    }

    &.timeline-team-away {
      color: ${awayColorLight};
      padding-bottom: 16px;

      .timeline-team-swatch {
        background-color: ${awayColorLight};
      }

      ${props =>
        props.isApp &&
        `
        @media(prefers-color-scheme: dark) {
          color: ${awayColorDark};
          .timeline-team-swatch { background-color: ${awayColorDark}; }
        }
      `};
    }
  }

  // ─── Goal icons: team-colored ───
  ul.Opta-Events.Opta-Home .Opta-IconGoal {
    color: ${homeColorLight};

    ${props =>
      props.isApp &&
      `
      @media(prefers-color-scheme: dark) {
        color: ${homeColorDark};
      }
    `};
  }

  ul.Opta-Events.Opta-Away .Opta-IconGoal {
    color: ${awayColorLight};

    ${props =>
      props.isApp &&
      `
      @media(prefers-color-scheme: dark) {
        color: ${awayColorDark};
      }
    `};
  }

  // ─── Yellow card icons: rect style ───
  .Opta-IconYellow {
    width: 10px !important;
    height: 12px !important;
    border-radius: 2px !important;
    background-color: ${yellowCard} !important;
    display: inline-block !important;
    color: transparent !important;
    overflow: hidden;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;

    &::before,
    &::after {
      display: none !important;
    }
  }

  // ─── Red card icons ───
  .Opta-IconRed,
  .Opta-IconSecondYellow {
    width: 10px !important;
    height: 12px !important;
    border-radius: 2px !important;
    background-color: ${redCard} !important;
    display: inline-block !important;
    color: transparent !important;
    overflow: hidden;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;

    &::before,
    &::after {
      display: none !important;
    }
  }

  // ─── Substitution icons: away team color ───
  .Opta-IconSubstitution {
    color: ${awayColorLight} !important;

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

  // ─── Group substitution badge ───
  .Opta-EventGroup .Opta-groupcount {
    background-color: ${awayColorLight};
    color: ${backgroundColor};
    border-radius: 50%;
    font-family: Roboto, sans-serif;
    font-size: 10px;
    font-weight: 600;
    min-width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

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

  // ─── FT / Clock ───
  .Opta-Clock {
    font-family: ${fonts.headline} !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: ${homeColorLight} !important;
    background: none !important;

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

  // ─── HT whistle marker: only show when game ends ───
  [data-period='PreMatch'] .Opta-Event-Type-Whistle,
  [data-period='FirstHalf'] .Opta-Event-Type-Whistle,
  [data-period='HalfTime'] .Opta-Event-Type-Whistle,
  [data-period='SecondHalf'] .Opta-Event-Type-Whistle {
    &::before,
    &::after {
      display: none !important;
    }
  }

  // ─── HT whistle marker: dashed vertical line ───
  .Opta-Event-Type-Whistle {
    .Opta-IconWhistle {
      display: none !important;
    }

    &::before {
      content: '';
      position: absolute;
      top: -80px;
      bottom: -80px;
      left: 50%;
      width: 1px;
      border-left: 1px dashed #9dbfab;

      ${props =>
        props.isApp &&
        `
        @media(prefers-color-scheme: dark) {
          border-left-color: ${darkTextColor};
        }
      `};
    }
  }

  // ─── Tooltip styling ───
  .Opta-JS-Tip .Opta-Hidden {
    background-color: ${backgroundColor} !important;
    border: 1px solid ${borderColor} !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    padding: 12px !important;
    font-family: Roboto, sans-serif !important;

    ${props =>
      props.isApp &&
      `
      @media(prefers-color-scheme: dark) {
        background-color: ${darkBackgroundColor} !important;
        border-color: ${darkBorderColor} !important;
        color: ${darkTextColor} !important;
      }
    `} h3 {
      font-family: Roboto, sans-serif;
      font-size: 14px;
      font-weight: 700;
      margin: 0 0 4px 0;
    }

    p {
      font-family: Roboto, sans-serif;
      font-size: 13px;
      font-weight: 400;
      margin: 2px 0;
    }

    .Opta-assist {
      color: ${awayColorLight};

      ${props =>
        props.isApp &&
        `
        @media(prefers-color-scheme: dark) {
          color: ${awayColorDark};
        }
      `};
    }
  }
`;