import { Link } from 'react-router-dom'
import { Button } from '@shared/ui'
import { ROUTES } from '@shared/config/routes'
import { useSeedPhrase } from '../model/useSeedPhrase'
import styles from './SeedPhraseWidget.module.css'

interface Props {
  words: string[]
  /** Show the "Перейти в профиль" link. Hidden when embedded inside the profile. */
  showProfileLink?: boolean
}

export function SeedPhraseWidget({ words, showProfileLink = true }: Props) {
  const { hidden, countdown, copied, handleHide, handleCopy } = useSeedPhrase(words)

  return (
    <div className={styles.content}>
      <div className={styles.titleRow}>
        <h1 className={styles.title}>СИД ФРАЗА</h1>
        <div className={styles.titleButtons}>
          <div className={styles.btnFixed}>
            <Button variant="outline" onClick={handleHide}>
              {hidden ? 'ПОКАЗАТЬ' : 'СКРЫТЬ'}
            </Button>
          </div>
          <div className={styles.btnFixed}>
            <Button variant="outline" onClick={handleCopy}>
              {copied ? 'СКОПИРОВАНО' : 'КОПИРОВАТЬ'}
            </Button>
          </div>
        </div>
      </div>

      {!hidden && (
        <div className={styles.subtitle}>
          АВТОМАТИЧЕСКОЕ СКРЫТИЕ ЧЕРЕЗ{' '}
          <span className={styles.countdown}>{countdown}</span>С
        </div>
      )}

      <div className={styles.seedGrid}>
        {words.map((word, i) => (
          <div key={i} className={styles.seedCard}>
            <span className={styles.seedNum}>{i + 1}.</span>
            <span className={`${styles.seedWord} ${hidden ? styles.seedWordHidden : ''}`}>
              {hidden ? '•••••' : word}
            </span>
          </div>
        ))}
      </div>

      <div className={styles.warning}>
        <span className={styles.warningIcon}>⚠️</span>
        <p className={styles.warningText}>
          Никогда не передавайте сид-фразу третьим лицам. Тот, кто знает фразу — владеет кошельком.
        </p>
      </div>

      {showProfileLink && (
        <div className={styles.profileLinkRow}>
          <Link to={ROUTES.PROFILE} className={styles.profileLink}>
            Перейти в профиль
          </Link>
        </div>
      )}
    </div>
  )
}