import { Component, signal } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatRippleModule } from '@angular/material/core';
import { CommonModule } from '@angular/common';

interface DemoCredential {
  role: string;
  credential: string;
  description: string;
}

@Component({
  selector: 'app-login-select',
  standalone: true,
  imports: [CommonModule, RouterModule, MatButtonModule, MatIconModule, MatRippleModule],
  template: `
    <div class="login-select">
      <!-- Header -->
      <div class="login-header">
        <div class="header-glow"></div>
        <h1 class="login-title">Sign In</h1>
        <p class="login-subtitle">Select your authentication method</p>
      </div>

      <!-- Login Options -->
      <div class="login-options" role="list" aria-label="Login options">
        <!-- Department Login -->
        <a
          class="login-option"
          [routerLink]="['department']"
          matRipple
          [matRippleColor]="'rgba(99, 102, 241, 0.2)'"
          role="listitem"
        >
          <div class="option-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/>
            </svg>
          </div>
          <div class="option-text">
            <span class="option-title">Department</span>
            <span class="option-desc">Government officials</span>
          </div>
          <mat-icon class="option-arrow">chevron_right</mat-icon>
        </a>

        <!-- Citizen Login -->
        <a
          class="login-option citizen"
          [routerLink]="['digilocker']"
          matRipple
          [matRippleColor]="'rgba(16, 185, 129, 0.2)'"
          role="listitem"
        >
          <div class="option-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
          </div>
          <div class="option-text">
            <span class="option-title">Citizen</span>
            <span class="option-desc">DigiLocker verification</span>
          </div>
          <mat-icon class="option-arrow">chevron_right</mat-icon>
        </a>

        <!-- Admin Login -->
        <a
          class="login-option admin"
          [routerLink]="['email']"
          matRipple
          [matRippleColor]="'rgba(168, 85, 247, 0.2)'"
          role="listitem"
        >
          <div class="option-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M17 11c.34 0 .67.04 1 .09V6.27L10.5 3 3 6.27v4.91c0 4.54 3.2 8.79 7.5 9.82.55-.13 1.08-.32 1.6-.55-.69-.98-1.1-2.17-1.1-3.45 0-3.31 2.69-6 6-6z"/>
              <path d="M17 13c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 1.38c.62 0 1.12.51 1.12 1.12s-.51 1.12-1.12 1.12-1.12-.51-1.12-1.12.5-1.12 1.12-1.12zm0 5.37c-.93 0-1.74-.46-2.24-1.17.05-.72 1.51-1.08 2.24-1.08s2.19.36 2.24 1.08c-.5.71-1.31 1.17-2.24 1.17z"/>
            </svg>
          </div>
          <div class="option-text">
            <span class="option-title">Administrator</span>
            <span class="option-desc">Platform admins</span>
          </div>
          <mat-icon class="option-arrow">chevron_right</mat-icon>
        </a>
      </div>

      <!-- Demo Credentials Toggle -->
      <button class="demo-trigger" (click)="showDemoCredentials.set(!showDemoCredentials())">
        <mat-icon>{{ showDemoCredentials() ? 'expand_less' : 'science' }}</mat-icon>
        <span>{{ showDemoCredentials() ? 'Hide Demo Credentials' : 'View Demo Credentials' }}</span>
      </button>

      <!-- Collapsible Demo Credentials Panel -->
      <div class="demo-panel" [class.expanded]="showDemoCredentials()">
        <div class="demo-panel-content">
          <!-- Department Credentials -->
          <div class="demo-section">
            <div class="demo-section-header">
              <span class="demo-section-icon dept"></span>
              <span class="demo-section-title">Department</span>
            </div>
            <div class="demo-creds">
              <div class="cred-item" *ngFor="let cred of departmentCredentials">
                <span class="cred-label">{{ cred.role }}</span>
                <code class="cred-value">{{ cred.credential }}</code>
              </div>
            </div>
          </div>

          <!-- Citizen Credentials -->
          <div class="demo-section">
            <div class="demo-section-header">
              <span class="demo-section-icon citizen"></span>
              <span class="demo-section-title">Citizen</span>
            </div>
            <div class="demo-creds">
              <div class="cred-item" *ngFor="let cred of citizenCredentials">
                <span class="cred-label">{{ cred.role }}</span>
                <code class="cred-value">{{ cred.credential }}</code>
              </div>
            </div>
          </div>

          <!-- Admin Credentials -->
          <div class="demo-section">
            <div class="demo-section-header">
              <span class="demo-section-icon admin"></span>
              <span class="demo-section-title">Admin</span>
            </div>
            <div class="demo-creds">
              <div class="cred-item" *ngFor="let cred of adminCredentials">
                <span class="cred-label">{{ cred.role }}</span>
                <code class="cred-value">{{ cred.credential }}</code>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Footer -->
      <div class="login-footer">
        <a href="#" class="help-link">
          <mat-icon>help_outline</mat-icon>
          <span>Need help?</span>
        </a>
      </div>
    </div>
  `,
  styles: [
    `
      // =============================================================================
      // LOGIN SELECT - Dark Glass-Morphism Theme
      // Matches the blockchain landing page design
      // =============================================================================

      .login-select {
        position: relative;
      }

      // =============================================================================
      // HEADER
      // =============================================================================
      .login-header {
        text-align: center;
        margin-bottom: 32px;
        position: relative;
      }

      .header-glow {
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: 100px;
        background: radial-gradient(ellipse, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
        pointer-events: none;
      }

      .login-title {
        font-size: 28px;
        font-weight: 700;
        background: linear-gradient(135deg, #FFFFFF 0%, #c7d2fe 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0 0 8px;
        position: relative;
      }

      .login-subtitle {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.5);
        margin: 0;
      }

      // =============================================================================
      // LOGIN OPTIONS
      // =============================================================================
      .login-options {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
      }

      .login-option {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 20px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;

        // Left accent line
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 3px;
          height: 100%;
          background: linear-gradient(180deg, #6366F1 0%, #818cf8 100%);
          opacity: 0;
          transition: opacity 0.25s ease;
        }

        &:hover {
          background: rgba(255, 255, 255, 0.06);
          border-color: rgba(99, 102, 241, 0.3);
          transform: translateX(4px);

          &::before {
            opacity: 1;
          }

          .option-arrow {
            transform: translateX(4px);
            color: #818cf8;
          }
        }

        &.citizen {
          &::before {
            background: linear-gradient(180deg, #10B981 0%, #34d399 100%);
          }

          &:hover {
            border-color: rgba(16, 185, 129, 0.3);

            .option-arrow {
              color: #34d399;
            }
          }

          .option-icon {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.1) 100%);
            border-color: rgba(16, 185, 129, 0.3);

            svg {
              color: #34d399;
            }
          }
        }

        &.admin {
          &::before {
            background: linear-gradient(180deg, #A855F7 0%, #c084fc 100%);
          }

          &:hover {
            border-color: rgba(168, 85, 247, 0.3);

            .option-arrow {
              color: #c084fc;
            }
          }

          .option-icon {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(192, 132, 252, 0.1) 100%);
            border-color: rgba(168, 85, 247, 0.3);

            svg {
              color: #c084fc;
            }
          }
        }
      }

      .option-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(129, 140, 248, 0.1) 100%);
        border: 1px solid rgba(99, 102, 241, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        svg {
          width: 24px;
          height: 24px;
          color: #818cf8;
        }
      }

      .option-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .option-title {
        font-size: 15px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.95);
      }

      .option-desc {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.45);
      }

      .option-arrow {
        color: rgba(255, 255, 255, 0.3);
        transition: all 0.25s ease;
        font-size: 20px;
      }

      // =============================================================================
      // DEMO CREDENTIALS TRIGGER
      // =============================================================================
      .demo-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px;
        background: transparent;
        border: 1px dashed rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.5);
        transition: all 0.2s ease;

        mat-icon {
          font-size: 18px;
          width: 18px;
          height: 18px;
        }

        &:hover {
          background: rgba(255, 255, 255, 0.03);
          border-color: rgba(99, 102, 241, 0.3);
          color: rgba(255, 255, 255, 0.7);
        }
      }

      // =============================================================================
      // COLLAPSIBLE DEMO PANEL
      // =============================================================================
      .demo-panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);

        &.expanded {
          max-height: 400px;
        }
      }

      .demo-panel-content {
        padding-top: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .demo-section {
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 12px;
        padding: 12px 14px;
      }

      .demo-section-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
      }

      .demo-section-icon {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #818cf8;

        &.citizen {
          background: #34d399;
        }

        &.admin {
          background: #c084fc;
        }
      }

      .demo-section-title {
        font-size: 11px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.6);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .demo-creds {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .cred-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
      }

      .cred-label {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);
        flex-shrink: 0;
      }

      .cred-value {
        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.8);
        background: rgba(0, 0, 0, 0.3);
        padding: 4px 8px;
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      // =============================================================================
      // FOOTER
      // =============================================================================
      .login-footer {
        margin-top: 24px;
        text-align: center;
      }

      .help-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: rgba(255, 255, 255, 0.4);
        text-decoration: none;
        font-size: 13px;
        transition: color 0.2s ease;

        mat-icon {
          font-size: 16px;
          width: 16px;
          height: 16px;
        }

        &:hover {
          color: #818cf8;
        }
      }
    `,
  ],
})
export class LoginSelectComponent {
  showDemoCredentials = signal(false);

  departmentCredentials: DemoCredential[] = [
    { role: 'Transport', credential: 'DEPT-TRANS-001', description: '' },
    { role: 'Health', credential: 'DEPT-HEALTH-001', description: '' },
    { role: 'Revenue', credential: 'DEPT-REV-001', description: '' }
  ];

  citizenCredentials: DemoCredential[] = [
    { role: 'Demo', credential: 'Any 12-digit AADHAAR', description: '' }
  ];

  adminCredentials: DemoCredential[] = [
    { role: 'Admin', credential: 'admin@goa.gov.in / Admin@123', description: '' }
  ];
}
