sasa-membership/frontend/src/components/BounceManagement.tsx

import React, { useState, useEffect } from 'react';
import axios from 'axios';

interface BounceRecord {
  id: number;
  email: string;
  bounce_type: 'hard' | 'soft' | 'complaint' | 'unsubscribe';
  bounce_reason: string | null;
  bounce_date: string;
  is_active: boolean;
  smtp2go_message_id: string | null;
}

interface BounceStats {
  total_bounces: number;
  active_bounces: number;
  bounce_types: {
    hard: number;
    soft: number;
    complaint: number;
    unsubscribe: number;
  };
}

const BounceManagement: React.FC = () => {
  const [bounces, setBounces] = useState<BounceRecord[]>([]);
  const [stats, setStats] = useState<BounceStats | null>(null);
  const [loading, setLoading] = useState(true);
  const [searchEmail, setSearchEmail] = useState('');
  const [filteredBounces, setFilteredBounces] = useState<BounceRecord[]>([]);

  useEffect(() => {
    fetchBounces();
    fetchStats();
  }, []);

  useEffect(() => {
    if (searchEmail.trim() === '') {
      setFilteredBounces(bounces);
    } else {
      setFilteredBounces(
        bounces.filter(bounce =>
          bounce.email.toLowerCase().includes(searchEmail.toLowerCase())
        )
      );
    }
  }, [bounces, searchEmail]);

  const fetchBounces = async () => {
    try {
      const token = localStorage.getItem('token');
      const response = await axios.get('/api/v1/email/bounces', {
        headers: { Authorization: `Bearer ${token}` }
      });
      setBounces(response.data.bounces);
    } catch (error) {
      console.error('Error fetching bounces:', error);
    }
  };

  const fetchStats = async () => {
    try {
      const token = localStorage.getItem('token');
      const response = await axios.get('/api/v1/email/bounces/stats', {
        headers: { Authorization: `Bearer ${token}` }
      });
      setStats(response.data);
    } catch (error) {
      console.error('Error fetching bounce stats:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleDeactivateBounce = async (bounceId: number) => {
    if (!window.confirm('Are you sure you want to deactivate this bounce record?')) {
      return;
    }

    try {
      const token = localStorage.getItem('token');
      await axios.delete(`/api/v1/email/bounces/${bounceId}`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      fetchBounces(); // Refresh the list
      fetchStats(); // Refresh stats
    } catch (error) {
      console.error('Error deactivating bounce:', error);
      alert('Failed to deactivate bounce record');
    }
  };

  const handleCleanupOldBounces = async () => {
    if (!window.confirm('Are you sure you want to cleanup old soft bounces? This will deactivate soft bounces older than 365 days.')) {
      return;
    }

    try {
      const token = localStorage.getItem('token');
      const response = await axios.post('/api/v1/email/bounces/cleanup', {}, {
        headers: { Authorization: `Bearer ${token}` }
      });
      alert(response.data.message);
      fetchBounces(); // Refresh the list
      fetchStats(); // Refresh stats
    } catch (error) {
      console.error('Error cleaning up bounces:', error);
      alert('Failed to cleanup old bounces');
    }
  };

  const getBounceTypeColor = (type: string) => {
    switch (type) {
      case 'hard': return '#dc3545';
      case 'soft': return '#ffc107';
      case 'complaint': return '#fd7e14';
      case 'unsubscribe': return '#6c757d';
      default: return '#6c757d';
    }
  };

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleString();
  };

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '40px' }}>
        <div>Loading bounce data...</div>
      </div>
    );
  }

  return (
    <div>
      {/* Statistics Cards */}
      {stats && (
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
          gap: '20px',
          marginBottom: '30px'
        }}>
          <div style={{
            backgroundColor: '#f8f9fa',
            padding: '20px',
            borderRadius: '8px',
            border: '1px solid #dee2e6'
          }}>
            <h3 style={{ margin: '0 0 10px 0', color: '#495057' }}>Total Bounces</h3>
            <div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#dc3545' }}>
              {stats.total_bounces}
            </div>
          </div>

          <div style={{
            backgroundColor: '#f8f9fa',
            padding: '20px',
            borderRadius: '8px',
            border: '1px solid #dee2e6'
          }}>
            <h3 style={{ margin: '0 0 10px 0', color: '#495057' }}>Active Bounces</h3>
            <div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#ffc107' }}>
              {stats.active_bounces}
            </div>
          </div>

          <div style={{
            backgroundColor: '#f8f9fa',
            padding: '20px',
            borderRadius: '8px',
            border: '1px solid #dee2e6'
          }}>
            <h3 style={{ margin: '0 0 10px 0', color: '#495057' }}>Hard Bounces</h3>
            <div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#dc3545' }}>
              {stats.bounce_types.hard}
            </div>
          </div>

          <div style={{
            backgroundColor: '#f8f9fa',
            padding: '20px',
            borderRadius: '8px',
            border: '1px solid #dee2e6'
          }}>
            <h3 style={{ margin: '0 0 10px 0', color: '#495057' }}>Soft Bounces</h3>
            <div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#ffc107' }}>
              {stats.bounce_types.soft}
            </div>
          </div>
        </div>
      )}

      {/* Controls */}
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: '20px',
        gap: '20px'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <label htmlFor="search" style={{ fontWeight: 'bold' }}>Search by Email:</label>
          <input
            id="search"
            type="text"
            value={searchEmail}
            onChange={(e) => setSearchEmail(e.target.value)}
            placeholder="Enter email address..."
            style={{
              padding: '8px 12px',
              border: '1px solid #ced4da',
              borderRadius: '4px',
              minWidth: '250px'
            }}
          />
        </div>

        <button
          onClick={handleCleanupOldBounces}
          style={{
            padding: '8px 16px',
            backgroundColor: '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Cleanup Old Bounces
        </button>
      </div>

      {/* Bounce Records Table */}
      <div style={{
        backgroundColor: 'white',
        borderRadius: '8px',
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
        overflow: 'hidden'
      }}>
        <div style={{
          padding: '20px',
          borderBottom: '1px solid #dee2e6',
          backgroundColor: '#f8f9fa'
        }}>
          <h2 style={{ margin: 0, color: '#495057' }}>Bounce Records</h2>
        </div>

        <div style={{ overflowX: 'auto' }}>
          <table style={{
            width: '100%',
            borderCollapse: 'collapse'
          }}>
            <thead>
              <tr style={{ backgroundColor: '#f8f9fa' }}>
                <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Email</th>
                <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Type</th>
                <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Reason</th>
                <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Date</th>
                <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Status</th>
                <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Actions</th>
              </tr>
            </thead>
            <tbody>
              {filteredBounces.length === 0 ? (
                <tr>
                  <td colSpan={6} style={{
                    padding: '40px',
                    textAlign: 'center',
                    color: '#6c757d',
                    fontStyle: 'italic'
                  }}>
                    {searchEmail ? 'No bounces found matching your search.' : 'No bounce records found.'}
                  </td>
                </tr>
              ) : (
                filteredBounces.map((bounce) => (
                  <tr key={bounce.id} style={{ borderBottom: '1px solid #f1f3f4' }}>
                    <td style={{ padding: '12px' }}>
                      <div style={{ fontWeight: '500' }}>{bounce.email}</div>
                      {bounce.smtp2go_message_id && (
                        <div style={{ fontSize: '0.8rem', color: '#6c757d' }}>
                          ID: {bounce.smtp2go_message_id}
                        </div>
                      )}
                    </td>
                    <td style={{ padding: '12px' }}>
                      <span style={{
                        backgroundColor: getBounceTypeColor(bounce.bounce_type),
                        color: 'white',
                        padding: '4px 8px',
                        borderRadius: '4px',
                        fontSize: '0.8rem',
                        fontWeight: 'bold',
                        textTransform: 'uppercase'
                      }}>
                        {bounce.bounce_type}
                      </span>
                    </td>
                    <td style={{ padding: '12px', maxWidth: '300px' }}>
                      <div style={{
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap'
                      }}>
                        {bounce.bounce_reason || 'No reason provided'}
                      </div>
                    </td>
                    <td style={{ padding: '12px' }}>
                      {formatDate(bounce.bounce_date)}
                    </td>
                    <td style={{ padding: '12px' }}>
                      <span style={{
                        color: bounce.is_active ? '#dc3545' : '#28a745',
                        fontWeight: 'bold'
                      }}>
                        {bounce.is_active ? 'Active' : 'Resolved'}
                      </span>
                    </td>
                    <td style={{ padding: '12px' }}>
                      {bounce.is_active && (
                        <button
                          onClick={() => handleDeactivateBounce(bounce.id)}
                          style={{
                            padding: '6px 12px',
                            backgroundColor: '#28a745',
                            color: 'white',
                            border: 'none',
                            borderRadius: '4px',
                            cursor: 'pointer',
                            fontSize: '0.8rem'
                          }}
                        >
                          Resolve
                        </button>
                      )}
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

export default BounceManagement;