import { Waveform } from './Waveform';

const ddOverlayCss = `
.dd-overlay {
  box-sizing: border-box; width: 340px;
  background: var(--overlay-bg); color: var(--overlay-text);
  border-radius: var(--radius-lg); padding: 14px 18px;
  box-shadow: var(--shadow-overlay);
  font-family: var(--font-sans);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.dd-overlay__status {
  display: flex; align-items: center; gap: 8px;
  color: var(--overlay-text-2); font-size: var(--text-base); margin-top: 8px;
}
.dd-overlay__text { font-size: var(--text-md); line-height: 1.6; margin-top: 8px; min-height: 24px; }
.dd-overlay__text .dd-partial { color: var(--overlay-text-2); }
.dd-overlay__hint { font-size: 11px; color: var(--overlay-text-3); margin-top: 8px; text-align: right; }
`;

if (typeof document !== 'undefined' && !document.getElementById('dd-overlay-css')) {
  const s = document.createElement('style');
  s.id = 'dd-overlay-css';
  s.textContent = ddOverlayCss;
  document.head.appendChild(s);
}

export function RecognitionOverlay({
  state = 'listening',
  finalText = '',
  partialText = '',
  hint = '松开 ⌘⇧Space 完成输入',
  width = 340,
  style,
}) {
  return (
    <div className="dd-overlay" style={{ width, ...style }} role="status">
      <Waveform active bars={12} height={24} color="#7C9BFF" />
      {state === 'listening' ? (
        <div className="dd-overlay__status">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path>
            <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
            <line x1="12" x2="12" y1="19" y2="22"></line>
          </svg>
          <span>聆听中…</span>
        </div>
      ) : (
        <div className="dd-overlay__text">
          {finalText}
          {partialText ? <span className="dd-partial">{partialText}</span> : null}
        </div>
      )}
      <div className="dd-overlay__hint">{hint}</div>
    </div>
  );
}