import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:kmobile/data/models/user.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import '../../../l10n/app_localizations.dart';

class AccountInfoScreen extends StatefulWidget {
  final List<User> users;
  final int selectedIndex;

  const AccountInfoScreen({
    super.key,
    required this.users,
    required this.selectedIndex,
  });

  @override
  State<AccountInfoScreen> createState() => _AccountInfoScreen();
}

class _AccountInfoScreen extends State<AccountInfoScreen> {
  late User selectedUser;
  @override
  void initState() {
    super.initState();
    selectedUser = widget.users[widget.selectedIndex];
  }

  @override
  Widget build(BuildContext context) {
    final users = widget.users;
    int selectedIndex = widget.selectedIndex;
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Symbols.arrow_back_ios_new),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        title: Text(
          AppLocalizations.of(context).accountInfo,
          style: const TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.w500,
          ),
        ),
        centerTitle: false,
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 10.0),
            child: CircleAvatar(
              backgroundColor: Colors.grey[200],
              radius: 20,
              child: SvgPicture.asset(
                'assets/images/avatar_male.svg',
                width: 40,
                height: 40,
                fit: BoxFit.cover,
              ),
            ),
          ),
        ],
      ),
      body: ListView(
        padding: const EdgeInsets.all(16.0),
        children: [
          Text(
            AppLocalizations.of(context).accountNumber,
            style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 14),
          ),

          /// Dropdown to change account
          DropdownButton<User>(
            value: selectedUser,
            onChanged: (User? newUser) {
              if (newUser != null) {
                setState(() {
                  selectedUser = newUser;
                });
              }
            },
            items: widget.users.map((user) {
              return DropdownMenuItem<User>(
                value: user,
                child: Text(user.accountNo.toString()),
              );
            }).toList(),
          ),

          /*InfoRow(
              title: AppLocalizations.of(context).accountNumber,
              value: users[selectedIndex].accountNo ?? 'N/A'),
          // InfoRow(title: 'Nominee Customer No', value: user.nomineeCustomerNo),
          // InfoRow(title: 'SMS Service', value: user.smsService),
          // InfoRow(title: 'Missed Call Service', value: user.missedCallService),*/
          InfoRow(
            title: AppLocalizations.of(context).customerNumber,
            value: selectedUser.cifNumber ?? 'N/A',
          ),
          InfoRow(
            title: AppLocalizations.of(context).productName,
            value: selectedUser.productType ?? 'N/A',
          ),
          // InfoRow(title: 'Account Opening Date', value: users[selectedIndex].accountOpeningDate ?? 'N/A'),
          InfoRow(
            title: AppLocalizations.of(context).accountStatus,
            value: 'OPEN',
          ),
          InfoRow(
            title: AppLocalizations.of(context).availableBalance,
            value: selectedUser.availableBalance ?? 'N/A',
          ),
          InfoRow(
            title: AppLocalizations.of(context).currentBalance,
            value: selectedUser.currentBalance ?? 'N/A',
          ),

          users[selectedIndex].approvedAmount != null
              ? InfoRow(
                  title: AppLocalizations.of(context).approvedAmount,
                  value: selectedUser.approvedAmount ?? 'N/A',
                )
              : const SizedBox.shrink(),
        ],
      ),
    );
  }
}

class InfoRow extends StatelessWidget {
  final String title;
  final String value;

  const InfoRow({required this.title, required this.value, super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: const EdgeInsets.symmetric(vertical: 8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: const TextStyle(
              fontSize: 15,
              fontWeight: FontWeight.w500,
              color: Colors.black87,
            ),
          ),
          const SizedBox(height: 3),
          Text(
            value,
            style: const TextStyle(fontSize: 16, color: Colors.black),
          ),
        ],
      ),
    );
  }
}