import { useState, useCallback } from 'react'
import { MnemonicBuilder } from '../components/MnemonicBuilder'
import { MnemonicCodebook } from '../components/MnemonicCodebook'

type Props = {
  token: string
  operatorName: string | null
  onComplete: () => void
}

export function OnboardingPage({ token, operatorName, onComplete }: Props) {
  const [mnemonics, setMnemonics] = useState<Record<string, string> | null>(null)

  const handleBuilderComplete = useCallback(async () => {
    try {
      const r = await fetch('/api/mnemonics', {
        headers: { Authorization: `Bearer ${token}` },
      })
      const data = await r.json()
      setMnemonics(data)
    } catch {
      onComplete()
    }
  }, [token, onComplete])

  if (mnemonics) {
    return <MnemonicCodebook mnemonics={mnemonics} operatorName={operatorName} onStartPlaying={onComplete} />
  }

  return (
    <div>
      <h1 style={{ fontFamily: 'var(--font-header)', marginBottom: '0.5rem' }}>
        Build Your Codebook
      </h1>
      <p style={{ color: 'var(--color-brown)', marginBottom: '2rem' }}>
        Create a memorable phrase for each Morse letter. Short words for dots, long words for dashes.
      </p>
      <MnemonicBuilder token={token} onComplete={handleBuilderComplete} />
    </div>
  )
}