marco.pms.mobileapp/lib/view/employees/employee_profile_screen.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:on_field_work/view/employees/employee_detail_screen.dart';
import 'package:on_field_work/view/document/user_document_screen.dart';
import 'package:on_field_work/helpers/widgets/custom_app_bar.dart';
import 'package:on_field_work/helpers/utils/mixins/ui_mixin.dart';

class EmployeeProfilePage extends StatefulWidget {
  final String employeeId;

  const EmployeeProfilePage({super.key, required this.employeeId});

  @override
  State<EmployeeProfilePage> createState() => _EmployeeProfilePageState();
}

class _EmployeeProfilePageState extends State<EmployeeProfilePage>
    with SingleTickerProviderStateMixin, UIMixin {
  // We no longer need to listen to the TabController for setState,
  // as the TabBar handles its own state updates via the controller.
  late TabController _tabController;

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

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

  // --- No need for _buildSegmentedButton function anymore ---

  @override
  Widget build(BuildContext context) {
    // Accessing theme colors for consistency
    final Color appBarColor = contentTheme.primary;
    final Color primaryColor = contentTheme.primary;

    return Scaffold(
      backgroundColor: const Color(0xFFF1F1F1),
      appBar: CustomAppBar(
        title: "Employee Profile",
        onBackPressed: () => Get.back(),
        backgroundColor: appBarColor,
      ),
      body: Stack(
        children: [
          // === Gradient at the top behind AppBar + Toggle ===
          // This container ensures the background color transitions nicely
          Container(
            height: 50,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  appBarColor,
                  appBarColor.withOpacity(0.0),
                ],
              ),
            ),
          ),
          // === Main Content Area ===
          SafeArea(
            top: false,
            bottom: true,
            child: Column(
              children: [
                // 🛑 NEW: The Modern TabBar Implementation 🛑
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                  child: Container(
                    height: 48, // Define a specific height for the TabBar container
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(24.0), // Rounded corners for a chip-like look
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(0.15),
                          blurRadius: 4,
                          offset: const Offset(0, 2),
                        ),
                      ],
                    ),
                    child: TabBar(
                      controller: _tabController,
                      // Style the indicator as a subtle pill/chip
                      indicator: BoxDecoration(
                        color: primaryColor.withOpacity(0.1), // Light background color for the selection
                        borderRadius: BorderRadius.circular(24.0),
                      ),
                      indicatorSize: TabBarIndicatorSize.tab,
                      // The padding is used to slightly shrink the indicator area
                      indicatorPadding: const EdgeInsets.symmetric(horizontal: 4.0, vertical: 4.0),
                      
                      // Text styling
                      labelColor: primaryColor, // Selected text color is primary
                      unselectedLabelColor: Colors.grey.shade600, // Unselected text color is darker grey
                      labelStyle: const TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 15,
                      ),
                      unselectedLabelStyle: const TextStyle(
                        fontWeight: FontWeight.w500,
                        fontSize: 15,
                      ),

                      // Tabs (No custom widget needed, just use the built-in Tab)
                      tabs: const [
                        Tab(text: "Details"),
                        Tab(text: "Documents"),
                      ],
                      // Setting this to zero removes the default underline
                      dividerColor: Colors.transparent, 
                    ),
                  ),
                ),
                
                // 🛑 TabBarView (The Content) 🛑
                Expanded(
                  child: TabBarView(
                    controller: _tabController,
                    children: [
                      EmployeeDetailPage(
                        employeeId: widget.employeeId,
                        fromProfile: true,
                      ),
                      UserDocumentsPage(
                        entityId: widget.employeeId,
                        isEmployee: true,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}