import { t } from '@/lib/i18n'

export function RecoveryWarning(): React.ReactElement {
  return (
    <div className="bg-yellow-900/20 border border-yellow-400/50 rounded-lg p-4 mb-6">
      <p className="text-yellow-400 font-semibold mb-2">{t('account.create.recovery.warning.title')}</p>
      <p className="text-yellow-300/90 text-sm" dangerouslySetInnerHTML={{ __html: t('account.create.recovery.warning.part1') }} />
      <p className="text-yellow-300/90 text-sm mt-2" dangerouslySetInnerHTML={{ __html: t('account.create.recovery.warning.part2') }} />
      <p className="text-yellow-300/90 text-sm mt-2">{t('account.create.recovery.warning.part3')}</p>
    </div>
  )
}

export function RecoveryPhraseDisplay({
  recoveryPhrase,
  copied,
  onCopy,
}: {
  recoveryPhrase: string[]
  copied: boolean
  onCopy: () => void
}): React.ReactElement {
  const recoveryItems = buildRecoveryPhraseItems(recoveryPhrase)
  return (
    <div className="bg-cyber-darker border border-neon-cyan/30 rounded-lg p-6 mb-6">
      <div className="grid grid-cols-2 gap-4 mb-4">
        {recoveryItems.map((item, index) => (
          <div
            key={item.key}
            className="bg-cyber-dark border border-neon-cyan/30 rounded-lg p-3 text-center font-mono text-lg"
          >
            <span className="text-cyber-accent/70 text-sm mr-2">{index + 1}.</span>
            <span className="font-semibold text-neon-cyan">{item.word}</span>
          </div>
        ))}
      </div>
      <button
        onClick={() => {
          void onCopy()
        }}
        className="w-full py-2 px-4 bg-cyber-light border border-neon-cyan/30 hover:border-neon-cyan/50 hover:bg-cyber-dark text-cyber-accent hover:text-neon-cyan rounded-lg text-sm font-medium transition-colors"
      >
        {copied ? t('account.create.recovery.copied') : t('account.create.recovery.copy')}
      </button>
    </div>
  )
}

function buildRecoveryPhraseItems(recoveryPhrase: string[]): { key: string; word: string }[] {
  const counts = new Map<string, number>()
  return recoveryPhrase.map((word) => {
    const nextCount = (counts.get(word) ?? 0) + 1
    counts.set(word, nextCount)
    return { key: `${word}-${nextCount}`, word }
  })
}

export function PublicKeyDisplay({ npub }: { npub: string }): React.ReactElement {
  return (
    <div className="bg-neon-blue/10 border border-neon-blue/30 rounded-lg p-4 mb-6">
      <p className="text-neon-blue font-semibold mb-2">{t('account.create.publicKey')}</p>
      <p className="text-neon-cyan text-sm font-mono break-all">{npub}</p>
    </div>
  )
}

export function ImportKeyForm({
  importKey,
  setImportKey,
  error,
}: {
  importKey: string
  setImportKey: (key: string) => void
  error: string | null
}): React.ReactElement {
  return (
    <>
      <div className="mb-4">
        <label htmlFor="importKey" className="block text-sm font-medium text-cyber-accent mb-2">
          {t('account.create.importKey.label')}
        </label>
        <textarea
          id="importKey"
          value={importKey}
          onChange={(e) => setImportKey(e.target.value)}
          placeholder={t('account.create.importKey.placeholder')}
          className="w-full px-3 py-2 bg-cyber-darker border border-neon-cyan/30 rounded-lg font-mono text-sm text-neon-cyan"
          rows={4}
        />
        <p className="text-sm text-cyber-accent/70 mt-2" dangerouslySetInnerHTML={{ __html: t('account.create.importKey.help') }} />
      </div>
      {error && <p className="text-sm text-red-400 mb-4">{error}</p>}
    </>
  )
}

export function ImportStepButtons({ loading, onImport, onBack }: { loading: boolean; onImport: () => void; onBack: () => void }): React.ReactElement {
  return (
    <div className="flex gap-4">
      <button
        onClick={onBack}
        className="flex-1 py-2 px-4 bg-cyber-light border border-neon-cyan/30 hover:border-neon-cyan/50 hover:bg-cyber-dark text-cyber-accent hover:text-neon-cyan rounded-lg font-medium transition-colors"
      >
        {t('account.create.back')}
      </button>
      <button
        onClick={() => {
          void onImport()
        }}
        disabled={loading}
        className="flex-1 py-2 px-4 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 disabled:opacity-50"
      >
        {loading ? t('import.loading') : t('import.button')}
      </button>
    </div>
  )
}

export function ChooseStepButtons({
  loading,
  onGenerate,
  onImport,
  onClose,
}: {
  loading: boolean
  onGenerate: () => void
  onImport: () => void
  onClose: () => void
}): React.ReactElement {
  return (
    <div className="flex flex-col gap-4">
      <button
        onClick={() => {
          void onGenerate()
        }}
        disabled={loading}
        className="w-full 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 disabled:opacity-50"
      >
        {loading ? t('account.create.importing') : t('account.create.generateButton')}
      </button>
      <button
        onClick={onImport}
        disabled={loading}
        className="w-full py-3 px-6 bg-cyber-light border border-neon-cyan/30 hover:border-neon-cyan/50 hover:bg-cyber-dark text-cyber-accent hover:text-neon-cyan rounded-lg font-medium transition-colors disabled:opacity-50"
      >
        {t('account.create.importButton')}
      </button>
      <button
        onClick={onClose}
        className="w-full py-2 px-4 text-cyber-accent/70 hover:text-neon-cyan font-medium transition-colors"
      >
        {t('account.create.cancel')}
      </button>
    </div>
  )
}