import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../../domain/entities/warehouse_entity.dart';
import '../widgets/warehouse_card.dart';
import '../../../../core/router/app_router.dart';

/// EXAMPLE: Warehouse selection page with proper navigation integration
///
/// This is a complete example showing how to integrate the warehouse selection
/// page with the new router. Use this as a reference when implementing the
/// actual warehouse provider and state management.
///
/// Key Features:
/// - Uses type-safe navigation with extension methods
/// - Proper error handling
/// - Loading states
/// - Pull to refresh
/// - Integration with router
class WarehouseSelectionPageExample extends ConsumerStatefulWidget {
  const WarehouseSelectionPageExample({super.key});

  @override
  ConsumerState<WarehouseSelectionPageExample> createState() =>
      _WarehouseSelectionPageExampleState();
}

class _WarehouseSelectionPageExampleState
    extends ConsumerState<WarehouseSelectionPageExample> {
  @override
  void initState() {
    super.initState();
    // Load warehouses when page is first created
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // TODO: Replace with actual provider
      // ref.read(warehouseProvider.notifier).loadWarehouses();
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: Replace with actual provider
    // final state = ref.watch(warehouseProvider);

    final theme = Theme.of(context);
    final colorScheme = theme.colorScheme;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Select Warehouse'),
        backgroundColor: colorScheme.primaryContainer,
        foregroundColor: colorScheme.onPrimaryContainer,
        actions: [
          IconButton(
            icon: const Icon(Icons.logout),
            onPressed: () => _handleLogout(context),
            tooltip: 'Logout',
          ),
        ],
      ),
      body: _buildBody(context),
    );
  }

  Widget _buildBody(BuildContext context) {
    // For demonstration, showing example warehouse list
    // In actual implementation, use state from provider:
    // if (state.isLoading) return _buildLoadingState();
    // if (state.error != null) return _buildErrorState(context, state.error!);
    // if (!state.hasWarehouses) return _buildEmptyState(context);
    // return _buildWarehouseList(state.warehouses);

    // Example warehouses for demonstration
    final exampleWarehouses = _getExampleWarehouses();
    return _buildWarehouseList(exampleWarehouses);
  }

  /// Build loading state UI
  Widget _buildLoadingState() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          CircularProgressIndicator(
            color: Theme.of(context).colorScheme.primary,
          ),
          const SizedBox(height: 16),
          Text(
            'Loading warehouses...',
            style: Theme.of(context).textTheme.bodyLarge,
          ),
        ],
      ),
    );
  }

  /// Build error state UI
  Widget _buildErrorState(BuildContext context, String error) {
    final theme = Theme.of(context);
    final colorScheme = theme.colorScheme;

    return Center(
      child: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.error_outline,
              size: 64,
              color: colorScheme.error,
            ),
            const SizedBox(height: 16),
            Text(
              'Error Loading Warehouses',
              style: theme.textTheme.titleLarge?.copyWith(
                color: colorScheme.error,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              error,
              textAlign: TextAlign.center,
              style: theme.textTheme.bodyMedium?.copyWith(
                color: colorScheme.onSurfaceVariant,
              ),
            ),
            const SizedBox(height: 24),
            FilledButton.icon(
              onPressed: () {
                // TODO: Replace with actual provider
                // ref.read(warehouseProvider.notifier).loadWarehouses();
              },
              icon: const Icon(Icons.refresh),
              label: const Text('Retry'),
            ),
          ],
        ),
      ),
    );
  }

  /// Build empty state UI
  Widget _buildEmptyState(BuildContext context) {
    final theme = Theme.of(context);
    final colorScheme = theme.colorScheme;

    return Center(
      child: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.inventory_2_outlined,
              size: 64,
              color: colorScheme.onSurfaceVariant,
            ),
            const SizedBox(height: 16),
            Text(
              'No Warehouses Available',
              style: theme.textTheme.titleLarge,
            ),
            const SizedBox(height: 8),
            Text(
              'There are no warehouses to display.',
              textAlign: TextAlign.center,
              style: theme.textTheme.bodyMedium?.copyWith(
                color: colorScheme.onSurfaceVariant,
              ),
            ),
            const SizedBox(height: 24),
            OutlinedButton.icon(
              onPressed: () {
                // TODO: Replace with actual provider
                // ref.read(warehouseProvider.notifier).loadWarehouses();
              },
              icon: const Icon(Icons.refresh),
              label: const Text('Refresh'),
            ),
          ],
        ),
      ),
    );
  }

  /// Build warehouse list UI
  Widget _buildWarehouseList(List<WarehouseEntity> warehouses) {
    return RefreshIndicator(
      onRefresh: () async {
        // TODO: Replace with actual provider
        // await ref.read(warehouseProvider.notifier).refresh();
      },
      child: ListView.builder(
        padding: const EdgeInsets.symmetric(vertical: 8),
        itemCount: warehouses.length,
        itemBuilder: (context, index) {
          final warehouse = warehouses[index];
          return WarehouseCard(
            warehouse: warehouse,
            onTap: () => _onWarehouseSelected(context, warehouse),
          );
        },
      ),
    );
  }

  /// Handle warehouse selection
  ///
  /// This is the key integration point with the router!
  /// Uses the type-safe extension method to navigate to operations page
  void _onWarehouseSelected(BuildContext context, WarehouseEntity warehouse) {
    // TODO: Optionally save selected warehouse to provider
    // ref.read(warehouseProvider.notifier).selectWarehouse(warehouse);

    // Navigate to operations page using type-safe extension method
    context.goToOperations(warehouse);
  }

  /// Handle logout
  void _handleLogout(BuildContext context) async {
    final confirmed = await showDialog<bool>(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('Logout'),
        content: const Text('Are you sure you want to logout?'),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(false),
            child: const Text('Cancel'),
          ),
          FilledButton(
            onPressed: () => Navigator.of(context).pop(true),
            child: const Text('Logout'),
          ),
        ],
      ),
    );

    if (confirmed == true && context.mounted) {
      // TODO: Call logout from auth provider
      // await ref.read(authProvider.notifier).logout();

      // Router will automatically redirect to login page
      // due to authentication state change
    }
  }

  /// Get example warehouses for demonstration
  List<WarehouseEntity> _getExampleWarehouses() {
    return [
      WarehouseEntity(
        id: 1,
        name: 'Kho nguyên vật liệu',
        code: '001',
        description: 'Warehouse for raw materials',
        isNGWareHouse: false,
        totalCount: 8,
      ),
      WarehouseEntity(
        id: 2,
        name: 'Kho bán thành phẩm công đoạn',
        code: '002',
        description: 'Semi-finished goods warehouse',
        isNGWareHouse: false,
        totalCount: 8,
      ),
      WarehouseEntity(
        id: 3,
        name: 'Kho thành phẩm',
        code: '003',
        description: 'Finished goods warehouse',
        isNGWareHouse: false,
        totalCount: 8,
      ),
      WarehouseEntity(
        id: 4,
        name: 'Kho tiêu hao',
        code: '004',
        description: 'Để chứa phụ tùng',
        isNGWareHouse: false,
        totalCount: 8,
      ),
      WarehouseEntity(
        id: 5,
        name: 'Kho NG',
        code: '005',
        description: 'Non-conforming products warehouse',
        isNGWareHouse: true,
        totalCount: 3,
      ),
    ];
  }
}

/// EXAMPLE: Alternative approach using named routes
///
/// This shows how to use named routes instead of path-based navigation
class WarehouseSelectionWithNamedRoutesExample extends ConsumerWidget {
  const WarehouseSelectionWithNamedRoutesExample({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Example warehouse for demonstration
    final warehouse = WarehouseEntity(
      id: 1,
      name: 'Example Warehouse',
      code: '001',
      isNGWareHouse: false,
      totalCount: 10,
    );

    return Scaffold(
      appBar: AppBar(title: const Text('Named Routes Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // Using named route navigation
                context.goToOperationsNamed(warehouse);
              },
              child: const Text('Go to Operations (Named)'),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                // Using path-based navigation
                context.goToOperations(warehouse);
              },
              child: const Text('Go to Operations (Path)'),
            ),
          ],
        ),
      ),
    );
  }
}

/// EXAMPLE: Navigation from operation to products
///
/// Shows how to navigate from operation selection to products page
class OperationNavigationExample extends StatelessWidget {
  final WarehouseEntity warehouse;

  const OperationNavigationExample({
    super.key,
    required this.warehouse,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Operation Navigation Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton.icon(
              onPressed: () {
                // Navigate to products with import operation
                context.goToProducts(
                  warehouse: warehouse,
                  operationType: 'import',
                );
              },
              icon: const Icon(Icons.arrow_downward),
              label: const Text('Import Products'),
            ),
            const SizedBox(height: 16),
            ElevatedButton.icon(
              onPressed: () {
                // Navigate to products with export operation
                context.goToProducts(
                  warehouse: warehouse,
                  operationType: 'export',
                );
              },
              icon: const Icon(Icons.arrow_upward),
              label: const Text('Export Products'),
            ),
            const SizedBox(height: 32),
            OutlinedButton(
              onPressed: () {
                // Navigate back
                context.goBack();
              },
              child: const Text('Go Back'),
            ),
          ],
        ),
      ),
    );
  }
}