import { useEffect, type ReactElement } from 'react'
import { useDictation } from '@jaspers-ai/sdk'

// The microphone under the message box. A press starts listening, the next stops it and hands the
// words to the box to edit and send; Escape drops what was said. The app records and transcribes
// with the user's voice provider, so this view gets the words and never the audio.

export function Mic({ onText }: { onText: (text: string) => void }): ReactElement {
  const dictation = useDictation()
  const { state, error } = dictation

  useEffect(() => {
    if (state !== 'listening') return
    const onKey = (e: KeyboardEvent): void => {
      if (e.key === 'Escape') void dictation.cancel()
    }
    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
  }, [state, dictation])

  const press = (): void => {
    if (state === 'idle') void dictation.start()
    else if (state === 'listening') void dictation.stop().then((text) => text.trim() && onText(text.trim()))
  }
  const label =
    state === 'listening'
      ? 'Stop and put what you said in the box (Escape drops it)'
      : state === 'transcribing'
        ? 'Writing down what you said'
        : 'Talk to the agent'

  return (
    <span className="ag-mic">
      {state === 'listening' && <span className="ag-mic-note">Listening…</span>}
      {state === 'transcribing' && <span className="ag-mic-note ag-shimmer">Writing it down…</span>}
      {error && state === 'idle' && <span className="ag-mic-note ag-error">{error}</span>}
      <button
        type="button"
        className={state === 'listening' ? 'ag-icon ag-mic-on' : 'ag-icon'}
        aria-label={label}
        title={label}
        aria-pressed={state === 'listening'}
        disabled={state === 'transcribing'}
        onClick={press}
      >
        <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
          {state === 'listening' ? (
            <rect x="7" y="7" width="10" height="10" fill="currentColor" />
          ) : (
            <path
              d="M12 3.5a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0v-5a3 3 0 0 0-3-3ZM6 11a6 6 0 0 0 12 0M12 17v3.5M9 20.5h6"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.6"
            />
          )}
        </svg>
      </button>
    </span>
  )
}