OnboardingPozoAppv1/flutter_app/lib/screens/customize_setup_screen.dart

import 'package:flutter/material.dart';
import '../theme.dart';
import '../route_transitions.dart';
import 'setup_complete_screen.dart';

class CustomizeSetupScreen extends StatefulWidget {
  final String businessName;
  final String businessType;
  final String gstin;

  const CustomizeSetupScreen({
    super.key,
    required this.businessName,
    required this.businessType,
    this.gstin = '',
  });

  @override
  State<CustomizeSetupScreen> createState() => _CustomizeSetupScreenState();
}

class _CustomizeSetupScreenState extends State<CustomizeSetupScreen> {
  bool _barcode = false;
  bool _kot = false;
  bool _inventory = true;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final padding = context.responsivePadding;

    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Color(0xFFBA1A20)),
          onPressed: () => Navigator.pop(context),
        ),
        title: Row(
          children: const [
            Icon(Icons.settings, color: Color(0xFFBA1A20), size: 18),
            SizedBox(width: 6),
            Text(
              'PozoApp',
              style: TextStyle(
                color: Color(0xFFBA1A20),
                fontWeight: FontWeight.bold,
                fontSize: 16,
              ),
            ),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.push(
                context,
                FadeSlidePageRoute(
                  child: SetupCompleteScreen(
                    businessName: widget.businessName,
                    businessType: widget.businessType,
                    gstin: widget.gstin,
                    barcodeScanner: false,
                    kotManagement: false,
                    inventoryAlerts: true,
                  ),
                ),
              );
            },
            child: Text(
              'Skip for Now',
              style: TextStyle(
                color: Colors.grey[750],
                fontWeight: FontWeight.bold,
                fontSize: 12,
              ),
            ),
          )
        ],
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(6),
          child: Row(
            children: List.generate(5, (index) {
              return Expanded(
                child: Container(
                  height: 6,
                  margin: const EdgeInsets.symmetric(horizontal: 2.0),
                  decoration: BoxDecoration(
                    color: index <= 3 ? theme.colorScheme.primary : theme.colorScheme.surfaceContainerHighest,
                    borderRadius: BorderRadius.circular(3),
                  ),
                ),
              );
            }),
          ),
        ),
      ),
      body: SafeArea(
        child: Center(
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 600),
            child: Column(
              children: [
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 10),
                  color: Colors.grey[50],
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: const [
                      Text('Step 4 of 5', style: TextStyle(fontSize: 11, fontWeight: FontWeight.bold, color: Colors.grey)),
                      Text('Smart Setup', style: TextStyle(fontSize: 11, fontWeight: FontWeight.bold, color: Color(0xFFBA1A20))),
                    ],
                  ),
                ),
                Expanded(
                  child: SingleChildScrollView(
                    physics: const BouncingScrollPhysics(),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          SlideFadeEntrance(
                            delay: Duration.zero,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  'Customize Your Setup',
                                  style: theme.textTheme.headlineLarge?.copyWith(
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                                const SizedBox(height: 16),
                                Text(
                                  'Turn on the features you need for your shop. You can always change these later in settings.',
                                  style: theme.textTheme.bodyMedium,
                                ),
                              ],
                            ),
                          ),
                          const SizedBox(height: 20),

                          // Toggle 1: Barcode
                          SlideFadeEntrance(
                            delay: const Duration(milliseconds: 100),
                            child: _buildToggleCard(
                              Icons.qr_code_scanner,
                              'Barcode Scanner',
                              'Do you use a Barcode Scanner?',
                              _barcode,
                              (val) => setState(() => _barcode = val),
                              theme,
                            ),
                          ),
                          const SizedBox(height: 12),

                          // Toggle 2: KOT
                          SlideFadeEntrance(
                            delay: const Duration(milliseconds: 180),
                            child: _buildToggleCard(
                              Icons.receipt_long,
                              'KOT Management',
                              'Do you need Kitchen Order Ticket management?',
                              _kot,
                              (val) => setState(() => _kot = val),
                              theme,
                            ),
                          ),
                          const SizedBox(height: 12),

                          // Toggle 3: Inventory stock tracking
                          SlideFadeEntrance(
                            delay: const Duration(milliseconds: 260),
                            child: _buildToggleCard(
                              Icons.inventory_2,
                              'Inventory Alerts',
                              'Get notified when stock is running low.',
                              _inventory,
                              (val) => setState(() => _inventory = val),
                              theme,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),

                // Pinned action keys
                SlideFadeEntrance(
                  delay: const Duration(milliseconds: 340),
                  child: Padding(
                    padding: EdgeInsets.all(padding),
                    child: InteractiveScale(
                      child: ElevatedButton(
                        onPressed: () {
                          Navigator.push(
                            context,
                            FadeSlidePageRoute(
                              child: SetupCompleteScreen(
                                businessName: widget.businessName,
                                businessType: widget.businessType,
                                gstin: widget.gstin,
                                barcodeScanner: _barcode,
                                kotManagement: _kot,
                                inventoryAlerts: _inventory,
                              ),
                            ),
                          );
                        },
                        style: ElevatedButton.styleFrom(
                          minimumSize: const Size.fromHeight(54),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(16),
                          ),
                        ),
                        child: const Text('Save & Continue'),
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildToggleCard(
    IconData icon,
    String title,
    String subtitle,
    bool value,
    ValueChanged<bool> onChanged,
    ThemeData theme,
  ) {
    return InteractiveScale(
      onTap: () => onChanged(!value),
      child: Container(
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(16),
          border: Border.all(color: Colors.grey[200]!),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.02),
              blurRadius: 10,
              offset: const Offset(0, 4),
            )
          ],
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              width: 44,
              height: 44,
              decoration: BoxDecoration(
                color: Colors.grey[100],
                shape: BoxShape.circle,
              ),
              child: Icon(icon, color: Colors.grey[600], size: 22),
            ),
            const SizedBox(width: 14),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.bold,
                      color: Colors.black87,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    subtitle,
                    style: TextStyle(
                      fontSize: 11,
                      color: Colors.grey[500],
                    ),
                  )
                ],
              ),
            ),
            Switch(
              value: value,
              onChanged: onChanged,
              activeColor: Colors.white,
              activeTrackColor: theme.colorScheme.primary,
            ),
          ],
        ),
      ),
    );
  }
}