import { useVidtreoRecorder } from '@vidtreo/recorder-react';

const { state, actions, audioLevel, controller } = useVidtreoRecorder(config);

interface UseVidtreoRecorderConfig {
  apiKey: string;
  backendUrl?: string;
  countdownDuration?: number;
  maxRecordingTime?: number;
  userMetadata?: Record<string, unknown>;
  enableSourceSwitching?: boolean;
  enableMute?: boolean;
  enablePause?: boolean;
  enableDeviceChange?: boolean;
  demo?: boolean;

  // Callbacks
  onUploadComplete?: (result: UploadResult) => void;
  onUploadProgress?: (progress: number) => void;
  onUploadError?: (error: Error) => void;
  onRecordingStart?: () => void;
  onRecordingStop?: () => void;
  onError?: (error: Error) => void;
}

interface VidtreoRecorderState {
  recordingState: 'idle' | 'countdown' | 'recording';
  stream: MediaStream | null;
  isMuted: boolean;
  isPaused: boolean;
  error: string | null;
  countdown: number | null;
  timer: string;                    // formato "MM:SS"
  uploadProgress: number | null;    // 0-1
  transitionMessage: string | null;
  isInitialized: boolean;
  recordedBlob: Blob | null;
  devices: {
    cameras: MediaDeviceInfo[];
    microphones: MediaDeviceInfo[];
    selectedCamera: string | null;
    selectedMic: string | null;
  };
}

interface VidtreoRecorderActions {
  startRecording(sourceType?: SourceType): Promise<void>;
  stopRecording(): Promise<RecordingStopResult>;
  pauseRecording(): void;
  resumeRecording(): void;
  toggleMute(): void;
  switchSource(sourceType: SourceType): Promise<void>;
  changeCamera(deviceId: string): Promise<void>;
  changeMic(deviceId: string): Promise<void>;
  startPreview(sourceType?: SourceType): Promise<void>;
  downloadVideo(): void;
  cleanup(): void;
}

audioLevel: number  // 0-1, nível de áudio em tempo real

import { useVidtreoRecorder } from '@vidtreo/recorder-react';
import { useRef, useEffect } from 'react';

function CustomRecorder() {
  const videoRef = useRef<HTMLVideoElement>(null);

  const { state, actions, audioLevel } = useVidtreoRecorder({
    apiKey: import.meta.env.VITE_VIDTREO_API_KEY,
    onUploadComplete: (result) => {
      console.log('Vídeo pronto:', result.uploadUrl);
    },
  });

  useEffect(() => {
    if (videoRef.current && state.stream) {
      videoRef.current.srcObject = state.stream;
    }
  }, [state.stream]);

  useEffect(() => {
    actions.startPreview();
  }, []);

  return (
    <div>
      <video ref={videoRef} autoPlay muted playsInline />

      <div style={{ width: `${audioLevel * 100}%`, height: 4, background: 'green' }} />

      <div>
        {state.recordingState === 'idle' && (
          <button onClick={() => actions.startRecording()}>Gravar</button>
        )}

        {state.recordingState === 'countdown' && (
          <span>{state.countdown}</span>
        )}

        {state.recordingState === 'recording' && (
          <>
            <span>{state.timer}</span>
            <button onClick={() => actions.toggleMute()}>
              {state.isMuted ? 'Ativar Áudio' : 'Silenciar'}
            </button>
            <button onClick={() => actions.stopRecording()}>Parar</button>
          </>
        )}
      </div>

      {state.uploadProgress !== null && (
        <span>Enviando: {Math.round(state.uploadProgress * 100)}%</span>
      )}

      {state.error && <span className="error">{state.error}</span>}
    </div>
  );
}