import { useState } from 'react'
import { useRevealMnemonic } from '@features/wallet'
import { SeedPhraseWidget } from '@widgets/seed-phrase'
import { ProfileSection } from '@widgets/profile'
import { Button, Spinner } from '@shared/ui'
import styles from './MnemonicItem.module.css'

// «Мнемоническая фраза» dashboard item. The mnemonic is fetched only after the
// user explicitly clicks "Показать мнемонику" (the query stays disabled until
// then), then the seed-phrase content is shown inline.
export function MnemonicItem() {
  const [revealed, setRevealed] = useState(false)
  const { data: mnemonic, isLoading } = useRevealMnemonic(revealed)

  if (!revealed) {
    return (
      <ProfileSection
        title="Мнемоническая фраза"
        actions={<Button variant="danger" onClick={() => setRevealed(true)}>Показать мнемонику</Button>}
      >
        <p className={styles.hint}>
          Сид-фраза из 12 слов для восстановления кошелька. Никогда не передавайте её третьим лицам.
        </p>
      </ProfileSection>
    )
  }

  if (isLoading) return <Spinner fullscreen label="Загрузка" />

  const words = mnemonic ? mnemonic.split(' ') : []
  return <SeedPhraseWidget words={words} showProfileLink={false} />
}
