app.js

function App() {
    const [activeTab, setActiveTab] = React.useState('predictions');
    const [logs, setLogs] = useLocalStorage('fishingLogs', []);
    const [syncStatus, setSyncStatus] = React.useState({
        syncing: false,
        lastSynced: null,
        error: null
    });
    const { location, error: locationError, loading: locationLoading } = useGeolocation();
    const { 
        weatherData, 
        tideData, 
        prediction,
        selectedDate,
        forecastDays,
        setSelectedDate,
        loading: dataLoading, 
        error: dataError 
    } = useFishingData(location);

    // Setup offline/online status tracking
    const [isOnline, setIsOnline] = React.useState(navigator.onLine);
    const [showFeatureSuggestions, setShowFeatureSuggestions] = React.useState(false);
    
    React.useEffect(() => {
        const handleOnline = () => {
            setIsOnline(true);
            // Attempt to sync when coming back online
            LogManager.syncWhenOnline();
        };
        const handleOffline = () => setIsOnline(false);
        
        window.addEventListener('online', handleOnline);
        window.addEventListener('offline', handleOffline);
        
        return () => {
            window.removeEventListener('online', handleOnline);
            window.removeEventListener('offline', handleOffline);
        };
    }, []);

    // Set theme class on body
    React.useEffect(() => {
        // Initialize theme from localStorage
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme === 'dark') {
            document.documentElement.classList.add('dark');
        } else if (savedTheme === 'light') {
            document.documentElement.classList.remove('dark');
        } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            // If no saved preference, use system preference
            document.documentElement.classList.add('dark');
            localStorage.setItem('theme', 'dark');
        }
    }, []);

    const handleLogSubmit = React.useCallback(async (logData) => {
        try {
            LogManager.validateLog(logData);
            
            const conditions = {
                weather: weatherData?.current ? {
                    temperature: weatherData.current.temperature,
                    windSpeed: weatherData.current.windSpeed,
                    pressure: weatherData.current.pressure,
                    cloudCover: weatherData.current.cloudCover,
                    rainMm: weatherData.current.rainMm
                } : null,
                tide: tideData?.current ? {
                    height: tideData.current.height,
                    type: tideData.current.type
                } : null,
                prediction: prediction?.percentage
            };

            const formattedLog = LogManager.formatLog(logData, conditions);
            
            // Show sync status
            setSyncStatus(prev => ({...prev, syncing: true, error: null}));
            
            // Save the log
            await LogManager.saveLog(formattedLog);
            
            // Update state with latest logs
            setLogs(LogManager.loadLogs());
            
            // Update sync status
            setSyncStatus({
                syncing: false,
                lastSynced: new Date(),
                error: null
            });
            
            // Show success notification if permitted
            if ('Notification' in window && Notification.permission === 'granted') {
                new Notification('Log Saved', { 
                    body: 'Your fishing log has been saved successfully!'
                });
            }
        } catch (error) {
            console.error('Log submission error:', error);
            reportError(error);
            
            // Update sync status with error
            setSyncStatus({
                syncing: false,
                lastSynced: null,
                error: 'Failed to save log: ' + error.message
            });
            
            // Alert user of error
            alert('Failed to save log. Please check all required fields.');
        }
    }, [weatherData, tideData, prediction, setLogs]);

    const handleLogDelete = React.useCallback(async (logId) => {
        try {
            // Show sync status
            setSyncStatus(prev => ({...prev, syncing: true, error: null}));
            
            // Delete the log
            await LogManager.deleteLog(logId);
            
            // Update state with remaining logs
            setLogs(LogManager.loadLogs());
            
            // Update sync status
            setSyncStatus({
                syncing: false,
                lastSynced: new Date(),
                error: null
            });
        } catch (error) {
            console.error('Log deletion error:', error);
            reportError(error);
            
            // Update sync status with error
            setSyncStatus({
                syncing: false,
                lastSynced: null,
                error: 'Failed to delete log: ' + error.message
            });
            
            alert('Failed to delete log. Please try again.');
        }
    }, [setLogs]);

    const handleLogEdit = React.useCallback(async (logId, updatedData) => {
        try {
            LogManager.validateLog(updatedData);
            
            // Find existing log
            const existingLog = logs.find(log => log.id === logId);
            if (!existingLog) {
                throw new Error('Log not found');
            }
            
            // Show sync status
            setSyncStatus(prev => ({...prev, syncing: true, error: null}));
            
            // Create updated log with preserved conditions
            const updatedLog = {
                ...existingLog,
                ...updatedData,
                updatedAt: new Date().toISOString()
            };
            
            // Save the updated log
            await LogManager.saveLog(updatedLog);
            
            // Update state with all logs
            setLogs(LogManager.loadLogs());
            
            // Update sync status
            setSyncStatus({
                syncing: false,
                lastSynced: new Date(),
                error: null
            });
        } catch (error) {
            console.error('Log edit error:', error);
            reportError(error);
            
            // Update sync status with error
            setSyncStatus({
                syncing: false,
                lastSynced: null,
                error: 'Failed to update log: ' + error.message
            });
            
            alert('Failed to update log. Please check all required fields.');
        }
    }, [logs, setLogs]);

    // Force a sync with the server
    const handleForceSync = React.useCallback(async () => {
        if (!isOnline) {
            alert('You are offline. Please connect to the internet to sync.');
            return;
        }
        
        try {
            setSyncStatus(prev => ({...prev, syncing: true, error: null}));
            await LogManager.saveLogs(logs);
            setSyncStatus({
                syncing: false,
                lastSynced: new Date(),
                error: null
            });
            
            // Show success message
            alert('Logs synchronized successfully!');
        } catch (error) {
            console.error('Force sync error:', error);
            reportError(error);
            setSyncStatus({
                syncing: false,
                lastSynced: null,
                error: 'Failed to sync: ' + error.message
            });
            
            alert('Failed to synchronize logs. Please try again later.');
        }
    }, [logs, isOnline]);

    // Request notification permission
    const requestNotificationPermission = React.useCallback(async () => {
        if (!('Notification' in window)) {
            return;
        }
        
        if (Notification.permission !== 'granted' && Notification.permission !== 'denied') {
            const permission = await Notification.requestPermission();
            if (permission === 'granted') {
                new Notification('Notifications Enabled', {
                    body: 'You will now receive notifications about your fishing logs.'
                });
            }
        }
    }, []);

    // Request notification permission on first load
    React.useEffect(() => {
        requestNotificationPermission();
    }, [requestNotificationPermission]);

    // Toggle feature suggestions
    const toggleFeatureSuggestions = () => {
        setShowFeatureSuggestions(!showFeatureSuggestions);
    };

    if (locationLoading || dataLoading) {
        return (
            <div className="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
                <div className="text-center">
                    <LoadingSpinner size="large" color="blue" />
                    <p className="mt-4 text-gray-600 dark:text-gray-400">
                        {locationLoading ? 'Getting your location...' : 'Loading fishing conditions...'}
                    </p>
                </div>
            </div>
        );
    }

    if (locationError || dataError) {
        return (
            <div className="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
                <div className="text-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md max-w-md w-full">
                    <i className="fas fa-exclamation-circle text-3xl text-red-600 mb-4"></i>
                    <p className="text-gray-700 dark:text-gray-300 mb-4">
                        {locationError || dataError}
                    </p>
                    <button
                        onClick={() => window.location.reload()}
                        className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
                    >
                        Retry
                    </button>
                </div>
            </div>
        );
    }

    const renderSyncStatus = () => {
        if (syncStatus.syncing) {
            return (
                <div className="flex items-center text-blue-600 dark:text-blue-400">
                    <LoadingSpinner size="small" color="blue" />
                    <span className="ml-2 text-sm">Syncing...</span>
                </div>
            );
        }
        
        if (syncStatus.error) {
            return (
                <div className="flex items-center text-red-600 dark:text-red-400">
                    <i className="fas fa-exclamation-circle mr-2"></i>
                    <span className="text-sm">{syncStatus.error}</span>
                </div>
            );
        }
        
        if (syncStatus.lastSynced) {
            return (
                <div className="flex items-center text-green-600 dark:text-green-400">
                    <i className="fas fa-check-circle mr-2"></i>
                    <span className="text-sm">
                        Last synced: {syncStatus.lastSynced.toLocaleTimeString()}
                    </span>
                </div>
            );
        }
        
        return null;
    };

    return (
        <div className="min-h-screen bg-gray-100 dark:bg-gray-900" data-name="app">
            <Header activeTab={activeTab} onTabChange={setActiveTab} />
            
            <main className="container mx-auto px-4 py-6">
                {/* Sync status indicator */}
                <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
                    {renderSyncStatus()}
                    
                    {activeTab === 'logs' && (
                        <button
                            onClick={handleForceSync}
                            disabled={!isOnline || syncStatus.syncing}
                            className={`px-3 py-1 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center ${
                                !isOnline || syncStatus.syncing ? 'opacity-50 cursor-not-allowed' : ''
                            }`}
                        >
                            <i className="fas fa-sync-alt mr-2"></i>
                            Force Sync
                        </button>
                    )}
                </div>
                
                {activeTab === 'predictions' ? (
                    <>
                        <DaySelector 
                            selectedDate={selectedDate}
                            onDateChange={setSelectedDate}
                            forecastDays={forecastDays}
                        />
                        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                            <div className="lg:col-span-2 space-y-6">
                                <ActivityAlerts
                                    weatherData={weatherData}
                                    tideData={tideData}
                                    prediction={prediction}
                                    location={location}
                                />
                                <WeatherInfo weatherData={weatherData} />
                                <WeatherTrends weatherData={weatherData} />
                                <TideInfo tideData={tideData} />
                                <FishingPrediction prediction={prediction} />
                                <AdvancedPredictions 
                                    weatherData={weatherData}
                                    tideData={tideData}
                                    prediction={prediction}
                                />
                                <ActivityTrends 
                                    solunarData={prediction?.solunarData}
                                    weatherData={weatherData}
                                />
                                {prediction?.solunarData && (
                                    <HourlyDetails 
                                        solunarData={prediction.solunarData}
                                        weatherData={weatherData}
                                        tideData={tideData}
                                    />
                                )}
                                <FishingAnalytics logs={logs} />
                                <button
                                    onClick={toggleFeatureSuggestions}
                                    className="w-full py-2 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 text-center font-medium"
                                >
                                    <i className="fas fa-lightbulb mr-2"></i>
                                    {showFeatureSuggestions ? 'Hide Feature Suggestions' : 'View Feature Suggestions'}
                                </button>
                                
                                {showFeatureSuggestions && <NewFeaturesSuggestion />}
                            </div>
                            <div className="lg:col-span-1">
                                <div className="sticky top-4">
                                    <LogForm onSubmit={handleLogSubmit} />
                                </div>
                            </div>
                        </div>
                    </>
                ) : activeTab === 'species' ? (
                    <FishingSpeciesTab
                        weatherData={weatherData}
                        tideData={tideData}
                        location={location}
                    />
                ) : activeTab === 'hotspots' ? (
                    <HotspotsPage
                        weatherData={weatherData}
                        tideData={tideData}
                        location={location}
                    />
                ) : (
                    <div className="space-y-6">
                        <div className="bg-white dark:bg-gray-800 p-4 md:p-6 rounded-lg shadow-md">
                            <div className="flex flex-wrap items-center justify-between gap-2 mb-4">
                                <h2 className="text-xl font-semibold dark:text-white">Fishing Logs</h2>
                                <div className="flex items-center space-x-2">
                                    <span className={`inline-flex items-center px-2 py-1 rounded-lg text-xs ${
                                        isOnline 
                                            ? 'bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100' 
                                            : 'bg-red-100 dark:bg-red-800 text-red-800 dark:text-red-100'
                                    }`}>
                                        <i className={`fas fa-${isOnline ? 'wifi' : 'wifi-slash'} mr-1`}></i>
                                        {isOnline ? 'Online' : 'Offline'}
                                    </span>
                                    <button
                                        onClick={handleForceSync}
                                        disabled={!isOnline || syncStatus.syncing}
                                        className={`px-2 py-1 text-xs bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center ${
                                            !isOnline || syncStatus.syncing ? 'opacity-50 cursor-not-allowed' : ''
                                        }`}
                                    >
                                        <i className="fas fa-sync-alt mr-1"></i>
                                        Sync
                                    </button>
                                </div>
                            </div>
                            <div className="mb-6">
                                <LogForm onSubmit={handleLogSubmit} />
                            </div>
                            <FishingLog 
                                logs={logs}
                                onDelete={handleLogDelete}
                                onEdit={handleLogEdit}
                            />
                        </div>
                    </div>
                )}
            </main>
            
            <OfflineIndicator />
        </div>
    );
}

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