blackcanyontickets/src/components/manage/AttendeesTab.tsx

import { useState, useEffect } from 'react';
import { loadSalesData, type SalesData } from '../../lib/sales-analytics';
import { checkInTicket, refundTicket } from '../../lib/ticket-management';
import { formatCurrency } from '../../lib/event-management';
import AttendeesTable from '../tables/AttendeesTable';

interface AttendeeData {
  email: string;
  name: string;
  ticketCount: number;
  totalSpent: number;
  checkedInCount: number;
  tickets: SalesData[];
}

interface AttendeesTabProps {
  eventId: string;
}

export default function AttendeesTab({ eventId }: AttendeesTabProps) {
  const [orders, setOrders] = useState<SalesData[]>([]);
  const [attendees, setAttendees] = useState<AttendeeData[]>([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedAttendee, setSelectedAttendee] = useState<AttendeeData | null>(null);
  const [showAttendeeDetails, setShowAttendeeDetails] = useState(false);
  const [checkInFilter, setCheckInFilter] = useState<'all' | 'checked_in' | 'not_checked_in'>('all');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadData();
  }, [eventId]);

  useEffect(() => {
    processAttendees();
  }, [orders, searchTerm, checkInFilter]);

  const loadData = async () => {
    setLoading(true);
    try {
      const ordersData = await loadSalesData(eventId);
      setOrders(ordersData);
    } catch (_error) {
      // Handle error silently
    } finally {
      setLoading(false);
    }
  };

  const processAttendees = () => {
    const attendeeMap = new Map<string, AttendeeData>();

    orders.forEach(order => {
      const existing = attendeeMap.get(order.purchaser_email) || {
        email: order.purchaser_email,
        name: order.purchaser_name,
        ticketCount: 0,
        totalSpent: 0,
        checkedInCount: 0,
        tickets: []
      };

      existing.tickets.push(order);
      if (!order.refund_status || order.refund_status === null) {
        existing.ticketCount += 1;
        existing.totalSpent += order.price;
        if (order.checked_in) {
          existing.checkedInCount += 1;
        }
      }

      attendeeMap.set(order.purchaser_email, existing);
    });

    let processedAttendees = Array.from(attendeeMap.values());

    // Only show attendees with active tickets (ticketCount > 0)
    processedAttendees = processedAttendees.filter(attendee => attendee.ticketCount > 0);

    // Apply search filter
    if (searchTerm) {
      const term = searchTerm.toLowerCase();
      processedAttendees = processedAttendees.filter(attendee => 
        attendee.name.toLowerCase().includes(term) ||
        attendee.email.toLowerCase().includes(term)
      );
    }

    // Apply check-in filter
    if (checkInFilter === 'checked_in') {
      processedAttendees = processedAttendees.filter(attendee => 
        attendee.checkedInCount === attendee.ticketCount && attendee.ticketCount > 0
      );
    } else if (checkInFilter === 'not_checked_in') {
      processedAttendees = processedAttendees.filter(attendee => 
        attendee.checkedInCount === 0 && attendee.ticketCount > 0
      );
    }

    setAttendees(processedAttendees);
  };

  const handleViewAttendee = (attendee: AttendeeData) => {
    setSelectedAttendee(attendee);
    setShowAttendeeDetails(true);
  };

  const handleCheckInAttendee = async (attendee: AttendeeData) => {
    const unCheckedTickets = attendee.tickets.filter(ticket => 
      !ticket.checked_in && (!ticket.refund_status || ticket.refund_status === null)
    );

    if (unCheckedTickets.length === 0) return;

    const ticket = unCheckedTickets[0];
    const success = await checkInTicket(ticket.id);
    
    if (success) {
      setOrders(prev => prev.map(order => 
        order.id === ticket.id ? { ...order, checked_in: true } : order
      ));
    }
  };

  const handleRefundAttendee = async (attendee: AttendeeData) => {
    const confirmedTickets = attendee.tickets.filter(ticket => 
      (!ticket.refund_status || ticket.refund_status === null)
    );

    if (confirmedTickets.length === 0) return;

    const confirmMessage = `Are you sure you want to refund all ${confirmedTickets.length} ticket(s) for ${attendee.name}?`;
    
    if (confirm(confirmMessage)) {
      for (const ticket of confirmedTickets) {
        await refundTicket(ticket.id);
      }
      
      setOrders(prev => prev.map(order => 
        confirmedTickets.some(t => t.id === order.id) 
          ? { ...order, refund_status: 'completed' } 
          : order
      ));
    }
  };

  const handleBulkCheckIn = async () => {
    const unCheckedTickets = orders.filter(order => 
      !order.checked_in && (!order.refund_status || order.refund_status === null)
    );

    if (unCheckedTickets.length === 0) {
      alert('No tickets available for check-in');
      return;
    }

    const confirmMessage = `Are you sure you want to check in all ${unCheckedTickets.length} remaining tickets?`;
    
    if (confirm(confirmMessage)) {
      for (const ticket of unCheckedTickets) {
        await checkInTicket(ticket.id);
      }
      
      setOrders(prev => prev.map(order => 
        unCheckedTickets.some(t => t.id === order.id) 
          ? { ...order, checked_in: true } 
          : order
      ));
    }
  };

  const getAttendeeStats = () => {
    const totalAttendees = attendees.length;
    const totalTickets = attendees.reduce((sum, a) => sum + a.ticketCount, 0);
    const checkedInAttendees = attendees.filter(a => a.checkedInCount > 0).length;
    const fullyCheckedInAttendees = attendees.filter(a => 
      a.checkedInCount === a.ticketCount && a.ticketCount > 0
    ).length;

    return {
      totalAttendees,
      totalTickets,
      checkedInAttendees,
      fullyCheckedInAttendees
    };
  };

  const stats = getAttendeeStats();

  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-light text-white">Attendees & Check-in</h2>
        <div className="flex items-center gap-3">
          <button
            onClick={handleBulkCheckIn}
            className="flex items-center gap-2 px-4 py-2 rounded-lg transition-all duration-200 hover:shadow-lg hover:scale-105"
            style={{
              background: 'var(--success-color)',
              color: 'white'
            }}
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
            Bulk Check-in
          </button>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-xl p-4">
          <div className="text-sm text-white/60">Total Attendees</div>
          <div className="text-2xl font-bold text-white">{stats.totalAttendees}</div>
        </div>
        <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-xl p-4">
          <div className="text-sm text-white/60">Total Tickets</div>
          <div className="text-2xl font-bold text-blue-400">{stats.totalTickets}</div>
        </div>
        <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-xl p-4">
          <div className="text-sm text-white/60">Partially Checked In</div>
          <div className="text-2xl font-bold text-yellow-400">{stats.checkedInAttendees}</div>
        </div>
        <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-xl p-4">
          <div className="text-sm text-white/60">Fully Checked In</div>
          <div className="text-2xl font-bold text-green-400">{stats.fullyCheckedInAttendees}</div>
        </div>
      </div>

      {/* Filters */}
      <div className="bg-white/5 border border-white/20 rounded-xl p-6">
        <h3 className="text-lg font-semibold text-white mb-4">Filters</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm text-white/80 mb-2">Search Attendees</label>
            <input
              type="text"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              placeholder="Search by name or email..."
              className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>
          <div>
            <label className="block text-sm text-white/80 mb-2">Check-in Status</label>
            <select
              value={checkInFilter}
              onChange={(e) => setCheckInFilter(e.target.value as typeof checkInFilter)}
              className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            >
              <option value="all">All Attendees</option>
              <option value="checked_in">Fully Checked In</option>
              <option value="not_checked_in">Not Checked In</option>
            </select>
          </div>
        </div>
      </div>

      {/* Attendees Table */}
      <div className="bg-white/5 border border-white/20 rounded-xl p-6">
        <AttendeesTable
          orders={orders}
          onViewAttendee={handleViewAttendee}
          onCheckInAttendee={handleCheckInAttendee}
          onRefundAttendee={handleRefundAttendee}
          showActions={true}
        />
      </div>

      {/* Attendee Details Modal */}
      {showAttendeeDetails && selectedAttendee && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
          <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            <div className="p-6">
              <div className="flex justify-between items-center mb-6">
                <h3 className="text-2xl font-light text-white">Attendee Details</h3>
                <button
                  onClick={() => setShowAttendeeDetails(false)}
                  className="text-white/60 hover:text-white transition-colors"
                >
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>

              <div className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <h4 className="text-lg font-semibold text-white mb-3">Contact Information</h4>
                    <div className="space-y-2">
                      <div>
                        <span className="text-white/60 text-sm">Name:</span>
                        <div className="text-white font-medium">{selectedAttendee.name}</div>
                      </div>
                      <div>
                        <span className="text-white/60 text-sm">Email:</span>
                        <div className="text-white">{selectedAttendee.email}</div>
                      </div>
                    </div>
                  </div>

                  <div>
                    <h4 className="text-lg font-semibold text-white mb-3">Summary</h4>
                    <div className="space-y-2">
                      <div>
                        <span className="text-white/60 text-sm">Total Tickets:</span>
                        <div className="text-white font-medium">{selectedAttendee.ticketCount}</div>
                      </div>
                      <div>
                        <span className="text-white/60 text-sm">Total Spent:</span>
                        <div className="text-white font-bold">{formatCurrency(selectedAttendee.totalSpent)}</div>
                      </div>
                      <div>
                        <span className="text-white/60 text-sm">Checked In:</span>
                        <div className="text-white font-medium">
                          {selectedAttendee.checkedInCount} / {selectedAttendee.ticketCount}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div>
                  <h4 className="text-lg font-semibold text-white mb-3">Tickets</h4>
                  <div className="space-y-3">
                    {selectedAttendee.tickets.map((ticket) => (
                      <div key={ticket.id} className="bg-white/5 border border-white/20 rounded-lg p-4">
                        <div className="flex justify-between items-start">
                          <div>
                            <div className="font-medium text-white">{ticket.ticket_types.name}</div>
                            <div className="text-white/60 text-sm">
                              Purchased: {new Date(ticket.created_at).toLocaleDateString()}
                            </div>
                            <div className="text-white/60 text-sm font-mono">
                              ID: {ticket.uuid}
                            </div>
                          </div>
                          <div className="text-right">
                            <div className="text-white font-bold">{formatCurrency(ticket.price)}</div>
                            <div className="flex items-center gap-2 mt-1">
                              <span className={`px-2 py-1 text-xs rounded-full ${
                                (!ticket.refund_status || ticket.refund_status === null) ? 'status-pill status-success' :
                                ticket.refund_status === 'completed' ? 'status-pill status-error' :
                                'status-pill status-warning'
                              }`}>
                                {(!ticket.refund_status || ticket.refund_status === null) ? 'confirmed' :
                                 ticket.refund_status === 'completed' ? 'refunded' :
                                 ticket.refund_status === 'pending' ? 'pending' : 'failed'}
                              </span>
                              {ticket.checked_in ? (
                                <span className="status-pill status-success">
                                  Checked In
                                </span>
                              ) : (
                                <span className="px-2 py-1 text-xs bg-white/20 text-white/60 border border-white/30 rounded-full">
                                  Not Checked In
                                </span>
                              )}
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="flex justify-between items-center">
                  <button
                    onClick={() => setShowAttendeeDetails(false)}
                    className="px-6 py-3 text-white/80 hover:text-white transition-colors"
                  >
                    Close
                  </button>
                  <div className="flex items-center gap-3">
                    {selectedAttendee.checkedInCount < selectedAttendee.ticketCount && (
                      <button
                        onClick={() => {
                          handleCheckInAttendee(selectedAttendee);
                          setShowAttendeeDetails(false);
                        }}
                        className="px-6 py-3 text-white rounded-lg transition-colors"
                        style={{
                          background: 'var(--success-color)'
                        }}
                      >
                        Check In
                      </button>
                    )}
                    {selectedAttendee.ticketCount > 0 && (
                      <button
                        onClick={() => {
                          handleRefundAttendee(selectedAttendee);
                          setShowAttendeeDetails(false);
                        }}
                        className="px-6 py-3 text-white rounded-lg transition-colors"
                        style={{
                          background: 'var(--error-color)'
                        }}
                      >
                        Refund All
                      </button>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}