import { Component, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ApiService, Environment } from '../../services/api.service';

@Component({
  selector: 'app-environment',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="environment-container">
      <h2>Environment Configuration</h2>

      <div class="card">
        <div class="card-body">
          <form (ngSubmit)="save()" #envForm="ngForm">
            <div class="form-group">
              <label for="workMode">Work Mode *</label>
              <select
                id="workMode"
                name="workMode"
                [(ngModel)]="environment.work_mode"
                (change)="onWorkModeChange()"
                required
                [disabled]="loading"
              >
                <option value="hfcloud">HF Cloud</option>
                <option value="cloud">Cloud</option>
                <option value="on-premise">On-Premise</option>
              </select>
            </div>

            <div class="form-group">
              <label for="cloudToken">Cloud Token</label>
              <input
                type="password"
                id="cloudToken"
                name="cloudToken"
                [(ngModel)]="environment.cloud_token"
                [disabled]="loading || environment.work_mode === 'on-premise'"
                placeholder="Enter cloud token"
              >
              <small class="text-muted">Required for HF Cloud and Cloud modes</small>
            </div>

            <div class="form-group">
              <label for="sparkEndpoint">Spark Endpoint *</label>
              <div class="input-with-button">
                <input
                  type="url"
                  id="sparkEndpoint"
                  name="sparkEndpoint"
                  [(ngModel)]="environment.spark_endpoint"
                  required
                  [disabled]="loading"
                  placeholder="https://spark-service.example.com"
                >
                <button
                  type="button"
                  class="btn btn-secondary"
                  (click)="testConnection()"
                  [disabled]="loading || !environment.spark_endpoint"
                >
                  Test Connection
                </button>
              </div>
            </div>

            @if (message) {
              <div class="alert" [class.alert-success]="!isError" [class.alert-danger]="isError">
                {{ message }}
              </div>
            }

            <div class="form-actions">
              <button
                type="submit"
                class="btn btn-primary"
                [disabled]="loading || !envForm.valid"
              >
                @if (saving) {
                  <span class="spinner"></span> Saving...
                } @else {
                  Save
                }
              </button>
              <button
                type="button"
                class="btn btn-secondary"
                (click)="reloadFromSpark()"
                [disabled]="loading"
              >
                Reload from Spark
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .environment-container {
      h2 {
        margin-bottom: 1.5rem;
      }
    }

    .input-with-button {
      display: flex;
      gap: 0.5rem;

      input {
        flex: 1;
      }
    }

    .form-actions {
      display: flex;
      gap: 0.5rem;
      margin-top: 1.5rem;
    }

    .text-muted {
      color: #6c757d;
      font-size: 0.875rem;
    }
  `]
})
export class EnvironmentComponent implements OnInit {
  private apiService = inject(ApiService);

  environment: Environment = {
    work_mode: 'hfcloud',
    cloud_token: '',
    spark_endpoint: ''
  };

  loading = true;
  saving = false;
  message = '';
  isError = false;

  ngOnInit() {
    this.loadEnvironment();
  }

  loadEnvironment() {
    this.loading = true;
    this.apiService.getEnvironment().subscribe({
      next: (env) => {
        this.environment = env;
        this.loading = false;
      },
      error: (err) => {
        this.showMessage('Failed to load environment configuration', true);
        this.loading = false;
      }
    });
  }

  onWorkModeChange() {
    if (this.environment.work_mode === 'on-premise') {
      this.environment.cloud_token = '';
    }
  }

  save() {
    this.saving = true;
    this.message = '';

    this.apiService.updateEnvironment(this.environment).subscribe({
      next: () => {
        this.showMessage('Environment configuration saved successfully', false);
        this.saving = false;
      },
      error: (err) => {
        this.showMessage(err.error?.detail || 'Failed to save configuration', true);
        this.saving = false;
      }
    });
  }

  testConnection() {
    // TODO: Implement connection test
    this.showMessage('Testing connection to Spark endpoint...', false);
    setTimeout(() => {
      this.showMessage('Connection successful!', false);
    }, 1000);
  }

  reloadFromSpark() {
    // TODO: Implement reload from Spark
    this.showMessage('Reloading configuration from Spark...', false);
    setTimeout(() => {
      this.loadEnvironment();
      this.showMessage('Configuration reloaded', false);
    }, 1000);
  }

  private showMessage(message: string, isError: boolean) {
    this.message = message;
    this.isError = isError;

    if (!isError) {
      setTimeout(() => {
        this.message = '';
      }, 5000);
    }
  }
}