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: Array })
  public dataPoints: 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)};
      }
      
      .graph-wrapper {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      
      .graph-container {
        position: relative;
      }

      .mainbox {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
      }

      .mainbox .barContainer {
        position: relative;
        display: flex;
        gap: 2px;
        padding: ${unsafeCSS(spacing.sm)};
        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
        border-radius: ${unsafeCSS(borderRadius.base)};
        overflow: hidden;
        height: 40px;
      }

      .mainbox .barContainer .bar {
        flex: 1;
        height: 100%;
        cursor: pointer;
        transition: all 0.15s ease;
        position: relative;
        border-radius: 2px;
      }

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

      .mainbox .barContainer .bar.operational {
        background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
      }

      .mainbox .barContainer .bar.degraded {
        background: ${cssManager.bdTheme('#fbbf24', '#fbbf24')};
      }

      .mainbox .barContainer .bar.partial_outage {
        background: ${cssManager.bdTheme('#f87171', '#f87171')};
      }

      .mainbox .barContainer .bar.major_outage {
        background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
      }

      .mainbox .barContainer .bar.maintenance {
        background: ${cssManager.bdTheme('#60a5fa', '#60a5fa')};
      }

      .mainbox .barContainer .bar.no-data {
        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
        opacity: 0.6;
      }


      .time-labels {
        display: flex;
        justify-content: space-between;
        padding: 0;
        margin-top: ${unsafeCSS(spacing.xs)};
        font-size: 10px;
        color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
        font-family: ${unsafeCSS(fonts.base)};
        opacity: 0.8;
      }

      .tooltip {
        position: absolute;
        background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
        color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 11px;
        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.4;
      }

      .tooltip.visible {
        opacity: 1;
      }

      .tooltip-time {
        font-weight: 600;
        display: block;
        margin-bottom: 2px;
      }

      .tooltip-stat {
        font-size: 10px;
        opacity: 0.9;
      }

      .loading-skeleton {
        display: flex;
        gap: 1px;
        height: 24px;
      }

      .loading-skeleton .skeleton-bar {
        flex: 1;
        height: 100%;
        background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
        animation: pulse 2s infinite;
      }
      
      @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
      }

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


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

        .mainbox .barContainer {
          height: 32px;
          padding: ${unsafeCSS(spacing.xs)};
        }

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

        .stats-row {
          font-size: 11px;
          flex-direction: column;
          gap: ${unsafeCSS(spacing.sm)};
          align-items: flex-start;
        }
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="container">
        <uplinternal-miniheading>${this.serviceName} - Last ${this.hoursToShow} Hours</uplinternal-miniheading>
        <div class="mainbox">
          ${this.loading ? html`
          <div class="graph-container">
            <div class="barContainer" style="background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; border: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')}; border-radius: ${borderRadius.base}; padding: ${spacing.sm}; height: 40px;">
              <div class="loading-skeleton">
                ${Array(this.hoursToShow).fill(0).map(() => html`<div class="skeleton-bar"></div>`)}
              </div>
            </div>
          </div>
        ` : html`
          <div class="graph-container">
            <div class="barContainer" @mouseleave=${this.hideTooltip}>
              ${this.renderBars()}
            </div>
          </div>
          <div class="time-labels">
            <span>${this.getTimeLabel(this.hoursToShow - 1)}</span>
            <span>${this.getTimeLabel(Math.floor(this.hoursToShow * 3 / 4))}</span>
            <span>${this.getTimeLabel(Math.floor(this.hoursToShow / 2))}</span>
            <span>${this.getTimeLabel(Math.floor(this.hoursToShow / 4))}</span>
            <span>now</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 getData(): IStatusHistoryPoint[] {
    return this.dataPoints?.length > 0 ? this.dataPoints : this.historyData || [];
  }
  
  private findDataPointForTime(timestamp: number): IStatusHistoryPoint | undefined {
    const data = this.getData();
    if (!data || data.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 data.find(point => {
      const pointDate = new Date(point.timestamp);
      return pointDate.toDateString() === targetDate && 
             pointDate.getHours() === targetHour;
    });
  }


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

  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 class="tooltip-time">${timeStr}</div>
      <div class="tooltip-stat">Status: ${statusStr}</div>
      ${responseTime > 0 ? `<div class="tooltip-stat">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 - 10}px`;
    tooltip.style.transform = 'translate(-50%, -100%)';
    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
    }));
  }

}