'use client';
import { useRef, useState } from 'react';

const SENTENCE = { text: '我想买书', language: 'zh-CN' };

export default function Home() {
  const [state, setState] = useState('idle');
  const [result, setResult] = useState(null);
  const recorder = useRef(null);

  async function start() {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    const chunks = [];
    const rec = new MediaRecorder(stream);
    rec.ondataavailable = e => chunks.push(e.data);
    rec.onstop = async () => {
      stream.getTracks().forEach(t => t.stop());
      setState('scoring');
      const form = new FormData();
      form.append('audio', new Blob(chunks, { type: rec.mimeType }), 'recording.webm');
      form.append('text', SENTENCE.text);
      form.append('language', SENTENCE.language);
      const response = await fetch('/api/assess', { method: 'POST', body: form, headers: { 'Idempotency-Key': crypto.randomUUID() } });
      setResult(await response.json());
      setState('idle');
    };
    recorder.current = rec;
    rec.start();
    setState('recording');
  }

  return (
    <main style={{ fontFamily: 'system-ui', maxWidth: 560, margin: '40px auto', padding: 16 }}>
      <h1>Say: {SENTENCE.text}</h1>
      {state === 'recording'
        ? <button onClick={() => recorder.current.stop()}>Stop</button>
        : <button disabled={state === 'scoring'} onClick={start}>{state === 'scoring' ? 'Scoring…' : 'Record'}</button>}
      {result?.error && <p role="alert">{result.error.message}</p>}
      {result && !result.error && !result.assessable && <p>Could not score that recording ({result.reason}). Try again closer to the microphone.</p>}
      {result?.assessable && (
        <table>
          <thead><tr><th>Syllable</th><th>Score</th><th>Tone expected → heard</th></tr></thead>
          <tbody>
            {result.words.map((w, i) => {
              const tone = w.units.find(u => u.dimension === 'tone');
              return <tr key={i}><td>{w.text} {w.pinyin}</td><td>{w.score}</td><td>{tone ? `${tone.expected} → ${tone.heard ?? '?'}` : '—'}</td></tr>;
            })}
          </tbody>
        </table>
      )}
      {result?.test && <p><small>Test key: fixed example result.</small></p>}
    </main>
  );
}