import {
  DeesElement,
  customElement,
  html,
  css,
  cssManager,
  property,
  type TemplateResult,
} from '@design.estate/dees-element';

declare global {
  interface HTMLElementTagNameMap {
    'sz-platform-service-detail-view': SzPlatformServiceDetailView;
  }
}

export interface IPlatformServiceDetail {
  id: string;
  name: string;
  type: 'mongodb' | 'minio' | 'clickhouse' | 'redis';
  status: 'running' | 'stopped' | 'error';
  version: string;
  host: string;
  port: number;
  credentials?: {
    username?: string;
    password?: string;
    accessKey?: string;
    secretKey?: string;
  };
  config: Record<string, any>;
  metrics?: {
    cpu: number;
    memory: number;
    storage: number;
    connections?: number;
  };
}

export interface IPlatformLogEntry {
  timestamp: string;
  level: 'info' | 'warn' | 'error' | 'debug';
  message: string;
}

@customElement('sz-platform-service-detail-view')
export class SzPlatformServiceDetailView extends DeesElement {
  public static demo = () => html`
    <div style="padding: 24px; max-width: 1000px;">
      <sz-platform-service-detail-view
        .service=${{
          id: '1',
          name: 'MongoDB',
          type: 'mongodb',
          status: 'running',
          version: '7.0.4',
          host: 'localhost',
          port: 27017,
          credentials: { username: 'admin', password: '••••••••' },
          config: { replicaSet: 'rs0', authEnabled: true },
          metrics: { cpu: 12, memory: 45, storage: 23, connections: 8 },
        }}
        .logs=${[
          { timestamp: '2024-01-20 14:30:22', level: 'info', message: 'Connection accepted from 127.0.0.1:54321' },
          { timestamp: '2024-01-20 14:30:20', level: 'info', message: 'Index build completed on collection users' },
          { timestamp: '2024-01-20 14:30:15', level: 'warn', message: 'Slow query detected: 1.2s on collection orders' },
          { timestamp: '2024-01-20 14:30:10', level: 'info', message: 'Checkpoint complete' },
        ]}
      ></sz-platform-service-detail-view>
    </div>
  `;

  public static demoGroups = ['Platform'];

  @property({ type: Object })
  public accessor service: IPlatformServiceDetail | null = null;

  @property({ type: Array })
  public accessor logs: IPlatformLogEntry[] = [];

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

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 24px;
      }

      .header-info {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .service-icon {
        width: 56px;
        height: 56px;
        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .service-icon svg {
        width: 28px;
        height: 28px;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .service-details {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .service-name {
        font-size: 22px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .service-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      }

      .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 9999px;
        font-size: 13px;
        font-weight: 500;
      }

      .status-badge.running {
        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
      }

      .status-badge.stopped {
        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      }

      .status-badge.error {
        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
      }

      .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
      }

      .header-actions {
        display: flex;
        gap: 8px;
      }

      .action-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .action-button:hover:not(:disabled) {
        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
      }

      .action-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      .action-button svg {
        width: 14px;
        height: 14px;
      }

      .action-button.danger {
        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
        border-color: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.3)')};
      }

      .action-button.danger:hover:not(:disabled) {
        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
      }

      .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 16px;
      }

      @media (max-width: 768px) {
        .grid {
          grid-template-columns: 1fr;
        }
      }

      .section {
        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        border-radius: 8px;
        overflow: hidden;
      }

      .section.full-width {
        grid-column: 1 / -1;
      }

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px;
        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
      }

      .section-title {
        font-size: 14px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .section-title svg {
        width: 16px;
        height: 16px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      }

      .section-content {
        padding: 16px;
      }

      .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
      }

      .info-row:last-child {
        border-bottom: none;
      }

      .info-label {
        font-size: 13px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      }

      .info-value {
        font-size: 13px;
        font-weight: 500;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
        font-family: monospace;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .copy-button {
        padding: 4px;
        background: transparent;
        border: none;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        cursor: pointer;
        border-radius: 4px;
        transition: all 200ms ease;
      }

      .copy-button:hover {
        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .metrics-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
      }

      @media (max-width: 600px) {
        .metrics-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      .metric-card {
        text-align: center;
        padding: 12px;
        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
        border-radius: 6px;
      }

      .metric-value {
        font-size: 20px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .metric-label {
        font-size: 12px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        margin-top: 2px;
      }

      .progress-bar {
        height: 4px;
        background: ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        border-radius: 2px;
        margin-top: 8px;
        overflow: hidden;
      }

      .progress-fill {
        height: 100%;
        border-radius: 2px;
        transition: width 300ms ease;
      }

      .progress-fill.low {
        background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
      }

      .progress-fill.medium {
        background: ${cssManager.bdTheme('#eab308', '#eab308')};
      }

      .progress-fill.high {
        background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
      }

      .log-container {
        background: ${cssManager.bdTheme('#18181b', '#09090b')};
        border-radius: 6px;
        padding: 12px;
        max-height: 300px;
        overflow-y: auto;
        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
        font-size: 12px;
        line-height: 1.6;
      }

      .log-entry {
        display: flex;
        gap: 12px;
        padding: 4px 0;
      }

      .log-timestamp {
        color: #71717a;
        flex-shrink: 0;
      }

      .log-level {
        flex-shrink: 0;
        width: 50px;
        text-transform: uppercase;
        font-weight: 500;
      }

      .log-level.info {
        color: #60a5fa;
      }

      .log-level.warn {
        color: #fbbf24;
      }

      .log-level.error {
        color: #f87171;
      }

      .log-level.debug {
        color: #a1a1aa;
      }

      .log-message {
        color: #fafafa;
        word-break: break-word;
      }

      .config-item {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
      }

      .config-item:last-child {
        border-bottom: none;
      }

      .config-key {
        font-size: 13px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      }

      .config-value {
        font-size: 13px;
        font-weight: 500;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .config-value.true {
        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
      }

      .config-value.false {
        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
      }

      .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      }
    `,
  ];

  public render(): TemplateResult {
    if (!this.service) {
      return html`<div class="empty-state">No service selected</div>`;
    }

    return html`
      <div class="header">
        <div class="header-info">
          <div class="service-icon">
            ${this.renderServiceIcon()}
          </div>
          <div class="service-details">
            <div class="service-name">${this.service.name}</div>
            <div class="service-meta">
              <span class="status-badge ${this.service.status}">
                <span class="status-dot"></span>
                ${this.service.status.charAt(0).toUpperCase() + this.service.status.slice(1)}
              </span>
              <span>Version ${this.service.version}</span>
            </div>
          </div>
        </div>
        <div class="header-actions">
          ${this.service.status === 'running' ? html`
            <button class="action-button" ?disabled=${this.actionLoading} @click=${() => this.handleRestart()}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="23 4 23 10 17 10"></polyline>
                <polyline points="1 20 1 14 7 14"></polyline>
                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
              </svg>
              Restart
            </button>
            <button class="action-button danger" ?disabled=${this.actionLoading} @click=${() => this.handleStop()}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="6" y="6" width="12" height="12" rx="1"></rect>
              </svg>
              Stop
            </button>
          ` : html`
            <button class="action-button" ?disabled=${this.actionLoading} @click=${() => this.handleStart()}>
              <svg viewBox="0 0 24 24" fill="currentColor">
                <polygon points="5,3 19,12 5,21"></polygon>
              </svg>
              Start
            </button>
          `}
        </div>
      </div>

      <div class="grid">
        <!-- Connection Info -->
        <div class="section">
          <div class="section-header">
            <div class="section-title">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
              </svg>
              Connection
            </div>
          </div>
          <div class="section-content">
            <div class="info-row">
              <span class="info-label">Host</span>
              <span class="info-value">
                ${this.service.host}
                <button class="copy-button" @click=${() => this.copyToClipboard(this.service!.host)}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                  </svg>
                </button>
              </span>
            </div>
            <div class="info-row">
              <span class="info-label">Port</span>
              <span class="info-value">${this.service.port}</span>
            </div>
            ${this.service.credentials?.username ? html`
              <div class="info-row">
                <span class="info-label">Username</span>
                <span class="info-value">
                  ${this.service.credentials.username}
                  <button class="copy-button" @click=${() => this.copyToClipboard(this.service!.credentials!.username!)}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg>
                  </button>
                </span>
              </div>
              <div class="info-row">
                <span class="info-label">Password</span>
                <span class="info-value">••••••••</span>
              </div>
            ` : ''}
            ${this.service.credentials?.accessKey ? html`
              <div class="info-row">
                <span class="info-label">Access Key</span>
                <span class="info-value">
                  ${this.service.credentials.accessKey}
                  <button class="copy-button" @click=${() => this.copyToClipboard(this.service!.credentials!.accessKey!)}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg>
                  </button>
                </span>
              </div>
              <div class="info-row">
                <span class="info-label">Secret Key</span>
                <span class="info-value">••••••••</span>
              </div>
            ` : ''}
          </div>
        </div>

        <!-- Configuration -->
        <div class="section">
          <div class="section-header">
            <div class="section-title">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="3"></circle>
                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
              </svg>
              Configuration
            </div>
          </div>
          <div class="section-content">
            ${Object.entries(this.service.config).map(([key, value]) => html`
              <div class="config-item">
                <span class="config-key">${this.formatConfigKey(key)}</span>
                <span class="config-value ${typeof value === 'boolean' ? (value ? 'true' : 'false') : ''}">${this.formatConfigValue(value)}</span>
              </div>
            `)}
          </div>
        </div>

        <!-- Metrics -->
        ${this.service.metrics ? html`
          <div class="section full-width">
            <div class="section-header">
              <div class="section-title">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <line x1="18" y1="20" x2="18" y2="10"></line>
                  <line x1="12" y1="20" x2="12" y2="4"></line>
                  <line x1="6" y1="20" x2="6" y2="14"></line>
                </svg>
                Resource Usage
              </div>
            </div>
            <div class="section-content">
              <div class="metrics-grid">
                <div class="metric-card">
                  <div class="metric-value">${this.service.metrics.cpu}%</div>
                  <div class="metric-label">CPU</div>
                  <div class="progress-bar">
                    <div class="progress-fill ${this.getProgressClass(this.service.metrics.cpu)}" style="width: ${this.service.metrics.cpu}%"></div>
                  </div>
                </div>
                <div class="metric-card">
                  <div class="metric-value">${this.service.metrics.memory}%</div>
                  <div class="metric-label">Memory</div>
                  <div class="progress-bar">
                    <div class="progress-fill ${this.getProgressClass(this.service.metrics.memory)}" style="width: ${this.service.metrics.memory}%"></div>
                  </div>
                </div>
                <div class="metric-card">
                  <div class="metric-value">${this.service.metrics.storage}%</div>
                  <div class="metric-label">Storage</div>
                  <div class="progress-bar">
                    <div class="progress-fill ${this.getProgressClass(this.service.metrics.storage)}" style="width: ${this.service.metrics.storage}%"></div>
                  </div>
                </div>
                ${this.service.metrics.connections !== undefined ? html`
                  <div class="metric-card">
                    <div class="metric-value">${this.service.metrics.connections}</div>
                    <div class="metric-label">Connections</div>
                  </div>
                ` : ''}
              </div>
            </div>
          </div>
        ` : ''}

        <!-- Logs -->
        <div class="section full-width">
          <div class="section-header">
            <div class="section-title">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="4 17 10 11 4 5"></polyline>
                <line x1="12" y1="19" x2="20" y2="19"></line>
              </svg>
              Logs
            </div>
          </div>
          <div class="section-content">
            <div class="log-container">
              ${this.logs.length > 0 ? this.logs.map(log => html`
                <div class="log-entry">
                  <span class="log-timestamp">${log.timestamp}</span>
                  <span class="log-level ${log.level}">${log.level}</span>
                  <span class="log-message">${log.message}</span>
                </div>
              `) : html`
                <div style="color: #71717a; text-align: center; padding: 20px;">No logs available</div>
              `}
            </div>
          </div>
        </div>
      </div>
    `;
  }

  private renderServiceIcon(): TemplateResult {
    const type = this.service?.type;

    switch (type) {
      case 'mongodb':
        return html`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>`;
      case 'minio':
        return html`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18-.21 0-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9z"/></svg>`;
      case 'clickhouse':
        return html`<svg viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="2" width="6" height="20"/><rect x="9" y="7" width="6" height="15"/><rect x="16" y="12" width="6" height="10"/></svg>`;
      case 'redis':
        return html`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>`;
      default:
        return html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>`;
    }
  }

  private getProgressClass(value: number): string {
    if (value < 50) return 'low';
    if (value < 80) return 'medium';
    return 'high';
  }

  private formatConfigKey(key: string): string {
    return key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
  }

  private formatConfigValue(value: any): string {
    if (typeof value === 'boolean') return value ? 'Enabled' : 'Disabled';
    return String(value);
  }

  private copyToClipboard(text: string) {
    navigator.clipboard.writeText(text);
    this.dispatchEvent(new CustomEvent('copy', { detail: text, bubbles: true, composed: true }));
  }

  private handleStart() {
    this.dispatchEvent(new CustomEvent('start', { detail: this.service, bubbles: true, composed: true }));
  }

  private handleStop() {
    this.dispatchEvent(new CustomEvent('stop', { detail: this.service, bubbles: true, composed: true }));
  }

  private handleRestart() {
    this.dispatchEvent(new CustomEvent('restart', { detail: this.service, bubbles: true, composed: true }));
  }
}