import { useState } from 'react'
import { RecoveryWarning, RecoveryPhraseDisplay, PublicKeyDisplay, ImportKeyForm, ImportStepButtons, ChooseStepButtons } from './CreateAccountModalComponents'
import { t } from '@/lib/i18n'

export function RecoveryStep({
  recoveryPhrase,
  npub,
  onContinue,
}: {
  recoveryPhrase: string[]
  npub: string
  onContinue: () => void
}) {
  const [copied, setCopied] = useState(false)

  const handleCopy = async () => {
    if (recoveryPhrase.length > 0) {
      await navigator.clipboard.writeText(recoveryPhrase.join(' '))
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    }
  }

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-cyber-dark border border-neon-cyan/30 rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto shadow-glow-cyan">
        <h2 className="text-2xl font-bold mb-4 text-neon-cyan">{t('account.create.recovery.title')}</h2>
        <RecoveryWarning />
        <RecoveryPhraseDisplay recoveryPhrase={recoveryPhrase} copied={copied} onCopy={handleCopy} />
        <PublicKeyDisplay npub={npub} />
        <div className="flex gap-4">
          <button
            onClick={onContinue}
            className="flex-1 py-3 px-6 bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan rounded-lg font-medium transition-all border border-neon-cyan/50 hover:shadow-glow-cyan"
          >
            {t('account.create.recovery.saved')}
          </button>
        </div>
      </div>
    </div>
  )
}

export function ImportStep({
  importKey,
  setImportKey,
  loading,
  error,
  onImport,
  onBack,
}: {
  importKey: string
  setImportKey: (key: string) => void
  loading: boolean
  error: string | null
  onImport: () => void
  onBack: () => void
}) {
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-cyber-dark border border-neon-cyan/30 rounded-lg p-6 max-w-md w-full mx-4 shadow-glow-cyan">
        <h2 className="text-2xl font-bold mb-4 text-neon-cyan">{t('account.import.title')}</h2>
        <ImportKeyForm importKey={importKey} setImportKey={setImportKey} error={error} />
        <ImportStepButtons loading={loading} onImport={onImport} onBack={onBack} />
      </div>
    </div>
  )
}

export function ChooseStep({
  loading,
  error,
  onGenerate,
  onImport,
  onClose,
}: {
  loading: boolean
  error: string | null
  onGenerate: () => void
  onImport: () => void
  onClose: () => void
}) {
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-cyber-dark border border-neon-cyan/30 rounded-lg p-6 max-w-md w-full mx-4 shadow-glow-cyan">
        <h2 className="text-2xl font-bold mb-4 text-neon-cyan">{t('account.create.title')}</h2>
        <p className="text-cyber-accent/70 mb-6">
          {t('account.create.description')}
        </p>
        {error && <p className="text-sm text-red-400 mb-4">{error}</p>}
        <ChooseStepButtons loading={loading} onGenerate={onGenerate} onImport={onImport} onClose={onClose} />
      </div>
    </div>
  )
}