import {
  DeesElement,
  customElement,
  html,
  css,
  cssManager,
  property,
  type TemplateResult,
} from '@design.estate/dees-element';
import type { ISgPackageDetail, ISgPackageVersion } from '../interfaces.js';
import './sg-protocol-badge.js';
import './sg-install-snippet.js';

declare global {
  interface HTMLElementTagNameMap {
    'sg-package-detail-view': SgPackageDetailView;
  }
}

@customElement('sg-package-detail-view')
export class SgPackageDetailView extends DeesElement {
  public static demo = () => html`
    <div style="padding: 24px; max-width: 1200px; background: #09090b;">
      <sg-package-detail-view
        .package=${{
          id: 'p1',
          name: '@myorg/web-framework',
          description: 'Modern web framework for building full-stack TypeScript applications with first-class support for SSR, routing, and state management.',
          protocol: 'npm',
          organizationId: 'org1',
          repositoryId: 'r1',
          latestVersion: '3.2.1',
          isPrivate: false,
          downloadCount: 12400,
          updatedAt: '2026-03-19T10:30:00Z',
          distTags: { latest: '3.2.1', next: '4.0.0-beta.1' },
          versions: ['3.2.1', '3.2.0', '3.1.0', '3.0.0', '2.5.0'],
          starCount: 42,
          storageBytes: 52428800,
          createdAt: '2025-01-10T08:00:00Z',
        }}
        .versions=${[
          { version: '3.2.1', publishedAt: '2026-03-19T10:30:00Z', size: 1048576, downloads: 5200 },
          { version: '3.2.0', publishedAt: '2026-03-10T14:00:00Z', size: 1024000, downloads: 4800 },
          { version: '3.1.0', publishedAt: '2026-02-15T09:00:00Z', size: 998400, downloads: 1800 },
          { version: '3.0.0', publishedAt: '2026-01-01T12:00:00Z', size: 921600, downloads: 600 },
        ]}
      ></sg-package-detail-view>
    </div>
  `;

  public static demoGroups = ['Packages'];

  @property({ type: Object })
  public accessor package: ISgPackageDetail = {
    id: '',
    name: '',
    protocol: 'npm',
    organizationId: '',
    repositoryId: '',
    isPrivate: false,
    downloadCount: 0,
    updatedAt: '',
    distTags: {},
    versions: [],
    starCount: 0,
    storageBytes: 0,
    createdAt: '',
  };

  @property({ type: Array })
  public accessor versions: ISgPackageVersion[] = [];

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        color: ${cssManager.bdTheme('#111', '#fff')};
      }

      .container {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .back-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        background: transparent;
        border: none;
        font-size: 13px;
        color: ${cssManager.bdTheme('#666', '#999')};
        cursor: pointer;
        transition: color 150ms ease;
      }

      .back-btn:hover {
        color: ${cssManager.bdTheme('#111', '#fff')};
      }

      /* Layout */
      .content-grid {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 24px;
      }

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

      /* Package header */
      .pkg-header {
        padding: 24px;
        background: ${cssManager.bdTheme('#fff', '#111')};
        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .pkg-title-row {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .pkg-name {
        font-size: 22px;
        font-weight: 700;
        font-family: 'JetBrains Mono', monospace;
        letter-spacing: -0.01em;
      }

      .private-badge {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        padding: 2px 6px;
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
      }

      .pkg-description {
        font-size: 14px;
        color: ${cssManager.bdTheme('#666', '#aaa')};
        line-height: 1.6;
      }

      .dist-tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .dist-tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-family: 'JetBrains Mono', monospace;
        padding: 2px 8px;
        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
        background: ${cssManager.bdTheme('#f5f5f5', '#1a1a1a')};
        color: ${cssManager.bdTheme('#666', '#999')};
      }

      .dist-tag-name {
        font-weight: 600;
        color: ${cssManager.bdTheme('#111', '#fff')};
      }

      /* Sidebar */
      .sidebar {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .sidebar-section {
        background: ${cssManager.bdTheme('#fff', '#111')};
        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .sidebar-title {
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: ${cssManager.bdTheme('#888', '#777')};
      }

      .sidebar-stat {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
      }

      .sidebar-stat-label {
        color: ${cssManager.bdTheme('#888', '#777')};
      }

      .sidebar-stat-value {
        font-family: 'JetBrains Mono', monospace;
        font-weight: 600;
        color: ${cssManager.bdTheme('#111', '#fff')};
      }

      /* Sections */
      .section {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .section-title {
        font-size: 16px;
        font-weight: 600;
      }

      /* Version list */
      .version-list {
        display: flex;
        flex-direction: column;
        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
      }

      .version-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: ${cssManager.bdTheme('#fff', '#111')};
        border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
      }

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

      .version-info {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .version-number {
        font-size: 14px;
        font-weight: 600;
        font-family: 'JetBrains Mono', monospace;
        color: ${cssManager.bdTheme('#111', '#fff')};
      }

      .version-meta {
        font-size: 12px;
        color: ${cssManager.bdTheme('#888', '#777')};
        display: flex;
        gap: 12px;
      }

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

      .delete-version-btn {
        padding: 4px 10px;
        background: transparent;
        border: 1px solid rgba(239, 68, 68, 0.3);
        font-size: 11px;
        color: #ef4444;
        cursor: pointer;
        transition: all 150ms ease;
      }

      .delete-version-btn:hover {
        background: rgba(239, 68, 68, 0.15);
      }

      /* Danger zone */
      .danger-zone {
        padding: 20px;
        border: 1px solid rgba(239, 68, 68, 0.3);
        background: ${cssManager.bdTheme('#fff', '#111')};
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .danger-title {
        font-size: 14px;
        font-weight: 600;
        color: #ef4444;
      }

      .danger-text {
        font-size: 13px;
        color: ${cssManager.bdTheme('#666', '#aaa')};
      }

      .danger-btn {
        align-self: flex-start;
        padding: 8px 16px;
        background: transparent;
        border: 1px solid #ef4444;
        font-size: 13px;
        font-weight: 600;
        color: #ef4444;
        cursor: pointer;
        transition: all 150ms ease;
      }

      .danger-btn:hover {
        background: #ef4444;
        color: #fff;
      }
    `,
  ];

  public render(): TemplateResult {
    const pkg = this.package;

    return html`
      <div class="container">
        <button class="back-btn" @click=${() => this.emitEvent('back', {})}>
          \u2190 Back to packages
        </button>

        <div class="content-grid">
          <div class="main-content">
            <div class="pkg-header">
              <div class="pkg-title-row">
                <sg-protocol-badge .protocol=${pkg.protocol}></sg-protocol-badge>
                <span class="pkg-name">${pkg.name}</span>
                ${pkg.isPrivate ? html`<span class="private-badge">Private</span>` : ''}
              </div>
              ${pkg.description ? html`<div class="pkg-description">${pkg.description}</div>` : ''}
              ${Object.keys(pkg.distTags).length > 0
                ? html`
                    <div class="dist-tags">
                      ${Object.entries(pkg.distTags).map(
                        ([tag, version]) => html`
                          <span class="dist-tag">
                            <span class="dist-tag-name">${tag}</span>: ${version}
                          </span>
                        `
                      )}
                    </div>
                  `
                : ''}
            </div>

            <div class="section" style="margin-top: 24px;">
              <div class="section-title">Install</div>
              <sg-install-snippet
                .protocol=${pkg.protocol}
                .packageName=${pkg.name}
              ></sg-install-snippet>
            </div>

            <div class="section" style="margin-top: 24px;">
              <div class="section-title">Versions (${this.versions.length})</div>
              ${this.versions.length > 0
                ? html`
                    <div class="version-list">
                      ${this.versions.map(
                        (v) => html`
                          <div class="version-row">
                            <div class="version-info">
                              <span class="version-number">${v.version}</span>
                              <div class="version-meta">
                                <span>${this.formatDate(v.publishedAt)}</span>
                                <span>${this.formatBytes(v.size)}</span>
                                <span>${this.formatNumber(v.downloads)} downloads</span>
                              </div>
                            </div>
                            <div class="version-actions">
                              <button
                                class="delete-version-btn"
                                @click=${() =>
                                  this.emitEvent('delete-version', {
                                    packageId: pkg.id,
                                    version: v.version,
                                  })}
                              >Delete</button>
                            </div>
                          </div>
                        `
                      )}
                    </div>
                  `
                : ''}
            </div>

            <div class="section" style="margin-top: 24px;">
              <div class="danger-zone">
                <div class="danger-title">Danger Zone</div>
                <div class="danger-text">
                  Deleting this package will permanently remove all versions and associated data.
                  This action cannot be undone.
                </div>
                <button
                  class="danger-btn"
                  @click=${() => this.emitEvent('delete', { packageId: pkg.id })}
                >Delete Package</button>
              </div>
            </div>
          </div>

          <div class="sidebar">
            <div class="sidebar-section">
              <div class="sidebar-title">Stats</div>
              <div class="sidebar-stat">
                <span class="sidebar-stat-label">Downloads</span>
                <span class="sidebar-stat-value">${this.formatNumber(pkg.downloadCount)}</span>
              </div>
              <div class="sidebar-stat">
                <span class="sidebar-stat-label">Stars</span>
                <span class="sidebar-stat-value">${pkg.starCount}</span>
              </div>
              <div class="sidebar-stat">
                <span class="sidebar-stat-label">Versions</span>
                <span class="sidebar-stat-value">${pkg.versions.length}</span>
              </div>
              <div class="sidebar-stat">
                <span class="sidebar-stat-label">Total Size</span>
                <span class="sidebar-stat-value">${this.formatBytes(pkg.storageBytes)}</span>
              </div>
            </div>

            <div class="sidebar-section">
              <div class="sidebar-title">Info</div>
              <div class="sidebar-stat">
                <span class="sidebar-stat-label">Protocol</span>
                <span class="sidebar-stat-value">${pkg.protocol.toUpperCase()}</span>
              </div>
              <div class="sidebar-stat">
                <span class="sidebar-stat-label">Latest</span>
                <span class="sidebar-stat-value">${pkg.latestVersion || 'N/A'}</span>
              </div>
              <div class="sidebar-stat">
                <span class="sidebar-stat-label">Created</span>
                <span class="sidebar-stat-value">${this.formatDate(pkg.createdAt)}</span>
              </div>
              <div class="sidebar-stat">
                <span class="sidebar-stat-label">Updated</span>
                <span class="sidebar-stat-value">${this.formatDate(pkg.updatedAt)}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    `;
  }

  private formatNumber(n: number): string {
    if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
    if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
    return n.toString();
  }

  private formatBytes(bytes: number): string {
    if (bytes === 0) return '0 B';
    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(1024));
    return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${units[i]}`;
  }

  private formatDate(dateStr: string): string {
    if (!dateStr) return '';
    try {
      return new Date(dateStr).toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
      });
    } catch {
      return dateStr;
    }
  }

  private emitEvent(name: string, detail: Record<string, unknown>) {
    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
  }
}