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

export default function Player({ chapterId, isPreview }: { chapterId: number, isPreview: boolean }) {
  const [url, setUrl] = useState<string | null>(null);
  const [err, setErr] = useState<string | null>(null);

  async function getUrl() {
    setErr(null);
    const res = await fetch('/api/playback-token', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ chapterId })
    });
    if (!res.ok) {
      const d = await res.json().catch(()=>({}));
      setErr(d.error || 'Subscription required');
      return;
    }
    const d = await res.json();
    setUrl(d.url);
  }

  return (
    <div className="flex items-center gap-2">
      <button onClick={getUrl} className="border px-3 py-1 rounded">{url ? 'Refresh' : (isPreview ? 'Play Preview' : 'Play')}</button>
      {url && <audio controls src={url} />}
      {err && <span className="text-red-600 text-sm">{err}</span>}
    </div>
  );
}