/**
 * Restore Modal - Lit Component
 *
 * Framework-agnostic restore modal for wallet data import.
 * Uses lukso-modal from @lukso/web-components for consistent UI.
 */

import { safeCustomElement } from '@lukso/core/utils'
import type {
  BackupFile,
  PasskeyAuthProvider,
  WalletData,
} from '@lukso/passkey-auth'
import { readBackupFile } from '@lukso/passkey-auth'
import { html, nothing } from 'lit'
import { property, state } from 'lit/decorators.js'
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 {
  UPLOAD = 1,
  PASSWORD = 2,
  PREVIEW = 3,
  SUCCESS = 4,
}

@safeCustomElement('restore-modal')
export class RestoreModal extends CoreLitElement {
  // Public properties
  @property({ type: Boolean, reflect: true }) isOpen = false
  @property({ type: String }) theme: 'light' | 'dark' | 'auto' = 'auto'
  @property({ type: Object }) keyGenerator: PasskeyAuthProvider | null = null

  // Private state
  @state() private currentStep: Step = Step.UPLOAD
  @state() private selectedFile: File | null = null
  @state() private backupData: BackupFile | null = null
  @state() private fileError: string | null = null
  @state() private isDragging = false
  @state() private password = ''
  @state() private passwordErrors: string[] = []
  @state() private isRestoring = false
  @state() private validationWarnings: string[] = []
  @state() private controllers: Array<{
    address: string
    status: 'new' | 'existing'
  }> = []
  @state() private restoredAddresses: string[] = []
  validationInfo: string[] = []
  walletData: WalletData | null = null

  /**
   * Public method for parent to set preview result
   * Called after parent handles the 'preview' event
   */
  public setPreviewResult(options: {
    controllers: Array<{ address: string; status: 'new' | 'existing' }>
    warnings?: string[]
  }) {
    this.controllers = options.controllers
    this.validationWarnings = options.warnings || []
  }

  /**
   * Public method for parent to set validation result
   * Called after parent handles the 'validate' event
   */
  public setValidationResult(
    walletData: WalletData | null,
    options?: {
      error?: string
      warnings?: string[]
      info?: string[]
    }
  ) {
    this.isRestoring = false

    if (options?.error) {
      this.passwordErrors = [options.error]
      this.validationWarnings = []
      this.validationInfo = []
    } else if (walletData) {
      this.walletData = walletData
      this.validationWarnings = options?.warnings || []
      this.validationInfo = options?.info || []
      this.currentStep = Step.SUCCESS
    }
  }

  render() {
    return html`
      <lukso-modal
        ?is-open=${this.isOpen}
        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.UPLOAD:
        return this.renderUploadStep()
      case Step.PASSWORD:
        return this.renderPasswordStep()
      case Step.PREVIEW:
        return this.renderPreviewStep()
      case Step.SUCCESS:
        return this.renderSuccessStep()
      default:
        return nothing
    }
  }

  private renderUploadStep() {
    return html`
      <p class="mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-16-regular">
        Select your backup file to restore your wallet data. Your backup file stays on your device and is never uploaded.
      </p>

      <div
        class="border-2 border-dashed rounded-xl p-10 text-center bg-neutral-95 dark:bg-neutral-80 transition-all cursor-pointer my-6 ${
          this.isDragging
            ? 'border-blue-60 bg-blue-95 dark:bg-blue-95/10'
            : this.fileError
              ? 'border-red-55 bg-red-95'
              : 'border-neutral-90 dark:border-neutral-70'
        }"
        @drop=${this.handleDrop}
        @dragover=${this.handleDragOver}
        @dragleave=${this.handleDragLeave}
        @click=${this.triggerFileInput}
      >
        <div class="flex flex-col items-center gap-3">
          <p class="m-0 text-neutral-10 dark:text-white heading-inter-16-semi-bold">
            Drag and drop your backup file here
          </p>
          <p class="m-0 text-neutral-40 paragraph-inter-14-regular">or</p>
          <lukso-button
            variant="primary"
            @click=${(e: Event) => {
              e.stopPropagation()
              this.triggerFileInput()
            }}
          >
            Choose File
          </lukso-button>
          ${
            this.selectedFile
              ? html`
            <p class="mt-2 mb-0 text-green-54 paragraph-inter-14-semi-bold">
              ${this.selectedFile.name}
            </p>
          `
              : nothing
          }
          ${
            this.fileError
              ? html`
            <p class="mt-2 mb-0 text-red-55 paragraph-inter-14-semi-bold">
              ${this.fileError}
            </p>
          `
              : nothing
          }
        </div>
      </div>

      <input
        type="file"
        class="hidden"
        accept=".json"
        @change=${this.handleFileSelect}
      />

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

  private renderPasswordStep() {
    const canProceed = this.password && this.password.length > 0

    return html`
      <p class="mb-5 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular">
        This backup is encrypted. Enter the password to decrypt it.
      </p>

      <div>
        <lukso-input
          type="password"
          label="Password"
          placeholder="Enter decryption password"
          .value=${this.password}
          @on-input=${(e: CustomEvent) => {
            this.password = e.detail.value
          }}
          @keyup=${(e: KeyboardEvent) => e.key === 'Enter' && canProceed && this.previewRestore()}
          is-full-width
          autofocus
        ></lukso-input>
        ${this.passwordErrors.map(
          (error) => html`
          <div class="mt-1 text-red-55 paragraph-inter-13-regular">${error}</div>
        `
        )}
      </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.isRestoring}
          ?is-loading=${this.isRestoring}
          @click=${this.previewRestore}
        >
          Continue
        </lukso-button>
      </div>
    `
  }

  private renderPreviewStep() {
    return html`
      <p class="mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-16-regular">
        ${
          this.controllers.length > 0
            ? `Found ${this.controllers.length} controller${this.controllers.length === 1 ? '' : 's'} in backup.`
            : 'No controllers found in backup.'
        }
      </p>

      ${
        this.controllers.length > 0
          ? html`
          <div class="mb-6">
            <div class="mb-3 text-neutral-20 dark:text-neutral-90 paragraph-inter-14-semi-bold">
              Controllers:
            </div>
            ${this.controllers.map(
              (controller) => html`
                <div class="bg-neutral-95 dark:bg-neutral-80 border border-neutral-90 dark:border-neutral-70 rounded-lg px-3 py-2.5 mb-2">
                  <div class="flex items-center justify-between">
                    <div class="text-neutral-40 paragraph-inter-13-regular font-mono">
                      ${this.truncateAddress(controller.address)}
                    </div>
                    <div
                      class="px-2 py-0.5 rounded text-xs font-semibold ${
                        controller.status === 'new'
                          ? 'bg-green-95 dark:bg-green-95/10 text-green-55 border border-green-55/30'
                          : 'bg-neutral-90 dark:bg-neutral-70 text-neutral-50 border border-neutral-80 dark:border-neutral-60'
                      }"
                    >
                      ${controller.status === 'new' ? 'NEW' : 'EXISTS'}
                    </div>
                  </div>
                  <div class="text-neutral-60 paragraph-inter-12-regular mt-1">
                    ${controller.address}
                  </div>
                </div>
              `
            )}
          </div>
        `
          : nothing
      }

      ${
        this.validationWarnings.length > 0
          ? html`
          <div class="mb-4">
            ${this.validationWarnings.map(
              (warning) => html`
                <div class="bg-yellow-95 dark:bg-yellow-95/10 border border-yellow-55 dark:border-yellow-55/50 rounded-lg px-3 py-2.5 mb-2 flex items-start gap-2">
                  <span class="text-yellow-55 dark:text-yellow-55 text-lg leading-none">⚠️</span>
                  <span class="text-yellow-55 dark:text-yellow-55 paragraph-inter-13-regular flex-1">${warning}</span>
                </div>
              `
            )}
          </div>
        `
          : nothing
      }

      <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.goBackFromPreview}>
            Back
          </lukso-button>
        </div>
        <lukso-button
          variant="primary"
          @click=${this.confirmRestore}
        >
          Confirm Restore
        </lukso-button>
      </div>
    `
  }

  private renderSuccessStep() {
    return html`
      <!-- Success header with icon -->
      <div class="text-center mb-6">
        <div class="w-16 h-16 mx-auto mb-4 bg-green-95 dark:bg-green-95/20 rounded-full flex items-center justify-center">
          <span class="text-2xl text-green-55">✅</span>
        </div>
        <h3 class="text-neutral-20 dark:text-white heading-inter-18-semi-bold mb-2">
          Wallet Restored Successfully!
        </h3>
        <p class="text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular">
          ${
            this.restoredAddresses.length > 0
              ? `Imported ${this.restoredAddresses.length} address${this.restoredAddresses.length > 1 ? 'es' : ''} to your wallet.`
              : 'Your wallet has been restored successfully.'
          }
        </p>
      </div>
      
      <!-- Restored addresses -->
      ${
        this.restoredAddresses.length > 0
          ? html`
        <div class="mb-6">
          <div class="mb-3 text-neutral-20 dark:text-neutral-90 paragraph-inter-14-semi-bold">
            Restored Addresses:
          </div>
          ${this.restoredAddresses.map(
            (address: string) => html`
            <div class="bg-green-95 dark:bg-green-95/10 border border-green-60 dark:border-green-60/50 rounded-lg px-3 py-2.5 mb-2 flex items-center gap-2">
              <span class="text-green-60 dark:text-green-45 text-sm">✓</span>
              <span class="text-neutral-20 dark:text-white paragraph-inter-13-regular font-mono flex-1">${this.truncateAddress(address)}</span>
            </div>
          `
          )}
        </div>
      `
          : ''
      }

      <!-- Action buttons for success -->
      <div class="flex justify-center mt-6">
        <lukso-button variant="primary" @click=${this.close}>
          OK
        </lukso-button>
      </div>
    `
  }

  private getStepTitle(): string {
    switch (this.currentStep) {
      case Step.UPLOAD:
        return 'Restore Wallet'
      case Step.PASSWORD:
        return 'Enter Password'
      case Step.PREVIEW:
        return 'Review Changes'
      case Step.SUCCESS:
        return 'Restore Complete'
      default:
        return 'Restore Wallet'
    }
  }

  private triggerFileInput() {
    const input = this.shadowRoot?.querySelector(
      'input[type="file"]'
    ) as HTMLInputElement
    if (input) {
      input.click()
    }
  }

  private async handleFileSelect(e: Event) {
    const input = e.target as HTMLInputElement
    const file = input.files?.[0]
    if (file) {
      await this.handleFile(file)
    }
  }

  private handleDragOver(e: DragEvent) {
    e.preventDefault()
    this.isDragging = true
  }

  private handleDragLeave() {
    this.isDragging = false
  }

  private async handleDrop(e: DragEvent) {
    e.preventDefault()
    this.isDragging = false

    const file = e.dataTransfer?.files?.[0]
    if (file) {
      await this.handleFile(file)
    }
  }

  private async handleFile(file: File) {
    this.fileError = null

    if (!file.name.endsWith('.json')) {
      this.fileError = 'Please select a valid JSON backup file'
      return
    }

    try {
      // Use passkey-auth readBackupFile function
      const backup = await readBackupFile(file)

      this.selectedFile = file
      this.backupData = backup

      // Check if encrypted (handle both current and legacy formats)
      const isEncrypted = backup.encryptedSecrets // Legacy: always encrypted if encryptedSecrets exists
        ? true
        : backup.secrets?.encrypted // Current: check encrypted flag

      if (isEncrypted) {
        this.currentStep = Step.PASSWORD
      } else {
        // Unencrypted backup - preview directly
        await this.previewRestore()
      }
    } catch (error) {
      this.fileError =
        error instanceof Error ? error.message : 'Failed to read backup file'
      console.error('Failed to read backup file:', error)
    }
  }

  private async previewRestore() {
    if (!this.backupData) return

    this.isRestoring = true
    this.passwordErrors = []

    try {
      // First, we need to decrypt the backup if it's encrypted
      let decryptedBackup = this.backupData

      if (
        this.backupData.encryptedSecrets ||
        this.backupData.secrets?.encrypted
      ) {
        // PREVIEW ONLY: Use verify to check password and get preview data (don't actually import yet)
        if (!this.keyGenerator) {
          throw new Error('KeyGenerator not available')
        }

        // Use verifyBackup for preview - this validates password and returns public data only
        const verifiedBackup = await this.keyGenerator.verifyBackup(
          this.backupData,
          this.password
        )

        // Use the verified backup data (which has filtered public data)
        decryptedBackup = verifiedBackup
      } else {
        // Unencrypted - use data directly for preview (no import needed)
        decryptedBackup = this.backupData
      }

      // Extract all controller addresses from the backup
      const backupControllers = new Set<string>()

      // Get addresses from the secrets (the actual private keys we're restoring)
      const secretsData = (decryptedBackup.secrets?.data as any[]) || []
      for (const secret of secretsData) {
        if (secret.address) {
          backupControllers.add(secret.address.toLowerCase())
        }
      }

      // Also get controllers from account metadata (V2 format with networks)
      for (const account of decryptedBackup.accounts || []) {
        // V2 format: accounts have networks array with controllers
        if (account.networks) {
          for (const network of account.networks) {
            for (const controller of network.controllers || []) {
              if (controller.address) {
                backupControllers.add(controller.address.toLowerCase())
              }
            }
          }
        }
      }

      // Also get controllers from LSP23CrossChainDeployment if present
      const lsp23Deployments =
        (decryptedBackup as any).LSP23CrossChainDeployment || []
      for (const deployment of lsp23Deployments) {
        for (const controller of deployment.initialControllers || []) {
          if (controller.address) {
            backupControllers.add(controller.address.toLowerCase())
          }
        }
      }

      console.log(
        '🔍 [RestoreModal] Found controller addresses:',
        Array.from(backupControllers)
      )

      // Extract addresses from the decrypted backup for preview
      for (const secret of secretsData) {
        if (secret.address) {
          backupControllers.add(secret.address.toLowerCase())
        }
      }

      // For now, mark all addresses as 'new' - could enhance this later
      this.controllers = Array.from(backupControllers).map((address) => ({
        address,
        status: 'new' as const,
      }))

      this.currentStep = Step.PREVIEW
    } catch (error) {
      console.error('Failed to preview restore:', error)
      const errorMessage =
        error instanceof Error ? error.message : 'Failed to preview restore'

      // Check for password-specific errors
      if (errorMessage.toLowerCase().includes('password')) {
        this.passwordErrors = ['Incorrect password. Please try again.']
      } else {
        // For non-password errors, set as file error to show in upload step
        this.fileError = errorMessage
        this.currentStep = Step.UPLOAD
        // Clear the file selection so user can try again
        this.selectedFile = null
        this.backupData = null
        // Clear the file input
        const input = this.shadowRoot?.querySelector(
          'input[type="file"]'
        ) as HTMLInputElement
        if (input) {
          input.value = ''
        }
      }
    } finally {
      this.isRestoring = false
    }
  }

  private async confirmRestore() {
    if (!this.backupData || !this.keyGenerator) {
      console.error(
        '❌ [RestoreModal] Missing backup data or keyGenerator for restore'
      )
      this.dispatchEvent(
        new CustomEvent('error', {
          detail: { error: 'Missing backup data or keyGenerator' },
          bubbles: true,
          composed: true,
        })
      )
      return
    }

    try {
      this.isRestoring = true
      console.log('🔄 [RestoreModal] Starting secure restoration process...')

      // ✅ SECURE: Use keyGenerator.restoreFromBackup internally
      const result = await this.keyGenerator.restoreFromBackup(
        this.backupData,
        this.password
      )

      if (result.success) {
        console.log('✅ [RestoreModal] Restore successful:', result.addresses)

        // Store restored addresses for display on success screen
        this.restoredAddresses = result.addresses

        // Emit success event (only public addresses, no sensitive data)
        this.dispatchEvent(
          new CustomEvent('success', {
            detail: { addresses: result.addresses },
            bubbles: true,
            composed: true,
          })
        )

        // Move to success step
        this.currentStep = Step.SUCCESS
      } else {
        console.error('❌ [RestoreModal] Restore failed')
        this.dispatchEvent(
          new CustomEvent('error', {
            detail: {
              error:
                'Restore failed. Please check the backup file and password.',
            },
            bubbles: true,
            composed: true,
          })
        )
      }
    } catch (error) {
      console.error('❌ [RestoreModal] Restore error:', error)
      const errorMessage =
        error instanceof Error ? error.message : 'Unknown error'

      this.dispatchEvent(
        new CustomEvent('error', {
          detail: { error: errorMessage },
          bubbles: true,
          composed: true,
        })
      )
    } finally {
      this.isRestoring = false
    }
  }

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

  private goBackFromPreview() {
    // Go back to password step (or upload if unencrypted)
    const isEncrypted = this.backupData?.encryptedSecrets
      ? true
      : this.backupData?.secrets?.encrypted

    if (isEncrypted) {
      this.currentStep = Step.PASSWORD
    } else {
      this.currentStep = Step.UPLOAD
    }
    // Clear preview data
    this.controllers = []
    this.validationWarnings = []
  }

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

    // Reset state after animation
    setTimeout(() => {
      this.currentStep = Step.UPLOAD
      this.selectedFile = null
      this.backupData = null
      this.fileError = null
      this.isDragging = false
      this.password = ''
      this.passwordErrors = []
      this.isRestoring = false
      this.walletData = null
      this.restoredAddresses = []
      this.controllers = []
      this.validationWarnings = []
    }, 300)
  }

  private truncateAddress(address: string): string {
    if (!address || address.length < 10) return address
    return `${address.slice(0, 6)}...${address.slice(-4)}`
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'restore-modal': RestoreModal
  }
}