import React from "react";
import { useBranchDetails } from "../../../hooks/useServiceProject";
import Avatar from "../../common/Avatar";
import { formatUTCToLocalTime } from "../../../utils/dateUtils";

const ViewBranchDetails = ({ BranchToEdit }) => {
    const { data, isLoading, isError, error: requestError } = useBranchDetails(BranchToEdit);

    console.log("branch details:", data);

    if (isLoading) return <p>Loading...</p>;
    if (isError) return <p>Error: {requestError?.message}</p>;

    return (
        <form className="container px-3">
            <div className="col-12 mb-1">
                <h5 className="fw-semibold m-0">Branch Details</h5>
            </div>
            <div className="row mb-1 mt-5">
                <div className="col-md-12 mb-4">
                    <div className="d-flex">
                        <label
                            className="form-label me-2 mb-0 fw-semibold text-start"
                            style={{ minWidth: "130px" }}
                        >
                            Branch Name:
                        </label>
                        <div className="text-muted">{data?.branchName || "N/A"}</div>
                    </div>
                </div>
                <div className="col-md-12 mb-4">
                    <div className="d-flex">
                        <label
                            className="form-label me-2 mb-0 fw-semibold text-start"
                            style={{ minWidth: "130px" }}
                        >
                            Branch Type:
                        </label>
                        <div className="text-muted">{data?.branchName || "N/A"}</div>
                    </div>
                </div>
                <div className="col-md-12 mb-4">
                    <div className="d-flex">
                        <label
                            className="form-label me-2 mb-0 fw-semibold text-start"
                            style={{ minWidth: "130px" }}
                        >
                            Project:
                        </label>
                        <div className="text-muted text-start">{data?.project?.name || "N/A"}</div>
                    </div>
                </div>

                <div className="col-md-12 text-start mb-2">
                    <div className="d-flex align-items-center">
                        <label
                            className="form-label me-2 mb-0 fw-semibold"
                            style={{ minWidth: "125px" }}
                        >
                            Updated By :
                        </label>
                        <>
                            <Avatar
                                size="xs"
                                classAvatar="m-0 me-1"
                                firstName={data.updatedBy.firstName}
                                lastName={data.updatedBy.lastName}
                            />
                            <span className="text-muted">
                                {`${data.updatedBy.firstName ?? ""} ${data.updatedBy.lastName ?? ""
                                    }`.trim() || "N/A"}
                            </span>
                        </>
                    </div>
                </div>
                <div className="col-md-12 text-start mb-3">
                    <div className="d-flex align-items-center">
                        <label
                            className="form-label me-2 mb-0 fw-semibold"
                            style={{ minWidth: "125px" }}
                        >
                            Created By :
                        </label>
                        <Avatar
                            size="xs"
                            classAvatar="m-0 me-1"
                            firstName={data?.createdBy?.firstName}
                            lastName={data?.createdBy?.lastName}
                        />
                        <span className="text-muted">
                            {`${data?.createdBy?.firstName ?? ""} ${data?.createdBy?.lastName ?? ""
                                }`.trim() || "N/A"}
                        </span>
                    </div>
                </div>
                <div className="col-md-12 mb-3">
                    <div className="d-flex">
                        <label
                            className="form-label me-2 mb-0 fw-semibold text-start"
                            style={{ minWidth: "130px" }}
                        >
                            Created At :
                        </label>
                        <div className="text-muted">
                            {data?.createdAt
                                ? formatUTCToLocalTime(data.createdAt, true)
                                : "N/A"}
                        </div>
                    </div>
                </div>
                <div className="col-12 mb-3 text-start">
                    <label className="form-label mb-2 fw-semibold">Contact Information:</label>
                    <div className="text-muted">
                        {data?.contactInformation ? (
                            JSON.parse(data.contactInformation).map((contact, index) => (
                                <div key={index} className="mb-3">
                                    <div className="fw-semibold mb-1">Person {index + 1}:-</div>
                                    <div>
                                        <label className="fw-semibold mb-1">Person Name:</label> {contact.contactPerson || "N/A"}
                                    </div>
                                    <div>
                                        <label className="fw-semibold mb-1">Designation:</label> {contact.designation || "N/A"}
                                    </div>
                                    <div>
                                        <label className="fw-semibold mb-1">Emails:</label> {contact.contactEmails?.join(", ") || "N/A"}
                                    </div>
                                    <div>
                                        <label className="fw-semibold mb-1">Numbers:</label> {contact.contactNumbers?.join(", ") || "N/A"}
                                    </div>
                                </div>
                            ))
                        ) : (
                            "N/A"
                        )}
                    </div>
                </div>
            </div>
        </form>
    );
};

export default ViewBranchDetails;