// drive-frame.jsx — Google Drive integration
// DriveButton: כפתור קטן שמופיע בכל פאנל
// DrivePanel: bottom sheet / modal עם iframe לדרייב
(function(){
const { useState, useEffect, useRef } = React;

// ─────────────────────────────────────────────
// LocalStorage helpers — folder_id per project
// ─────────────────────────────────────────────
const DRIVE_KEY = 'ybp_drive_';
const getDriveSettings = (projectId) => {
  try {
    const raw = localStorage.getItem(DRIVE_KEY + projectId);
    if (raw) {
      const parsed = JSON.parse(raw);
      if (typeof parsed === 'string') return { folderId: parsed };
      return parsed;
    }
  } catch {}
  const proj = (window.YBP_DATA?.projects || []).find(p => p.id === projectId);
  if (proj?.driveFolder) return { folderId: proj.driveFolder };
  if (proj?.driveFolderId) return { folderId: proj.driveFolderId };
  return {};
};
const saveDriveSettings = (projectId, settings) => {
  try { localStorage.setItem(DRIVE_KEY + projectId, JSON.stringify(settings)); } catch {}
};

// ─────────────────────────────────────────────
// DrivePanel — Bottom sheet / modal
// ─────────────────────────────────────────────
const DrivePanel = ({ projectId, onClose }) => {
  const project = YBP_DATA.projects.find(p => p.id === projectId) || {};
  const [settings, setSettings] = useState(() => getDriveSettings(projectId));
  const [editingId, setEditingId] = useState(false);
  const [draftId, setDraftId] = useState(settings.folderId || '');
  const [view, setView] = useState('frame'); // 'frame' | 'settings'
  const iframeRef = useRef(null);

  const folderId = settings.folderId || null;

  const saveId = () => {
    const cleaned = draftId.trim()
      .replace(/.*\/folders\/([a-zA-Z0-9_-]+).*/,'$1')
      .replace(/[^a-zA-Z0-9_-]/g,'');
    const updated = { ...settings, folderId: cleaned };
    setSettings(updated);
    saveDriveSettings(projectId, updated);
    setEditingId(false);
    setView('frame');
  };

  const userEmail = window.YBP_USER?.email || '';
  const authParam = userEmail ? `&authuser=${encodeURIComponent(userEmail)}` : '';
  const driveUrl = folderId
    ? `https://drive.google.com/embeddedfolderview?id=${folderId}${authParam}#grid`
    : null;

  // close on backdrop click
  const backdropRef = useRef(null);
  useEffect(() => {
    const handler = (e) => { if (e.target === backdropRef.current) onClose(); };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  // close on Escape
  useEffect(() => {
    const handler = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', handler);
    return () => document.removeEventListener('keydown', handler);
  }, []);

  return (
    <div ref={backdropRef} style={{
      position: 'fixed', inset: 0, zIndex: 9000,
      background: 'rgba(0,0,0,0.55)',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
    }}>
      <div style={{
        background: '#fff', borderRadius: '16px 16px 0 0',
        width: '100%', maxWidth: 860,
        height: '88vh', maxHeight: 780,
        display: 'flex', flexDirection: 'column',
        boxShadow: '0 -8px 40px rgba(0,0,0,0.25)',
        overflow: 'hidden',
        animation: 'slideUp 0.22s cubic-bezier(.16,1,.3,1)',
      }}>
        <style>{`
          @keyframes slideUp {
            from { transform: translateY(100%); opacity: 0; }
            to   { transform: translateY(0);    opacity: 1; }
          }
        `}</style>

        {/* Header */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '14px 18px', borderBottom: '1px solid #e5e7eb',
          flexShrink: 0,
        }}>
          {/* Drive icon */}
          <svg width="22" height="22" viewBox="0 0 87.3 78" fill="none">
            <path d="M6.6 66.85l3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3L29.5 48H0c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
            <path d="M43.65 25L29.5 48l16.15 28.8L87.3 48c0-1.55-.4-3.1-1.2-4.5L62.1 4.15c-.8-1.4-1.95-2.5-3.3-3.3z" fill="#00ac47"/>
            <path d="M73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3L79.7 69l4.4-7.55c.8-1.4 1.2-2.95 1.2-4.5H45.65L73.55 76.8z" fill="#ea4335"/>
            <path d="M43.65 25L57.8 2.1C56.45 1.3 54.9.9 53.25.9H34.05c-1.65 0-3.2.4-4.55 1.2z" fill="#00832d"/>
            <path d="M45.65 48H29.5L13.85 76.8c1.35.8 2.9 1.2 4.55 1.2H68.9c1.65 0 3.2-.4 4.55-1.2z" fill="#2684fc"/>
            <path d="M73.4 25.9L59.1.85C58.3-.55 57.15-1.65 55.8-2.45L43.65 25H87.3c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
          </svg>

          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: '#1a2c4a' }}>Google Drive — {project.name}</div>
            {folderId
              ? <div style={{ fontSize: 11, color: '#6b7280', marginTop: 1 }}>תיקיית הפרויקט מקושרת</div>
              : <div style={{ fontSize: 11, color: '#dc2626', marginTop: 1 }}>⚠️ לא מוגדר Folder ID עדיין</div>
            }
          </div>

          {/* Tabs */}
          <div style={{ display: 'flex', gap: 4, background: '#f3f4f6', borderRadius: 7, padding: 3 }}>
            {[{k:'frame',label:'📁 תיקייה'},{k:'settings',label:'⚙️ הגדרות'}].map(t => (
              <button key={t.k} onClick={() => setView(t.k)} style={{
                padding: '5px 12px', borderRadius: 5, border: 'none',
                background: view === t.k ? '#fff' : 'transparent',
                color: view === t.k ? '#1a2c4a' : '#6b7280',
                fontSize: 12, fontWeight: view === t.k ? 700 : 500,
                cursor: 'pointer', fontFamily: 'inherit',
                boxShadow: view === t.k ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
              }}>{t.label}</button>
            ))}
          </div>

          {/* Open in Drive */}
          {folderId && (
            <a href={`https://drive.google.com/drive/folders/${folderId}${userEmail ? `?authuser=${encodeURIComponent(userEmail)}` : ''}`} target="_blank" rel="noopener noreferrer"
              style={{ padding: '6px 12px', borderRadius: 6, border: '1px solid #e5e7eb', background: '#f9fafb', color: '#374151', fontSize: 12, fontWeight: 600, textDecoration: 'none', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 5 }}>
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
              פתח
            </a>
          )}

          <button onClick={onClose} style={{
            background: '#f3f4f6', border: 'none', borderRadius: 6,
            width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', color: '#6b7280', fontSize: 16,
          }}>✕</button>
        </div>

        {/* Body */}
        <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>

          {/* ── FRAME VIEW ── */}
          {view === 'frame' && (
            <>
              {folderId ? (
                <iframe
                  ref={iframeRef}
                  src={driveUrl}
                  title="Google Drive"
                  style={{ flex: 1, border: 'none', width: '100%' }}
                  allow="autoplay"
                />
              ) : (
                <div style={{
                  flex: 1, display: 'flex', flexDirection: 'column',
                  alignItems: 'center', justifyContent: 'center',
                  gap: 16, padding: 40, background: '#fafafa',
                }}>
                  {/* Empty state */}
                  <svg width="64" height="64" viewBox="0 0 87.3 78" fill="none" style={{ opacity: 0.25 }}>
                    <path d="M6.6 66.85l3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3L29.5 48H0c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
                    <path d="M43.65 25L29.5 48l16.15 28.8L87.3 48c0-1.55-.4-3.1-1.2-4.5L62.1 4.15c-.8-1.4-1.95-2.5-3.3-3.3z" fill="#00ac47"/>
                    <path d="M73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3L79.7 69l4.4-7.55c.8-1.4 1.2-2.95 1.2-4.5H45.65L73.55 76.8z" fill="#ea4335"/>
                    <path d="M43.65 25L57.8 2.1C56.45 1.3 54.9.9 53.25.9H34.05c-1.65 0-3.2.4-4.55 1.2z" fill="#00832d"/>
                    <path d="M45.65 48H29.5L13.85 76.8c1.35.8 2.9 1.2 4.55 1.2H68.9c1.65 0 3.2-.4 4.55-1.2z" fill="#2684fc"/>
                    <path d="M73.4 25.9L59.1.85C58.3-.55 57.15-1.65 55.8-2.45L43.65 25H87.3c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
                  </svg>
                  <div style={{ textAlign: 'center' }}>
                    <div style={{ fontSize: 16, fontWeight: 700, color: '#1a2c4a', marginBottom: 6 }}>
                      תיקיית Drive לא מקושרת עדיין
                    </div>
                    <div style={{ fontSize: 13, color: '#6b7280', maxWidth: 320, lineHeight: 1.6 }}>
                      הוסף את ה-Folder ID של תיקיית הפרויקט ב-Google Drive כדי לגשת לקבצים ישירות מכאן
                    </div>
                  </div>
                  <button onClick={() => setView('settings')} style={{
                    padding: '10px 22px', borderRadius: 8, border: 'none',
                    background: '#1a2c4a', color: '#fff', fontSize: 13, fontWeight: 700,
                    cursor: 'pointer', fontFamily: 'inherit',
                  }}>⚙️ קשר תיקייה</button>
                </div>
              )}
            </>
          )}

          {/* ── SETTINGS VIEW ── */}
          {view === 'settings' && (
            <div style={{ padding: 28, overflowY: 'auto', flex: 1 }}>
              <div style={{ maxWidth: 560, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 24 }}>

                {/* Folder ID input */}
                <div style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: 10, padding: 20 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: '#1a2c4a', marginBottom: 4 }}>
                    🗂️ תיקיית Drive לפרויקט
                  </div>
                  <div style={{ fontSize: 12, color: '#6b7280', marginBottom: 14, lineHeight: 1.6 }}>
                    הדבק כאן את ה-URL המלא של התיקייה, או את ה-Folder ID בלבד.
                    <br/>
                    <span style={{ fontFamily: 'monospace', fontSize: 11, color: '#9ca3af' }}>
                      לדוגמה: https://drive.google.com/drive/folders/<strong>1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs</strong>
                    </span>
                  </div>

                  <div style={{ display: 'flex', gap: 8 }}>
                    <input
                      value={draftId}
                      onChange={e => setDraftId(e.target.value)}
                      placeholder="Folder ID או URL מלא..."
                      style={{
                        flex: 1, padding: '9px 12px', borderRadius: 7,
                        border: '1px solid #d1d5db', fontSize: 13,
                        fontFamily: 'monospace', direction: 'ltr',
                        outline: 'none', background: '#fafafa',
                      }}
                    />
                    <button onClick={saveId} style={{
                      padding: '9px 18px', borderRadius: 7, border: 'none',
                      background: '#1a2c4a', color: '#fff', fontSize: 13, fontWeight: 700,
                      cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap',
                    }}>שמור</button>
                  </div>

                  {folderId && (
                    <div style={{
                      marginTop: 12, padding: '8px 12px', background: '#f0fdf4',
                      border: '1px solid #bbf7d0', borderRadius: 6,
                      display: 'flex', alignItems: 'center', gap: 8, fontSize: 12,
                    }}>
                      <span style={{ color: '#16a34a', fontWeight: 700 }}>✓ מקושר:</span>
                      <span style={{ fontFamily: 'monospace', color: '#374151', fontSize: 11 }}>{folderId}</span>
                      <button onClick={() => { setDraftId(''); saveDriveSettings(projectId, { ...settings, folderId: '' }); setSettings(s => ({ ...s, folderId: '' })); }}
                        style={{ marginRight: 'auto', background: 'transparent', border: 'none', color: '#dc2626', cursor: 'pointer', fontSize: 12, fontFamily: 'inherit' }}>
                        הסר
                      </button>
                    </div>
                  )}
                </div>

                {/* Access management */}
                <div style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: 10, padding: 20 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: '#1a2c4a', marginBottom: 4 }}>
                    👥 הרשאות גישה
                  </div>
                  <div style={{ fontSize: 12, color: '#6b7280', marginBottom: 16, lineHeight: 1.6 }}>
                    מי יכול לגשת לתיקיית Drive של הפרויקט הזה?
                  </div>

                  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                    {[
                      { role: 'Admin', icon: '🔑', desc: 'גישה מלאה — קריאה, כתיבה, הזמנת אחרים', color: '#7c3aed', always: true },
                      { role: 'מנהל פרויקט', icon: '👷', desc: 'גישה לתיקיית הפרויקט שלו בלבד', color: '#1d4ed8', always: true },
                      { role: 'לקוח', icon: '👤', desc: 'צפייה בלבד — תיקיית "ללקוח" בלבד', color: '#059669', key: 'clientAccess' },
                      { role: 'קבלן', icon: '🔨', desc: 'צפייה בלבד — תיקיית "קבלנים" בלבד', color: '#d97706', key: 'contractorAccess' },
                    ].map(({ role, icon, desc, color, always, key }) => {
                      const enabled = always || settings[key];
                      return (
                        <div key={role} style={{
                          display: 'flex', alignItems: 'center', gap: 12,
                          padding: '10px 14px', borderRadius: 8,
                          border: `1px solid ${enabled ? color + '30' : '#e5e7eb'}`,
                          background: enabled ? color + '08' : '#fafafa',
                        }}>
                          <span style={{ fontSize: 20 }}>{icon}</span>
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div style={{ fontSize: 13, fontWeight: 600, color: '#1a2c4a' }}>{role}</div>
                            <div style={{ fontSize: 11, color: '#6b7280' }}>{desc}</div>
                          </div>
                          {always ? (
                            <span style={{ fontSize: 11, color: color, fontWeight: 700, background: color + '15', padding: '3px 8px', borderRadius: 4 }}>תמיד</span>
                          ) : (
                            <button onClick={() => {
                              const updated = { ...settings, [key]: !settings[key] };
                              setSettings(updated);
                              saveDriveSettings(projectId, updated);
                            }} style={{
                              width: 40, height: 22, borderRadius: 11, border: 'none',
                              background: enabled ? color : '#d1d5db',
                              cursor: 'pointer', position: 'relative', transition: 'background 0.2s',
                              flexShrink: 0,
                            }}>
                              <span style={{
                                position: 'absolute', top: 3,
                                right: enabled ? 3 : 'auto', left: enabled ? 'auto' : 3,
                                width: 16, height: 16, borderRadius: 8, background: '#fff',
                                transition: 'all 0.2s',
                              }}/>
                            </button>
                          )}
                        </div>
                      );
                    })}
                  </div>
                </div>

                {/* Invite */}
                <div style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: 10, padding: 20 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: '#1a2c4a', marginBottom: 4 }}>
                    ✉️ הזמן לצפות בפרויקט
                  </div>
                  <div style={{ fontSize: 12, color: '#6b7280', marginBottom: 14 }}>
                    שלח הזמנה לגישה לתיקיית Drive (נפתח ב-Gmail)
                  </div>
                  <div style={{ display: 'flex', gap: 8 }}>
                    <input
                      placeholder="אימייל של הנמען..."
                      style={{
                        flex: 1, padding: '9px 12px', borderRadius: 7,
                        border: '1px solid #d1d5db', fontSize: 13,
                        fontFamily: 'inherit', direction: 'ltr', outline: 'none',
                      }}
                      onKeyDown={e => {
                        if (e.key === 'Enter' && e.target.value && folderId) {
                          const to = encodeURIComponent(e.target.value);
                          const subject = encodeURIComponent(`הזמנה לגישה לפרויקט: ${project.name}`);
                          const body = encodeURIComponent(`שלום,\n\nהוזמנת לצפות בתיקיית הפרויקט "${project.name}" ב-Google Drive.\n\nלינק לתיקייה:\nhttps://drive.google.com/drive/folders/${folderId}\n\nבברכה,\n${((window.YBP_AUTH && window.YBP_AUTH.getCurrentUser) ? window.YBP_AUTH.getCurrentUser().name : YBP_DATA.user?.name) || 'מנהל פרויקט'}`);
                          window.open(`mailto:${to}?subject=${subject}&body=${body}`, '_blank');
                          e.target.value = '';
                        }
                      }}
                    />
                    <button style={{
                      padding: '9px 16px', borderRadius: 7, border: '1px solid #e5e7eb',
                      background: '#f9fafb', color: '#374151', fontSize: 13, fontWeight: 600,
                      cursor: 'pointer', fontFamily: 'inherit',
                    }}>שלח ↵</button>
                  </div>
                  <div style={{ fontSize: 11, color: '#9ca3af', marginTop: 8 }}>
                    לחץ Enter לשליחה • הגישה בפועל מנוהלת ב-Google Drive
                  </div>
                </div>

              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────
// DriveButton — כפתור קטן לכל מקום
// ─────────────────────────────────────────────
const DriveButton = ({ projectId, style = {}, label = 'Drive' }) => {
  const [open, setOpen] = useState(false);
  const settings = getDriveSettings(projectId);
  const linked = !!settings.folderId;

  return (
    <>
      <button
        onClick={() => setOpen(true)}
        title={linked ? 'פתח Google Drive לפרויקט' : 'קשר תיקיית Drive לפרויקט'}
        style={{
          display: 'flex', alignItems: 'center', gap: 6,
          padding: '7px 12px', borderRadius: 6,
          border: linked ? '1px solid #c7d2fe' : '1px solid #e5e7eb',
          background: linked ? '#eef2ff' : '#f9fafb',
          color: linked ? '#4338ca' : '#6b7280',
          fontSize: 12, fontWeight: 600, cursor: 'pointer',
          fontFamily: 'inherit', transition: 'all 0.15s',
          ...style,
        }}
        onMouseEnter={e => { e.currentTarget.style.opacity = '0.85'; }}
        onMouseLeave={e => { e.currentTarget.style.opacity = '1'; }}
      >
        {/* Mini Drive icon */}
        <svg width="14" height="12" viewBox="0 0 87.3 78" fill="none">
          <path d="M6.6 66.85l3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3L29.5 48H0c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
          <path d="M43.65 25L29.5 48l16.15 28.8L87.3 48c0-1.55-.4-3.1-1.2-4.5L62.1 4.15c-.8-1.4-1.95-2.5-3.3-3.3z" fill="#00ac47"/>
          <path d="M73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3L79.7 69l4.4-7.55c.8-1.4 1.2-2.95 1.2-4.5H45.65L73.55 76.8z" fill="#ea4335"/>
          <path d="M43.65 25L57.8 2.1C56.45 1.3 54.9.9 53.25.9H34.05c-1.65 0-3.2.4-4.55 1.2z" fill="#00832d"/>
          <path d="M45.65 48H29.5L13.85 76.8c1.35.8 2.9 1.2 4.55 1.2H68.9c1.65 0 3.2-.4 4.55-1.2z" fill="#2684fc"/>
          <path d="M73.4 25.9L59.1.85C58.3-.55 57.15-1.65 55.8-2.45L43.65 25H87.3c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
        </svg>
        {label}
        {!linked && <span style={{ fontSize: 10, background: '#fef3c7', color: '#92400e', padding: '1px 5px', borderRadius: 3, fontWeight: 700 }}>לא מקושר</span>}
      </button>

      {open && <DrivePanel projectId={projectId} onClose={() => setOpen(false)}/>}
    </>
  );
};

// ── DriveFolderEmbed — iframe embed של תיקיית Drive בתוך tab ────────────────
const DriveFolderEmbed = ({ projectId }) => {
  const [showPanel, setShowPanel] = React.useState(false);
  const [view, setView] = React.useState('list'); // 'list' | 'grid'
  const settings = getDriveSettings(projectId);
  const folderId = settings.folderId;
  const userEmail = window.YBP_USER?.email || '';
  const authParam = userEmail ? `&authuser=${encodeURIComponent(userEmail)}` : '';

  if (!folderId) return (
    <>
      <div style={{ padding: 40, textAlign: 'center', background: '#fff', border: '1px solid #e5e7eb', borderRadius: 8 }}>
        <div style={{ fontSize: 32, marginBottom: 10 }}>📁</div>
        <div style={{ fontSize: 14, fontWeight: 600, color: '#1a2c4a', marginBottom: 6 }}>תיקיית הפרויקט לא מקושרת</div>
        <div style={{ fontSize: 12, color: '#6b7280', marginBottom: 16 }}>קשר תיקיית Google Drive כדי לראות את המסמכים כאן</div>
        <button onClick={() => setShowPanel(true)} style={{ padding: '8px 18px', borderRadius: 7, border: 'none', background: '#1d4ed8', color: '#fff', fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit' }}>
          קשר תיקייה
        </button>
      </div>
      {showPanel && <DrivePanel projectId={projectId} onClose={() => setShowPanel(false)}/>}
    </>
  );

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
        {/* Toggle list / grid */}
        <div style={{ display: 'flex', gap: 4, border: '1px solid #e5e7eb', borderRadius: 6, padding: 2 }}>
          {[
            { id: 'list', label: 'רשימה' },
            { id: 'grid', label: 'תיקיות' },
          ].map(opt => (
            <button key={opt.id} onClick={() => setView(opt.id)}
              style={{
                fontSize: 12, fontWeight: 600, padding: '4px 12px', borderRadius: 4,
                border: 'none', cursor: 'pointer', fontFamily: 'inherit',
                background: view === opt.id ? '#1d4ed8' : 'transparent',
                color: view === opt.id ? '#fff' : '#374151',
              }}>
              {opt.label}
            </button>
          ))}
        </div>
        <a href={`https://drive.google.com/drive/folders/${folderId}${userEmail ? `?authuser=${encodeURIComponent(userEmail)}` : ''}`} target="_blank" rel="noopener noreferrer"
          style={{ fontSize: 12, color: '#1d4ed8', textDecoration: 'none', padding: '4px 10px', border: '1px solid #bfdbfe', borderRadius: 6, background: '#eff6ff', fontWeight: 600 }}>
          ↗ פתח ב-Google Drive
        </a>
      </div>
      <iframe src={`https://drive.google.com/embeddedfolderview?id=${folderId}${authParam}#${view}`}
        style={{ width: '100%', height: 520, border: '1px solid #e5e7eb', borderRadius: 8, background: '#fff' }}
        title="Drive folder"/>
    </div>
  );
};

Object.assign(window, { DriveButton, DrivePanel, DriveFolderEmbed });
})();