server-26/drb-frontend/components/InlinePlayer.tsx

"use client";

/**
 * Click-to-listen control for one call — server-26#233. Moved out of
 * CallSpineEntry.tsx so the live wall's spine, the map's path-stop popups and
 * rail cards share it. It no longer owns an <audio> element: playback goes
 * through lib/audioQueue.ts's single element, so starting a call anywhere
 * stops whatever else was playing, and the map can ring the stop that's
 * speaking.
 *
 * Every hook runs before any early return (the server-26#109 item 2 bug was a
 * return between hooks). Nothing plays until the button is clicked.
 */
import { useAuth } from "@/components/AuthProvider";
import { canPlayAudio, seek, toggle, useAudio } from "@/lib/audioQueue";

function fmtClock(s: number): string {
  if (!Number.isFinite(s)) return "0:00";
  const m = Math.floor(s / 60);
  const r = Math.floor(s % 60);
  return `${m}:${r.toString().padStart(2, "0")}`;
}

/** Just the round play/pause button — for map popups, rail cards, spine rows. */
export function PlayButton({ callId, label, className = "" }: { callId: string; label?: string; className?: string }) {
  const auth = useAuth();
  const active = useAudio((s) => s.playingCallId === callId);
  const status = useAudio((s) => (s.playingCallId === callId ? s.status : "idle"));
  const failed = useAudio((s) => s.errorCallId === callId && s.playingCallId !== callId);
  if (!canPlayAudio(auth)) return null;
  const playing = active && status === "playing";
  const loading = active && status === "loading";
  return (
    <button
      type="button"
      onClick={(e) => { e.stopPropagation(); toggle(callId); }}
      disabled={loading}
      title={failed ? "Audio unavailable — click to retry" : playing ? "Pause" : label ?? "Play this call"}
      aria-label={playing ? "Pause call audio" : label ?? "Play call audio"}
      aria-pressed={playing}
      className={`w-6 h-6 shrink-0 rounded-full flex items-center justify-center text-[10px] disabled:opacity-50 ${failed ? "bg-raised text-sev-major border border-sev-major" : "bg-accent text-white"} ${className}`}
    >
      {loading ? "…" : playing ? "❚❚" : failed ? "!" : "▶"}
    </button>
  );
}

/**
 * Button + seek bar + clock. `compact` shows only the button until this call
 * is the one playing, then expands — for dense lists like the wall's spine.
 */
export function InlinePlayer({ callId, compact = false }: { callId: string; compact?: boolean }) {
  const auth = useAuth();
  const active = useAudio((s) => s.playingCallId === callId);
  const current = useAudio((s) => (s.playingCallId === callId ? s.current : 0));
  const duration = useAudio((s) => (s.playingCallId === callId ? s.duration : 0));
  const failed = useAudio((s) => s.errorCallId === callId && s.playingCallId !== callId);

  if (!canPlayAudio(auth)) return null;
  if (failed && !compact) {
    return (
      <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
        <PlayButton callId={callId} />
        <span className="text-xs text-sev-major">Audio unavailable</span>
      </div>
    );
  }
  if (compact && !active) return <PlayButton callId={callId} />;

  return (
    <div className="flex items-center gap-2 w-full max-w-xs" onClick={(e) => e.stopPropagation()}>
      <PlayButton callId={callId} />
      <input
        type="range"
        min={0}
        max={duration || 0}
        step="any"
        value={Math.min(current, duration || 0)}
        onChange={(e) => seek(Number(e.target.value))}
        className="flex-1 h-1 accent-accent"
        disabled={!active || !duration}
        aria-label="Seek"
      />
      <span className="text-[10px] font-mono text-ink-muted tabular-nums shrink-0">
        {fmtClock(current)}{duration ? ` / ${fmtClock(duration)}` : ""}
      </span>
    </div>
  );
}