import 'package:flutter/material.dart';
import 'package:supplier_new/common/settings.dart';


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

  @override
  State<FinancialMainScreen> createState() => _FinancialMainScreenState();
}

class _FinancialMainScreenState extends State<FinancialMainScreen>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  final transactions = [
    {
      "name": "My Home Bhooja",
      "date": "21 August",
      "amount": "+ ₹2,580",
      "color": Colors.green,
      "status": "success",
    },
    {
      "name": "Ramakrishna",
      "date": "20 August",
      "amount": "- ₹748",
      "color": Colors.red,
      "status": "success",
    },
    {
      "name": "Malleshan Water Supplies",
      "date": "21 August",
      "amount": "- ₹10,000",
      "color": Colors.red,
      "status": "success",
    },
    {
      "name": "My Home Bhooja",
      "date": "21 August",
      "amount": "+ ₹2,580",
      "color": Colors.grey,
      "status": "failed",
    },
    {
      "name": "My Home Bhooja",
      "date": "21 August",
      "amount": "+ ₹2,580",
      "color": Colors.green,
      "status": "success",
    },
  ];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

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


  Widget Transactions(){
    return Container(
      color: Color(0XFFFFFFFF),
      child:Column(
        children: [
          // Filters row
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
            child: Row(
              children: [
                _buildFilterChip("Status"),
                _buildFilterChip("Payment Method"),
                _buildFilterChip("Date"),
                _buildFilterChip("Amount"),
              ],
            ),
          ),

          const Divider(height: 1),

          // Transactions list
          Expanded(
            child: ListView.builder(
              itemCount: transactions.length,
              itemBuilder: (context, index) {
                final txn = transactions[index];
                return ListTile(
                  leading: const CircleAvatar(
                    backgroundColor: Colors.blue,
                    child: Icon(Icons.person, color: Colors.white),
                  ),
                  title: Text(txn["name"].toString()),
                  subtitle: Text(txn["date"].toString()),
                  trailing: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        txn["amount"].toString(),
                        style: TextStyle(
                          color: txn["color"] as Color,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      if (txn["status"] == "failed")
                        const Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Icon(Icons.error, color: Colors.red, size: 14),
                            SizedBox(width: 4),
                            Text(
                              "Failed",
                              style: TextStyle(
                                  color: Colors.red, fontSize: 12),
                            ),
                          ],
                        ),
                    ],
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget CreditAccounts(){
    return Container(
      color: Color(0XFFFFFFFF),
      child:Center(
        child: Text("Credit Accounts Coming Soon..."),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        title: Text(
          'Financials',
          style: fontTextStyle(14, Color(0XFF2A2A2A), FontWeight.w500),
        ),
        iconTheme: IconThemeData(color: Color(0XFF2A2A2A)),
        leading: GestureDetector(
          onTap: () {
            Navigator.pop(context);
          },
          child: Padding(
            padding: const EdgeInsets.fromLTRB(
                8, 8, 8, 8), // Add padding if needed
            child: Image.asset(
              'images/backbutton_appbar.png',
              height: 24,
              width: 24,// Replace with your image path
              fit: BoxFit.contain, // Adjust the fit
            ),
          ),
        ),
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(50.0),
          child: Container(
            height: 38,
            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: AnimatedBuilder(
              animation: _tabController,
              builder: (context, _) {
                return TabBar(
                  controller: _tabController,
                  indicatorColor: Colors.transparent, // remove underline
                  dividerColor: Colors.transparent,
                  isScrollable: false,
                  overlayColor: MaterialStateProperty.all(Colors.transparent),// equal width
                  tabs: List.generate(2, (index) {
                    final labels = ['Transactions', 'Credit Accounts'];
                    final isSelected = _tabController.index == index;

                    return Container(
                      decoration: BoxDecoration(
                        color: isSelected ? const Color(0XFFF1F1F1) : Colors.transparent,
                        borderRadius: BorderRadius.circular(27),
                      ),
                      alignment: Alignment.center,
                      child: Text(
                        labels[index],
                        style: fontTextStyle(
                          12,
                          const Color(0XFF101214),
                          FontWeight.w600,
                        ),
                      ),
                    );
                  }),
                );
              },
            ),
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          // Tab 1: Transactions
          Transactions(),

          // Tab 2: Credit Accounts
          CreditAccounts()
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }

  Widget _buildFilterChip(String text) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 4),
      child: FilterChip(
        label: Text(text),
        onSelected: (val) {},
      ),
    );
  }
}