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

import { UserRole, ServiceCategory, ServiceDetail, MarketplaceJob, MarketplaceBid, Booking, MamaWallet, User } from './types';

import { Layout } from './components/Layout';

import { HeroAI } from './components/HeroAI';

import { CustomerDashboard } from './components/CustomerDashboard';

import { MamaDashboard } from './components/MamaDashboard';

import { SubscriptionPage } from './components/SubscriptionPage';

import { ServiceDetailsPage } from './components/ServiceDetailsPage';

import { LoginPage } from './components/LoginPage';

import { ProfilePage } from './components/ProfilePage';

import { ServiceExplorer } from './components/ServiceExplorer';

const App: React.FC = () => {

const [user, setUser] = useState<User | null>(null);

const [view, setView] = useState<'home' | 'subscriptions' | 'service-details' | 'login' | 'dashboard' | 'profile'>('home');

const [selectedService, setSelectedService] = useState<ServiceDetail | null>(null);

const [recommendedCategory, setRecommendedCategory] = useState<ServiceCategory | null>(null);

const [aiResponse, setAiResponse] = useState<any>(null);

const [marketplaceJobs, setMarketplaceJobs] = useState<MarketplaceJob[]>([]);

const [marketplaceBids, setMarketplaceBids] = useState<MarketplaceBid[]>([]);

const [directBookings, setDirectBookings] = useState<Booking[]>([]);

const [mamaWallet, setMamaWallet] = useState<MamaWallet>({

balance: 84500,

totalWithdrawn: 120000,

pendingPayout: 0,

transactions: [

{ id: 'tx_1', amount: 2200, type: 'credit', description: 'AC Service Payout', date: new Date().toISOString() }

]

});

const [isMamaPremium, setIsMamaPremium] = useState(false);

const MAMA_ID = user?.id || 'mama_current';

const handleWithdraw = (amount: number) => {

if (amount <= 0 || amount > mamaWallet.balance) return;

setMamaWallet(prev => ({

...prev,

balance: prev.balance - amount,

totalWithdrawn: prev.totalWithdrawn + amount,

transactions: [{ id: 'tx_' + Date.now(), amount, type: 'debit', description: 'Withdrawal', date: new Date().toISOString() }, ...prev.transactions]

}));

};

useEffect(() => {

const savedJobs = localStorage.getItem('expert_mama_jobs');

const savedBids = localStorage.getItem('expert_mama_bids');

const savedBookings = localStorage.getItem('expert_mama_bookings');

const savedWallet = localStorage.getItem('expert_mama_wallet');

const savedUser = localStorage.getItem('expert_mama_user');

if (savedJobs) setMarketplaceJobs(JSON.parse(savedJobs));

if (savedBids) setMarketplaceBids(JSON.parse(savedBids));

if (savedBookings) setDirectBookings(JSON.parse(savedBookings));

if (savedWallet) setMamaWallet(JSON.parse(savedWallet));

if (savedUser) setUser(JSON.parse(savedUser));

}, []);

useEffect(() => {

localStorage.setItem('expert_mama_jobs', JSON.stringify(marketplaceJobs));

localStorage.setItem('expert_mama_bids', JSON.stringify(marketplaceBids));

localStorage.setItem('expert_mama_bookings', JSON.stringify(directBookings));

localStorage.setItem('expert_mama_wallet', JSON.stringify(mamaWallet));

if (user) {

localStorage.setItem('expert_mama_user', JSON.stringify(user));

} else {

localStorage.removeItem('expert_mama_user');

}

}, [marketplaceJobs, marketplaceBids, directBookings, mamaWallet, user]);

const mamaActiveJobsCount = useMemo(() => {

if (!user || user.role !== UserRole.MAMA) return 0;

const activeDirect = directBookings.filter(b => b.mamaId === user.id && b.status === 'in-progress').length;

const activeMarket = marketplaceJobs.filter(j => j.selectedMamaId === user.id && j.status === 'in-progress').length;

return activeDirect + activeMarket;

}, [directBookings, marketplaceJobs, user]);

const maxCapacity = isMamaPremium ? 5 : 1;

const hasCapacity = mamaActiveJobsCount < maxCapacity;

const handleLoginSuccess = (loggedInUser: User) => {

setUser(loggedInUser);

setView('home');

};

const handleLogout = () => {

setUser(null);

setView('home');

localStorage.removeItem('expert_mama_user');

};

const handleRecommendation = (category: ServiceCategory, recommendation: any) => {

setRecommendedCategory(category);

setAiResponse(recommendation);

setView('home');

setTimeout(() => {

const el = document.getElementById('discovery-section');

if (el) el.scrollIntoView({ behavior: 'smooth' });

}, 100);

};

const postMarketplaceJob = (jobData: Partial<MarketplaceJob>) => {

if (!user) return setView('login');

const newJob: MarketplaceJob = {

id: 'job_' + Date.now(),

title: jobData.title || 'Untitled',

description: jobData.description || '',

category: jobData.category || ServiceCategory.CLEANING,

customerId: user.id,

customerName: user.name,

budget: jobData.budget || 0,

createdAt: new Date().toISOString(),

status: 'open'

};

setMarketplaceJobs([newJob, ...marketplaceJobs]);

setView('dashboard');

};

const placeMarketplaceBid = (jobId: string, bidData: Partial<MarketplaceBid>) => {

if (!user || user.role !== UserRole.MAMA) return;

if (!hasCapacity) return alert(`Capacity Reached!`);

const newBid: MarketplaceBid = {

id: 'bid_' + Date.now(),

jobId,

mamaId: user.id,

mamaName: user.name,

price: bidData.price || 0,

eta: bidData.eta || 'N/A',

note: bidData.note || '',

createdAt: new Date().toISOString(),

status: 'pending'

};

setMarketplaceBids([newBid, ...marketplaceBids]);

};

const selectMarketplaceBid = (jobId: string, bid: MarketplaceBid) => {

setMarketplaceJobs(prev => prev.map(j =>

j.id === jobId ? { ...j, status: 'pending-payment', selectedMamaId: bid.mamaId, selectedBidId: bid.id } : j

));

setMarketplaceBids(prev => prev.map(b =>

b.jobId === jobId ? { ...b, status: b.id === bid.id ? 'accepted' : 'rejected' } : b

));

setView('dashboard');

};

const confirmMarketplacePayment = (jobId: string) => {

setMarketplaceJobs(prev => prev.map(j =>

j.id === jobId ? { ...j, status: 'in-progress', unlockedContact: { phone: '01712-XXXXXX', address: 'Dhanmondi, Dhaka' } } : j

));

};

const completeMarketplaceJob = (jobId: string) => {

setMarketplaceJobs(prev => prev.map(j => j.id === jobId ? { ...j, status: 'completed' } : j));

};

const initiateDirectBooking = (service: ServiceDetail, mamaName: string) => {

if (!user) return setView('login');

const newBooking: Booking = {

id: 'bk_' + Date.now(),

serviceId: service.id,

serviceName: service.name,

category: service.category,

customerId: user.id,

customerName: user.name,

mamaId: 'mama_current',

mamaName,

status: 'pending-acceptance',

scheduledAt: 'ASAP',

location: 'Dhanmondi',

amount: service.price,

workflowType: 'DIRECT'

};

setDirectBookings([newBooking, ...directBookings]);

setView('dashboard');

};

const handleUpdateProfile = (updatedUser: User) => {

setUser(updatedUser);

};

const renderCurrentView = () => {

switch(view) {

case 'login':

return <LoginPage onLoginSuccess={handleLoginSuccess} onBack={() => setView('home')} />;

case 'profile':

return user ? (

<ProfilePage user={user} onUpdate={handleUpdateProfile} onBack={() => setView('home')} />

) : <LoginPage onLoginSuccess={handleLoginSuccess} onBack={() => setView('home')} />;

case 'dashboard':

if (!user) return <LoginPage onLoginSuccess={handleLoginSuccess} onBack={() => setView('home')} />;

return user.role === UserRole.MAMA ? (

<div className="max-w-7xl mx-auto px-4 py-12">

<MamaDashboard

directLeads={directBookings.filter(b => b.status === 'pending-acceptance')}

onAcceptLead={(id) => setDirectBookings(prev => prev.map(b => b.id === id ? { ...b, status: 'pending-payment' } : b))}

activeWork={[

...directBookings.filter(b => b.mamaId === MAMA_ID && ['pending-payment', 'in-progress', 'disputed'].includes(b.status)),

...marketplaceJobs.filter(j => j.selectedMamaId === MAMA_ID && ['pending-payment', 'in-progress', 'disputed'].includes(j.status))

]}

marketplaceJobs={marketplaceJobs}

myBids={marketplaceBids.filter(b => b.mamaId === user.id)}

onPlaceBid={placeMarketplaceBid}

mamaWallet={mamaWallet}

onWithdraw={handleWithdraw}

activeJobsCount={mamaActiveJobsCount}

maxCapacity={maxCapacity}

onUpgrade={() => setIsMamaPremium(true)}

isPremium={isMamaPremium}

/>

</div>

) : (

<CustomerDashboard

user={user}

activeBookings={directBookings.filter(b => b.customerId === user.id && b.status !== 'completed')}

marketplaceJobs={marketplaceJobs.filter(j => j.customerId === user.id)}

marketplaceBids={marketplaceBids}

onConfirmPayment={(id) => setDirectBookings(prev => prev.map(b => b.id === id ? { ...b, status: 'in-progress', unlockedContact: { phone: '01888-YYYYYY', address: 'Banani, Dhaka' } } : b))}

onMarkComplete={(id) => setDirectBookings(prev => prev.map(b => b.id === id ? { ...b, status: 'completed' } : b))}

onConfirmMarketplacePayment={confirmMarketplacePayment}

onCompleteMarketplaceJob={completeMarketplaceJob}

onRaiseMarketplaceDispute={(id) => setMarketplaceJobs(prev => prev.map(j => j.id === id ? { ...j, status: 'disputed' } : j))}

/>

);

case 'subscriptions':

return <SubscriptionPage />;

case 'service-details':

return selectedService ? (

<ServiceDetailsPage

service={selectedService}

onBack={() => { setView('home'); setSelectedService(null); }}

onSelectMama={(mamaName) => initiateDirectBooking(selectedService, mamaName)}

/>

) : null;

case 'home':

default:

return (

<>

<HeroAI onRecommendation={handleRecommendation} />

<div id="discovery-section">

<ServiceExplorer

recommendedCategory={recommendedCategory}

aiRecommendation={aiResponse}

onClearAI={() => { setRecommendedCategory(null); setAiResponse(null); }}

onServiceClick={(s) => { setSelectedService(s); setView('service-details'); }}

marketplaceJobs={marketplaceJobs}

marketplaceBids={marketplaceBids}

onPostMarketplaceJob={postMarketplaceJob}

onSelectMarketplaceBid={selectMarketplaceBid}

/>

</div>

</>

);

}

};

return (

<Layout

user={user}

onLoginClick={() => setView('login')}

onLogout={handleLogout}

onHeroClick={() => setView('subscriptions')}

currentView={view}

setView={(v) => { setView(v as any); setSelectedService(null); }}

>

{renderCurrentView()}

</Layout>

);

};

export default App;