import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:taxglide/consts/app_style.dart';
import 'package:taxglide/view/screens/history/flitter_popup.dart';
import 'package:taxglide/view/screens/history/pending_screen.dart';

class ServicesStatusScreen extends ConsumerStatefulWidget {
  const ServicesStatusScreen({super.key});

  @override
  ConsumerState<ServicesStatusScreen> createState() =>
      _ServicesStatusScreenState();
}

class _ServicesStatusScreenState extends ConsumerState<ServicesStatusScreen>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  final List<String> _tabs = [
    "Pending",
    "In Progress",
    "Completed",
    "Cancelled Request",
  ];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      length: _tabs.length,
      vsync: this,
      animationDuration: Duration.zero,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // ✅ Title
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 21),
              child: SizedBox(
                height: 50,
                width: double.infinity,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const SizedBox(width: 40), // ✅ Left side space balance
                    // ✅ CENTER TITLE
                      Text(
                       "My Task Status",
                       style: AppTextStyles.bold.copyWith(
                         fontSize: 24,
                         color: Color(0xFF111827),
                       ),
                     ),

                    // ✅ RIGHT SIDE FILTER ICON
                    GestureDetector(
                      onTap: () {
                        FlitterPopup.show(context);
                      },
                      child: Container(
                        width: 39,
                        height: 39,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          shape: BoxShape.circle,
                          border: Border.all(
                            color: const Color(0xFF055976),
                            width: 0.8,
                          ),
                        ),
                        child: const Center(
                          child: Icon(
                            Icons.filter_list,
                            color: Color(0xFF055976),
                            size: 22,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),

            // ✅ Tabs
            Container(
              decoration: const BoxDecoration(
                border: Border(
                  bottom: BorderSide(color: Color(0xFFDEDEDE), width: 1),
                ),
              ),
              child: Align(
                alignment: Alignment.centerLeft,
                child: TabBar(
                  controller: _tabController,
                  isScrollable: true,
                  padding: EdgeInsets.zero,
                  labelPadding: const EdgeInsets.symmetric(
                    horizontal: 16,
                    vertical: 10,
                  ),
                  tabAlignment: TabAlignment.start,
                  splashFactory: NoSplash.splashFactory,
                  overlayColor: const MaterialStatePropertyAll(
                    Colors.transparent,
                  ),
                  indicatorColor: const Color(0xFF5F297B),
                  indicator: const UnderlineTabIndicator(
                    borderSide: BorderSide(width: 3, color: Color(0xFF5F297B)),
                    insets: EdgeInsets.fromLTRB(6, 0, 4, 10),
                  ),
                  labelColor: const Color(0xFF5F297B),
                  unselectedLabelColor: const Color(0xFF6C7278),
                  labelStyle: AppTextStyles.semiBold.copyWith(
                    fontSize: 16,
                    height: 1.4,
                    letterSpacing: 0.03,
                    color: const Color(0xFF5F297B),
                  ),
                  unselectedLabelStyle: AppTextStyles.regular.copyWith(
                    fontSize: 16,
                    height: 1.4,
                    letterSpacing: 0.03,
                    color: const Color(0xFF6C7278),
                  ),
                  tabs: _tabs.map((tab) => Tab(text: tab)).toList(),
                ),
              ),
            ),

            // ✅ Tab Views
            Expanded(
              child: TabBarView(
                controller: _tabController,
                physics: const NeverScrollableScrollPhysics(),
                children: const [
                  ColoredBox(
                    color: Color.fromARGB(255, 230, 229, 229),
                    child: PendingScreen(status: "pending"),
                  ),
                  ColoredBox(
                    color: Color.fromARGB(255, 230, 229, 229),
                    child: PendingScreen(status: "inprogress"),
                  ),
                  ColoredBox(
                    color: Color.fromARGB(255, 230, 229, 229),
                    child: PendingScreen(status: "completed"),
                  ),
                  ColoredBox(
                    color: Color.fromARGB(255, 230, 229, 229),
                    child: PendingScreen(status: "cancelled"),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}