From e5ce1541754c175f869fdb03e7ca3797f83daa7f Mon Sep 17 00:00:00 2001
From: Ben Miller <ben.p.miller@gmail.com>
Date: Mon, 29 Dec 2025 01:03:00 -0700
Subject: [PATCH] feat: Implement Media Matching Workflow

- Added matching wizard to MediaManager.html for linking Drive files to orphaned Shopify media on load.
- Updated MediaService.ts to extract filenames from Shopify URLs for better matching.
- Added linkDriveFileToShopifyMedia method to MediaService and exposed it via mediaHandlers and global.ts.
- Improved UX in MediaManager with image transition clearing and button state feedback.
---
 src/MediaManager.html        | 202 ++++++++++++++++++++++++++++++++++-
 src/global.ts                |   3 +-
 src/mediaHandlers.ts         |  11 ++
 src/services/MediaService.ts |  25 ++++-
 4 files changed, 233 insertions(+), 8 deletions(-)

diff --git a/src/MediaManager.html b/src/MediaManager.html
index c3d9e55..770b794 100644
--- a/src/MediaManager.html
+++ b/src/MediaManager.html
@@ -484,6 +484,52 @@
     </div>
   </div>
 
+  <!-- Matching Modal -->
+  <div id="matching-modal" class="modal-overlay" style="z-index: 150;">
+    <div class="card"
+      style="width: 600px; max-width: 90%; text-align: center; padding: 24px; position: relative; background: #fff;">
+      <h3 style="margin-top:0;">Link Media?</h3>
+      <p style="color:var(--text-secondary); margin-bottom: 24px;">
+        We found a matching file in Shopify. Should these be linked?
+      </p>
+  
+      <div style="display: flex; justify-content: center; gap: 24px; margin-bottom: 24px;">
+        <!-- Drive Side -->
+        <div style="flex: 1;">
+          <div style="font-size: 12px; font-weight: 600; margin-bottom: 8px;">Drive File</div>
+          <img id="match-drive-img"
+            style="width: 100%; height: 200px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc;">
+          <div id="match-drive-name"
+            style="font-size: 11px; margin-top: 4px; color: var(--text-secondary); word-break: break-all;">filename.jpg
+          </div>
+        </div>
+  
+        <!-- Icon -->
+        <div style="display: flex; align-items: center; font-size: 24px; color: var(--text-secondary);">🔗</div>
+  
+        <!-- Shopify Side -->
+        <div style="flex: 1;">
+          <div style="font-size: 12px; font-weight: 600; margin-bottom: 8px;">Shopify Media</div>
+          <img id="match-shopify-img"
+            style="width: 100%; height: 200px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc;">
+          <div id="match-shopify-name"
+            style="font-size: 11px; margin-top: 4px; color: var(--text-secondary); word-break: break-all;">filename.jpg
+          </div>
+        </div>
+      </div>
+  
+      <div style="display: flex; gap: 12px; justify-content: center;">
+        <button id="btn-match-skip" onclick="controller.skipLink()" class="btn btn-secondary" style="width: 100px;">No,
+          Skip</button>
+        <button id="btn-match-confirm" onclick="controller.confirmLink()" class="btn" style="width: 100px;">Yes,
+          Link</button>
+      </div>
+      <div style="margin-top: 12px; font-size: 12px; color: var(--text-secondary);">
+        Match <span id="match-index">1</span> of <span id="match-total">1</span>
+      </div>
+    </div>
+  </div>
+
   <div id="drop-overlay"
     style="position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(37, 99, 235, 0.9); z-index: 200; display: none; flex-direction: column; align-items: center; justify-content: center; color: white;">
       <div style="font-size: 48px; margin-bottom: 16px;">☁️</div>
@@ -986,11 +1032,13 @@
                     }));
 
                     state.setItems(normalized);
-                    document.getElementById('loading-ui').style.display = 'none';
-                    document.getElementById('main-ui').style.display = 'block';
 
-                    ui.logStatus('done', 'Finished loading.', 'success');
-                    setTimeout(() => ui.toggleLog(false), 1000); // Auto hide after 1s
+                    if (!controller.hasRunMatching) {
+                      controller.hasRunMatching = true;
+                      controller.checkMatches(normalized);
+                    } else {
+                      controller.showGallery();
+                    }
 
                   })
                   .withFailureHandler(function (err) {
@@ -1114,7 +1162,151 @@
                 })
                   .importFromPicker(state.sku, null, item.mimeType, item.filename, url);
               });
-                      }
+                        },
+
+                        // --- Compatibility / Matching Logic ---
+                        matches: [],
+                        currentMatchIndex: 0,
+                        hasRunMatching: false,
+
+                        checkMatches(items) {
+                          // Filter candidates
+                          var driveOnly = items.filter(function (i) { return i.status === 'drive_only'; });
+                          var shopifyOnly = items.filter(function (i) { return i.source === 'shopify_only'; }); // source check is safer for shopify items
+
+                          var newMatches = [];
+
+                          driveOnly.forEach(function (d) {
+                            // Find match by filename
+                            // Note: Backend might return "Orphaned Media" if extraction failed, ignore those.
+                            if (!d.filename || d.filename === 'Orphaned Media') return;
+
+                            var match = shopifyOnly.find(function (s) {
+                              return s.filename === d.filename; // Exact match
+                            });
+
+                            if (match) {
+                              newMatches.push({ drive: d, shopify: match });
+                            }
+                          });
+
+                          if (newMatches.length > 0) {
+                            this.matches = newMatches;
+                            this.currentMatchIndex = 0;
+                            ui.logStatus('info', 'Found ' + newMatches.length + ' potential matches. Starting matching wizard...', 'info');
+                            this.startMatching();
+                          } else {
+                            // No matches, show UI
+                            this.showGallery();
+                          }
+                        },
+
+                        startMatching() {
+                          document.getElementById('loading-ui').style.display = 'none';
+                          document.getElementById('main-ui').style.display = 'none';
+                          document.getElementById('matching-modal').style.display = 'flex';
+                          this.renderMatch();
+                        },
+
+                        renderMatch() {
+                          var match = this.matches[this.currentMatchIndex];
+
+                          // Reset Buttons
+                          var btnConfirm = document.getElementById('btn-match-confirm');
+                          var btnSkip = document.getElementById('btn-match-skip');
+                          if (btnConfirm) {
+                            btnConfirm.disabled = false;
+                            btnConfirm.innerText = "Yes, Link";
+                          }
+                          if (btnSkip) {
+                            btnSkip.disabled = false;
+                            btnSkip.innerText = "No, Skip";
+                          }
+
+                          var dImg = document.getElementById('match-drive-img');
+                          var sImg = document.getElementById('match-shopify-img');
+
+                          // Reset visual state safely
+                          dImg.style.transition = 'none';
+                          dImg.style.opacity = '0';
+                          sImg.style.transition = 'none';
+                          sImg.style.opacity = '0';
+
+                          // Clear source to blank pixel to ensure old image is gone
+                          var blank = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
+                          dImg.src = blank;
+                          sImg.src = blank;
+
+                          document.getElementById('match-drive-name').innerText = match.drive.filename;
+                          document.getElementById('match-shopify-name').innerText = match.shopify.filename;
+
+                          document.getElementById('match-index').innerText = this.currentMatchIndex + 1;
+                          document.getElementById('match-total').innerText = this.matches.length;
+
+                          // Load new images
+                          setTimeout(function () {
+                            dImg.style.transition = 'opacity 0.3s ease';
+                            sImg.style.transition = 'opacity 0.3s ease';
+
+                            dImg.onload = function () { dImg.style.opacity = '1'; };
+                            sImg.onload = function () { sImg.style.opacity = '1'; };
+
+                            dImg.src = match.drive.thumbnail;
+                            sImg.src = match.shopify.thumbnail;
+                          }, 50);
+                        },
+
+                        confirmLink() {
+                          var match = this.matches[this.currentMatchIndex];
+                          var _this = this;
+
+                          document.getElementById('btn-match-confirm').disabled = true;
+                          document.getElementById('btn-match-confirm').innerText = "Linking...";
+                          document.getElementById('btn-match-skip').disabled = true;
+
+                          // ui.logStatus('link', 'Linking ' + match.drive.filename + '...', 'info');
+
+                          google.script.run
+                            .withSuccessHandler(function () {
+                              // ui.logStatus('link', 'Linked ' + match.drive.filename, 'success');
+                              _this.nextMatch();
+                            })
+                            .withFailureHandler(function (e) {
+                              alert("Failed to link: " + e.message);
+                              document.getElementById('btn-match-confirm').disabled = false;
+                              document.getElementById('btn-match-confirm').innerText = "Yes, Link";
+                              document.getElementById('btn-match-skip').disabled = false;
+                            })
+                            .linkDriveFileToShopifyMedia(state.sku, match.drive.id, match.shopify.id);
+                        },
+
+                        skipLink() {
+                          document.getElementById('btn-match-skip').innerText = "Skipping...";
+                          document.getElementById('btn-match-skip').disabled = true;
+                          document.getElementById('btn-match-confirm').disabled = true;
+                          setTimeout(() => this.nextMatch(), 200);
+                        },
+
+                        nextMatch() {
+                          this.currentMatchIndex++;
+                          if (this.currentMatchIndex < this.matches.length) {
+                            this.renderMatch();
+                          } else {
+                            // Done
+                            document.getElementById('matching-modal').style.display = 'none';
+                            ui.logStatus('info', 'Matching complete. Reloading...', 'info');
+                            document.getElementById('loading-ui').style.display = 'block';
+                            // Reload to get fresh state. Since hasRunMatching is true, it shouldn't trigger again.
+                            this.loadMedia(true);
+                          }
+                        },
+
+                        showGallery() {
+                          document.getElementById('loading-ui').style.display = 'none';
+                          document.getElementById('main-ui').style.display = 'block';
+                          ui.logStatus('done', 'Finished loading.', 'success');
+                          setTimeout(function () { ui.toggleLog(false); }, 1000);
+                        }
                     };
 
                       // --- Google Picker API ---
diff --git a/src/global.ts b/src/global.ts
index 49c5b40..b8fe463 100644
--- a/src/global.ts
+++ b/src/global.ts
@@ -23,7 +23,7 @@ import { fillProductFromTemplate } from "./fillProductFromTemplate"
 import { showSidebar, getQueueStatus, setQueueEnabled, deleteEdit, pushEdit } from "./sidebar"
 import { checkRecentSales, reconcileSalesHandler } from "./salesSync"
 import { installSalesSyncTrigger } from "./triggers"
-import { showMediaManager, getSelectedProductInfo, getMediaForSku, saveFileToDrive, saveMediaChanges, getMediaDiagnostics, getPickerConfig, importFromPicker, debugScopes, createPhotoSession, checkPhotoSession, debugFolderAccess } from "./mediaHandlers"
+import { showMediaManager, getSelectedProductInfo, getMediaForSku, saveFileToDrive, saveMediaChanges, getMediaDiagnostics, getPickerConfig, importFromPicker, debugScopes, createPhotoSession, checkPhotoSession, debugFolderAccess, linkDriveFileToShopifyMedia } from "./mediaHandlers"
 import { runSystemDiagnostics } from "./verificationSuite"
 
 // prettier-ignore
@@ -64,3 +64,4 @@ import { runSystemDiagnostics } from "./verificationSuite"
 ;(global as any).createPhotoSession = createPhotoSession
 ;(global as any).checkPhotoSession = checkPhotoSession
 ;(global as any).debugFolderAccess = debugFolderAccess
+;(global as any).linkDriveFileToShopifyMedia = linkDriveFileToShopifyMedia
diff --git a/src/mediaHandlers.ts b/src/mediaHandlers.ts
index 62c02cc..1fbebb6 100644
--- a/src/mediaHandlers.ts
+++ b/src/mediaHandlers.ts
@@ -116,6 +116,17 @@ export function getMediaDiagnostics(sku: string) {
   }
 }
 
+export function linkDriveFileToShopifyMedia(sku: string, driveId: string, shopifyId: string) {
+  const config = new Config()
+  const driveService = new GASDriveService()
+  const shop = new Shop()
+  const shopifyMediaService = new ShopifyMediaService(shop)
+  const networkService = new GASNetworkService()
+  const mediaService = new MediaService(driveService, shopifyMediaService, networkService, config)
+
+  return mediaService.linkDriveFileToShopifyMedia(sku, driveId, shopifyId)
+}
+
 export function saveFileToDrive(sku: string, filename: string, mimeType: string, base64Data: string) {
   const config = new Config()
   const driveService = new GASDriveService()
diff --git a/src/services/MediaService.ts b/src/services/MediaService.ts
index 50a77ab..5f19c16 100644
--- a/src/services/MediaService.ts
+++ b/src/services/MediaService.ts
@@ -153,12 +153,26 @@ export class MediaService {
                 contentUrl = m.image.url
             }
 
+            // Extract filename from URL (Shopify URLs usually contain the filename)
+            let filename = "Orphaned Media";
+            try {
+                if (contentUrl) {
+                     // Clean query params and get last segment
+                     const cleanUrl = contentUrl.split('?')[0];
+                     const parts = cleanUrl.split('/');
+                     const candidate = parts.pop();
+                     if (candidate) filename = candidate;
+                }
+            } catch (e) {
+                console.warn("Failed to extract filename from URL", e);
+            }
+
+
             unifiedState.push({
                 id: m.id, // Use Shopify ID keys for orphans
                 driveId: null,
                 shopifyId: m.id,
-                filename: "Orphaned Media", // Shopify doesn't always expose filename cleanly in same way
-                // Try to get filename if possible or fallback
+                filename: filename,
                 source: 'shopify_only',
                 thumbnail: m.preview?.image?.originalSrc || "",
                 status: 'active',
@@ -172,6 +186,13 @@ export class MediaService {
     return unifiedState
   }
 
+  linkDriveFileToShopifyMedia(sku: string, driveId: string, shopifyId: string) {
+       console.log(`MediaService: Linking Drive File ${driveId} to Shopify Media ${shopifyId}`);
+       // Verify ownership? Maybe later. For now, trust the ID.
+       this.driveService.updateFileProperties(driveId, { shopify_media_id: shopifyId });
+       return { success: true };
+  }
+
   processMediaChanges(sku: string, finalState: any[], shopifyProductId: string): string[] {
     const logs: string[] = []
     logs.push(`Starting processing for SKU ${sku}`)