import styled from 'styled-components';
import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
import { Container } from '../../shared/shared-styles';

const sportBorder = '#c8dfd0';
const roboto = "'Roboto', sans-serif";
const darkBg = '#121212';
const darkBorder = '#333';

export const PageViewContainer = styled(Container)`
  border-top: none;
`;

export const WidgetContainer = styled.div<{
  isApp?: boolean;
}>`
  background-color: ${colours.functional.white};
  overflow: hidden;

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

  .Opta {
    .Opta_W {
      margin: 0;
      background-color: transparent;

      /* Widget title */
      h2 {
        display: none;
      }

      /* Pill tabs with horizontal scroll */
      .Opta-Cf {
        background-color: transparent !important;
        margin: 0;
        padding: 0;
      }

      .Opta-TabbedContent > li > h3.Opta-Exp {
        display: none;
      }

      ${props =>
        props.isApp &&
        `
        .Opta-js-main,
        .Opta-Tabs {
          @media (prefers-color-scheme: dark) {
            background-color: ${darkBg} !important;
          }
        }
      `}

      .Opta-Tabs {
        position: relative;

        &::after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          width: 40px;
          height: 60px;
          background: linear-gradient(to left, ${
            colours.functional.white
          }, transparent);
          pointer-events: none;
          z-index: 1;
        }
      }

      ${props =>
        props.isApp &&
        `
        .Opta-Tabs::after {
          @media (prefers-color-scheme: dark) {
            background: linear-gradient(to left, ${darkBg}, transparent);
          }
        }
      `}

      .Opta-Nav {
        display: block !important;
        background-color: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid ${colours.functional.keyline} !important;
        padding-bottom: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        &::-webkit-scrollbar {
          display: none;
        }

        > h3 {
          display: none !important;
        }

        > ul {
          display: flex !important;
          justify-content: center !important;
          align-items: center;
          gap: 12px;
          margin: 0 !important;
          padding: 0 !important;
          width: max-content;
          min-width: 100%;
          list-style: none;
          background-color: transparent !important;
          border: 0 !important;
          white-space: nowrap;
          flex-wrap: nowrap;

          li {
            margin: 0 !important;
            padding: 0 !important;
            flex: 0 0 auto;
            background-color: transparent !important;
            border: 0 !important;

            a,
            button,
            span {
              display: block;
              padding: 12px 20px;
              height: auto !important;
              min-height: 0 !important;
              font-family: ${roboto};
              font-weight: 600;
              font-size: 14px;
              line-height: normal !important;
              text-decoration: none;
              color: ${colours.functional.primary};
              background-color: transparent !important;
              border: 1px solid ${sportBorder} !important;
              border-radius: 100px;
              white-space: nowrap;
            }

            &.Opta-On a,
            &.Opta-On button,
            &.Opta-On span,
            &.active a,
            &.active button,
            &.active span {
              border: 2px solid ${colours.functional.black} !important;
              background-color: transparent !important;
            }
          }
        }
      }

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

          > ul li a,
          > ul li button,
          > ul li span {
            @media (prefers-color-scheme: dark) {
              color: ${colours.functional.white} !important;
              border-color: ${darkBorder} !important;
            }
          }

          > ul li.Opta-On a,
          > ul li.Opta-On button,
          > ul li.Opta-On span,
          > ul li.active a,
          > ul li.active button,
          > ul li.active span {
            @media (prefers-color-scheme: dark) {
              border-color: ${colours.functional.white} !important;
            }
          }
        }
      `}

      .Opta-Overlayer,
      .Opta-Overlay {
        display: none !important;
      }

      /* Date grouping headers */
      .Opta-js-main {
        padding: 0;
        background-color: transparent;
        overflow: hidden;

        table {
          display: block;
          width: 100%;
          overflow: hidden;
          border-collapse: collapse;
          border-spacing: 0;

          tbody {
            &:has(> tr > td.Opta-title):not(.Opta-stage-heading):not(.Opta-fixture) {
              display: block;
              width: 100%;
            }

            &.Opta-stage-heading {
              display: table-row-group;
              background-color: transparent !important;

              tr {
                background-color: transparent !important;
              }

              td.Opta-stage-heading-title {
                padding: 12px 12px 8px 12px;
                background-color: transparent !important;
                border-top: 0;
                border-bottom: 0;
                text-align: center;

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

                h4 {
                  display: block !important;
                  margin: 0;
                  width: auto !important;
                  height: auto !important;
                  overflow: visible !important;
                  background: transparent !important;
                  border-bottom: 0 !important;
                  color: ${colours.functional.primary} !important;
                  font-family: 'Times Modern', serif !important;
                  font-size: 24px !important;
                  line-height: 30px !important;
                  font-weight: 800 !important;
                  text-align: center;
                  text-transform: none;

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

                  span {
                    float: none;
                    display: inline-block;
                    padding: 0;
                    font: inherit;
                    color: inherit;
                  }
                }
              }
            }

            &.Opta-fixture {
              display: block;
              background-color: ${colours.functional.white};
              margin-bottom: 12px;
              border: 1px solid #d9d9d9;
              border-radius: 4px;
              overflow: hidden;
              -webkit-tap-highlight-color: transparent;

              tr,
              td {
                background-color: transparent !important;
              }

              &[data-has-fixtures-page-link] {
                cursor: pointer;
              }

              &.Opta-prematch {
                background-color: #ffffff;
                border-color: #d9d9d9;

                td.Opta-Time,
                td.Opta-Time abbr {
                  font-weight: 400;
                }

                &[data-has-fixtures-page-link='true'] {
                  border-color: #007a3f;
                }

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

                  &[data-has-fixtures-page-link='true'] {
                    @media (prefers-color-scheme: dark) {
                      border-color: #e4e4e4 !important;
                    }
                  }
                `}
              }

              &.Opta-result {
                background-color: #e5f3ed;
                border-color: #e4e4e4;

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

              &.Opta-live {
                border: 2px solid #007a3f;

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

              @media (hover: hover) and (pointer: fine) {
                &.Opta-result:hover,
                &.Opta-live:hover,
                &[data-has-fixtures-page-link='true']:hover {
                  background-color: #e4ede8;
                }

                &.fixture-selected:hover,
                &[data-has-fixtures-page-link='true'].fixture-selected:hover {
                  background-color: #016D38;
                }
              }

              &.fixture-selected {
                background-color: #016D38;
                border-color: #016D38;

                td,
                td.Opta-Time,
                td.Opta-Team,
                td.Opta-Score,
                td.Opta-Divider,
                td.Opta-Venue,
                .Opta-venue-segment,
                h3,
                h4,
                span,
                abbr {
                  color: ${colours.functional.white} !important;
                }
              }

              ${props =>
                props.isApp &&
                `
                @media (prefers-color-scheme: dark) {
                  &:not(.Opta-prematch):not(.Opta-result):not(.Opta-live):not(.fixture-selected) {
                    background-color: #121212;
                    border-color: #333;
                  }
                }

                @media (prefers-color-scheme: dark) and (hover: hover) and (pointer: fine) {
                  &.Opta-result:hover,
                  &.Opta-live:hover,
                  &[data-has-fixtures-page-link='true']:hover {
                    background-color: #e4ede8;
                  }

                  &.fixture-selected:hover,
                  &[data-has-fixtures-page-link='true'].fixture-selected:hover {
                    background-color: #016D38;
                  }
                }

                @media (prefers-color-scheme: dark) {
                  &.fixture-selected {
                    background-color: #016D38;
                    border-color: #016D38;
                  }
                }
              `}

            }

            td.Opta-title {
              height: auto;
              padding: 0 16px 12px 0px;
              background-color: transparent;
              border-top: 0;
              border-bottom: 0;

              h3 {
                height: auto;
                margin: 0;
                color: ${colours.functional.brandColour};
                font-family: 'Roboto', sans-serif;
                font-size: 14px;
                line-height: 150%;
                font-weight: 500;
                background-color: transparent;
                border-bottom: 0;

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

                span {
                  float: none;
                  padding: 0;
                  font-size: inherit;
                  font-weight: inherit;
                }
              }

              h4 {
                display: block !important;
                margin: 0;
                width: auto !important;
                height: auto !important;
                overflow: visible !important;
                background: transparent !important;
                border-bottom: 0 !important;
                color: ${colours.functional.primary} !important;
                font-family: 'Roboto', sans-serif !important;
                font-size: 14px !important;
                line-height: 150% !important;
                font-weight: 500 !important;
                text-align: left;
                text-transform: none;

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

                span {
                  float: none;
                  display: inline-block;
                  padding: 0;
                  font: inherit;
                  color: inherit;

                  &:last-child {
                    display: none;
                  }
                }
              }

              &:has(h4):not(:has(h3)) {
                display: block;
                width: 100%;
                padding: 12px 12px 8px 0;
                border: none;
                background-color: transparent;
                text-align: left;
              }
            }

            /* Live match time indicator - red when in progress */
            &.Opta-fixture[data-period='FirstHalf'],
            &.Opta-fixture[data-period='SecondHalf'],
            &.Opta-fixture[data-period='HalfTime'],
            &.Opta-fixture[data-period='ExtraFirstHalf'],
            &.Opta-fixture[data-period='ExtraSecondHalf'],
            &.Opta-fixture[data-period='PenaltyShootout'] {
              td.Opta-Time,
              td.Opta-Time abbr {
                color: #AF1722 !important;
                font-weight: 500;
              }
            }

            /* Match rows - flex to reorder time between teams */
            tr.Opta-Scoreline {
              display: flex !important;
              align-items: center;
              width: 100%;
              max-width: 100%;
              height: auto;
              background-color: transparent !important;
              border-bottom: none;

              td {
                max-width: none !important;
                padding: 12px 0;
                color: ${colours.functional.brandColour} !important;
                font-family: 'Times Modern', serif;
                font-size: 14px;
                line-height: 18px;
                background-color: transparent;

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

                @media (min-width: ${breakpoints.medium}px) {
                  font-size: 16px;
                  line-height: 20px;
                }

                &.Opta-Time {
                  order: 4;
                  width: auto !important;
                  flex-shrink: 0;
                  padding: 12px 4px;
                  font-family: 'Roboto', sans-serif;
                  font-size: 14px;
                  font-weight: 700;
                  text-align: center;

                  @media (min-width: ${breakpoints.medium}px) {
                    padding: 12px 8px;
                    font-size: 16px;
                    line-height: 150%;
                    font-weight: 500;
                  }

                  abbr {
                    font-size: inherit;
                    line-height: inherit;
                    text-decoration: none;
                  }
                }

                &.Opta-Team {
                  flex: 1;
                  min-width: 0;
                  padding-left: 8px;
                  font-family: 'Roboto', sans-serif;
                  font-size: 14px;
                  line-height: 150%;
                  font-weight: 500;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;

                  &.Opta-Home {
                    order: 1;
                    padding-right: 8px;
                    padding-left: 12px;
                    text-align: right;
                  }

                  &.Opta-Away {
                    order: 7;
                    padding-right: 12px;
                    padding-left: 8px;
                    text-align: left;
                  }

                  @media (min-width: ${breakpoints.medium}px) {
                    font-size: 16px;
                    overflow: visible;
                    text-overflow: clip;
                    white-space: normal;

                    &.Opta-Home {
                      padding-right: 12px;
                      padding-left: 20px;
                    }

                    &.Opta-Away {
                      padding-left: 12px;
                      padding-right: 20px;
                    }
                  }
                }

                &.Opta-Score {
                  font-family: 'Roboto', sans-serif;
                  font-size: 14px;
                  font-weight: 700;

                  &.Opta-Home {
                    order: 3;
                    text-align: right !important;
                  }

                  &.Opta-Away {
                    order: 5;
                    text-align: left !important;
                  }

                  span {
                    font-size: inherit;
                    line-height: inherit;
                  }

                  @media (min-width: ${breakpoints.medium}px) {
                    font-size: 16px;
                    line-height: 150%;
                  }
                }

                &.Opta-Crest {
                  width: 18px !important;
                  flex-shrink: 0;

                  @media (min-width: ${breakpoints.medium}px) {
                    width: 24px !important;
                  }

                  &.Opta-Home {
                    order: 2;
                  }

                  &.Opta-Away {
                    order: 6;
                  }

                  img {
                    width: 18px;
                    height: 18px;
                  }

                  .Opta-Image-Holder,
                  .Opta-Image,
                  .Opta-Image-Team {
                    width: 18px !important;
                    height: 18px !important;
                  }

                  .Opta-Image-Team-Small,
                  img.Opta-Image-Team-Small {
                    width: 18px !important;
                    height: 18px !important;
                    max-width: 18px !important;
                    max-height: 18px !important;
                  }

                  @media (min-width: ${breakpoints.medium}px) {
                    img {
                      width: 24px;
                      height: 24px;
                    }

                    .Opta-Image-Holder,
                    .Opta-Image,
                    .Opta-Image-Team {
                      width: 24px !important;
                      height: 24px !important;
                    }

                    .Opta-Image-Team-Small,
                    img.Opta-Image-Team-Small {
                      width: 24px !important;
                      height: 24px !important;
                      max-width: 24px !important;
                      max-height: 24px !important;
                    }
                  }
                }

                &.Opta-Divider {
                  display: none !important;
                }

                &.Opta-Outer:not(.Opta-Time) {
                  display: none !important;
                }
              }

              /* Prematch: show kickoff time, hide scores */
              tbody.Opta-fixture.Opta-prematch & {
                td.Opta-Time {
                  display: block !important;
                }

                td.Opta-Score,
                td.Opta-Divider {
                  display: none !important;
                }
              }

              /* Played/live: hide kickoff time, show centered score (home v away) */
              tbody.Opta-fixture:not(.Opta-prematch) & {
                td.Opta-Time {
                  display: none !important;
                }

                td.Opta-Score {
                  display: block !important;
                }

                td.Opta-Divider {
                  display: block !important;
                  order: 4;
                  width: auto !important;
                  padding: 12px 8px;
                  color: ${colours.functional.primary} !important;
                  font-family: 'Roboto', sans-serif;
                  font-size: 16px;
                  line-height: 150%;
                  font-weight: 500;
                  text-align: center;
                }
              }
            }

            /* Sub-info rows (venue) - display:block removes from table column layout */
            tr.Opta-agg {
              display: block !important;
              background-color: transparent !important;

              ${props =>
                props.isApp &&
                `
                @media (prefers-color-scheme: dark) {
                  border-bottom-color: ${colours.functional.primary};
                }
              `}

              td.Opta-Venue {
                display: block !important;
                padding: 12px 16px 0;
                margin-bottom: 12px;
                color: ${colours.functional.secondary} !important;
                font-family: ${fonts.supporting};
                font-size: 12px;
                line-height: 16px;
                background-color: transparent;
                text-align: center !important;

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

                > span:not(.Opta-venue-segment) {
                  display: none !important;
                }

                .Opta-venue-segment {
                  &:not(:last-child) {
                    margin-right: 16px;
                  }

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

              td:not(.Opta-Venue):not(:has(.Opta-penalties)) {
                display: none !important;
              }

              td:has(.Opta-penalties) {
                display: block !important;
                text-align: center !important;
                padding: 0 16px 12px;
                background-color: transparent;
                border: none !important;
                color: ${colours.functional.secondary} !important;
                font-family: ${fonts.supporting};
                font-size: 12px;
                line-height: 16px;

                .Opta-penalties {
                  font-family: ${fonts.supporting};
                  font-size: 12px;
                  line-height: 16px;
                  color: ${colours.functional.secondary} !important;
                }

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

                    .Opta-penalties {
                      color: #b9b9b9 !important;
                    }
                  }
                `}
              }
            }

            /* Nested match details */
            tr {
              td.Opta-Nest {
                padding: 0;

                .Opta_W {
                  > .Opta-Cf {
                    background-color: transparent;
                    border-bottom: 1px solid #e4e4e4;

                    ${props =>
                      props.isApp &&
                      `
                      @media (prefers-color-scheme: dark) {
                        border-bottom-color: ${colours.functional.primary};
                      }
                    `}

                    .Opta-Events {
                      padding: 8px 0;

                      li {
                        padding: 0 0 6px 0;

                        .Opta-Event-Text {
                          color: ${colours.functional.primary};
                          font-family: ${fonts.supporting};
                          font-size: 13px;
                          line-height: 16px;

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

                          .Opta-Event-Player,
                          .Opta-Event-Time {
                            font-size: inherit;
                            line-height: inherit;
                          }

                          .Opta-Event-Time {
                            color: ${colours.section.sport};
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    /* High Specificity Modifier Match block nested inside .Opta layout architecture */
    & .Opta_W .Opta-js-main table tbody.fixture-selected tr.Opta-agg td .Opta-penalties {
       color: ${colours.functional.white} !important;
    }

    /* Status/info text */
    p {
      margin: 16px 0 0 0 !important;
      padding: 0 0 16px 0 !important;
      color: ${colours.functional.secondary};
      font-family: ${fonts.supporting};
      font-size: 13px;
      line-height: 16px;
      text-align: center;
      background: transparent !important;

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