import { useState } from 'react';
import { useSentPings } from '../hooks/useSentPings';
import { getBestImageUrl } from '../utils/images';
import { ProfileDetailModal } from '../components/profile/ProfileDetailModal';

// Define the enriched ping type locally to avoid import issues
interface EnrichedSentPing {
  targetProfileId: string;
  targetName?: string;
  message?: string;
  sentAt: number;
  status: 'SENT' | 'MATCHED' | 'EXPIRED';
  profile?: {
    id: string;
    imaginaryName?: string;
    age?: number;
    gender?: string;
    sexuality?: string;
    bio?: string;
    desires?: string[];
    connectionGoals?: string[];
    verificationStatus?: string;
    isMajestic?: boolean;
    distance?: { km: number; mi: number };
    photos?: Array<{
      id: string;
      pictureUrls?: { small?: string; medium?: string; large?: string };
    }>;
    interactionStatus?: {
      mine?: string;
      theirs?: string;
      message?: string;
    };
  };
  profileLoading?: boolean;
  profileError?: string;
}

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

  // Header
  header: {
    display: 'flex',
    alignItems: 'flex-start',
    justifyContent: 'space-between',
    marginBottom: '32px',
  },
  headerLeft: {
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
  },
  title: {
    fontFamily: "'Clash Display', sans-serif",
    fontSize: '36px',
    fontWeight: 700,
    color: '#ffffff',
    margin: 0,
    letterSpacing: '-0.02em',
  },
  subtitle: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '15px',
    color: 'rgba(255,255,255,0.5)',
    margin: 0,
    marginTop: '4px',
  },
  subtitleHighlight: {
    color: '#f59e0b',
  },
  clearButton: {
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    padding: '10px 16px',
    borderRadius: '10px',
    fontSize: '14px',
    fontWeight: 500,
    fontFamily: "'Satoshi', sans-serif",
    border: 'none',
    background: 'rgba(239, 68, 68, 0.1)',
    color: '#f87171',
    cursor: 'pointer',
    transition: 'all 0.2s ease',
  },

  // Ping list
  pingList: {
    display: 'flex',
    flexDirection: 'column' as const,
    gap: '12px',
  },
  pingItem: {
    display: 'flex',
    alignItems: 'flex-start',
    gap: '16px',
    padding: '16px 20px',
    borderRadius: '16px',
    background: 'rgba(255,255,255,0.03)',
    border: '1px solid rgba(255,255,255,0.06)',
    transition: 'all 0.2s ease',
    cursor: 'pointer',
  },

  // Profile photo
  photoContainer: {
    position: 'relative' as const,
    flexShrink: 0,
  },
  photo: {
    width: '64px',
    height: '64px',
    borderRadius: '12px',
    objectFit: 'cover' as const,
    background: 'rgba(255,255,255,0.05)',
  },
  photoPlaceholder: {
    width: '64px',
    height: '64px',
    borderRadius: '12px',
    background: 'linear-gradient(135deg, rgba(245,158,11,0.2) 0%, rgba(245,158,11,0.05) 100%)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  likedBackBadge: {
    position: 'absolute' as const,
    bottom: '-4px',
    right: '-4px',
    width: '24px',
    height: '24px',
    borderRadius: '50%',
    background: 'linear-gradient(135deg, #be3144 0%, #c41e3a 100%)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    boxShadow: '0 2px 8px rgba(190,49,68,0.4)',
    border: '2px solid #0a0a0a',
  },

  pingContent: {
    flex: 1,
    minWidth: 0,
  },
  pingHeader: {
    display: 'flex',
    alignItems: 'center',
    gap: '10px',
    marginBottom: '4px',
    flexWrap: 'wrap' as const,
  },
  pingName: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '16px',
    fontWeight: 600,
    color: '#ffffff',
  },
  profileDetails: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '14px',
    color: 'rgba(255,255,255,0.5)',
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
  },
  detailDot: {
    width: '3px',
    height: '3px',
    borderRadius: '50%',
    background: 'rgba(255,255,255,0.3)',
  },
  pingDate: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '13px',
    color: 'rgba(255,255,255,0.4)',
    marginTop: '2px',
  },
  pingMessage: {
    marginTop: '12px',
    padding: '12px 16px',
    borderRadius: '12px',
    background: 'rgba(0,0,0,0.3)',
    border: '1px solid rgba(255,255,255,0.04)',
  },
  pingMessageText: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '14px',
    fontStyle: 'italic',
    color: 'rgba(255,255,255,0.6)',
    margin: 0,
    lineHeight: 1.5,
  },
  deleteButton: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: '36px',
    height: '36px',
    borderRadius: '8px',
    border: 'none',
    background: 'transparent',
    color: 'rgba(255,255,255,0.3)',
    cursor: 'pointer',
    transition: 'all 0.2s ease',
    flexShrink: 0,
  },

  // Badge
  badge: (variant: 'pending' | 'matched' | 'expired' | 'liked' | 'declined') => {
    const colors = {
      pending: { bg: 'rgba(245,158,11,0.15)', color: '#fcd34d', border: 'rgba(245,158,11,0.3)' },
      matched: { bg: 'rgba(34,197,94,0.15)', color: '#86efac', border: 'rgba(34,197,94,0.3)' },
      expired: { bg: 'rgba(156,163,175,0.15)', color: '#9ca3af', border: 'rgba(156,163,175,0.3)' },
      liked: { bg: 'rgba(190,49,68,0.15)', color: '#f4a5b0', border: 'rgba(190,49,68,0.3)' },
      declined: { bg: 'rgba(239,68,68,0.12)', color: '#f87171', border: 'rgba(239,68,68,0.25)' },
    };
    return {
      display: 'inline-flex',
      alignItems: 'center',
      gap: '4px',
      padding: '4px 10px',
      borderRadius: '20px',
      fontSize: '12px',
      fontWeight: 600,
      fontFamily: "'Satoshi', sans-serif",
      background: colors[variant].bg,
      color: colors[variant].color,
      border: `1px solid ${colors[variant].border}`,
    };
  },

  // Majestic badge
  majesticBadge: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: '4px',
    padding: '2px 8px',
    borderRadius: '12px',
    fontSize: '11px',
    fontWeight: 600,
    fontFamily: "'Satoshi', sans-serif",
    background: 'linear-gradient(135deg, rgba(168,85,247,0.2) 0%, rgba(139,92,246,0.2) 100%)',
    color: '#c4b5fd',
    border: '1px solid rgba(168,85,247,0.3)',
  },

  // Empty state
  emptyState: {
    display: 'flex',
    flexDirection: 'column' as const,
    alignItems: 'center',
    justifyContent: 'center',
    padding: '80px 20px',
  },
  emptyIcon: {
    width: '80px',
    height: '80px',
    borderRadius: '50%',
    background: 'linear-gradient(135deg, rgba(245,158,11,0.15) 0%, rgba(245,158,11,0.05) 100%)',
    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',
  },

  // Modal
  modalOverlay: {
    position: 'fixed' as const,
    inset: 0,
    background: 'rgba(0,0,0,0.8)',
    backdropFilter: 'blur(8px)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 50,
    padding: '16px',
  },
  modal: {
    maxWidth: '400px',
    width: '100%',
    padding: '24px',
    borderRadius: '20px',
    background: 'rgba(30,30,35,0.95)',
    border: '1px solid rgba(255,255,255,0.1)',
    boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
  },
  modalTitle: {
    fontFamily: "'Clash Display', sans-serif",
    fontSize: '20px',
    fontWeight: 600,
    color: '#ffffff',
    marginBottom: '8px',
  },
  modalText: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '14px',
    color: 'rgba(255,255,255,0.6)',
    marginBottom: '24px',
    lineHeight: 1.5,
  },
  modalButtons: {
    display: 'flex',
    gap: '12px',
  },
  modalButton: (variant: 'cancel' | 'danger') => ({
    flex: 1,
    padding: '12px 20px',
    borderRadius: '10px',
    fontSize: '14px',
    fontWeight: 600,
    fontFamily: "'Satoshi', sans-serif",
    border: 'none',
    background: variant === 'cancel' ? 'rgba(255,255,255,0.08)' : '#dc2626',
    color: '#ffffff',
    cursor: 'pointer',
    transition: 'all 0.2s ease',
  }),

  // Loading
  loadingContainer: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: '50vh',
  },
  loadingSpinner: {
    width: '32px',
    height: '32px',
    border: '2px solid rgba(245,158,11,0.2)',
    borderTopColor: '#f59e0b',
    borderRadius: '50%',
    animation: 'spin 1s linear infinite',
  },
};

// Format gender for display
const formatGender = (gender?: any) => {
  if (!gender || typeof gender !== 'string') return '';
  const map: Record<string, string> = {
    WOMAN: 'Woman',
    MAN: 'Man',
    NON_BINARY: 'Non-binary',
    TRANS_WOMAN: 'Trans woman',
    TRANS_MAN: 'Trans man',
  };
  return map[gender] || gender;
};

export function SentPingsPage() {
  const { sentPings, loading, profilesLoading, availablePings, removePing, clearAllPings } = useSentPings();
  const [showConfirmClear, setShowConfirmClear] = useState(false);
  const [selectedProfileId, setSelectedProfileId] = useState<string | null>(null);

  const formatDate = (timestamp: number) => {
    const date = new Date(timestamp);
    const now = new Date();
    const diffMs = now.getTime() - date.getTime();
    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

    if (diffHours < 1) {
      const diffMins = Math.floor(diffMs / (1000 * 60));
      return `${diffMins} minute${diffMins !== 1 ? 's' : ''} ago`;
    } else if (diffHours < 24) {
      return `${diffHours} hour${diffHours !== 1 ? 's' : ''} ago`;
    } else if (diffDays < 7) {
      return `${diffDays} day${diffDays !== 1 ? 's' : ''} ago`;
    } else {
      return date.toLocaleDateString();
    }
  };

  const getStatusBadge = (ping: EnrichedSentPing) => {
    // Check if they liked back
    const theyLikedBack = ping.profile?.interactionStatus?.theirs === 'LIKED';
    const theyDeclined = ping.profile?.interactionStatus?.theirs === 'DISLIKED';

    if (theyLikedBack) {
      return (
        <span style={styles.badge('liked')}>
          <svg viewBox="0 0 24 24" fill="currentColor" style={{ width: '12px', height: '12px' }}>
            <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>
          Liked You Back!
        </span>
      );
    }

    if (theyDeclined) {
      return (
        <span style={styles.badge('declined')}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ width: '12px', height: '12px' }}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
          </svg>
          Declined
        </span>
      );
    }

    switch (ping.status) {
      case 'MATCHED':
        return (
          <span style={styles.badge('matched')}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ width: '12px', height: '12px' }}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Matched
          </span>
        );
      case 'EXPIRED':
        return (
          <span style={styles.badge('expired')}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ width: '12px', height: '12px' }}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Expired
          </span>
        );
      case 'SENT':
      default:
        return (
          <span style={styles.badge('pending')}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ width: '12px', height: '12px' }}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Pending
          </span>
        );
    }
  };

  const getProfilePhoto = (ping: EnrichedSentPing) => {
    const photos = ping.profile?.photos;
    if (photos && photos.length > 0) {
      const photoUrl = getBestImageUrl(photos[0].pictureUrls, 'small');
      if (photoUrl) {
        return <img src={photoUrl} alt="" style={styles.photo} />;
      }
    }
    // Placeholder
    return (
      <div style={styles.photoPlaceholder}>
        <svg viewBox="0 0 24 24" fill="none" stroke="#f59e0b" strokeWidth="1.5" style={{ width: '28px', height: '28px' }}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
        </svg>
      </div>
    );
  };

  if (loading) {
    return (
      <div style={styles.loadingContainer}>
        <div style={styles.loadingSpinner} />
      </div>
    );
  }

  return (
    <div style={styles.container}>
      {/* Header */}
      <div style={styles.header}>
        <div>
          <div style={styles.headerLeft}>
            <svg viewBox="0 0 24 24" fill="#f59e0b" style={{ width: '32px', height: '32px' }}>
              <path d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
            </svg>
            <h1 style={styles.title}>Sent Pings</h1>
          </div>
          <p style={styles.subtitle}>
            {availablePings !== null && (
              <span style={styles.subtitleHighlight}>{availablePings} ping{availablePings !== 1 ? 's' : ''} available</span>
            )}
            {profilesLoading && <span style={{ marginLeft: '12px', color: 'rgba(255,255,255,0.4)' }}>Loading profiles...</span>}
          </p>
        </div>
        {sentPings.length > 0 && (
          <button
            style={styles.clearButton}
            onClick={() => setShowConfirmClear(true)}
            onMouseOver={(e) => {
              e.currentTarget.style.background = 'rgba(239, 68, 68, 0.2)';
            }}
            onMouseOut={(e) => {
              e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)';
            }}
          >
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ width: '16px', height: '16px' }}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
            </svg>
            Clear All
          </button>
        )}
      </div>

      {/* Content */}
      {sentPings.length === 0 ? (
        <div style={styles.emptyState}>
          <div style={styles.emptyIcon}>
            <svg viewBox="0 0 24 24" fill="none" stroke="#f59e0b" strokeWidth="1" style={{ width: '40px', height: '40px' }}>
              <path d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
            </svg>
          </div>
          <h2 style={styles.emptyTitle}>No pings sent yet</h2>
          <p style={styles.emptyText}>
            Send a ping to someone you're interested in to start a conversation!
          </p>
        </div>
      ) : (
        <div style={styles.pingList}>
          {sentPings
            .sort((a, b) => b.sentAt - a.sentAt)
            .map((ping) => {
              const theyLikedBack = ping.profile?.interactionStatus?.theirs === 'LIKED';
              return (
                <div
                  key={ping.targetProfileId}
                  style={styles.pingItem}
                  onClick={() => setSelectedProfileId(ping.targetProfileId)}
                  onMouseOver={(e) => {
                    e.currentTarget.style.background = 'rgba(255,255,255,0.05)';
                    e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)';
                  }}
                  onMouseOut={(e) => {
                    e.currentTarget.style.background = 'rgba(255,255,255,0.03)';
                    e.currentTarget.style.borderColor = 'rgba(255,255,255,0.06)';
                  }}
                >
                  {/* Profile Photo */}
                  <div style={styles.photoContainer}>
                    {getProfilePhoto(ping)}
                    {theyLikedBack && (
                      <div style={styles.likedBackBadge}>
                        <svg viewBox="0 0 24 24" fill="#fff" style={{ width: '12px', height: '12px' }}>
                          <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>
                      </div>
                    )}
                  </div>

                  {/* Content */}
                  <div style={styles.pingContent}>
                    <div style={styles.pingHeader}>
                      <span style={styles.pingName}>
                        {ping.profile?.imaginaryName || ping.targetName || 'Unknown Profile'}
                      </span>
                      {ping.profile?.isMajestic && (
                        <span style={styles.majesticBadge}>
                          <svg viewBox="0 0 24 24" fill="currentColor" style={{ width: '10px', height: '10px' }}>
                            <path fillRule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clipRule="evenodd" />
                          </svg>
                          Majestic
                        </span>
                      )}
                      {getStatusBadge(ping)}
                    </div>

                    {/* Profile details */}
                    {ping.profile && (
                      <div style={styles.profileDetails}>
                        {ping.profile.age && <span>{ping.profile.age}</span>}
                        {ping.profile.age && ping.profile.gender && <span style={styles.detailDot} />}
                        {ping.profile.gender && <span>{formatGender(ping.profile.gender)}</span>}
                        {ping.profile.distance && (
                          <>
                            <span style={styles.detailDot} />
                            <span>{Math.round(ping.profile.distance.mi)} mi</span>
                          </>
                        )}
                      </div>
                    )}

                    <p style={styles.pingDate}>
                      {formatDate(ping.sentAt)}
                    </p>

                    {ping.message && (
                      <div style={styles.pingMessage}>
                        <p style={styles.pingMessageText}>"{ping.message}"</p>
                      </div>
                    )}
                  </div>

                  {/* Delete button */}
                  <button
                    style={styles.deleteButton}
                    onClick={(e) => {
                      e.stopPropagation();
                      removePing(ping.targetProfileId);
                    }}
                    onMouseOver={(e) => {
                      e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)';
                      e.currentTarget.style.color = '#f87171';
                    }}
                    onMouseOut={(e) => {
                      e.currentTarget.style.background = 'transparent';
                      e.currentTarget.style.color = 'rgba(255,255,255,0.3)';
                    }}
                  >
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ width: '18px', height: '18px' }}>
                      <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                    </svg>
                  </button>
                </div>
              );
            })}
        </div>
      )}

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

      {/* Confirm Clear Modal */}
      {showConfirmClear && (
        <div style={styles.modalOverlay}>
          <div style={styles.modal}>
            <h3 style={styles.modalTitle}>Clear All Sent Pings?</h3>
            <p style={styles.modalText}>
              This will remove all sent pings from your local history. This action cannot be undone.
            </p>
            <div style={styles.modalButtons}>
              <button
                style={styles.modalButton('cancel')}
                onClick={() => setShowConfirmClear(false)}
                onMouseOver={(e) => {
                  e.currentTarget.style.background = 'rgba(255,255,255,0.12)';
                }}
                onMouseOut={(e) => {
                  e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
                }}
              >
                Cancel
              </button>
              <button
                style={styles.modalButton('danger')}
                onClick={() => {
                  clearAllPings();
                  setShowConfirmClear(false);
                }}
                onMouseOver={(e) => {
                  e.currentTarget.style.background = '#b91c1c';
                }}
                onMouseOut={(e) => {
                  e.currentTarget.style.background = '#dc2626';
                }}
              >
                Clear All
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default SentPingsPage;
