/**
 * TaxiBook Partner - Main App
 * ============================
 * Main application component
 */

const AgentNamePrompt = ({ onConfirm }) => {
    const [name, setName] = useState('');
    const handleSubmit = (e) => {
        e.preventDefault();
        const trimmed = name.trim();
        if (!trimmed) return;
        localStorage.setItem('dash_agent_name', trimmed);
        onConfirm(trimmed);
    };
    return (
        <div className="min-h-screen gradient-bg flex items-center justify-center p-6">
            <div className="w-full max-w-md">
                <div className="text-center mb-10 animate-fade-in">
                    <div className="w-20 h-20 gradient-primary rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-primary-500/30">
                        <i className="fas fa-user-tag text-white text-3xl"></i>
                    </div>
                    <h1 className="text-3xl font-bold text-white mb-2">Qui utilise l'application ?</h1>
                    <p className="text-dark-400">Entrez votre prénom ou nom pour identifier vos commandes.</p>
                </div>
                <form onSubmit={handleSubmit} className="glass rounded-2xl p-8 shadow-2xl animate-slide-up">
                    <div className="mb-6">
                        <label className="block text-dark-600 text-sm font-semibold mb-2">Votre prénom ou nom</label>
                        <div className="relative">
                            <span className="absolute left-4 top-1/2 -translate-y-1/2 text-dark-400">
                                <i className="fas fa-user"></i>
                            </span>
                            <input
                                type="text"
                                value={name}
                                onChange={(e) => setName(e.target.value)}
                                className="w-full pl-12 pr-4 py-4 border-2 border-dark-200 rounded-xl focus:border-primary-500 focus:outline-none transition bg-white"
                                placeholder="Ex: Yannick"
                                autoFocus
                            />
                        </div>
                    </div>
                    <button
                        type="submit"
                        disabled={!name.trim()}
                        className="w-full py-4 gradient-primary text-white font-bold rounded-xl hover:opacity-90 transition disabled:opacity-50 flex items-center justify-center gap-3"
                    >
                        <i className="fas fa-arrow-right"></i>
                        Continuer
                    </button>
                </form>
            </div>
        </div>
    );
};

const App = () => {
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [partner, setPartner] = useState(null);
    const [agentName, setAgentName] = useState(localStorage.getItem('dash_agent_name') || '');
    const [currentView, setCurrentView] = useState('booking');
    const [packages, setPackages] = useState([]);
    const [vehicles, setVehicles] = useState([]);
    const [bookings, setBookings] = useState([]);
    const [stats, setStats] = useState(null);
    const [toast, setToast] = useState(null);
    const [loading, setLoading] = useState(true);

    // Check existing session
    useEffect(() => {
        const token = localStorage.getItem('partner_token');
        const partnerData = localStorage.getItem('partner_data');
        
        if (token && partnerData) {
            try {
                const parsed = JSON.parse(partnerData);
                setPartner(parsed);
                setIsAuthenticated(true);
                loadData();
            } catch (e) {
                window.partnerAPI.clearAuth();
            }
        }
        setLoading(false);
    }, []);

    const loadData = async () => {
        try {
            const [packagesRes, vehiclesRes, bookingsRes, profileRes, brandingRes] = await Promise.all([
                window.partnerAPI.getPackages(),
                window.partnerAPI.getVehicles(),
                window.partnerAPI.getBookings(),
                window.partnerAPI.getProfile(),
                window.partnerAPI.getBranding()
            ]);

            if (packagesRes.success) setPackages(packagesRes.data.packages || []);
            if (bookingsRes.success) setBookings(bookingsRes.data.bookings || []);
            if (profileRes.success) {
                setPartner(profileRes.data.partner);
                setStats(profileRes.data.stats);
            }
            
            // Merge onetouch images from branding into vehicles
            if (vehiclesRes.success) {
                const vList = vehiclesRes.data.vehicles || [];
                const b = brandingRes?.data || brandingRes || {};
                const onetouchMap = {
                    standard: b.onetouch_img_standard,
                    berline: b.onetouch_img_standard,
                    break: b.onetouch_img_break,
                    van: b.onetouch_img_van
                };
                const merged = vList.map(v => {
                    const onetouchImg = onetouchMap[v.code];
                    if (onetouchImg && onetouchImg.startsWith('http')) {
                        return { ...v, image_url: onetouchImg };
                    }
                    return v;
                });
                setVehicles(merged);
            }
        } catch (error) {
            console.error('Error loading data:', error);
            if (error.message === 'Session expirée') {
                setIsAuthenticated(false);
                setPartner(null);
                setToast({ message: 'Session expirée, veuillez vous reconnecter', type: 'error' });
            }
        }
    };

    const handleLogin = (partnerData) => {
        setPartner(partnerData);
        setIsAuthenticated(true);
        loadData();
    };

    const handleLogout = async () => {
        await window.partnerAPI.logout();
        setIsAuthenticated(false);
        setPartner(null);
        setPackages([]);
        setVehicles([]);
        setBookings([]);
        localStorage.removeItem('dash_agent_name');
        setAgentName('');
    };

    const handleBookingCreated = (booking) => {
        setBookings([booking, ...bookings]);
        loadData(); // Refresh all data
        // Rediriger vers l'onglet Carte après la réservation
        setCurrentView('map');
    };

    const handleCancelBooking = async (uid) => {
        if (!confirm('Voulez-vous vraiment annuler cette réservation ?')) return;
        
        try {
            const result = await window.partnerAPI.cancelBooking(uid);
            if (result.success) {
                setToast({ message: 'Réservation annulée', type: 'success' });
                loadData();
            } else {
                setToast({ message: result.error || 'Erreur', type: 'error' });
            }
        } catch (error) {
            setToast({ message: 'Erreur de connexion', type: 'error' });
        }
    };

    if (loading) {
        return (
            <div className="min-h-screen gradient-bg flex items-center justify-center">
                <Spinner size="lg" />
            </div>
        );
    }

    if (!isAuthenticated) {
        return (
            <>
                <LoginScreen onLogin={handleLogin} toast={toast} setToast={setToast} />
                {toast && <Toast {...toast} onClose={() => setToast(null)} />}
            </>
        );
    }

    if (!agentName) {
        return <AgentNamePrompt onConfirm={(n) => setAgentName(n)} />;
    }

    return (
        <div className="min-h-screen bg-dark-100">
            <Sidebar
                partner={partner}
                currentView={currentView}
                setCurrentView={setCurrentView}
                onLogout={handleLogout}
            />

            {/* Main Content */}
            <main className="ml-20 lg:ml-64 p-6 lg:p-8">
                <div className="flex gap-8">
                    {/* Main Area */}
                    <div className="flex-1">
                        {currentView === 'booking' && (
                            <BookingView
                                partner={partner}
                                packages={packages}
                                vehicles={vehicles}
                                agentName={agentName}
                                onBookingCreated={handleBookingCreated}
                                setToast={setToast}
                            />
                        )}
                        {currentView === 'packages' && <PackagesView packages={packages} />}
                        {currentView === 'history' && (
                            <HistoryView
                                bookings={bookings}
                                onCancelBooking={handleCancelBooking}
                                setToast={setToast}
                            />
                        )}
                        {currentView === 'rides' && (
                            <RidesView
                                bookings={bookings}
                                onCancelBooking={handleCancelBooking}
                                setToast={setToast}
                            />
                        )}
                        {currentView === 'map' && (
                            <MapView
                                bookings={bookings}
                                setToast={setToast}
                                onCancelBooking={handleCancelBooking}
                            />
                        )}
                        {currentView === 'minisites' && <MinisitesView partner={partner} setToast={setToast} />}
                        {currentView === 'cards' && <CardsView partner={partner} setToast={setToast} />}
                        {currentView === 'profile' && <ProfileView partner={partner} stats={stats} />}
                    </div>
                </div>
            </main>

            {toast && <Toast {...toast} onClose={() => setToast(null)} />}
        </div>
    );
};

// Render
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);