import 'package:flutter/material.dart';
import '../theme.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,
                MaterialPageRoute(
                  builder: (context) => 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: [
                          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: 16),

                          // Toggle 1: Barcode
                          _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
                          _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
                          _buildToggleCard(
                            Icons.inventory_2,
                            'Inventory Alerts',
                            'Get notified when stock is running low.',
                            _inventory,
                            (val) => setState(() => _inventory = val),
                            theme,
                          ),
                        ],
                      ),
                    ),
                  ),
                ),

                // Pinned action keys
                Padding(
                  padding: EdgeInsets.all(padding),
                  child: ElevatedButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => SetupCompleteScreen(
                            businessName: widget.businessName,
                            businessType: widget.businessType,
                            gstin: widget.gstin,
                            barcodeScanner: _barcode,
                            kotManagement: _kot,
                            inventoryAlerts: _inventory,
                          ),
                        ),
                      );
                    },
                    style: ElevatedButton.styleFrom(
                      minimumSize: const Size.fromHeight(54),
                    ),
                    child: const Text('Save & Continue'),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildToggleCard(
    IconData icon,
    String title,
    String subtitle,
    bool value,
    ValueChanged<bool> onChanged,
    ThemeData theme,
  ) {
    return 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,
          ),
        ],
      ),
    );
  }
}