import 'package:flutter/material.dart';
import 'package:kmobile/features/accounts/screens/account_info_screen.dart';
import 'package:kmobile/features/accounts/screens/account_statement_screen.dart';
import 'package:kmobile/features/cheque/screens/cheque_management_screen.dart';
import 'package:kmobile/features/customer_info/screens/customer_info_screen.dart';
import 'package:kmobile/features/beneficiaries/screens/manage_beneficiaries_screen.dart';
import 'package:kmobile/features/enquiry/screens/enquiry_screen.dart';
import 'package:kmobile/features/fund_transfer/screens/fund_transfer_beneficiary_screen.dart';
import 'package:kmobile/features/quick_pay/screens/quick_pay_screen.dart';
import 'package:kmobile/src/preferences/preference.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import 'package:google_fonts/google_fonts.dart';

class DashboardScreen extends StatefulWidget {
  const DashboardScreen({super.key});

  @override
  State<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  // Mock data for transactions
  final List<Map<String, String>> transactions = [
    {
      'name': 'Raj Kumar',
      'amount': '₹1,000',
      'date': '09 March, 2025 16:04',
      'type': 'in'
    },
    {
      'name': 'Sunita Joshi',
      'amount': '₹1,45,000',
      'date': '07 March, 2025 16:04',
      'type': 'out'
    },
    {
      'name': 'Manoj Singh',
      'amount': '₹2,400',
      'date': '07 March, 2025 16:04',
      'type': 'in'
    },
    {
      'name': 'Raj Kumar',
      'amount': '₹11,500',
      'date': '09 March, 2025 16:04',
      'type': 'in'
    },
    {'name': 'Manoj Singh', 'amount': '₹1,000', 'date': '', 'type': 'in'},
  ];

  List<String> accountNumbers = [
    '0300015678903456',
    '0300015678903678',
    '0300015678903325',
  ];

  String selectedAccount = '0300015678903456';
  bool isVisible = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xfff5f9fc),
      appBar: AppBar(
        backgroundColor: const Color(0xfff5f9fc),
        automaticallyImplyLeading: false,
        title: Text(
          'kMobile',
          style: TextStyle(
              color: Theme.of(context).primaryColor,
              fontWeight: FontWeight.w500),
        ),
        actions: [
          // IconButton(
          //   icon: const Icon(Icons.notifications_outlined),
          //   onPressed: () {
          //     // Navigate to notifications
          //   },
          // ),
          Padding(
            padding: const EdgeInsets.only(right: 10.0),
            child: InkWell(
              borderRadius: BorderRadius.circular(20),
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const Preference()));
              },
              child: const CircleAvatar(
                backgroundImage: AssetImage('assets/images/avatar.jpg'),
                // Replace with your image
                radius: 20,
              ),
            ),
          ),
        ],
      ),
      body: SingleChildScrollView(
        physics: const AlwaysScrollableScrollPhysics(),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 8.0),
                child: Text(
                  "Hi Trina Bakshi",
                  style: GoogleFonts.sriracha().copyWith(fontSize: 20),
                ),
              ),
              const SizedBox(height: 16),

              // Account Info Card
              Container(
                padding: const EdgeInsets.all(24),
                decoration: BoxDecoration(
                  color: Theme.of(context).primaryColor,
                  borderRadius: BorderRadius.circular(16),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        const Text("Account Number: ",
                            style:
                                TextStyle(color: Colors.white, fontSize: 12)),
                        DropdownButton<String>(
                          value: selectedAccount,
                          dropdownColor: Theme.of(context).primaryColor,
                          underline: const SizedBox(),
                          icon: const Icon(Icons.keyboard_arrow_down),
                          iconEnabledColor: Colors.white,
                          style: const TextStyle(
                              color: Colors.white, fontSize: 14),
                          items: accountNumbers.map((String acc) {
                            return DropdownMenuItem<String>(
                              value: acc,
                              child: Text(acc,
                                  style: const TextStyle(
                                      color: Colors.white, fontSize: 14)),
                            );
                          }).toList(),
                          onChanged: (String? newValue) {
                            setState(() {
                              selectedAccount = newValue!;
                            });
                          },
                        ),
                      ],
                    ),
                    const SizedBox(height: 15),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        const Text("₹ ",
                            style: const TextStyle(
                                color: Colors.white,
                                fontSize: 40,
                                fontWeight: FontWeight.w700)),
                        Text(isVisible ? "1,23,456" : "*****",
                            style: const TextStyle(
                                color: Colors.white,
                                fontSize: 30,
                                fontWeight: FontWeight.w700)),
                        const Spacer(),
                        InkWell(
                            onTap: () {
                              setState(() {
                                isVisible = !isVisible;
                              });
                            },
                            child: Icon(
                                isVisible
                                    ? Symbols.visibility_lock
                                    : Symbols.visibility,
                                color: Colors.white)),
                      ],
                    ),
                    const SizedBox(height: 20),
                  ],
                ),
              ),
              const SizedBox(height: 18),
              const Text(
                'Quick Links',
                style: TextStyle(fontSize: 15),
              ),
              const SizedBox(height: 16),

              // Quick Links
              GridView.count(
                crossAxisCount: 4,
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                children: [
                  _buildQuickLink(Symbols.id_card, "Customer \n Info", () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => const CustomerInfoScreen()));
                  }),
                  _buildQuickLink(Symbols.currency_rupee, "Quick \n Pay", () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => const QuickPayScreen()));
                  }),
                  _buildQuickLink(Symbols.send_money, "Fund \n Transfer", () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) =>
                                const FundTransferBeneficiaryScreen()));
                  }),
                  _buildQuickLink(Symbols.server_person, "Account \n Info", () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => const AccountInfoScreen()));
                  }),
                  _buildQuickLink(Symbols.receipt_long, "Account \n History",
                      () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) =>
                                const AccountStatementScreen()));
                  }),
                  _buildQuickLink(Symbols.checkbook, "Handle \n Cheque", () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) =>
                                const ChequeManagementScreen()));
                  }),
                  _buildQuickLink(Icons.group, "Manage \n Beneficiary", () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) =>
                                const ManageBeneficiariesScreen()));
                  }),
                  _buildQuickLink(Symbols.support_agent, "Contact \n Us", () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => const EnquiryScreen()));
                  }),
                ],
              ),
              const SizedBox(height: 10),

              // Recent Transactions
              const Align(
                alignment: Alignment.centerLeft,
                child: Text("Recent Transactions",
                    style:
                        TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
              ),
              ...transactions.map((tx) => ListTile(
                    leading: Icon(
                        tx['type'] == 'in'
                            ? Symbols.call_received
                            : Symbols.call_made,
                        color: tx['type'] == 'in' ? Colors.green : Colors.red),
                    title: Text(tx['name']!),
                    subtitle: Text(tx['date']!),
                    trailing: Text(tx['amount']!),
                  )),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildQuickLink(IconData icon, String label, VoidCallback onTap) {
    return InkWell(
      onTap: onTap,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(icon, size: 30, color: Theme.of(context).primaryColor),
          const SizedBox(height: 4),
          Text(label,
              textAlign: TextAlign.center,
              style: const TextStyle(fontSize: 12)),
        ],
      ),
    );
  }
}