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

import * as plugins from '../plugins.js';
import {
  DeesElement,
  property,
  html,
  customElement,
  type TemplateResult,
  css,
  cssManager,
  unsafeCSS,
} from '@design.estate/dees-element';
import type { IStatusHistoryPoint } from '../interfaces/index.js';
import { fonts, colors, shadows, borderRadius, spacing, commonStyles, getStatusColor } from '../styles/shared.styles.js';

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

declare global {
  interface HTMLElementTagNameMap {
    'upl-statuspage-statusdetails': UplStatuspageStatusdetails;
  }
}

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

  @property({ type: Array })
  public historyData: IStatusHistoryPoint[] = [];

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

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

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

  @property({ type: Number })
  public hoursToShow: number = 48;

  constructor() {
    super();
  }

  public static styles = [
    plugins.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 {
        background: ${colors.background.card};
        border: 1px solid ${colors.border.default};
        border-radius: ${unsafeCSS(borderRadius.md)};
        padding: ${unsafeCSS(spacing.md)};
        box-shadow: ${unsafeCSS(shadows.sm)};
      }

      .mainbox .barContainer {
        position: relative;
        display: flex;
        gap: 2px;
        padding: ${unsafeCSS(spacing.sm)};
        border-radius: ${unsafeCSS(borderRadius.base)};
        overflow: hidden;
      }

      .mainbox .barContainer .bar {
        flex: 1;
        height: 48px;
        border-radius: ${unsafeCSS(borderRadius.sm)};
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
      }

      .mainbox .barContainer .bar:hover {
        transform: scaleY(1.1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
      }

      .mainbox .barContainer .bar.operational {
        background: ${colors.status.operational};
      }

      .mainbox .barContainer .bar.degraded {
        background: ${colors.status.degraded};
      }

      .mainbox .barContainer .bar.partial_outage {
        background: ${colors.status.partial};
      }

      .mainbox .barContainer .bar.major_outage {
        background: ${colors.status.major};
      }

      .mainbox .barContainer .bar.maintenance {
        background: ${colors.status.maintenance};
      }

      .mainbox .barContainer .bar.no-data {
        background: ${colors.border.muted};
        opacity: 0.3;
      }

      .timeIndicator {
        position: absolute;
        width: 2px;
        height: calc(100% - ${unsafeCSS(spacing.md)});
        background: ${colors.text.primary};
        top: ${unsafeCSS(spacing.sm)};
        transition: left 0.3s;
        opacity: 0.5;
        pointer-events: none;
      }

      .time-labels {
        display: flex;
        justify-content: space-between;
        padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.sm)} 0;
        font-size: 12px;
        color: ${cssManager.bdTheme('#4b5563', '#9ca3af')};
        font-family: ${unsafeCSS(fonts.mono)};
        font-weight: 500;
      }

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

      .tooltip.visible {
        opacity: 0.95;
      }

      .tooltip strong {
        font-weight: 600;
        display: block;
        margin-bottom: ${unsafeCSS(spacing.xs)};
        color: ${cssManager.bdTheme('#fafafa', '#18181b')};
      }

      .tooltip div {
        line-height: 1.4;
      }

      .loading-skeleton {
        display: flex;
        padding: ${unsafeCSS(spacing.sm)};
        gap: 2px;
        background: ${colors.background.secondary};
        border-radius: ${unsafeCSS(borderRadius.base)};
      }

      .loading-skeleton .skeleton-bar {
        flex: 1;
        height: 48px;
        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.sm)};
      }

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

      .status-legend {
        display: flex;
        gap: ${unsafeCSS(spacing.lg)};
        justify-content: center;
        margin-top: ${unsafeCSS(spacing.lg)};
        font-size: 13px;
        flex-wrap: wrap;
      }

      .legend-item {
        display: flex;
        align-items: center;
        gap: ${unsafeCSS(spacing.xs)};
      }

      .legend-color {
        width: 12px;
        height: 12px;
        border-radius: ${unsafeCSS(borderRadius.sm)};
      }
      
      .legend-color.operational {
        background: ${colors.status.operational};
      }
      
      .legend-color.degraded {
        background: ${colors.status.degraded};
      }
      
      .legend-color.partial_outage {
        background: ${colors.status.partial};
      }
      
      .legend-color.major_outage {
        background: ${colors.status.major};
      }
      
      .legend-color.maintenance {
        background: ${colors.status.maintenance};
      }

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

        .mainbox {
          padding: ${unsafeCSS(spacing.sm)};
        }

        .time-labels {
          font-size: 11px;
        }

        .status-legend {
          gap: ${unsafeCSS(spacing.md)};
          font-size: 12px;
        }
      }
    `,
  ];

  public render(): TemplateResult {
    const timeIndicatorPosition = this.calculateTimeIndicatorPosition();

    return html`
      <div class="container">
        <uplinternal-miniheading>${this.serviceName} - Last ${this.hoursToShow} Hours</uplinternal-miniheading>
        <div class="mainbox">
          ${this.loading ? html`
          <div class="loading-skeleton">
            ${Array(this.hoursToShow).fill(0).map(() => html`<div class="skeleton-bar"></div>`)}
          </div>
        ` : html`
          <div class="barContainer" @mouseleave=${this.hideTooltip}>
            ${this.renderBars()}
            <div class="timeIndicator" style="left: ${timeIndicatorPosition}px"></div>
          </div>
          <div class="time-labels">
            <span>${this.getTimeLabel(0)}</span>
            <span>${this.getTimeLabel(Math.floor(this.hoursToShow / 4))}</span>
            <span>${this.getTimeLabel(Math.floor(this.hoursToShow / 2))}</span>
            <span>${this.getTimeLabel(Math.floor(this.hoursToShow * 3 / 4))}</span>
            <span>Now</span>
          </div>
        `}
        </div>
        ${!this.loading ? html`
          <div class="status-legend">
            <div class="legend-item">
              <div class="legend-color operational"></div>
              <span>Operational</span>
            </div>
            <div class="legend-item">
              <div class="legend-color degraded"></div>
              <span>Degraded</span>
            </div>
            <div class="legend-item">
              <div class="legend-color partial_outage"></div>
              <span>Partial Outage</span>
            </div>
            <div class="legend-item">
              <div class="legend-color major_outage"></div>
              <span>Major Outage</span>
            </div>
            <div class="legend-item">
              <div class="legend-color maintenance"></div>
              <span>Maintenance</span>
            </div>
          </div>
        ` : ''}
        <div class="tooltip" id="tooltip"></div>
      </div>
    `;
  }

  private renderBars(): TemplateResult[] {
    const bars: TemplateResult[] = [];
    const now = Date.now();
    
    for (let i = 0; i < this.hoursToShow; i++) {
      const hourIndex = this.hoursToShow - 1 - i;
      const timestamp = now - (hourIndex * 60 * 60 * 1000);
      const dataPoint = this.findDataPointForTime(timestamp);
      
      const status = dataPoint?.status || 'no-data';
      const responseTime = dataPoint?.responseTime || 0;
      
      bars.push(html`
        <div 
          class="bar ${status}"
          @mouseenter=${(e: MouseEvent) => this.showTooltip(e, timestamp, status, responseTime)}
          @click=${() => this.handleBarClick(timestamp, status, responseTime)}
        ></div>
      `);
    }
    
    return bars;
  }

  private findDataPointForTime(timestamp: number): IStatusHistoryPoint | undefined {
    if (!this.historyData || this.historyData.length === 0) return undefined;
    
    // Find the closest data point within the same hour
    const targetHour = new Date(timestamp).getHours();
    const targetDate = new Date(timestamp).toDateString();
    
    return this.historyData.find(point => {
      const pointDate = new Date(point.timestamp);
      return pointDate.toDateString() === targetDate && 
             pointDate.getHours() === targetHour;
    });
  }

  private calculateTimeIndicatorPosition(): number {
    const containerWidth = 888; // Approximate width minus padding
    const barWidth = 19; // Width + margin
    const totalBars = this.hoursToShow;
    const currentMinutes = new Date().getMinutes();
    const currentPosition = (totalBars - 1 + currentMinutes / 60) * barWidth + 6;
    return Math.min(currentPosition, containerWidth - 11);
  }

  private getTimeLabel(hoursAgo: number): string {
    const date = new Date(Date.now() - (hoursAgo * 60 * 60 * 1000));
    if (hoursAgo >= 24) {
      return `${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:00`;
    }
    return `${date.getHours()}:00`;
  }

  private showTooltip(event: MouseEvent, timestamp: number, status: string, responseTime: number) {
    const tooltip = this.shadowRoot?.getElementById('tooltip') as HTMLElement;
    if (!tooltip) return;
    
    const date = new Date(timestamp);
    const timeStr = date.toLocaleString();
    const statusStr = status.replace(/_/g, ' ').replace('no-data', 'No Data');
    
    tooltip.innerHTML = `
      <div><strong>${timeStr}</strong></div>
      <div>Status: ${statusStr}</div>
      ${responseTime > 0 ? `<div>Response Time: ${responseTime.toFixed(0)}ms</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 - 60}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 handleBarClick(timestamp: number, status: string, responseTime: number) {
    this.dispatchEvent(new CustomEvent('barClick', {
      detail: { timestamp, status, responseTime, serviceId: this.serviceId },
      bubbles: true,
      composed: true
    }));
  }
}