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

declare global {
  interface HTMLElementTagNameMap {
    'sg-dashboard-view': SgDashboardView;
  }
}

@customElement('sg-dashboard-view')
export class SgDashboardView extends DeesElement {
  public static demo = () => html`
    <div style="padding: 24px; max-width: 1200px; background: #09090b;">
      <sg-dashboard-view
        .stats=${{
          organizationCount: 5,
          packageCount: 128,
          totalDownloads: 45230,
          tokenCount: 12,
        }}
        .recentPackages=${[
          { id: '1', name: '@myorg/web-framework', protocol: 'npm', organizationId: 'org1', repositoryId: 'repo1', latestVersion: '3.2.1', isPrivate: false, downloadCount: 1240, updatedAt: '2026-03-19T10:30:00Z', description: 'Modern web framework' },
          { id: '2', name: 'myorg/api-gateway', protocol: 'oci', organizationId: 'org1', repositoryId: 'repo2', latestVersion: 'v1.8.0', isPrivate: true, downloadCount: 890, updatedAt: '2026-03-18T14:20:00Z', description: 'API gateway image' },
          { id: '3', name: 'data-utils', protocol: 'pypi', organizationId: 'org2', repositoryId: 'repo3', latestVersion: '0.9.4', isPrivate: false, downloadCount: 320, updatedAt: '2026-03-17T08:15:00Z' },
        ]}
        .organizations=${[
          { id: 'org1', name: 'myorg', displayName: 'My Organization', isPublic: true, memberCount: 8, createdAt: '2025-06-01' },
          { id: 'org2', name: 'acme', displayName: 'ACME Corp', isPublic: false, memberCount: 25, createdAt: '2025-01-15' },
        ]}
      ></sg-dashboard-view>
    </div>
  `;

  public static demoGroups = ['Dashboard'];

  @property({ type: Object })
  public accessor stats: ISgDashboardStats = {
    organizationCount: 0,
    packageCount: 0,
    totalDownloads: 0,
    tokenCount: 0,
  };

  @property({ type: Array })
  public accessor recentPackages: ISgPackage[] = [];

  @property({ type: Array })
  public accessor organizations: ISgOrganization[] = [];

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

      .dashboard {
        display: flex;
        flex-direction: column;
        gap: 32px;
      }

      .page-title {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: ${cssManager.bdTheme('#111', '#fff')};
      }

      /* Stats grid */
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1px;
        background: ${cssManager.bdTheme('#e5e5e5', '#333')};
        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
      }

      .stat-card {
        background: ${cssManager.bdTheme('#fff', '#111')};
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .stat-label {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: ${cssManager.bdTheme('#888', '#777')};
      }

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

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

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#111', '#fff')};
      }

      .section-action {
        font-size: 13px;
        color: ${cssManager.bdTheme('#666', '#999')};
        cursor: pointer;
        background: transparent;
        border: 1px solid ${cssManager.bdTheme('#ddd', '#333')};
        padding: 6px 12px;
        transition: all 150ms ease;
      }

      .section-action:hover {
        border-color: ${cssManager.bdTheme('#999', '#666')};
        color: ${cssManager.bdTheme('#111', '#fff')};
      }

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

      .package-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        background: ${cssManager.bdTheme('#fff', '#111')};
        border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
        cursor: pointer;
        transition: background 100ms ease;
      }

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

      .package-row:hover {
        background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
      }

      .package-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
      }

      .package-name {
        font-size: 14px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#111', '#fff')};
        font-family: 'JetBrains Mono', monospace;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

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

      .package-right {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
      }

      .package-version {
        font-size: 12px;
        font-family: 'JetBrains Mono', monospace;
        color: ${cssManager.bdTheme('#666', '#999')};
        background: ${cssManager.bdTheme('#f5f5f5', '#1a1a1a')};
        padding: 2px 8px;
        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
      }

      .package-downloads {
        font-size: 12px;
        color: ${cssManager.bdTheme('#888', '#777')};
        font-family: 'JetBrains Mono', monospace;
      }

      /* Orgs grid */
      .orgs-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1px;
        background: ${cssManager.bdTheme('#e5e5e5', '#333')};
        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
      }

      .org-card {
        background: ${cssManager.bdTheme('#fff', '#111')};
        padding: 16px;
        cursor: pointer;
        transition: background 100ms ease;
      }

      .org-card:hover {
        background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
      }

      .org-name {
        font-size: 15px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#111', '#fff')};
        margin-bottom: 4px;
      }

      .org-handle {
        font-size: 12px;
        font-family: 'JetBrains Mono', monospace;
        color: ${cssManager.bdTheme('#888', '#777')};
        margin-bottom: 8px;
      }

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

      /* Quick actions */
      .quick-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .quick-action-btn {
        padding: 8px 16px;
        background: transparent;
        border: 1px solid ${cssManager.bdTheme('#ddd', '#333')};
        font-size: 13px;
        font-weight: 500;
        color: ${cssManager.bdTheme('#333', '#ddd')};
        cursor: pointer;
        transition: all 150ms ease;
      }

      .quick-action-btn:hover {
        background: ${cssManager.bdTheme('#111', '#fff')};
        color: ${cssManager.bdTheme('#fff', '#111')};
        border-color: ${cssManager.bdTheme('#111', '#fff')};
      }

      .empty-state {
        padding: 32px;
        text-align: center;
        color: ${cssManager.bdTheme('#888', '#777')};
        font-size: 14px;
        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
        background: ${cssManager.bdTheme('#fff', '#111')};
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="dashboard">
        <div class="page-title">Dashboard</div>

        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-label">Organizations</div>
            <div class="stat-value">${this.stats.organizationCount}</div>
          </div>
          <div class="stat-card">
            <div class="stat-label">Packages</div>
            <div class="stat-value">${this.stats.packageCount}</div>
          </div>
          <div class="stat-card">
            <div class="stat-label">Total Downloads</div>
            <div class="stat-value">${this.formatNumber(this.stats.totalDownloads)}</div>
          </div>
          <div class="stat-card">
            <div class="stat-label">API Tokens</div>
            <div class="stat-value">${this.stats.tokenCount}</div>
          </div>
        </div>

        <div class="section">
          <div class="section-header">
            <div class="section-title">Recent Packages</div>
            <button class="section-action" @click=${() => this.navigate('packages')}>View all</button>
          </div>
          ${this.recentPackages.length > 0
            ? html`
                <div class="package-list">
                  ${this.recentPackages.map(
                    (pkg) => html`
                      <div class="package-row" @click=${() => this.navigate('package', pkg.id)}>
                        <div class="package-info">
                          <div class="package-name">${pkg.name}</div>
                          <div class="package-meta">
                            <sg-protocol-badge .protocol=${pkg.protocol}></sg-protocol-badge>
                            ${pkg.description || ''}
                          </div>
                        </div>
                        <div class="package-right">
                          ${pkg.latestVersion ? html`<span class="package-version">${pkg.latestVersion}</span>` : ''}
                          <span class="package-downloads">${this.formatNumber(pkg.downloadCount)} pulls</span>
                        </div>
                      </div>
                    `
                  )}
                </div>
              `
            : html`<div class="empty-state">No packages published yet</div>`}
        </div>

        <div class="section">
          <div class="section-header">
            <div class="section-title">Organizations</div>
            <button class="section-action" @click=${() => this.navigate('org')}>View all</button>
          </div>
          ${this.organizations.length > 0
            ? html`
                <div class="orgs-grid">
                  ${this.organizations.map(
                    (org) => html`
                      <div class="org-card" @click=${() => this.navigate('org', org.id)}>
                        <div class="org-name">${org.displayName}</div>
                        <div class="org-handle">@${org.name}</div>
                        <div class="org-meta">
                          <span>${org.memberCount} members</span>
                          <span>${org.isPublic ? 'Public' : 'Private'}</span>
                        </div>
                      </div>
                    `
                  )}
                </div>
              `
            : html`<div class="empty-state">No organizations yet</div>`}
        </div>

        <div class="section">
          <div class="section-title">Quick Actions</div>
          <div class="quick-actions">
            <button class="quick-action-btn" @click=${() => this.navigate('org')}>Browse Organizations</button>
            <button class="quick-action-btn" @click=${() => this.navigate('packages')}>Browse Packages</button>
            <button class="quick-action-btn" @click=${() => this.navigate('tokens')}>Manage Tokens</button>
          </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 navigate(type: 'org' | 'package' | 'tokens' | 'packages', id?: string) {
    this.dispatchEvent(
      new CustomEvent('navigate', {
        detail: { type, id },
        bubbles: true,
        composed: true,
      })
    );
  }
}