import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useParams, useNavigate } from 'react-router-dom';
import { pdf } from '@react-pdf/renderer';
import { api } from '@/lib/api';
import { Loading } from '@/components/Loading';
import { EventForm, EventFormData } from '@/components/EventForm';
import { VIPSchedulePDF } from '@/components/VIPSchedulePDF';
import { ScheduleEvent } from '@/types';
import { usePdfSettings } from '@/hooks/useSettings';
import {
  ArrowLeft,
  Calendar,
  Clock,
  MapPin,
  Car,
  User,
  Plane,
  Download,
  MessageCircle,
  Pencil,
  X,
  Trash2,
  AlertTriangle,
  Send,
  Loader2,
} from 'lucide-react';
import toast from 'react-hot-toast';

interface VIP {
  id: string;
  name: string;
  organization: string | null;
  department: string;
  arrivalMode: string;
  expectedArrival: string | null;
  airportPickup: boolean;
  venueTransport: boolean;
  notes: string | null;
  flights: Array<{
    id: string;
    flightNumber: string;
    departureAirport: string;
    arrivalAirport: string;
    scheduledDeparture: string | null;
    scheduledArrival: string | null;
    status: string | null;
  }>;
}

export function VIPSchedule() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const queryClient = useQueryClient();

  // State for edit modal
  const [editingEvent, setEditingEvent] = useState<ScheduleEvent | null>(null);
  const [showDeleteConfirm, setShowDeleteConfirm] = useState<ScheduleEvent | null>(null);

  // State for Signal send modal
  const [showSignalModal, setShowSignalModal] = useState(false);
  const [signalPhoneNumber, setSignalPhoneNumber] = useState('');
  const [signalMessage, setSignalMessage] = useState('');
  const [isSendingSignal, setIsSendingSignal] = useState(false);

  const { data: vip, isLoading: vipLoading } = useQuery<VIP>({
    queryKey: ['vip', id],
    queryFn: async () => {
      const { data } = await api.get(`/vips/${id}`);
      return data;
    },
  });

  const { data: events, isLoading: eventsLoading } = useQuery<ScheduleEvent[]>({
    queryKey: ['events'],
    queryFn: async () => {
      const { data } = await api.get('/events');
      return data;
    },
  });

  // Fetch PDF settings for customization
  const { data: pdfSettings } = usePdfSettings();

  // Update event mutation
  const updateEventMutation = useMutation({
    mutationFn: async (data: EventFormData & { id: string }) => {
      const { id: eventId, ...updateData } = data;
      const response = await api.patch(`/events/${eventId}`, updateData);
      return response.data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['events'] });
      setEditingEvent(null);
    },
  });

  // Cancel event mutation (set status to CANCELLED and free resources)
  const cancelEventMutation = useMutation({
    mutationFn: async (eventId: string) => {
      const response = await api.patch(`/events/${eventId}`, {
        status: 'CANCELLED',
        driverId: null,
        vehicleId: null,
      });
      return response.data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['events'] });
      queryClient.invalidateQueries({ queryKey: ['drivers'] });
      queryClient.invalidateQueries({ queryKey: ['vehicles'] });
      setEditingEvent(null);
    },
  });

  // Delete event mutation (soft delete)
  const deleteEventMutation = useMutation({
    mutationFn: async (eventId: string) => {
      const response = await api.delete(`/events/${eventId}`);
      return response.data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['events'] });
      queryClient.invalidateQueries({ queryKey: ['drivers'] });
      queryClient.invalidateQueries({ queryKey: ['vehicles'] });
      setShowDeleteConfirm(null);
      setEditingEvent(null);
    },
  });

  const handleEditEvent = (event: ScheduleEvent) => {
    setEditingEvent(event);
  };

  const handleUpdateEvent = async (data: EventFormData) => {
    if (!editingEvent) return;
    await updateEventMutation.mutateAsync({ ...data, id: editingEvent.id });
  };

  const handleCancelEvent = async () => {
    if (!editingEvent) return;
    await cancelEventMutation.mutateAsync(editingEvent.id);
  };

  const handleDeleteEvent = async () => {
    if (!showDeleteConfirm) return;
    await deleteEventMutation.mutateAsync(showDeleteConfirm.id);
  };

  if (vipLoading || eventsLoading) {
    return <Loading message="Loading VIP schedule..." />;
  }

  if (!vip) {
    return (
      <div className="text-center py-12">
        <p className="text-muted-foreground">VIP not found</p>
      </div>
    );
  }

  // Filter events for this VIP (using new multi-VIP schema)
  const vipEvents = events?.filter((event) => event.vipIds?.includes(id || '')) || [];

  // Sort events by start time
  const sortedEvents = [...vipEvents].sort(
    (a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime()
  );

  // Group events by day
  const eventsByDay = sortedEvents.reduce((acc, event) => {
    const date = new Date(event.startTime).toLocaleDateString('en-US', {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    });
    if (!acc[date]) {
      acc[date] = [];
    }
    acc[date].push(event);
    return acc;
  }, {} as Record<string, ScheduleEvent[]>);

  const getEventTypeColor = (type: string) => {
    switch (type) {
      case 'TRANSPORT':
        return 'bg-blue-100 text-blue-800';
      case 'MEETING':
        return 'bg-purple-100 text-purple-800';
      case 'EVENT':
        return 'bg-green-100 text-green-800';
      case 'MEAL':
        return 'bg-orange-100 text-orange-800';
      case 'ACCOMMODATION':
        return 'bg-gray-100 text-gray-800';
      default:
        return 'bg-gray-100 text-gray-800';
    }
  };

  const getEventTypeIcon = (type: string) => {
    switch (type) {
      case 'TRANSPORT':
        return <Car className="h-4 w-4" />;
      case 'MEETING':
      case 'EVENT':
        return <Calendar className="h-4 w-4" />;
      default:
        return <Clock className="h-4 w-4" />;
    }
  };

  const formatTime = (dateStr: string) => {
    return new Date(dateStr).toLocaleTimeString('en-US', {
      hour: 'numeric',
      minute: '2-digit',
    });
  };

  const handleExport = async () => {
    if (!vip) return;

    try {
      // Generate PDF
      const blob = await pdf(
        <VIPSchedulePDF
          vip={vip}
          events={vipEvents}
          settings={pdfSettings}
        />
      ).toBlob();

      // Create download link
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      // Create timestamp like "Feb01_1430" (Month Day _ 24hr time)
      const now = new Date();
      const timestamp = now.toLocaleDateString('en-US', { month: 'short', day: '2-digit' }).replace(' ', '') +
        '_' + now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }).replace(':', '');
      link.download = `${vip.name.replace(/\s+/g, '_')}_Schedule_${timestamp}.pdf`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    } catch (error) {
      console.error('[PDF] Generation failed:', error);
      alert('Failed to generate PDF. Please try again.');
    }
  };

  const handleSendViaSignal = async () => {
    if (!vip || !signalPhoneNumber.trim()) return;

    setIsSendingSignal(true);
    try {
      // Generate the PDF as base64
      const pdfBlob = await pdf(
        <VIPSchedulePDF
          vip={vip}
          events={vipEvents}
          settings={pdfSettings}
        />
      ).toBlob();

      // Convert blob to base64
      const reader = new FileReader();
      const base64Promise = new Promise<string>((resolve, reject) => {
        reader.onloadend = () => {
          const base64 = (reader.result as string).split(',')[1]; // Remove data:... prefix
          resolve(base64);
        };
        reader.onerror = reject;
      });
      reader.readAsDataURL(pdfBlob);
      const base64Data = await base64Promise;

      // Send via Signal
      // Create timestamp like "Feb01_1430" (Month Day _ 24hr time)
      const now = new Date();
      const timestamp = now.toLocaleDateString('en-US', { month: 'short', day: '2-digit' }).replace(' ', '') +
        '_' + now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }).replace(':', '');
      const filename = `${vip.name.replace(/\s+/g, '_')}_Schedule_${timestamp}.pdf`;
      const response = await api.post('/signal/send-attachment', {
        to: signalPhoneNumber,
        message: signalMessage || `Here is the schedule for ${vip.name}`,
        attachment: base64Data,
        filename,
        mimeType: 'application/pdf',
      });

      if (response.data.success) {
        toast.success('Schedule sent via Signal!');
        setShowSignalModal(false);
        setSignalPhoneNumber('');
        setSignalMessage('');
      } else {
        toast.error(response.data.error || 'Failed to send via Signal');
      }
    } catch (error: any) {
      console.error('[Signal] Failed to send:', error);
      toast.error(error.response?.data?.message || 'Failed to send via Signal');
    } finally {
      setIsSendingSignal(false);
    }
  };

  return (
    <div className="max-w-4xl mx-auto">
      {/* Header */}
      <div className="mb-6">
        <button
          onClick={() => navigate('/vips')}
          className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4 transition-colors"
        >
          <ArrowLeft className="h-4 w-4 mr-1" />
          Back to VIPs
        </button>

        <div className="bg-card rounded-lg shadow-medium border border-border p-6">
          <div className="flex justify-between items-start mb-4">
            <div>
              <h1 className="text-3xl font-bold text-foreground mb-2">{vip.name}</h1>
              {vip.organization && (
                <p className="text-lg text-muted-foreground">{vip.organization}</p>
              )}
              <p className="text-sm text-muted-foreground">{vip.department.replace('_', ' ')}</p>
            </div>
            <div className="flex gap-2">
              <button
                onClick={() => setShowSignalModal(true)}
                className="inline-flex items-center px-3 py-2 border border-input rounded-lg text-sm font-medium text-foreground bg-background hover:bg-accent transition-colors"
              >
                <MessageCircle className="h-4 w-4 mr-2" />
                Send via Signal
              </button>
              <button
                onClick={handleExport}
                className="inline-flex items-center px-3 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors"
              >
                <Download className="h-4 w-4 mr-2" />
                Export PDF
              </button>
            </div>
          </div>

          {/* Arrival Info */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6 pt-6 border-t border-border">
            <div>
              <p className="text-sm text-muted-foreground mb-1">Arrival Mode</p>
              <div className="flex items-center gap-2">
                {vip.arrivalMode === 'FLIGHT' ? (
                  <Plane className="h-5 w-5 text-blue-600" />
                ) : (
                  <Car className="h-5 w-5 text-muted-foreground" />
                )}
                <span className="font-medium text-foreground">{vip.arrivalMode.replace('_', ' ')}</span>
              </div>
            </div>
            {vip.expectedArrival && (
              <div>
                <p className="text-sm text-muted-foreground mb-1">Expected Arrival</p>
                <p className="font-medium text-foreground">
                  {new Date(vip.expectedArrival).toLocaleString('en-US', {
                    weekday: 'short',
                    month: 'short',
                    day: 'numeric',
                    hour: 'numeric',
                    minute: '2-digit',
                  })}
                </p>
              </div>
            )}
          </div>

          {/* Flight Information */}
          {vip.flights && vip.flights.length > 0 && (
            <div className="mt-6 pt-6 border-t border-border">
              <h3 className="text-lg font-semibold text-foreground mb-3 flex items-center">
                <Plane className="h-5 w-5 mr-2 text-blue-600" />
                Flight Information
              </h3>
              <div className="space-y-2">
                {vip.flights.map((flight) => (
                  <div
                    key={flight.id}
                    className="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3 flex justify-between items-center transition-colors"
                  >
                    <div>
                      <p className="font-medium text-blue-900 dark:text-blue-100">
                        Flight {flight.flightNumber}
                      </p>
                      <p className="text-sm text-blue-700 dark:text-blue-300">
                        {flight.departureAirport} → {flight.arrivalAirport}
                      </p>
                    </div>
                    <div className="text-right">
                      {flight.scheduledArrival && (
                        <p className="text-sm text-blue-900 dark:text-blue-100">
                          Arrives:{' '}
                          {new Date(flight.scheduledArrival).toLocaleString('en-US', {
                            month: 'short',
                            day: 'numeric',
                            hour: 'numeric',
                            minute: '2-digit',
                          })}
                        </p>
                      )}
                      {flight.status && (
                        <p className="text-xs text-blue-600 dark:text-blue-400">Status: {flight.status}</p>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {vip.notes && (
            <div className="mt-6 pt-6 border-t border-border">
              <p className="text-sm text-muted-foreground mb-1">Notes</p>
              <p className="text-foreground">{vip.notes}</p>
            </div>
          )}
        </div>
      </div>

      {/* Schedule */}
      <div className="bg-card rounded-lg shadow-medium border border-border p-6">
        <h2 className="text-2xl font-bold text-foreground mb-6 flex items-center">
          <Calendar className="h-6 w-6 mr-2 text-primary" />
          Schedule & Itinerary
        </h2>

        {sortedEvents.length === 0 ? (
          <div className="text-center py-12">
            <Calendar className="h-16 w-16 mx-auto mb-4 text-muted-foreground/30" />
            <p className="text-muted-foreground">No scheduled events yet</p>
          </div>
        ) : (
          <div className="space-y-8">
            {Object.entries(eventsByDay).map(([date, dayEvents]) => (
              <div key={date}>
                <h3 className="text-lg font-semibold text-foreground mb-4 pb-2 border-b border-border">
                  {date}
                </h3>
                <div className="space-y-4">
                  {dayEvents.map((event) => (
                    <div
                      key={event.id}
                      className="flex gap-4 p-4 bg-muted/30 border border-border rounded-lg hover:bg-accent transition-colors group"
                    >
                      {/* Time */}
                      <div className="flex-shrink-0 w-32">
                        <div className="flex items-center text-sm font-medium text-foreground">
                          <Clock className="h-4 w-4 mr-1" />
                          {formatTime(event.startTime)}
                        </div>
                        <div className="text-xs text-muted-foreground ml-5">
                          to {formatTime(event.endTime)}
                        </div>
                      </div>

                      {/* Event Details */}
                      <div className="flex-1">

                        {/* Edit Button - Top Right */}
                        <div className="float-right ml-2">
                          <button
                            onClick={() => handleEditEvent(event)}
                            className="p-2 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded-md transition-colors opacity-0 group-hover:opacity-100"
                            title="Edit event"
                          >
                            <Pencil className="h-4 w-4" />
                          </button>
                        </div>
                        <div className="flex items-center gap-2 mb-2">
                          {getEventTypeIcon(event.type)}
                          <span
                            className={`px-2 py-1 rounded text-xs font-medium ${getEventTypeColor(event.type)}`}
                          >
                            {event.type}
                          </span>
                          <h4 className="font-semibold text-foreground">{event.title}</h4>
                        </div>

                        {/* Location */}
                        {event.type === 'TRANSPORT' ? (
                          <div className="flex items-center gap-1 text-sm text-muted-foreground mb-2">
                            <MapPin className="h-4 w-4" />
                            <span>
                              {event.pickupLocation || 'Pickup'} →{' '}
                              {event.dropoffLocation || 'Dropoff'}
                            </span>
                          </div>
                        ) : (
                          event.location && (
                            <div className="flex items-center gap-1 text-sm text-muted-foreground mb-2">
                              <MapPin className="h-4 w-4" />
                              <span>{event.location}</span>
                            </div>
                          )
                        )}

                        {/* Description */}
                        {event.description && (
                          <p className="text-sm text-muted-foreground mb-2">{event.description}</p>
                        )}

                        {/* Transport Details */}
                        {event.type === 'TRANSPORT' && (
                          <div className="flex gap-4 mt-2">
                            {event.driver && (
                              <div className="flex items-center gap-1 text-sm text-muted-foreground">
                                <User className="h-4 w-4" />
                                <span>Driver: {event.driver.name}</span>
                              </div>
                            )}
                            {event.vehicle && (
                              <div className="flex items-center gap-1 text-sm text-muted-foreground">
                                <Car className="h-4 w-4" />
                                <span>
                                  {event.vehicle.name} ({event.vehicle.type.replace('_', ' ')})
                                </span>
                              </div>
                            )}
                          </div>
                        )}

                        {/* Status */}
                        <div className="mt-2">
                          <span
                            className={`text-xs px-2 py-1 rounded ${
                              event.status === 'COMPLETED'
                                ? 'bg-green-100 text-green-800 dark:bg-green-950/30 dark:text-green-300'
                                : event.status === 'IN_PROGRESS'
                                ? 'bg-blue-100 text-blue-800 dark:bg-blue-950/30 dark:text-blue-300'
                                : event.status === 'CANCELLED'
                                ? 'bg-red-100 text-red-800 dark:bg-red-950/30 dark:text-red-300'
                                : 'bg-muted text-muted-foreground'
                            }`}
                          >
                            {event.status}
                          </span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Edit Event Modal - Uses EventForm component */}
      {editingEvent && (
        <EventForm
          event={editingEvent}
          onSubmit={handleUpdateEvent}
          onCancel={() => setEditingEvent(null)}
          isSubmitting={updateEventMutation.isPending}
          extraActions={
            <div className="border-t border-border pt-4 mt-4">
              <p className="text-sm text-muted-foreground mb-3">Event Actions</p>
              <div className="flex gap-3">
                <button
                  type="button"
                  onClick={handleCancelEvent}
                  disabled={cancelEventMutation.isPending || editingEvent.status === 'CANCELLED'}
                  className="flex items-center gap-2 px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  <X className="h-4 w-4" />
                  {cancelEventMutation.isPending ? 'Cancelling...' : 'Cancel Event'}
                </button>
                <button
                  type="button"
                  onClick={() => setShowDeleteConfirm(editingEvent)}
                  disabled={deleteEventMutation.isPending}
                  className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50 transition-colors"
                >
                  <Trash2 className="h-4 w-4" />
                  Delete Event
                </button>
              </div>
              {editingEvent.status === 'CANCELLED' && (
                <p className="text-xs text-muted-foreground mt-2">This event is already cancelled.</p>
              )}
            </div>
          }
        />
      )}

      {/* Delete Confirmation Modal */}
      {showDeleteConfirm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-[60]">
          <div className="bg-card rounded-lg shadow-xl w-full max-w-md mx-4">
            <div className="p-6">
              <div className="flex items-start gap-4">
                <div className="flex-shrink-0">
                  <div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
                    <AlertTriangle className="h-6 w-6 text-red-600" />
                  </div>
                </div>
                <div className="flex-1">
                  <h3 className="text-lg font-semibold text-foreground mb-2">
                    Delete Event?
                  </h3>
                  <p className="text-base text-muted-foreground mb-2">
                    Are you sure you want to delete this event?
                  </p>
                  <div className="bg-muted/50 rounded-md p-3 mb-4">
                    <p className="font-medium text-foreground">{showDeleteConfirm.title}</p>
                    <p className="text-sm text-muted-foreground">
                      {formatTime(showDeleteConfirm.startTime)} - {formatTime(showDeleteConfirm.endTime)}
                    </p>
                  </div>
                  <p className="text-sm text-muted-foreground mb-4">
                    This will free up any assigned driver and vehicle. This action cannot be undone.
                  </p>

                  <div className="flex gap-3">
                    <button
                      onClick={() => setShowDeleteConfirm(null)}
                      className="flex-1 px-4 py-3 border border-input rounded-md text-base font-medium text-foreground hover:bg-accent"
                    >
                      Keep Event
                    </button>
                    <button
                      onClick={handleDeleteEvent}
                      disabled={deleteEventMutation.isPending}
                      className="flex-1 px-4 py-3 bg-red-600 text-white rounded-md text-base font-medium hover:bg-red-700 disabled:opacity-50"
                    >
                      {deleteEventMutation.isPending ? 'Deleting...' : 'Delete Event'}
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Signal Send Modal */}
      {showSignalModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-card rounded-lg shadow-xl max-w-md w-full border border-border">
            <div className="flex items-center justify-between p-4 border-b border-border">
              <h2 className="text-lg font-semibold text-foreground flex items-center gap-2">
                <MessageCircle className="h-5 w-5" />
                Send Schedule via Signal
              </h2>
              <button
                onClick={() => {
                  setShowSignalModal(false);
                  setSignalPhoneNumber('');
                  setSignalMessage('');
                }}
                className="text-muted-foreground hover:text-foreground"
              >
                <X className="h-5 w-5" />
              </button>
            </div>

            <div className="p-4 space-y-4">
              <p className="text-sm text-muted-foreground">
                Send {vip?.name}'s itinerary PDF directly to a phone via Signal.
              </p>

              <div>
                <label className="block text-sm font-medium text-foreground mb-1">
                  Phone Number *
                </label>
                <input
                  type="tel"
                  value={signalPhoneNumber}
                  onChange={(e) => setSignalPhoneNumber(e.target.value)}
                  placeholder="+1 (555) 123-4567"
                  className="w-full px-3 py-2 border border-input rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-primary focus:border-transparent"
                />
                <p className="text-xs text-muted-foreground mt-1">
                  Include country code (e.g., +1 for US)
                </p>
              </div>

              <div>
                <label className="block text-sm font-medium text-foreground mb-1">
                  Message (optional)
                </label>
                <textarea
                  value={signalMessage}
                  onChange={(e) => setSignalMessage(e.target.value)}
                  placeholder={`Here is the schedule for ${vip?.name}`}
                  rows={2}
                  className="w-full px-3 py-2 border border-input rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-primary focus:border-transparent resize-none"
                />
              </div>

              <div className="bg-muted/50 p-3 rounded-lg">
                <p className="text-xs text-muted-foreground">
                  <strong>Attachment:</strong> {vip?.name?.replace(/\s+/g, '_')}_Schedule_[timestamp].pdf
                </p>
              </div>
            </div>

            <div className="flex gap-3 p-4 border-t border-border">
              <button
                onClick={() => {
                  setShowSignalModal(false);
                  setSignalPhoneNumber('');
                  setSignalMessage('');
                }}
                className="flex-1 px-4 py-2 border border-input rounded-lg text-foreground hover:bg-accent transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={handleSendViaSignal}
                disabled={!signalPhoneNumber.trim() || isSendingSignal}
                className="flex-1 px-4 py-2 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
              >
                {isSendingSignal ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin" />
                    Sending...
                  </>
                ) : (
                  <>
                    <Send className="h-4 w-4" />
                    Send PDF
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
