// components/PlaybackCard.jsx — top-right playback timeline card
const { useRef: _pcUseRef, useEffect: _pcUseEffect } = React;

function PlaybackCard({
  playVT, maxT, shownPts, totalPts,
  isPlaying, playSpeed, autoRotate,
  onTogglePlay, onReplay, onSetSpeed, onToggleRotate, onSeek,
  density, collapsed, onToggle,
}) {
  const trackRef = _pcUseRef(null);
  const draggingRef = _pcUseRef(false);

  const seek = (clientX) => {
    const rect = trackRef.current.getBoundingClientRect();
    const t = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
    onSeek(t * maxT);
  };

  _pcUseEffect(() => {
    const move = (e) => { if (draggingRef.current) seek(e.clientX); };
    const up   = ()  => { draggingRef.current = false; };
    window.addEventListener('mousemove', move);
    window.addEventListener('mouseup', up);
    return () => {
      window.removeEventListener('mousemove', move);
      window.removeEventListener('mouseup', up);
    };
  }, [maxT]);

  const mm = Math.floor(playVT / 60);
  const sec = playVT % 60;
  const timeStr = `${String(mm).padStart(2, '0')}:${sec.toFixed(1).padStart(4, '0')}`;
  const pct = (playVT / maxT) * 100;

  return (
    <Card className={`sc-floater sc-floater-tr sc-playback-card sc-density-${density}`} collapsed={collapsed}>
      <CardHeader>
        <div className="sc-playback-hd">
          <div>
            <CardTitle>Playback</CardTitle>
            <CardDescription>Replay measurement timeline</CardDescription>
          </div>
          <div className="sc-row-gap">
            <Badge variant="secondary" className="sc-mono">live</Badge>
            <CollapseBtn collapsed={collapsed} onClick={onToggle} />
          </div>
        </div>
      </CardHeader>
      <Collapsible open={!collapsed}>
        <Separator />
        <CardContent>
          <div className="sc-playback-stats">
            <div className="sc-playback-time">{timeStr}</div>
            <div className="sc-playback-meta sc-mono">
              #{String(shownPts).padStart(3, '0')} / {totalPts}
            </div>
          </div>

          <div
            ref={trackRef}
            className="sc-progress-track"
            onMouseDown={(e) => { draggingRef.current = true; seek(e.clientX); }}
          >
            <div className="sc-progress-fill" style={{ width: `${pct}%` }} />
            <div className="sc-progress-thumb" style={{ left: `${pct}%` }} />
          </div>

          <div className="sc-playback-controls">
            <Button variant="outline" size="icon" onClick={onReplay} title="Replay">
              <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
                <path d="M3 8a5 5 0 1 0 1.5-3.5L3 6M3 3v3h3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </Button>
            <Button variant="primary" size="icon" onClick={onTogglePlay} title={isPlaying ? 'Pause' : 'Play'}>
              {isPlaying ? (
                <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
                  <rect x="4" y="3" width="3" height="10" rx="0.6" fill="currentColor"/>
                  <rect x="9" y="3" width="3" height="10" rx="0.6" fill="currentColor"/>
                </svg>
              ) : (
                <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
                  <path d="M5 3l8 5-8 5V3z" fill="currentColor"/>
                </svg>
              )}
            </Button>
            <Separator className="sc-sep-v sc-sep-tight" />
            <ToggleGroup
              value={String(playSpeed)}
              onChange={(v) => onSetSpeed(parseFloat(v))}
              options={[
                { value: '0.5', label: '½×' },
                { value: '1',   label: '1×' },
                { value: '2',   label: '2×' },
                { value: '4',   label: '4×' },
              ]}
            />
          </div>

          <Separator className="sc-mt" />

          <div className="sc-row-between sc-mt">
            <div className="sc-row-label">
              <span className="sc-row-title">Auto-rotate</span>
              <span className="sc-row-sub">Spin the camera</span>
            </div>
            <Switch checked={autoRotate} onChange={onToggleRotate} />
          </div>
        </CardContent>
      </Collapsible>
    </Card>
  );
}

window.PlaybackCard = PlaybackCard;