# Router Integration Example

This document shows how to integrate your actual screens with the router configuration once they are created.

## Step 1: Remove Placeholder Screens from app_router.dart

In `/Users/rvanvuren/Projects/buyerkiosk-live-flutter/lib/router/app_router.dart`, remove these placeholder screen classes:

```dart
// DELETE THESE CLASSES:
class InstallationScreen extends StatelessWidget { ... }
class DashboardScreen extends StatelessWidget { ... }
class StoreDetailScreen extends StatelessWidget { ... }
class BuyQueueScreen extends StatelessWidget { ... }
class CompletedBuysScreen extends StatelessWidget { ... }
class BuyerStatsScreen extends StatelessWidget { ... }
class ShiftNotesScreen extends StatelessWidget { ... }
class TaskCreationScreen extends StatelessWidget { ... }
```

## Step 2: Add Actual Screen Imports

Add these imports at the top of `app_router.dart`:

```dart
// Screen imports
import 'package:buyer_kiosk_live/presentation/screens/installation/installation_screen.dart';
import 'package:buyer_kiosk_live/presentation/screens/dashboard/dashboard_screen.dart';
import 'package:buyer_kiosk_live/presentation/screens/store_detail/store_detail_screen.dart';
import 'package:buyer_kiosk_live/presentation/screens/queue/buy_queue_screen.dart';
import 'package:buyer_kiosk_live/presentation/screens/completed/completed_buys_screen.dart';
import 'package:buyer_kiosk_live/presentation/screens/stats/buyer_stats_screen.dart';
import 'package:buyer_kiosk_live/presentation/screens/shift_notes/shift_notes_screen.dart';
import 'package:buyer_kiosk_live/presentation/screens/shift_notes/task_creation_screen.dart';
```

## Step 3: Update Your Actual Screens to Accept Parameters

### Example: Store Detail Screen

```dart
// lib/presentation/screens/store_detail/store_detail_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class StoreDetailScreen extends ConsumerWidget {
  final String typeNum;
  final String? storeName;

  const StoreDetailScreen({
    super.key,
    required this.typeNum,
    this.storeName,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: Text(storeName ?? 'Store $typeNum'),
      ),
      body: Column(
        children: [
          // Your store detail UI
          ElevatedButton(
            onPressed: () => context.goToQueue(typeNum, storeName: storeName),
            child: const Text('View Buy Queue'),
          ),
          ElevatedButton(
            onPressed: () => context.goToCompleted(typeNum, storeName: storeName),
            child: const Text('View Completed Buys'),
          ),
          ElevatedButton(
            onPressed: () => context.goToStats(typeNum, storeName: storeName),
            child: const Text('View Buyer Stats'),
          ),
          ElevatedButton(
            onPressed: () => context.goToNotes(typeNum, storeName: storeName),
            child: const Text('View Shift Notes'),
          ),
        ],
      ),
    );
  }
}
```

### Example: Dashboard Screen with Navigation

```dart
// lib/presentation/screens/dashboard/dashboard_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:buyer_kiosk_live/router/app_router.dart';
import 'package:buyer_kiosk_live/data/models/store_model.dart';

class DashboardScreen extends ConsumerWidget {
  const DashboardScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Get stores from provider
    final storesAsync = ref.watch(storesProvider);

    return Scaffold(
      appBar: AppBar(
        title: const Text('BuyerKiosk Live'),
        actions: [
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: () => ref.refresh(storesProvider),
          ),
        ],
      ),
      body: storesAsync.when(
        data: (stores) => ListView.builder(
          itemCount: stores.length,
          itemBuilder: (context, index) {
            final store = stores[index];
            return Card(
              child: ListTile(
                title: Text(store.storeName),
                subtitle: Text('TypeNum: ${store.typeNum}'),
                trailing: const Icon(Icons.arrow_forward_ios),
                onTap: () {
                  // Navigate to store detail using helper method
                  context.goToStoreDetail(
                    store.typeNum,
                    storeName: store.storeName,
                  );
                },
              ),
            );
          },
        ),
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (error, stack) => Center(child: Text('Error: $error')),
      ),
    );
  }
}

// Example provider for stores
final storesProvider = FutureProvider<List<StoreModel>>((ref) async {
  // Fetch stores from your repository
  final repository = ref.watch(dashboardRepositoryProvider);
  return repository.getStores();
});
```

### Example: Buy Queue Screen

```dart
// lib/presentation/screens/queue/buy_queue_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class BuyQueueScreen extends ConsumerWidget {
  final String typeNum;
  final String? storeName;

  const BuyQueueScreen({
    super.key,
    required this.typeNum,
    this.storeName,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final queueAsync = ref.watch(queueProvider(typeNum));

    return Scaffold(
      appBar: AppBar(
        title: Text('${storeName ?? typeNum} - Buy Queue'),
      ),
      body: queueAsync.when(
        data: (queue) => ListView.builder(
          itemCount: queue.length,
          itemBuilder: (context, index) {
            final item = queue[index];
            return ListTile(
              title: Text(item.buyerName),
              subtitle: Text('Bin: ${item.binNum}'),
              trailing: Text('${item.waitTime} min'),
            );
          },
        ),
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (error, stack) => Center(child: Text('Error: $error')),
      ),
    );
  }
}

// Example provider for queue
final queueProvider = FutureProvider.family<List<QueueItem>, String>((ref, typeNum) async {
  final repository = ref.watch(storeRepositoryProvider);
  return repository.getQueue(typeNum);
});
```

## Step 4: Implement Authentication

### Create Secure Storage Service

```dart
// lib/core/services/secure_storage_service.dart
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class SecureStorageService {
  final FlutterSecureStorage _storage = const FlutterSecureStorage(
    aOptions: AndroidOptions(
      encryptedSharedPreferences: true,
    ),
    iOptions: IOSOptions(
      accessibility: KeychainAccessibility.first_unlock,
    ),
  );

  // API Key
  Future<String?> getApiKey() async {
    return await _storage.read(key: 'api_key');
  }

  Future<bool> hasApiKey() async {
    final apiKey = await getApiKey();
    return apiKey != null && apiKey.isNotEmpty;
  }

  Future<void> saveApiKey(String apiKey) async {
    await _storage.write(key: 'api_key', value: apiKey);
  }

  Future<void> deleteApiKey() async {
    await _storage.delete(key: 'api_key');
  }

  // Base URL
  Future<String?> getBaseUrl() async {
    return await _storage.read(key: 'base_url');
  }

  Future<void> saveBaseUrl(String url) async {
    await _storage.write(key: 'base_url', value: url);
  }

  Future<void> deleteBaseUrl() async {
    await _storage.delete(key: 'base_url');
  }

  // Clear all
  Future<void> clearAll() async {
    await _storage.deleteAll();
  }
}

// Provider
final secureStorageServiceProvider = Provider<SecureStorageService>((ref) {
  return SecureStorageService();
});
```

### Create Auth State Provider

```dart
// lib/presentation/providers/auth_provider.dart
import 'dart:async';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:buyer_kiosk_live/core/services/secure_storage_service.dart';

/// Provider that streams authentication state
final authStateProvider = StreamProvider<bool>((ref) {
  final controller = StreamController<bool>();
  final storage = ref.watch(secureStorageServiceProvider);

  // Initial check
  storage.hasApiKey().then((hasKey) {
    if (!controller.isClosed) {
      controller.add(hasKey);
    }
  });

  // Listen for changes (you can implement a more sophisticated change detection)
  // For now, this is a simple implementation
  ref.onDispose(() {
    controller.close();
  });

  return controller.stream;
});

/// Provider to check if user is authenticated
final isAuthenticatedProvider = FutureProvider<bool>((ref) async {
  final storage = ref.watch(secureStorageServiceProvider);
  return storage.hasApiKey();
});
```

### Update Router's Auth State Provider

In `lib/router/app_router.dart`, replace the placeholder `authStateProvider`:

```dart
// Remove the placeholder and import the real one
import 'package:buyer_kiosk_live/presentation/providers/auth_provider.dart';
import 'package:buyer_kiosk_live/core/services/secure_storage_service.dart';

// Update the redirect logic in routerProvider
final routerProvider = Provider<GoRouter>((ref) {
  final authState = ref.watch(authStateProvider);
  final storage = ref.watch(secureStorageServiceProvider);

  return GoRouter(
    // ... other config
    redirect: (BuildContext context, GoRouterState state) async {
      // Check if API key exists
      final isInstalled = await storage.hasApiKey();
      final isGoingToInstall = state.matchedLocation == '/install';

      // Redirect logic based on installation state
      if (!isInstalled) {
        return isGoingToInstall ? null : '/install';
      } else {
        return isGoingToInstall ? '/' : null;
      }
    },
    // ... rest of config
  );
});
```

## Step 5: Installation Screen Implementation

```dart
// lib/presentation/screens/installation/installation_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:buyer_kiosk_live/core/services/secure_storage_service.dart';
import 'package:buyer_kiosk_live/router/app_router.dart';

class InstallationScreen extends ConsumerStatefulWidget {
  const InstallationScreen({super.key});

  @override
  ConsumerState<InstallationScreen> createState() => _InstallationScreenState();
}

class _InstallationScreenState extends ConsumerState<InstallationScreen> {
  final _formKey = GlobalKey<FormState>();
  final _apiKeyController = TextEditingController();
  final _baseUrlController = TextEditingController();

  @override
  void dispose() {
    _apiKeyController.dispose();
    _baseUrlController.dispose();
    super.dispose();
  }

  Future<void> _saveAndContinue() async {
    if (_formKey.currentState!.validate()) {
      try {
        EasyLoading.show(status: 'Saving configuration...');

        final storage = ref.read(secureStorageServiceProvider);
        await storage.saveApiKey(_apiKeyController.text.trim());
        await storage.saveBaseUrl(_baseUrlController.text.trim());

        EasyLoading.dismiss();
        EasyLoading.showSuccess('Configuration saved!');

        // Navigate to dashboard
        if (mounted) {
          context.goToDashboard();
        }
      } catch (e) {
        EasyLoading.dismiss();
        EasyLoading.showError('Failed to save configuration');
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Installation'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Form(
          key: _formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              const Icon(
                Icons.settings,
                size: 64,
                color: Colors.blue,
              ),
              const SizedBox(height: 24),
              const Text(
                'Configure BuyerKiosk Live',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 32),
              TextFormField(
                controller: _baseUrlController,
                decoration: const InputDecoration(
                  labelText: 'Base URL',
                  hintText: 'https://api.example.com',
                  prefixIcon: Icon(Icons.link),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter the base URL';
                  }
                  if (!value.startsWith('http')) {
                    return 'URL must start with http:// or https://';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 16),
              TextFormField(
                controller: _apiKeyController,
                decoration: const InputDecoration(
                  labelText: 'API Key',
                  hintText: 'Enter your API key',
                  prefixIcon: Icon(Icons.key),
                ),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter the API key';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 24),
              ElevatedButton(
                onPressed: _saveAndContinue,
                child: const Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Text('Save and Continue'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

## Step 6: Usage in Screens

### Navigation Examples

```dart
// Navigate back
ElevatedButton(
  onPressed: () => context.pop(),
  child: const Text('Back'),
),

// Navigate to dashboard
ElevatedButton(
  onPressed: () => context.goToDashboard(),
  child: const Text('Dashboard'),
),

// Navigate to store detail
ElevatedButton(
  onPressed: () {
    context.goToStoreDetail('12345', storeName: 'Main Store');
  },
  child: const Text('Store Detail'),
),

// Navigate to buy queue
ElevatedButton(
  onPressed: () {
    context.goToQueue(typeNum, storeName: storeName);
  },
  child: const Text('Buy Queue'),
),
```

### Accessing Current Route Information

```dart
// Get current route location
final currentLocation = GoRouterState.of(context).uri.toString();

// Get path parameters
final typeNum = GoRouterState.of(context).pathParameters['typeNum'];

// Get query parameters
final storeName = GoRouterState.of(context).uri.queryParameters['storeName'];
```

## Complete Integration Checklist

- [ ] Remove placeholder screens from `app_router.dart`
- [ ] Add actual screen imports
- [ ] Update screens to accept `typeNum` and `storeName` parameters
- [ ] Create `SecureStorageService`
- [ ] Create `authStateProvider`
- [ ] Update router's redirect logic with actual auth check
- [ ] Implement `InstallationScreen`
- [ ] Test navigation flows
- [ ] Test authentication redirects
- [ ] Test deep linking (if needed)

## Testing

```dart
// test/navigation_test.dart
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:buyer_kiosk_live/app.dart';

void main() {
  testWidgets('Navigate from dashboard to store detail', (tester) async {
    await tester.pumpWidget(
      const ProviderScope(
        child: BuyerKioskApp(),
      ),
    );

    await tester.pumpAndSettle();

    // Find and tap a store card
    await tester.tap(find.text('Store Name').first);
    await tester.pumpAndSettle();

    // Verify navigation to store detail
    expect(find.text('Store Detail'), findsOneWidget);
  });
}
```