class MatchesWidget extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.isInitialized = false;
    this.resizeObserver = null;
    this.state = {
      currentMatchDate: new Date(),
      visiblePickerMonth: new Date(),
      isDatePickerOpen: false,
      matches: [],
      loading: false,
      error: null,
    };
    this.state.currentMatchDate.setHours(0, 0, 0, 0);
    this.state.visiblePickerMonth = new Date(this.state.currentMatchDate.getFullYear(), this.state.currentMatchDate.getMonth(), 1);

    this.handleDocumentClick = this.handleDocumentClick.bind(this);
    this.handleDocumentKeydown = this.handleDocumentKeydown.bind(this);
  }

  connectedCallback() {
    if (this.isInitialized) {
      return;
    }

    this.isInitialized = true;
    this.renderShell();

    this.appContainerElement = this.shadowRoot.querySelector(".app-container");
    this.matchDateElement = this.shadowRoot.getElementById("match-date");
    this.datePickerElement = this.shadowRoot.getElementById("match-date-picker");
    this.datePickerAnchorElement = this.shadowRoot.querySelector(".matches-date-picker-anchor");
    this.matchesContentElement = this.shadowRoot.getElementById("matches-content");
    this.previousDateButton = this.shadowRoot.querySelector('[data-direction="previous"]');
    this.nextDateButton = this.shadowRoot.querySelector('[data-direction="next"]');

    if (
      !this.appContainerElement ||
      !this.matchDateElement ||
      !this.datePickerElement ||
      !this.datePickerAnchorElement ||
      !this.matchesContentElement
    ) {
      return;
    }

    const browserTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    this.dateFormatter = new Intl.DateTimeFormat(undefined, {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      timeZone: browserTimeZone,
    });
    this.timeFormatter = new Intl.DateTimeFormat(undefined, {
      hour: "numeric",
      minute: "2-digit",
      timeZone: browserTimeZone,
    });
    this.monthFormatter = new Intl.DateTimeFormat(undefined, {
      month: "long",
      year: "numeric",
      timeZone: browserTimeZone,
    });
    this.weekdayFormatter = new Intl.DateTimeFormat(undefined, {
      weekday: "short",
      timeZone: browserTimeZone,
    });

    this.matchDateElement.addEventListener("click", () => {
      this.toggleDatePicker();
    });

    this.datePickerElement.addEventListener("click", (event) => {
      this.handleDatePickerClick(event);
    });

    document.addEventListener("click", this.handleDocumentClick);
    document.addEventListener("keydown", this.handleDocumentKeydown);

    this.matchesContentElement.addEventListener("click", (event) => {
      if (event.target.closest(".match-broadcast-link")) {
        return;
      }

      const matchCard = event.target.closest(".match-card");

      if (!matchCard) {
        return;
      }

      this.toggleMatchCard(matchCard);
    });

    this.matchesContentElement.addEventListener("keydown", (event) => {
      if (event.key !== "Enter" && event.key !== " ") {
        return;
      }

      if (event.target.closest(".match-broadcast-link")) {
        return;
      }

      const matchCard = event.target.closest(".match-card");

      if (!matchCard) {
        return;
      }

      event.preventDefault();
      this.toggleMatchCard(matchCard);
    });

    this.previousDateButton?.addEventListener("click", () => {
      const previousDate = new Date(this.state.currentMatchDate);
      previousDate.setDate(previousDate.getDate() - 1);
      this.setCurrentMatchDate(previousDate);
      this.fetchUpcomingMatches();
    });

    this.nextDateButton?.addEventListener("click", () => {
      const nextDate = new Date(this.state.currentMatchDate);
      nextDate.setDate(nextDate.getDate() + 1);
      this.setCurrentMatchDate(nextDate);
      this.fetchUpcomingMatches();
    });

    if (typeof ResizeObserver !== "undefined") {
      this.resizeObserver = new ResizeObserver(() => {
        this.updateExpandedHeights();
      });

      this.resizeObserver.observe(this.appContainerElement);
    }

    this.renderMatchDate();
    this.renderDatePicker();
    this.renderMatches();
    this.fetchUpcomingMatches();
  }

  disconnectedCallback() {
    this.resizeObserver?.disconnect();
    this.resizeObserver = null;
    document.removeEventListener("click", this.handleDocumentClick);
    document.removeEventListener("keydown", this.handleDocumentKeydown);
  }

  escapeHtml(value = "") {
    return String(value).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
  }

  formatApiDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");

    return `${year}-${month}-${day}T00:00:00Z`;
  }

  getSelectedDayRequestRange() {
    const startDate = new Date(this.state.currentMatchDate);
    startDate.setHours(0, 0, 0, 0);

    const endDate = new Date(startDate);
    endDate.setDate(endDate.getDate() + 1);

    return { startDate, endDate };
  }

  normalizeHexColor(color) {
    if (!color || typeof color !== "string") {
      return null;
    }

    return color.replace(/^0x[0-9a-fA-F]{2}/, "#");
  }

  normalizeBroadcastLink(value) {
    if (typeof value !== "string") {
      return null;
    }

    const trimmedValue = value.trim();

    if (!trimmedValue) {
      return null;
    }

    try {
      const parsedUrl = new URL(trimmedValue);

      if (parsedUrl.protocol !== "http:" && parsedUrl.protocol !== "https:") {
        return null;
      }

      return parsedUrl.toString();
    } catch {
      return null;
    }
  }

  getTeamColorStyle(team) {
    const primaryColor = team?.primary_color_hex || "#d9d9d9";
    const secondaryColor = team?.secondary_color_hex || primaryColor;

    return `background: linear-gradient(to right, ${primaryColor} 50%, ${secondaryColor} 50%);`;
  }

  normalizeMatch(match) {
    console.log("Normalizing match:", match);

    return {
      id: match._id,
      //venueName: match.pitch?.name || match.club_name || "Unknown venue",
      tournamentName: match.tournament_name || "Unknown tournament",
      venueName: match.club_name || "Unknown venue",
      clubLogo: match.club_logo,
      broadcastLink: this.normalizeBroadcastLink(match.broadcast_link),
      startTimeLabel: match.start_time ? this.timeFormatter.format(new Date(match.start_time)) : "TBD",
      scoreOne: match.score_one,
      scoreTwo: match.score_two,
      teamOne: {
        name: match.team_one?.name || "Team One",
        primary_color_hex: this.normalizeHexColor(match.team_one?.primary_color),
        secondary_color_hex: this.normalizeHexColor(match.team_one?.secondary_color),
        players: match.team_one?.players || [],
      },
      teamTwo: {
        name: match.team_two?.name || "Team Two",
        primary_color_hex: this.normalizeHexColor(match.team_two?.primary_color),
        secondary_color_hex: this.normalizeHexColor(match.team_two?.secondary_color),
        players: match.team_two?.players || [],
      },
    };
  }

  renderPlayerList(players = []) {
    if (!players.length) {
      return `
        <li>
          <span class="player-label">No lineup available</span>
          <span class="player-score">-</span>
        </li>
      `;
    }

    return players
      .map(
        (player) => `
          <li>
            <span class="player-label">${this.escapeHtml(player.name || "Unknown player")}</span>
            <span class="player-score">${this.escapeHtml(player.handicap ?? "-")}</span>
          </li>
        `,
      )
      .join("");
  }

  calculateTeamTotal(players = []) {
    return players.reduce((total, player) => total + (Number(player?.handicap) || 0), 0);
  }

  renderMatchTeamTotal(players = []) {
    if (!players.length) {
      return "";
    }

    const total = this.calculateTeamTotal(players);

    return `
      <div class="team-card__total-row team-card__total-row--match">
        <span class="team-card__total-label">Total</span>
        <span class="team-card__total-value">${this.escapeHtml(total)}</span>
      </div>
    `;
  }

  renderMatchTeamSection(team) {
    return `
      <div class="team-container">
        <div class="mobile-team-header">
          <span class="team-name">${this.escapeHtml(team.name)}</span>
        </div>
        <ul class="team-members">
          ${this.renderPlayerList(team.players)}
        </ul>
        ${this.renderMatchTeamTotal(team.players)}
      </div>
    `;
  }

  renderBroadcastAction(match, showBroadcastColumn) {
    if (!showBroadcastColumn) {
      return "";
    }

    if (!match.broadcastLink) {
      return '<div class="match-broadcast-slot match-broadcast-slot--placeholder" aria-hidden="true"></div>';
    }

    return `
      <div class="match-broadcast-slot">
        <a
          class="match-broadcast-link"
          href="${this.escapeHtml(match.broadcastLink)}"
          target="_blank"
          rel="noopener noreferrer"
        >
          Live Stream
        </a>
      </div>
    `;
  }

  renderBroadcastBalanceSlot(showBroadcastColumn) {
    if (!showBroadcastColumn) {
      return "";
    }

    return '<div class="match-broadcast-balance-slot" aria-hidden="true"></div>';
  }

  renderMatchCard(match, showBroadcastColumn = false) {
    const matchCardClassName = showBroadcastColumn ? "match-card match-card--with-broadcast-column" : "match-card";
    const scoreSummaryClassName = showBroadcastColumn ? "score-summary score-summary--with-broadcast" : "score-summary";

    return `
      <article class="${matchCardClassName}" role="button" tabindex="0" aria-expanded="false" data-match-id="${this.escapeHtml(match.id)}">
        <div class="match-header">
          <div class="tournament-info">
            <div class="match-venue">
              <img class="match-club-logo" src="${this.escapeHtml(match.clubLogo)}" alt="${this.escapeHtml(match.venueName)} logo"/>
              <span>${this.escapeHtml(match.venueName)}</span>
            </div>

            <div class="tournament-info-separator"></div>

            <div class="match-tournament-name">
              <svg xmlns="http://www.w3.org/2000/svg" width="25.09" height="23.833" viewBox="0 0 25.09 23.833">
                <path id="Trophy" d="M19.438,2.5a1.137,1.137,0,0,1,1.039,1.108l.006.146V7.227a3.764,3.764,0,1,1,0,5.6v.966c0,3.642-2.155,6.678-5.019,7.375v2.661H19.23a1.255,1.255,0,0,1,.147,2.5l-.147.007H9.194a1.254,1.254,0,0,1-.146-2.5l.146-.007h3.762V21.164c-2.788-.68-4.9-3.578-5.011-7.093l0-.282v-.967a3.762,3.762,0,1,1,0-5.593V3.754A1.164,1.164,0,0,1,8.985,2.5ZM5.428,8.772a1.254,1.254,0,1,0,1.255,1.254A1.254,1.254,0,0,0,5.428,8.772Zm17.563,0a1.254,1.254,0,1,0,1.255,1.254A1.254,1.254,0,0,0,22.991,8.772Z" transform="translate(-1.666 -2.5)" fill="#f8af00"/>
              </svg>
              <span>${this.escapeHtml(match.tournamentName)}</span>
            </div>

            <div class="tournament-info-separator"></div>

            <span>${this.escapeHtml(match.startTimeLabel)}</span>
          </div>
        </div>

        <section class="score-container">
          <div class="score-content">
            <div class="${scoreSummaryClassName}">
              ${this.renderBroadcastBalanceSlot(showBroadcastColumn)}

              <header class="score-header">
                <div class="team-info team-one">
                  <div class="team-label">
                    <div class="team-color-swatch" style="${this.getTeamColorStyle(match.teamOne)}"></div>
                    <span class="team-name">${this.escapeHtml(match.teamOne.name)}</span>
                  </div>
                  <span class="team-score">${this.escapeHtml(match.scoreOne ?? "-")}</span>
                </div>

                <div class="vs">
                  <span class="vs-label">Vs</span>
                  <span class="match-time">${this.escapeHtml(match.startTimeLabel)}</span>
                </div>

                <div class="team-info team-two">
                  <div class="team-label">
                    <div class="team-color-swatch" style="${this.getTeamColorStyle(match.teamTwo)}"></div>
                    <span class="team-name">${this.escapeHtml(match.teamTwo.name)}</span>
                  </div>
                  <span class="team-score">${this.escapeHtml(match.scoreTwo ?? "-")}</span>
                </div>
              </header>

              ${this.renderBroadcastAction(match, showBroadcastColumn)}
            </div>

            <div class="teams-container">
              ${this.renderMatchTeamSection(match.teamOne)}
              ${this.renderMatchTeamSection(match.teamTwo)}
            </div>
          </div>
        </section>
      </article>
    `;
  }

  renderMatchDate() {
    this.matchDateElement.textContent = this.dateFormatter.format(this.state.currentMatchDate);
    this.matchDateElement.setAttribute("aria-expanded", String(this.state.isDatePickerOpen));
  }

  setCurrentMatchDate(date) {
    const nextDate = new Date(date);
    nextDate.setHours(0, 0, 0, 0);

    this.state.currentMatchDate = nextDate;
    this.state.visiblePickerMonth = new Date(nextDate.getFullYear(), nextDate.getMonth(), 1);

    this.renderMatchDate();
    this.renderDatePicker();
  }

  toggleDatePicker() {
    if (this.state.isDatePickerOpen) {
      this.closeDatePicker();
      return;
    }

    this.openDatePicker();
  }

  openDatePicker() {
    this.state.visiblePickerMonth = new Date(this.state.currentMatchDate.getFullYear(), this.state.currentMatchDate.getMonth(), 1);
    this.state.isDatePickerOpen = true;
    this.renderDatePicker();
  }

  closeDatePicker() {
    if (!this.state.isDatePickerOpen) {
      return;
    }

    this.state.isDatePickerOpen = false;
    this.renderDatePicker();
  }

  handleDocumentClick(event) {
    if (!this.state.isDatePickerOpen) {
      return;
    }

    if (event.composedPath().includes(this.datePickerAnchorElement)) {
      return;
    }

    this.closeDatePicker();
  }

  handleDocumentKeydown(event) {
    if (event.key !== "Escape" || !this.state.isDatePickerOpen) {
      return;
    }

    this.closeDatePicker();
    this.matchDateElement?.focus();
  }

  handleDatePickerClick(event) {
    const actionButton = event.target.closest("[data-date-action]");

    if (actionButton?.dataset.dateAction === "today") {
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      this.setCurrentMatchDate(today);
      this.closeDatePicker();
      this.fetchUpcomingMatches();
      return;
    }

    const monthButton = event.target.closest("[data-calendar-direction]");

    if (monthButton) {
      const monthOffset = monthButton.dataset.calendarDirection === "previous" ? -1 : 1;
      this.state.visiblePickerMonth = new Date(
        this.state.visiblePickerMonth.getFullYear(),
        this.state.visiblePickerMonth.getMonth() + monthOffset,
        1,
      );
      this.renderDatePicker();
      return;
    }

    const dateButton = event.target.closest("[data-date-value]");

    if (!dateButton) {
      return;
    }

    const selectedDate = this.parseDateValue(dateButton.dataset.dateValue);

    if (!selectedDate) {
      return;
    }

    this.setCurrentMatchDate(selectedDate);
    this.closeDatePicker();
    this.fetchUpcomingMatches();
  }

  parseDateValue(dateValue) {
    if (!dateValue) {
      return null;
    }

    const [year, month, day] = dateValue.split("-").map((value) => Number.parseInt(value, 10));

    if (!year || !month || !day) {
      return null;
    }

    return new Date(year, month - 1, day);
  }

  formatDateValue(date) {
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
  }

  isSameDate(firstDate, secondDate) {
    return (
      firstDate.getFullYear() === secondDate.getFullYear() &&
      firstDate.getMonth() === secondDate.getMonth() &&
      firstDate.getDate() === secondDate.getDate()
    );
  }

  getWeekdayLabels() {
    const sunday = new Date(2024, 0, 7);

    return Array.from({ length: 7 }, (_, index) => {
      const weekdayDate = new Date(sunday);
      weekdayDate.setDate(sunday.getDate() + index);
      return this.weekdayFormatter.format(weekdayDate);
    });
  }

  getCalendarDays() {
    const year = this.state.visiblePickerMonth.getFullYear();
    const month = this.state.visiblePickerMonth.getMonth();
    const firstDayOfMonth = new Date(year, month, 1);
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const leadingEmptyDays = firstDayOfMonth.getDay();
    const calendarDays = [];

    for (let index = 0; index < leadingEmptyDays; index += 1) {
      calendarDays.push(null);
    }

    for (let day = 1; day <= daysInMonth; day += 1) {
      calendarDays.push(new Date(year, month, day));
    }

    while (calendarDays.length % 7 !== 0) {
      calendarDays.push(null);
    }

    return calendarDays;
  }

  renderDatePickerDay(date) {
    if (!date) {
      return '<span class="date-picker-day-placeholder" aria-hidden="true"></span>';
    }

    const today = new Date();
    today.setHours(0, 0, 0, 0);

    const isSelected = this.isSameDate(date, this.state.currentMatchDate);
    const isToday = this.isSameDate(date, today);
    const classNames = ["date-picker-day-button"];

    if (isSelected) {
      classNames.push("is-selected");
    }

    if (isToday) {
      classNames.push("is-today");
    }

    return `
      <button
        class="${classNames.join(" ")}"
        type="button"
        data-date-value="${this.formatDateValue(date)}"
        aria-pressed="${String(isSelected)}"
      >
        ${date.getDate()}
      </button>
    `;
  }

  renderDatePicker() {
    if (!this.datePickerElement) {
      return;
    }

    this.matchDateElement?.setAttribute("aria-expanded", String(this.state.isDatePickerOpen));

    if (!this.state.isDatePickerOpen) {
      this.datePickerElement.hidden = true;
      this.datePickerElement.innerHTML = "";
      return;
    }

    const weekdayLabels = this.getWeekdayLabels();
    const calendarDays = this.getCalendarDays();

    this.datePickerElement.hidden = false;
    this.datePickerElement.innerHTML = `
      <div class="matches-date-picker-header">
        <button class="date-navigation-button date-picker-month-button" type="button" data-calendar-direction="previous" aria-label="Previous month">
          <svg class="date-navigation-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M15 18l-6-6 6-6" stroke="#2f9e44" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </button>
        <span class="matches-date-picker-month">${this.escapeHtml(this.monthFormatter.format(this.state.visiblePickerMonth))}</span>
        <button class="date-navigation-button date-picker-month-button" type="button" data-calendar-direction="next" aria-label="Next month">
          <svg class="date-navigation-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M9 6l6 6-6 6" stroke="#2f9e44" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </button>
      </div>
      <div class="matches-date-picker-weekdays">
        ${weekdayLabels.map((label) => `<span class="matches-date-picker-weekday">${this.escapeHtml(label)}</span>`).join("")}
      </div>
      <div class="matches-date-picker-grid">
        ${calendarDays.map((date) => this.renderDatePickerDay(date)).join("")}
      </div>
      <div class="matches-date-picker-actions">
        <button class="matches-date-picker-today-button" type="button" data-date-action="today">Today</button>
      </div>
    `;
  }

  renderMatches() {
    if (this.state.loading) {
      this.matchesContentElement.innerHTML = '<p class="matches-message">Loading matches...</p>';
      return;
    }

    if (this.state.error) {
      this.matchesContentElement.innerHTML = `<p class="matches-message matches-message--error">${this.escapeHtml(this.state.error)}</p>`;
      return;
    }

    if (!this.state.matches.length) {
      this.matchesContentElement.innerHTML = '<p class="matches-message">No matches scheduled for this date.</p>';
      return;
    }

    const showBroadcastColumn = this.state.matches.some((match) => Boolean(match.broadcastLink));

    this.matchesContentElement.innerHTML = this.state.matches.map((match) => this.renderMatchCard(match, showBroadcastColumn)).join("");
  }

  isMatchOnSelectedDay(match) {
    if (!match?.start_time) {
      return false;
    }

    const matchStartDate = new Date(match.start_time);

    if (Number.isNaN(matchStartDate.getTime())) {
      return false;
    }

    return this.isSameDate(matchStartDate, this.state.currentMatchDate);
  }

  async fetchUpcomingMatches() {
    const { startDate, endDate } = this.getSelectedDayRequestRange();

    const requestUrl = new URL("https://api.lineuppolo.com/api/v2/widgetUpcomingMatches");
    requestUrl.searchParams.set("start_date", this.formatApiDate(startDate));
    requestUrl.searchParams.set("end_date", this.formatApiDate(endDate));

    this.state.loading = true;
    this.state.error = null;
    this.renderMatches();

    try {
      const response = await fetch(requestUrl);

      if (!response.ok) {
        throw new Error(`Request failed with status ${response.status}`);
      }

      const data = await response.json();
      console.log("Upcoming matches response:", data);

      const matches = data?.result?.result || [];
      this.state.matches = matches.filter((match) => this.isMatchOnSelectedDay(match)).map((match) => this.normalizeMatch(match));
    } catch (error) {
      console.error("Failed to fetch upcoming matches:", error);
      this.state.matches = [];
      this.state.error = "Unable to load matches right now.";
    } finally {
      this.state.loading = false;
      this.renderMatches();
    }
  }

  toggleMatchCard(matchCard) {
    const teamsContainer = matchCard?.querySelector(".teams-container");

    if (!teamsContainer) {
      return;
    }

    const isExpanded = !teamsContainer.classList.contains("is-expanded");

    if (isExpanded) {
      teamsContainer.classList.add("is-expanded");
      teamsContainer.style.maxHeight = `${teamsContainer.scrollHeight}px`;
    } else {
      teamsContainer.style.maxHeight = "0px";
      teamsContainer.classList.remove("is-expanded");
    }

    matchCard.setAttribute("aria-expanded", String(isExpanded));
  }

  updateExpandedHeights() {
    const expandedContainers = this.matchesContentElement.querySelectorAll(".teams-container.is-expanded");

    expandedContainers.forEach((teamsContainer) => {
      teamsContainer.style.maxHeight = `${teamsContainer.scrollHeight}px`;
    });
  }

  renderShell() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          font-family: Arial, sans-serif;
        }

        *, *::before, *::after {
          box-sizing: border-box;
        }

        .app-container {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          container-type: inline-size;
          container-name: widget;
          border-radius: 10px;
          background: #ffffff;
        }

        .app-container p,
        .app-container ul {
          margin: 0;
        }

        .matches-header {
          color: #172626;
          padding: 12px;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 12px;
          position: sticky;
          top: 0;
          background-color: #ffffff;
          z-index: 1;
        }

        .matches-header h1 {
          font-size: 1rem;
          font-weight: normal;
          margin: 0;
        }

        .matches-header .view-all-tournaments-link {
          font-size: 1rem;
          color: #2c9949;
          border: 2px solid #2c9949;
          border-radius: 30px;
          padding: 8px 16px;
          text-decoration: none;
          transition: all 0.3s ease;
          display: block;
          text-align: center;
        }

        .matches-header .left-section {
          justify-content: flex-start;
        }

        .matches-header .center-section {
          justify-content: center;
        }

        .matches-header .right-section {
          justify-content: flex-end;
        }

        .matches-header .matches-date-container {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .matches-header .matches-date-container .matches-date-picker-anchor {
          position: relative;
          display: flex;
          justify-content: center;
        }

        .matches-header .matches-date-container .matches-date {
          font-size: 24px;
          width: 150px;
          text-align: center;
          border: 0;
          background: transparent;
          color: #172626;
          padding: 0;
          cursor: pointer;
          font-family: inherit;
        }

        .matches-header .matches-date-container .matches-date:hover {
          color: #2c9949;
        }

        .matches-header .matches-date-container .matches-date:focus-visible {
          outline: 1px solid #2c9949;
          outline-offset: 4px;
          border-radius: 8px;
        }

        .matches-header .matches-date-container .date-navigation-button {
          border: 2px solid #2c9949;
          border-radius: 100%;
          width: 34px;
          height: 34px;
          background-color: transparent;
          color: #2c9949;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          transition: all 0.3s ease;
          padding: 0;
        }

        .matches-header .matches-date-container .date-navigation-button svg path {
          stroke: currentColor;
        }

        .matches-header .matches-date-container .date-navigation-icon {
          width: 20px;
          height: 20px;
          display: block;
        }

        .matches-header .matches-date-container .date-navigation-button:hover {
          background-color: #2c9949;
          color: white;
        }

        .matches-header .matches-date-container .matches-date-picker {
          position: absolute;
          top: calc(100% + 12px);
          left: 50%;
          transform: translateX(-50%);
          width: min(320px, calc(100vw - 32px));
          background: #ffffff;
          border: 1px solid #e4e9de;
          border-radius: 16px;
          box-shadow: 0 12px 30px rgba(23, 38, 38, 0.14);
          padding: 16px;
          z-index: 4;
        }

        .matches-header .matches-date-container .matches-date-picker[hidden] {
          display: none;
        }

        .matches-header .matches-date-container .matches-date-picker-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          margin-bottom: 12px;
        }

        .matches-header .matches-date-container .matches-date-picker-month {
          font-weight: bold;
          color: #172626;
          text-align: center;
        }

        .matches-header .matches-date-container .matches-date-picker-weekdays,
        .matches-header .matches-date-container .matches-date-picker-grid {
          display: grid;
          grid-template-columns: repeat(7, minmax(0, 1fr));
          gap: 8px;
        }

        .matches-header .matches-date-container .matches-date-picker-weekdays {
          margin-bottom: 8px;
        }

        .matches-header .matches-date-container .matches-date-picker-weekday {
          color: #7e838e;
          font-size: 12px;
          text-align: center;
          font-weight: bold;
        }

        .matches-header .matches-date-container .date-picker-day-button,
        .matches-header .matches-date-container .date-picker-day-placeholder {
          width: 36px;
          height: 36px;
          margin: 0 auto;
        }

        .matches-header .matches-date-container .date-picker-day-placeholder {
          display: block;
        }

        .matches-header .matches-date-container .date-picker-day-button {
          border: 0;
          border-radius: 50%;
          background: transparent;
          color: #172626;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
          padding: 0;
        }

        .matches-header .matches-date-container .date-picker-day-button:hover {
          background-color: #e5f4e9;
          color: #2c9949;
        }

        .matches-header .matches-date-container .date-picker-day-button:focus-visible {
          outline: none;
          box-shadow: 0 0 0 3px rgba(44, 153, 73, 0.18);
        }

        .matches-header .matches-date-container .date-picker-day-button.is-selected {
          background-color: #2c9949;
          color: #ffffff;
        }

        .matches-header .matches-date-container .date-picker-day-button.is-today {
          border: 1px solid #2c9949;
        }

        .matches-header .matches-date-container .matches-date-picker-actions {
          display: flex;
          justify-content: center;
          margin-top: 16px;
        }

        .matches-header .matches-date-container .matches-date-picker-today-button {
          border: 2px solid #2c9949;
          border-radius: 999px;
          padding: 8px 18px;
          background: #ffffff;
          color: #2c9949;
          font: inherit;
          cursor: pointer;
          transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        }

        .matches-header .matches-date-container .matches-date-picker-today-button:hover {
          background-color: #2c9949;
          color: #ffffff;
        }

        .matches-header .matches-date-container .matches-date-picker-today-button:focus-visible {
          outline: none;
          box-shadow: 0 0 0 3px rgba(44, 153, 73, 0.18);
        }

        .matches-header .view-all-tournaments-link:hover {
          background-color: #2c9949;
          color: white;
        }

        @container widget (min-width: 768px) {
          .matches-header {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 16px;
            padding: 24px;
          }

          .matches-header h1 {
            font-weight: bold;
            font-size: 2rem;
          }

          .matches-header-section {
            flex: 1;
            display: flex;
            align-items: center;
          }
        }

        .matches-content {
          padding: 20px;
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 20px;
          overflow: auto;
        }

        .matches-message {
          margin: auto 0;
          text-align: center;
          color: #5f6b7a;
          font-size: 16px;
        }

        .matches-message--error {
          color: #c92a2a;
        }

        .match-card {
          background: #ffffff;
          box-shadow: 0px 0px 4px #0000001c;
          border-radius: 20px;
          display: flex;
          flex-direction: column;
          cursor: pointer;
          user-select: none;
        }

        .match-card:focus-visible {
          outline: 1px solid #2c9949;
          outline-offset: 2px;
        }

        .match-card .match-header .tournament-info {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: 20px;
          width: auto;
          color: #7e838e;
        }

        .match-card .match-header .tournament-info .match-venue {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .match-card .match-header .tournament-info .match-venue .match-club-logo {
          width: 30px;
          height: 30px;
          object-fit: contain;
        }

        .match-card .match-header .tournament-info .match-tournament-name {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .match-card .match-header .tournament-info-separator {
          display: none;
        }

        @container widget (min-width: 768px) {
          .match-card .match-header .tournament-info {
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 20px;
          }

          .match-card .match-header .tournament-info-separator {
            width: 6px;
            height: 6px;
            border-radius: 100%;
            background-color: #7e838e;
            display: block;
          }
        }

        .match-card .score-container {
          padding: 0;
        }

        .match-card .score-container .score-content {
          background-color: #f7f7f7;
          border-radius: 14px;
          margin: 0 20px 20px 20px;
          padding: 20px;
        }

        .match-card .score-container .score-content .score-summary {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .match-card .score-container .score-content .score-header {
          display: flex;
          flex-direction: column;
          gap: 8px;
          width: 100%;
        }

        .match-card .score-container .score-content .score-summary .match-broadcast-slot {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          min-height: 44px;
        }

        .match-card .score-container .score-content .score-summary .match-broadcast-balance-slot {
          display: none;
        }

        .match-card .score-container .score-content .score-summary .match-broadcast-slot--placeholder {
          visibility: hidden;
          pointer-events: none;
        }

        .match-card .score-container .score-content .score-summary .match-broadcast-link {
          min-width: 140px;
          padding: 8px 16px;
          border: 2px solid #34a853;
          border-radius: 999px;
          color: #34a853;
          font-size: 1rem;
          text-decoration: none;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          white-space: nowrap;
          transition:
            background-color 0.2s ease,
            color 0.2s ease,
            border-color 0.2s ease;
        }

        .match-card .score-container .score-content .score-summary .match-broadcast-link:hover {
          background-color: #34a853;
          color: #ffffff;
        }

        .match-card .score-container .score-content .score-summary .match-broadcast-link:focus-visible {
          outline: none;
          box-shadow: 0 0 0 4px rgba(52, 168, 83, 0.18);
        }

        .match-card .score-container .score-content .score-header .team-info {
          display: flex;
          align-items: center;
          gap: 14px;
          flex: 1;
        }

        .match-card .score-container .score-content .score-header .team-info .team-label {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 8px;
        }

        .match-card .score-container .score-content .score-header .team-info .team-score {
          margin-left: auto;
          font-weight: bold;
        }

        .match-card .score-container .score-content .score-header .vs {
          display: none;
        }

        .match-card .score-container .score-content .score-header .vs .vs-label {
          color: #7e838e;
          font-size: 16px;
        }

        @container widget (min-width: 768px) {
          .match-card.match-card--with-broadcast-column .match-header .tournament-info {
            padding-left: 20px;
            padding-right: 20px;
          }

          .match-card .score-container .score-content .score-summary--with-broadcast .match-broadcast-balance-slot {
            display: none;
          }

          .match-card .score-container .score-content .score-header {
            flex-direction: row;
            gap: 30px;
            justify-content: center;
            margin-left: auto;
            margin-right: auto;
          }

          .match-card .score-container .score-content .score-summary--with-broadcast .score-header {
            min-width: 0;
          }

          .match-card .score-container .score-content .score-summary--with-broadcast .match-broadcast-slot {
            width: 100%;
            justify-content: center;
          }

          .match-card .score-container .score-content .score-summary--with-broadcast .match-broadcast-link {
            width: auto;
          }

          .match-card .score-container .score-content .score-header .team-info {
            gap: 20px;
          }

          .match-card .score-container .score-content .score-header .team-info .team-score {
            margin-left: 0;
            font-size: 2rem;
          }

          .match-card .score-container .score-content .score-header .team-one {
            justify-content: flex-end;
          }

          .match-card .score-container .score-content .score-header .team-one .team-label {
            flex-direction: row-reverse;
          }

          .match-card .score-container .score-content .score-header .team-two {
            flex-direction: row-reverse;
            justify-content: flex-end;
          }
        }

        @container widget (min-width: 1080px) {
          .match-card.match-card--with-broadcast-column .match-header .tournament-info {
            padding-left: 180px;
            padding-right: 180px;
          }

          .match-card .score-container .score-content .score-summary--with-broadcast {
            display: grid;
            grid-template-columns: 160px minmax(0, 1fr) 160px;
            align-items: center;
            gap: 20px;
          }

          .match-card .score-container .score-content .score-summary--with-broadcast .match-broadcast-balance-slot {
            display: block;
            width: 160px;
            visibility: hidden;
          }

          .match-card .score-container .score-content .score-summary--with-broadcast .score-header {
            grid-column: 2;
          }

          .match-card .score-container .score-content .score-summary--with-broadcast .match-broadcast-slot {
            width: 160px;
            grid-column: 3;
          }

          .match-card .score-container .score-content .score-summary--with-broadcast .match-broadcast-link {
            width: 100%;
          }
        }

        .match-card .score-container .teams-container {
          max-height: 0;
          overflow: hidden;
          transition:
            max-height 0.3s ease,
            margin-top 0.3s ease;
        }

        .match-card .score-container .teams-container.is-expanded {
          margin-top: 12px;
        }

        .match-card .score-header .team-color-swatch {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: 1px solid #d9d9d9;
          flex-shrink: 0;
        }

        .match-card .score-header .team-name {
          font-size: 16px;
          color: #172626;
          font-weight: bold;
        }

        .match-card .score-header .match-time {
          font-size: 16px;
          border: 2px solid #0dabff;
          background-color: #0dabff33;
          color: #0dabff;
          padding: 4px 16px;
          border-radius: 16px;
        }

        @container widget (min-width: 768px) {
          .match-card .score-header {
            justify-content: center;
          }
        }

        @container widget (min-width: 768px) {
          .match-card .score-container .score-content .score-header .vs {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
          }
        }

        .teams-container {
          display: flex;
          flex-direction: column;
          gap: 20px;
        }

        .teams-container .team-container {
          flex: 1;
          display: flex;
          flex-direction: column;
        }

        .teams-container .team-container .mobile-team-header {
          font-weight: bold;
          padding-top: 24px;
          text-align: center;
        }

        .teams-container .team-container .team-members {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex: 1;
          flex-direction: column;
          gap: 10px;
          padding-top: 10px;
        }

        .teams-container .team-container .team-members li {
          background-color: white;
          color: #172626;
          padding: 10px;
          margin: 2px;
          border-radius: 20px;
          border: 1px solid #f0f0f0;
          box-shadow: 0px 0px 4px #0000001c;
          font-size: 16px;
          display: flex;
          align-items: center;
        }

        .teams-container .team-container .team-members li .player-label {
          flex: 1;
        }

        .teams-container .team-container .team-members li .player-score {
          color: #2c9949;
          font-size: 14px;
          background-color: rgb(229, 244, 233);
          width: 30px;
          height: 30px;
          border-radius: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .teams-container .team-container .team-card__total-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          min-height: 48px;
          padding: 0 10px 0 14px;
          border-radius: 999px;
          background: #32a047;
          color: #ffffff;
        }

        .teams-container .team-container .team-card__total-row--match {
          margin-top: 10px;
        }

        .teams-container .team-container .team-card__total-label {
          font-size: 1rem;
          text-transform: uppercase;
        }

        .teams-container .team-container .team-card__total-value {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.12);
          font-size: 0.95rem;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          flex: 0 0 32px;
        }

        @container widget (min-width: 768px) {
          .teams-container {
            flex-direction: row;
          }

          .teams-container .team-container .team-members {
            padding-top: 20px;
          }

          .teams-container .team-container .mobile-team-header {
            display: none;
          }
        }

        @supports not (container-type: inline-size) {
          @media (min-width: 768px) {
            .matches-header {
              display: flex;
              flex-direction: row;
              align-items: center;
              gap: 16px;
              padding: 24px;
            }

            .matches-header h1 {
              font-weight: bold;
              font-size: 2rem;
            }

            .matches-header-section {
              flex: 1;
              display: flex;
              align-items: center;
            }

            .match-card .match-header .tournament-info {
              flex-direction: row;
              justify-content: center;
              align-items: center;
              gap: 20px;
            }

            .match-card .match-header .tournament-info-separator {
              width: 6px;
              height: 6px;
              border-radius: 100%;
              background-color: #7e838e;
              display: block;
            }

            .match-card.match-card--with-broadcast-column .match-header .tournament-info {
              padding-left: 20px;
              padding-right: 20px;
            }

            .match-card .score-container .score-content .score-summary--with-broadcast .match-broadcast-balance-slot {
              display: none;
            }

            .match-card .score-container .score-content .score-header {
              flex-direction: row;
              gap: 30px;
              justify-content: center;
              margin-left: auto;
              margin-right: auto;
            }

            .match-card .score-container .score-content .score-summary--with-broadcast .score-header {
              min-width: 0;
            }

            .match-card .score-container .score-content .score-summary--with-broadcast .match-broadcast-slot {
              width: 100%;
              justify-content: center;
            }

            .match-card .score-container .score-content .score-summary--with-broadcast .match-broadcast-link {
              width: auto;
            }

            .match-card .score-container .score-content .score-header .team-info {
              gap: 20px;
            }

            .match-card .score-container .score-content .score-header .team-info .team-score {
              margin-left: 0;
              font-size: 2rem;
            }

            .match-card .score-container .score-content .score-header .team-one {
              justify-content: flex-end;
            }

            .match-card .score-container .score-content .score-header .team-one .team-label {
              flex-direction: row-reverse;
            }

            .match-card .score-container .score-content .score-header .team-two {
              flex-direction: row-reverse;
              justify-content: flex-end;
            }

            .match-card .score-header {
              justify-content: center;
            }

            .match-card .score-container .score-content .score-header .vs {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 10px;
            }

            .teams-container {
              flex-direction: row;
            }

            .teams-container .team-container .team-members {
              padding-top: 20px;
            }

            .teams-container .team-container .mobile-team-header {
              display: none;
            }
          }

          @media (min-width: 1080px) {
            .match-card.match-card--with-broadcast-column .match-header .tournament-info {
              padding-left: 180px;
              padding-right: 180px;
            }

            .match-card .score-container .score-content .score-summary--with-broadcast {
              display: grid;
              grid-template-columns: 160px minmax(0, 1fr) 160px;
              align-items: center;
              gap: 20px;
            }

            .match-card .score-container .score-content .score-summary--with-broadcast .match-broadcast-balance-slot {
              display: block;
              width: 160px;
              visibility: hidden;
            }

            .match-card .score-container .score-content .score-summary--with-broadcast .score-header {
              grid-column: 2;
            }

            .match-card .score-container .score-content .score-summary--with-broadcast .match-broadcast-slot {
              width: 160px;
              grid-column: 3;
            }

            .match-card .score-container .score-content .score-summary--with-broadcast .match-broadcast-link {
              width: 100%;
            }
          }
        }
      </style>

      <section class="app-container">
        <header class="matches-header">
          <div class="matches-header-section left-section">
            <h1>Matches</h1>
          </div>
          <div class="matches-header-section center-section">
            <div class="matches-date-container">
              <button class="date-navigation-button" data-direction="previous" type="button" aria-label="Previous day">
                <svg class="date-navigation-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                  <path d="M15 18l-6-6 6-6" stroke="#2f9e44" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
                </svg>

              </button>
              <div class="matches-date-picker-anchor">
                <button id="match-date" class="matches-date" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="match-date-picker"></button>
                <div id="match-date-picker" class="matches-date-picker" role="dialog" aria-label="Choose match date" hidden></div>
              </div>
              <button class="date-navigation-button" data-direction="next" type="button" aria-label="Next day">
                <svg class="date-navigation-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                  <path d="M9 6l6 6-6 6" stroke="#2f9e44" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </button>
            </div>
          </div>
          <div class="matches-header-section right-section">
            <a class="view-all-tournaments-link" href="tournaments">View All Tournaments</a>
          </div>
        </header>
        <section id="matches-content" class="matches-content" aria-live="polite"></section>
      </section>
    `;
  }
}

customElements.define("matches-widget", MatchesWidget);