import { Component } 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';

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

      <!-- Login Options -->
      <div class="login-options">
        <!-- Department Login -->
        <a
          class="login-option department"
          [routerLink]="['department']"
          matRipple
          [matRippleColor]="'rgba(99, 102, 241, 0.1)'"
        >
          <div class="option-icon-wrapper">
            <svg xmlns="http://www.w3.org/2000/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-content">
            <h3 class="option-title">Department Login</h3>
            <p class="option-desc">For government department officials</p>
            <div class="option-badge">
              <mat-icon>verified_user</mat-icon>
              <span>API Key Authentication</span>
            </div>
          </div>
          <mat-icon class="option-arrow">arrow_forward</mat-icon>
        </a>

        <!-- DigiLocker Login -->
        <a
          class="login-option citizen"
          [routerLink]="['digilocker']"
          matRipple
          [matRippleColor]="'rgba(16, 185, 129, 0.1)'"
        >
          <div class="option-icon-wrapper citizen">
            <svg xmlns="http://www.w3.org/2000/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-content">
            <h3 class="option-title">Citizen Login</h3>
            <p class="option-desc">For citizens and applicants via DigiLocker</p>
            <div class="option-badge citizen">
              <mat-icon>fingerprint</mat-icon>
              <span>DigiLocker Verified</span>
            </div>
          </div>
          <mat-icon class="option-arrow">arrow_forward</mat-icon>
        </a>

        <!-- Admin Login -->
        <a
          class="login-option admin"
          [routerLink]="['email']"
          matRipple
          [matRippleColor]="'rgba(139, 92, 246, 0.1)'"
        >
          <div class="option-icon-wrapper admin">
            <svg xmlns="http://www.w3.org/2000/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-content">
            <h3 class="option-title">Administrator</h3>
            <p class="option-desc">Platform administrators and super users</p>
            <div class="option-badge admin">
              <mat-icon>admin_panel_settings</mat-icon>
              <span>Privileged Access</span>
            </div>
          </div>
          <mat-icon class="option-arrow">arrow_forward</mat-icon>
        </a>
      </div>

      <!-- Help Section -->
      <div class="help-section">
        <p class="help-text">
          Need help signing in?
          <a href="#" class="help-link">Contact Support</a>
        </p>
      </div>
    </div>
  `,
  styles: [
    `
      // =============================================================================
      // LOGIN SELECT - DBIM Compliant World-Class Design
      // =============================================================================

      .login-select {
        animation: fadeIn 0.4s ease-out;
      }

      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }

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

      .login-title {
        font-size: 28px;
        font-weight: 700;
        color: var(--dbim-brown, #150202);
        margin: 0 0 8px;
        line-height: 1.2;
      }

      .login-subtitle {
        font-size: 15px;
        color: var(--dbim-grey-2, #8E8E8E);
        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: 20px;
        background: var(--dbim-linen, #EBEAEA);
        border-radius: 16px;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 2px solid transparent;
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 4px;
          height: 100%;
          background: linear-gradient(180deg, var(--dbim-blue-dark, #1D0A69) 0%, var(--crypto-indigo, #6366F1) 100%);
          opacity: 0;
          transition: opacity 0.2s ease;
        }

        &:hover {
          background: white;
          border-color: rgba(99, 102, 241, 0.2);
          transform: translateX(4px);
          box-shadow: 0 4px 20px rgba(29, 10, 105, 0.1);

          &::before {
            opacity: 1;
          }

          .option-arrow {
            transform: translateX(4px);
            color: var(--dbim-blue-dark, #1D0A69);
          }
        }

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

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

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

        &.admin {
          &::before {
            background: linear-gradient(180deg, #7C3AED 0%, #8B5CF6 100%);
          }

          &:hover {
            border-color: rgba(139, 92, 246, 0.2);

            .option-arrow {
              color: #7C3AED;
            }
          }
        }
      }

      // =============================================================================
      // ICON WRAPPER
      // =============================================================================
      .option-icon-wrapper {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--dbim-blue-dark, #1D0A69) 0%, var(--crypto-indigo, #6366F1) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);

        svg {
          width: 26px;
          height: 26px;
          color: white;
        }

        &.citizen {
          background: linear-gradient(135deg, #059669 0%, #10B981 100%);
          box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }

        &.admin {
          background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 100%);
          box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
        }
      }

      // =============================================================================
      // CONTENT
      // =============================================================================
      .option-content {
        flex: 1;
        min-width: 0;
      }

      .option-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--dbim-brown, #150202);
        margin: 0 0 4px;
      }

      .option-desc {
        font-size: 13px;
        color: var(--dbim-grey-2, #8E8E8E);
        margin: 0 0 8px;
      }

      .option-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        background: rgba(99, 102, 241, 0.1);
        border-radius: 20px;
        font-size: 11px;
        font-weight: 500;
        color: var(--dbim-blue-dark, #1D0A69);

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

        &.citizen {
          background: rgba(16, 185, 129, 0.1);
          color: #059669;
        }

        &.admin {
          background: rgba(139, 92, 246, 0.1);
          color: #7C3AED;
        }
      }

      // =============================================================================
      // ARROW
      // =============================================================================
      .option-arrow {
        color: var(--dbim-grey-1, #C6C6C6);
        transition: all 0.2s ease;
        flex-shrink: 0;
      }

      // =============================================================================
      // HELP SECTION
      // =============================================================================
      .help-section {
        text-align: center;
        padding-top: 16px;
        border-top: 1px solid var(--dbim-linen, #EBEAEA);
      }

      .help-text {
        font-size: 13px;
        color: var(--dbim-grey-2, #8E8E8E);
        margin: 0;
      }

      .help-link {
        color: var(--dbim-info, #0D6EFD);
        text-decoration: none;
        font-weight: 500;

        &:hover {
          text-decoration: underline;
        }
      }
    `,
  ],
})
export class LoginSelectComponent {}
