import { t } from '@/lib/i18n'
import type { KeyManagementManagerActions } from './useKeyManagementManager'
import type { KeyManagementManagerState } from './keyManagementController'

export function KeyManagementRecoverySection(params: {
  state: KeyManagementManagerState
  actions: KeyManagementManagerActions
}): React.ReactElement | null {
  if (!params.state.recoveryPhrase || !params.state.newNpub) {
    return null
  }
  return (
    <div className="mt-6 space-y-4">
      <KeyManagementRecoveryWarning />
      <div className="bg-cyber-darker border border-neon-cyan/30 rounded-lg p-6">
        <RecoveryWordsGrid recoveryPhrase={params.state.recoveryPhrase} />
        <button
          type="button"
          onClick={params.actions.onCopyRecoveryPhrase}
          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"
        >
          {params.state.copiedRecoveryPhrase ? t('settings.keyManagement.recovery.copied') : t('settings.keyManagement.recovery.copy')}
        </button>
      </div>
      <KeyManagementNewNpubCard newNpub={params.state.newNpub} />
      <KeyManagementDoneButton onDone={params.actions.onDoneRecovery} />
    </div>
  )
}

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

function KeyManagementNewNpubCard(params: { newNpub: string }): React.ReactElement {
  return (
    <div className="bg-neon-blue/10 border border-neon-blue/30 rounded-lg p-4">
      <p className="text-neon-blue font-semibold mb-2">{t('settings.keyManagement.recovery.newNpub')}</p>
      <p className="text-neon-cyan text-sm font-mono break-all">{params.newNpub}</p>
    </div>
  )
}

function KeyManagementDoneButton(params: { onDone: () => void }): React.ReactElement {
  return (
    <button
      type="button"
      onClick={params.onDone}
      className="w-full 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"
    >
      {t('settings.keyManagement.recovery.done')}
    </button>
  )
}

function RecoveryWordsGrid(params: { recoveryPhrase: string[] }): React.ReactElement {
  const items = buildRecoveryWordItems(params.recoveryPhrase)
  return (
    <div className="grid grid-cols-2 gap-4 mb-4">
      {items.map((item) => (
        <div
          key={item.id}
          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">{item.position}.</span>
          <span className="font-semibold text-neon-cyan">{item.word}</span>
        </div>
      ))}
    </div>
  )
}

interface RecoveryWordItem {
  id: string
  position: number
  word: string
}

function buildRecoveryWordItems(recoveryPhrase: readonly string[]): RecoveryWordItem[] {
  const occurrences = new Map<string, number>()
  const items: RecoveryWordItem[] = []
  let position = 1
  for (const word of recoveryPhrase) {
    const current = occurrences.get(word) ?? 0
    const next = current + 1
    occurrences.set(word, next)
    items.push({ id: `${word}-${next}`, position, word })
    position += 1
  }
  return items
}