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 { fonts, colors, shadows, borderRadius, spacing, commonStyles } 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 })
  public monthlyData: IMonthlyUptime[] = [];

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

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

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

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

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

  constructor() {
    super();
  }

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

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

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

        .statusMonth {
          background: ${colors.background.card};
          padding: ${unsafeCSS(spacing.lg)};
          border-radius: ${unsafeCSS(borderRadius.md)};
          border: 1px solid ${colors.border.default};
          box-shadow: ${unsafeCSS(shadows.sm)};
          position: relative;
        }

        .month-header {
          font-size: 14px;
          font-weight: 600;
          margin-bottom: ${unsafeCSS(spacing.md)};
          text-align: center;
          color: ${colors.text.primary};
          letter-spacing: 0.02em;
        }

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

        .weekday-label {
          font-size: 12px;
          text-align: center;
          color: ${colors.text.secondary};
          font-weight: 500;
          height: 20px;
          line-height: 20px;
          margin-bottom: ${unsafeCSS(spacing.xs)};
        }

        .statusDay {
          aspect-ratio: 1;
          border-radius: ${unsafeCSS(borderRadius.sm)};
          cursor: pointer;
          transition: all 0.2s ease;
          position: relative;
        }

        .statusDay:hover {
          transform: scale(1.15);
          box-shadow: ${unsafeCSS(shadows.md)};
          z-index: 1;
        }

        .statusDay.operational {
          background: ${colors.status.operational};
        }

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

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

        .statusDay.major_outage {
          background: ${colors.status.major};
        }

        .statusDay.no-data {
          background: ${colors.border.muted};
          opacity: 0.3;
        }

        .statusDay.empty {
          background: transparent;
          cursor: default;
        }

        .statusDay.empty:hover {
          transform: none;
          box-shadow: none;
        }

        .overall-uptime {
          text-align: center;
          font-size: 13px;
          margin-top: ${unsafeCSS(spacing.md)};
          color: ${colors.text.secondary};
          line-height: 1.4;
        }

        .loading-skeleton {
          height: 280px;
          background: ${cssManager.bdTheme(
            'linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%)',
            'linear-gradient(90deg, #1f1f1f 25%, #262626 50%, #1f1f1f 75%)'
          )};
          background-size: 200% 100%;
          animation: loading 1.5s infinite;
          border-radius: ${unsafeCSS(borderRadius.md)};
        }

        @keyframes loading {
          0% { background-position: 200% 0; }
          100% { background-position: -200% 0; }
        }

        .tooltip {
          position: absolute;
          background: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
          color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
          padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
          border-radius: ${unsafeCSS(borderRadius.base)};
          font-size: 12px;
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.2s;
          z-index: 10;
          white-space: nowrap;
          box-shadow: ${unsafeCSS(shadows.lg)};
          border: 1px solid ${colors.border.default};
        }

        .tooltip.visible {
          opacity: 0.95;
        }
        
        .tooltip strong {
          font-weight: 600;
          display: block;
          margin-bottom: ${unsafeCSS(spacing.xs)};
          color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
        }

        .no-data-message {
          grid-column: 1 / -1;
          text-align: center;
          padding: ${unsafeCSS(spacing['2xl'])};
          color: ${colors.text.secondary};
        }

        @media (max-width: 640px) {
          .container {
            padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
          }
          
          .mainbox {
            grid-template-columns: 1fr;
            gap: ${unsafeCSS(spacing.md)};
          }
          
          .statusMonth {
            padding: ${unsafeCSS(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(() => html`
              <div class="statusMonth">
                <div class="loading-skeleton"></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();
    
    return html`
      <div class="statusMonth" @mouseleave=${this.hideTooltip}>
        <div class="month-header">${monthName}</div>
        <div class="days-grid">
          ${this.renderWeekdayLabels()}
          ${this.renderEmptyDays(firstDayOfWeek)}
          ${monthData.days.map(day => this.renderDay(day))}
        </div>
        <div class="overall-uptime">
          ${monthData.overallUptime.toFixed(2)}% uptime
          ${monthData.totalIncidents > 0 ? html`<br/>${monthData.totalIncidents} incidents` : ''}
        </div>
      </div>
    `;
  }

  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 renderDay(day: any): TemplateResult {
    const status = day.status || 'no-data';
    const date = new Date(day.date);
    const dayNumber = date.getDate();
    
    return html`
      <div 
        class="statusDay ${status}"
        @mouseenter=${(e: MouseEvent) => this.showTooltip && this.showDayTooltip(e, day)}
        @click=${() => this.handleDayClick(day)}
      >
        ${status === 'major_outage' || status === 'partial_outage' ? html`
          <div style="
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 8px;
            font-weight: bold;
            color: white;
          ">${day.incidents}</div>
        ` : ''}
      </div>
    `;
  }

  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: 'long', 
      year: 'numeric', 
      month: 'long', 
      day: 'numeric' 
    });
    
    let statusText = day.status.replace(/_/g, ' ');
    statusText = statusText.charAt(0).toUpperCase() + statusText.slice(1);
    
    tooltip.innerHTML = `
      <div><strong>${dateStr}</strong></div>
      <div>Status: ${statusText}</div>
      <div>Uptime: ${day.uptime.toFixed(2)}%</div>
      ${day.incidents > 0 ? `<div>Incidents: ${day.incidents}</div>` : ''}
      ${day.totalDowntime > 0 ? `<div>Downtime: ${day.totalDowntime} minutes</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 - 80}px`;
    tooltip.style.transform = 'translateX(-50%)';
    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
    }));
  }
}