Voice Memo & Dictation

// Web reference implementation using MediaRecorder API
"use client";

import { useState, useRef, useEffect } from "react";

interface AudioMemo {
  id: string;
  blob: Blob;
  duration: number;   // seconds
  transcript?: string;
  createdAt: Date;
}

export function VoiceMemoList() {
  const [memos, setMemos]       = useState<AudioMemo[]>([]);
  const [recording, setRecording] = useState(false);
  const [elapsed, setElapsed]   = useState(0);
  const mediaRef = useRef<MediaRecorder | null>(null);
  const chunksRef = useRef<BlobPart[]>([]);
  const timerRef  = useRef<ReturnType<typeof setInterval> | null>(null);

  const start = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    const mr = new MediaRecorder(stream);
    chunksRef.current = [];
    mr.ondataavailable = e => chunksRef.current.push(e.data);
    mr.onstop = () => {
      const blob = new Blob(chunksRef.current, { type: "audio/webm" });
      setMemos(prev => [
        { id: crypto.randomUUID(), blob, duration: elapsed, createdAt: new Date() },
        ...prev,
      ]);
      stream.getTracks().forEach(t => t.stop());
    };
    mr.start();
    mediaRef.current = mr;
    setElapsed(0);
    setRecording(true);
    timerRef.current = setInterval(() => setElapsed(e => e + 1), 1000);
  };

  const stop = () => {
    mediaRef.current?.stop();
    if (timerRef.current) clearInterval(timerRef.current);
    setRecording(false);
  };

  const fmt = (s: number) =>
    `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;

  return (
    <div className="space-y-3">
      <button
        onClick={recording ? stop : start}
        className={`px-4 py-2 rounded-full text-sm font-medium transition-all
          ${recording
            ? "bg-red-500 text-white"
            : "bg-[rgb(var(--accent))] text-white"}`}
      >
        {recording ? `Stop · ${fmt(elapsed)}` : "Record Memo"}
      </button>

      {memos.map(m => (
        <div key={m.id} className="p-3 rounded-xl bg-[rgb(var(--surface-raised))] border
                                   border-[rgb(var(--border))] space-y-1">
          <div className="flex justify-between text-[11px] text-[rgb(var(--text-tertiary))]">
            <span>{m.createdAt.toLocaleTimeString()}</span>
            <span className="font-mono">{fmt(m.duration)}</span>
          </div>
          <audio controls src={URL.createObjectURL(m.blob)} className="w-full h-7" />
        </div>
      ))}
    </div>
  );
}