import { useMutation } from '@apollo/client/react';
import { gql } from '@apollo/client';
import { WHO_LIKES_ME_QUERY, WHO_PINGS_ME_QUERY, PROFILE_QUERY } from '../api/operations/queries';
import { DEVICE_LOCATION_UPDATE_MUTATION } from '../api/operations/mutations';
import { ProfileCard } from '../components/profile/ProfileCard';
import { ProfileDetailModal } from '../components/profile/ProfileDetailModal';
import { LoadingPage, LoadingCards } from '../components/ui/Loading';
import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import { useLikedProfiles } from '../hooks/useLikedProfiles';
import { useDislikedProfiles } from '../hooks/useDislikedProfiles';
import { apolloClient } from '../api/client';
import { useLocation } from '../hooks/useLocation';

// Same query as Discover's load more - includes alreadyShownProfileIDs support
const SCAN_PROFILES_QUERY = gql`
  query ScanProfiles($input: ProfileDiscoveryInput!) {
    discovery(input: $input) {
      nodes {
        id
        age
        imaginaryName
        gender
        sexuality
        isIncognito
        isMajestic
        verificationStatus
        connectionGoals
        desires
        bio
        interests
        distance { km mi __typename }
        photos {
          id
          pictureUrls { small medium large __typename }
          pictureType
          __typename
        }
        interactionStatus { message mine theirs __typename }
        __typename
      }
      hasNextBatch
      __typename
    }
  }
`;

const styles = {
  container: {
    paddingBottom: '48px',
  },

  // Header
  header: {
    marginBottom: '32px',
  },
  title: {
    fontFamily: "'Clash Display', sans-serif",
    fontSize: '36px',
    fontWeight: 700,
    color: '#ffffff',
    margin: 0,
    marginBottom: '8px',
    letterSpacing: '-0.02em',
  },
  subtitle: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '15px',
    color: 'rgba(255,255,255,0.5)',
    margin: 0,
  },

  // Tabs
  tabContainer: {
    display: 'flex',
    gap: '12px',
    marginBottom: '32px',
  },
  tab: (isActive: boolean, variant: 'likes' | 'pings' | 'youLiked' | 'disliked') => {
    const gradients: Record<string, string> = {
      likes: 'linear-gradient(135deg, #be3144 0%, #c41e3a 100%)',
      pings: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
      youLiked: 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
      disliked: 'linear-gradient(135deg, #64748b 0%, #475569 100%)',
    };
    return {
      display: 'flex',
      alignItems: 'center',
      gap: '10px',
      padding: '14px 24px',
      borderRadius: '14px',
      fontSize: '14px',
      fontWeight: 600,
      fontFamily: "'Satoshi', sans-serif",
      border: 'none',
      background: isActive ? gradients[variant] : 'rgba(255,255,255,0.03)',
      color: isActive ? '#ffffff' : 'rgba(255,255,255,0.7)',
      cursor: 'pointer',
      transition: 'all 0.2s ease',
      boxShadow: isActive ? '0 4px 20px rgba(0,0,0,0.3)' : 'none',
    };
  },
  tabBadge: (isActive: boolean, variant: 'likes' | 'pings' | 'youLiked' | 'disliked') => {
    const colors: Record<string, { bg: string; color: string }> = {
      likes: { bg: 'rgba(190,49,68,0.25)', color: '#f4a5b0' },
      pings: { bg: 'rgba(245,158,11,0.25)', color: '#fcd34d' },
      youLiked: { bg: 'rgba(34,197,94,0.25)', color: '#86efac' },
      disliked: { bg: 'rgba(100,116,139,0.25)', color: '#94a3b8' },
    };
    return {
      padding: '4px 10px',
      borderRadius: '20px',
      fontSize: '12px',
      fontWeight: 700,
      fontFamily: "'Satoshi', sans-serif",
      background: isActive ? 'rgba(255,255,255,0.2)' : colors[variant].bg,
      color: isActive ? '#ffffff' : colors[variant].color,
    };
  },

  // Grid
  profileGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
    gap: '16px',
  },

  // Empty state
  emptyState: {
    display: 'flex',
    flexDirection: 'column' as const,
    alignItems: 'center',
    justifyContent: 'center',
    padding: '80px 20px',
  },
  emptyIcon: (variant: 'likes' | 'pings' | 'youLiked' | 'disliked') => {
    const backgrounds: Record<string, string> = {
      likes: 'linear-gradient(135deg, rgba(190,49,68,0.15) 0%, rgba(190,49,68,0.05) 100%)',
      pings: 'linear-gradient(135deg, rgba(245,158,11,0.15) 0%, rgba(245,158,11,0.05) 100%)',
      youLiked: 'linear-gradient(135deg, rgba(34,197,94,0.15) 0%, rgba(34,197,94,0.05) 100%)',
      disliked: 'linear-gradient(135deg, rgba(100,116,139,0.15) 0%, rgba(100,116,139,0.05) 100%)',
    };
    return {
      width: '80px',
      height: '80px',
      borderRadius: '50%',
      background: backgrounds[variant],
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: '24px',
    };
  },
  emptyTitle: {
    fontFamily: "'Clash Display', sans-serif",
    fontSize: '22px',
    fontWeight: 600,
    color: '#ffffff',
    marginBottom: '8px',
    textAlign: 'center' as const,
  },
  emptyText: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '15px',
    color: 'rgba(255,255,255,0.5)',
    textAlign: 'center' as const,
    maxWidth: '280px',
  },

  // Scanner controls
  scannerContainer: {
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    marginBottom: '24px',
    padding: '16px',
    borderRadius: '12px',
    background: 'rgba(255,255,255,0.03)',
    border: '1px solid rgba(255,255,255,0.06)',
  },
  locationSelect: {
    flex: 1,
    padding: '12px 16px',
    borderRadius: '8px',
    border: '1px solid rgba(255,255,255,0.1)',
    background: 'rgba(255,255,255,0.05)',
    color: '#fff',
    fontSize: '14px',
    fontFamily: "'Satoshi', sans-serif",
    cursor: 'pointer',
    outline: 'none',
  },
  scanButton: (isScanning: boolean) => ({
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    padding: '12px 20px',
    borderRadius: '8px',
    border: 'none',
    background: isScanning ? 'rgba(245,158,11,0.2)' : 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
    color: '#fff',
    fontSize: '14px',
    fontWeight: 600,
    fontFamily: "'Satoshi', sans-serif",
    cursor: isScanning ? 'not-allowed' : 'pointer',
    opacity: isScanning ? 0.7 : 1,
    transition: 'all 0.2s ease',
    whiteSpace: 'nowrap' as const,
  }),
  scanStatus: {
    fontSize: '13px',
    color: 'rgba(255,255,255,0.6)',
    marginTop: '8px',
  },
  foundBadge: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: '4px',
    padding: '4px 8px',
    borderRadius: '6px',
    background: 'rgba(34,197,94,0.2)',
    color: '#86efac',
    fontSize: '12px',
    fontWeight: 600,
    marginLeft: '8px',
  },
};

// Haversine distance in miles between two lat/lng points
function distanceMiles(lat1: number, lng1: number, lat2: number, lng2: number): number {
  const R = 3959; // Earth radius in miles
  const dLat = (lat2 - lat1) * Math.PI / 180;
  const dLng = (lng2 - lng1) * Math.PI / 180;
  const a = Math.sin(dLat / 2) ** 2 +
    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
    Math.sin(dLng / 2) ** 2;
  return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
}

// Deduplicate locations: remove exact dupes and locations whose coverage overlaps
function deduplicateLocations(locations: { name: string; latitude: number; longitude: number }[], scanRadiusMiles: number) {
  const kept: typeof locations = [];
  const skipped: string[] = [];

  for (const loc of locations) {
    // Skip if another kept location already covers this area
    const coveredBy = kept.find(k =>
      distanceMiles(k.latitude, k.longitude, loc.latitude, loc.longitude) < scanRadiusMiles * 0.5
    );
    if (coveredBy) {
      skipped.push(`${loc.name} (covered by ${coveredBy.name})`);
      continue;
    }
    kept.push(loc);
  }

  return { kept, skipped };
}

// Shared scan logic: scan a single location, returning profiles found
async function scanLocationBatches(opts: {
  location: { latitude: number; longitude: number; name: string };
  maxDistance: number;
  alreadyShownProfileIDs: string[];
  maxBatches: number;
  onBatch: (batch: number, profiles: any[], totalSoFar: number, matchesSoFar: number) => void;
  onMatch: (profile: any, locationName: string) => Promise<void>;
  signal?: AbortSignal;
}): Promise<{ profiles: any[]; matches: number }> {
  const { location, maxDistance, alreadyShownProfileIDs, maxBatches, onBatch, onMatch, signal } = opts;
  let matchCount = 0;
  const allProfiles: any[] = [];
  let hasNextBatch = true;
  let batch = 0;

  while (hasNextBatch && batch < maxBatches) {
    if (signal?.aborted) break;
    batch++;

    const result = await apolloClient.query({
      query: SCAN_PROFILES_QUERY,
      variables: {
        input: {
          filters: {
            ageRange: [18, 99],
            maxDistance,
            lookingFor: ['WOMAN', 'MAN', 'MAN_WOMAN_COUPLE', 'WOMAN_WOMAN_COUPLE', 'MAN_MAN_COUPLE', 'NON_BINARY'],
            recentlyOnline: false,
            desiringFor: [],
            alreadyShownProfileIDs,
          },
        },
      },
      fetchPolicy: 'no-cache',
    });

    const profiles = result.data?.discovery?.nodes || [];
    hasNextBatch = result.data?.discovery?.hasNextBatch ?? false;

    // Track shown IDs (shared across locations in Fuck It mode)
    profiles.forEach((p: any) => alreadyShownProfileIDs.push(p.id));
    allProfiles.push(...profiles);

    // Check for profiles that liked us
    for (const profile of profiles) {
      if (profile.interactionStatus?.theirs === 'LIKED') {
        matchCount++;
        await onMatch(profile, location.name);
      }
    }

    onBatch(batch, profiles, allProfiles.length, matchCount);

    if (hasNextBatch) {
      await new Promise(resolve => setTimeout(resolve, 300));
    }
  }

  return { profiles: allProfiles, matches: matchCount };
}

type Tab = 'likes' | 'pings' | 'youLiked' | 'disliked';

interface WhoLikedYouProfile {
  id: string;
  imaginaryName: string;
  age: number;
  gender: string;
  sexuality: string;
  bio?: string;
  desires?: string[];
  connectionGoals?: string[];
  verificationStatus?: string;
  distance?: { km: number; mi: number };
  photos?: any[];
  discoveredAt: string;
  location?: string;
}

export function LikesPage() {
  const [activeTab, setActiveTab] = useState<Tab>('likes');
  const [selectedProfileId, setSelectedProfileId] = useState<string | null>(null);
  const [youLikedProfiles, setYouLikedProfiles] = useState<any[]>([]);
  const [youLikedLoading, setYouLikedLoading] = useState(false);

  // Scanner state
  const [selectedLocationId, setSelectedLocationId] = useState<string>('');
  const [isScanning, setIsScanning] = useState(false);
  const [scanStatus, setScanStatus] = useState<string>('');
  const [whoLikedYouProfiles, setWhoLikedYouProfiles] = useState<WhoLikedYouProfile[]>([]);

  // "Fuck It" multi-location scan state
  const [isFuckItScanning, setIsFuckItScanning] = useState(false);
  const [fuckItProgress, setFuckItProgress] = useState({ current: 0, total: 0, currentLocation: '', totalProfiles: 0, totalMatches: 0 });
  const scanAbortRef = useRef<AbortController | null>(null);

  // Track which profiles are currently refreshing
  const [refreshingProfiles, setRefreshingProfiles] = useState<Set<string>>(new Set());

  // Paginated likes/pings data
  const [allLikes, setAllLikes] = useState<any[]>([]);
  const [allPings, setAllPings] = useState<any[]>([]);
  const [likesTotal, setLikesTotal] = useState(0);
  const [pingsTotal, setPingsTotal] = useState(0);
  const [likesLoading, setLikesLoading] = useState(true);
  const [pingsLoading, setPingsLoading] = useState(true);

  const { savedLocations, setLocation } = useLocation();
  const [updateLocation] = useMutation(DEVICE_LOCATION_UPDATE_MUTATION);

  const { likedProfiles, getLikedProfileIds, removeLikedProfile } = useLikedProfiles();
  const { dislikedProfiles, dislikeProfile, isDisliked, removeDislikedProfile } = useDislikedProfiles();

  // Track which profiles are currently being disliked
  const [dislikingProfiles, setDislikingProfiles] = useState<Set<string>>(new Set());

  // Discovered profiles cache (all profiles seen in Discover, without photos)
  const [discoveredProfiles, setDiscoveredProfiles] = useState<any[]>([]);

  // Fetch whoLikedYou + discovered profiles from backend on mount
  useEffect(() => {
    const fetchWhoLikedYou = async () => {
      try {
        const response = await fetch('/api/who-liked-you');
        const data = await response.json();
        setWhoLikedYouProfiles(data.profiles || []);
      } catch (e) {
        console.error('Failed to fetch whoLikedYou:', e);
      }
    };
    const fetchDiscoveredProfiles = async () => {
      try {
        const response = await fetch('/api/discovered-profiles');
        const data = await response.json();
        setDiscoveredProfiles(data.profiles || []);
        console.log('Loaded discovered profiles cache:', (data.profiles || []).length);
      } catch (e) {
        console.error('Failed to fetch discovered profiles:', e);
      }
    };
    fetchWhoLikedYou();
    fetchDiscoveredProfiles();
  }, []);

  // Fetch all pages of likes
  const fetchAllLikes = useCallback(async () => {
    setLikesLoading(true);
    const allNodes: any[] = [];
    let cursor: string | null = null;
    let hasMore = true;
    let total = 0;

    try {
      while (hasMore) {
        const result = await apolloClient.query({
          query: WHO_LIKES_ME_QUERY,
          variables: { sortBy: 'LAST_INTERACTION', cursor },
          fetchPolicy: 'network-only',
        });

        const nodes = result.data?.interactions?.nodes || [];
        const pageInfo = result.data?.interactions?.pageInfo;

        console.log('WhoLikesMe pageInfo:', JSON.stringify(pageInfo));

        allNodes.push(...nodes);
        total = pageInfo?.total || allNodes.length;
        hasMore = pageInfo?.hasNextPage || false;
        cursor = pageInfo?.nextPageCursor || null;

        console.log(`Fetched ${nodes.length} likes, total so far: ${allNodes.length}/${total}, hasMore: ${hasMore}, cursor: ${cursor}`);
      }

      setAllLikes(allNodes);
      setLikesTotal(total);
    } catch (e) {
      console.error('Failed to fetch likes:', e);
    } finally {
      setLikesLoading(false);
    }
  }, []);

  // Fetch all pages of pings
  const fetchAllPings = useCallback(async () => {
    setPingsLoading(true);
    const allNodes: any[] = [];
    let cursor: string | null = null;
    let hasMore = true;
    let total = 0;

    try {
      while (hasMore) {
        const result = await apolloClient.query({
          query: WHO_PINGS_ME_QUERY,
          variables: { sortBy: 'LAST_INTERACTION', cursor },
          fetchPolicy: 'network-only',
        });

        const nodes = result.data?.interactions?.nodes || [];
        const pageInfo = result.data?.interactions?.pageInfo;

        allNodes.push(...nodes);
        total = pageInfo?.total || allNodes.length;
        hasMore = pageInfo?.hasNextPage || false;
        cursor = pageInfo?.nextPageCursor || null;

        console.log(`Fetched ${nodes.length} pings, total so far: ${allNodes.length}, hasMore: ${hasMore}`);
      }

      setAllPings(allNodes);
      setPingsTotal(total);
    } catch (e) {
      console.error('Failed to fetch pings:', e);
    } finally {
      setPingsLoading(false);
    }
  }, []);

  // Initial fetch
  useEffect(() => {
    fetchAllLikes();
    fetchAllPings();
  }, [fetchAllLikes, fetchAllPings]);

  // Helper: batch-save discovered profiles to cache (strips photos, fire-and-forget)
  const saveDiscoveredProfiles = useCallback(async (profiles: any[]) => {
    if (!profiles.length) return;
    const safeStr = (v: any) => (typeof v === 'string' ? v : '');
    const stripped = profiles.map(p => ({
      id: p.id,
      imaginaryName: p.imaginaryName,
      age: p.age,
      gender: safeStr(p.gender),
      sexuality: safeStr(p.sexuality),
      bio: p.bio,
      desires: p.desires,
      connectionGoals: p.connectionGoals,
      verificationStatus: p.verificationStatus,
      interactionStatus: p.interactionStatus,
      discoveredAt: new Date().toISOString(),
    }));
    try {
      const response = await fetch('/api/discovered-profiles/batch', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ profiles: stripped }),
      });
      if (response.ok) {
        const result = await response.json();
        console.log(`Scanner: saved ${result.added} new, ${result.updated} updated discovered profiles (${result.total} total)`);
      }
    } catch (err) {
      console.error('Failed to save discovered profiles from scanner:', err);
    }
  }, []);

  // Helper: save a matched profile to backend + local state
  const saveMatchedProfile = useCallback(async (profile: any, locationName: string) => {
    console.log('Found profile that liked us:', profile.imaginaryName, profile.id);
    const safeStr = (v: any) => typeof v === 'string' ? v : '';
    const profileData: WhoLikedYouProfile = {
      id: profile.id,
      imaginaryName: profile.imaginaryName,
      age: profile.age,
      gender: safeStr(profile.gender),
      sexuality: safeStr(profile.sexuality),
      bio: profile.bio,
      desires: profile.desires,
      connectionGoals: profile.connectionGoals,
      verificationStatus: profile.verificationStatus,
      distance: profile.distance,
      photos: profile.photos,
      discoveredAt: new Date().toISOString(),
      location: locationName,
    };

    await fetch('/api/who-liked-you', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ profile: profileData }),
    });

    setWhoLikedYouProfiles(prev => {
      if (prev.some(p => p.id === profile.id)) return prev;
      return [profileData, ...prev];
    });
  }, []);

  // Scan a single selected location
  const scanForLikes = useCallback(async () => {
    const location = savedLocations.find(l => l.id === selectedLocationId);
    if (!location) {
      setScanStatus('Please select a location first');
      return;
    }

    setIsScanning(true);
    setScanStatus(`Setting location to ${location.name}...`);
    scanAbortRef.current = new AbortController();

    try {
      await updateLocation({
        variables: { input: { latitude: location.latitude, longitude: location.longitude } },
      });
      setLocation({ latitude: location.latitude, longitude: location.longitude, name: location.name });

      const alreadyShownProfileIDs: string[] = [];
      const { profiles, matches } = await scanLocationBatches({
        location,
        maxDistance: 400,
        alreadyShownProfileIDs,
        maxBatches: 20,
        onBatch: (batch, _profiles, totalSoFar, matchesSoFar) => {
          setScanStatus(`Scanning batch ${batch} in ${location.name}... (${totalSoFar} profiles, ${matchesSoFar} liked you)`);
        },
        onMatch: (profile) => saveMatchedProfile(profile, location.name),
        signal: scanAbortRef.current.signal,
      });

      // Save ALL scanned profiles to discovered cache for future Likes enrichment
      saveDiscoveredProfiles(profiles);

      setScanStatus(scanAbortRef.current.signal.aborted
        ? `Cancelled. Scanned ${profiles.length} profiles, found ${matches} who liked you.`
        : `Done! Scanned ${profiles.length} profiles, found ${matches} who liked you.`);
    } catch (e: any) {
      setScanStatus(`Error: ${e.message}`);
    } finally {
      setIsScanning(false);
      scanAbortRef.current = null;
    }
  }, [selectedLocationId, savedLocations, updateLocation, setLocation, saveMatchedProfile]);

  // "Fuck It" - scan ALL locations (deduplicated, cross-location dedup)
  const scanAllLocations = useCallback(async () => {
    if (savedLocations.length === 0) {
      setScanStatus('No saved locations to scan');
      return;
    }

    setIsFuckItScanning(true);
    scanAbortRef.current = new AbortController();
    const signal = scanAbortRef.current.signal;
    const scanRadius = 400; // miles
    const totalLocations = savedLocations.length;
    let grandTotalProfiles = 0;
    let grandTotalMatches = 0;

    setFuckItProgress({ current: 0, total: totalLocations, currentLocation: '', totalProfiles: 0, totalMatches: 0 });
    setScanStatus(`Scanning ${totalLocations} locations...`);

    // Single shared list across ALL locations — avoids re-fetching already-seen profiles
    const alreadyShownProfileIDs: string[] = [];

    try {
      for (let locIndex = 0; locIndex < savedLocations.length; locIndex++) {
        if (signal.aborted) break;
        const location = savedLocations[locIndex];
        setFuckItProgress(prev => ({
          ...prev,
          current: locIndex + 1,
          currentLocation: location.name,
        }));

        await updateLocation({
          variables: { input: { latitude: location.latitude, longitude: location.longitude } },
        });
        setLocation({ latitude: location.latitude, longitude: location.longitude, name: location.name });

        try {
          const { profiles, matches } = await scanLocationBatches({
            location,
            maxDistance: scanRadius,
            alreadyShownProfileIDs,
            maxBatches: 20,
            signal,
            onBatch: (_batch, _profiles, _totalSoFar, _matchesSoFar) => {
              setFuckItProgress(prev => ({
                ...prev,
                totalProfiles: grandTotalProfiles + _totalSoFar,
                totalMatches: grandTotalMatches + _matchesSoFar,
              }));
            },
            onMatch: (profile) => saveMatchedProfile(profile, location.name),
          });

          // Save ALL scanned profiles to discovered cache
          saveDiscoveredProfiles(profiles);

          grandTotalProfiles += profiles.length;
          grandTotalMatches += matches;
        } catch (e) {
          console.error(`Scan failed for ${location.name}:`, e);
        }

        // Small delay between locations
        if (locIndex < savedLocations.length - 1) {
          await new Promise(resolve => setTimeout(resolve, 500));
        }
      }

      setFuckItProgress(prev => ({
        ...prev,
        current: totalLocations,
        currentLocation: 'Done!',
        totalProfiles: grandTotalProfiles,
        totalMatches: grandTotalMatches,
      }));
      setScanStatus(signal.aborted
        ? `Cancelled. ${grandTotalProfiles} profiles scanned, found ${grandTotalMatches} who liked you.`
        : `Done! ${grandTotalProfiles} unique profiles across ${totalLocations} cities, found ${grandTotalMatches} who liked you.`
      );
    } catch (e: any) {
      setScanStatus(`Error: ${e.message}`);
    } finally {
      setIsFuckItScanning(false);
      scanAbortRef.current = null;
    }
  }, [savedLocations, updateLocation, setLocation, saveMatchedProfile]);

  // Cancel any running scan
  const cancelScan = useCallback(() => {
    scanAbortRef.current?.abort();
  }, []);

  // Update backend cache with fresh photo URLs when we get them from the API
  const updateCachedPhotos = useCallback(async (realProfile: WhoLikedYouProfile, freshPhotos: any[]) => {
    if (!freshPhotos?.length) return;
    try {
      await fetch('/api/who-liked-you', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ profile: { ...realProfile, photos: freshPhotos } }),
      });
    } catch (e) {
      // Non-critical, ignore
    }
  }, []);

  // Merge whoLikedYou data with WhoLikesMe results (memoized to prevent re-renders)
  const enrichedLikes = useMemo(() => {
    if (!allLikes.length) return [];

    console.log('Enriching likes:', allLikes.length, 'with whoLikedYouProfiles:', whoLikedYouProfiles.length, 'discoveredProfiles:', discoveredProfiles.length);

    // === Pass 1: Match against whoLikedYouProfiles (has photos) ===
    // Sort real profiles by discoveredAt (oldest first) so older cached profiles get matched first
    const sortedRealProfiles = [...whoLikedYouProfiles].sort((a, b) => {
      const dateA = a.discoveredAt ? new Date(a.discoveredAt).getTime() : 0;
      const dateB = b.discoveredAt ? new Date(b.discoveredAt).getTime() : 0;
      return dateA - dateB; // Oldest first
    });

    // Track which real profiles have been matched (by their real ID)
    const matchedRealIds = new Set<string>();

    // Map from WhoLikesMe profile index to matched real profile
    // Process from END of list (oldest likes) to START (newest likes)
    // This ensures older likes get matches before newer ones with same name
    const matchMap = new Map<number, any>();

    for (let i = allLikes.length - 1; i >= 0; i--) {
      const likeProfile = allLikes[i];
      const realProfile = sortedRealProfiles.find(
        p => p.imaginaryName?.toLowerCase() === likeProfile.imaginaryName?.toLowerCase() &&
             !matchedRealIds.has(p.id)
      );

      if (realProfile) {
        matchedRealIds.add(realProfile.id);
        matchMap.set(i, realProfile);
      }
    }

    // === Pass 2: Match unmatched likes against discoveredProfiles by name only ===
    // WhoLikesMe returns fake IDs and ages, but real names. Match by name,
    // then auto-refresh will verify via ProfileQuery (checks interactionStatus.theirs === 'LIKED')
    const matchedDiscoveredIds = new Set<string>();
    const discoveryMatchMap = new Map<number, any>();

    if (discoveredProfiles.length > 0) {
      // Sort discovered by discoveredAt oldest first
      const sortedDiscovered = [...discoveredProfiles].sort((a, b) => {
        const dateA = a.discoveredAt ? new Date(a.discoveredAt).getTime() : 0;
        const dateB = b.discoveredAt ? new Date(b.discoveredAt).getTime() : 0;
        return dateA - dateB;
      });

      for (let i = allLikes.length - 1; i >= 0; i--) {
        if (matchMap.has(i)) continue; // Already matched in Pass 1

        const likeProfile = allLikes[i];
        // Name-only match — age/gender from WhoLikesMe are unreliable
        // Collect ALL candidates with same name for verification
        const candidates = sortedDiscovered.filter(
          p => p.imaginaryName?.toLowerCase() === likeProfile.imaginaryName?.toLowerCase() &&
               !matchedDiscoveredIds.has(p.id) &&
               !matchedRealIds.has(p.id)
        );

        if (candidates.length > 0) {
          // Use first candidate; auto-refresh will verify via ProfileQuery
          const discoveredProfile = candidates[0];
          matchedDiscoveredIds.add(discoveredProfile.id);
          discoveryMatchMap.set(i, {
            ...discoveredProfile,
            _allCandidateIds: candidates.map(c => c.id), // All candidates for fallback
          });
        }
      }

      if (discoveryMatchMap.size > 0) {
        console.log(`Pass 2: Matched ${discoveryMatchMap.size} additional likes from discovered cache`);
      }
    }

    // Now map in original order, using pre-computed matches
    // Merge: use real profile ID + metadata from cache, but prefer fresh photo URLs from the API
    return allLikes.map((likeProfile, index) => {
      const realProfile = matchMap.get(index);
      if (realProfile) {
        // Check if the API response has photos with actual usable URLs
        // WhoLikesMe API may return photo objects with null pictureUrls (blurred/hidden)
        const apiHasPhotoUrls = likeProfile.photos?.some(
          (p: any) => p.pictureUrls?.medium || p.pictureUrls?.large
        );
        const freshPhotos = apiHasPhotoUrls ? likeProfile.photos : realProfile.photos;

        return {
          ...realProfile,
          photos: freshPhotos,
          _originalId: likeProfile.id,
          _matched: true,
          _apiHasPhotos: apiHasPhotoUrls,
        };
      }

      // Pass 2: discovery-matched profiles (no photos, need refresh)
      const discoveredProfile = discoveryMatchMap.get(index);
      if (discoveredProfile) {
        return {
          ...discoveredProfile,
          photos: likeProfile.photos, // Use whatever WhoLikesMe returned (likely null URLs)
          _originalId: likeProfile.id,
          _matched: true,
          _matchedFromDiscovery: true,
          _needsRefresh: true,
          _apiHasPhotos: false,
        };
      }

      return likeProfile;
    });
  }, [allLikes, whoLikedYouProfiles, discoveredProfiles]);

  // Update backend cache with fresh photo URLs (side effect, separate from render)
  const lastCacheUpdateRef = useRef<string>('');
  useEffect(() => {
    const profilesWithFreshPhotos = enrichedLikes.filter((p: any) => p._apiHasPhotos && p._matched);
    if (profilesWithFreshPhotos.length === 0) return;

    // Deduplicate: only update if the set of profiles changed
    const cacheKey = profilesWithFreshPhotos.map((p: any) => p.id).sort().join(',');
    if (cacheKey === lastCacheUpdateRef.current) return;
    lastCacheUpdateRef.current = cacheKey;

    profilesWithFreshPhotos.forEach((profile: any) => {
      updateCachedPhotos(profile, profile.photos);
    });
  }, [enrichedLikes, updateCachedPhotos]);

  // Refresh a single profile to get fresh image URLs
  // For discovery-matched profiles (verifyLiked=true), only saves to whoLikedYou if theirs === 'LIKED'
  // Returns { verified: boolean } so caller can try alternate candidates if needed
  const refreshProfile = useCallback(async (profileId: string, profileName?: string, verifyLiked?: boolean): Promise<{ verified: boolean }> => {
    console.log('Refreshing profile:', profileId, 'name:', profileName, verifyLiked ? '(verifying liked)' : '');

    // If we have a name, try to look up the real ID from whoLikedYouProfiles
    // This handles the case where allLikes has fake IDs
    let realProfileId = profileId;
    if (profileName) {
      const storedProfile = whoLikedYouProfiles.find(
        p => p.imaginaryName?.toLowerCase() === profileName.toLowerCase()
      );
      if (storedProfile) {
        realProfileId = storedProfile.id;
        console.log('Found real ID by name:', realProfileId);
      }
    }

    setRefreshingProfiles(prev => new Set(prev).add(profileId));

    try {
      const result = await apolloClient.query({
        query: PROFILE_QUERY,
        variables: { profileId: realProfileId },
        fetchPolicy: 'network-only', // Force fresh fetch
      });

      const freshProfile = result.data?.profile;
      if (!freshProfile) {
        console.error('Profile not found:', realProfileId);
        return { verified: false };
      }

      console.log('Got fresh profile:', freshProfile.imaginaryName, 'photos:', freshProfile.photos?.length,
        'theirs:', freshProfile.interactionStatus?.theirs);

      // For discovery-matched profiles, verify they actually liked us before saving
      if (verifyLiked && freshProfile.interactionStatus?.theirs !== 'LIKED') {
        console.log('Profile did NOT like us, skipping save:', freshProfile.imaginaryName, realProfileId);
        return { verified: false };
      }

      // Update whoLikedYouProfiles state - search by name since IDs can be fake/real mismatch
      setWhoLikedYouProfiles(prev => {
        const existingIndex = prev.findIndex(
          p => p.imaginaryName?.toLowerCase() === freshProfile.imaginaryName?.toLowerCase()
        );

        if (existingIndex >= 0) {
          // Update existing profile with fresh data
          console.log('Updating existing profile in state:', freshProfile.imaginaryName);
          return prev.map((p, i) => i === existingIndex ? {
            ...p,
            id: freshProfile.id, // Update to real ID
            photos: freshProfile.photos,
            bio: freshProfile.bio,
            desires: freshProfile.desires,
            connectionGoals: freshProfile.connectionGoals,
            verificationStatus: freshProfile.verificationStatus,
            distance: freshProfile.distance,
          } : p);
        } else {
          // Add as new profile
          console.log('Adding new profile to state:', freshProfile.imaginaryName);
          const sf = (v: any) => typeof v === 'string' ? v : '';
          const profileData: WhoLikedYouProfile = {
            id: freshProfile.id,
            imaginaryName: freshProfile.imaginaryName,
            age: freshProfile.age,
            gender: sf(freshProfile.gender),
            sexuality: sf(freshProfile.sexuality),
            bio: freshProfile.bio,
            desires: freshProfile.desires,
            connectionGoals: freshProfile.connectionGoals,
            verificationStatus: freshProfile.verificationStatus,
            distance: freshProfile.distance,
            photos: freshProfile.photos,
            discoveredAt: new Date().toISOString(),
          };
          return [profileData, ...prev];
        }
      });

      // Also update backend storage (sanitize fields that may be objects from GraphQL)
      const safeStr = (v: any) => typeof v === 'string' ? v : '';
      const profileData: WhoLikedYouProfile = {
        id: freshProfile.id,
        imaginaryName: freshProfile.imaginaryName,
        age: freshProfile.age,
        gender: safeStr(freshProfile.gender),
        sexuality: safeStr(freshProfile.sexuality),
        bio: freshProfile.bio,
        desires: freshProfile.desires,
        connectionGoals: freshProfile.connectionGoals,
        verificationStatus: freshProfile.verificationStatus,
        distance: freshProfile.distance,
        photos: freshProfile.photos,
        discoveredAt: new Date().toISOString(),
      };

      const response = await fetch('/api/who-liked-you', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ profile: profileData }),
      });
      const saveResult = await response.json();
      console.log('Saved to backend:', saveResult, 'photos:', profileData.photos?.[0]?.pictureUrls?.medium);

      return { verified: true };
    } catch (e) {
      console.error('Failed to refresh profile:', profileId, e);
      return { verified: false };
    } finally {
      setRefreshingProfiles(prev => {
        const next = new Set(prev);
        next.delete(profileId);
        return next;
      });
    }
  }, [whoLikedYouProfiles]);

  // Refetch all data to get fresh signed image URLs
  const refreshData = useCallback(() => {
    fetchAllLikes();
    fetchAllPings();
  }, [fetchAllLikes, fetchAllPings]);

  // Auto-refresh all matched profiles on page load to get fresh signed photo URLs
  // Cached photos expire after a few hours, so we always refresh on mount
  // Prioritize _needsRefresh (discovery-matched, no photos) before regular refreshes
  // Use ref + sessionStorage to prevent re-triggering if component remounts due to errors
  const autoRefreshStartedRef = useRef(false);
  useEffect(() => {
    if (autoRefreshStartedRef.current || likesLoading || !enrichedLikes.length) return;

    // Check sessionStorage to prevent loops across remounts
    const lastRefresh = sessionStorage.getItem('likes_auto_refresh_ts');
    if (lastRefresh && Date.now() - parseInt(lastRefresh) < 60000) return; // Skip if refreshed within last minute

    const matchedProfiles = enrichedLikes.filter((p: any) => p._matched && p.id);
    if (matchedProfiles.length === 0) return;

    autoRefreshStartedRef.current = true;
    sessionStorage.setItem('likes_auto_refresh_ts', String(Date.now()));

    // Prioritize: discovery-matched (no photos) first, then regular refreshes
    const needsRefresh = matchedProfiles.filter((p: any) => p._needsRefresh);
    const regularRefresh = matchedProfiles.filter((p: any) => !p._needsRefresh);
    const orderedProfiles = [...needsRefresh, ...regularRefresh];

    console.log(`Auto-refreshing ${orderedProfiles.length} matched profiles (${needsRefresh.length} discovery-matched, ${regularRefresh.length} regular)`);

    const refreshSequentially = async () => {
      for (const profile of orderedProfiles) {
        try {
          if (profile._matchedFromDiscovery) {
            // Discovery match: verify each candidate via ProfileQuery
            const candidateIds: string[] = profile._allCandidateIds || [profile.id];
            let verified = false;
            for (const candidateId of candidateIds) {
              console.log(`Verifying candidate ${candidateId} for "${profile.imaginaryName}"`);
              const result = await refreshProfile(candidateId, profile.imaginaryName, true);
              if (result.verified) {
                console.log(`Verified! ${candidateId} liked us as "${profile.imaginaryName}"`);
                verified = true;
                break;
              }
              await new Promise(resolve => setTimeout(resolve, 200));
            }
            if (!verified) {
              console.log(`No candidates verified for "${profile.imaginaryName}" (${candidateIds.length} tried)`);
            }
          } else {
            // Regular Pass 1 match: just refresh for fresh photos
            await refreshProfile(profile.id, profile.imaginaryName);
          }
        } catch (e) {
          console.error('Auto-refresh failed for:', profile.imaginaryName, e);
        }
        await new Promise(resolve => setTimeout(resolve, 200));
      }
    };

    refreshSequentially();
  }, [likesLoading, enrichedLikes]);

  // Handle disliking a profile from the Likes page
  const handleDislikeFromLikes = useCallback(async (profile: any) => {
    // Only allow dislike if profile was matched with real scanner data
    if (!profile._matched) {
      console.log('Cannot dislike profile without real data:', profile.imaginaryName);
      return { success: false, error: 'No real profile data' };
    }

    const profileId = profile.id;

    setDislikingProfiles(prev => new Set(prev).add(profileId));

    try {
      const safeStr = (v: any) => typeof v === 'string' ? v : '';
      const result = await dislikeProfile({
        id: profileId,
        imaginaryName: profile.imaginaryName,
        age: profile.age,
        gender: safeStr(profile.gender),
        sexuality: safeStr(profile.sexuality),
        photos: profile.photos,
      });

      if (result.success) {
        console.log('Disliked from Likes page:', profile.imaginaryName);
        // Remove from whoLikedYouProfiles
        setWhoLikedYouProfiles(prev => prev.filter(p => p.id !== profileId));
        // Refresh likes list
        fetchAllLikes();
      }

      return result;
    } finally {
      setDislikingProfiles(prev => {
        const next = new Set(prev);
        next.delete(profileId);
        return next;
      });
    }
  }, [dislikeProfile, fetchAllLikes]);

  // Fetch profiles for "You Liked" tab
  useEffect(() => {
    const fetchYouLikedProfiles = async () => {
      const ids = getLikedProfileIds();
      if (ids.length === 0) {
        setYouLikedProfiles([]);
        return;
      }

      setYouLikedLoading(true);
      try {
        const profiles = await Promise.all(
          ids.slice(0, 50).map(async (id) => { // Limit to 50
            try {
              const result = await apolloClient.query({
                query: PROFILE_QUERY,
                variables: { profileId: id },
                fetchPolicy: 'cache-first',
              });
              return result.data?.profile;
            } catch (e) {
              console.error(`Failed to fetch profile ${id}:`, e);
              return null;
            }
          })
        );
        setYouLikedProfiles(profiles.filter(Boolean));
      } catch (e) {
        console.error('Failed to fetch liked profiles:', e);
      } finally {
        setYouLikedLoading(false);
      }
    };

    if (activeTab === 'youLiked') {
      fetchYouLikedProfiles();
    }
  }, [activeTab, likedProfiles.length]);

  const loading = likesLoading || pingsLoading;

  if (loading && activeTab !== 'youLiked') return <LoadingPage message="Loading interactions..." />;

  const likes = enrichedLikes;
  const pings = allPings;
  const youLikedTotal = likedProfiles.length;

  // Count how many likes have been matched with real data
  const matchedCount = enrichedLikes.filter((p: any) => p._matched).length;

  const currentProfiles = activeTab === 'likes' ? likes : activeTab === 'pings' ? pings : activeTab === 'disliked' ? dislikedProfiles : youLikedProfiles;

  return (
    <div style={styles.container}>
      {/* Header */}
      <div style={styles.header}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <h1 style={styles.title}>Interactions</h1>
          <button
            onClick={refreshData}
            disabled={likesLoading || pingsLoading}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '6px',
              padding: '8px 14px',
              borderRadius: '8px',
              border: '1px solid rgba(255,255,255,0.1)',
              background: 'rgba(255,255,255,0.05)',
              color: 'rgba(255,255,255,0.7)',
              fontSize: '13px',
              fontWeight: 500,
              fontFamily: "'Satoshi', sans-serif",
              cursor: (likesLoading || pingsLoading) ? 'not-allowed' : 'pointer',
              opacity: (likesLoading || pingsLoading) ? 0.5 : 1,
              transition: 'all 0.2s ease',
            }}
            title="Refresh to get new image URLs (they expire after a few hours)"
          >
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              style={{
                width: '14px',
                height: '14px',
                animation: (likesLoading || pingsLoading) ? 'spin 1s linear infinite' : 'none',
              }}
            >
              <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            Refresh
          </button>
        </div>
        <p style={styles.subtitle}>People who've shown interest in you</p>
      </div>

      {/* Tabs */}
      <div style={styles.tabContainer}>
        <button
          onClick={() => setActiveTab('likes')}
          style={styles.tab(activeTab === 'likes', 'likes')}
        >
          <svg viewBox="0 0 24 24" fill="currentColor" style={{ width: '18px', height: '18px' }}>
            <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
          </svg>
          Likes
          <span style={styles.tabBadge(activeTab === 'likes', 'likes')}>
            {likesTotal}
          </span>
        </button>

        <button
          onClick={() => setActiveTab('pings')}
          style={styles.tab(activeTab === 'pings', 'pings')}
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ width: '18px', height: '18px' }}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
          </svg>
          Pings
          <span style={styles.tabBadge(activeTab === 'pings', 'pings')}>
            {pingsTotal}
          </span>
        </button>

        <button
          onClick={() => setActiveTab('youLiked')}
          style={styles.tab(activeTab === 'youLiked', 'youLiked')}
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ width: '18px', height: '18px' }}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
          </svg>
          You Liked
          <span style={styles.tabBadge(activeTab === 'youLiked', 'youLiked')}>
            {youLikedTotal}
          </span>
        </button>

        <button
          onClick={() => setActiveTab('disliked')}
          style={styles.tab(activeTab === 'disliked', 'disliked')}
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ width: '18px', height: '18px' }}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
          Passed
          <span style={styles.tabBadge(activeTab === 'disliked', 'disliked')}>
            {dislikedProfiles.length}
          </span>
        </button>
      </div>

      {/* Location Scanner */}
      {activeTab === 'likes' && (
        <div style={styles.scannerContainer}>
          <select
            value={selectedLocationId}
            onChange={(e) => setSelectedLocationId(e.target.value)}
            style={styles.locationSelect}
            disabled={isScanning}
          >
            <option value="">Select a location to scan...</option>
            {savedLocations.map(loc => (
              <option key={loc.id} value={loc.id}>
                {loc.name}
              </option>
            ))}
          </select>
          <button
            onClick={scanForLikes}
            style={styles.scanButton(isScanning)}
            disabled={isScanning || !selectedLocationId}
          >
            {isScanning ? (
              <>
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  style={{ width: '16px', height: '16px', animation: 'spin 1s linear infinite' }}
                >
                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                Scanning...
              </>
            ) : (
              <>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ width: '16px', height: '16px' }}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                Scan for Likes
              </>
            )}
          </button>
          {matchedCount > 0 && (
            <span style={styles.foundBadge}>
              <svg viewBox="0 0 24 24" fill="currentColor" style={{ width: '12px', height: '12px' }}>
                <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clipRule="evenodd" />
              </svg>
              {matchedCount} identified
            </span>
          )}
          <button
            onClick={isFuckItScanning ? cancelScan : scanAllLocations}
            disabled={isScanning || (!isFuckItScanning && savedLocations.length === 0)}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              padding: '12px 20px',
              borderRadius: '8px',
              border: 'none',
              background: isFuckItScanning
                ? 'rgba(239,68,68,0.2)'
                : 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
              color: '#fff',
              fontSize: '14px',
              fontWeight: 600,
              fontFamily: "'Satoshi', sans-serif",
              cursor: (isScanning || isFuckItScanning) ? 'not-allowed' : 'pointer',
              opacity: (isScanning || isFuckItScanning) ? 0.7 : 1,
              transition: 'all 0.2s ease',
              whiteSpace: 'nowrap' as const,
              marginLeft: 'auto',
            }}
          >
            {isFuckItScanning ? (
              <span onClick={(e) => { e.stopPropagation(); cancelScan(); }} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}>
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  style={{ width: '16px', height: '16px' }}
                >
                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
                {fuckItProgress.currentLocation} ({fuckItProgress.current}/{fuckItProgress.total}) • {fuckItProgress.totalProfiles} profiles • {fuckItProgress.totalMatches} matches — tap to cancel
              </span>
            ) : (
              <>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ width: '16px', height: '16px' }}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z" />
                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z" />
                </svg>
                Fuck It ({savedLocations.length} cities)
              </>
            )}
          </button>
        </div>
      )}

      {/* Scan Status */}
      {scanStatus && activeTab === 'likes' && (
        <div style={styles.scanStatus}>{scanStatus}</div>
      )}

      {/* Loading state for You Liked */}
      {activeTab === 'youLiked' && youLikedLoading && (
        <div style={styles.profileGrid}>
          <LoadingCards count={6} />
        </div>
      )}

      {/* Empty State */}
      {currentProfiles.length === 0 && !(activeTab === 'youLiked' && youLikedLoading) ? (
        <div style={styles.emptyState}>
          <div style={styles.emptyIcon(activeTab)}>
            {activeTab === 'likes' ? (
              <svg viewBox="0 0 24 24" fill="none" stroke="#be3144" strokeWidth="1" style={{ width: '40px', height: '40px' }}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
              </svg>
            ) : activeTab === 'pings' ? (
              <svg viewBox="0 0 24 24" fill="none" stroke="#f59e0b" strokeWidth="1" style={{ width: '40px', height: '40px' }}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
              </svg>
            ) : activeTab === 'disliked' ? (
              <svg viewBox="0 0 24 24" fill="none" stroke="#64748b" strokeWidth="1" style={{ width: '40px', height: '40px' }}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
            ) : (
              <svg viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="1" style={{ width: '40px', height: '40px' }}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
              </svg>
            )}
          </div>
          <h2 style={styles.emptyTitle}>
            {activeTab === 'youLiked' ? 'No likes sent yet' : activeTab === 'disliked' ? 'No passes yet' : `No ${activeTab} yet`}
          </h2>
          <p style={styles.emptyText}>
            {activeTab === 'likes'
              ? "When someone likes you, they'll appear here"
              : activeTab === 'pings'
              ? 'Pings from interested members will show up here'
              : activeTab === 'disliked'
              ? "Profiles you've passed on will be saved here"
              : "Profiles you've liked will be saved here"
            }
          </p>
        </div>
      ) : !(activeTab === 'youLiked' && youLikedLoading) && (
        /* Profiles Grid */
        <div style={styles.profileGrid}>
          {currentProfiles.map((profile: any, index: number) => {
            // Only show dislike for profiles that have been matched with real scanner data
            // The _matched flag is set by enrichLikesWithRealData when we have real profile info
            const canDislike = activeTab === 'likes' && profile._matched && !isDisliked(profile.id);

            return (
              <ProfileCard
                key={profile.id}
                profile={profile}
                onClick={() => setSelectedProfileId(profile.id)}
                index={index}
                onRefresh={(id) => refreshProfile(id, profile.imaginaryName)}
                isRefreshing={refreshingProfiles.has(profile.id)}
                onDislike={canDislike ? handleDislikeFromLikes : undefined}
                isDisliking={dislikingProfiles.has(profile.id)}
                showDislike={canDislike}
              />
            );
          })}
        </div>
      )}

      {/* Profile Detail Modal */}
      {selectedProfileId && (
        <ProfileDetailModal
          profileId={selectedProfileId}
          onClose={() => setSelectedProfileId(null)}
        />
      )}
    </div>
  );
}
