import { TooltipAntdApp } from "@components/TooltipAntdApp";
import { confirmCancelSportsReservations } from "@helpers/confirmCancelSportsReservations";
import { formatDateString } from "@helpers/FormatString";
import {
    setOpenForm,
    startCancelSportsReservations,
    startShowSportsReservations,
} from "@redux/slices/operators/SportsReservations";
import AddReservationModal from "@views/employees/sports_reservations/AddReservationModal";
import { Empty } from "antd";
import React, { useEffect } from "react";
import { Alert, Button, Col, Row } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { CardContainer, IconApp } from "../../../components";
import { OptionsSportsStatus } from "../../../components/Options/sports/OptionsSportsStatus";
import StudentInfoApp from "../../../components/StudentInfoApp";
import { useIsMobile } from "../../../hooks/useIsMobile";

const sportsStatusMap = Object.fromEntries(
    OptionsSportsStatus.map((option) => [option.value, option.label]),
);

export default function SportsReservationsScreen() {
    const dispatch = useDispatch();

    const { user } = useSelector((state) => state.auth);
    const { list, openForm } = useSelector((state) => state.sportsReservations);

    const isMobile = useIsMobile();
    const suspensionUntil = list?.suspended_data?.suspended_until || null;
    const hasActiveSuspension = !!list?.suspended_data?.is_suspended;

    useEffect(() => {
        getList();
    }, [user]);

    const getList = () => {
        if (!user) {
            return;
        }

        dispatch(
            startShowSportsReservations(
                {
                    academic_record_id: user?.id,
                },
                false,
            ),
        );
    };

    const handleCancel = async (reservation) => {
        //* Helper que maneja los Swal para cada caso
        const { confirmed } = await confirmCancelSportsReservations({
            reservation,
        });

        if (!confirmed) {
            return;
        }

        dispatch(
            startCancelSportsReservations(reservation?.id, () => getList()),
        );
    };

    return (
        <CardContainer
            title="Reservas Deportivas"
            styleBody={isMobile ? { paddingRight: 0, paddingLeft: 0 } : {}}
        >
            <div className="student-sports-reservations">
                <Row className={isMobile ? "mx-1" : "mx-2"}>
                    <StudentInfoApp
                        xl={12}
                        lg={12}
                        md={12}
                        sm={12}
                        xs={12}
                        academic_record={user}
                    />
                </Row>

                <Row className={`mt-5 ${!isMobile ? "mx-2" : undefined}`}>
                    <Col lg={12}>
                        <div>
                            <Row className="align-items-center">
                                <Col md={6} className="mb-2 mb-md-0">
                                    <h5 className="student-sports-reservations__title mb-0">
                                        Mis reservas deportivas
                                    </h5>
                                    <div className="student-sports-reservations__subtitle mt-1">
                                        Consulta y administra tus reservas de
                                        espacios deportivos.
                                    </div>
                                </Col>

                                {!hasActiveSuspension ? (
                                    <Col
                                        md={6}
                                        className="d-flex justify-content-end mt-2"
                                    >
                                        <Button
                                            className="btn-app"
                                            variant="info"
                                            onClick={async () => {
                                                await dispatch(
                                                    setOpenForm(true),
                                                );
                                            }}
                                        >
                                            <IconApp iconClassName="fa fa-plus me-2" />
                                            Nueva reserva
                                        </Button>
                                    </Col>
                                ) : null}
                            </Row>

                            {hasActiveSuspension && (
                                <Alert
                                    variant="danger"
                                    className="mt-2 d-flex align-items-start shadow-sm"
                                >
                                    <div className="text-size-12 px-0">
                                        <div className="fw-semibold">
                                            Tienes una suspensión de derecho a
                                            reserva
                                        </div>

                                        <div className="mt-2">
                                            No podrás generar nuevas reservas
                                            hasta el día{" "}
                                            <strong>
                                                {formatDateString(
                                                    suspensionUntil,
                                                    true,
                                                    false,
                                                    false,
                                                    true,
                                                )}
                                            </strong>
                                            .
                                        </div>
                                    </div>
                                </Alert>
                            )}

                            <div
                                className={"table-responsive-md"}
                                style={{
                                    marginTop: hasActiveSuspension
                                        ? "10px"
                                        : "15px",
                                }}
                                data-first-col="bg-blue"
                            >
                                <table className="table table-sm table-striped table-bordered align-middle">
                                    <thead className="text-size-12">
                                        <tr className="bg-blue">
                                            <th className="align-middle text-center">
                                                Folio
                                            </th>
                                            <th className="align-middle">
                                                Área
                                            </th>
                                            <th className="align-middle text-center">
                                                Fecha de reservación
                                            </th>
                                            <th className="align-middle text-center">
                                                Hora
                                            </th>
                                            <th className="align-middle text-center">
                                                Acompañantes
                                            </th>
                                            <th className="align-middle text-center">
                                                Estatus
                                            </th>
                                            <th className="align-middle text-center">
                                                Cancelar
                                            </th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        {list?.data?.map((item) => (
                                            <tr
                                                key={item.id}
                                                className="text-size-11"
                                            >
                                                <td
                                                    data-th="Folio"
                                                    data-center
                                                    className="text-center align-middle text-black no-wrap"
                                                >
                                                    #{item.id}
                                                </td>

                                                <td
                                                    data-th="Área"
                                                    data-center
                                                    className="align-middle text-black"
                                                >
                                                    {item?.area || "-"}
                                                </td>

                                                <td
                                                    data-th="Fecha de reservación"
                                                    data-center
                                                    className="align-middle text-center text-black"
                                                >
                                                    {item?.day
                                                        ? formatDateString(
                                                              item.day,
                                                              true,
                                                              false,
                                                              false,
                                                              true,
                                                          )
                                                        : "-"}
                                                </td>

                                                <td
                                                    data-th="Hora"
                                                    data-center
                                                    className="align-middle text-center text-black"
                                                >
                                                    {item?.hour || "-"}
                                                </td>

                                                <td
                                                    data-th="Acompañantes"
                                                    data-center
                                                    className="align-middle text-center text-black"
                                                >
                                                    {item?.companions &&
                                                    item?.companions?.length >
                                                        0 ? (
                                                        <div>
                                                            <span className="me-3">
                                                                {
                                                                    item
                                                                        .companions
                                                                        .length
                                                                }
                                                            </span>

                                                            <TooltipAntdApp
                                                                headerContent="Acompañantes"
                                                                bodyCenter={
                                                                    false
                                                                }
                                                                bodyContent={
                                                                    <div>
                                                                        {item.companions.map(
                                                                            (
                                                                                companion,
                                                                                index,
                                                                            ) => (
                                                                                <ul
                                                                                    key={
                                                                                        index
                                                                                    }
                                                                                    style={{
                                                                                        marginBottom:
                                                                                            "0.5rem",
                                                                                    }}
                                                                                >
                                                                                    <li>
                                                                                        {
                                                                                            companion
                                                                                        }
                                                                                    </li>
                                                                                </ul>
                                                                            ),
                                                                        )}
                                                                    </div>
                                                                }
                                                                placement="right"
                                                            >
                                                                <>
                                                                    <IconApp iconClassName="fas fa-users text-info" />
                                                                </>
                                                            </TooltipAntdApp>
                                                        </div>
                                                    ) : (
                                                        <span>0</span>
                                                    )}
                                                </td>

                                                <td
                                                    data-th="Estatus"
                                                    data-center
                                                    className="align-middle text-center text-black text-size-11 fw-bold"
                                                >
                                                    {item?.status ? (
                                                        <>
                                                            {sportsStatusMap[
                                                                item?.status
                                                            ] || "-"}
                                                        </>
                                                    ) : (
                                                        "-"
                                                    )}
                                                </td>

                                                <td
                                                    data-th="Cancelar"
                                                    data-center
                                                    className="align-middle text-center"
                                                >
                                                    <div
                                                        style={{
                                                            opacity:
                                                                item?.status !==
                                                                "Activo"
                                                                    ? 0.3
                                                                    : 1,
                                                        }}
                                                    >
                                                        <IconApp
                                                            iconClassName={
                                                                "fa fa-ban text-danger"
                                                            }
                                                            fontSize="18px"
                                                            description={
                                                                "Cancelar"
                                                            }
                                                            isClickable
                                                            onClick={() =>
                                                                handleCancel(
                                                                    item,
                                                                )
                                                            }
                                                        />
                                                    </div>
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>

                                {(!list?.data || list?.data?.length === 0) && (
                                    <div className="pt-2">
                                        <Empty
                                            image={Empty.PRESENTED_IMAGE_SIMPLE}
                                            description="Aún no tienes reservas registradas."
                                        />
                                    </div>
                                )}
                            </div>
                        </div>
                    </Col>
                </Row>
            </div>

            {openForm && (
                <AddReservationModal
                    academicRecordProp={user}
                    areaProp={"Cancha de Pádel"} // Quitar esta prop cuando se añadan otras áreas al array de opciones
                    callback={() => {
                        getList();
                    }}
                />
            )}
        </CardContainer>
    );
}