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

@customElement('gitops-view-overview')
export class GitopsViewOverview extends DeesElement {
  @state()
  accessor connectionsState: appstate.IConnectionsState = {
    connections: [],
    activeConnectionId: null,
  };

  @state()
  accessor dataState: appstate.IDataState = {
    projects: [],
    groups: [],
    secrets: [],
    pipelines: [],
    pipelineJobs: [],
    currentJobLog: '',
  };

  constructor() {
    super();
    const connSub = appstate.connectionsStatePart
      .select((s) => s)
      .subscribe((s) => { this.connectionsState = s; });
    this.rxSubscriptions.push(connSub);

    const dataSub = appstate.dataStatePart
      .select((s) => s)
      .subscribe((s) => { this.dataState = s; });
    this.rxSubscriptions.push(dataSub);
  }

  public static styles = [
    cssManager.defaultStyles,
    viewHostCss,
    css`
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
      }
      .stat-card {
        background: #1a1a2e;
        border: 1px solid #333;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
      }
      .stat-value {
        font-size: 36px;
        font-weight: 700;
        color: #00acff;
        margin-bottom: 8px;
      }
      .stat-label {
        font-size: 14px;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 1px;
      }
    `,
  ];

  public render(): TemplateResult {
    const connCount = this.connectionsState.connections.length;
    const projCount = this.dataState.projects.length;
    const groupCount = this.dataState.groups.length;
    const pipelineCount = this.dataState.pipelines.length;
    const failedPipelines = this.dataState.pipelines.filter((p) => p.status === 'failed').length;

    return html`
      <div class="view-title">Overview</div>
      <div class="view-description">GitOps dashboard - manage your Gitea and GitLab instances</div>
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-value">${connCount}</div>
          <div class="stat-label">Connections</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">${projCount}</div>
          <div class="stat-label">Projects</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">${groupCount}</div>
          <div class="stat-label">Groups</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">${pipelineCount}</div>
          <div class="stat-label">Pipelines</div>
        </div>
        <div class="stat-card">
          <div class="stat-value" style="color: ${failedPipelines > 0 ? '#ff4444' : '#00ff88'}">${failedPipelines}</div>
          <div class="stat-label">Failed Pipelines</div>
        </div>
      </div>
    `;
  }
}