import { Waveform } from './Waveform';
import { Icon } from '../core/Icon';

const ddMicBarCss = `
.dd-micbar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: var(--control-xl); border: none; cursor: pointer;
  border-radius: var(--radius-full);
  font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold);
  user-select: none; -webkit-user-select: none; touch-action: none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.dd-micbar--idle { background: var(--accent); color: var(--text-on-accent); }
.dd-micbar--idle:active { background: var(--accent-press); }
.dd-micbar--recording { background: var(--positive); color: #fff; }
.dd-micbar--disabled { background: var(--surface-3); color: var(--text-3); cursor: default; }
.dd-micbar--quota { background: var(--warning); color: #fff; }
`;

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

function DdMicIcon({ size = 20 }) {
  return <Icon name="mic" size={size} />;
}

const DD_MICBAR_LABELS = {
  idle: '按住说话',
  recording: '松开完成 · 上滑取消',
  disabled: '打开 dudu App 登录',
  quota: '今日试用已用完，去购买时长',
};

export function MicBar({ state = 'idle', label, ...rest }) {
  const text = label || DD_MICBAR_LABELS[state] || DD_MICBAR_LABELS.idle;
  return (
    <button type="button" className={`dd-micbar dd-micbar--${state}`} {...rest}>
      {state === 'recording'
        ? <Waveform active bars={9} height={18} color="rgba(255,255,255,0.95)" /> /* ds-ignore: accent 底上白波形 95% 派生 */
        : <DdMicIcon />}
      <span>{text}</span>
    </button>
  );
}