import React, { useState } from "react";
import { useOrganizationHierarchy } from "../../hooks/useEmployees";
import GlobalModel from "../common/GlobalModel";
import ManageReporting from "./ManageReporting";
import Avatar from "../common/Avatar";
import { SpinnerLoader } from "../common/Loader";

const EmpReportingManager = ({ employeeId, employee }) => {
    const { data, isLoading } = useOrganizationHierarchy(employeeId);
    const [showManageReportingModal, setShowManageReportingModal] = useState(false);

    if (isLoading)
        return (
            <div className="d-flex justify-content-center py-5">
                <SpinnerLoader />
            </div>
        );

    // Safe access to primary and secondary managers
    const primaryManager = data?.find((d) => d.isPrimary)?.reportTo;
    const secondaryManagers = data?.filter((d) => !d.isPrimary).map((d) => d.reportTo) || [];

    return (
        <div className="row">
            <div className="col-12 mb-4">
                <div className="card">
                    <div className="card-body">
                        <small className="card-text text-uppercase text-body-secondary small d-block text-start mb-3">
                            Reporting Manager
                        </small>

                        <div className="text-start">
                            {/* Primary Manager */}
                            <div className="row mb-2 align-items-start">
                                <div className="col-auto text-end pe-3"><i className="bx bx-user-circle me-1"></i>Primary Manager<span style={{ marginLeft: "50px" }}>:</span></div>
                                <div className="col text-wrap">
                                    {primaryManager
                                        ? `${primaryManager.firstName || ""} ${primaryManager.lastName || ""}`
                                        : "NA"}
                                </div>
                            </div>

                            {/* Secondary Managers */}
                            {secondaryManagers?.length > 0 && (
                                <div className="row mb-3 align-items-start">
                                    <div className="col-auto text-end pe-3"><i className="bx bx-group me-1"></i>Secondary Managers<span style={{ marginLeft: "25px" }}>:</span></div>
                                    <div className="col text-wrap">
                                        {secondaryManagers
                                            .map((m) => `${m.firstName || ""} ${m.lastName || ""}`)
                                            .join(", ")}
                                    </div>
                                </div>
                            )}
                        </div>

                        {/* Manage Reporting Button */}
                        <div className="mt-5 text-end" >
                            <button
                                className="btn btn-sm btn-primary"
                                onClick={() => setShowManageReportingModal(true)}
                            >
                                <i className="bx bx-network-chart me-1"></i> Manage Reporting
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {/* Manage Reporting Modal */}
            {showManageReportingModal && (
                <GlobalModel
                    isOpen={showManageReportingModal}
                    closeModal={() => setShowManageReportingModal(false)}
                >
                    <ManageReporting
                        employee={employee}
                        employeeId={employeeId}
                        onClosed={() => setShowManageReportingModal(false)}
                    />
                </GlobalModel>
            )}
        </div>
    );
};

export default EmpReportingManager;