// 1Radar — Video Editor (OpenCut embed)
// OpenCut runs on a separate server; configure OPENCUT_URL to match your setup.

const OPENCUT_URL = 'http://localhost:3002';

const VideoEditorV1 = () => {
  const [loaded, setLoaded] = React.useState(false);
  const [error, setError] = React.useState(false);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
      <PageHeader
        icon="scissors"
        title="Video Editor"
        subtitle="Powered by OpenCut"
      />

      <div style={{ flex: 1, position: 'relative', minHeight: 0 }}>
        {!loaded && !error && (
          <div style={{
            position: 'absolute', inset: 0,
            display: 'grid', placeItems: 'center',
            flexDirection: 'column', gap: 12,
            color: 'var(--text-faint)',
          }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
              <Icon name="scissors" size={36} stroke={1.4}/>
              <span style={{ fontSize: 14 }}>Chargement d'OpenCut…</span>
            </div>
          </div>
        )}

        {error && (
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            gap: 16, color: 'var(--text-faint)',
          }}>
            <Icon name="alert" size={36} stroke={1.4}/>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text)', marginBottom: 6 }}>
                OpenCut inaccessible
              </div>
              <div style={{ fontSize: 13 }}>
                Assure-toi qu'OpenCut tourne sur{' '}
                <code style={{
                  fontFamily: 'var(--font-mono)', fontSize: 12,
                  background: 'var(--bg-soft)', padding: '2px 6px', borderRadius: 4,
                }}>{OPENCUT_URL}</code>
              </div>
            </div>
            <button
              className="btn btn-primary"
              onClick={() => { setError(false); setLoaded(false); }}
              style={{ marginTop: 4 }}
            >
              Réessayer
            </button>
          </div>
        )}

        <iframe
          key={error ? 'retry' : 'frame'}
          src={OPENCUT_URL}
          style={{
            width: '100%', height: '100%',
            border: 'none',
            opacity: loaded ? 1 : 0,
            transition: 'opacity .3s',
          }}
          onLoad={() => setLoaded(true)}
          onError={() => { setLoaded(false); setError(true); }}
          allow="clipboard-read; clipboard-write"
          title="OpenCut Video Editor"
        />
      </div>
    </div>
  );
};

Object.assign(window, { VideoEditorV1 });