# Face Tooltip and Click-to-Identify Analysis

## Issues Identified

### 1. **Image Reference Not Being Set Properly**

**Location:** `PhotoViewerClient.tsx` lines 546-549, 564-616

**Problem:**
- The `imageRef` is set in `handleImageLoad` callback (line 548)
- However, `findFaceAtPoint` checks if `imageRef.current` exists (line 569)
- If `imageRef.current` is null, face detection fails completely
- Next.js `Image` component with `fill` prop may not reliably trigger `onLoad` or the ref may not be accessible

**Evidence:**
```typescript
const findFaceAtPoint = useCallback((x: number, y: number) => {
  // ...
  if (!imageRef.current || !containerRef.current) {
    return null;  // ← This will prevent ALL face detection if ref isn't set
  }
  // ...
}, [currentPhoto.faces]);
```

**Impact:** If `imageRef.current` is null, `findFaceAtPoint` always returns null, so:
- No faces are detected on hover
- `hoveredFace` state never gets set
- Tooltips never appear
- Click detection never works

---

### 2. **Tooltip Logic Issues**

**Location:** `PhotoViewerClient.tsx` lines 155-159

**Problem:** The tooltip logic has restrictive conditions:

```typescript
const hoveredFaceTooltip = hoveredFace
  ? hoveredFace.personName
    ? (isLoggedIn ? hoveredFace.personName : null)  // ← Issue: hides name if not logged in
    : (!session || hasWriteAccess ? 'Identify' : null)  // ← Issue: hides "Identify" for logged-in users without write access
  : null;
```

**Issues:**
1. **Identified faces:** Tooltip only shows if user is logged in. If not logged in, tooltip is `null` even though face is identified.
2. **Unidentified faces:** Tooltip shows "Identify" only if:
   - User is NOT signed in, OR
   - User has write access
   - If user is logged in but doesn't have write access, tooltip is `null`

**Expected Behavior:**
- Identified faces should show person name regardless of login status
- Unidentified faces should show "Identify" if user has write access (or is not logged in)

---

### 3. **Click Handler Logic Issues**

**Location:** `PhotoViewerClient.tsx` lines 661-686

**Problem:** The click handler has restrictive conditions:

```typescript
const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
  // ...
  const face = findFaceAtPoint(e.clientX, e.clientY);
  
  // Only allow clicking if: face is identified, or user is not signed in, or user has write access
  if (face && (face.person || !session || hasWriteAccess)) {
    setClickedFace({...});
    setIsDialogOpen(true);
  }
}, [findFaceAtPoint, session, hasWriteAccess, currentPhoto, isVideoPlaying]);
```

**Issues:**
1. If `findFaceAtPoint` returns null (due to imageRef issue), click never works
2. If user is logged in without write access and face is unidentified, click is blocked
3. The condition `face.person || !session || hasWriteAccess` means:
   - Can click identified faces (anyone)
   - Can click unidentified faces only if not logged in OR has write access
   - Logged-in users without write access cannot click unidentified faces

**Expected Behavior:**
- Should allow clicking unidentified faces if user has write access
- Should allow clicking identified faces to view/edit (if has write access)

---

### 4. **Click Handler Event Blocking**

**Location:** `PhotoViewerClient.tsx` lines 1096-1106

**Problem:** The click handler checks for buttons and zoom controls, but also checks `isDragging`:

```typescript
onClick={(e) => {
  // Don't handle click if it's on a button or zoom controls
  const target = e.target as HTMLElement;
  if (target.closest('button') || target.closest('[aria-label*="Zoom"]') || target.closest('[aria-label*="Reset zoom"]')) {
    return;
  }
  // For images, only handle click if not dragging
  if (!isDragging || zoom === 1) {  // ← Issue: if dragging and zoomed, click is ignored
    handleClick(e);
  }
}}
```

**Issue:** If user is dragging (panning) and then clicks, the click is ignored. This might prevent face clicks if there's any drag state.

---

### 5. **Data Structure Mismatch (Potential)**

**Location:** `page.tsx` line 182 vs `PhotoViewerClient.tsx` line 33

**Problem:** 
- Database query uses `Face` (capital F) and `Person` (capital P)
- Component expects `faces` (lowercase) and `person` (lowercase)
- Serialization function should handle this, but if it doesn't, faces won't be available

**Evidence:**
- `page.tsx` line 182: `Face: faces.filter(...)` (capital F)
- `PhotoViewerClient.tsx` line 33: `faces?: FaceWithLocation[]` (lowercase)
- Component accesses `currentPhoto.faces` (lowercase)

**Impact:** If serialization doesn't transform `Face` → `faces`, then `currentPhoto.faces` will be undefined, and face detection won't work.

---

## Root Cause Analysis

### Primary Issue: Image Reference
The most likely root cause is that `imageRef.current` is not being set properly, which causes:
1. `findFaceAtPoint` to always return null
2. No face detection on hover
3. No tooltips
4. No click detection

### Secondary Issues: Logic Conditions
Even if imageRef works, the tooltip and click logic have restrictive conditions that prevent:
- Showing tooltips for identified faces when not logged in
- Showing "Identify" tooltip for logged-in users without write access
- Clicking unidentified faces for logged-in users without write access

---

## Recommended Fixes

### Fix 1: Ensure Image Reference is Set
- Add a ref directly to the Image component's container or use a different approach
- Add fallback to find image element via DOM query if ref isn't set
- Add debug logging to verify ref is being set

### Fix 2: Fix Tooltip Logic
- Show person name for identified faces regardless of login status
- Show "Identify" for unidentified faces only if user has write access (or is not logged in)

### Fix 3: Fix Click Handler Logic
- Allow clicking unidentified faces if user has write access
- Allow clicking identified faces to view/edit (if has write access)
- Remove the `isDragging` check or make it more lenient

### Fix 4: Verify Data Structure
- Ensure serialization transforms `Face` → `faces` and `Person` → `person`
- Add debug logging to verify faces are present in `currentPhoto.faces`

### Fix 5: Add Debug Logging
- Log when `imageRef.current` is set
- Log when `findFaceAtPoint` is called and what it returns
- Log when `hoveredFace` state changes
- Log when click handler is triggered and what conditions are met

---

## Testing Checklist

After fixes, verify:
- [ ] Image ref is set after image loads
- [ ] Hovering over identified face shows person name (logged in and not logged in)
- [ ] Hovering over unidentified face shows "Identify" if user has write access
- [ ] Clicking identified face opens dialog (if has write access)
- [ ] Clicking unidentified face opens dialog (if has write access)
- [ ] Tooltips appear at correct position near cursor
- [ ] Click works even after panning/zooming

