import 'package:flutter/material.dart';
import '/theme/app_theme.dart';
import '/widgets/logo_widget.dart';

class HomeScreen extends StatefulWidget {
  final String phoneNumber;
  final String userName; // Added userName

  const HomeScreen({
    super.key,
    required this.phoneNumber,
    required this.userName,
  });

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final TextEditingController _voucherController = TextEditingController();

  // Dummy images for carousel - replace with your actual image paths
  final List<String> imgList = [
    'assets/images/gas.jpeg',
    'assets/images/logo.jpeg',
  ];

  @override
  Widget build(BuildContext context) {
    List<Widget> imageSliders =
        imgList
            .map(
              (item) => Container(
                margin: const EdgeInsets.all(5.0),
                child: ClipRRect(
                  borderRadius: const BorderRadius.all(Radius.circular(10.0)),
                  child: Image.asset(
                    item,
                    fit: BoxFit.cover,
                    width: 1000.0,
                    errorBuilder: (context, error, stackTrace) {
                      return Container(
                        color: Colors.grey.shade300,
                        child: Center(
                          child: Text(
                            'Banner Error',
                            style: TextStyle(color: Colors.red.shade700),
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ),
            )
            .toList();

    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              const Center(child: AmazonsLogo()),
              const SizedBox(height: 20),
              Text(
                "Good Morning, ${widget.userName} 👋", // Use userName
                style: Theme.of(
                  context,
                ).textTheme.displayLarge?.copyWith(fontSize: 22),
              ),
              const SizedBox(height: 5),
              Text(
                "Prepaid - ${widget.phoneNumber}",
                style: Theme.of(
                  context,
                ).textTheme.bodyMedium?.copyWith(fontSize: 15),
              ),
              const SizedBox(height: 20),
              _buildCreditAndPointsBar(),
              const SizedBox(height: 20),
              const SizedBox(height: 25),
              Text(
                "Your active subscriptions",
                style: Theme.of(
                  context,
                ).textTheme.titleLarge?.copyWith(fontSize: 18),
              ),
              const SizedBox(height: 10),
              _buildSubscriptionCard(),
              const SizedBox(height: 25),
              TextFormField(
                controller: _voucherController,
                decoration: InputDecoration(
                  hintText: "Enter Voucher Code",
                  suffixIcon: Padding(
                    padding: const EdgeInsets.all(
                      4.0,
                    ), // Adjust padding for button
                    child: ElevatedButton(
                      onPressed: () {
                        // Voucher connect logic
                        if (_voucherController.text.isNotEmpty) {
                          ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(
                              content: Text(
                                "Connect: ${_voucherController.text}",
                              ),
                            ),
                          );
                        } else {
                          ScaffoldMessenger.of(context).showSnackBar(
                            const SnackBar(
                              content: Text("Please enter a voucher code."),
                            ),
                          );
                        }
                      },
                      style: ElevatedButton.styleFrom(
                        backgroundColor: AppColors.primaryBlue,
                        minimumSize: const Size(
                          80,
                          36,
                        ), // Ensure button is not too small
                      ),
                      child: const Text("CONNECT"),
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 20),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildCreditAndPointsBar() {
    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            _buildInfoColumn("Credit(Ksh)", "0", isBold: true),
            IconButton(
              icon: const Icon(Icons.refresh, color: AppColors.primaryBlue),
              onPressed: () {
                // Refresh logic
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text("Refreshing data...")),
                );
              },
            ),
            _buildInfoColumn("Net Points", "0", isBold: true),
          ],
        ),
      ),
    );
  }

  Widget _buildInfoColumn(String title, String value, {bool isBold = false}) {
    return Column(
      children: <Widget>[
        Text(title, style: Theme.of(context).textTheme.bodyMedium),
        const SizedBox(height: 4),
        Text(
          value,
          style: Theme.of(context).textTheme.titleLarge?.copyWith(
            fontSize: 18,
            fontWeight: isBold ? FontWeight.bold : FontWeight.normal,
          ),
        ),
      ],
    );
  }

  Widget _buildSubscriptionCard() {
    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            const Text(
              "KKWZBZVZ • Sh850= 30Days UnlimiNET",
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: AppColors.textPrimary,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              "Used: 3.96 GB",
              style: Theme.of(context).textTheme.bodyMedium,
            ),
            const SizedBox(height: 4),
            Text(
              "Expires: 14/06/2025 17:55",
              style: Theme.of(context).textTheme.bodyMedium,
            ),
            const SizedBox(height: 15),
            Align(
              alignment: Alignment.centerRight,
              child: ElevatedButton(
                onPressed: () {
                  // Reconnect logic
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                      content: Text("Reconnecting subscription..."),
                    ),
                  );
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: AppColors.successGreen,
                ),
                child: const Text("RECONNECT"),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _voucherController.dispose();
    super.dispose();
  }
}