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

function RobustRecorder() {
  const [error, setError] = useState<string | null>(null);

  const handleError = (err: Error) => {
    if (err.message.includes('NotAllowedError')) {
      setError('Acceso a cámara denegado. Por favor permite los permisos.');
    } else if (err.message.includes('NotFoundError')) {
      setError('No se encontró cámara. Por favor conecta una cámara.');
    } else if (err.message.includes('NotSupportedError')) {
      setError('Tu navegador no soporta grabación de video.');
    } else if (err.message.includes('Upload failed')) {
      setError('Subida fallida. Por favor verifica tu conexión.');
    } else {
      setError(err.message);
    }
  };

  return (
    <div>
      <VidtreoRecorder
        apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
        lang="es"
        onError={handleError}
        onUploadError={handleError}
      />

      {error && (
        <div className="error-banner">
          <p>{error}</p>
          <button onClick={() => setError(null)}>Cerrar</button>
        </div>
      )}
    </div>
  );
}

function OfflineAwareRecorder() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return (
    <div>
      {!isOnline && (
        <div className="offline-banner">
          Estás offline. Las grabaciones se subirán cuando te conectes.
        </div>
      )}

      <VidtreoRecorder
        apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
        lang="es"
      />
    </div>
  );
}

function FeedbackForm() {
  const [videoUrl, setVideoUrl] = useState<string | null>(null);
  const [feedback, setFeedback] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await submitFeedback({ text: feedback, videoUrl });
  };

  return (
    <form onSubmit={handleSubmit}>
      <textarea
        value={feedback}
        onChange={(e) => setFeedback(e.target.value)}
        placeholder="Describe tu feedback..."
      />

      <VidtreoRecorder
        apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
        lang="es"
        maxRecordingTime={120000}
        onUploadComplete={(result) => setVideoUrl(result.uploadUrl)}
      />

      {videoUrl && <p>Video adjuntado</p>}

      <button type="submit">Enviar Feedback</button>
    </form>
  );
}

function BrowserAwareRecorder() {
  const [isSupported, setIsSupported] = useState(true);

  useEffect(() => {
    const supported =
      'VideoEncoder' in window &&
      'AudioEncoder' in window &&
      navigator.mediaDevices?.getUserMedia;

    setIsSupported(!!supported);
  }, []);

  if (!isSupported) {
    return (
      <div className="unsupported">
        <h3>Navegador No Soportado</h3>
        <p>Por favor usa Chrome, Edge o Safari 16.4+</p>
      </div>
    );
  }

  return <VidtreoRecorder apiKey={import.meta.env.VITE_VIDTREO_API_KEY} lang="es" />;
}