catalog/ts_web/views/eco-view-login/eco-view-login.ts

import {
  customElement,
  DeesElement,
  type TemplateResult,
  html,
  property,
  css,
  cssManager,
  state,
} from '@design.estate/dees-element';
import { DeesIcon } from '@design.estate/dees-catalog';

// Ensure icon component is registered
DeesIcon;

declare global {
  interface HTMLElementTagNameMap {
    'eco-view-login': EcoViewLogin;
  }
}

export type TAuthMethod = 'pin' | 'password' | 'qr';

export interface ILoginConfig {
  allowedMethods: TAuthMethod[];
  pinLength?: number;
  qrCodeData?: string;
  logoUrl?: string;
  welcomeMessage?: string;
  subtitle?: string;
}

export interface ILoginCredentials {
  method: TAuthMethod;
  value: string;
}

@customElement('eco-view-login')
export class EcoViewLogin extends DeesElement {
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: flex;
        width: 100%;
        height: 100%;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      }

      .login-container {
        display: flex;
        width: 100%;
        height: 100%;
      }

      /* Left Panel - Branding & Method Selection */
      .left-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 64px;
        background: ${cssManager.bdTheme('hsl(220 15% 96%)', 'hsl(240 6% 10%)')};
        border-right: 1px solid ${cssManager.bdTheme('hsl(220 15% 90%)', 'hsl(240 5% 16%)')};
      }

      .branding {
        margin-bottom: 48px;
      }

      .logo {
        width: 72px;
        height: 72px;
        border-radius: 18px;
        background: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        margin-bottom: 24px;
      }

      .logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 18px;
      }

      .welcome-message {
        font-size: 32px;
        font-weight: 700;
        color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 95%)')};
        margin-bottom: 8px;
        line-height: 1.2;
      }

      .subtitle {
        font-size: 16px;
        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
        line-height: 1.5;
      }

      .method-selector {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .method-selector-label {
        font-size: 13px;
        font-weight: 600;
        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
      }

      .method-option {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 20px;
        background: ${cssManager.bdTheme('white', 'hsl(240 5% 14%)')};
        border: 2px solid ${cssManager.bdTheme('hsl(220 15% 90%)', 'hsl(240 5% 20%)')};
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .method-option:hover {
        border-color: ${cssManager.bdTheme('hsl(220 15% 80%)', 'hsl(240 5% 28%)')};
        background: ${cssManager.bdTheme('hsl(220 15% 98%)', 'hsl(240 5% 16%)')};
      }

      .method-option.active {
        border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
        background: ${cssManager.bdTheme('hsl(217 91% 97%)', 'hsl(217 91% 15%)')};
      }

      .method-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: ${cssManager.bdTheme('hsl(220 15% 94%)', 'hsl(240 5% 20%)')};
        display: flex;
        align-items: center;
        justify-content: center;
        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
        transition: all 0.2s ease;
      }

      .method-option.active .method-icon {
        background: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
        color: white;
      }

      .method-info {
        flex: 1;
      }

      .method-name {
        font-size: 15px;
        font-weight: 600;
        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
        margin-bottom: 2px;
      }

      .method-description {
        font-size: 13px;
        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
      }

      .method-check {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 2px solid ${cssManager.bdTheme('hsl(220 15% 85%)', 'hsl(240 5% 25%)')};
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
      }

      .method-option.active .method-check {
        background: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
        border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
        color: white;
      }

      /* Right Panel - Auth Input */
      .right-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 64px;
        background: ${cssManager.bdTheme('white', 'hsl(240 6% 6%)')};
      }

      .auth-content {
        width: 100%;
        max-width: 320px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
      }

      .auth-title {
        font-size: 20px;
        font-weight: 600;
        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
        text-align: center;
      }

      /* Error message */
      .error-message {
        color: hsl(0 72% 51%);
        font-size: 14px;
        text-align: center;
        padding: 12px 16px;
        background: hsla(0, 72%, 51%, 0.1);
        border-radius: 8px;
        width: 100%;
        box-sizing: border-box;
      }

      /* PIN Input */
      .pin-display {
        display: flex;
        gap: 16px;
      }

      .pin-dot {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: ${cssManager.bdTheme('hsl(220 15% 85%)', 'hsl(240 5% 20%)')};
        transition: all 0.15s ease;
      }

      .pin-dot.filled {
        background: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
        transform: scale(1.15);
      }

      .pin-dot.error {
        background: hsl(0 72% 51%);
        animation: shake 0.3s ease;
      }

      @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-4px); }
        75% { transform: translateX(4px); }
      }

      .numpad {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }

      .numpad-button {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background: ${cssManager.bdTheme('hsl(220 15% 95%)', 'hsl(240 5% 14%)')};
        border: none;
        font-size: 28px;
        font-weight: 500;
        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 85%)')};
        cursor: pointer;
        transition: all 0.15s ease;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .numpad-button:hover {
        background: ${cssManager.bdTheme('hsl(220 15% 90%)', 'hsl(240 5% 20%)')};
      }

      .numpad-button:active {
        transform: scale(0.95);
        background: ${cssManager.bdTheme('hsl(220 15% 85%)', 'hsl(240 5% 24%)')};
      }

      .numpad-button.action {
        background: transparent;
        font-size: 18px;
      }

      .numpad-button.action:hover {
        background: ${cssManager.bdTheme('hsl(220 15% 95%)', 'hsl(240 5% 14%)')};
      }

      .numpad-button.submit {
        background: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
        color: white;
      }

      .numpad-button.submit:hover {
        background: ${cssManager.bdTheme('hsl(217 91% 55%)', 'hsl(217 91% 45%)')};
      }

      /* Password Input */
      .password-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .password-input-wrapper {
        width: 100%;
        position: relative;
      }

      .password-input {
        width: 100%;
        padding: 18px 52px 18px 18px;
        font-size: 16px;
        background: ${cssManager.bdTheme('hsl(220 15% 96%)', 'hsl(240 5% 12%)')};
        border: 2px solid ${cssManager.bdTheme('hsl(220 15% 88%)', 'hsl(240 5% 20%)')};
        border-radius: 12px;
        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
        outline: none;
        box-sizing: border-box;
        transition: border-color 0.2s ease;
      }

      .password-input:focus {
        border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
      }

      .password-input.error {
        border-color: hsl(0 72% 51%);
        animation: shake 0.3s ease;
      }

      .password-toggle {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
        padding: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        transition: all 0.15s ease;
      }

      .password-toggle:hover {
        background: ${cssManager.bdTheme('hsl(220 15% 90%)', 'hsl(240 5% 18%)')};
        color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
      }

      .submit-button {
        width: 100%;
        padding: 18px;
        font-size: 16px;
        font-weight: 600;
        background: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
        color: white;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .submit-button:hover {
        background: ${cssManager.bdTheme('hsl(217 91% 55%)', 'hsl(217 91% 45%)')};
      }

      .submit-button:active {
        transform: scale(0.98);
      }

      /* QR Code */
      .qr-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
      }

      .qr-code {
        width: 220px;
        height: 220px;
        background: white;
        border-radius: 16px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
      }

      .qr-code img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .qr-placeholder {
        width: 100%;
        height: 100%;
        background: repeating-linear-gradient(
          45deg,
          hsl(0 0% 92%),
          hsl(0 0% 92%) 10px,
          hsl(0 0% 88%) 10px,
          hsl(0 0% 88%) 20px
        );
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: hsl(0 0% 50%);
        font-size: 14px;
      }

      .qr-instruction {
        font-size: 14px;
        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
        text-align: center;
        line-height: 1.6;
        max-width: 280px;
      }

      /* Responsive */
      @media (max-width: 800px) {
        .login-container {
          flex-direction: column;
        }

        .left-panel {
          padding: 32px;
          border-right: none;
          border-bottom: 1px solid ${cssManager.bdTheme('hsl(220 15% 90%)', 'hsl(240 5% 16%)')};
        }

        .right-panel {
          padding: 32px;
        }

        .branding {
          margin-bottom: 32px;
        }

        .welcome-message {
          font-size: 24px;
        }

        .method-selector {
          flex-direction: row;
          flex-wrap: wrap;
        }

        .method-option {
          flex: 1;
          min-width: 140px;
          flex-direction: column;
          text-align: center;
          padding: 12px;
        }

        .method-info {
          text-align: center;
        }

        .method-check {
          display: none;
        }
      }
    `,
  ];

  @property({ type: Object })
  accessor config: ILoginConfig = {
    allowedMethods: ['pin', 'password', 'qr'],
    pinLength: 4,
    welcomeMessage: 'Welcome',
    subtitle: 'Sign in to continue',
  };

  @state()
  accessor selectedMethod: TAuthMethod = 'pin';

  @state()
  accessor pinValue = '';

  @state()
  accessor passwordValue = '';

  @state()
  accessor showPassword = false;

  @state()
  accessor error = '';

  @state()
  accessor showError = false;

  public render(): TemplateResult {
    const effectivePinLength = this.config.pinLength || 4;

    return html`
      <div class="login-container">
        <div class="left-panel">
          <div class="branding">
            ${this.config.logoUrl
              ? html`<div class="logo"><img src=${this.config.logoUrl} alt="Logo" /></div>`
              : html`<div class="logo"><dees-icon .icon=${'lucide:shield'} .iconSize=${32}></dees-icon></div>`
            }
            <h1 class="welcome-message">${this.config.welcomeMessage || 'Welcome'}</h1>
            <p class="subtitle">${this.config.subtitle || 'Sign in to continue'}</p>
          </div>

          ${this.config.allowedMethods.length > 1 ? this.renderMethodSelector() : ''}
        </div>

        <div class="right-panel">
          <div class="auth-content">
            <h2 class="auth-title">${this.getAuthTitle()}</h2>
            ${this.showError ? html`<div class="error-message">${this.error}</div>` : ''}
            ${this.selectedMethod === 'pin' ? this.renderPinInput(effectivePinLength) : ''}
            ${this.selectedMethod === 'password' ? this.renderPasswordInput() : ''}
            ${this.selectedMethod === 'qr' ? this.renderQrCode() : ''}
          </div>
        </div>
      </div>
    `;
  }

  private getAuthTitle(): string {
    switch (this.selectedMethod) {
      case 'pin':
        return 'Enter your PIN';
      case 'password':
        return 'Enter your password';
      case 'qr':
        return 'Scan to sign in';
      default:
        return 'Sign in';
    }
  }

  private renderMethodSelector(): TemplateResult {
    const methods: Array<{ id: TAuthMethod; icon: string; name: string; description: string }> = [
      { id: 'pin', icon: 'lucide:keySquare', name: 'PIN Code', description: 'Quick numeric access' },
      { id: 'password', icon: 'lucide:key', name: 'Password', description: 'Traditional password' },
      { id: 'qr', icon: 'lucide:qrCode', name: 'QR Code', description: 'Scan with mobile app' },
    ];

    const availableMethods = methods.filter((m) => this.config.allowedMethods.includes(m.id));

    return html`
      <div class="method-selector">
        <span class="method-selector-label">Sign in method</span>
        ${availableMethods.map((method) => html`
          <div
            class="method-option ${this.selectedMethod === method.id ? 'active' : ''}"
            @click=${() => this.selectMethod(method.id)}
          >
            <div class="method-icon">
              <dees-icon .icon=${method.icon} .iconSize=${22}></dees-icon>
            </div>
            <div class="method-info">
              <div class="method-name">${method.name}</div>
              <div class="method-description">${method.description}</div>
            </div>
            <div class="method-check">
              ${this.selectedMethod === method.id
                ? html`<dees-icon .icon=${'lucide:check'} .iconSize=${14}></dees-icon>`
                : ''
              }
            </div>
          </div>
        `)}
      </div>
    `;
  }

  private renderPinInput(length: number): TemplateResult {
    return html`
      <div class="pin-display">
        ${Array.from({ length }, (_, i) => html`
          <div class="pin-dot ${i < this.pinValue.length ? 'filled' : ''} ${this.showError ? 'error' : ''}"></div>
        `)}
      </div>

      <div class="numpad">
        ${[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => html`
          <button class="numpad-button" @click=${() => this.handlePinInput(String(num))}>${num}</button>
        `)}
        <button class="numpad-button action" @click=${this.handleBackspace}>
          <dees-icon .icon=${'lucide:delete'} .iconSize=${24}></dees-icon>
        </button>
        <button class="numpad-button" @click=${() => this.handlePinInput('0')}>0</button>
        <button class="numpad-button action submit" @click=${this.handlePinSubmit}>
          <dees-icon .icon=${'lucide:arrowRight'} .iconSize=${24}></dees-icon>
        </button>
      </div>
    `;
  }

  private renderPasswordInput(): TemplateResult {
    return html`
      <div class="password-form">
        <div class="password-input-wrapper">
          <input
            class="password-input ${this.showError ? 'error' : ''}"
            type=${this.showPassword ? 'text' : 'password'}
            placeholder="Enter your password"
            .value=${this.passwordValue}
            @input=${this.handlePasswordInput}
            @keydown=${this.handlePasswordKeydown}
          />
          <button class="password-toggle" @click=${this.togglePasswordVisibility}>
            <dees-icon
              .icon=${this.showPassword ? 'lucide:eyeOff' : 'lucide:eye'}
              .iconSize=${20}
            ></dees-icon>
          </button>
        </div>
        <button class="submit-button" @click=${this.handlePasswordSubmit}>
          Sign In
        </button>
      </div>
    `;
  }

  private renderQrCode(): TemplateResult {
    return html`
      <div class="qr-container">
        <div class="qr-code">
          ${this.config.qrCodeData
            ? html`<img src=${this.config.qrCodeData} alt="Login QR Code" />`
            : html`<div class="qr-placeholder">QR Code</div>`
          }
        </div>
        <p class="qr-instruction">
          Open your authenticator app and scan this code to sign in securely without typing a password.
        </p>
      </div>
    `;
  }

  private selectMethod(method: TAuthMethod): void {
    this.selectedMethod = method;
    this.clearError();
    this.pinValue = '';
    this.passwordValue = '';
  }

  private handlePinInput(digit: string): void {
    this.clearError();
    const maxLength = this.config.pinLength || 4;
    if (this.pinValue.length < maxLength) {
      this.pinValue += digit;
      this.dispatchKeyPress(digit);
    }
  }

  private handleBackspace(): void {
    this.clearError();
    if (this.pinValue.length > 0) {
      this.pinValue = this.pinValue.slice(0, -1);
      this.dispatchEvent(new CustomEvent('backspace', {
        bubbles: true,
        composed: true,
      }));
    }
  }

  private handlePinSubmit(): void {
    if (this.pinValue.length === 0) {
      this.showErrorMessage('Please enter your PIN');
      return;
    }

    this.dispatchLoginAttempt('pin', this.pinValue);
  }

  private handlePasswordInput(e: InputEvent): void {
    this.clearError();
    const input = e.target as HTMLInputElement;
    this.passwordValue = input.value;
  }

  private handlePasswordKeydown(e: KeyboardEvent): void {
    if (e.key === 'Enter') {
      this.handlePasswordSubmit();
    }
  }

  private handlePasswordSubmit(): void {
    if (this.passwordValue.length === 0) {
      this.showErrorMessage('Please enter your password');
      return;
    }

    this.dispatchLoginAttempt('password', this.passwordValue);
  }

  private togglePasswordVisibility(): void {
    this.showPassword = !this.showPassword;
  }

  private dispatchKeyPress(key: string): void {
    this.dispatchEvent(new CustomEvent('key-press', {
      detail: { key },
      bubbles: true,
      composed: true,
    }));
  }

  private dispatchLoginAttempt(method: TAuthMethod, value: string): void {
    this.dispatchEvent(new CustomEvent('login-attempt', {
      detail: { method, value } as ILoginCredentials,
      bubbles: true,
      composed: true,
    }));
  }

  public showErrorMessage(message: string): void {
    this.error = message;
    this.showError = true;
  }

  public clearError(): void {
    this.error = '';
    this.showError = false;
  }

  public clearInput(): void {
    this.pinValue = '';
    this.passwordValue = '';
  }
}