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

import * as plugins from '../plugins.js';
import {
  DeesElement,
  property,
  html,
  customElement,
  type TemplateResult,
  css,
  cssManager,
  unsafeCSS,
} from '@design.estate/dees-element';
import type { IIncidentDetails } from '../interfaces/index.js';
import * as sharedStyles from '../styles/shared.styles.js';
import './internal/uplinternal-miniheading.js';
import { demoFunc } from './upl-statuspage-incidents.demo.js';

declare global {
  interface HTMLElementTagNameMap {
    'upl-statuspage-incidents': UplStatuspageIncidents;
  }
}

type TIncidentStatus = 'investigating' | 'identified' | 'monitoring' | 'resolved' | 'postmortem';

@customElement('upl-statuspage-incidents')
export class UplStatuspageIncidents extends DeesElement {
  // STATIC
  public static demo = demoFunc;

  // INSTANCE
  @property({
    type: Array,
  })
  accessor currentIncidents: IIncidentDetails[] = [];

  @property({
    type: Array,
  })
  accessor pastIncidents: IIncidentDetails[] = [];

  @property({
    type: Boolean,
  })
  accessor whitelabel = false;

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

  @property({
    type: Number,
  })
  accessor daysToShow = 90;

  @property({
    type: Array,
  })
  accessor subscribedIncidentIds: string[] = [];

  @property({
    type: Object,
    state: true,
  })
  private accessor expandedIncidents: Set<string> = new Set();

  @property({
    type: Object,
    state: true,
  })
  private accessor subscribedIncidents: Set<string> = new Set();

  private statusIcons: Record<TIncidentStatus, string> = {
    investigating: 'lucide:Search',
    identified: 'lucide:Target',
    monitoring: 'lucide:Eye',
    resolved: 'lucide:CheckCircle',
    postmortem: 'lucide:FileText',
  };

  private statusLabels: Record<TIncidentStatus, string> = {
    investigating: 'Investigating',
    identified: 'Identified',
    monitoring: 'Monitoring',
    resolved: 'Resolved',
    postmortem: 'Postmortem',
  };

  constructor() {
    super();
  }

  async connectedCallback() {
    await super.connectedCallback();
    // Initialize subscribed incidents from the property
    if (this.subscribedIncidentIds.length > 0) {
      this.subscribedIncidents = new Set(this.subscribedIncidentIds);
    }
  }

  updated(changedProperties: Map<string, any>) {
    super.updated(changedProperties);
    if (changedProperties.has('subscribedIncidentIds')) {
      this.subscribedIncidents = new Set(this.subscribedIncidentIds);
    }
  }

  public static styles = [
    plugins.domtools.elementBasic.staticStyles,
    sharedStyles.commonStyles,
    css`
      :host {
        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)};
      }

      .noIncidentBox {
        background: ${sharedStyles.colors.background.card};
        padding: ${unsafeCSS(sharedStyles.spacing.xl)};
        margin-bottom: ${unsafeCSS(sharedStyles.spacing.lg)};
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
        border: 1px solid ${sharedStyles.colors.border.default};
        text-align: center;
        color: ${sharedStyles.colors.text.secondary};
        box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
        animation: fadeInUp 0.4s ${unsafeCSS(sharedStyles.easings.default)} both;
      }

      /* Staggered entrance animations */
      .incident-card {
        background: ${sharedStyles.colors.background.card};
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
        margin-bottom: ${unsafeCSS(sharedStyles.spacing.lg)};
        overflow: hidden;
        box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
        border: 1px solid ${sharedStyles.colors.border.default};
        transition: all ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
        animation: fadeInUp 0.4s ${unsafeCSS(sharedStyles.easings.default)} both;
      }

      .incident-card:nth-child(1) { animation-delay: 0ms; }
      .incident-card:nth-child(2) { animation-delay: 50ms; }
      .incident-card:nth-child(3) { animation-delay: 100ms; }
      .incident-card:nth-child(4) { animation-delay: 150ms; }
      .incident-card:nth-child(5) { animation-delay: 200ms; }

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

      .incident-card.expanded {
        box-shadow: ${unsafeCSS(sharedStyles.shadows.lg)};
      }

      /* Active incident pulse effect */
      .incident-card.active-incident {
        animation: fadeInUp 0.4s ${unsafeCSS(sharedStyles.easings.default)} both,
                   incident-pulse 3s ease-in-out infinite;
      }

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

      @keyframes incident-pulse {
        0%, 100% {
          box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
        }
        50% {
          box-shadow: ${unsafeCSS(sharedStyles.shadows.md)},
                      0 0 0 2px ${cssManager.bdTheme('rgba(239, 68, 68, 0.15)', 'rgba(248, 113, 113, 0.2)')};
        }
      }

      /* New header layout matching admin catalog */
      .incident-header {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
        cursor: pointer;
        transition: background-color ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
      }

      .incident-header:hover {
        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(255, 255, 255, 0.02)')};
      }

      /* Internal severity bar (replacing border-left) */
      .incident-severity {
        width: 4px;
        align-self: stretch;
        border-radius: 2px;
        flex-shrink: 0;
      }

      .incident-severity.critical { background: ${sharedStyles.colors.status.major}; }
      .incident-severity.major { background: ${sharedStyles.colors.status.partial}; }
      .incident-severity.minor { background: ${sharedStyles.colors.status.degraded}; }
      .incident-severity.maintenance { background: ${sharedStyles.colors.status.maintenance}; }

      .incident-main {
        flex: 1;
        min-width: 0;
      }

      .incident-title-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
        flex-wrap: wrap;
      }

      .incident-title {
        font-size: 15px;
        font-weight: 600;
        margin: 0;
        color: ${sharedStyles.colors.text.primary};
      }

      /* Status badge inline with title */
      .incident-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 500;
        border-radius: 9999px;
        text-transform: uppercase;
        flex-shrink: 0;
      }

      .incident-status dees-icon {
        --icon-size: 12px;
      }

      .incident-status.investigating {
        background: ${cssManager.bdTheme('rgba(249, 115, 22, 0.1)', 'rgba(249, 115, 22, 0.2)')};
        color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
        --icon-color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
      }

      .incident-status.identified {
        background: ${cssManager.bdTheme('rgba(234, 179, 8, 0.1)', 'rgba(234, 179, 8, 0.2)')};
        color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
        --icon-color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
      }

      .incident-status.monitoring {
        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.2)')};
        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
        --icon-color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
      }

      .incident-status.resolved {
        background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.1)', 'rgba(34, 197, 94, 0.2)')};
        color: ${cssManager.bdTheme('#16a34a', '#4ade80')};
        --icon-color: ${cssManager.bdTheme('#16a34a', '#4ade80')};
      }

      .incident-status.postmortem {
        background: ${cssManager.bdTheme('rgba(168, 85, 247, 0.1)', 'rgba(168, 85, 247, 0.2)')};
        color: ${cssManager.bdTheme('#9333ea', '#c084fc')};
        --icon-color: ${cssManager.bdTheme('#9333ea', '#c084fc')};
      }

      .incident-meta {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 12px;
        color: ${sharedStyles.colors.text.secondary};
        flex-wrap: wrap;
      }

      .incident-meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .incident-meta-item dees-icon {
        --icon-size: 12px;
        --icon-color: ${sharedStyles.colors.text.muted};
      }

      .incident-expand {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        color: ${sharedStyles.colors.text.muted};
        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
        flex-shrink: 0;
      }

      .incident-expand:hover {
        background: ${sharedStyles.colors.background.muted};
        color: ${sharedStyles.colors.text.primary};
      }

      .incident-expand dees-icon {
        --icon-size: 16px;
        transition: transform ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
      }

      .incident-expand.expanded dees-icon {
        transform: rotate(180deg);
      }

      .incident-body {
        padding: 0 16px 16px 36px;
        animation: slideDown 0.3s ${unsafeCSS(sharedStyles.easings.default)};
      }

      @keyframes slideDown {
        from {
          opacity: 0;
          transform: translateY(-8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .incident-impact {
        margin: ${unsafeCSS(sharedStyles.spacing.md)} 0;
        padding: ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.lg)};
        background: ${sharedStyles.colors.background.secondary};
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
        font-size: 14px;
        line-height: 1.6;
        border-left: 3px solid ${sharedStyles.colors.border.muted};
      }

      .affected-services {
        margin-top: ${unsafeCSS(sharedStyles.spacing.lg)};
      }

      .affected-services-title {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: ${unsafeCSS(sharedStyles.spacing.sm)};
        color: ${sharedStyles.colors.text.secondary};
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .service-tag {
        display: inline-block;
        padding: 4px 10px;
        margin: 2px;
        background: ${sharedStyles.colors.background.muted};
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.sm)};
        font-size: 12px;
        color: ${sharedStyles.colors.text.secondary};
        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
      }

      .service-tag:hover {
        background: ${sharedStyles.colors.background.secondary};
        color: ${sharedStyles.colors.text.primary};
      }

      /* Timeline visualization for updates */
      .incident-updates {
        margin-top: ${unsafeCSS(sharedStyles.spacing.xl)};
        border-top: 1px solid ${sharedStyles.colors.border.default};
        padding-top: ${unsafeCSS(sharedStyles.spacing.lg)};
      }

      .updates-title {
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin: 0 0 ${unsafeCSS(sharedStyles.spacing.lg)} 0;
        color: ${sharedStyles.colors.text.secondary};
      }

      .timeline {
        position: relative;
        padding-left: 24px;
      }

      .update-item {
        position: relative;
        padding-left: ${unsafeCSS(sharedStyles.spacing.lg)};
        padding-bottom: ${unsafeCSS(sharedStyles.spacing.lg)};
        animation: fadeInUp 0.3s ${unsafeCSS(sharedStyles.easings.default)} both;
      }

      .update-item:last-child {
        padding-bottom: 0;
      }

      .update-item:not(:last-child)::after {
        content: '';
        position: absolute;
        left: -15px;
        top: 18px;
        bottom: 0;
        width: 2px;
        background: ${sharedStyles.colors.border.default};
      }

      .update-item::before {
        content: '';
        position: absolute;
        left: -22px;
        top: 4px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: ${sharedStyles.colors.background.card};
        border: 2px solid ${sharedStyles.colors.border.muted};
        z-index: 1;
        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
      }

      .update-item:first-child::before {
        border-color: ${sharedStyles.colors.status.operational};
        background: ${sharedStyles.colors.status.operational};
        box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(22, 163, 74, 0.15)', 'rgba(34, 197, 94, 0.2)')};
      }

      .update-item:hover::before {
        transform: scale(1.2);
        border-color: ${sharedStyles.colors.text.secondary};
      }

      .update-time {
        font-size: 11px;
        color: ${sharedStyles.colors.text.muted};
        margin-bottom: 4px;
        font-family: ${unsafeCSS(sharedStyles.fonts.mono)};
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .update-status-badge {
        display: inline-flex;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        background: ${sharedStyles.colors.background.muted};
        color: ${sharedStyles.colors.text.secondary};
      }

      .update-message {
        font-size: 14px;
        line-height: 1.6;
        color: ${sharedStyles.colors.text.primary};
      }

      .update-author {
        font-size: 12px;
        color: ${sharedStyles.colors.text.muted};
        margin-top: 4px;
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .loading-skeleton {
        height: 140px;
        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: shimmer 1.5s infinite;
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
        margin-bottom: ${unsafeCSS(sharedStyles.spacing.lg)};
      }

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

      .show-more {
        text-align: center;
        margin-top: ${unsafeCSS(sharedStyles.spacing.xl)};
      }

      .show-more-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 20px;
        background: transparent;
        border: 1px solid ${sharedStyles.colors.border.default};
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
        color: ${sharedStyles.colors.text.primary};
        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
      }

      .show-more-button:hover {
        background: ${sharedStyles.colors.background.secondary};
        border-color: ${sharedStyles.colors.border.muted};
        transform: translateY(-2px);
        box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
      }

      .show-more-button:active {
        transform: translateY(0);
      }

      .incident-actions {
        display: flex;
        gap: ${unsafeCSS(sharedStyles.spacing.md)};
        align-items: center;
        margin-top: ${unsafeCSS(sharedStyles.spacing.lg)};
        padding-top: ${unsafeCSS(sharedStyles.spacing.lg)};
        border-top: 1px solid ${sharedStyles.colors.border.default};
      }

      .subscribe-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: transparent;
        border: 1px solid ${sharedStyles.colors.border.default};
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
        color: ${sharedStyles.colors.text.primary};
        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
      }

      .subscribe-button:hover {
        background: ${sharedStyles.colors.background.secondary};
        border-color: ${sharedStyles.colors.border.muted};
        transform: translateY(-1px);
      }

      .subscribe-button.subscribed {
        background: ${cssManager.bdTheme('#f0fdf4', '#064e3b')};
        border-color: ${cssManager.bdTheme('#86efac', '#047857')};
        color: ${cssManager.bdTheme('#047857', '#86efac')};
      }

      .subscribe-button.subscribed:hover {
        background: ${cssManager.bdTheme('#dcfce7', '#065f46')};
      }

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

        .incident-header {
          padding: 12px;
        }

        .incident-body {
          padding: 0 12px 12px 24px;
        }

        .incident-meta {
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
        }

        .timeline {
          padding-left: 20px;
        }

        .update-item::before {
          left: -18px;
          width: 10px;
          height: 10px;
        }

        .update-item:not(:last-child)::after {
          left: -12px;
          top: 16px;
        }
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="container">
        <uplinternal-miniheading>Current Incidents</uplinternal-miniheading>
        ${this.loading ? html`
          <div class="loading-skeleton"></div>
        ` : this.currentIncidents.length ? html`
          ${this.currentIncidents.map(incident => this.renderIncident(incident, true))}
        ` :
          html`<div class="noIncidentBox">No incidents ongoing.</div>`
        }

        <uplinternal-miniheading>Past Incidents</uplinternal-miniheading>
        ${this.loading ? html`
          <div class="loading-skeleton"></div>
          <div class="loading-skeleton"></div>
        ` : this.pastIncidents.length ?
          this.pastIncidents.slice(0, 5).map(incident => this.renderIncident(incident, false)) :
          html`<div class="noIncidentBox">No past incidents in the last ${this.daysToShow} days.</div>`
        }

        ${this.pastIncidents.length > 5 && !this.loading ? html`
          <div class="show-more">
            <button class="show-more-button" @click=${this.handleShowMore}>
              Show ${this.pastIncidents.length - 5} more incidents
            </button>
          </div>
        ` : ''}
      </div>
    `;
  }

  private renderIncident(incident: IIncidentDetails, isCurrent: boolean): TemplateResult {
    const latestUpdate = incident.updates[incident.updates.length - 1];
    const duration = incident.endTime ?
      this.formatDuration(incident.endTime - incident.startTime) :
      this.formatDuration(Date.now() - incident.startTime);

    const isActive = isCurrent && latestUpdate?.status !== 'resolved';
    const isExpanded = this.expandedIncidents.has(incident.id);

    return html`
      <div class="incident-card ${isExpanded ? 'expanded' : ''} ${isActive ? 'active-incident' : ''}">
        <div class="incident-header" @click=${() => this.toggleIncident(incident.id)}>
          <div class="incident-severity ${incident.severity}"></div>

          <div class="incident-main">
            <div class="incident-title-row">
              <h3 class="incident-title">${incident.title}</h3>
              <span class="incident-status ${latestUpdate.status}">
                <dees-icon .icon=${this.statusIcons[latestUpdate.status as TIncidentStatus]} .iconSize=${12}></dees-icon>
                ${this.statusLabels[latestUpdate.status as TIncidentStatus] || latestUpdate.status}
              </span>
            </div>
            <div class="incident-meta">
              <span class="incident-meta-item">
                <dees-icon .icon=${'lucide:Calendar'} .iconSize=${12}></dees-icon>
                ${this.formatDate(incident.startTime)}
              </span>
              <span class="incident-meta-item">
                <dees-icon .icon=${'lucide:Clock'} .iconSize=${12}></dees-icon>
                ${duration}
              </span>
              <span class="incident-meta-item">
                <dees-icon .icon=${'lucide:Server'} .iconSize=${12}></dees-icon>
                ${incident.affectedServices.length} service${incident.affectedServices.length !== 1 ? 's' : ''}
              </span>
              <span class="incident-meta-item">
                <dees-icon .icon=${'lucide:MessageSquare'} .iconSize=${12}></dees-icon>
                ${incident.updates.length} update${incident.updates.length !== 1 ? 's' : ''}
              </span>
            </div>
          </div>

          <button class="incident-expand ${isExpanded ? 'expanded' : ''}">
            <dees-icon .icon=${'lucide:ChevronDown'} .iconSize=${16}></dees-icon>
          </button>
        </div>

        ${isExpanded ? html`
        <div class="incident-body">
          ${incident.impact ? html`
            <div class="incident-impact">
              <strong>Impact:</strong> ${incident.impact}
            </div>
          ` : ''}

          ${incident.affectedServices.length > 0 ? html`
            <div class="affected-services">
              <div class="affected-services-title">Affected Services:</div>
              ${incident.affectedServices.map(service => html`
                <span class="service-tag">${service}</span>
              `)}
            </div>
          ` : ''}

          ${incident.updates.length > 0 ? html`
            <div class="incident-updates">
              <h4 class="updates-title">Updates</h4>
              <div class="timeline">
                ${incident.updates.slice(-3).reverse().map((update, index) => this.renderUpdate(update, index))}
              </div>
            </div>
          ` : ''}

          ${incident.rootCause && isCurrent === false ? html`
            <div class="incident-impact" style="margin-top: 12px;">
              <strong>Root Cause:</strong> ${incident.rootCause}
            </div>
          ` : ''}

          ${incident.resolution && isCurrent === false ? html`
            <div class="incident-impact" style="margin-top: 12px;">
              <strong>Resolution:</strong> ${incident.resolution}
            </div>
          ` : ''}

          <div class="incident-actions">
            <button
              class="subscribe-button ${this.isSubscribedToIncident(incident.id) ? 'subscribed' : ''}"
              @click=${(e: Event) => {
                e.stopPropagation();
                this.handleIncidentSubscribe(incident);
              }}
            >
              ${this.isSubscribedToIncident(incident.id) ? html`
                <dees-icon .icon=${'lucide:Check'} .iconSize=${14}></dees-icon>
                Subscribed to updates
              ` : html`
                <dees-icon .icon=${'lucide:Bell'} .iconSize=${14}></dees-icon>
                Subscribe to updates
              `}
            </button>
            ${isCurrent ? html`
              <span style="
                font-size: 12px;
                color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
              ">Get notified when this incident is updated or resolved</span>
            ` : ''}
          </div>
        </div>
        ` : ''}
      </div>
    `;
  }

  private renderUpdate(update: any, index: number = 0): TemplateResult {
    return html`
      <div class="update-item" style="animation-delay: ${index * 50}ms">
        <div class="update-time">
          ${this.formatDate(update.timestamp)}
          ${update.status ? html`<span class="update-status-badge">${update.status}</span>` : ''}
        </div>
        <div class="update-message">${update.message}</div>
        ${update.author ? html`
          <div class="update-author">
            <dees-icon .icon=${'lucide:User'} .iconSize=${12}></dees-icon>
            ${update.author}
          </div>
        ` : ''}
      </div>
    `;
  }

  private formatDate(timestamp: number): string {
    const date = new Date(timestamp);
    const now = Date.now();
    const diff = now - timestamp;

    // Less than 1 hour ago
    if (diff < 60 * 60 * 1000) {
      const minutes = Math.floor(diff / (60 * 1000));
      return `${minutes} minute${minutes !== 1 ? 's' : ''} ago`;
    }

    // Less than 24 hours ago
    if (diff < 24 * 60 * 60 * 1000) {
      const hours = Math.floor(diff / (60 * 60 * 1000));
      return `${hours} hour${hours !== 1 ? 's' : ''} ago`;
    }

    // Less than 7 days ago
    if (diff < 7 * 24 * 60 * 60 * 1000) {
      const days = Math.floor(diff / (24 * 60 * 60 * 1000));
      return `${days} day${days !== 1 ? 's' : ''} ago`;
    }

    // Default to full date
    return date.toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: date.getFullYear() !== new Date().getFullYear() ? 'numeric' : undefined
    });
  }

  private formatDuration(milliseconds: number): string {
    const minutes = Math.floor(milliseconds / (60 * 1000));
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);

    if (days > 0) {
      return `${days}d ${hours % 24}h`;
    } else if (hours > 0) {
      return `${hours}h ${minutes % 60}m`;
    } else {
      return `${minutes}m`;
    }
  }

  private toggleIncident(incidentId: string) {
    const newExpanded = new Set(this.expandedIncidents);
    if (newExpanded.has(incidentId)) {
      newExpanded.delete(incidentId);
    } else {
      newExpanded.add(incidentId);
    }
    this.expandedIncidents = newExpanded;
  }

  private handleIncidentClick(incident: IIncidentDetails) {
    this.dispatchEvent(new CustomEvent('incidentClick', {
      detail: { incident },
      bubbles: true,
      composed: true
    }));
  }

  private handleShowMore() {
    // This would typically load more incidents or navigate to a full list
    console.log('Show more incidents');
  }

  private isSubscribedToIncident(incidentId: string): boolean {
    return this.subscribedIncidents.has(incidentId);
  }

  private handleIncidentSubscribe(incident: IIncidentDetails) {
    const newSubscribed = new Set(this.subscribedIncidents);
    if (newSubscribed.has(incident.id)) {
      newSubscribed.delete(incident.id);
      this.dispatchEvent(new CustomEvent('incidentUnsubscribe', {
        detail: {
          incident,
          incidentId: incident.id
        },
        bubbles: true,
        composed: true
      }));
    } else {
      newSubscribed.add(incident.id);
      this.dispatchEvent(new CustomEvent('incidentSubscribe', {
        detail: {
          incident,
          incidentId: incident.id,
          incidentTitle: incident.title,
          affectedServices: incident.affectedServices
        },
        bubbles: true,
        composed: true
      }));
    }
    this.subscribedIncidents = newSubscribed;
  }

  public dispatchReportNewIncident() {
    this.dispatchEvent(new CustomEvent('reportNewIncident', {
      bubbles: true,
      composed: true
    }));
  }

  public dispatchStatusSubscribe() {
    this.dispatchEvent(new CustomEvent('statusSubscribe', {
      bubbles: true,
      composed: true
    }));
  }
}