// OtherPages.jsx — Files, Tasks, History, Settings

function PageHeader({ title, subtitle, right }) {
  return (
    <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', padding:'22px 24px 14px', borderBottom:'1px solid var(--border-subtle)'}}>
      <div>
        <h2 style={{font:'600 22px/1.2 var(--font-body)', color:'var(--text)', margin:0}}>{title}</h2>
        {subtitle && <p style={{font:'400 13px var(--font-body)', color:'var(--text-secondary)', margin:'4px 0 0'}}>{subtitle}</p>}
      </div>
      {right}
    </div>
  );
}

const sampleHistory = [
  { date: '14 Apr · 16:42', preview: 'Okay so the real issue is the first-run screen assumes you know what dictation means. We should lead with press and hold, then speak…', words: 142, dur: '01:42' },
  { date: '14 Apr · 14:10', preview: 'Running notes for the Barbican trip — things to pack, times for trains, the pub meet at 7.', words: 58, dur: '00:38' },
  { date: '13 Apr · 22:08', preview: 'Reviewed the onboarding copy. Three problems — first-run assumes context, the mic permission flow is buried, and the empty state is cold.', words: 204, dur: '02:15' },
  { date: '13 Apr · 09:51', preview: 'Grocery list: elderflower cordial, oat milk, the good bread, the mushrooms from the place on Columbia Road.', words: 26, dur: '00:22' },
];

function HistoryPage() {
  return (
    <div style={{display:'flex', flexDirection:'column', height:'100%'}}>
      <PageHeader title="History" subtitle="Everything you've said, kept nearby."
        right={<div style={{display:'flex', alignItems:'center', gap:8, padding:'8px 12px', background:'var(--bg-input)', border:'1px solid var(--border-subtle)', borderRadius:8, minWidth:260, color:'var(--text-tertiary)'}}>
          <Icon name="search" size={14}/>
          <input placeholder="Search transcripts..." style={{background:'transparent', border:'none', color:'var(--text)', outline:'none', flex:1, font:'400 13px var(--font-body)'}}/>
        </div>}/>
      <div style={{flex:1, overflow:'auto', padding:'16px 24px'}}>
        {sampleHistory.map((h, i) => (
          <div key={i} style={{padding:'14px 18px', background:'var(--bg-card)', border:'1px solid var(--border-subtle)', borderRadius:16, marginBottom:10, cursor:'pointer'}}>
            <div style={{display:'flex', justifyContent:'space-between', marginBottom:6}}>
              <span style={{font:'500 12px var(--font-body)', color:'var(--text-tertiary)'}}>{h.date}</span>
              <span style={{font:'400 11px var(--font-mono)', color:'var(--text-tertiary)'}}>{h.dur} · {h.words} words</span>
            </div>
            <p style={{font:'400 13px/1.55 var(--font-body)', color:'var(--text-secondary)', margin:0, maxWidth:'72ch'}}>{h.preview}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function TasksPage({ tasks, onToggle }) {
  return (
    <div style={{display:'flex', flexDirection:'column', height:'100%'}}>
      <PageHeader title="Tasks" subtitle="Extracted from what you said. Check them off when they're done."/>
      <div style={{flex:1, padding:'16px 24px', overflow:'auto'}}>
        <div style={{font:'500 10px var(--font-body)', color:'var(--text-tertiary)', letterSpacing:'.12em', textTransform:'uppercase', marginBottom:12}}>Inbox · {tasks.filter(t=>!t.done).length} open</div>
        {tasks.map(t => (
          <div key={t.id} onClick={()=>onToggle(t.id)}
            style={{display:'flex', alignItems:'center', gap:12, padding:'12px 16px', background:'var(--bg-card)', border:'1px solid var(--border-subtle)', borderRadius:12, marginBottom:8, cursor:'pointer'}}>
            <div style={{width:18, height:18, borderRadius:6, border: t.done ? 'none' : '1.5px solid var(--border)', background: t.done ? 'var(--accent)' : 'transparent', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
              {t.done && <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#0f0e0c" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>}
            </div>
            <span style={{font:'400 14px var(--font-body)', color: t.done ? 'var(--text-tertiary)' : 'var(--text)', textDecoration: t.done ? 'line-through' : 'none', flex:1}}>{t.text}</span>
            <span style={{font:'400 11px var(--font-mono)', color:'var(--text-tertiary)'}}>{t.from}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

const sampleFiles = [
  { name: 'onboarding-review.wav', size: '4.2 MB', dur: '01:42', date: '14 Apr' },
  { name: 'barbican-trip.wav', size: '1.8 MB', dur: '00:38', date: '14 Apr' },
  { name: 'copy-review.wav', size: '5.6 MB', dur: '02:15', date: '13 Apr' },
];

function FilesPage() {
  return (
    <div style={{display:'flex', flexDirection:'column', height:'100%'}}>
      <PageHeader title="Files" subtitle="Drop in audio to transcribe. Everything stays on this machine."
        right={<button style={{display:'flex', alignItems:'center', gap:6, padding:'8px 14px', background:'var(--accent)', color:'#0f0e0c', border:'none', borderRadius:8, font:'500 13px var(--font-body)', cursor:'pointer', boxShadow:'0 4px 20px rgba(232,168,124,.3)'}}><Icon name="plus" size={14} stroke={2.5}/> New upload</button>}/>
      <div style={{flex:1, padding:'18px 24px', overflow:'auto'}}>
        <div style={{border:'1.5px dashed var(--border)', borderRadius:16, padding:'34px 22px', textAlign:'center', marginBottom:18, background:'rgba(27,26,23,.3)'}}>
          <div style={{display:'flex', justifyContent:'center', color:'var(--text-tertiary)', marginBottom:10}}><Icon name="download" size={26} stroke={1.25}/></div>
          <div style={{font:'500 14px var(--font-body)', color:'var(--text)', marginBottom:4}}>Drop audio files here</div>
          <div style={{font:'400 12px var(--font-body)', color:'var(--text-tertiary)'}}>wav · mp3 · m4a · flac · ogg</div>
        </div>
        {sampleFiles.map((f, i) => (
          <div key={i} style={{display:'flex', alignItems:'center', gap:14, padding:'12px 16px', background:'var(--bg-card)', border:'1px solid var(--border-subtle)', borderRadius:12, marginBottom:8}}>
            <div style={{width:36, height:36, borderRadius:8, background:'var(--bg-elevated)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--accent)'}}><Icon name="play" size={16} stroke={2}/></div>
            <div style={{flex:1}}>
              <div style={{font:'500 13px var(--font-body)', color:'var(--text)'}}>{f.name}</div>
              <div style={{font:'400 11px var(--font-mono)', color:'var(--text-tertiary)', marginTop:2}}>{f.dur} · {f.size} · {f.date}</div>
            </div>
            <button style={{padding:'6px 12px', background:'transparent', color:'var(--text-secondary)', border:'1px solid var(--border-subtle)', borderRadius:8, font:'500 12px var(--font-body)', cursor:'pointer'}}>Transcribe</button>
          </div>
        ))}
      </div>
    </div>
  );
}

function Toggle({ on, onChange }) {
  return (
    <button onClick={() => onChange(!on)}
      style={{width:38, height:22, background: on ? 'var(--accent)' : 'var(--bg-elevated)', border:`1px solid ${on?'transparent':'var(--border-subtle)'}`, borderRadius:999, position:'relative', cursor:'pointer', transition:'all 150ms', padding:0}}>
      <span style={{position:'absolute', top:2, left: on?18:2, width:16, height:16, borderRadius:999, background: on ? '#0f0e0c' : 'var(--text)', transition:'all 150ms'}}/>
    </button>
  );
}

function SettingsPage() {
  const [s, setS] = useStateD({ saveAudio: true, british: false, reduceMotion: true, fillers: true });
  const Row = ({ label, desc, k }) => (
    <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'14px 0', borderBottom:'1px solid var(--border-subtle)'}}>
      <div><div style={{font:'500 14px var(--font-body)', color:'var(--text)'}}>{label}</div><div style={{font:'400 12px var(--font-body)', color:'var(--text-secondary)', marginTop:3, maxWidth:'54ch', lineHeight:1.5}}>{desc}</div></div>
      <Toggle on={s[k]} onChange={v => setS({...s, [k]:v})}/>
    </div>
  );
  return (
    <div style={{display:'flex', flexDirection:'column', height:'100%'}}>
      <PageHeader title="Settings"/>
      <div style={{flex:1, overflow:'auto', padding:'20px 32px', maxWidth:680}}>
        <div style={{font:'500 10px var(--font-body)', color:'var(--text-tertiary)', letterSpacing:'.12em', textTransform:'uppercase', marginBottom:6}}>Recording</div>
        <Row label="Save recordings" desc="Keep the audio alongside each transcript. Useful if a transcription goes wrong — you can try again." k="saveAudio"/>
        <Row label="Remove fillers" desc='Strip "um", "uh", "you know" automatically when finalising the transcript.' k="fillers"/>
        <Row label="British English" desc="Favour British spellings: colour, organise, behaviour." k="british"/>
        <div style={{font:'500 10px var(--font-body)', color:'var(--text-tertiary)', letterSpacing:'.12em', textTransform:'uppercase', margin:'28px 0 6px'}}>Accessibility</div>
        <Row label="Reduce motion" desc="Cross-fades become instant. The waveform stops pulsing. Opt in to animation, not out." k="reduceMotion"/>
        <div style={{marginTop:24, padding:'14px 18px', borderRadius:12, background:'rgba(232,168,124,.06)', border:'1px solid rgba(232,168,124,.2)'}}>
          <div style={{font:'500 12px var(--font-body)', color:'var(--accent)', marginBottom:4}}>Everything stays on this machine.</div>
          <div style={{font:'400 12px/1.55 var(--font-body)', color:'var(--text-secondary)'}}>Transcription runs locally. Audio never leaves your device unless you export it yourself.</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HistoryPage, TasksPage, FilesPage, SettingsPage });
