// DictationPage.jsx
const { useState: useStateD, useRef } = React;

function RecordButton({ recording, onToggle }) {
  const style = {
    width:40, height:40, borderRadius:999, border:'none', cursor:'pointer',
    display:'flex', alignItems:'center', justifyContent:'center',
    transition:'all 150ms cubic-bezier(.2,.8,.2,1)',
    background: recording ? 'var(--danger)' : 'var(--accent)',
    boxShadow: recording ? '0 0 0 0 rgba(232,113,113,.4)' : '0 4px 20px rgba(232,168,124,.3)',
    animation: recording ? 'lumotiaPulse 2s ease-in-out infinite' : 'none',
  };
  return (
    <button onClick={onToggle} style={style} aria-label={recording ? 'Stop recording' : 'Start recording'}>
      {recording
        ? <span style={{width:14, height:14, borderRadius:3, background:'#fff'}}/>
        : <span style={{width:14, height:14, borderRadius:999, background:'rgba(255,255,255,.92)'}}/>}
    </button>
  );
}

function Waveform({ recording }) {
  const bars = [0.4, 0.8, 0.5, 1, 0.6, 0.9, 0.4, 0.7, 0.5, 0.8, 0.3, 0.6];
  return (
    <div style={{flex:1, minHeight:32, borderRadius:8, border:'1px solid var(--border-subtle)', background:'rgba(23,22,20,.4)', display:'flex', alignItems:'center', padding:'0 14px', gap:10}}>
      {recording ? (
        <span style={{display:'inline-flex', alignItems:'flex-end', gap:3, height:18}}>
          {bars.map((h, i) => (
            <span key={i} style={{
              width:2, borderRadius:999, background:'rgba(232,113,113,.7)',
              height:`${h*100}%`,
              animation:`lumotiaBar 1.2s ease-in-out ${i*60}ms infinite`,
            }}/>
          ))}
        </span>
      ) : (
        <span style={{font:'400 11px var(--font-body)', color:'var(--text-tertiary)'}}>
          Press record or <kbd style={{font:'400 10px var(--font-mono)', padding:'2px 6px', borderRadius:4, background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', color:'var(--text-tertiary)'}}>Ctrl+Shift+R</kbd>
        </span>
      )}
    </div>
  );
}

function ToolbarBtn({ children, onClick, accent, disabled }) {
  const [hov, setHov] = useStateD(false);
  return (
    <button onClick={onClick} disabled={disabled}
      onMouseEnter={()=>setHov(true)} onMouseLeave={()=>setHov(false)}
      style={{
        font:'500 12px var(--font-body)', padding:'6px 12px', borderRadius:8, border:'none', cursor: disabled?'default':'pointer',
        background: hov && !disabled ? (accent ? 'rgba(232,168,124,.1)':'var(--hover)') : 'transparent',
        color: accent ? 'var(--accent)' : (hov ? 'var(--text)' : 'var(--text-secondary)'),
        opacity: disabled ? 0.4 : 1, whiteSpace:'nowrap', transition:'all 150ms',
      }}>{children}</button>
  );
}

function DictationPage({ recording, onToggle, timer, transcript, onTranscript, status, statusColor, onExtractTasks, onClear }) {
  const wordCount = transcript.trim() ? transcript.trim().split(/\s+/).length : 0;
  const ta = useRef(null);

  return (
    <div style={{display:'flex', flexDirection:'column', height:'100%'}}>
      {/* Control strip */}
      <div style={{display:'flex', alignItems:'center', gap:12, padding:'0 20px', height:56, borderBottom:'1px solid var(--border-subtle)', flexShrink:0}}>
        <RecordButton recording={recording} onToggle={onToggle}/>
        <span style={{font:'500 11px var(--font-body)', color: recording ? 'var(--danger)' : 'var(--text-secondary)'}}>{recording?'Stop':'Record'}</span>
        <Waveform recording={recording}/>
        <span style={{font:'700 20px var(--font-body)', color:'var(--text)', fontVariantNumeric:'tabular-nums', letterSpacing:'-.02em'}}>{timer}</span>
        <span style={{font:'500 11px var(--font-body)', color: recording ? 'var(--danger)' : 'var(--success)', minWidth:48, textAlign:'right', letterSpacing:'.04em'}}>
          {recording
            ? <span style={{display:'inline-flex', alignItems:'center', gap:6}}><span style={{width:6, height:6, borderRadius:999, background:'var(--danger)'}}/>REC</span>
            : 'Ready'}
        </span>
        <span style={{width:1, height:16, background:'var(--border-subtle)'}}/>
        <button style={{display:'flex', alignItems:'center', gap:6, padding:'6px 10px', background:'transparent', color:'var(--text-tertiary)', border:'none', borderRadius:8, cursor:'pointer', fontSize:11}}>
          <Icon name="check" size={16}/> Tasks
        </button>
      </div>

      {/* Toolbar */}
      <div style={{display:'flex', alignItems:'center', justifyContent:'flex-end', gap:4, padding:'8px 20px', borderBottom:'1px solid var(--border-subtle)', flexShrink:0}}>
        <ToolbarBtn>Template</ToolbarBtn>
        <ToolbarBtn accent onClick={onExtractTasks} disabled={!transcript.trim()}>Extract Tasks</ToolbarBtn>
        <span style={{width:1, height:16, background:'var(--border-subtle)', margin:'0 4px'}}/>
        <ToolbarBtn>Save</ToolbarBtn>
        <ToolbarBtn>Copy</ToolbarBtn>
        <ToolbarBtn onClick={onClear}>Clear</ToolbarBtn>
        <ToolbarBtn>Export</ToolbarBtn>
      </div>

      {/* Transcript */}
      <div style={{flex:1, padding:'12px 20px', minHeight:0, display:'flex'}}>
        <div style={{background:'var(--bg-card)', border:'1px solid var(--border-subtle)', borderRadius:20, boxShadow:'0 1px 3px rgba(0,0,0,.2)', flex:1, display:'flex', flexDirection:'column', minHeight:0}}>
          {transcript.trim() ? (
            <textarea ref={ta} value={transcript} onChange={e=>onTranscript(e.target.value)}
              style={{flex:1, width:'100%', background:'transparent', color:'var(--text)', padding:24, border:'none', resize:'none', outline:'none',
                font:'400 17px/1.85 var(--font-body)', letterSpacing:'.01em'}}/>
          ) : (
            <div style={{flex:1, display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column', gap:16, color:'var(--text-tertiary)'}}>
              <Icon name="mic" size={40} stroke={1} className="" />
              <span style={{font:'400 13px var(--font-body)', color:'var(--text-secondary)'}}>Press record or Ctrl+Shift+R</span>
            </div>
          )}
          <div style={{display:'flex', justifyContent:'space-between', padding:'4px 24px 14px', flexShrink:0}}>
            <span style={{font:'400 11px var(--font-body)', color:'var(--text-tertiary)'}}>{wordCount} {wordCount===1?'word':'words'}</span>
            <span style={{font:'400 11px var(--font-body)', color:'var(--text-tertiary)'}}>Clean · No profile</span>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DictationPage });
