petal/web/src/components/Editor/ToneSelect.tsx

import { useEffect, useRef, useState } from 'react'

import { usePack } from '../../i18n'

// ToneSelect lets the writer set the document's target tone, which steers the
// grammar-checkpoint LLM toward the right register (an academic essay vs a casual
// journal). A small custom dropdown (not a native <select>) so it can carry the
// bilingual labels and emoji that match Petal's chrome — the writer reads her
// own language and English. The `value` strings mirror the backend's tone keys;
// the labels themselves live in the langpack, keyed by the same value.

export interface ToneOption {
  value: string
  emoji: string
}

// Keep these `value`s in sync with llm.toneGuidance on the server. 'general'
// means no steering (Petal's default friendly ESL advice).
export const TONES: ToneOption[] = [
  { value: 'general', emoji: '🌸' },
  { value: 'academic', emoji: '🎓' },
  { value: 'professional', emoji: '💼' },
  { value: 'casual', emoji: '☕' },
  { value: 'humorous', emoji: '😄' },
  { value: 'creative', emoji: '🎨' },
  { value: 'persuasive', emoji: '📣' },
]

interface Props {
  value: string
  onChange: (value: string) => void
}

export function ToneSelect({ value, onChange }: Props) {
  const pk = usePack()
  const [open, setOpen] = useState(false)
  const ref = useRef<HTMLDivElement>(null)
  const current = TONES.find((t) => t.value === value) ?? TONES[0]

  // Click outside closes the menu.
  useEffect(() => {
    if (!open) return
    const onDown = (e: MouseEvent) => {
      if (!ref.current?.contains(e.target as Node)) setOpen(false)
    }
    document.addEventListener('mousedown', onDown)
    return () => document.removeEventListener('mousedown', onDown)
  }, [open])

  return (
    <div ref={ref} className="relative shrink-0">
      <button
        type="button"
        aria-label="Document tone"
        aria-haspopup="listbox"
        aria-expanded={open}
        onClick={() => setOpen((o) => !o)}
        className="inline-flex h-9 items-center gap-1.5 whitespace-nowrap px-3 text-sm font-bold"
        style={{
          borderRadius: 'var(--radius-pill)',
          background: 'var(--color-surface)',
          color: 'var(--color-plum)',
          boxShadow: 'var(--shadow-soft)',
        }}
        title="Set the tone — Petal tailors its advice to match"
      >
        <span aria-hidden>{current.emoji}</span>
        <span>{pk.tones[current.value].native}</span>
        <span style={{ color: 'var(--color-muted)' }}>· {pk.tones[current.value].en}</span>
        <span aria-hidden style={{ color: 'var(--color-muted)' }}>
          ⌄
        </span>
      </button>

      {open && (
        <div
          role="listbox"
          className="petal-word-card absolute right-0 z-30 mt-1.5 p-1.5"
          style={{
            width: 200,
            background: 'var(--color-surface)',
            border: '1px solid var(--color-border)',
            borderRadius: 'var(--radius-card)',
            boxShadow: 'var(--shadow-soft)',
          }}
        >
          {TONES.map((t) => {
            const active = t.value === value
            return (
              <button
                key={t.value}
                type="button"
                role="option"
                aria-selected={active}
                onClick={() => {
                  onChange(t.value)
                  setOpen(false)
                }}
                className="flex w-full items-center gap-2 rounded-xl px-2.5 py-1.5 text-left text-sm font-semibold"
                style={{
                  background: active ? 'var(--color-surface-alt)' : 'transparent',
                  color: 'var(--color-plum)',
                }}
                onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--color-surface-alt)')}
                onMouseLeave={(e) =>
                  (e.currentTarget.style.background = active ? 'var(--color-surface-alt)' : 'transparent')
                }
              >
                <span aria-hidden>{t.emoji}</span>
                <span>{pk.tones[t.value].native}</span>
                <span className="font-normal" style={{ color: 'var(--color-muted)' }}>
                  {pk.tones[t.value].en}
                </span>
              </button>
            )
          })}
        </div>
      )}
    </div>
  )
}