// MisspellCard is the little popover for a single misspelled word: the flagged
// word, up to a few nspell corrections as tappable pills, and an "add to my
// dictionary" action for names/terms Petal shouldn't nag about. Labels are
// bilingual (zh-first, en subtitle) to match the rest of Petal's chrome — the
// user writes in Mandarin and English (spec Note #17).

interface Props {
  word: string
  suggestions: string[]
  style: React.CSSProperties
  onReplace: (correction: string) => void
  onAdd: () => void
}

export function MisspellCard({ word, suggestions, style, onReplace, onAdd }: Props) {
  const shown = suggestions.slice(0, 5)
  return (
    <div
      role="dialog"
      aria-label={`Spelling suggestions for ${word}`}
      className="petal-misspell-card absolute z-20 p-3 text-sm"
      style={{
        width: 240,
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-card)',
        boxShadow: 'var(--shadow-soft)',
        ...style,
      }}
    >
      <div className="flex items-center gap-1.5">
        <span
          className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-bold"
          style={{ background: 'var(--color-accent)', color: 'white' }}
        >
          拼写 · Spelling
        </span>
        <span className="font-semibold" style={{ color: 'var(--color-muted)' }}>
          {word}
        </span>
      </div>

      {shown.length > 0 ? (
        <div className="mt-2.5 flex flex-wrap gap-1.5">
          {shown.map((s) => (
            <button
              key={s}
              type="button"
              onClick={() => onReplace(s)}
              className="rounded-full px-3 py-1 text-xs font-semibold"
              style={{ background: 'var(--color-surface-alt)', color: 'var(--color-plum)' }}
              onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--color-accent)')}
              onMouseLeave={(e) => (e.currentTarget.style.background = 'var(--color-surface-alt)')}
            >
              {s}
            </button>
          ))}
        </div>
      ) : (
        <p className="mt-2.5 leading-snug" style={{ color: 'var(--color-muted)' }}>
          没有建议 · No suggestions
        </p>
      )}

      <button
        type="button"
        onClick={onAdd}
        className="mt-3 rounded-full px-2.5 py-1 text-xs font-bold transition-colors"
        style={{ background: 'transparent', color: 'var(--color-accent-hover)' }}
      >
        添加到词典 · Add to dictionary
      </button>
    </div>
  )
}
