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';
import 'package:on_field_work/helpers/widgets/pill_tab_bar.dart'; // <-- import PillTabBar

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 {
  late TabController _tabController;

  @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;
    final Color primaryColor = contentTheme.primary;

    return Scaffold(
      backgroundColor: const Color(0xFFF1F1F1),
      appBar: CustomAppBar(
        title: "Employee Profile",
        projectName: " All Projects",
        onBackPressed: () => Get.back(),
        backgroundColor: appBarColor,
      ),
      body: Stack(
        children: [
          // Gradient at the top behind AppBar + Toggle
          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 ["Details", "Documents"],
                  icons: const [Icons.person, Icons.folder],
                  selectedColor: primaryColor,
                  unselectedColor: Colors.grey.shade600,
                  indicatorColor: primaryColor,
                  height: 48,
                ),
                Expanded(
                  child: TabBarView(
                    controller: _tabController,
                    children: [
                      EmployeeDetailPage(
                        employeeId: widget.employeeId,
                        fromProfile: true,
                      ),
                      UserDocumentsPage(
                        entityId: widget.employeeId,
                        isEmployee: true,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}