import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'package:on_field_work/controller/directory/directory_controller.dart';
import 'package:on_field_work/controller/directory/notes_controller.dart';

import 'package:on_field_work/helpers/widgets/custom_app_bar.dart';

import 'package:on_field_work/view/directory/directory_view.dart';
import 'package:on_field_work/view/directory/notes_view.dart';
import 'package:on_field_work/helpers/utils/mixins/ui_mixin.dart';
import 'package:on_field_work/helpers/widgets/pill_tab_bar.dart';

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

  @override
  State<DirectoryMainScreen> createState() => _DirectoryMainScreenState();
}

class _DirectoryMainScreenState extends State<DirectoryMainScreen>
    with SingleTickerProviderStateMixin, UIMixin {
  late TabController _tabController;

  final DirectoryController controller = Get.put(DirectoryController());
  final NotesController notesController = Get.put(NotesController());

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

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

  @override
  Widget build(BuildContext context) {
    final Color appBarColor = contentTheme.primary;

    return Scaffold(
      backgroundColor: const Color(0xFFF1F1F1),
      appBar: CustomAppBar(
        title: "Directory",
        onBackPressed: () => Get.offNamed('/dashboard'),
        backgroundColor: appBarColor,
      ),
      body: Stack(
        children: [
          // === TOP GRADIENT ===
          Container(
            height: 50,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  appBarColor,
                  appBarColor.withOpacity(0.0),
                ],
              ),
            ),
          ),

          SafeArea(
            top: false,
            bottom: true,
            child: Column(
              children: [
                PillTabBar(
                  controller: _tabController,
                  tabs: const ["Directory", "Notes"],
                  selectedColor: contentTheme.primary,
                  unselectedColor: Colors.grey.shade600,
                  indicatorColor: contentTheme.primary,
                ),

                // === TABBAR VIEW ===
                Expanded(
                  child: TabBarView(
                    controller: _tabController,
                    children: [
                      DirectoryView(),
                      NotesView(),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}