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(260px, 1fr));
          gap: ${unsafeCSS(spacing.lg)};
        }

        .statusMonth {
          background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
          padding: ${unsafeCSS(spacing.lg)};
          border-radius: ${unsafeCSS(borderRadius.base)};
          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
          position: relative;
          transition: all 0.2s ease;
          display: flex;
          flex-direction: column;
          min-height: 280px;
          box-shadow: ${cssManager.bdTheme('0 1px 2px 0 rgba(0, 0, 0, 0.05)', 'none')};
        }
        
        .statusMonth:hover {
          border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
          box-shadow: ${cssManager.bdTheme('0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', '0 0 0 1px rgba(255, 255, 255, 0.1)')};
        }

        .month-header {
          font-size: 13px;
          font-weight: 600;
          margin-bottom: ${unsafeCSS(spacing.md)};
          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
          letter-spacing: 0.02em;
          text-transform: uppercase;
        }

        .days-container {
          flex: 1;
          display: flex;
          flex-direction: column;
          margin-bottom: ${unsafeCSS(spacing.lg)};
        }
        
        .days-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 3px;
          width: 100%;
        }

        .weekday-label {
          font-size: 10px;
          text-align: center;
          color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
          font-weight: 500;
          height: 20px;
          line-height: 20px;
          margin-bottom: ${unsafeCSS(spacing.sm)};
          text-transform: uppercase;
        }

        .statusDay {
          aspect-ratio: 1;
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.15s ease;
          position: relative;
        }

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

        .statusDay.operational {
          background: ${cssManager.bdTheme('#10b981', '#10b981')};
        }

        .statusDay.degraded {
          background: ${cssManager.bdTheme('#f59e0b', '#f59e0b')};
        }

        .statusDay.partial_outage {
          background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
        }

        .statusDay.major_outage {
          background: ${cssManager.bdTheme('#dc2626', '#dc2626')};
        }

        .statusDay.no-data {
          background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
          opacity: 0.5;
        }

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

        .overall-uptime {
          font-size: 12px;
          margin-top: auto;
          padding-top: ${unsafeCSS(spacing.md)};
          color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
          display: flex;
          flex-direction: column;
          gap: 6px;
          border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
        }

        .uptime-stat {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        
        .uptime-value {
          font-weight: 600;
          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
          font-variant-numeric: tabular-nums;
          font-size: 13px;
        }

        .loading-skeleton {
          display: flex;
          flex-direction: column;
          gap: ${unsafeCSS(spacing.sm)};
          height: 100%;
        }
        
        .skeleton-header {
          height: 20px;
          width: 80px;
          background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
          border-radius: 4px;
          animation: pulse 2s infinite;
        }
        
        .skeleton-grid {
          flex: 1;
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 2px;
        }
        
        .skeleton-day {
          background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
          border-radius: 2px;
          animation: pulse 2s infinite;
          animation-delay: calc(var(--index) * 0.05s);
        }
        
        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }

        @keyframes loading {
          0% { transform: translateX(-100%); }
          100% { transform: translateX(200%); }
        }

        .tooltip {
          position: absolute;
          background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
          color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
          padding: 8px 12px;
          border-radius: 4px;
          font-size: 12px;
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.15s;
          z-index: 50;
          white-space: nowrap;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
          line-height: 1.5;
        }

        .tooltip.visible {
          opacity: 1;
        }
        
        .tooltip-date {
          font-weight: 500;
          margin-bottom: 4px;
        }
        
        .tooltip-stat {
          font-size: 11px;
          opacity: 0.9;
        }

        .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)};
            min-height: 260px;
          }
          
          .loading-skeleton {
            height: 180px;
            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((_, 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();
    
    return html`
      <div class="statusMonth" @mouseleave=${this.hideTooltip}>
        <div class="month-header">${monthName}</div>
        <div class="days-container">
          <div class="days-grid">
            ${this.renderWeekdayLabels()}
            ${this.renderEmptyDays(firstDayOfWeek)}
            ${monthData.days.map(day => this.renderDay(day))}
            ${this.renderTrailingEmptyDays(firstDayOfWeek + monthData.days.length)}
          </div>
        </div>
        <div class="overall-uptime">
          <div class="uptime-stat">
            <span>Uptime</span>
            <span class="uptime-value">${monthData.overallUptime.toFixed(2)}%</span>
          </div>
          ${monthData.totalIncidents > 0 ? html`
            <div class="uptime-stat">
              <span>Incidents</span>
              <span class="uptime-value">${monthData.totalIncidents}</span>
            </div>
          ` : ''}
        </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 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): 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 class="tooltip-date">${dateStr}</div>
      <div class="tooltip-stat">Status: ${statusText}</div>
      <div class="tooltip-stat">Uptime: ${day.uptime.toFixed(2)}%</div>
      ${day.incidents > 0 ? `<div class="tooltip-stat">Incidents: ${day.incidents}</div>` : ''}
      ${day.totalDowntime > 0 ? `<div class="tooltip-stat">Downtime: ${day.totalDowntime} min</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
    }));
  }
}