import React, { useState, useEffect } from 'react';
import {
  Search,
  User,
  Star,
  MessageSquare,
  Calendar,
  DollarSign,
  Filter,
  X,
  Plus,
  Edit,
  Eye,
  Award,
  Mail,
  Phone,
  MapPin,
} from 'lucide-react';
import guestProfileService, { GuestProfile, GuestListItem, GuestTag, GuestSegment, GuestSearchParams, GuestPreference } from '../../features/guest_management/services/guestProfileService';
import { toast } from 'react-toastify';
import Loading from '../../shared/components/Loading';
import Pagination from '../../shared/components/Pagination';
import { useFormatCurrency } from '../../features/payments/hooks/useFormatCurrency';
import { logger } from '../../shared/utils/logger';

type TabType = 'list' | 'profile';

const GuestProfilePage: React.FC = () => {
  const [activeTab, setActiveTab] = useState<TabType>('list');
  const [selectedGuestId, setSelectedGuestId] = useState<number | null>(null);
  const [guests, setGuests] = useState<GuestListItem[]>([]);
  const [guestProfile, setGuestProfile] = useState<GuestProfile | null>(null);
  const [loading, setLoading] = useState(true);
  const [profileLoading, setProfileLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [totalItems, setTotalItems] = useState(0);
  const [searchTerm, setSearchTerm] = useState('');
  const [filters, setFilters] = useState<GuestSearchParams>({
    page: 1,
    limit: 10,
  });
  const [showFilters, setShowFilters] = useState(false);
  const [allTags, setAllTags] = useState<GuestTag[]>([]);
  const [allSegments, setAllSegments] = useState<GuestSegment[]>([]);
  const { formatCurrency } = useFormatCurrency();

  useEffect(() => {
    fetchGuests();
    fetchTags();
    fetchSegments();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [filters, currentPage]);

  useEffect(() => {
    if (selectedGuestId) {
      fetchGuestProfile(selectedGuestId);
    }
  }, [selectedGuestId]);

  const fetchGuests = async () => {
    try {
      setLoading(true);
      const params = { ...filters, page: currentPage };
      const response = await guestProfileService.searchGuests(params);
      setGuests(response.data.guests);
      setTotalPages(response.data.pagination.total_pages);
      setTotalItems(response.data.pagination.total);
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to load guests');
    } finally {
      setLoading(false);
    }
  };

  const fetchGuestProfile = async (userId: number) => {
    try {
      setProfileLoading(true);
      const response = await guestProfileService.getGuestProfile(userId);
      setGuestProfile(response.data.profile);
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to load guest profile');
    } finally {
      setProfileLoading(false);
    }
  };

  const fetchTags = async () => {
    try {
      const response = await guestProfileService.getAllTags();
      setAllTags(response.data.tags);
    } catch (error: unknown) {
      logger.error('Failed to load tags', error);
    }
  };

  const fetchSegments = async () => {
    try {
      const response = await guestProfileService.getAllSegments();
      setAllSegments(response.data.segments);
    } catch (error: unknown) {
      logger.error('Failed to load segments', error);
    }
  };

  const handleSearch = () => {
    setFilters({ ...filters, search: searchTerm || undefined, page: 1 });
    setCurrentPage(1);
  };

  const handleFilterChange = (key: keyof GuestSearchParams, value: string | number | undefined) => {
    setFilters({ ...filters, [key]: value, page: 1 });
    setCurrentPage(1);
  };

  const handleViewProfile = (userId: number) => {
    setSelectedGuestId(userId);
    setActiveTab('profile');
  };

  const handleToggleVip = async (userId: number, currentStatus: boolean) => {
    try {
      await guestProfileService.toggleVipStatus(userId, !currentStatus);
      toast.success('VIP status updated');
      if (selectedGuestId === userId) {
        fetchGuestProfile(userId);
      }
      fetchGuests();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to update VIP status');
    }
  };

  const handleUpdateMetrics = async (userId: number) => {
    try {
      await guestProfileService.updateMetrics(userId);
      toast.success('Guest metrics updated');
      fetchGuestProfile(userId);
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to update metrics');
    }
  };

  if (loading && activeTab === 'list') {
    return <Loading />;
  }

  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Guest Profiles & CRM</h1>
          <p className="text-gray-600 mt-1">Manage guest profiles, preferences, and communications</p>
        </div>
        <div className="flex gap-2">
          <button
            onClick={() => {
              setActiveTab('list');
              setSelectedGuestId(null);
            }}
            className={`px-4 py-2 rounded-lg font-medium transition-colors ${
              activeTab === 'list'
                ? 'bg-blue-600 text-white'
                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
            }`}
          >
            Guest List
          </button>
        </div>
      </div>

      {activeTab === 'list' && (
        <div className="space-y-4">
          {/* Search and Filters */}
          <div className="bg-white rounded-lg shadow p-4">
            <div className="flex gap-4 items-end">
              <div className="flex-1">
                <label className="block text-sm font-medium text-gray-700 mb-1">Search</label>
                <div className="flex gap-2">
                  <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
                    <input
                      type="text"
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
                      placeholder="Search by name, email, or phone..."
                      className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    />
                  </div>
                  <button
                    onClick={handleSearch}
                    className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                  >
                    Search
                  </button>
                </div>
              </div>
              <button
                onClick={() => setShowFilters(!showFilters)}
                className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors flex items-center gap-2"
              >
                <Filter className="w-5 h-5" />
                Filters
              </button>
            </div>

            {showFilters && (
              <div className="mt-4 grid grid-cols-1 md:grid-cols-4 gap-4 pt-4 border-t">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">VIP Status</label>
                  <select
                    value={filters.is_vip?.toString() || ''}
                    onChange={(e) =>
                      handleFilterChange('is_vip', e.target.value === '' ? undefined : e.target.value === 'true')
                    }
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  >
                    <option value="">All</option>
                    <option value="true">VIP Only</option>
                    <option value="false">Non-VIP</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Segment</label>
                  <select
                    value={filters.segment_id || ''}
                    onChange={(e) => handleFilterChange('segment_id', e.target.value ? parseInt(e.target.value) : undefined)}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  >
                    <option value="">All Segments</option>
                    {allSegments.map((segment) => (
                      <option key={segment.id} value={segment.id}>
                        {segment.name}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Min Lifetime Value</label>
                  <input
                    type="number"
                    value={filters.min_lifetime_value || ''}
                    onChange={(e) => handleFilterChange('min_lifetime_value', e.target.value ? parseFloat(e.target.value) : undefined)}
                    placeholder="0"
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Min Satisfaction</label>
                  <input
                    type="number"
                    min="0"
                    max="5"
                    step="0.1"
                    value={filters.min_satisfaction_score || ''}
                    onChange={(e) => handleFilterChange('min_satisfaction_score', e.target.value ? parseFloat(e.target.value) : undefined)}
                    placeholder="0"
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  />
                </div>
              </div>
            )}
          </div>

          {/* Guests List */}
          <div className="bg-white rounded-lg shadow overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Guest</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lifetime Value</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Visits</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Satisfaction</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tags</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {guests.map((guest) => (
                    <tr key={guest.id} className="hover:bg-gray-50">
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex items-center">
                          <div className="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
                            <User className="w-6 h-6 text-blue-600" />
                          </div>
                          <div className="ml-4">
                            <div className="flex items-center gap-2">
                              <div className="text-sm font-medium text-gray-900">{guest.full_name}</div>
                              {guest.is_vip && (
                                <div title="VIP Guest">
                                  <Award className="w-4 h-4 text-yellow-500" />
                                </div>
                              )}
                            </div>
                            <div className="text-sm text-gray-500">{guest.email}</div>
                            {guest.phone && <div className="text-sm text-gray-500">{guest.phone}</div>}
                          </div>
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm font-medium text-gray-900">
                          {formatCurrency(guest.lifetime_value)}
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-gray-900">{guest.total_visits}</div>
                        {guest.last_visit_date && (
                          <div className="text-sm text-gray-500">
                            {new Date(guest.last_visit_date).toLocaleDateString()}
                          </div>
                        )}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        {guest.satisfaction_score ? (
                          <div className="flex items-center gap-1">
                            <Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
                            <span className="text-sm font-medium">{guest.satisfaction_score.toFixed(1)}</span>
                          </div>
                        ) : (
                          <span className="text-sm text-gray-400">N/A</span>
                        )}
                      </td>
                      <td className="px-6 py-4">
                        <div className="flex flex-wrap gap-1">
                          {guest.tags.slice(0, 3).map((tag) => (
                            <span
                              key={tag.id}
                              className="px-2 py-1 text-xs rounded-full text-white"
                              style={{ backgroundColor: tag.color }}
                            >
                              {tag.name}
                            </span>
                          ))}
                          {guest.tags.length > 3 && (
                            <span className="px-2 py-1 text-xs rounded-full bg-gray-200 text-gray-700">
                              +{guest.tags.length - 3}
                            </span>
                          )}
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div className="flex gap-2">
                          <button
                            onClick={() => handleViewProfile(guest.id)}
                            className="text-blue-600 hover:text-blue-900"
                            title="View Profile"
                          >
                            <Eye className="w-5 h-5" />
                          </button>
                          <button
                            onClick={() => handleToggleVip(guest.id, guest.is_vip)}
                            className={guest.is_vip ? 'text-yellow-600 hover:text-yellow-900' : 'text-gray-400 hover:text-gray-600'}
                            title={guest.is_vip ? 'Remove VIP' : 'Make VIP'}
                          >
                            <Award className="w-5 h-5" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            {guests.length === 0 && !loading && (
              <div className="text-center py-12 text-gray-500">No guests found</div>
            )}
            <div className="px-6 py-4 border-t">
              <Pagination
                currentPage={currentPage}
                totalPages={totalPages}
                onPageChange={setCurrentPage}
                totalItems={totalItems}
              />
            </div>
          </div>
        </div>
      )}

      {activeTab === 'profile' && selectedGuestId && (
        <GuestProfileDetail
          guestProfile={guestProfile}
          loading={profileLoading}
          onBack={() => {
            setActiveTab('list');
            setSelectedGuestId(null);
          }}
          onRefresh={() => fetchGuestProfile(selectedGuestId)}
          onToggleVip={handleToggleVip}
          onUpdateMetrics={handleUpdateMetrics}
          allTags={allTags}
          allSegments={allSegments}
        />
      )}
    </div>
  );
};

interface GuestProfileDetailProps {
  guestProfile: GuestProfile | null;
  loading: boolean;
  onBack: () => void;
  onRefresh: () => void;
  onToggleVip: (userId: number, currentStatus: boolean) => void;
  onUpdateMetrics: (userId: number) => void;
  allTags: GuestTag[];
  allSegments: GuestSegment[];
}

const GuestProfileDetail: React.FC<GuestProfileDetailProps> = ({
  guestProfile,
  loading,
  onBack,
  onRefresh,
  onToggleVip,
  onUpdateMetrics,
  allTags,
  allSegments,
}) => {
  const { formatCurrency } = useFormatCurrency();
  const [activeSection, setActiveSection] = useState<'overview' | 'preferences' | 'notes' | 'communications' | 'bookings'>('overview');
  
  // Modal states
  const [showPreferencesModal, setShowPreferencesModal] = useState(false);
  const [showNoteModal, setShowNoteModal] = useState(false);
  const [showTagModal, setShowTagModal] = useState(false);
  const [showCommunicationModal, setShowCommunicationModal] = useState(false);
  const [showSegmentModal, setShowSegmentModal] = useState(false);
  const [saving, setSaving] = useState(false);
  
  // Form states
  const [preferencesForm, setPreferencesForm] = useState<Partial<GuestPreference>>({});
  const [noteForm, setNoteForm] = useState({ note: '', is_important: false, is_private: false });
  const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
  const [communicationForm, setCommunicationForm] = useState({
    communication_type: 'email' as 'email' | 'phone' | 'sms' | 'chat' | 'in_person' | 'other',
    direction: 'outbound' as 'inbound' | 'outbound',
    subject: '',
    content: '',
  });
  const [selectedSegmentId, setSelectedSegmentId] = useState<number | null>(null);

  // Handler functions
  const handleSavePreferences = async () => {
    if (!guestProfile) return;
    try {
      setSaving(true);
      await guestProfileService.updatePreferences(guestProfile.id, preferencesForm);
      toast.success('Preferences updated successfully');
      setShowPreferencesModal(false);
      onRefresh();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to update preferences');
    } finally {
      setSaving(false);
    }
  };

  const handleSaveNote = async () => {
    if (!guestProfile || !noteForm.note.trim()) {
      toast.error('Please enter a note');
      return;
    }
    try {
      setSaving(true);
      await guestProfileService.createNote(guestProfile.id, noteForm);
      toast.success('Note added successfully');
      setShowNoteModal(false);
      setNoteForm({ note: '', is_important: false, is_private: false });
      onRefresh();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to add note');
    } finally {
      setSaving(false);
    }
  };

  const handleAddTag = async () => {
    if (!guestProfile || !selectedTagId) {
      toast.error('Please select a tag');
      return;
    }
    try {
      setSaving(true);
      await guestProfileService.addTag(guestProfile.id, selectedTagId);
      toast.success('Tag added successfully');
      setShowTagModal(false);
      setSelectedTagId(null);
      onRefresh();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to add tag');
    } finally {
      setSaving(false);
    }
  };

  const handleRemoveTag = async (tagId: number) => {
    if (!guestProfile) return;
    try {
      await guestProfileService.removeTag(guestProfile.id, tagId);
      toast.success('Tag removed successfully');
      onRefresh();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to remove tag');
    }
  };

  const handleSaveCommunication = async () => {
    if (!guestProfile || !communicationForm.content.trim()) {
      toast.error('Please enter communication content');
      return;
    }
    try {
      setSaving(true);
      await guestProfileService.createCommunication(guestProfile.id, communicationForm);
      toast.success('Communication recorded successfully');
      setShowCommunicationModal(false);
      setCommunicationForm({
        communication_type: 'email',
        direction: 'outbound',
        subject: '',
        content: '',
      });
      onRefresh();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to record communication');
    } finally {
      setSaving(false);
    }
  };

  const handleAssignSegment = async () => {
    if (!guestProfile || !selectedSegmentId) {
      toast.error('Please select a segment');
      return;
    }
    try {
      setSaving(true);
      await guestProfileService.assignSegment(guestProfile.id, selectedSegmentId);
      toast.success('Segment assigned successfully');
      setShowSegmentModal(false);
      setSelectedSegmentId(null);
      onRefresh();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to assign segment');
    } finally {
      setSaving(false);
    }
  };

  const handleRemoveSegment = async (segmentId: number) => {
    if (!guestProfile) return;
    try {
      await guestProfileService.removeSegment(guestProfile.id, segmentId);
      toast.success('Segment removed successfully');
      onRefresh();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to remove segment');
    }
  };

  const handleOpenPreferencesModal = () => {
    if (guestProfile?.preferences) {
      setPreferencesForm(guestProfile.preferences);
    } else {
      setPreferencesForm({});
    }
    setShowPreferencesModal(true);
  };

  if (loading) {
    return <Loading />;
  }

  if (!guestProfile) {
    return (
      <div className="bg-white rounded-lg shadow p-12 text-center">
        <p className="text-gray-500">Guest profile not found</p>
        <button onClick={onBack} className="mt-4 text-blue-600 hover:text-blue-800">
          Back to List
        </button>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="bg-white rounded-lg shadow p-6">
        <div className="flex items-start justify-between">
          <div className="flex items-start gap-4">
            <div className="h-20 w-20 rounded-full bg-blue-100 flex items-center justify-center">
              {guestProfile.avatar ? (
                <img src={guestProfile.avatar} alt={guestProfile.full_name} className="h-20 w-20 rounded-full object-cover" />
              ) : (
                <User className="w-10 h-10 text-blue-600" />
              )}
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h2 className="text-2xl font-bold text-gray-900">{guestProfile.full_name}</h2>
                {guestProfile.is_vip && (
                  <div title="VIP Guest">
                    <Award className="w-6 h-6 text-yellow-500" />
                  </div>
                )}
              </div>
              <div className="mt-2 space-y-1">
                <div className="flex items-center gap-2 text-gray-600">
                  <Mail className="w-4 h-4" />
                  <span>{guestProfile.email}</span>
                </div>
                {guestProfile.phone && (
                  <div className="flex items-center gap-2 text-gray-600">
                    <Phone className="w-4 h-4" />
                    <span>{guestProfile.phone}</span>
                  </div>
                )}
                {guestProfile.address && (
                  <div className="flex items-center gap-2 text-gray-600">
                    <MapPin className="w-4 h-4" />
                    <span>{guestProfile.address}</span>
                  </div>
                )}
              </div>
            </div>
          </div>
          <div className="flex gap-2">
            <button
              onClick={() => onToggleVip(guestProfile.id, guestProfile.is_vip)}
              className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                guestProfile.is_vip
                  ? 'bg-yellow-100 text-yellow-800 hover:bg-yellow-200'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              }`}
            >
              {guestProfile.is_vip ? 'VIP Guest' : 'Make VIP'}
            </button>
            <button
              onClick={() => onUpdateMetrics(guestProfile.id)}
              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
            >
              Update Metrics
            </button>
            <button
              onClick={onBack}
              className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
            >
              Back
            </button>
          </div>
        </div>

        {/* Key Metrics */}
        <div className="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4">
          <div className="bg-blue-50 rounded-lg p-4">
            <div className="flex items-center gap-2 text-blue-600 mb-1">
              <DollarSign className="w-5 h-5" />
              <span className="text-sm font-medium">Lifetime Value</span>
            </div>
            <div className="text-2xl font-bold text-gray-900">{formatCurrency(guestProfile.lifetime_value)}</div>
          </div>
          <div className="bg-green-50 rounded-lg p-4">
            <div className="flex items-center gap-2 text-green-600 mb-1">
              <Calendar className="w-5 h-5" />
              <span className="text-sm font-medium">Total Visits</span>
            </div>
            <div className="text-2xl font-bold text-gray-900">{guestProfile.total_visits}</div>
          </div>
          <div className="bg-yellow-50 rounded-lg p-4">
            <div className="flex items-center gap-2 text-yellow-600 mb-1">
              <Star className="w-5 h-5" />
              <span className="text-sm font-medium">Satisfaction</span>
            </div>
            <div className="text-2xl font-bold text-gray-900">
              {guestProfile.satisfaction_score ? guestProfile.satisfaction_score.toFixed(1) : 'N/A'}
            </div>
          </div>
          <div className="bg-purple-50 rounded-lg p-4">
            <div className="flex items-center gap-2 text-purple-600 mb-1">
              <MessageSquare className="w-5 h-5" />
              <span className="text-sm font-medium">Communications</span>
            </div>
            <div className="text-2xl font-bold text-gray-900">{guestProfile.communications.length}</div>
          </div>
        </div>
      </div>

      {/* Navigation Tabs */}
      <div className="bg-white rounded-lg shadow">
        <div className="border-b border-gray-200">
          <nav className="flex -mb-px">
            {([
              { id: 'overview' as const, label: 'Overview' },
              { id: 'preferences' as const, label: 'Preferences' },
              { id: 'notes' as const, label: 'Notes' },
              { id: 'communications' as const, label: 'Communications' },
              { id: 'bookings' as const, label: 'Bookings' },
            ] as const).map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveSection(tab.id)}
                className={`px-6 py-3 text-sm font-medium border-b-2 transition-colors ${
                  activeSection === tab.id
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                {tab.label}
              </button>
            ))}
          </nav>
        </div>

        <div className="p-6">
          {activeSection === 'overview' && (
            <div className="space-y-6">
              <div>
                <h3 className="text-lg font-semibold text-gray-900 mb-4">Analytics</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="bg-gray-50 rounded-lg p-4">
                    <div className="text-sm text-gray-600 mb-1">Average Booking Value</div>
                    <div className="text-xl font-bold text-gray-900">
                      {formatCurrency(guestProfile.analytics.average_booking_value)}
                    </div>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-4">
                    <div className="text-sm text-gray-600 mb-1">Preferred Room Type</div>
                    <div className="text-xl font-bold text-gray-900">
                      {guestProfile.analytics.preferred_room_type || 'N/A'}
                    </div>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-4">
                    <div className="text-sm text-gray-600 mb-1">Total Nights Stayed</div>
                    <div className="text-xl font-bold text-gray-900">
                      {guestProfile.analytics.booking_statistics.total_nights_stayed}
                    </div>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-4">
                    <div className="text-sm text-gray-600 mb-1">Completed Bookings</div>
                    <div className="text-xl font-bold text-gray-900">
                      {guestProfile.analytics.booking_statistics.completed_bookings}
                    </div>
                  </div>
                </div>
              </div>

              <div>
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-lg font-semibold text-gray-900">Tags & Segments</h3>
                  <div className="flex gap-2">
                    <button
                      onClick={() => setShowTagModal(true)}
                      className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-1"
                    >
                      <Plus className="w-4 h-4" />
                      Manage Tags
                    </button>
                    <button
                      onClick={() => setShowSegmentModal(true)}
                      className="px-3 py-1.5 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors flex items-center gap-1"
                    >
                      <Plus className="w-4 h-4" />
                      Manage Segments
                    </button>
                  </div>
                </div>
                <div className="space-y-4">
                  <div>
                    <div className="text-sm font-medium text-gray-700 mb-2">Tags</div>
                    <div className="flex flex-wrap gap-2">
                      {guestProfile.tags.length > 0 ? (
                        guestProfile.tags.map((tag) => (
                          <span
                            key={tag.id}
                            className="px-3 py-1 rounded-full text-white text-sm flex items-center gap-1"
                            style={{ backgroundColor: tag.color }}
                          >
                            {tag.name}
                            <button
                              onClick={() => handleRemoveTag(tag.id)}
                              className="ml-1 hover:bg-white/20 rounded-full p-0.5"
                              title="Remove tag"
                            >
                              <X className="w-3 h-3" />
                            </button>
                          </span>
                        ))
                      ) : (
                        <span className="text-gray-400 text-sm">No tags assigned</span>
                      )}
                    </div>
                  </div>
                  <div>
                    <div className="text-sm font-medium text-gray-700 mb-2">Segments</div>
                    <div className="flex flex-wrap gap-2">
                      {guestProfile.segments.length > 0 ? (
                        guestProfile.segments.map((segment) => (
                          <span
                            key={segment.id}
                            className="px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-sm flex items-center gap-1"
                          >
                            {segment.name}
                            <button
                              onClick={() => handleRemoveSegment(segment.id)}
                              className="ml-1 hover:bg-blue-200 rounded-full p-0.5"
                              title="Remove segment"
                            >
                              <X className="w-3 h-3" />
                            </button>
                          </span>
                        ))
                      ) : (
                        <span className="text-gray-400 text-sm">No segments assigned</span>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeSection === 'preferences' && (
            <div className="space-y-4">
              <div className="flex justify-end">
                <button
                  onClick={handleOpenPreferencesModal}
                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2"
                >
                  <Edit className="w-4 h-4" />
                  {guestProfile.preferences ? 'Edit Preferences' : 'Add Preferences'}
                </button>
              </div>
              {guestProfile.preferences ? (
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Preferred Room Location</label>
                    <div className="text-gray-900">{guestProfile.preferences.preferred_room_location || 'N/A'}</div>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Preferred Floor</label>
                    <div className="text-gray-900">{guestProfile.preferences.preferred_floor || 'N/A'}</div>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Preferred Contact Method</label>
                    <div className="text-gray-900">{guestProfile.preferences.preferred_contact_method || 'N/A'}</div>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Preferred Language</label>
                    <div className="text-gray-900">{guestProfile.preferences.preferred_language || 'N/A'}</div>
                  </div>
                  {guestProfile.preferences.preferred_amenities && (
                    <div className="md:col-span-2">
                      <label className="block text-sm font-medium text-gray-700 mb-1">Preferred Amenities</label>
                      <div className="flex flex-wrap gap-2">
                        {guestProfile.preferences.preferred_amenities.map((amenity, idx) => (
                          <span key={idx} className="px-2 py-1 bg-gray-100 rounded text-sm">
                            {amenity}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}
                  {guestProfile.preferences.special_requests && (
                    <div className="md:col-span-2">
                      <label className="block text-sm font-medium text-gray-700 mb-1">Special Requests</label>
                      <div className="text-gray-900">{guestProfile.preferences.special_requests}</div>
                    </div>
                  )}
                </div>
              ) : (
                <div className="text-center py-8 text-gray-500">No preferences recorded</div>
              )}
            </div>
          )}

          {activeSection === 'notes' && (
            <div className="space-y-4">
              <div className="flex justify-end">
                <button
                  onClick={() => setShowNoteModal(true)}
                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2"
                >
                  <Plus className="w-4 h-4" />
                  Add Note
                </button>
              </div>
              {guestProfile.notes.length > 0 ? (
                guestProfile.notes.map((note) => (
                  <div key={note.id} className="border border-gray-200 rounded-lg p-4">
                    <div className="flex items-start justify-between mb-2">
                      <div className="flex items-center gap-2">
                        {note.is_important && <Star className="w-4 h-4 text-yellow-500 fill-yellow-500" />}
                        {note.is_private && <span className="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">Private</span>}
                        <span className="text-sm text-gray-500">
                          {note.created_by} • {new Date(note.created_at).toLocaleString()}
                        </span>
                      </div>
                    </div>
                    <div className="text-gray-900 whitespace-pre-wrap">{note.note}</div>
                  </div>
                ))
              ) : (
                <div className="text-center py-8 text-gray-500">No notes recorded</div>
              )}
            </div>
          )}

          {activeSection === 'communications' && (
            <div className="space-y-4">
              <div className="flex justify-end">
                <button
                  onClick={() => setShowCommunicationModal(true)}
                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2"
                >
                  <Plus className="w-4 h-4" />
                  Add Communication
                </button>
              </div>
              {guestProfile.communications.length > 0 ? (
                guestProfile.communications.map((comm) => (
                  <div key={comm.id} className="border border-gray-200 rounded-lg p-4">
                    <div className="flex items-start justify-between mb-2">
                      <div className="flex items-center gap-2">
                        <span className={`px-2 py-1 rounded text-xs ${
                          comm.direction === 'inbound' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'
                        }`}>
                          {comm.direction}
                        </span>
                        <span className="px-2 py-1 bg-gray-100 rounded text-xs">{comm.communication_type}</span>
                        {comm.staff_name && <span className="text-sm text-gray-500">by {comm.staff_name}</span>}
                      </div>
                      <span className="text-sm text-gray-500">{new Date(comm.created_at).toLocaleString()}</span>
                    </div>
                    {comm.subject && <div className="font-medium text-gray-900 mb-1">{comm.subject}</div>}
                    <div className="text-gray-700 whitespace-pre-wrap">{comm.content}</div>
                  </div>
                ))
              ) : (
                <div className="text-center py-8 text-gray-500">No communications recorded</div>
              )}
            </div>
          )}

          {activeSection === 'bookings' && (
            <div className="space-y-4">
              {guestProfile.recent_bookings.length > 0 ? (
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="bg-gray-50">
                      <tr>
                        <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Booking #</th>
                        <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Check-in</th>
                        <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Check-out</th>
                        <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                        <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Total</th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {guestProfile.recent_bookings.map((booking) => (
                        <tr key={booking.id}>
                          <td className="px-4 py-3 text-sm font-medium text-gray-900">{booking.booking_number}</td>
                          <td className="px-4 py-3 text-sm text-gray-500">
                            {new Date(booking.check_in_date).toLocaleDateString()}
                          </td>
                          <td className="px-4 py-3 text-sm text-gray-500">
                            {new Date(booking.check_out_date).toLocaleDateString()}
                          </td>
                          <td className="px-4 py-3">
                            <span className={`px-2 py-1 rounded text-xs ${
                              booking.status === 'checked_out' ? 'bg-green-100 text-green-800' :
                              booking.status === 'confirmed' ? 'bg-blue-100 text-blue-800' :
                              booking.status === 'cancelled' ? 'bg-red-100 text-red-800' :
                              'bg-gray-100 text-gray-800'
                            }`}>
                              {booking.status}
                            </span>
                          </td>
                          <td className="px-4 py-3 text-sm font-medium text-gray-900">
                            {formatCurrency(booking.total_price)}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              ) : (
                <div className="text-center py-8 text-gray-500">No bookings found</div>
              )}
            </div>
          )}
        </div>
      </div>

      {/* Preferences Modal */}
      {showPreferencesModal && (
        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div className="p-6 border-b border-gray-200 flex justify-between items-center">
              <h2 className="text-2xl font-bold text-gray-900">Edit Preferences</h2>
              <button onClick={() => setShowPreferencesModal(false)} className="text-gray-400 hover:text-gray-600">
                <X className="w-6 h-6" />
              </button>
            </div>
            <div className="p-6 space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Preferred Room Location</label>
                  <input
                    type="text"
                    value={preferencesForm.preferred_room_location || ''}
                    onChange={(e) => setPreferencesForm({ ...preferencesForm, preferred_room_location: e.target.value })}
                    placeholder="e.g., high floor, ocean view"
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Preferred Floor</label>
                  <input
                    type="number"
                    value={preferencesForm.preferred_floor || ''}
                    onChange={(e) => setPreferencesForm({ ...preferencesForm, preferred_floor: parseInt(e.target.value) || undefined })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Preferred Contact Method</label>
                  <select
                    value={preferencesForm.preferred_contact_method || ''}
                    onChange={(e) => setPreferencesForm({ ...preferencesForm, preferred_contact_method: e.target.value })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  >
                    <option value="">Select...</option>
                    <option value="email">Email</option>
                    <option value="phone">Phone</option>
                    <option value="sms">SMS</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Preferred Language</label>
                  <input
                    type="text"
                    value={preferencesForm.preferred_language || ''}
                    onChange={(e) => setPreferencesForm({ ...preferencesForm, preferred_language: e.target.value })}
                    placeholder="e.g., en, es, fr"
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  />
                </div>
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-700 mb-1">Special Requests</label>
                  <textarea
                    value={preferencesForm.special_requests || ''}
                    onChange={(e) => setPreferencesForm({ ...preferencesForm, special_requests: e.target.value })}
                    rows={3}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    placeholder="Any special requests or preferences..."
                  />
                </div>
              </div>
              <div className="flex justify-end gap-2 pt-4 border-t">
                <button
                  onClick={() => setShowPreferencesModal(false)}
                  className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
                >
                  Cancel
                </button>
                <button
                  onClick={handleSavePreferences}
                  disabled={saving}
                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
                >
                  {saving ? 'Saving...' : 'Save Preferences'}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Note Modal */}
      {showNoteModal && (
        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl">
            <div className="p-6 border-b border-gray-200 flex justify-between items-center">
              <h2 className="text-2xl font-bold text-gray-900">Add Note</h2>
              <button onClick={() => setShowNoteModal(false)} className="text-gray-400 hover:text-gray-600">
                <X className="w-6 h-6" />
              </button>
            </div>
            <div className="p-6 space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Note</label>
                <textarea
                  value={noteForm.note}
                  onChange={(e) => setNoteForm({ ...noteForm, note: e.target.value })}
                  rows={5}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  placeholder="Enter note content..."
                />
              </div>
              <div className="flex gap-4">
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={noteForm.is_important}
                    onChange={(e) => setNoteForm({ ...noteForm, is_important: e.target.checked })}
                    className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
                  />
                  <span className="text-sm text-gray-700">Important</span>
                </label>
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={noteForm.is_private}
                    onChange={(e) => setNoteForm({ ...noteForm, is_private: e.target.checked })}
                    className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
                  />
                  <span className="text-sm text-gray-700">Private (Admin only)</span>
                </label>
              </div>
              <div className="flex justify-end gap-2 pt-4 border-t">
                <button
                  onClick={() => setShowNoteModal(false)}
                  className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
                >
                  Cancel
                </button>
                <button
                  onClick={handleSaveNote}
                  disabled={saving}
                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
                >
                  {saving ? 'Saving...' : 'Save Note'}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Tag Modal */}
      {showTagModal && (
        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg shadow-xl w-full max-w-md">
            <div className="p-6 border-b border-gray-200 flex justify-between items-center">
              <h2 className="text-2xl font-bold text-gray-900">Add Tag</h2>
              <button onClick={() => setShowTagModal(false)} className="text-gray-400 hover:text-gray-600">
                <X className="w-6 h-6" />
              </button>
            </div>
            <div className="p-6 space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Select Tag</label>
                <select
                  value={selectedTagId || ''}
                  onChange={(e) => setSelectedTagId(e.target.value ? parseInt(e.target.value) : null)}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                >
                  <option value="">Select a tag...</option>
                  {allTags
                    .filter(tag => !guestProfile.tags.some(gt => gt.id === tag.id))
                    .map((tag) => (
                      <option key={tag.id} value={tag.id}>
                        {tag.name}
                      </option>
                    ))}
                </select>
              </div>
              <div className="flex justify-end gap-2 pt-4 border-t">
                <button
                  onClick={() => setShowTagModal(false)}
                  className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
                >
                  Cancel
                </button>
                <button
                  onClick={handleAddTag}
                  disabled={saving || !selectedTagId}
                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
                >
                  {saving ? 'Adding...' : 'Add Tag'}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Communication Modal */}
      {showCommunicationModal && (
        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl">
            <div className="p-6 border-b border-gray-200 flex justify-between items-center">
              <h2 className="text-2xl font-bold text-gray-900">Add Communication</h2>
              <button onClick={() => setShowCommunicationModal(false)} className="text-gray-400 hover:text-gray-600">
                <X className="w-6 h-6" />
              </button>
            </div>
            <div className="p-6 space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Type</label>
                  <select
                    value={communicationForm.communication_type}
                    onChange={(e) => setCommunicationForm({ ...communicationForm, communication_type: e.target.value as 'email' | 'phone' | 'sms' | 'chat' | 'in_person' | 'other' })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  >
                    <option value="email">Email</option>
                    <option value="phone">Phone</option>
                    <option value="sms">SMS</option>
                    <option value="chat">Chat</option>
                    <option value="in_person">In Person</option>
                    <option value="other">Other</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Direction</label>
                  <select
                    value={communicationForm.direction}
                    onChange={(e) => setCommunicationForm({ ...communicationForm, direction: e.target.value as 'inbound' | 'outbound' })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  >
                    <option value="inbound">Inbound (Guest to Hotel)</option>
                    <option value="outbound">Outbound (Hotel to Guest)</option>
                  </select>
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Subject</label>
                <input
                  type="text"
                  value={communicationForm.subject}
                  onChange={(e) => setCommunicationForm({ ...communicationForm, subject: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  placeholder="Communication subject..."
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Content</label>
                <textarea
                  value={communicationForm.content}
                  onChange={(e) => setCommunicationForm({ ...communicationForm, content: e.target.value })}
                  rows={5}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  placeholder="Communication details..."
                />
              </div>
              <div className="flex justify-end gap-2 pt-4 border-t">
                <button
                  onClick={() => setShowCommunicationModal(false)}
                  className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
                >
                  Cancel
                </button>
                <button
                  onClick={handleSaveCommunication}
                  disabled={saving}
                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
                >
                  {saving ? 'Saving...' : 'Save Communication'}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Segment Modal */}
      {showSegmentModal && (
        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg shadow-xl w-full max-w-md">
            <div className="p-6 border-b border-gray-200 flex justify-between items-center">
              <h2 className="text-2xl font-bold text-gray-900">Assign Segment</h2>
              <button onClick={() => setShowSegmentModal(false)} className="text-gray-400 hover:text-gray-600">
                <X className="w-6 h-6" />
              </button>
            </div>
            <div className="p-6 space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Select Segment</label>
                <select
                  value={selectedSegmentId || ''}
                  onChange={(e) => setSelectedSegmentId(e.target.value ? parseInt(e.target.value) : null)}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                >
                  <option value="">Select a segment...</option>
                  {allSegments
                    .filter(seg => !guestProfile.segments.some(gs => gs.id === seg.id))
                    .map((segment) => (
                      <option key={segment.id} value={segment.id}>
                        {segment.name}
                      </option>
                    ))}
                </select>
              </div>
              <div className="flex justify-end gap-2 pt-4 border-t">
                <button
                  onClick={() => setShowSegmentModal(false)}
                  className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
                >
                  Cancel
                </button>
                <button
                  onClick={handleAssignSegment}
                  disabled={saving || !selectedSegmentId}
                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
                >
                  {saving ? 'Assigning...' : 'Assign Segment'}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default GuestProfilePage;

