import * as shared from './shared/index.js';
import * as appstate from '../appstate.js';
import {
  DeesElement,
  customElement,
  html,
  state,
  css,
  cssManager,
  type TemplateResult,
} from '@design.estate/dees-element';

@customElement('ob-view-domains')
export class ObViewDomains extends DeesElement {
  @state()
  accessor networkState: appstate.INetworkState = {
    targets: [],
    stats: null,
    trafficStats: null,
    dnsRecords: [],
    domains: [],
    gatewayDomains: [],
    gatewayDnsRecords: [],
    certificates: [],
  };

  constructor() {
    super();
    const networkSub = appstate.networkStatePart.select((s) => s).subscribe((newState) => {
      this.networkState = newState;
    });
    this.rxSubscriptions.push(networkSub);
  }

  public static styles = [
    cssManager.defaultStyles,
    shared.viewHostCss,
    css`
      .table {
        border: 1px solid var(--ci-shade-2, #e4e4e7);
        border-radius: 10px;
        overflow: hidden;
      }
      .row {
        display: grid;
        grid-template-columns: 2fr 1fr 120px 120px 140px;
        gap: 16px;
        align-items: center;
        padding: 14px 16px;
        border-bottom: 1px solid var(--ci-shade-2, #e4e4e7);
      }
      .row:last-child { border-bottom: none; }
      .header { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--ci-shade-5, #71717a); background: var(--ci-shade-1, #f4f4f5); }
      .domain { font-weight: 600; }
      .muted { color: var(--ci-shade-5, #71717a); font-size: 13px; }
      .badge { border-radius: 999px; padding: 3px 8px; background: var(--ci-shade-1, #f4f4f5); font-size: 12px; }
      a { color: var(--ci-primary, #2563eb); text-decoration: none; }
      .empty { padding: 32px; text-align: center; color: var(--ci-shade-5, #71717a); }
    `,
  ];

  async connectedCallback() {
    super.connectedCallback();
    await appstate.networkStatePart.dispatchAction(appstate.fetchGatewayDomainsAction, null);
  }

  public render(): TemplateResult {
    const domains = this.networkState.gatewayDomains;
    return html`
      <ob-sectionheading>Domains</ob-sectionheading>
      <div class="muted" style="margin-bottom: 16px;">
        Domains are managed in dcrouter. Onebox shows gateway visibility for deployed services.
      </div>
      <div class="table">
        <div class="row header">
          <span>Domain</span>
          <span>Source</span>
          <span>Authoritative</span>
          <span>Services</span>
          <span>Actions</span>
        </div>
        ${domains.length ? domains.map((domain) => html`
          <div class="row">
            <span>
              <span class="domain">${domain.name}</span>
              ${domain.providerId ? html`<div class="muted">Provider: ${domain.providerId}</div>` : ''}
            </span>
            <span><span class="badge">${domain.source || 'dcrouter'}</span></span>
            <span>${domain.authoritative ? 'Yes' : 'No'}</span>
            <span>${domain.serviceCount || 0}</span>
            <span>${domain.manageUrl ? html`<a href=${domain.manageUrl} target="_blank" rel="noopener">Manage in dcrouter</a>` : '-'}</span>
          </div>
        `) : html`<div class="empty">No gateway domains found. Configure a dcrouter gateway in Settings.</div>`}
      </div>
    `;
  }
}