import React, { useState, useEffect } from 'react';
import { Search, User, LogIn, Home, MessageSquare, Bell, Settings, Star, Edit, Trash, X, Check, Upload, Send, Calendar, Phone, MapPin, Briefcase, DollarSign, Users, PlusCircle, AlertCircle, Eye, EyeOff, Menu, ChevronDown, ChevronRight } from 'lucide-react';

// Main App Component
export default function App() {
  const [page, setPage] = useState('home');
  const [user, setUser] = useState(null);
  const [isAdmin, setIsAdmin] = useState(false);
  const [searchParams, setSearchParams] = useState({ query: '', town: '', service: '' });
  const [searchResults, setSearchResults] = useState([]);
  const [notifications, setNotifications] = useState([]);
  const [interestedMessages, setInterestedMessages] = useState([]);
  const [adminPassword, setAdminPassword] = useState('jUDmi');
  const [masterPhrase, setMasterPhrase] = useState('changeme');
  const [advertisements, setAdvertisements] = useState([]);
  const [services, setServices] = useState([
    'Pianist', 'Bassist', 'Saxophonist', 'Drummer', 'Soloist', 'Singer', 
    'Comedian', 'MC', 'DJ', 'Service Traiter', 'Cake and pastries', 
    'Driver on Hire', 'Electrician', 'Graphic Designer', 'Music Band', 
    'Halls', 'Car for rent', 'Event Decor', 'House Help', 'Delivery Agent', 
    'Makeup Artist', 'Hair styler', 'Builder', 'Painter', 'Taxi driver', 'Bike man'
  ]);
  const [towns, setTowns] = useState([
    'Bamenda', 'Buea', 'Bafoussam', 'Yaounde', 'Douala', 
    'Kribi', 'Kumba', 'Limbe', 'Bertoua', 'Ngaoundere'
  ]);
  const [providers, setProviders] = useState([]);
  const [tempFormData, setTempFormData] = useState({});
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const [adminView, setAdminView] = useState('dashboard');
  const [selectedProvider, setSelectedProvider] = useState(null);
  const [messageText, setMessageText] = useState('');
  const [allowReply, setAllowReply] = useState(true);
  const [blockedProviders, setBlockedProviders] = useState([]);
  const [ratingHistory, setRatingHistory] = useState({});
  const [adRequests, setAdRequests] = useState([]);

  // Load data from localStorage on initial render
  useEffect(() => {
    const storedProviders = localStorage.getItem('providers');
    if (storedProviders) setProviders(JSON.parse(storedProviders));
    
    const storedNotifications = localStorage.getItem('notifications');
    if (storedNotifications) setNotifications(JSON.parse(storedNotifications));
    
    const storedInterestedMessages = localStorage.getItem('interestedMessages');
    if (storedInterestedMessages) setInterestedMessages(JSON.parse(storedInterestedMessages));
    
    const storedAdminPassword = localStorage.getItem('adminPassword');
    if (storedAdminPassword) setAdminPassword(storedAdminPassword);
    
    const storedAdvertisements = localStorage.getItem('advertisements');
    if (storedAdvertisements) setAdvertisements(JSON.parse(storedAdvertisements));
    
    const storedServices = localStorage.getItem('services');
    if (storedServices) setServices(JSON.parse(storedServices));
    
    const storedTowns = localStorage.getItem('towns');
    if (storedTowns) setTowns(JSON.parse(storedTowns));
    
    const storedBlockedProviders = localStorage.getItem('blockedProviders');
    if (storedBlockedProviders) setBlockedProviders(JSON.parse(storedBlockedProviders));
    
    const storedRatingHistory = localStorage.getItem('ratingHistory');
    if (storedRatingHistory) setRatingHistory(JSON.parse(storedRatingHistory));
    
    const storedAdRequests = localStorage.getItem('adRequests');
    if (storedAdRequests) setAdRequests(JSON.parse(storedAdRequests));
    
    // Check for logged in user
    const loggedInUser = localStorage.getItem('currentUser');
    if (loggedInUser) {
      setUser(JSON.parse(loggedInUser));
    }
  }, []);

  // Save data to localStorage whenever it changes
  useEffect(() => {
    localStorage.setItem('providers', JSON.stringify(providers));
  }, [providers]);

  useEffect(() => {
    localStorage.setItem('notifications', JSON.stringify(notifications));
  }, [notifications]);

  useEffect(() => {
    localStorage.setItem('interestedMessages', JSON.stringify(interestedMessages));
  }, [interestedMessages]);

  useEffect(() => {
    localStorage.setItem('adminPassword', adminPassword);
  }, [adminPassword]);

  useEffect(() => {
    localStorage.setItem('advertisements', JSON.stringify(advertisements));
  }, [advertisements]);

  useEffect(() => {
    localStorage.setItem('services', JSON.stringify(services));
  }, [services]);

  useEffect(() => {
    localStorage.setItem('towns', JSON.stringify(towns));
  }, [towns]);

  useEffect(() => {
    localStorage.setItem('blockedProviders', JSON.stringify(blockedProviders));
  }, [blockedProviders]);

  useEffect(() => {
    localStorage.setItem('ratingHistory', JSON.stringify(ratingHistory));
  }, [ratingHistory]);

  useEffect(() => {
    localStorage.setItem('adRequests', JSON.stringify(adRequests));
  }, [adRequests]);

  useEffect(() => {
    if (user) {
      localStorage.setItem('currentUser', JSON.stringify(user));
    } else {
      localStorage.removeItem('currentUser');
    }
  }, [user]);

  // Helper function to show error message
  const showError = (message) => {
    setError(message);
    setTimeout(() => setError(''), 3000);
  };

  // Helper function to show success message
  const showSuccess = (message) => {
    setSuccess(message);
    setTimeout(() => setSuccess(''), 3000);
  };

  // Handle login
  const handleLogin = (username, password) => {
    const foundUser = providers.find(
      p => p.name.toLowerCase() === username.toLowerCase() && p.password === password
    );
    
    if (foundUser) {
      setUser(foundUser);
      setPage('providerProfile');
      showSuccess('Login successful!');
    } else if (password === adminPassword) {
      setIsAdmin(true);
      setPage('adminPanel');
      showSuccess('Admin login successful!');
    } else {
      showError('Invalid username or password');
    }
  };

  // Handle logout
  const handleLogout = () => {
    setUser(null);
    setIsAdmin(false);
    setPage('home');
  };

  // Handle registration
  const handleRegister = (formData) => {
    // Check if user already exists
    const userExists = providers.some(
      p => p.name.toLowerCase() === formData.name.toLowerCase() || 
           p.whatsappNumber === formData.whatsappNumber
    );
    
    if (userExists) {
      showError('A user with this name or WhatsApp number already exists');
      return;
    }
    
    // Validate password match
    if (formData.password !== formData.confirmPassword) {
      showError('Passwords do not match');
      return;
    }
    
    // Validate minimum payment (max 6 figures)
    if (formData.minimumPayment > 999999 || formData.minimumPayment < 0) {
      showError('Minimum payment must be between 0 and 999,999');
      return;
    }
    
    // Create new provider
    const newProvider = {
      id: Date.now().toString(),
      name: formData.name,
      password: formData.password,
      age: formData.age,
      gender: formData.gender,
      town: formData.town,
      service: formData.service,
      minimumPayment: formData.minimumPayment,
      whatsappNumber: formData.whatsappNumber,
      pictures: formData.pictures || [],
      quarter: formData.quarter || '',
      rating: 0,
      ratingCount: 0,
      messages: [],
      dateRegistered: new Date().toISOString(),
    };
    
    setProviders([...providers, newProvider]);
    setUser(newProvider);
    setPage('providerProfile');
    showSuccess('Registration successful!');
  };

  // Handle search
  const handleSearch = (query, type = 'general') => {
    // Check for admin access
    if (query === adminPassword) {
      setIsAdmin(true);
      setPage('adminPanel');
      return;
    }
    
    // Check for master phrase to change admin password
    if (query === masterPhrase) {
      const newPassword = prompt('Enter new admin password:');
      if (newPassword && newPassword.trim() !== '') {
        setAdminPassword(newPassword);
        showSuccess('Admin password changed successfully');
      }
      return;
    }
    
    // Filter out blocked providers
    const availableProviders = providers.filter(p => !blockedProviders.includes(p.id));
    
    let results = [];
    
    if (type === 'general') {
      // Search by name, service, or town
      results = availableProviders.filter(p => 
        p.name.toLowerCase().includes(query.toLowerCase()) ||
        p.service.toLowerCase().includes(query.toLowerCase()) ||
        p.town.toLowerCase().includes(query.toLowerCase())
      );
    } else if (type === 'townAndService') {
      // Search by town and service
      results = availableProviders.filter(p => 
        p.town === searchParams.town && 
        p.service === searchParams.service
      );
    }
    
    setSearchResults(results);
  };

  // Handle rating a provider
  const handleRateProvider = (providerId, rating) => {
    const currentDate = new Date();
    const currentWeek = `${currentDate.getFullYear()}-${Math.floor(currentDate.getDate() / 7)}`;
    const userIP = 'user-' + Math.random().toString(36).substring(2, 15); // Simulating user identification
    
    // Check if user has already rated this provider this week
    const ratingKey = `${userIP}-${providerId}-${currentWeek}`;
    if (ratingHistory[ratingKey]) {
      showError('You can only rate a provider once per week');
      return;
    }
    
    // Update provider rating
    const updatedProviders = providers.map(p => {
      if (p.id === providerId) {
        const newRatingCount = p.ratingCount + 1;
        const newRating = ((p.rating * p.ratingCount) + rating) / newRatingCount;
        return {
          ...p,
          rating: newRating,
          ratingCount: newRatingCount
        };
      }
      return p;
    });
    
    // Update rating history
    setRatingHistory({
      ...ratingHistory,
      [ratingKey]: true
    });
    
    setProviders(updatedProviders);
    showSuccess('Rating submitted successfully');
  };

  // Handle interested button click
  const handleInterested = (provider) => {
    setSelectedProvider(provider);
    setTempFormData({
      providerName: provider.name,
      providerId: provider.id
    });
    setPage('interestedForm');
  };

  // Submit interested form
  const submitInterestedForm = (formData) => {
    const newMessage = {
      id: Date.now().toString(),
      providerId: formData.providerId,
      providerName: formData.providerName,
      visitorNumber: formData.whatsappNumber,
      message: formData.message,
      timestamp: new Date().toISOString(),
      town: selectedProvider.town,
      service: selectedProvider.service
    };
    
    // Add to interested messages
    setInterestedMessages([newMessage, ...interestedMessages]);
    
    // Add to provider's messages
    const updatedProviders = providers.map(p => {
      if (p.id === formData.providerId) {
        return {
          ...p,
          messages: [newMessage, ...(p.messages || [])]
        };
      }
      return p;
    });
    
    setProviders(updatedProviders);
    setPage('findService');
    showSuccess('Your message has been sent to the service provider');
  };

  // Cancel interested request
  const cancelInterestedRequest = (messageId) => {
    // Remove from interested messages
    const updatedMessages = interestedMessages.filter(m => m.id !== messageId);
    setInterestedMessages(updatedMessages);
    
    // Remove from provider's messages
    const updatedProviders = providers.map(p => {
      return {
        ...p,
        messages: (p.messages || []).filter(m => m.id !== messageId)
      };
    });
    
    setProviders(updatedProviders);
    showSuccess('Request cancelled successfully');
  };

  // Admin functions
  const adminDeleteMessage = (messageId) => {
    const updatedMessages = interestedMessages.filter(m => m.id !== messageId);
    setInterestedMessages(updatedMessages);
    
    const updatedProviders = providers.map(p => {
      return {
        ...p,
        messages: (p.messages || []).filter(m => m.id !== messageId)
      };
    });
    
    setProviders(updatedProviders);
    showSuccess('Message deleted successfully');
  };

  const adminSendMessage = (providerId, message, allowReply) => {
    const newNotification = {
      id: Date.now().toString(),
      providerId,
      message,
      allowReply,
      timestamp: new Date().toISOString(),
      isRead: false,
      replies: []
    };
    
    setNotifications([...notifications, newNotification]);
    showSuccess('Message sent to provider');
    setMessageText('');
  };

  const adminBroadcastMessage = (targetService, targetTown, message, allowReply) => {
    let targetProviders = [...providers];
    
    if (targetService) {
      targetProviders = targetProviders.filter(p => p.service === targetService);
    }
    
    if (targetTown) {
      targetProviders = targetProviders.filter(p => p.town === targetTown);
    }
    
    const newNotifications = targetProviders.map(provider => ({
      id: Date.now().toString() + '-' + provider.id,
      providerId: provider.id,
      message,
      allowReply,
      timestamp: new Date().toISOString(),
      isRead: false,
      replies: []
    }));
    
    setNotifications([...notifications, ...newNotifications]);
    showSuccess(`Message broadcast to ${targetProviders.length} providers`);
    setMessageText('');
  };

  const adminDeleteProvider = (providerId) => {
    const updatedProviders = providers.filter(p => p.id !== providerId);
    setProviders(updatedProviders);
    showSuccess('Provider deleted successfully');
  };

  const adminBlockProvider = (providerId) => {
    if (blockedProviders.includes(providerId)) {
      setBlockedProviders(blockedProviders.filter(id => id !== providerId));
      showSuccess('Provider unblocked successfully');
    } else {
      setBlockedProviders([...blockedProviders, providerId]);
      showSuccess('Provider blocked successfully');
    }
  };

  const adminAddToAdvertisements = (providerId) => {
    const provider = providers.find(p => p.id === providerId);
    if (!provider) return;
    
    if (advertisements.some(ad => ad.id === providerId)) {
      showError('This provider is already in advertisements');
      return;
    }
    
    setAdvertisements([...advertisements, provider]);
    showSuccess('Provider added to advertisements');
  };

  const adminRemoveFromAdvertisements = (providerId) => {
    const updatedAds = advertisements.filter(ad => ad.id !== providerId);
    setAdvertisements(updatedAds);
    showSuccess('Provider removed from advertisements');
  };

  const adminAddService = (service) => {
    if (services.includes(service)) {
      showError('This service already exists');
      return;
    }
    
    setServices([...services, service]);
    showSuccess('Service added successfully');
  };

  const adminDeleteService = (service) => {
    const updatedServices = services.filter(s => s !== service);
    setServices(updatedServices);
    showSuccess('Service deleted successfully');
  };

  const adminAddTown = (town) => {
    if (towns.includes(town)) {
      showError('This town already exists');
      return;
    }
    
    setTowns([...towns, town]);
    showSuccess('Town added successfully');
  };

  const adminDeleteTown = (town) => {
    const updatedTowns = towns.filter(t => t !== town);
    setTowns(updatedTowns);
    showSuccess('Town deleted successfully');
  };

  // Provider functions
  const providerUpdateProfile = (updatedData) => {
    const updatedProviders = providers.map(p => {
      if (p.id === user.id) {
        return { ...p, ...updatedData };
      }
      return p;
    });
    
    setProviders(updatedProviders);
    setUser({ ...user, ...updatedData });
    showSuccess('Profile updated successfully');
  };

  const providerReplyToAdmin = (notificationId, reply) => {
    const updatedNotifications = notifications.map(n => {
      if (n.id === notificationId) {
        return {
          ...n,
          replies: [...(n.replies || []), {
            id: Date.now().toString(),
            message: reply,
            timestamp: new Date().toISOString()
          }]
        };
      }
      return n;
    });
    
    setNotifications(updatedNotifications);
    showSuccess('Reply sent to admin');
  };

  // Handle advertisement request
  const handleAdRequest = (formData) => {
    const newRequest = {
      id: Date.now().toString(),
      name: formData.name,
      number: formData.number,
      message: formData.message,
      timestamp: new Date().toISOString()
    };
    
    setAdRequests([newRequest, ...adRequests]);
    showSuccess('Advertisement request sent successfully');
  };

  // Render different pages based on current state
  const renderPage = () => {
    switch (page) {
      case 'home':
        return <HomePage 
          setPage={setPage} 
          advertisements={advertisements}
          handleInterested={handleInterested}
          handleAdRequest={handleAdRequest}
        />;
      case 'login':
        return <LoginPage 
          handleLogin={handleLogin} 
          setPage={setPage} 
        />;
      case 'register':
        return <RegisterPage 
          handleRegister={handleRegister} 
          services={services}
          towns={towns}
          setPage={setPage}
        />;
      case 'findService':
        return <FindServicePage 
          searchParams={searchParams}
          setSearchParams={setSearchParams}
          handleSearch={handleSearch}
          searchResults={searchResults}
          services={services}
          towns={towns}
          handleRateProvider={handleRateProvider}
          handleInterested={handleInterested}
          setPage={setPage}
        />;
      case 'interestedForm':
        return <InterestedFormPage 
          selectedProvider={selectedProvider}
          submitInterestedForm={submitInterestedForm}
          cancelInterestedRequest={cancelInterestedRequest}
          setPage={setPage}
        />;
      case 'providerProfile':
        return <ProviderProfilePage 
          user={user}
          providerUpdateProfile={providerUpdateProfile}
          notifications={notifications.filter(n => n.providerId === user.id)}
          providerReplyToAdmin={providerReplyToAdmin}
          handleLogout={handleLogout}
          services={services}
          towns={towns}
        />;
      case 'adminPanel':
        return <AdminPanel 
          adminView={adminView}
          setAdminView={setAdminView}
          providers={providers}
          interestedMessages={interestedMessages}
          notifications={notifications}
          services={services}
          towns={towns}
          advertisements={advertisements}
          blockedProviders={blockedProviders}
          adRequests={adRequests}
          adminDeleteMessage={adminDeleteMessage}
          adminSendMessage={adminSendMessage}
          adminBroadcastMessage={adminBroadcastMessage}
          adminDeleteProvider={adminDeleteProvider}
          adminBlockProvider={adminBlockProvider}
          adminAddToAdvertisements={adminAddToAdvertisements}
          adminRemoveFromAdvertisements={adminRemoveFromAdvertisements}
          adminAddService={adminAddService}
          adminDeleteService={adminDeleteService}
          adminAddTown={adminAddTown}
          adminDeleteTown={adminDeleteTown}
          messageText={messageText}
          setMessageText={setMessageText}
          allowReply={allowReply}
          setAllowReply={setAllowReply}
          handleLogout={handleLogout}
        />;
      default:
        return <HomePage setPage={setPage} />;
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 text-gray-900">
      {/* Header */}
      <header className="bg-blue-600 text-white p-4 shadow-md">
        <div className="container mx-auto flex justify-between items-center">
          <h1 className="text-2xl font-bold cursor-pointer" onClick={() => setPage('home')}>
            <Home className="inline mr-2" size={24} />
            Freelance Services
          </h1>
          <div className="flex space-x-4">
            {!user && !isAdmin && (
              <>
                <button 
                  onClick={() => setPage('findService')}
                  className="flex items-center bg-orange-500 hover:bg-orange-600 px-4 py-2 rounded-md transition-colors"
                >
                  <Search className="mr-2" size={18} />
                  Find Service
                </button>
                <button 
                  onClick={() => setPage('login')}
                  className="flex items-center bg-white text-blue-600 hover:bg-gray-100 px-4 py-2 rounded-md transition-colors"
                >
                  <LogIn className="mr-2" size={18} />
                  Login
                </button>
              </>
            )}
            {(user || isAdmin) && (
              <button 
                onClick={handleLogout}
                className="flex items-center bg-white text-blue-600 hover:bg-gray-100 px-4 py-2 rounded-md transition-colors"
              >
                <LogIn className="mr-2" size={18} />
                Logout
              </button>
            )}
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="container mx-auto p-4">
        {/* Error and Success Messages */}
        {error && (
          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
            {error}
          </div>
        )}
        {success && (
          <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4">
            {success}
          </div>
        )}

        {/* Page Content */}
        {renderPage()}
      </main>

      {/* Footer */}
      <footer className="bg-gray-800 text-white p-6 mt-8">
        <div className="container mx-auto">
          <div className="flex flex-col md:flex-row justify-between">
            <div className="mb-4 md:mb-0">
              <h3 className="text-xl font-bold mb-2">Freelance Services</h3>
              <p className="text-gray-300">Connect with skilled service providers in your area</p>
            </div>
            <div>
              <h4 className="text-lg font-semibold mb-2">Quick Links</h4>
              <ul className="text-gray-300">
                <li className="mb-1 cursor-pointer hover:text-orange-400" onClick={() => setPage('home')}>Home</li>
                <li className="mb-1 cursor-pointer hover:text-orange-400" onClick={() => setPage('findService')}>Find Service</li>
                <li className="mb-1 cursor-pointer hover:text-orange-400" onClick={() => setPage('login')}>Login</li>
                <li className="mb-1 cursor-pointer hover:text-orange-400" onClick={() => setPage('register')}>Register</li>
              </ul>
            </div>
          </div>
          <div className="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400">
            &copy; {new Date().getFullYear()} Freelance Services. All rights reserved.
          </div>
        </div>
      </footer>
    </div>
  );
}

// Home Page Component
function HomePage({ setPage, advertisements = [], handleInterested, handleAdRequest }) {
  const [adRequestForm, setAdRequestForm] = useState({ name: '', number: '', message: '' });
  const [showAdForm, setShowAdForm] = useState(false);

  const handleAdFormSubmit = (e) => {
    e.preventDefault();
    handleAdRequest(adRequestForm);
    setAdRequestForm({ name: '', number: '', message: '' });
    setShowAdForm(false);
  };

  return (
    <div className="flex flex-col items-center justify-center py-8">
      <h2 className="text-3xl font-bold mb-8 text-center">Welcome to Freelance Services</h2>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-4xl mb-12">
        <div 
          onClick={() => setPage('findService')}
          className="bg-blue-600 text-white rounded-lg shadow-lg p-8 text-center cursor-pointer hover:bg-blue-700 transition-colors flex flex-col items-center justify-center"
        >
          <Search size={48} className="mb-4" />
          <h3 className="text-2xl font-bold mb-2">Find Service</h3>
          <p>Search for service providers in your area</p>
        </div>
        
        <div 
          onClick={() => setPage('login')}
          className="bg-orange-500 text-white rounded-lg shadow-lg p-8 text-center cursor-pointer hover:bg-orange-600 transition-colors flex flex-col items-center justify-center"
        >
          <User size={48} className="mb-4" />
          <h3 className="text-2xl font-bold mb-2">Login</h3>
          <p>Access your service provider account</p>
        </div>
      </div>
      
      {/* Advertisements Section */}
      {advertisements.length > 0 && (
        <div className="w-full max-w-6xl mt-8">
          <h3 className="text-2xl font-bold mb-6 text-center">Featured Service Providers</h3>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {advertisements.map(ad => (
              <div key={ad.id} className="bg-white rounded-lg shadow-md overflow-hidden">
                {ad.pictures && ad.pictures.length > 0 ? (
                  <div className="h-48 overflow-hidden">
                    <img 
                      src={ad.pictures[0]} 
                      alt={ad.name} 
                      className="w-full h-full object-cover"
                    />
                  </div>
                ) : (
                  <div className="h-48 bg-gray-200 flex items-center justify-center">
                    <User size={64} className="text-gray-400" />
                  </div>
                )}
                
                <div className="p-4">
                  <h4 className="text-xl font-semibold mb-2">{ad.name}</h4>
                  <div className="flex items-center mb-2">
                    <Briefcase size={16} className="text-blue-600 mr-2" />
                    <span>{ad.service}</span>
                  </div>
                  <div className="flex items-center mb-2">
                    <MapPin size={16} className="text-blue-600 mr-2" />
                    <span>{ad.town}</span>
                  </div>
                  <div className="flex items-center mb-3">
                    <DollarSign size={16} className="text-blue-600 mr-2" />
                    <span>From {ad.minimumPayment} CFA</span>
                  </div>
                  
                  {ad.rating > 0 && (
                    <div className="flex items-center mb-3">
                      {[...Array(5)].map((_, i) => (
                        <Star 
                          key={i}
                          size={16} 
                          className={i < Math.round(ad.rating) ? "text-yellow-500 fill-yellow-500" : "text-gray-300"}
                        />
                      ))}
                      <span className="ml-2 text-sm text-gray-600">({ad.ratingCount} ratings)</span>
                    </div>
                  )}
                  
                  <button 
                    onClick={() => handleInterested(ad)}
                    className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition-colors"
                  >
                    Interested
                  </button>
                </div>
              </div>
            ))}
          </div>
          
          <div className="text-center mt-6">
            <button 
              onClick={() => setShowAdForm(true)}
              className="text-blue-600 hover:text-blue-800 underline"
            >
              Want to advertise? Click here
            </button>
          </div>
        </div>
      )}
      
      {/* Ad Request Form Modal */}
      {showAdForm && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-md">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-bold">Request Advertisement</h3>
              <button onClick={() => setShowAdForm(false)}>
                <X size={24} />
              </button>
            </div>
            
            <form onSubmit={handleAdFormSubmit}>
              <div className="mb-4">
                <label className="block text-gray-700 mb-2">Your Name</label>
                <input
                  type="text"
                  value={adRequestForm.name}
                  onChange={(e) => setAdRequestForm({...adRequestForm, name: e.target.value})}
                  className="w-full p-2 border border-gray-300 rounded"
                  required
                />
              </div>
              
              <div className="mb-4">
                <label className="block text-gray-700 mb-2">WhatsApp Number</label>
                <input
                  type="text"
                  value={adRequestForm.number}
                  onChange={(e) => setAdRequestForm({...adRequestForm, number: e.target.value})}
                  className="w-full p-2 border border-gray-300 rounded"
                  required
                />
              </div>
              
              <div className="mb-4">
                <label className="block text-gray-700 mb-2">Message</label>
                <textarea
                  value={adRequestForm.message}
                  onChange={(e) => setAdRequestForm({...adRequestForm, message: e.target.value})}
                  className="w-full p-2 border border-gray-300 rounded"
                  rows="4"
                  required
                ></textarea>
              </div>
              
              <button
                type="submit"
                className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition-colors"
              >
                Submit Request
              </button>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}

// Login Page Component
function LoginPage({ handleLogin, setPage }) {
  const [formData, setFormData] = useState({ username: '', password: '' });
  
  const handleSubmit = (e) => {
    e.preventDefault();
    handleLogin(formData.username, formData.password);
  };
  
  return (
    <div className="flex justify-center items-center py-8">
      <div className="bg-white rounded-lg shadow-md p-8 w-full max-w-md">
        <h2 className="text-2xl font-bold mb-6 text-center">Login</h2>
        
        <form onSubmit={handleSubmit}>
          <div className="mb-4">
            <label className="block text-gray-700 mb-2">Username</label>
            <input
              type="text"
              value={formData.username}
              onChange={(e) => setFormData({...formData, username: e.target.value})}
              className="w-full p-3 border border-gray-300 rounded"
              required
            />
          </div>
          
          <div className="mb-6">
            <label className="block text-gray-700 mb-2">Password</label>
            <input
              type="password"
              value={formData.password}
              onChange={(e) => setFormData({...formData, password: e.target.value})}
              className="w-full p-3 border border-gray-300 rounded"
              required
            />
          </div>
          
          <button
            type="submit"
            className="w-full bg-blue-600 text-white py-3 rounded hover:bg-blue-700 transition-colors mb-4"
          >
            Login
          </button>
          
          <div className="text-center">
            <p className="text-gray-600">
              Don't have an account?{' '}
              <button
                type="button"
                onClick={() => setPage('register')}
                className="text-blue-600 hover:underline"
              >
                Register
              </button>
            </p>
          </div>
        </form>
      </div>
    </div>
  );
}

// Register Page Component
function RegisterPage({ handleRegister, services, towns, setPage }) {
  const [formData, setFormData] = useState({
    name: '',
    password: '',
    confirmPassword: '',
    age: '',
    gender: '',
    town: '',
    service: '',
    minimumPayment: '',
    whatsappNumber: '',
    pictures: [],
    quarter: ''
  });
  
  const [pictureFiles, setPictureFiles] = useState([]);
  const [picturePreview, setPicturePreview] = useState([]);
  
  const handleSubmit = (e) => {
    e.preventDefault();
    handleRegister(formData);
  };
  
  const handlePictureChange = (e) => {
    if (e.target.files) {
      const filesArray = Array.from(e.target.files).slice(0, 4); // Max 4 pictures
      
      // Create preview URLs
      const previewArray = filesArray.map(file => URL.createObjectURL(file));
      setPicturePreview([...picturePreview, ...previewArray].slice(0, 4));
      setPictureFiles([...pictureFiles, ...filesArray].slice(0, 4));
      
      // Convert to base64 for storage
      const promises = filesArray.map(file => {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.onload = (e) => resolve(e.target.result);
          reader.onerror = reject;
          reader.readAsDataURL(file);
        });
      });
      
      Promise.all(promises).then(base64files => {
        setFormData({
          ...formData,
          pictures: [...(formData.pictures || []), ...base64files].slice(0, 4)
        });
      });
    }
  };
  
  const removePicture = (index) => {
    const updatedPreviews = [...picturePreview];
    const updatedFiles = [...pictureFiles];
    const updatedPictures = [...formData.pictures];
    
    updatedPreviews.splice(index, 1);
    updatedFiles.splice(index, 1);
    updatedPictures.splice(index, 1);
    
    setPicturePreview(updatedPreviews);
    setPictureFiles(updatedFiles);
    setFormData({...formData, pictures: updatedPictures});
  };
  
  return (
    <div className="flex justify-center py-8">
      <div className="bg-white rounded-lg shadow-md p-8 w-full max-w-2xl">
        <h2 className="text-2xl font-bold mb-6 text-center">Service Provider Registration</h2>
        
        <form onSubmit={handleSubmit}>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
              <label className="block text-gray-700 mb-2">Name</label>
              <input
                type="text"
                value={formData.name}
                onChange={(e) => setFormData({...formData, name: e.target.value})}
                className="w-full p-3 border border-gray-300 rounded"
                required
              />
            </div>
            
            <div>
              <label className="block text-gray-700 mb-2">Age</label>
              <input
                type="number"
                value={formData.age}
                onChange={(e) => setFormData({...formData, age: e.target.value})}
                className="w-full p-3 border border-gray-300 rounded"
                required
                min="18"
              />
            </div>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
              <label className="block text-gray-700 mb-2">Password</label>
              <input
                type="password"
                value={formData.password}
                onChange={(e) => setFormData({...formData, password: e.target.value})}
                className="w-full p-3 border border-gray-300 rounded"
                required
              />
            </div>
            
            <div>
              <label className="block text-gray-700 mb-2">Confirm Password</label>
              <input
                type="password"
                value={formData.confirmPassword}
                onChange={(e) => setFormData({...formData, confirmPassword: e.target.value})}
                className="w-full p-3 border border-gray-300 rounded"
                required
              />
            </div>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
              <label className="block text-gray-700 mb-2">Gender</label>
              <select
                value={formData.gender}
                onChange={(e) => setFormData({...formData, gender: e.target.value})}
                className="w-full p-3 border border-gray-300 rounded"
                required
              >
                <option value="">Select Gender</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="Other">Other</option>
              </select>
            </div>
            
            <div>
              <label className="block text-gray-700 mb-2">Town</label>
              <select
                value={formData.town}
                onChange={(e) => setFormData({...formData, town: e.target.value})}
                className="w-full p-3 border border-gray-300 rounded"
                required
              >
                <option value="">Select Town</option>
                {towns.map(town => (
                  <option key={town} value={town}>{town}</option>
                ))}
              </select>
            </div>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
              <label className="block text-gray-700 mb-2">Service</label>
              <select
                value={formData.service}
                onChange={(e) => setFormData({...formData, service: e.target.value})}
                className="w-full p-3 border border-gray-300 rounded"
                required
              >
                <option value="">Select Service</option>
                {services.map(service => (
                  <option key={service} value={service}>{service}</option>
                ))}
              </select>
            </div>
            
            <div>
              <label className="block text-gray-700 mb-2">Minimum Payment (CFA)</label>
              <input
                type="number"
                value={formData.minimumPayment}
                onChange={(e) => setFormData({...formData, minimumPayment: e.target.value})}
                className="w-full p-3 border border-gray-300 rounded"
                required
                min="0"
                max="999999"
              />
            </div>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
              <label className="block text-gray-700 mb-2">WhatsApp Number</label>
              <input
                type="text"
                value={formData.whatsappNumber}
                onChange={(e) => setFormData({...formData, whatsappNumber: e.target.value})}
                className="w-full p-3 border border-gray-300 rounded"
                required
              />
            </div>
            
            <div>
              <label className="block text-gray-700 mb-2">Quarter (Optional)</label>
              <input
                type="text"
                value={formData.quarter}
                onChange={(e) => setFormData({...formData, quarter: e.target.value})}
                className="w-full p-3 border border-gray-300 rounded"
              />
            </div>
          </div>
          
          <div className="mb-6">
            <label className="block text-gray-700 mb-2">
              Pictures (Max 4, Optional)
              <span className="text-red-500 ml-1 text-sm">
                Warning: Do not upload photos showing personal details like phone numbers
              </span>
            </label>
            
            <div className="flex flex-wrap gap-4 mb-3">
              {picturePreview.map((url, index) => (
                <div key={index} className="relative">
                  <img 
                    src={url} 
                    alt={`Preview ${index}`} 
                    className="w-24 h-24 object-cover rounded border border-gray-300" 
                  />
                  <button
                    type="button"
                    onClick={() => removePicture(index)}
                    className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1"
                  >
                    <X size={16} />
                  </button>
                </div>
              ))}
              
              {picturePreview.length < 4 && (
                <label className="w-24 h-24 border-2 border-dashed border-gray-300 rounded flex items-center justify-center cursor-pointer">
                  <Upload size={24} className="text-gray-400" />
                  <input
                    type="file"
                    onChange={handlePictureChange}
                    className="hidden"
                    accept="image/*"
                    multiple={picturePreview.length < 3}
                  />
                </label>
              )}
            </div>
          </div>
          
          <button
            type="submit"
            className="w-full bg-blue-600 text-white py-3 rounded hover:bg-blue-700 transition-colors mb-4"
          >
            Register
          </button>
          
          <div className="text-center">
            <p className="text-gray-600">
              Already have an account?{' '}
              <button
                type="button"
                onClick={() => setPage('login')}
                className="text-blue-600 hover:underline"
              >
                Login
              </button>
            </p>
          </div>
        </form>
      </div>
    </div>
  );
}

// Find Service Page Component
function FindServicePage({ 
  searchParams, 
  setSearchParams, 
  handleSearch, 
  searchResults, 
  services, 
  towns,
  handleRateProvider,
  handleInterested,
  setPage
}) {
  const [searchType, setSearchType] = useState('general');
  const [showRatingModal, setShowRatingModal] = useState(false);
  const [selectedProvider, setSelectedProvider] = useState(null);
  const [ratingValue, setRatingValue] = useState(5);
  
  const handleSubmit = (e) => {
    e.preventDefault();
    if (searchType === 'general') {
      handleSearch(searchParams.query);
    } else {
      handleSearch('', 'townAndService');
    }
  };
  
  const openRatingModal = (provider) => {
    setSelectedProvider(provider);
    setShowRatingModal(true);
  };
  
  const submitRating = () => {
    handleRateProvider(selectedProvider.id, ratingValue);
    setShowRatingModal(false);
  };
  
  return (
    <div className="py-6">
      <h2 className="text-2xl font-bold mb-6 text-center">Find Service Providers</h2>
      
      <div className="bg-white rounded-lg shadow-md p-6 mb-8">
        <div className="flex mb-4">
          <button
            className={`flex-1 py-2 ${searchType === 'general' ? 'bg-blue-600 text-white' : 'bg-gray-200'} rounded-l`}
            onClick={() => setSearchType('general')}
          >
            General Search
          </button>
          <button
            className={`flex-1 py-2 ${searchType === 'townAndService' ? 'bg-blue-600 text-white' : 'bg-gray-200'} rounded-r`}
            onClick={() => setSearchType('townAndService')}
          >
            Find by Town and Service
          </button>
        </div>
        
        <form onSubmit={handleSubmit}>
          {searchType === 'general' ? (
            <div className="mb-4">
              <div className="relative">
                <input
                  type="text"
                  value={searchParams.query}
                  onChange={(e) => setSearchParams({...searchParams, query: e.target.value})}
                  placeholder="Search by name, service, or town..."
                  className="w-full p-3 pr-12 border border-gray-300 rounded"
                  required
                />
                <button
                  type="submit"
                  className="absolute right-2 top-1/2 transform -translate-y-1/2 text-blue-600"
                >
                  <Search size={24} />
                </button>
              </div>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
              <div>
                <label className="block text-gray-700 mb-2">Town</label>
                <select
                  value={searchParams.town}
                  onChange={(e) => setSearchParams({...searchParams, town: e.target.value})}
                  className="w-full p-3 border border-gray-300 rounded"
                  required
                >
                  <option value="">Select Town</option>
                  {towns.map(town => (
                    <option key={town} value={town}>{town}</option>
                  ))}
                </select>
              </div>
              
              <div>
                <label className="block text-gray-700 mb-2">Service</label>
                <select
                  value={searchParams.service}
                  onChange={(e) => setSearchParams({...searchParams, service: e.target.value})}
                  className="w-full p-3 border border-gray-300 rounded"
                  required
                >
                  <option value="">Select Service</option>
                  {services.map(service => (
                    <option key={service} value={service}>{service}</option>
                  ))}
                </select>
              </div>
              
              <div className="md:col-span-2">
                <button
                  type="submit"
                  className="w-full bg-blue-600 text-white py-3 rounded hover:bg-blue-700 transition-colors"
                  disabled={!searchParams.town || !searchParams.service}
                >
                  Search
                </button>
              </div>
            </div>
          )}
        </form>
      </div>
      
      {/* Search Results */}
      {searchResults.length > 0 ? (
        <div>
          <h3 className="text-xl font-semibold mb-4">Search Results ({searchResults.length})</h3>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {searchResults.map(provider => (
              <div key={provider.id} className="bg-white rounded-lg shadow-md overflow-hidden">
                {provider.pictures && provider.pictures.length > 0 ? (
                  <div className="h-48 overflow-hidden">
                    <img 
                      src={provider.pictures[0]} 
                      alt={provider.name} 
                      className="w-full h-full object-cover"
                    />
                  </div>
                ) : (
                  <div className="h-48 bg-gray-200 flex items-center justify-center">
                    <User size={64} className="text-gray-400" />
                  </div>
                )}
                
                <div className="p-4">
                  <h4 className="text-xl font-semibold mb-2">{provider.name}</h4>
                  <div className="flex items-center mb-2">
                    <Briefcase size={16} className="text-blue-600 mr-2" />
                    <span>{provider.service}</span>
                  </div>
                  <div className="flex items-center mb-2">
                    <MapPin size={16} className="text-blue-600 mr-2" />
                    <span>{provider.town}</span>
                  </div>
                  <div className="flex items-center mb-3">
                    <DollarSign size={16} className="text-blue-600 mr-2" />
                    <span>From {provider.minimumPayment} CFA</span>
                  </div>
                  
                  <div className="flex items-center justify-between mb-3">
                    <div className="flex items-center">
                      {[...Array(5)].map((_, i) => (
                        <Star 
                          key={i}
                          size={16} 
                          className={i < Math.round(provider.rating) ? "text-yellow-500 fill-yellow-500" : "text-gray-300"}
                        />
                      ))}
                      <span className="ml-2 text-sm text-gray-600">
                        ({provider.ratingCount} ratings)
                      </span>
                    </div>
                    
                    <button 
                      onClick={() => openRatingModal(provider)}
                      className="text-blue-600 text-sm hover:underline"
                    >
                      Rate
                    </button>
                  </div>
                  
                  {provider.pictures && provider.pictures.length > 1 && (
                    <div className="flex gap-2 mb-3 overflow-x-auto pb-2">
                      {provider.pictures.slice(1).map((pic, index) => (
                        <img 
                          key={index} 
                          src={pic} 
                          alt={`${provider.name} ${index + 2}`}
                          className="w-16 h-16 object-cover rounded"
                        />
                      ))}
                    </div>
                  )}
                  
                  <button 
                    onClick={() => handleInterested(provider)}
                    className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition-colors"
                  >
                    Interested
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      ) : (
        <div className="text-center text-gray-500 py-8">
          {searchType === 'general' && searchParams.query ? 
            "No results found. Try a different search term." : 
            "Search for service providers using the form above."}
        </div>
      )}
      
      {/* Rating Modal */}
      {showRatingModal && selectedProvider && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-md">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-bold">Rate {selectedProvider.name}</h3>
              <button onClick={() => setShowRatingModal(false)}>
                <X size={24} />
              </button>
            </div>
            
            <div className="flex justify-center mb-6">
              {[1, 2, 3, 4, 5].map(star => (
                <Star 
                  key={star}
                  size={32} 
                  onClick={() => setRatingValue(star)}
                  className={`cursor-pointer ${star <= ratingValue ? "text-yellow-500 fill-yellow-500" : "text-gray-300"}`}
                />
              ))}
            </div>
            
            <button
              onClick={submitRating}
              className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition-colors"
            >
              Submit Rating
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

// Interested Form Page Component
function InterestedFormPage({ selectedProvider, submitInterestedForm, cancelInterestedRequest, setPage }) {
  const [formData, setFormData] = useState({
    providerId: selectedProvider?.id || '',
    providerName: selectedProvider?.name || '',
    whatsappNumber: '',
    message: ''
  });
  
  const handleSubmit = (e) => {
    e.preventDefault();
    submitInterestedForm(formData);
  };
  
  return (
    <div className="flex justify-center py-8">
      <div className="bg-white rounded-lg shadow-md p-8 w-full max-w-md">
        <h2 className="text-2xl font-bold mb-2 text-center">Contact Service Provider</h2>
        <p className="text-center text-gray-600 mb-6">
          Send your contact details to {selectedProvider?.name}
        </p>
        
        <form onSubmit={handleSubmit}>
          <div className="mb-4">
            <label className="block text-gray-700 mb-2">Your WhatsApp Number</label>
            <input
              type="text"
              value={formData.whatsappNumber}
              onChange={(e) => setFormData({...formData, whatsappNumber: e.target.value})}
              className="w-full p-3 border border-gray-300 rounded"
              required
            />
          </div>
          
          <div className="mb-6">
            <label className="block text-gray-700 mb-2">Message</label>
            <textarea
              value={formData.message}
              onChange={(e) => setFormData({...formData, message: e.target.value})}
              className="w-full p-3 border border-gray-300 rounded"
              rows="4"
              required
            ></textarea>
          </div>
          
          <div className="flex gap-4">
            <button
              type="submit"
              className="flex-1 bg-blue-600 text-white py-3 rounded hover:bg-blue-700 transition-colors"
            >
              Send
            </button>
            
            <button
              type="button"
              onClick={() => setPage('findService')}
              className="flex-1 bg-gray-300 text-gray-800 py-3 rounded hover:bg-gray-400 transition-colors"
            >
              Cancel
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

// Provider Profile Page Component
function ProviderProfilePage({ 
  user, 
  providerUpdateProfile, 
  notifications, 
  providerReplyToAdmin,
  handleLogout,
  services,
  towns
}) {
  const [activeTab, setActiveTab] = useState('profile');
  const [editMode, setEditMode] = useState(false);
  const [formData, setFormData] = useState({...user});
  const [replyText, setReplyText] = useState('');
  const [replyingTo, setReplyingTo] = useState(null);
  const [pictureFiles, setPictureFiles] = useState([]);
  const [picturePreview, setPicturePreview] = useState(user.pictures || []);
  
  const handleSubmit = (e) => {
    e.preventDefault();
    providerUpdateProfile(formData);
    setEditMode(false);
  };
  
  const handlePictureChange = (e) => {
    if (e.target.files) {
      const filesArray = Array.from(e.target.files).slice(0, 4 - (picturePreview.length || 0)); // Max 4 pictures
      
      // Create preview URLs for new files
      const previewArray = filesArray.map(file => URL.createObjectURL(file));
      setPicturePreview([...picturePreview, ...previewArray].slice(0, 4));
      setPictureFiles([...pictureFiles, ...filesArray].slice(0, 4));
      
      // Convert to base64 for storage
      const promises = filesArray.map(file => {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.onload = (e) => resolve(e.target.result);
          reader.onerror = reject;
          reader.readAsDataURL(file);
        });
      });
      
      Promise.all(promises).then(base64files => {
        setFormData({
          ...formData,
          pictures: [...(formData.pictures || []), ...base64files].slice(0, 4)
        });
      });
    }
  };
  
  const removePicture = (index) => {
    const updatedPreviews = [...picturePreview];
    const updatedFiles = [...pictureFiles];
    const updatedPictures = [...formData.pictures];
    
    updatedPreviews.splice(index, 1);
    updatedFiles.splice(index, 1);
    updatedPictures.splice(index, 1);
    
    setPicturePreview(updatedPreviews);
    setPictureFiles(updatedFiles);
    setFormData({...formData, pictures: updatedPictures});
  };
  
  const handleReply = (notification) => {
    if (replyText.trim() === '') return;
    
    providerReplyToAdmin(notification.id, replyText);
    setReplyText('');
    setReplyingTo(null);
  };
  
  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleString();
  };
  
  return (
    <div className="py-6">
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <div className="bg-blue-600 text-white p-4">
          <div className="flex justify-between items-center">
            <h2 className="text-2xl font-bold">Service Provider Dashboard</h2>
            <button 
              onClick={handleLogout}
              className="bg-white text-blue-600 px-4 py-2 rounded hover:bg-gray-100 transition-colors"
            >
              Logout
            </button>
          </div>
        </div>
        
        <div className="flex border-b">
          <button
            className={`flex-1 py-3 px-4 ${activeTab === 'profile' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-600'}`}
            onClick={() => setActiveTab('profile')}
          >
            <User className="inline mr-2" size={18} />
            Profile
          </button>
          <button
            className={`flex-1 py-3 px-4 ${activeTab === 'notifications' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-600'}`}
            onClick={() => setActiveTab('notifications')}
          >
            <Bell className="inline mr-2" size={18} />
            Notifications
            {notifications.filter(n => !n.isRead).length > 0 && (
              <span className="ml-2 bg-red-500 text-white text-xs rounded-full px-2 py-1">
                {notifications.filter(n => !n.isRead).length}
              </span>
            )}
          </button>
          <button
            className={`flex-1 py-3 px-4 ${activeTab === 'messages' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-600'}`}
            onClick={() => setActiveTab('messages')}
          >
            <MessageSquare className="inline mr-2" size={18} />
            Messages
            {user.messages && user.messages.length > 0 && (
              <span className="ml-2 bg-blue-500 text-white text-xs rounded-full px-2 py-1">
                {user.messages.length}
              </span>
            )}
          </button>
        </div>
        
        <div className="p-6">
          {activeTab === 'profile' && (
            <div>
              {!editMode ? (
                <div>
                  <div className="flex justify-between mb-6">
                    <h3 className="text-xl font-semibold">Profile Information</h3>
                    <button
                      onClick={() => setEditMode(true)}
                      className="flex items-center text-blue-600 hover:text-blue-800"
                    >
                      <Edit size={18} className="mr-1" />
                      Edit Profile
                    </button>
                  </div>
                  
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <div className="mb-4">
                        <h4 className="text-gray-500 mb-1">Name</h4>
                        <p className="text-lg">{user.name}</p>
                      </div>
                      
                      <div className="mb-4">
                        <h4 className="text-gray-500 mb-1">Age</h4>
                        <p className="text-lg">{user.age}</p>
                      </div>
                      
                      <div className="mb-4">
                        <h4 className="text-gray-500 mb-1">Gender</h4>
                        <p className="text-lg">{user.gender}</p>
                      </div>
                      
                      <div className="mb-4">
                        <h4 className="text-gray-500 mb-1">Town</h4>
                        <p className="text-lg">{user.town}</p>
                      </div>
                      
                      <div className="mb-4">
                        <h4 className="text-gray-500 mb-1">Service</h4>
                        <p className="text-lg">{user.service}</p>
                      </div>
                    </div>
                    
                    <div>
                      <div className="mb-4">
                        <h4 className="text-gray-500 mb-1">Minimum Payment</h4>
                        <p className="text-lg">{user.minimumPayment} CFA</p>
                      </div>
                      
                      <div className="mb-4">
                        <h4 className="text-gray-500 mb-1">WhatsApp Number</h4>
                        <p className="text-lg">{user.whatsappNumber}</p>
                      </div>
                      
                      {user.quarter && (
                        <div className="mb-4">
                          <h4 className="text-gray-500 mb-1">Quarter</h4>
                          <p className="text-lg">{user.quarter}</p>
                        </div>
                      )}
                      
                      <div className="mb-4">
                        <h4 className="text-gray-500 mb-1">Rating</h4>
                        <div className="flex items-center">
                          {[...Array(5)].map((_, i) => (
                            <Star 
                              key={i}
                              size={18} 
                              className={i < Math.round(user.rating) ? "text-yellow-500 fill-yellow-500" : "text-gray-300"}
                            />
                          ))}
                          <span className="ml-2 text-gray-600">
                            ({user.ratingCount} ratings)
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  {user.pictures && user.pictures.length > 0 && (
                    <div className="mt-6">
                      <h4 className="text-gray-500 mb-3">Pictures</h4>
                      <div className="flex flex-wrap gap-4">
                        {user.pictures.map((pic, index) => (
                          <img 
                            key={index} 
                            src={pic} 
                            alt={`${user.name} ${index + 1}`}
                            className="w-32 h-32 object-cover rounded border border-gray-300"
                          />
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              ) : (
                <form onSubmit={handleSubmit}>
                  <div className="flex justify-between mb-6">
                    <h3 className="text-xl font-semibold">Edit Profile</h3>
                    <div>
                      <button
                        type="button"
                        onClick={() => {
                          setFormData({...user});
                          setPicturePreview(user.pictures || []);
                          setEditMode(false);
                        }}
                        className="text-gray-600 hover:text-gray-800 mr-4"
                      >
                        Cancel
                      </button>
                      <button
                        type="submit"
                        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors"
                      >
                        Save Changes
                      </button>
                    </div>
                  </div>
                  
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                      <label className="block text-gray-700 mb-2">Name</label>
                      <input
                        type="text"
                        value={formData.name}
                        onChange={(e) => setFormData({...formData, name: e.target.value})}
                        className="w-full p-3 border border-gray-300 rounded"
                        required
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 mb-2">Age</label>
                      <input
                        type="number"
                        value={formData.age}
                        onChange={(e) => setFormData({...formData, age: e.target.value})}
                        className="w-full p-3 border border-gray-300 rounded"
                        required
                        min="18"
                      />
                    </div>
                  </div>
                  
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                      <label className="block text-gray-700 mb-2">Gender</label>
                      <select
                        value={formData.gender}
                        onChange={(e) => setFormData({...formData, gender: e.target.value})}
                        className="w-full p-3 border border-gray-300 rounded"
                        required
                      >
                        <option value="">Select Gender</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                        <option value="Other">Other</option>
                      </select>
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 mb-2">Town</label>
                      <select
                        value={formData.town}
                        onChange={(e) => setFormData({...formData, town: e.target.value})}
                        className="w-full p-3 border border-gray-300 rounded"
                        required
                      >
                        <option value="">Select Town</option>
                        {towns.map(town => (
                          <option key={town} value={town}>{town}</option>
                        ))}
                      </select>
                    </div>
                  </div>
                  
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                      <label className="block text-gray-700 mb-2">Service</label>
                      <select
                        value={formData.service}
                        onChange={(e) => setFormData({...formData, service: e.target.value})}
                        className="w-full p-3 border border-gray-300 rounded"
                        required
                      >
                        <option value="">Select Service</option>
                        {services.map(service => (
                          <option key={service} value={service}>{service}</option>
                        ))}
                      </select>
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 mb-2">Minimum Payment (CFA)</label>
                      <input
                        type="number"
                        value={formData.minimumPayment}
                        onChange={(e) => setFormData({...formData, minimumPayment: e.target.value})}
                        className="w-full p-3 border border-gray-300 rounded"
                        required
                        min="0"
                        max="999999"
                      />
                    </div>
                  </div>
                  
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                      <label className="block text-gray-700 mb-2">WhatsApp Number</label>
                      <input
                        type="text"
                        value={formData.whatsappNumber}
                        onChange={(e) => setFormData({...formData, whatsappNumber: e.target.value})}
                        className="w-full p-3 border border-gray-300 rounded"
                        required
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 mb-2">Quarter (Optional)</label>
                      <input
                        type="text"
                        value={formData.quarter}
                        onChange={(e) => setFormData({...formData, quarter: e.target.value})}
                        className="w-full p-3 border border-gray-300 rounded"
                      />
                    </div>
                  </div>
                  
                  <div className="mb-6">
                    <label className="block text-gray-700 mb-2">
                      Pictures (Max 4, Optional)
                      <span className="text-red-500 ml-1 text-sm">
                        Warning: Do not upload photos showing personal details like phone numbers
                      </span>
                    </label>
                    
                    <div className="flex flex-wrap gap-4 mb-3">
                      {picturePreview.map((url, index) => (
                        <div key={index} className="relative">
                          <img 
                            src={url} 
                            alt={`Preview ${index}`} 
                            className="w-24 h-24 object-cover rounded border border-gray-300" 
                          />
                          <button
                            type="button"
                            onClick={() => removePicture(index)}
                            className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1"
                          >
                            <X size={16} />
                          </button>
                        </div>
                      ))}
                      
                      {picturePreview.length < 4 && (
                        <label className="w-24 h-24 border-2 border-dashed border-gray-300 rounded flex items-center justify-center cursor-pointer">
                          <Upload size={24} className="text-gray-400" />
                          <input
                            type="file"
                            onChange={handlePictureChange}
                            className="hidden"
                            accept="image/*"
                            multiple={picturePreview.length < 3}
                          />
                        </label>
                      )}
                    </div>
                  </div>
                </form>
              )}
            </div>
          )}
          
          {activeTab === 'notifications' && (
            <div>
              <h3 className="text-xl font-semibold mb-6">Admin Notifications</h3>
              
              {notifications.length > 0 ? (
                <div className="space-y-4">
                  {notifications.map(notification => (
                    <div key={notification.id} className="border rounded-lg p-4">
                      <div className="flex justify-between items-start mb-2">
                        <div>
                          <p className="font-medium">Admin Message</p>
                          <p className="text-sm text-gray-500">{formatDate(notification.timestamp)}</p>
                        </div>
                        {!notification.isRead && (
                          <span className="bg-red-500 text-white text-xs px-2 py-1 rounded-full">
                            New
                          </span>
                        )}
                      </div>
                      
                      <p className="mb-4">{notification.message}</p>
                      
                      {notification.replies && notification.replies.length > 0 && (
                        <div className="bg-gray-50 p-3 rounded mb-4">
                          <p className="text-sm text-gray-500 mb-2">Your replies:</p>
                          {notification.replies.map(reply => (
                            <div key={reply.id} className="mb-2 last:mb-0">
                              <p>{reply.message}</p>
                              <p className="text-xs text-gray-500">{formatDate(reply.timestamp)}</p>
                            </div>
                          ))}
                        </div>
                      )}
                      
                      {notification.allowReply && (
                        <div>
                          {replyingTo === notification.id ? (
                            <div>
                              <textarea
                                value={replyText}
                                onChange={(e) => setReplyText(e.target.value)}
                                className="w-full p-3 border border-gray-300 rounded mb-2"
                                rows="3"
                                placeholder="Type your reply..."
                              ></textarea>
                              
                              <div className="flex justify-end space-x-2">
                                <button
                                  onClick={() => {
                                    setReplyText('');
                                    setReplyingTo(null);
                                  }}
                                  className="px-4 py-2 text-gray-600 hover:text-gray-800"
                                >
                                  Cancel
                                </button>
                                <button
                                  onClick={() => handleReply(notification)}
                                  className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
                                >
                                  Send Reply
                                </button>
                              </div>
                            </div>
                          ) : (
                            <button
                              onClick={() => setReplyingTo(notification.id)}
                              className="text-blue-600 hover:text-blue-800"
                            >
                              Reply to Admin
                            </button>
                          )}
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-gray-500 text-center py-8">
                  No notifications from admin yet.
                </p>
              )}
            </div>
          )}
          
          {activeTab === 'messages' && (
            <div>
              <h3 className="text-xl font-semibold mb-6">Messages from Interested Clients</h3>
              
              {user.messages && user.messages.length > 0 ? (
                <div className="space-y-4">
                  {user.messages.map(message => (
                    <div key={message.id} className="border rounded-lg p-4">
                      <div className="flex justify-between items-start mb-2">
                        <p className="font-medium">Client Inquiry</p>
                        <p className="text-sm text-gray-500">{formatDate(message.timestamp)}</p>
                      </div>
                      
                      <div className="mb-3">
                        <p className="text-gray-700">{message.message}</p>
                      </div>
                      
                      <div className="bg-gray-50 p-3 rounded">
                        <div className="flex items-center">
                          <Phone size={16} className="text-blue-600 mr-2" />
                          <span>WhatsApp: {message.visitorNumber}</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-gray-500 text-center py-8">
                  No messages from interested clients yet.
                </p>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// Admin Panel Component
function AdminPanel({ 
  adminView, 
  setAdminView, 
  providers, 
  interestedMessages, 
  notifications,
  services,
  towns,
  advertisements,
  blockedProviders,
  adRequests,
  adminDeleteMessage,
  adminSendMessage,
  adminBroadcastMessage,
  adminDeleteProvider,
  adminBlockProvider,
  adminAddToAdvertisements,
  adminRemoveFromAdvertisements,
  adminAddService,
  adminDeleteService,
  adminAddTown,
  adminDeleteTown,
  messageText,
  setMessageText,
  allowReply,
  setAllowReply,
  handleLogout
}) {
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [selectedProvider, setSelectedProvider] = useState(null);
  const [newService, setNewService] = useState('');
  const [newTown, setNewTown] = useState('');
  const [broadcastType, setBroadcastType] = useState('service');
  const [broadcastService, setBroadcastService] = useState('');
  const [broadcastTown, setBroadcastTown] = useState('');
  const [specificTown, setSpecificTown] = useState(false);
  
  const handleSearch = () => {
    if (!searchQuery.trim()) return;
    
    let results = [];
    
    if (adminView === 'messageProvider' || adminView === 'manageProviders' || adminView === 'advert') {
      // Search by name, town, or phone number
      results = providers.filter(p => 
        p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        p.town.toLowerCase().includes(searchQuery.toLowerCase()) ||
        p.whatsappNumber.includes(searchQuery)
      );
    }
    
    setSearchResults(results);
  };
  
  const handleSendMessage = () => {
    if (!messageText.trim() || !selectedProvider) return;
    
    adminSendMessage(selectedProvider.id, messageText, allowReply);
    setMessageText('');
    setSelectedProvider(null);
  };
  
  const handleBroadcast = () => {
    if (!messageText.trim()) return;
    
    let targetService = null;
    let targetTown = null;
    
    if (broadcastType === 'service') {
      targetService = broadcastService;
      if (specificTown) {
        targetTown = broadcastTown;
      }
    } else {
      targetTown = broadcastTown;
    }
    
    adminBroadcastMessage(targetService, targetTown, messageText, allowReply);
    setMessageText('');
    setBroadcastService('');
    setBroadcastTown('');
    setSpecificTown(false);
  };
  
  const handleAddService = () => {
    if (!newService.trim()) return;
    adminAddService(newService);
    setNewService('');
  };
  
  const handleAddTown = () => {
    if (!newTown.trim()) return;
    adminAddTown(newTown);
    setNewTown('');
  };
  
  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleString();
  };
  
  return (
    <div className="py-6">
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <div className="bg-blue-600 text-white p-4">
          <div className="flex justify-between items-center">
            <h2 className="text-2xl font-bold">Admin Panel</h2>
            <button 
              onClick={handleLogout}
              className="bg-white text-blue-600 px-4 py-2 rounded hover:bg-gray-100 transition-colors"
            >
              Logout
            </button>
          </div>
        </div>
        
        <div className="flex flex-wrap border-b">
          <button
            className={`py-3 px-4 ${adminView === 'dashboard' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-600'}`}
            onClick={() => setAdminView('dashboard')}
          >
            Dashboard
          </button>
          <button
            className={`py-3 px-4 ${adminView === 'interestedPersons' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-600'}`}
            onClick={() => setAdminView('interestedPersons')}
          >
            Interested Persons
          </button>
          <button
            className={`py-3 px-4 ${adminView === 'messageProvider' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-600'}`}
            onClick={() => {
              setAdminView('messageProvider');
              setSearchResults([]);
              setSearchQuery('');
              setSelectedProvider(null);
            }}
          >
            Message Provider
          </button>
          <button
            className={`py-3 px-4 ${adminView === 'providersMessages' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-600'}`}
            onClick={() => setAdminView('providersMessages')}
          >
            Providers Messages
          </button>
          <button
            className={`py-3 px-4 ${adminView === 'manageProviders' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-600'}`}
            onClick={() => {
              setAdminView('manageProviders');
              setSearchResults([]);
              setSearchQuery('');
            }}
          >
            Manage Providers
          </button>
          <button
            className={`py-3 px-4 ${adminView === 'advert' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-600'}`}
            onClick={() => {
              setAdminView('advert');
              setSearchResults([]);
              setSearchQuery('');
            }}
          >
            Advert
          </button>
          <button
            className={`py-3 px-4 ${adminView === 'broadcast' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-600'}`}
            onClick={() => setAdminView('broadcast')}
          >
            Broadcast
          </button>
          <button
            className={`py-3 px-4 ${adminView === 'manageServices' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-600'}`}
            onClick={() => setAdminView('manageServices')}
          >
            Manage Services
          </button>
          <button
            className={`py-3 px-4 ${adminView === 'manageTowns' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-600'}`}
            onClick={() => setAdminView('manageTowns')}
          >
            Manage Towns
          </button>
        </div>
        
        <div className="p-6">
          {adminView === 'dashboard' && (
            <div>
              <h3 className="text-xl font-semibold mb-6">Admin Dashboard</h3>
              
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                  <h4 className="text-lg font-medium mb-2">Total Providers</h4>
                  <p className="text-3xl font-bold text-blue-600">{providers.length}</p>
                </div>
                
                <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                  <h4 className="text-lg font-medium mb-2">Total Services</h4>
                  <p className="text-3xl font-bold text-green-600">{services.length}</p>
                </div>
                
                <div className="bg-orange-50 border border-orange-200 rounded-lg p-4">
                  <h4 className="text-lg font-medium mb-2">Total Towns</h4>
                  <p className="text-3xl font-bold text-orange-600">{towns.length}</p>
                </div>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="border rounded-lg p-4">
                  <h4 className="text-lg font-medium mb-4">Recent Messages</h4>
                  
                  {interestedMessages.slice(0, 5).map(message => (
                    <div key={message.id} className="border-b last:border-b-0 py-3">
                      <div className="flex justify-between">
                        <p className="font-medium">{message.providerName}</p>
                        <p className="text-sm text-gray-500">{formatDate(message.timestamp)}</p>
                      </div>
                      <p className="text-gray-600 truncate">{message.message}</p>
                    </div>
                  ))}
                  
                  {interestedMessages.length === 0 && (
                    <p className="text-gray-500 text-center py-4">No messages yet</p>
                  )}
                </div>
                
                <div className="border rounded-lg p-4">
                  <h4 className="text-lg font-medium mb-4">Ad Requests</h4>
                  
                  {adRequests.slice(0, 5).map(request => (
                    <div key={request.id} className="border-b last:border-b-0 py-3">
                      <div className="flex justify-between">
                        <p className="font-medium">{request.name}</p>
                        <p className="text-sm text-gray-500">{formatDate(request.timestamp)}</p>
                      </div>
                      <p className="text-gray-600 truncate">{request.message}</p>
                    </div>
                  ))}
                  
                  {adRequests.length === 0 && (
                    <p className="text-gray-500 text-center py-4">No ad requests yet</p>
                  )}
                </div>
              </div>
            </div>
          )}
          
          {adminView === 'interestedPersons' && (
            <div>
              <h3 className="text-xl font-semibold mb-6">Interested Persons</h3>
              
              {interestedMessages.length > 0 ? (
                <div className="space-y-4">
                  {interestedMessages.map(message => (
                    <div key={message.id} className="border rounded-lg p-4">
                      <div className="flex justify-between items-start mb-2">
                        <div>
                          <p className="font-medium">{message.providerName}</p>
                          <div className="flex text-sm text-gray-500 space-x-2">
                            <span>{message.town}</span>
                            <span>•</span>
                            <span>{message.service}</span>
                          </div>
                        </div>
                        <p className="text-sm text-gray-500">{formatDate(message.timestamp)}</p>
                      </div>
                      
                      <div className="mb-3">
                        <p className="text-gray-700">{message.message}</p>
                      </div>
                      
                      <div className="flex justify-between items-center">
                        <div className="bg-gray-50 p-2 rounded">
                          <div className="flex items-center">
                            <Phone size={16} className="text-blue-600 mr-2" />
                            <span>Visitor: {message.visitorNumber}</span>
                          </div>
                        </div>
                        
                        <button
                          onClick={() => adminDeleteMessage(message.id)}
                          className="text-red-600 hover:text-red-800"
                        >
                          <Trash size={18} />
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-gray-500 text-center py-8">
                  No interested persons messages yet.
                </p>
              )}
            </div>
          )}
          
          {adminView === 'messageProvider' && (
            <div>
              <h3 className="text-xl font-semibold mb-6">Message Provider</h3>
              
              <div className="mb-6">
                <div className="flex mb-4">
                  <input
                    type="text"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    placeholder="Search provider by name, town, or phone number..."
                    className="flex-1 p-3 border border-gray-300 rounded-l"
                  />
                  <button
                    onClick={handleSearch}
                    className="bg-blue-600 text-white px-4 py-2 rounded-r hover:bg-blue-700 transition-colors"
                  >
                    Search
                  </button>
                </div>
                
                {searchResults.length > 0 && (
                  <div className="border rounded-lg overflow-hidden">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Name
                          </th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Town
                          </th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Service
                          </th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Phone
                          </th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Action
                          </th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {searchResults.map(provider => (
                          <tr key={provider.id}>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm font-medium text-gray-900">{provider.name}</div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-500">{provider.town}</div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-500">{provider.service}</div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-500">{provider.whatsappNumber}</div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <button
                                onClick={() => setSelectedProvider(provider)}
                                className="text-blue-600 hover:text-blue-800"
                              >
                                Select
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </div>
              
              {selectedProvider && (
                <div className="border rounded-lg p-4">
                  <div className="mb-4">
                    <h4 className="font-medium">Sending message to: {selectedProvider.name}</h4>
                    <p className="text-sm text-gray-500">
                      {selectedProvider.service} in {selectedProvider.town}
                    </p>
                  </div>
                  
                  <div className="mb-4">
                    <textarea
                      value={messageText}
                      onChange={(e) => setMessageText(e.target.value)}
                      className="w-full p-3 border border-gray-300 rounded"
                      rows="4"
                      placeholder="Type your message..."
                    ></textarea>
                  </div>
                  
                  <div className="flex items-center mb-4">
                    <input
                      type="checkbox"
                      id="allowReply"
                      checked={allowReply}
                      onChange={(e) => setAllowReply(e.target.checked)}
                      className="mr-2"
                    />
                    <label htmlFor="allowReply">Allow provider to reply</label>
                  </div>
                  
                  <div className="flex justify-end">
                    <button
                      onClick={() => setSelectedProvider(null)}
                      className="mr-2 px-4 py-2 text-gray-600 hover:text-gray-800"
                    >
                      Cancel
                    </button>
                    <button
                      onClick={handleSendMessage}
                      className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
                      disabled={!messageText.trim()}
                    >
                      Send Message
                    </button>
                  </div>
                </div>
              )}
            </div>
          )}
          
          {adminView === 'providersMessages' && (
            <div>
              <h3 className="text-xl font-semibold mb-6">Provider Messages</h3>
              
              {notifications.filter(n => n.replies && n.replies.length > 0).length > 0 ? (
                <div className="space-y-4">
                  {notifications
                    .filter(n => n.replies && n.replies.length > 0)
                    .sort((a, b) => new Date(b.replies[b.replies.length - 1].timestamp) - new Date(a.replies[a.replies.length - 1].timestamp))
                    .map(notification => {
                      const provider = providers.find(p => p.id === notification.providerId);
                      return (
                        <div key={notification.id} className="border rounded-lg p-4">
                          <div className="flex justify-between items-start mb-2">
                            <div>
                              <p className="font-medium">{provider ? provider.name : 'Unknown Provider'}</p>
                              {provider && (
                                <div className="flex text-sm text-gray-500 space-x-2">
                                  <span>{provider.town}</span>
                                  <span>•</span>
                                  <span>{provider.service}</span>
                                </div>
                              )}
                            </div>
                          </div>
                          
                          <div className="bg-gray-50 p-3 rounded mb-3">
                            <p className="text-sm text-gray-500 mb-1">Your message:</p>
                            <p>{notification.message}</p>
                          </div>
                          
                          <div className="space-y-2">
                            <p className="text-sm text-gray-500">Provider replies:</p>
                            {notification.replies.map(reply => (
                              <div key={reply.id} className="border-l-4 border-blue-500 pl-3 py-1">
                                <p>{reply.message}</p>
                                <p className="text-xs text-gray-500">{formatDate(reply.timestamp)}</p>
                              </div>
                            ))}
                          </div>
                        </div>
                      );
                    })}
                </div>
              ) : (
                <p className="text-gray-500 text-center py-8">
                  No provider replies yet.
                </p>
              )}
            </div>
          )}
          
          {adminView === 'manageProviders' && (
            <div>
              <h3 className="text-xl font-semibold mb-6">Manage Providers</h3>
              
              <div className="mb-6">
                <div className="flex mb-4">
                  <input
                    type="text"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    placeholder="Search provider by name, town, or phone number..."
                    className="flex-1 p-3 border border-gray-300 rounded-l"
                  />
                  <button
                    onClick={handleSearch}
                    className="bg-blue-600 text-white px-4 py-2 rounded-r hover:bg-blue-700 transition-colors"
                  >
                    Search
                  </button>
                </div>
                
                {searchResults.length > 0 && (
                  <div className="border rounded-lg overflow-hidden">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Name
                          </th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Town
                          </th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Service
                          </th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Phone
                          </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">
                        {searchResults.map(provider => (
                          <tr key={provider.id}>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm font-medium text-gray-900">{provider.name}</div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-500">{provider.town}</div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-500">{provider.service}</div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-500">{provider.whatsappNumber}</div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                              <button
                                onClick={() => adminBlockProvider(provider.id)}
                                className={`mr-3 ${blockedProviders.includes(provider.id) ? 'text-green-600 hover:text-green-800' : 'text-orange-600 hover:text-orange-800'}`}
                              >
                                {blockedProviders.includes(provider.id) ? 'Unblock' : 'Block'}
                              </button>
                              <button
                                onClick={() => adminDeleteProvider(provider.id)}
                                className="text-red-600 hover:text-red-800"
                              >
                                Delete
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </div>
            </div>
          )}
          
          {adminView === 'advert' && (
            <div>
              <h3 className="text-xl font-semibold mb-6">Manage Advertisements</h3>
              
              <div className="mb-6">
                <h4 className="font-medium mb-2">Add Provider to Advertisements</h4>
                <div className="flex mb-4">
                  <input
                    type="text"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    placeholder="Search provider by name..."
                    className="flex-1 p-3 border border-gray-300 rounded-l"
                  />
                  <button
                    onClick={handleSearch}
                    className="bg-blue-600 text-white px-4 py-2 rounded-r hover:bg-blue-700 transition-colors"
                  >
                    Search
                  </button>
                </div>
                
                {searchResults.length > 0 && (
                  <div className="border rounded-lg overflow-hidden mb-6">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Name
                          </th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Town
                          </th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Service
                          </th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Rating
                          </th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Action
                          </th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {searchResults.map(provider => (
                          <tr key={provider.id}>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm font-medium text-gray-900">{provider.name}</div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-500">{provider.town}</div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-500">{provider.service}</div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="flex items-center">
                                {[...Array(5)].map((_, i) => (
                                  <Star 
                                    key={i}
                                    size={14} 
                                    className={i < Math.round(provider.rating) ? "text-yellow-500 fill-yellow-500" : "text-gray-300"}
                                  />
                                ))}
                                <span className="ml-1 text-xs text-gray-500">
                                  ({provider.ratingCount})
                                </span>
                              </div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <button
                                onClick={() => adminAddToAdvertisements(provider.id)}
                                className="text-blue-600 hover:text-blue-800"
                                disabled={advertisements.some(ad => ad.id === provider.id)}
                              >
                                {advertisements.some(ad => ad.id === provider.id) ? 'Already Added' : 'Add to Adverts'}
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </div>
              
              <div>
                <h4 className="font-medium mb-4">Current Advertisements</h4>
                
                {advertisements.length > 0 ? (
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {advertisements.map(ad => (
                      <div key={ad.id} className="border rounded-lg overflow-hidden">
                        {ad.pictures && ad.pictures.length > 0 ? (
                          <div className="h-40 overflow-hidden">
                            <img 
                              src={ad.pictures[0]} 
                              alt={ad.name} 
                              className="w-full h-full object-cover"
                            />
                          </div>
                        ) : (
                          <div className="h-40 bg-gray-200 flex items-center justify-center">
                            <User size={48} className="text-gray-400" />
                          </div>
                        )}
                        
                        <div className="p-4">
                          <div className="flex justify-between items-start">
                            <h5 className="font-medium">{ad.name}</h5>
                            <button
                              onClick={() => adminRemoveFromAdvertisements(ad.id)}
                              className="text-red-600 hover:text-red-800"
                            >
                              <X size={18} />
                            </button>
                          </div>
                          
                          <div className="text-sm text-gray-500 mt-1">
                            {ad.service} in {ad.town}
                          </div>
                          
                          <div className="flex items-center mt-2">
                            {[...Array(5)].map((_, i) => (
                              <Star 
                                key={i}
                                size={14} 
                                className={i < Math.round(ad.rating) ? "text-yellow-500 fill-yellow-500" : "text-gray-300"}
                              />
                            ))}
                            <span className="ml-1 text-xs text-gray-500">
                              ({ad.ratingCount})
                            </span>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p className="text-gray-500 text-center py-4">
                    No advertisements yet. Add providers to the advertisement section.
                  </p>
                )}
              </div>
              
              <div className="mt-8">
                <h4 className="font-medium mb-4">Advertisement Requests</h4>
                
                {adRequests.length > 0 ? (
                  <div className="space-y-4">
                    {adRequests.map(request => (
                      <div key={request.id} className="border rounded-lg p-4">
                        <div className="flex justify-between items-start mb-2">
                          <div>
                            <p className="font-medium">{request.name}</p>
                            <p className="text-sm text-gray-500">{request.number}</p>
                          </div>
                          <p className="text-sm text-gray-500">{formatDate(request.timestamp)}</p>
                        </div>
                        
                        <p className="text-gray-700 mb-3">{request.message}</p>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p className="text-gray-500 text-center py-4">
                    No advertisement requests yet.
                  </p>
                )}
              </div>
            </div>
          )}
          
          {adminView === 'broadcast' && (
            <div>
              <h3 className="text-xl font-semibold mb-6">Broadcast Message</h3>
              
              <div className="mb-4">
                <div className="flex mb-4">
                  <button
                    className={`flex-1 py-2 ${broadcastType === 'service' ? 'bg-blue-600 text-white' : 'bg-gray-200'} rounded-l`}
                    onClick={() => setBroadcastType('service')}
                  >
                    By Service
                  </button>
                  <button
                    className={`flex-1 py-2 ${broadcastType === 'town' ? 'bg-blue-600 text-white' : 'bg-gray-200'} rounded-r`}
                    onClick={() => setBroadcastType('town')}
                  >
                    By Town
                  </button>
                </div>
                
                {broadcastType === 'service' ? (
                  <div>
                    <div className="mb-4">
                      <label className="block text-gray-700 mb-2">Select Service</label>
                      <select
                        value={broadcastService}
                        onChange={(e) => setBroadcastService(e.target.value)}
                        className="w-full p-3 border border-gray-300 rounded"
                        required
                      >
                        <option value="">Select Service</option>
                        {services.map(service => (
                          <option key={service} value={service}>{service}</option>
                        ))}
                      </select>
                    </div>
                    
                    <div className="flex items-center mb-4">
                      <input
                        type="checkbox"
                        id="specificTown"
                        checked={specificTown}
                        onChange={(e) => setSpecificTown(e.target.checked)}
                        className="mr-2"
                      />
                      <label htmlFor="specificTown">Specify a town</label>
                    </div>
                    
                    {specificTown && (
                      <div className="mb-4">
                        <label className="block text-gray-700 mb-2">Select Town</label>
                        <select
                          value={broadcastTown}
                          onChange={(e) => setBroadcastTown(e.target.value)}
                          className="w-full p-3 border border-gray-300 rounded"
                          required
                        >
                          <option value="">Select Town</option>
                          {towns.map(town => (
                            <option key={town} value={town}>{town}</option>
                          ))}
                        </select>
                      </div>
                    )}
                  </div>
                ) : (
                  <div className="mb-4">
                    <label className="block text-gray-700 mb-2">Select Town</label>
                    <select
                      value={broadcastTown}
                      onChange={(e) => setBroadcastTown(e.target.value)}
                      className="w-full p-3 border border-gray-300 rounded"
                      required
                    >
                      <option value="">Select Town</option>
                      {towns.map(town => (
                        <option key={town} value={town}>{town}</option>
                      ))}
                    </select>
                  </div>
                )}
              </div>
              
              <div className="mb-4">
                <label className="block text-gray-700 mb-2">Message</label>
                <textarea
                  value={messageText}
                  onChange={(e) => setMessageText(e.target.value)}
                  className="w-full p-3 border border-gray-300 rounded"
                  rows="4"
                  placeholder="Type your broadcast message..."
                  required
                ></textarea>
              </div>
              
              <div className="flex items-center mb-4">
                <input
                  type="checkbox"
                  id="broadcastAllowReply"
                  checked={allowReply}
                  onChange={(e) => setAllowReply(e.target.checked)}
                  className="mr-2"
                />
                <label htmlFor="broadcastAllowReply">Allow providers to reply</label>
              </div>
              
              <button
                onClick={handleBroadcast}
                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
                disabled={
                  !messageText.trim() || 
                  (broadcastType === 'service' && !broadcastService) ||
                  (broadcastType === 'town' && !broadcastTown) ||
                  (broadcastType === 'service' && specificTown && !broadcastTown)
                }
              >
                Send Broadcast
              </button>
            </div>
          )}
          
          {adminView === 'manageServices' && (
            <div>
              <h3 className="text-xl font-semibold mb-6">Manage Services</h3>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <h4 className="font-medium mb-4">Add New Service</h4>
                  
                  <div className="flex mb-4">
                    <input
                      type="text"
                      value={newService}
                      onChange={(e) => setNewService(e.target.value)}
                      placeholder="Enter new service name..."
                      className="flex-1 p-3 border border-gray-300 rounded-l"
                    />
                    <button
                      onClick={handleAddService}
                      className="bg-blue-600 text-white px-4 py-2 rounded-r hover:bg-blue-700 transition-colors"
                      disabled={!newService.trim()}
                    >
                      Add
                    </button>
                  </div>
                </div>
                
                <div>
                  <h4 className="font-medium mb-4">Current Services</h4>
                  
                  <div className="border rounded-lg overflow-hidden">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Service Name
                          </th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Action
                          </th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {services.map(service => (
                          <tr key={service}>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-900">{service}</div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <button
                                onClick={() => adminDeleteService(service)}
                                className="text-red-600 hover:text-red-800"
                              >
                                Delete
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          )}
          
          {adminView === 'manageTowns' && (
            <div>
              <h3 className="text-xl font-semibold mb-6">Manage Towns</h3>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <h4 className="font-medium mb-4">Add New Town</h4>
                  
                  <div className="flex mb-4">
                    <input
                      type="text"
                      value={newTown}
                      onChange={(e) => setNewTown(e.target.value)}
                      placeholder="Enter new town name..."
                      className="flex-1 p-3 border border-gray-300 rounded-l"
                    />
                    <button
                      onClick={handleAddTown}
                      className="bg-blue-600 text-white px-4 py-2 rounded-r hover:bg-blue-700 transition-colors"
                      disabled={!newTown.trim()}
                    >
                      Add
                    </button>
                  </div>
                </div>
                
                <div>
                  <h4 className="font-medium mb-4">Current Towns</h4>
                  
                  <div className="border rounded-lg overflow-hidden">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Town Name
                          </th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Action
                          </th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {towns.map(town => (
                          <tr key={town}>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-900">{town}</div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <button
                                onClick={() => adminDeleteTown(town)}
                                className="text-red-600 hover:text-red-800"
                              >
                                Delete
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}