feat: Google Drive agency sync with auto folder match

Connect marketing@ once, match Drive folders to tenants by name,
list Drive in Activos, and mirror portal uploads to the linked folder.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/AssetsLibrary.tsx

@@ -4,8 +4,10 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   CheckCircle2,
   Download,
+  ExternalLink,
   FileText,
   FolderOpen,
+  HardDrive,
   Loader2,
   Trash2,
   Upload,
@@ -21,6 +23,15 @@ type Asset = {
   created_at?: string;
 };
 
+type DriveFile = {
+  id: string;
+  name: string;
+  mimeType?: string;
+  bytes?: number | null;
+  modifiedTime?: string;
+  webViewLink?: string;
+};
+
 function formatBytes(n?: number | null) {
   if (!n) return '—';
   if (n < 1024) return `${n} B`;
@@ -32,6 +43,7 @@ function iconHint(mime?: string | null) {
   if (!mime) return 'FILE';
   if (mime.startsWith('image/')) return 'IMG';
   if (mime.includes('pdf')) return 'PDF';
+  if (mime.includes('folder')) return 'DIR';
   if (mime.includes('sheet') || mime.includes('csv') || mime.includes('excel'))
     return 'XLS';
   if (mime.includes('zip') || mime.includes('rar')) return 'ZIP';
@@ -39,7 +51,10 @@ function iconHint(mime?: string | null) {
 }
 
 export default function AssetsLibrary({ tenantLabel }: { tenantLabel: string }) {
+  const [tab, setTab] = useState<'portal' | 'drive'>('portal');
   const [assets, setAssets] = useState<Asset[]>([]);
+  const [driveFiles, setDriveFiles] = useState<DriveFile[]>([]);
+  const [driveFolder, setDriveFolder] = useState<string | null>(null);
   const [warning, setWarning] = useState<string | null>(null);
   const [folder, setFolder] = useState('');
   const [loading, setLoading] = useState(true);
@@ -47,15 +62,30 @@ export default function AssetsLibrary({ tenantLabel }: { tenantLabel: string })
   const [err, setErr] = useState<string | null>(null);
   const [drag, setDrag] = useState(false);
 
-  const load = useCallback(async () => {
-    setLoading(true);
+  const loadPortal = useCallback(async () => {
     const res = await fetch('/api/assets');
     const data = await res.json();
     setAssets(data.assets || []);
-    setWarning(data.warning || null);
-    setLoading(false);
+    if (data.warning) setWarning(data.warning);
   }, []);
 
+  const loadDrive = useCallback(async () => {
+    const res = await fetch('/api/assets/drive');
+    const data = await res.json();
+    setDriveFiles(data.files || []);
+    setDriveFolder(data.folderName || null);
+    if (data.warning) setWarning(data.warning);
+    else if (data.linked) setWarning(null);
+  }, []);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setErr(null);
+    if (tab === 'portal') await loadPortal();
+    else await loadDrive();
+    setLoading(false);
+  }, [tab, loadPortal, loadDrive]);
+
   useEffect(() => {
     void load();
   }, [load]);
@@ -92,7 +122,8 @@ export default function AssetsLibrary({ tenantLabel }: { tenantLabel: string })
     } else if (data.errors?.length) {
       setErr(data.errors.join(' · '));
     }
-    await load();
+    setTab('portal');
+    await loadPortal();
     setUploading(false);
   }
 
@@ -106,6 +137,22 @@ export default function AssetsLibrary({ tenantLabel }: { tenantLabel: string })
     window.open(data.url, '_blank', 'noopener,noreferrer');
   }
 
+  async function openDrive(file: DriveFile) {
+    if (file.webViewLink) {
+      window.open(file.webViewLink, '_blank', 'noopener,noreferrer');
+      return;
+    }
+    const res = await fetch(
+      `/api/assets/drive?download=${encodeURIComponent(file.id)}`
+    );
+    const data = await res.json();
+    if (!res.ok || !data.url) {
+      setErr(data.error || 'No se pudo abrir en Drive');
+      return;
+    }
+    window.open(data.url, '_blank', 'noopener,noreferrer');
+  }
+
   async function remove(id: string) {
     if (!confirm('¿Eliminar este archivo de la biblioteca?')) return;
     const res = await fetch(`/api/assets?id=${encodeURIComponent(id)}`, {
@@ -115,7 +162,7 @@ export default function AssetsLibrary({ tenantLabel }: { tenantLabel: string })
       const data = await res.json().catch(() => ({}));
       setErr(data.error || 'No se pudo borrar');
     }
-    await load();
+    await loadPortal();
   }
 
   return (
@@ -125,12 +172,39 @@ export default function AssetsLibrary({ tenantLabel }: { tenantLabel: string })
           Biblioteca de activos
         </h2>
         <p className="text-sm text-gray-400 mt-1 max-w-2xl">
-          Archivo oficial de <strong className="text-gray-300">{tenantLabel}</strong>:
-          sube PDF, Excel, CSV, imágenes, ZIP u otros archivos ya validados.
-          Opcional: carpeta lógica (p. ej. <code>briefs/2026</code>).
+          Archivo oficial de <strong className="text-gray-300">{tenantLabel}</strong>.
+          Subidas al portal se copian a la carpeta Drive del cliente si está
+          enlazada.
         </p>
       </div>
 
+      <div className="flex gap-2">
+        <button
+          type="button"
+          onClick={() => setTab('portal')}
+          className={`text-xs px-3 py-1.5 rounded-lg border ${
+            tab === 'portal'
+              ? 'border-brand-500/40 text-brand-400'
+              : 'border-gray-700 text-gray-400'
+          }`}
+        >
+          Portal
+        </button>
+        <button
+          type="button"
+          onClick={() => setTab('drive')}
+          className={`inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border ${
+            tab === 'drive'
+              ? 'border-brand-500/40 text-brand-400'
+              : 'border-gray-700 text-gray-400'
+          }`}
+        >
+          <HardDrive className="w-3.5 h-3.5" />
+          Google Drive
+          {driveFolder ? ` · ${driveFolder}` : ''}
+        </button>
+      </div>
+
       {warning && (
         <p className="text-xs text-amber-400 border border-amber-500/20 rounded-lg px-3 py-2">
           {warning}
@@ -138,175 +212,230 @@ export default function AssetsLibrary({ tenantLabel }: { tenantLabel: string })
       )}
       {err && <p className="text-xs text-red-400">{err}</p>}
 
-      <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-end">
-        <div className="flex-1">
-          <label className="text-[11px] uppercase text-gray-500">Carpeta</label>
-          <input
-            className="mt-1 w-full rounded-lg bg-gray-900 border border-gray-700 px-3 py-2 text-sm text-white"
-            placeholder="ej. creatividades/meta o vacío = raíz"
-            value={folder}
-            onChange={(e) => setFolder(e.target.value)}
-            list="asset-folders"
-          />
-          <datalist id="asset-folders">
-            {folders.map((f) => (
-              <option key={f} value={f} />
-            ))}
-          </datalist>
-        </div>
-        <label className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500/90 hover:bg-brand-500 px-4 py-2.5 text-sm font-medium text-white cursor-pointer">
-          {uploading ? (
-            <Loader2 className="w-4 h-4 animate-spin" />
-          ) : (
-            <Upload className="w-4 h-4" />
-          )}
-          Subir archivos
-          <input
-            type="file"
-            className="hidden"
-            multiple
-            onChange={(e) => {
-              if (e.target.files) void uploadFiles(e.target.files);
-              e.target.value = '';
+      {tab === 'portal' && (
+        <>
+          <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-end">
+            <div className="flex-1">
+              <label className="text-[11px] uppercase text-gray-500">
+                Carpeta
+              </label>
+              <input
+                className="mt-1 w-full rounded-lg bg-gray-900 border border-gray-700 px-3 py-2 text-sm text-white"
+                placeholder="ej. creatividades/meta o vacío = raíz"
+                value={folder}
+                onChange={(e) => setFolder(e.target.value)}
+                list="asset-folders"
+              />
+              <datalist id="asset-folders">
+                {folders.map((f) => (
+                  <option key={f} value={f} />
+                ))}
+              </datalist>
+            </div>
+            <label className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500/90 hover:bg-brand-500 px-4 py-2.5 text-sm font-medium text-white cursor-pointer">
+              {uploading ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <Upload className="w-4 h-4" />
+              )}
+              Subir archivos
+              <input
+                type="file"
+                className="hidden"
+                multiple
+                onChange={(e) => {
+                  if (e.target.files) void uploadFiles(e.target.files);
+                  e.target.value = '';
+                }}
+              />
+            </label>
+            <label className="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-700 px-4 py-2.5 text-sm text-gray-300 hover:text-white cursor-pointer">
+              Subir carpeta
+              <input
+                type="file"
+                className="hidden"
+                multiple
+                {...{ webkitdirectory: '', directory: '' }}
+                onChange={(e) => {
+                  if (e.target.files?.length) {
+                    const rel =
+                      (e.target.files[0] as File & { webkitRelativePath?: string })
+                        .webkitRelativePath || '';
+                    const top = rel.split('/')[0];
+                    if (top && !folder) setFolder(top);
+                    void uploadFiles(e.target.files);
+                  }
+                  e.target.value = '';
+                }}
+              />
+            </label>
+          </div>
+
+          <div
+            onDragEnter={(e) => {
+              e.preventDefault();
+              setDrag(true);
             }}
-          />
-        </label>
-        <label className="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-700 px-4 py-2.5 text-sm text-gray-300 hover:text-white cursor-pointer">
-          Subir carpeta
-          <input
-            type="file"
-            className="hidden"
-            multiple
-            // Folder picker (Chromium/Safari)
-            {...{ webkitdirectory: '', directory: '' }}
-            onChange={(e) => {
-              if (e.target.files?.length) {
-                // Use first file relative path as folder hint if empty
-                const rel =
-                  (e.target.files[0] as File & { webkitRelativePath?: string })
-                    .webkitRelativePath || '';
-                const top = rel.split('/')[0];
-                if (top && !folder) setFolder(top);
-                void uploadFiles(e.target.files);
+            onDragOver={(e) => e.preventDefault()}
+            onDragLeave={() => setDrag(false)}
+            onDrop={(e) => {
+              e.preventDefault();
+              setDrag(false);
+              if (e.dataTransfer.files?.length) {
+                void uploadFiles(e.dataTransfer.files);
               }
-              e.target.value = '';
             }}
-          />
-        </label>
-      </div>
-
-      <div
-        onDragEnter={(e) => {
-          e.preventDefault();
-          setDrag(true);
-        }}
-        onDragOver={(e) => e.preventDefault()}
-        onDragLeave={() => setDrag(false)}
-        onDrop={(e) => {
-          e.preventDefault();
-          setDrag(false);
-          if (e.dataTransfer.files?.length) {
-            void uploadFiles(e.dataTransfer.files);
-          }
-        }}
-        className={`rounded-xl border border-dashed px-6 py-10 text-center transition-colors ${
-          drag
-            ? 'border-brand-500 bg-brand-500/10'
-            : 'border-gray-700 bg-[#111827]'
-        }`}
-      >
-        <FolderOpen className="w-8 h-8 text-gray-600 mx-auto mb-2" />
-        <p className="text-sm text-gray-300">
-          Arrastra aquí cualquier archivo (máx. 80 MB c/u)
-        </p>
-        <p className="text-[11px] text-gray-500 mt-1">
-          PDF · Excel · CSV · imágenes · ZIP · vídeo · etc.
-        </p>
-      </div>
-
-      {folders.length > 0 && (
-        <div className="flex flex-wrap gap-2">
-          <button
-            type="button"
-            onClick={() => setFolder('')}
-            className={`text-[11px] px-2.5 py-1 rounded-md border ${
-              !folder
-                ? 'border-brand-500/40 text-brand-400'
-                : 'border-gray-700 text-gray-400'
+            className={`rounded-xl border border-dashed px-6 py-10 text-center transition-colors ${
+              drag
+                ? 'border-brand-500 bg-brand-500/10'
+                : 'border-gray-700 bg-[#111827]'
             }`}
           >
-            Todas
-          </button>
-          {folders.map((f) => (
-            <button
-              key={f}
-              type="button"
-              onClick={() => setFolder(f)}
-              className={`text-[11px] px-2.5 py-1 rounded-md border ${
-                folder === f
-                  ? 'border-brand-500/40 text-brand-400'
-                  : 'border-gray-700 text-gray-400'
-              }`}
-            >
-              {f}
-            </button>
-          ))}
-        </div>
+            <FolderOpen className="w-8 h-8 text-gray-600 mx-auto mb-2" />
+            <p className="text-sm text-gray-300">
+              Arrastra aquí cualquier archivo (máx. 80 MB c/u)
+            </p>
+            <p className="text-[11px] text-gray-500 mt-1">
+              Se guarda en portal y se refleja en Drive si el cliente está
+              enlazado
+            </p>
+          </div>
+
+          {folders.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              <button
+                type="button"
+                onClick={() => setFolder('')}
+                className={`text-[11px] px-2.5 py-1 rounded-md border ${
+                  !folder
+                    ? 'border-brand-500/40 text-brand-400'
+                    : 'border-gray-700 text-gray-400'
+                }`}
+              >
+                Todas
+              </button>
+              {folders.map((f) => (
+                <button
+                  key={f}
+                  type="button"
+                  onClick={() => setFolder(f)}
+                  className={`text-[11px] px-2.5 py-1 rounded-md border ${
+                    folder === f
+                      ? 'border-brand-500/40 text-brand-400'
+                      : 'border-gray-700 text-gray-400'
+                  }`}
+                >
+                  {f}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {loading ? (
+            <p className="text-sm text-gray-500">Cargando…</p>
+          ) : visible.length === 0 ? (
+            <div className="bg-[#111827] border border-gray-800 rounded-xl p-12 text-center text-gray-400">
+              <FileText className="w-10 h-10 text-gray-600 mx-auto mb-3" />
+              <p className="text-base font-medium text-gray-300">
+                Sin archivos en esta vista
+              </p>
+            </div>
+          ) : (
+            <ul className="space-y-2">
+              {visible.map((a) => (
+                <li
+                  key={a.id}
+                  className="flex items-center gap-3 rounded-xl border border-gray-800 bg-[#111827] px-4 py-3"
+                >
+                  <span className="text-[10px] font-bold tracking-wider text-gray-500 w-10">
+                    {iconHint(a.mime_type)}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm text-white font-medium truncate">
+                      {a.file_name}
+                    </p>
+                    <p className="text-[11px] text-gray-500">
+                      {a.folder ? `${a.folder}/` : ''}
+                      {formatBytes(a.bytes)}
+                      {a.created_at
+                        ? ` · ${new Date(a.created_at).toLocaleString('es-ES')}`
+                        : ''}
+                    </p>
+                  </div>
+                  <span className="hidden sm:inline-flex items-center gap-1 text-[10px] text-emerald-400">
+                    <CheckCircle2 className="w-3 h-3" /> Validado
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => download(a.id)}
+                    className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800"
+                    title="Descargar"
+                  >
+                    <Download className="w-4 h-4" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => remove(a.id)}
+                    className="p-2 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-500/10"
+                    title="Eliminar"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </>
       )}
 
-      {loading ? (
-        <p className="text-sm text-gray-500">Cargando…</p>
-      ) : visible.length === 0 ? (
-        <div className="bg-[#111827] border border-gray-800 rounded-xl p-12 text-center text-gray-400">
-          <FileText className="w-10 h-10 text-gray-600 mx-auto mb-3" />
-          <p className="text-base font-medium text-gray-300">
-            Sin archivos en esta vista
-          </p>
-        </div>
-      ) : (
-        <ul className="space-y-2">
-          {visible.map((a) => (
-            <li
-              key={a.id}
-              className="flex items-center gap-3 rounded-xl border border-gray-800 bg-[#111827] px-4 py-3"
-            >
-              <span className="text-[10px] font-bold tracking-wider text-gray-500 w-10">
-                {iconHint(a.mime_type)}
-              </span>
-              <div className="flex-1 min-w-0">
-                <p className="text-sm text-white font-medium truncate">
-                  {a.file_name}
-                </p>
-                <p className="text-[11px] text-gray-500">
-                  {a.folder ? `${a.folder}/` : ''}
-                  {formatBytes(a.bytes)}
-                  {a.created_at
-                    ? ` · ${new Date(a.created_at).toLocaleString('es-ES')}`
-                    : ''}
-                </p>
-              </div>
-              <span className="hidden sm:inline-flex items-center gap-1 text-[10px] text-emerald-400">
-                <CheckCircle2 className="w-3 h-3" /> Validado
-              </span>
-              <button
-                type="button"
-                onClick={() => download(a.id)}
-                className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800"
-                title="Descargar"
-              >
-                <Download className="w-4 h-4" />
-              </button>
-              <button
-                type="button"
-                onClick={() => remove(a.id)}
-                className="p-2 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-500/10"
-                title="Eliminar"
-              >
-                <Trash2 className="w-4 h-4" />
-              </button>
-            </li>
-          ))}
-        </ul>
+      {tab === 'drive' && (
+        <>
+          {loading ? (
+            <p className="text-sm text-gray-500">Cargando Drive…</p>
+          ) : driveFiles.length === 0 ? (
+            <div className="bg-[#111827] border border-gray-800 rounded-xl p-12 text-center text-gray-400">
+              <HardDrive className="w-10 h-10 text-gray-600 mx-auto mb-3" />
+              <p className="text-base font-medium text-gray-300">
+                Sin archivos en Drive
+              </p>
+              <p className="text-xs text-gray-500 mt-2">
+                Conecta marketing@ en Agencia y ejecuta auto-match por nombre.
+              </p>
+            </div>
+          ) : (
+            <ul className="space-y-2">
+              {driveFiles.map((f) => (
+                <li
+                  key={f.id}
+                  className="flex items-center gap-3 rounded-xl border border-gray-800 bg-[#111827] px-4 py-3"
+                >
+                  <span className="text-[10px] font-bold tracking-wider text-gray-500 w-10">
+                    {iconHint(f.mimeType)}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm text-white font-medium truncate">
+                      {f.name}
+                    </p>
+                    <p className="text-[11px] text-gray-500">
+                      {formatBytes(f.bytes)}
+                      {f.modifiedTime
+                        ? ` · ${new Date(f.modifiedTime).toLocaleString('es-ES')}`
+                        : ''}
+                    </p>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => void openDrive(f)}
+                    className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800"
+                    title="Abrir en Drive"
+                  >
+                    <ExternalLink className="w-4 h-4" />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </>
       )}
     </div>
   );