import { Component, inject, signal, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { NgIcon, provideIcons } from '@ng-icons/core';
import {
  lucideServer,
  lucidePlus,
  lucideTrash2,
  lucideCheck,
  lucideX,
  lucideSettings,
  lucideRefreshCw,
  lucideGlobe,
  lucideArrowLeft,
} from '@ng-icons/lucide';

import { ServerDirectoryService, ServerEndpoint } from '../../core/services/server-directory.service';

@Component({
  selector: 'app-settings',
  standalone: true,
  imports: [CommonModule, FormsModule, NgIcon],
  viewProviders: [
    provideIcons({
      lucideServer,
      lucidePlus,
      lucideTrash2,
      lucideCheck,
      lucideX,
      lucideSettings,
      lucideRefreshCw,
      lucideGlobe,
      lucideArrowLeft,
    }),
  ],
  template: `
    <div class="p-6 max-w-2xl mx-auto">
      <div class="flex items-center gap-3 mb-6">
        <button
          (click)="goBack()"
          class="p-2 hover:bg-secondary rounded-lg transition-colors"
          title="Go back"
        >
          <ng-icon name="lucideArrowLeft" class="w-5 h-5 text-muted-foreground" />
        </button>
        <ng-icon name="lucideSettings" class="w-6 h-6 text-primary" />
        <h1 class="text-2xl font-bold text-foreground">Settings</h1>
      </div>

      <!-- Server Endpoints Section -->
      <div class="bg-card border border-border rounded-lg p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center gap-2">
            <ng-icon name="lucideGlobe" class="w-5 h-5 text-muted-foreground" />
            <h2 class="text-lg font-semibold text-foreground">Server Endpoints</h2>
          </div>
          <button
            (click)="testAllServers()"
            [disabled]="isTesting()"
            class="flex items-center gap-2 px-3 py-1.5 text-sm bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors disabled:opacity-50"
          >
            <ng-icon name="lucideRefreshCw" class="w-4 h-4" [class.animate-spin]="isTesting()" />
            Test All
          </button>
        </div>

        <p class="text-sm text-muted-foreground mb-4">
          Add multiple server directories to search for rooms across different networks.
          The active server will be used for creating and registering new rooms.
        </p>

        <!-- Server List -->
        <div class="space-y-3 mb-4">
          @for (server of servers(); track server.id) {
            <div
              class="flex items-center gap-3 p-3 rounded-lg border transition-colors"
              [class.border-primary]="server.isActive"
              [class.bg-primary/5]="server.isActive"
              [class.border-border]="!server.isActive"
              [class.bg-secondary/30]="!server.isActive"
            >
              <!-- Status Indicator -->
              <div
                class="w-3 h-3 rounded-full flex-shrink-0"
                [class.bg-green-500]="server.status === 'online'"
                [class.bg-red-500]="server.status === 'offline'"
                [class.bg-yellow-500]="server.status === 'checking'"
                [class.bg-muted]="server.status === 'unknown'"
                [title]="server.status"
              ></div>

              <!-- Server Info -->
              <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2">
                  <span class="font-medium text-foreground truncate">{{ server.name }}</span>
                  @if (server.isActive) {
                    <span class="text-xs bg-primary text-primary-foreground px-2 py-0.5 rounded-full">Active</span>
                  }
                </div>
                <p class="text-sm text-muted-foreground truncate">{{ server.url }}</p>
                @if (server.latency !== undefined && server.status === 'online') {
                  <p class="text-xs text-muted-foreground">{{ server.latency }}ms</p>
                }
              </div>

              <!-- Actions -->
              <div class="flex items-center gap-2 flex-shrink-0">
                @if (!server.isActive) {
                  <button
                    (click)="setActiveServer(server.id)"
                    class="p-2 hover:bg-secondary rounded-lg transition-colors"
                    title="Set as active"
                  >
                    <ng-icon name="lucideCheck" class="w-4 h-4 text-muted-foreground hover:text-primary" />
                  </button>
                }
                @if (!server.isDefault) {
                  <button
                    (click)="removeServer(server.id)"
                    class="p-2 hover:bg-destructive/10 rounded-lg transition-colors"
                    title="Remove server"
                  >
                    <ng-icon name="lucideTrash2" class="w-4 h-4 text-muted-foreground hover:text-destructive" />
                  </button>
                }
              </div>
            </div>
          }
        </div>

        <!-- Add New Server -->
        <div class="border-t border-border pt-4">
          <h3 class="text-sm font-medium text-foreground mb-3">Add New Server</h3>
          <div class="flex gap-3">
            <div class="flex-1 space-y-2">
              <input
                type="text"
                [(ngModel)]="newServerName"
                placeholder="Server name (e.g., My Server)"
                class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
              />
              <input
                type="url"
                [(ngModel)]="newServerUrl"
                placeholder="Server URL (e.g., http://localhost:3001)"
                class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
              />
            </div>
            <button
              (click)="addServer()"
              [disabled]="!newServerName || !newServerUrl"
              class="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed self-end"
            >
              <ng-icon name="lucidePlus" class="w-5 h-5" />
            </button>
          </div>
          @if (addError()) {
            <p class="text-sm text-destructive mt-2">{{ addError() }}</p>
          }
        </div>
      </div>

      <!-- Connection Settings -->
      <div class="bg-card border border-border rounded-lg p-6">
        <div class="flex items-center gap-2 mb-4">
          <ng-icon name="lucideServer" class="w-5 h-5 text-muted-foreground" />
          <h2 class="text-lg font-semibold text-foreground">Connection Settings</h2>
        </div>

        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <div>
              <p class="font-medium text-foreground">Auto-reconnect</p>
              <p class="text-sm text-muted-foreground">Automatically reconnect when connection is lost</p>
            </div>
            <label class="relative inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                [(ngModel)]="autoReconnect"
                (change)="saveConnectionSettings()"
                class="sr-only peer"
              />
              <div class="w-11 h-6 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
            </label>
          </div>

          <div class="flex items-center justify-between">
            <div>
              <p class="font-medium text-foreground">Search all servers</p>
              <p class="text-sm text-muted-foreground">Search across all configured server directories</p>
            </div>
            <label class="relative inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                [(ngModel)]="searchAllServers"
                (change)="saveConnectionSettings()"
                class="sr-only peer"
              />
              <div class="w-11 h-6 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
            </label>
          </div>
        </div>
      </div>
    </div>
  `,
})
export class SettingsComponent implements OnInit {
  private serverDirectory = inject(ServerDirectoryService);
  private router = inject(Router);

  servers = this.serverDirectory.servers;
  isTesting = signal(false);
  addError = signal<string | null>(null);

  newServerName = '';
  newServerUrl = '';
  autoReconnect = true;
  searchAllServers = true;

  ngOnInit(): void {
    this.loadConnectionSettings();
  }

  addServer(): void {
    this.addError.set(null);

    // Validate URL
    try {
      new URL(this.newServerUrl);
    } catch {
      this.addError.set('Please enter a valid URL');
      return;
    }

    // Check for duplicates
    if (this.servers().some((s) => s.url === this.newServerUrl)) {
      this.addError.set('This server URL already exists');
      return;
    }

    this.serverDirectory.addServer({
      name: this.newServerName.trim(),
      url: this.newServerUrl.trim().replace(/\/$/, ''), // Remove trailing slash
    });

    // Clear form
    this.newServerName = '';
    this.newServerUrl = '';

    // Test the new server
    const servers = this.servers();
    const newServer = servers[servers.length - 1];
    if (newServer) {
      this.serverDirectory.testServer(newServer.id);
    }
  }

  removeServer(id: string): void {
    this.serverDirectory.removeServer(id);
  }

  setActiveServer(id: string): void {
    this.serverDirectory.setActiveServer(id);
  }

  async testAllServers(): Promise<void> {
    this.isTesting.set(true);
    await this.serverDirectory.testAllServers();
    this.isTesting.set(false);
  }

  loadConnectionSettings(): void {
    const settings = localStorage.getItem('metoyou_connection_settings');
    if (settings) {
      const parsed = JSON.parse(settings);
      this.autoReconnect = parsed.autoReconnect ?? true;
      this.searchAllServers = parsed.searchAllServers ?? true;
      this.serverDirectory.setSearchAllServers(this.searchAllServers);
    }
  }

  saveConnectionSettings(): void {
    localStorage.setItem(
      'metoyou_connection_settings',
      JSON.stringify({
        autoReconnect: this.autoReconnect,
        searchAllServers: this.searchAllServers,
      })
    );
    this.serverDirectory.setSearchAllServers(this.searchAllServers);
  }

  goBack(): void {
    this.router.navigate(['/']);
  }
}