/**
 * Backup Modal - Lit Component
 *
 * Framework-agnostic backup modal for wallet data export.
 * Uses lukso-modal from @lukso/web-components for consistent UI.
 */

import { safeCustomElement } from '@lukso/core/utils'
import type { BackupFile } from '@lukso/passkey-auth'
import { downloadBackup } from '@lukso/passkey-auth'
import { html, nothing } from 'lit'
import { property, state } from 'lit/decorators.js'
import zxcvbn from 'zxcvbn'
import { CoreLitElement } from './styles'

// Import lukso web components
import '@lukso/web-components/dist/components/lukso-modal'
import '@lukso/web-components/dist/components/lukso-button'
import '@lukso/web-components/dist/components/lukso-input'

enum Step {
  CHOICE = 1,
  PASSWORD = 2,
  DOWNLOAD = 3,
}

interface PasswordStrength {
  level: string
  label: string
  color: string
  bgColor: string
  width: number
  feedback: string
  crackTime: string | number
}

@safeCustomElement('backup-modal')
export class BackupModal extends CoreLitElement {
  // Public properties
  @property({ type: Boolean, reflect: true }) open = false
  @property({ type: String }) theme: 'light' | 'dark' | 'auto' = 'auto'

  // Private state - wizard flow
  @state() private currentStep: Step = Step.CHOICE
  @state() private useEncryption = true
  @state() private password = ''
  @state() private passwordConfirm = ''
  @state() private passwordErrors: string[] = []
  @state() private isCreatingBackup = false
  @state() private generatedBackup: BackupFile | null = null

  /**
   * Public method for parent to set backup result
   * Called after parent handles the 'create' event
   */
  public setBackupResult(
    backupFile: BackupFile | null,
    options?: {
      error?: string
    }
  ) {
    this.isCreatingBackup = false

    if (options?.error) {
      this.passwordErrors = [options.error]
      this.generatedBackup = null
    } else if (backupFile) {
      this.generatedBackup = backupFile
      this.currentStep = Step.DOWNLOAD
    }
  }

  render() {
    return html`
      <lukso-modal
        ?is-open=${this.open}
        size="medium"
        @on-backdrop-click=${this.close}
      >
        <div class="p-6">
          <!-- Header -->
          <h2 class="m-0 mb-6 text-neutral-20 dark:text-white heading-inter-21-semi-bold">
            ${this.getStepTitle()}
          </h2>

          <!-- Step content -->
          ${this.renderStep()}
        </div>
      </lukso-modal>
    `
  }

  private renderStep() {
    switch (this.currentStep) {
      case Step.CHOICE:
        return this.renderChoiceStep()
      case Step.PASSWORD:
        return this.renderPasswordStep()
      case Step.DOWNLOAD:
        return this.renderDownloadStep()
      default:
        return nothing
    }
  }

  private renderChoiceStep() {
    return html`
      <div class="flex flex-col gap-3 mb-6">
        <!-- Encrypted option (recommended) -->
        <div
          class="border-2 border-neutral-90 dark:border-neutral-70 rounded-lg p-4 cursor-pointer transition-all hover:border-neutral-60 dark:hover:border-neutral-60"
          @click=${() => this.selectBackupType(true)}
        >
          <div class="flex items-center gap-3 mb-2">
            <span class="text-neutral-10 dark:text-white heading-inter-16-semi-bold flex-1">
              Encrypt backup file
            </span>
            <span class="text-xs text-neutral-50 dark:text-neutral-60 uppercase tracking-wide">
              Recommended
            </span>
          </div>
          <p class="m-0 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular">
            Uses password-based encryption to protect the secrets in this file.
          </p>
        </div>

        <!-- Unencrypted option -->
        <div
          class="border-2 border-neutral-90 dark:border-neutral-70 rounded-lg p-4 cursor-pointer transition-all hover:border-neutral-60 dark:hover:border-neutral-60"
          @click=${() => this.selectBackupType(false)}
        >
          <div class="flex items-center gap-3 mb-2">
            <span class="text-neutral-10 dark:text-white heading-inter-16-semi-bold flex-1">
              Plain text backup
            </span>
            <span class="text-xs text-neutral-50 dark:text-neutral-60 uppercase tracking-wide">
              For development only
            </span>
          </div>
          <p class="m-0 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular">
            Secrets will be stored in plain text.
          </p>
        </div>
      </div>

      <div class="flex justify-between gap-3">
        <lukso-button variant="text" @click=${this.close}>
          Cancel
        </lukso-button>
      </div>
    `
  }

  private renderPasswordStep() {
    const passwordStrength = this.password
      ? this.calculatePasswordStrength()
      : null
    const passwordsMatch =
      this.password &&
      this.passwordConfirm &&
      this.password === this.passwordConfirm
    const canProceed = this.password && this.passwordConfirm && passwordsMatch

    return html`
      <p class="mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-16-regular">
        Choose a strong password to encrypt your backup. You'll need this password to restore your wallet.
      </p>

      <div class="space-y-4">
        <lukso-input
          type="password"
          label="Password"
          placeholder="Enter a strong password"
          .value=${this.password}
          @on-input=${(e: CustomEvent) => {
            this.password = e.detail.value
          }}
          is-full-width
          autofocus
        ></lukso-input>

        ${this.passwordErrors.map(
          (error) => html`
          <div class="mt-1 text-red-55 paragraph-inter-13-regular">${error}</div>
        `
        )}

        ${
          passwordStrength
            ? html`
          <div class="mt-3">
            <div class="flex items-center justify-between mb-1">
              <span class="paragraph-inter-13-regular text-neutral-40">Password strength:</span>
              <span class="paragraph-inter-13-semi-bold ${passwordStrength.color}">${passwordStrength.label}</span>
            </div>
            <div class="h-1.5 bg-neutral-90 dark:bg-neutral-70 rounded-full overflow-hidden">
              <div
                class="h-full ${passwordStrength.bgColor} transition-all duration-300"
                style="width: ${passwordStrength.width}%"
              ></div>
            </div>
            <p class="mt-1 mb-0 text-neutral-40 paragraph-inter-12-regular">
              Time to crack: ${passwordStrength.crackTime}
            </p>
            ${
              passwordStrength.feedback
                ? html`
              <p class="mt-2 mb-0 text-neutral-40 paragraph-inter-12-regular">${passwordStrength.feedback}</p>
            `
                : nothing
            }
          </div>
        `
            : nothing
        }

        <lukso-input
          type="password"
          label="Confirm Password"
          placeholder="Re-enter your password"
          .value=${this.passwordConfirm}
          @on-input=${(e: CustomEvent) => {
            this.passwordConfirm = e.detail.value
          }}
          is-full-width
        ></lukso-input>

        ${
          this.passwordConfirm
            ? html`
          <div class="flex items-center justify-between mt-2">
            <span class="paragraph-inter-13-regular text-neutral-40">Passwords match:</span>
            <span class="paragraph-inter-13-semi-bold ${passwordsMatch ? 'text-green-54' : 'text-red-55'}">
              ${passwordsMatch ? 'Yes' : 'No'}
            </span>
          </div>
        `
            : nothing
        }
      </div>

      <div class="flex justify-between gap-3 mt-6">
        <div class="flex gap-3">
          <lukso-button variant="text" @click=${this.close}>
            Cancel
          </lukso-button>
          <lukso-button variant="secondary" @click=${this.goBack}>
            Back
          </lukso-button>
        </div>
        <lukso-button
          variant="primary"
          ?disabled=${!canProceed || this.isCreatingBackup}
          ?is-loading=${this.isCreatingBackup}
          @click=${this.createBackup}
        >
          Create Backup
        </lukso-button>
      </div>
    `
  }

  private renderDownloadStep() {
    return html`
      <p class="mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-16-regular">
        Your backup has been created${this.useEncryption ? ' and encrypted' : ''}. Download it and keep it in a safe place.
      </p>

      ${
        !this.useEncryption
          ? html`
        <p class="mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular">
          This unencrypted backup is intended for development purposes. Use it when creating dapps that need access to the profile for testing.
        </p>
      `
          : nothing
      }

      <div class="flex justify-end gap-3">
        <lukso-button variant="primary" @click=${this.handleDownload}>
          Download Backup
        </lukso-button>
      </div>
    `
  }

  private getStepTitle(): string {
    switch (this.currentStep) {
      case Step.CHOICE:
        return 'Backup Wallet'
      case Step.PASSWORD:
        return 'Set Password'
      case Step.DOWNLOAD:
        return 'Download Backup'
      default:
        return 'Backup Wallet'
    }
  }

  private selectBackupType(encrypted: boolean) {
    this.useEncryption = encrypted
    if (encrypted) {
      this.currentStep = Step.PASSWORD
    } else {
      // Unencrypted backup - create immediately
      this.createBackup()
    }
  }

  private async createBackup() {
    this.isCreatingBackup = true
    this.passwordErrors = []

    // Emit create event with password (if encrypted)
    // Parent should handle backup creation
    const createEvent = new CustomEvent('create', {
      detail: {
        password: this.useEncryption ? this.password : undefined,
        encrypted: this.useEncryption,
      },
      bubbles: true,
      composed: true,
      cancelable: true,
    })

    this.dispatchEvent(createEvent)

    // If parent didn't prevent default, show error
    if (!createEvent.defaultPrevented) {
      this.passwordErrors = [
        'No backup handler configured. Please handle the "create" event.',
      ]
      this.isCreatingBackup = false
    }
    // Otherwise, parent will call setBackupResult()
  }

  private handleDownload() {
    if (this.generatedBackup) {
      downloadBackup(this.generatedBackup)

      // Dispatch download event
      this.dispatchEvent(
        new CustomEvent('download', {
          detail: this.generatedBackup,
          bubbles: true,
          composed: true,
        })
      )

      // Close modal after download
      setTimeout(() => {
        this.close()
      }, 100)
    }
  }

  private goBack() {
    if (this.currentStep === Step.PASSWORD) {
      this.currentStep = Step.CHOICE
      this.password = ''
      this.passwordConfirm = ''
      this.passwordErrors = []
    }
  }

  private close() {
    this.open = false
    this.dispatchEvent(
      new CustomEvent('close', { bubbles: true, composed: true })
    )

    // Reset state after animation
    setTimeout(() => {
      this.currentStep = Step.CHOICE
      this.useEncryption = true
      this.password = ''
      this.passwordConfirm = ''
      this.passwordErrors = []
      this.isCreatingBackup = false
      this.generatedBackup = null
    }, 300)
  }

  private calculatePasswordStrength(): PasswordStrength {
    const result = zxcvbn(this.password)

    const strengthMap = [
      {
        level: 'very-weak',
        label: 'Very Weak',
        color: 'text-red-55',
        bgColor: 'bg-red-55',
        width: 20,
      },
      {
        level: 'weak',
        label: 'Weak',
        color: 'text-red-65',
        bgColor: 'bg-red-65',
        width: 40,
      },
      {
        level: 'fair',
        label: 'Fair',
        color: 'text-yellow-55',
        bgColor: 'bg-yellow-55',
        width: 60,
      },
      {
        level: 'good',
        label: 'Good',
        color: 'text-green-54',
        bgColor: 'bg-green-54',
        width: 80,
      },
      {
        level: 'strong',
        label: 'Strong',
        color: 'text-green-45',
        bgColor: 'bg-green-45',
        width: 100,
      },
    ]

    const strength = strengthMap[result.score]
    const feedback =
      result.feedback.suggestions.join(' ') || result.feedback.warning || ''
    const crackTime =
      result.crack_times_display.offline_slow_hashing_1e4_per_second

    return {
      ...strength,
      feedback,
      crackTime,
    }
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'backup-modal': BackupModal
  }
}