catalog/ts_web/elements/upl-statuspage-statusmonth.ts

import {
  DeesElement,
  property,
  html,
  customElement,
  type TemplateResult,
  css,
  cssManager,
  unsafeCSS
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import type { IMonthlyUptime } from '../interfaces/index.js';
import * as sharedStyles from '../styles/shared.styles.js';

import './internal/uplinternal-miniheading.js';
import { demoFunc } from './upl-statuspage-statusmonth.demo.js';

declare global {
  interface HTMLElementTagNameMap {
    'upl-statuspage-statusmonth': UplStatuspageStatusmonth;
  }
}

@customElement('upl-statuspage-statusmonth')
export class UplStatuspageStatusmonth extends DeesElement {
  public static demo = demoFunc;

  @property({ type: Array })
  accessor monthlyData: IMonthlyUptime[] = [];

  @property({ type: String })
  accessor serviceId: string = '';

  @property({ type: String })
  accessor serviceName: string = 'Service';

  @property({ type: Boolean })
  accessor loading: boolean = false;

  @property({ type: Boolean })
  accessor showTooltip: boolean = true;

  @property({ type: Number })
  accessor monthsToShow: number = 5;

  constructor() {
    super();
  }

  public static styles = [
    domtools.elementBasic.staticStyles,
    sharedStyles.commonStyles,
    css`
      :host {
        position: relative;
        display: block;
        background: transparent;
        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
        color: ${sharedStyles.colors.text.primary};
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)};
      }

      .mainbox {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: ${unsafeCSS(sharedStyles.spacing.lg)};
      }

      /* Month card with entrance animation */
      .statusMonth {
        background: ${sharedStyles.colors.background.card};
        padding: ${unsafeCSS(sharedStyles.spacing.lg)};
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
        border: 1px solid ${sharedStyles.colors.border.default};
        position: relative;
        transition: all ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
        display: flex;
        flex-direction: column;
        min-height: 280px;
        box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
        animation: fadeInUp 0.5s ${unsafeCSS(sharedStyles.easings.default)} both;
      }

      .statusMonth:nth-child(1) { animation-delay: 0ms; }
      .statusMonth:nth-child(2) { animation-delay: 100ms; }
      .statusMonth:nth-child(3) { animation-delay: 200ms; }
      .statusMonth:nth-child(4) { animation-delay: 300ms; }
      .statusMonth:nth-child(5) { animation-delay: 400ms; }

      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(16px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .statusMonth:hover {
        border-color: ${sharedStyles.colors.border.muted};
        box-shadow: ${unsafeCSS(sharedStyles.shadows.md)};
        transform: translateY(-2px);
      }

      .month-header {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: ${unsafeCSS(sharedStyles.spacing.md)};
        color: ${sharedStyles.colors.text.primary};
        letter-spacing: 0.04em;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .month-header .current-badge {
        font-size: 9px;
        padding: 2px 6px;
        background: ${sharedStyles.colors.status.operational};
        color: white;
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
        font-weight: 500;
        letter-spacing: 0.02em;
      }

      .days-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-bottom: ${unsafeCSS(sharedStyles.spacing.lg)};
      }

      .days-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
        width: 100%;
      }

      .weekday-label {
        font-size: 9px;
        text-align: center;
        color: ${sharedStyles.colors.text.muted};
        font-weight: 600;
        height: 20px;
        line-height: 20px;
        margin-bottom: ${unsafeCSS(sharedStyles.spacing.xs)};
        text-transform: uppercase;
        letter-spacing: 0.02em;
      }

      /* Calendar day cell */
      .statusDay {
        aspect-ratio: 1;
        border-radius: 4px;
        cursor: pointer;
        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
        position: relative;
        animation: dayFadeIn 0.3s ${unsafeCSS(sharedStyles.easings.default)} both;
        animation-delay: calc(var(--day-index, 0) * 15ms);
      }

      @keyframes dayFadeIn {
        from {
          opacity: 0;
          transform: scale(0.8);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      .statusDay:hover:not(.empty) {
        transform: scale(1.2);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        z-index: 2;
      }

      /* Current day highlight */
      .statusDay.today {
        box-shadow: 0 0 0 2px ${sharedStyles.colors.text.primary};
        z-index: 1;
      }

      .statusDay.today:hover {
        box-shadow: 0 0 0 2px ${sharedStyles.colors.text.primary}, 0 4px 8px rgba(0, 0, 0, 0.15);
      }

      /* Status colors with intensity variations based on uptime */
      .statusDay.operational {
        background: ${sharedStyles.colors.status.operational};
      }

      .statusDay.operational.uptime-high {
        background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
      }

      .statusDay.operational.uptime-mid {
        background: ${cssManager.bdTheme('#4ade80', '#4ade80')};
      }

      .statusDay.degraded {
        background: ${sharedStyles.colors.status.degraded};
      }

      .statusDay.partial_outage {
        background: ${sharedStyles.colors.status.partial};
      }

      .statusDay.major_outage {
        background: ${sharedStyles.colors.status.major};
        animation: dayFadeIn 0.3s ${unsafeCSS(sharedStyles.easings.default)} both,
                   majorOutagePulse 2s ease-in-out infinite;
      }

      @keyframes majorOutagePulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.8; }
      }

      .statusDay.maintenance {
        background: ${sharedStyles.colors.status.maintenance};
      }

      .statusDay.no-data {
        background: ${sharedStyles.colors.background.muted};
        opacity: 0.5;
      }

      .statusDay.empty {
        background: transparent;
        cursor: default;
        pointer-events: none;
        animation: none;
      }

      /* Incident count indicator */
      .incident-count {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 8px;
        font-weight: 700;
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        line-height: 1;
      }

      /* Overall uptime footer */
      .overall-uptime {
        font-size: 12px;
        margin-top: auto;
        padding-top: ${unsafeCSS(sharedStyles.spacing.md)};
        color: ${sharedStyles.colors.text.secondary};
        display: flex;
        flex-direction: column;
        gap: 8px;
        border-top: 1px solid ${sharedStyles.colors.border.default};
      }

      .uptime-stat {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .uptime-value {
        font-weight: 600;
        color: ${sharedStyles.colors.text.primary};
        font-variant-numeric: tabular-nums;
        font-size: 13px;
      }

      .uptime-value.good {
        color: ${sharedStyles.colors.status.operational};
      }

      .uptime-value.warning {
        color: ${sharedStyles.colors.status.degraded};
      }

      .uptime-value.bad {
        color: ${sharedStyles.colors.status.partial};
      }

      /* Uptime bar visualization */
      .uptime-bar {
        height: 4px;
        background: ${sharedStyles.colors.background.muted};
        border-radius: 2px;
        overflow: hidden;
        margin-top: 4px;
      }

      .uptime-bar-fill {
        height: 100%;
        border-radius: 2px;
        transition: width ${unsafeCSS(sharedStyles.durations.slow)} ${unsafeCSS(sharedStyles.easings.default)};
      }

      .uptime-bar-fill.good {
        background: ${sharedStyles.colors.status.operational};
      }

      .uptime-bar-fill.warning {
        background: ${sharedStyles.colors.status.degraded};
      }

      .uptime-bar-fill.bad {
        background: ${sharedStyles.colors.status.partial};
      }

      /* Loading skeleton */
      .loading-skeleton {
        display: flex;
        flex-direction: column;
        gap: ${unsafeCSS(sharedStyles.spacing.sm)};
        height: 100%;
      }

      .skeleton-header {
        height: 20px;
        width: 80px;
        background: ${sharedStyles.colors.background.muted};
        border-radius: 4px;
        animation: shimmer 1.5s infinite;
      }

      .skeleton-grid {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 3px;
      }

      .skeleton-day {
        background: ${sharedStyles.colors.background.muted};
        border-radius: 3px;
        animation: shimmer 1.5s infinite;
        animation-delay: calc(var(--index) * 30ms);
      }

      @keyframes shimmer {
        0% { opacity: 0.5; }
        50% { opacity: 1; }
        100% { opacity: 0.5; }
      }

      /* Tooltip */
      .tooltip {
        position: absolute;
        background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
        color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
        padding: 10px 14px;
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
        font-size: 12px;
        pointer-events: none;
        opacity: 0;
        transition: opacity ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)},
                    transform ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
        z-index: 50;
        white-space: nowrap;
        box-shadow: ${unsafeCSS(sharedStyles.shadows.lg)};
        line-height: 1.5;
        transform: translateX(-50%) translateY(4px);
      }

      .tooltip.visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }

      .tooltip-date {
        font-weight: 600;
        margin-bottom: 6px;
        font-size: 13px;
      }

      .tooltip-stat {
        font-size: 11px;
        opacity: 0.85;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .tooltip-stat + .tooltip-stat {
        margin-top: 2px;
      }

      .tooltip-uptime-bar {
        height: 3px;
        width: 60px;
        background: rgba(128, 128, 128, 0.3);
        border-radius: 2px;
        overflow: hidden;
        margin-top: 8px;
      }

      .tooltip-uptime-fill {
        height: 100%;
        border-radius: 2px;
      }

      .no-data-message {
        grid-column: 1 / -1;
        text-align: center;
        padding: ${unsafeCSS(sharedStyles.spacing['2xl'])};
        color: ${sharedStyles.colors.text.secondary};
        animation: fadeInUp 0.4s ${unsafeCSS(sharedStyles.easings.default)} both;
      }

      @media (max-width: 640px) {
        .container {
          padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
        }

        .mainbox {
          grid-template-columns: 1fr;
          gap: ${unsafeCSS(sharedStyles.spacing.md)};
        }

        .statusMonth {
          padding: ${unsafeCSS(sharedStyles.spacing.md)};
          min-height: 260px;
        }

        .days-grid {
          gap: 3px;
        }

        .statusDay:hover:not(.empty) {
          transform: scale(1.1);
        }

        .loading-skeleton {
          height: 180px;
          padding: ${unsafeCSS(sharedStyles.spacing.md)};
        }
      }
    `
  ]

  public render(): TemplateResult {
    const totalDays = this.monthlyData.reduce((sum, month) => sum + month.days.length, 0);
    
    return html`
      <div class="container">
        <uplinternal-miniheading>${this.serviceName} - Last ${totalDays} Days</uplinternal-miniheading>
        <div class="mainbox">
          ${this.loading ? html`
            ${Array(this.monthsToShow).fill(0).map((_, index) => html`
              <div class="statusMonth">
                <div class="loading-skeleton">
                  <div class="skeleton-header"></div>
                  <div class="days-container">
                    <div class="skeleton-grid">
                      ${Array(42).fill(0).map((_, i) => html`
                        <div class="skeleton-day" style="--index: ${i}"></div>
                      `)}
                    </div>
                  </div>
                  <div style="height: 48px; border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')}; margin-top: auto; padding-top: 16px;"></div>
                </div>
              </div>
            `)}
          ` : this.monthlyData.length === 0 ? html`
            <div class="no-data-message">No uptime data available</div>
          ` : this.monthlyData.map(month => this.renderMonth(month))}
        </div>
        ${this.showTooltip ? html`<div class="tooltip" id="tooltip"></div>` : ''}
      </div>
    `;
  }

  private renderMonth(monthData: IMonthlyUptime): TemplateResult {
    const monthDate = new Date(monthData.month + '-01');
    const monthName = monthDate.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
    const firstDayOfWeek = new Date(monthDate.getFullYear(), monthDate.getMonth(), 1).getDay();
    const now = new Date();
    const isCurrentMonth = monthDate.getMonth() === now.getMonth() && monthDate.getFullYear() === now.getFullYear();
    const uptimeClass = this.getUptimeClass(monthData.overallUptime);

    return html`
      <div class="statusMonth" @mouseleave=${this.hideTooltip}>
        <div class="month-header">
          ${monthName}
          ${isCurrentMonth ? html`<span class="current-badge">Current</span>` : ''}
        </div>
        <div class="days-container">
          <div class="days-grid">
            ${this.renderWeekdayLabels()}
            ${this.renderEmptyDays(firstDayOfWeek)}
            ${monthData.days.map((day, index) => this.renderDay(day, index))}
            ${this.renderTrailingEmptyDays(firstDayOfWeek + monthData.days.length)}
          </div>
        </div>
        <div class="overall-uptime">
          <div class="uptime-stat">
            <span>Uptime</span>
            <span class="uptime-value ${uptimeClass}">${monthData.overallUptime.toFixed(2)}%</span>
          </div>
          <div class="uptime-bar">
            <div class="uptime-bar-fill ${uptimeClass}" style="width: ${monthData.overallUptime}%"></div>
          </div>
          ${monthData.totalIncidents > 0 ? html`
            <div class="uptime-stat">
              <span>Incidents</span>
              <span class="uptime-value">${monthData.totalIncidents}</span>
            </div>
          ` : ''}
        </div>
      </div>
    `;
  }

  private getUptimeClass(uptime: number): string {
    if (uptime >= 99.9) return 'good';
    if (uptime >= 99) return 'warning';
    return 'bad';
  }

  private renderWeekdayLabels(): TemplateResult[] {
    const weekdays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
    return weekdays.map(day => html`<div class="weekday-label">${day}</div>`);
  }

  private renderEmptyDays(count: number): TemplateResult[] {
    return Array(count).fill(0).map(() => html`<div class="statusDay empty"></div>`);
  }
  
  private renderTrailingEmptyDays(totalCells: number): TemplateResult[] {
    const remainder = totalCells % 7;
    const trailingCount = remainder === 0 ? 0 : 7 - remainder;
    return Array(trailingCount).fill(0).map(() => html`<div class="statusDay empty"></div>`);
  }

  private renderDay(day: any, index: number = 0): TemplateResult {
    const status = day.status || 'no-data';
    const date = new Date(day.date);
    const now = new Date();
    const isToday = date.toDateString() === now.toDateString();
    const uptimeIntensity = this.getUptimeIntensity(day.uptime);

    return html`
      <div
        class="statusDay ${status} ${isToday ? 'today' : ''} ${status === 'operational' ? uptimeIntensity : ''}"
        style="--day-index: ${index}"
        @mouseenter=${(e: MouseEvent) => this.showTooltip && this.showDayTooltip(e, day)}
        @click=${() => this.handleDayClick(day)}
      >
        ${(status === 'major_outage' || status === 'partial_outage') && day.incidents > 0 ? html`
          <span class="incident-count">${day.incidents}</span>
        ` : ''}
      </div>
    `;
  }

  private getUptimeIntensity(uptime: number): string {
    if (uptime >= 99.9) return 'uptime-high';
    if (uptime >= 99) return 'uptime-mid';
    return '';
  }

  private showDayTooltip(event: MouseEvent, day: any) {
    const tooltip = this.shadowRoot?.getElementById('tooltip') as HTMLElement;
    if (!tooltip) return;

    const date = new Date(day.date);
    const dateStr = date.toLocaleDateString('en-US', {
      weekday: 'short',
      month: 'short',
      day: 'numeric'
    });

    let statusText = day.status.replace(/_/g, ' ');
    statusText = statusText.charAt(0).toUpperCase() + statusText.slice(1);

    const uptimeColor = day.uptime >= 99.9 ? '#22c55e' :
                        day.uptime >= 99 ? '#fbbf24' : '#f87171';

    tooltip.innerHTML = `
      <div class="tooltip-date">${dateStr}</div>
      <div class="tooltip-stat">
        <span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: ${uptimeColor};"></span>
        ${statusText}
      </div>
      <div class="tooltip-stat">Uptime: <strong>${day.uptime.toFixed(2)}%</strong></div>
      ${day.incidents > 0 ? `<div class="tooltip-stat">Incidents: <strong>${day.incidents}</strong></div>` : ''}
      ${day.totalDowntime > 0 ? `<div class="tooltip-stat">Downtime: <strong>${day.totalDowntime}m</strong></div>` : ''}
      <div class="tooltip-uptime-bar">
        <div class="tooltip-uptime-fill" style="width: ${day.uptime}%; background: ${uptimeColor};"></div>
      </div>
    `;

    const rect = (event.target as HTMLElement).getBoundingClientRect();
    const containerRect = this.getBoundingClientRect();

    tooltip.style.left = `${rect.left - containerRect.left + rect.width / 2}px`;
    tooltip.style.top = `${rect.top - containerRect.top - 10}px`;
    tooltip.style.transform = 'translateX(-50%) translateY(-100%)';
    tooltip.classList.add('visible');
  }

  private hideTooltip() {
    const tooltip = this.shadowRoot?.getElementById('tooltip') as HTMLElement;
    if (tooltip) {
      tooltip.classList.remove('visible');
    }
  }

  private handleDayClick(day: any) {
    this.dispatchEvent(new CustomEvent('dayClick', {
      detail: {
        date: day.date,
        uptime: day.uptime,
        incidents: day.incidents,
        status: day.status,
        serviceId: this.serviceId
      },
      bubbles: true,
      composed: true
    }));
  }
}