import React, { useState } from "react";
import { Inertia } from "@inertiajs/inertia";
import { useTranslation } from "react-i18next";
import { usePage } from "@inertiajs/inertia-react";
import { COLLEGE_NAME } from "../../../Constants/enums";
import { Image, message } from "antd";
import Layout from "../../../Layout/Index";
import BackArrow from "./../../../Components/Common/BackArrow";
import Button from "../../../Components/Common/Button";
import CloseIcon from "../../../../assets/icons/close-icon.svg";
import TickIcon from "../../../../assets/icons/tick-icon.svg";
import Card from "./../../../Components/Common/Card";
import RejectModal from "./../../../Components/Admin/Finances/RejectModal";
import ConditionalModal from "./../../../Components/Admin/Finances/ConditionalModal";
import useCountries from "../../../hooks/useCountries";
import profilePic from "../../../../assets/profilepic.png";
import ApplicationStatus from "../../../Components/Common/ApplicationStatus";
import moment from "moment";
import { updateApplicationStatus } from "../../../Constants/globals";
import Timer from "../../../Components/Common/Timer";

const Details = ({ student, studentFeePayments, application = [] }) => {
    // states
    const [loading, setLoading] = useState(false);
    const [isRejectModalVisible, setIsRejectModalVisible] = useState(false);
    const [isConditionalModalVisible, setIsConditionalModalVisible] =
        useState(false);
    const [isStatusActionVisible, setIsStatusActionVisible] = useState(false);
    const { t } = useTranslation();
    const { locale = "" } = usePage().props;
    const { countries } = useCountries();

    const toggleRejectModal = () => {
        return setIsRejectModalVisible(!isRejectModalVisible);
    };

    const toggleConditionalModal = () => {
        return setIsConditionalModalVisible(!isConditionalModalVisible);
    };

    const toggleStatusActionVisible = () => {
        return setIsStatusActionVisible(!isStatusActionVisible);
    };

    // handle status update
    const acceptStatus = (fee_payment_id) => {
        Inertia.post(
            route("admin.finance-change-status-request"),
            {
                reason: "Fee Payment Accepted",
                fee_payment_id:fee_payment_id,
                status: "2",
            },
            {
                preserveState: false,
                onStart: () => {
                    setLoading(true);
                },
                onSuccess: () => {
                    message.success(
                        `${t("Fee Payment Status Updated Successfully")}`
                    );
                },
                onError: (errors) => {
                    message.error(errors.error_message);
                },
                onFinish: () => {
                    setLoading(false);
                },
            }
        );
    };

    return (
        <Layout current="finances">
            <BackArrow URL={route("admin.finances.index")} />
            <div className="application-details-wrapper">
                <div className="d-flex align-items-center justify-content-between mt-24 mb-16">
                    <h1 className="f-18 fw-500 mb-0 d-flex">
                        <span>{t("Application ID")} #</span>{" "}
                        <span>{studentFeePayments?.application?.id}</span>
                    </h1>
                    {updateApplicationStatus.includes(studentFeePayments?.status) && (
                        <div className="d-flex align-items-center">
                            {studentFeePayments?.timer !== null && !isStatusActionVisible ? (
                                <>
                                    <ApplicationStatus
                                        className="mr-20"
                                        status={studentFeePayments?.status}
                                    />

                                    <Timer
                                        time={studentFeePayments?.timer}
                                        className="mr-30"
                                    />

                                    <Button
                                        background="#ffffff"
                                        color="#595991"
                                        borderColor="#595991"
                                        title="Change Status"
                                        minWidth={128}
                                        handler={toggleStatusActionVisible}
                                    />
                                </>
                            ) : (
                                <>
                                    <Button
                                        borderColor="#FF4E4E"
                                        color="#FF4E4E"
                                        title={t("Reject")}
                                        icon={CloseIcon}
                                        handler={toggleRejectModal}
                                    />
                                    <Button
                                        background="#2F2F75"
                                        color="#FFFFFF"
                                        borderWidth={0}
                                        title={t("Conditional")}
                                        className="mx-12"
                                        handler={toggleConditionalModal}
                                    />
                                    <Button
                                        background="#089752"
                                        color="#FFFFFF"
                                        borderWidth={0}
                                        title={t("Accept")}
                                        icon={TickIcon}
                                        loading={loading}
                                        onClick={() =>
                                            acceptStatus(studentFeePayments.id)
                                        }
                                    />
                                </>
                            )}
                        </div>
                    )}
                </div>

                {/* personal information */}
                <Card minHeight={240} className="mb-16">
                    <h2 className="mb-20">{t("Personal Information")} </h2>
                    <div className="d-flex align-items-center">
                        <Image
                            width={125}
                            height={125}
                            src={student?.image || profilePic}
                        />
                        <div className="row w-60 ml-20">
                            <div className="col-4">
                                <div className="mb-30">
                                    <h3>{t("Full name")} </h3>
                                    <p>
                                        {locale === "en"
                                            ? studentFeePayments?.application?.fullname
                                            : studentFeePayments?.application?.fullname_tr}
                                    </p>
                                </div>
                                <div className="mb-30">
                                    <h3>{t("IQAMA number")} </h3>
                                    <p>{studentFeePayments?.application?.id_number}</p>
                                </div>
                                <div>
                                    <h3>{t("Country of Birth")} </h3>
                                    <p>
                                        {countries[studentFeePayments?.application?.native_country]}
                                    </p>
                                </div>
                            </div>
                            <div className="col-4">
                                <div className="mb-30">
                                    <h3>{t("College")} </h3>
                                    <p className={"text-capitalize"}>
                                        {COLLEGE_NAME[studentFeePayments?.application?.college]}
                                    </p>
                                </div>
                                <div className="mb-30">
                                    <h3>{t("Email address")} </h3>
                                    <p className={"text-capitalize"}>
                                        {studentFeePayments?.application?.email}
                                    </p>
                                </div>
                                <div>
                                    <h3>{t("Date of birth")} </h3>
                                    <p>{studentFeePayments?.application?.dob}</p>
                                </div>
                            </div>

                        </div>
                    </div>
                </Card>

                {/* Application Payment */}
                {studentFeePayments && (
                    <Card minHeight={150} className="mb-16">
                        <h2 className="mb-20">{t("Payment Details")} </h2>
                        <div className="row">
                            <div className="col-md-3">
                                <Image
                                    width={125}
                                    height={125}
                                    src={studentFeePayments?.receipt}
                                />
                            </div>
                            <div className="col-md-3">
                                <h3>{t("Currency")} </h3>
                                <p>{studentFeePayments?.currency}</p>
                            </div>
                            <div className="col-md-3">
                                <h3>{t("Payment Amount")} </h3>
                                <p>{studentFeePayments?.amount}</p>
                            </div>
                            <div className="col-md-3">
                                <h3>{t("Paid at")} </h3>
                                <p>
                                    {studentFeePayments?.created_at?.slice(0, 10)}
                                </p>
                            </div>
                            <div className="col-md-3">
                                <h3>{t("Bank Name")} </h3>
                                <p>{studentFeePayments?.bank_name}</p>
                            </div>
                            <div className="col-md-3">
                                <h3>{t("Bank Branch")} </h3>
                                <p>{studentFeePayments?.bank_branch}</p>
                            </div>
                            <div className="col-md-3">
                                <h3>{t("Bank Country")} </h3>
                                <p>
                                    {countries[studentFeePayments?.bank_country] ||
                                        studentFeePayments?.bank_country}
                                </p>
                            </div>
                            <div className="col-md-3">
                                <h3>{t("To Account Number")} </h3>
                                <p>{studentFeePayments?.account_number}</p>
                            </div>
                        </div>
                    </Card>
                )}

                {/* Application information */}
                <Card minHeight={150} className="mb-16">
                    <h2 className="mb-20">{t("Application information")} </h2>
                    <div className="row ">
                        <div className="col-md-3">
                            <h3>{t("Applied For")} </h3>
                            <p className={"text-capitalize"}>
                                {studentFeePayments?.application?.apply_for}
                            </p>
                        </div>
                        <div className="col-md-3">
                            <h3>{t("Enroll Type")} </h3>
                            <p>
                                {studentFeePayments?.application?.apply_for === "major"
                                    ? studentFeePayments?.application?.major
                                    : studentFeePayments?.application?.course}
                            </p>
                        </div>
                        <div className="col-md-3">
                            <h3>{t("Applied Date")} </h3>
                            <p className={"text-capitalize"}>
                                {moment(
                                    studentFeePayments?.application?.created_at
                                ).format("YYYY-MM-DD")}
                            </p>
                        </div>
                    </div>
                </Card>

                {/* reject modal */}
                {isRejectModalVisible && (
                    <RejectModal
                        isModalVisible={isRejectModalVisible}
                        handleCancel={toggleRejectModal}
                        fee_payment_id={studentFeePayments.id}
                        status="-1"
                    />
                )}

                {/* conditional modal */}
                {isConditionalModalVisible && (
                    <ConditionalModal
                        isModalVisible={isConditionalModalVisible}
                        handleCancel={toggleConditionalModal}
                        fee_payment_id={studentFeePayments.id}
                        status="3"
                    />
                )}
            </div>
        </Layout>
    );
};

export default Details;