import BorderSeparatorApp from "@components/BorderSeparatorApp";
import { CardContainer } from "@components/CardContainer";
import { CoordinationSelectApp } from "@components/CoordinationSelectApp";
import { CountUp } from "@components/CountUp";
import { ListVirtual } from "@components/Crud/ListVirtual";
import { IconApp } from "@components/IconApp";
import { InputApp } from "@components/InputApp";
import { OptionsHours } from "@components/Options/OptionsHours";
import { SelectSearchApp } from "@components/SelectSearchApp";
import { formatDate } from "@helpers/FormatString";
import { useCurrentDatetime } from "@hooks/useCurrentDateTime";
import { useForm } from "@hooks/useForm";
import { useIsMobile } from "@hooks/useIsMobile";
import {
    clearSchedulesList,
    startGetAttendanceRounds,
} from "@redux/slices/operators/AttendanceRounds";
import { Empty } from "antd";
import dayjs from "dayjs";
import { motion } from "framer-motion";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Accordion, Button, Col, Row } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { startShow as startShowBuildings } from "@redux/slices/operators/Building";
import { startShow as startListCurricula } from "@redux/slices/teachers/v2/curriculaSlice";
import AttendanceRoundsCard from "./AttendanceRoundsCard";
import AttendanceRoundsRegisterModal from "./AttendanceRoundsRegisterModal";

const defaultValues = {
    date: dayjs().format("YYYY-MM-DD"),
    coordination_id: null,
    curriculum_id: null,
    building_id: null,
    hours: [], // para el selector multiple
    times: [], // ajustado para enviar al back
    errors: {},
};

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

    const { list: curriculaList } = useSelector((state) => state.curricula);
    const { list: buildingsList } = useSelector((state) => state.building);
    const { schedulesList, openForm, activeSchedule } = useSelector(
        (state) => state.attendanceRounds,
    );

    const isMobile = useIsMobile();

    //* Fecha/hora mediante API
    const { currentTime } = useCurrentDatetime(10000);

    const todayDate = dayjs().format("YYYY-MM-DD");
    const monthAgoDate = dayjs().subtract(2, "month").format("YYYY-MM-DD");

    const [curriculumsByCoordination, setCurriculumsByCoordination] = useState(
        [],
    );

    const { values, handleInputChange, setInputValue, reset } =
        useForm(defaultValues);
    const {
        date,
        coordination_id,
        curriculum_id,
        building_id,
        hours,
        times,
        errors,
    } = values;

    const canStartSearch = useMemo(() => {
        return coordination_id && times?.length > 0 && date;
    }, [values]);

    //* Importante memoizar data para poder pasarlo a ListVirtual, si no el scroll no funciona debido a que es un valor que viene de redux y está cambiando
    const memoizedBuildings = useMemo(
        () => schedulesList?.grouped || [],
        [schedulesList?.grouped],
    );

    //* Memoizar el componente para que no se recree en cada render
    const renderBuildingItem = useCallback(
        (group, index) => (
            <Accordion
                key={group.building.id}
                defaultActiveKey={"0"}
                alwaysOpen={false}
            >
                <Accordion.Item
                    eventKey={String(index)}
                    style={{
                        marginBottom: isMobile ? "12px" : "16px",
                        border: "1px solid #339af0",
                        borderRadius: "8px",
                        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.15)",
                        background: "#fff",
                        overflow: "hidden",
                    }}
                >
                    <Accordion.Header>
                        <IconApp
                            iconClassName="fa fa-building me-3"
                            fontSize={"18px"}
                        />

                        <strong className="text-size-15">
                            {group?.building?.code ||
                                "Edificio no identificado"}
                        </strong>
                    </Accordion.Header>

                    <Accordion.Body>
                        {group.floors?.length > 0 ? (
                            group.floors.map((floor, floorIndex) => (
                                <div key={floorIndex} className="mb-4">
                                    <BorderSeparatorApp
                                        title={
                                            floor?.floor ||
                                            "Piso no identificado"
                                        }
                                        color="black"
                                        fontSize="17px"
                                        marginTopLine="mt-0"
                                        marginTop="mt-0"
                                        bold
                                    />

                                    {floor.items?.length > 0 ? (
                                        <div
                                            className="floor-scroll-container"
                                            style={{
                                                height: "550px", // Altura fija necesaria para Virtuoso
                                                overflow: "hidden", // Virtuoso gestiona el scroll
                                                borderRadius: "6px",
                                            }}
                                        >
                                            <ListVirtual
                                                listId={`floor-${group.building.id}-${floor.floor}-${floorIndex}`}
                                                data={floor.items}
                                                height="100%"
                                                showFooter
                                                searchKeys={[
                                                    "schedule_id",
                                                    "classroom.name",
                                                    "group.code",
                                                    "school_subject.name",
                                                    "teacher.full_name",
                                                ]}
                                                placeholder={
                                                    "Buscar por folio, aula, código de grupo, materia o docente"
                                                }
                                                renderItem={(schedule) => (
                                                    <motion.div
                                                        key={
                                                            schedule.schedule_id
                                                        }
                                                        initial={{
                                                            opacity: 0,
                                                            y: 10,
                                                        }}
                                                        animate={{
                                                            opacity: 1,
                                                            y: 0,
                                                        }}
                                                        exit={{
                                                            opacity: 0,
                                                            y: -10,
                                                        }}
                                                        transition={{
                                                            duration: 0.2,
                                                        }}
                                                    >
                                                        <AttendanceRoundsCard
                                                            schedule={schedule}
                                                            currentTime={
                                                                currentTime
                                                            }
                                                            handleSearch={
                                                                handleSearch
                                                            }
                                                        />
                                                    </motion.div>
                                                )}
                                            />
                                        </div>
                                    ) : (
                                        <Empty
                                            image={Empty.PRESENTED_IMAGE_SIMPLE}
                                            description="No se encontraron horarios en este piso."
                                        />
                                    )}
                                </div>
                            ))
                        ) : (
                            <Empty
                                image={Empty.PRESENTED_IMAGE_SIMPLE}
                                description="No se encontraron pisos en este edificio."
                            />
                        )}
                    </Accordion.Body>
                </Accordion.Item>
            </Accordion>
        ),
        [currentTime],
    );

    useEffect(() => {
        dispatch(
            startListCurricula({ asList: true, checkCoordinations: true }),
        );

        dispatch(startShowBuildings({ asList: true }, false));

        //* Limpiar al desmontar
        return () => {
            handleClear();
        };
    }, []);

    //* Filtrar las ofertas educativas de acuerdo a la coordinación seleccionada
    // useEffect(() => {
    //     if (coordination_id && curriculaList) {
    //         const filteredCurriculaList = curriculaList?.filter(
    //             (curricula) => curricula?.coordination_id == coordination_id
    //         );

    //         setCurriculumsByCoordination(filteredCurriculaList || []);
    //         setInputValue("curriculum_id", null);
    //     } else if (curriculaList) {
    //         setCurriculumsByCoordination(curriculaList);
    //     }
    // }, [coordination_id, curriculaList]);

    //* Ajustar array 'times' cuando se seleccionan horas
    useEffect(() => {
        if (hours?.length > 0) {
            const hoursValues = hours?.map((h) => h?.value);
            setInputValue("times", hoursValues);
        } else {
            setInputValue("times", []);
        }
    }, [hours]);

    const moveDay = (direction) => {
        let newDate = dayjs(date);

        if (direction === "back") {
            newDate = newDate.subtract(1, "day");
        } else if (direction === "forward") {
            newDate = newDate.add(1, "day");
        }

        newDate = newDate.format("YYYY-MM-DD");

        if (newDate < monthAgoDate || newDate > todayDate) {
            return;
        }

        setInputValue("date", newDate);
    };

    const handleSearch = () => {
        if (canStartSearch) {
            dispatch(
                startGetAttendanceRounds({ ...values, from: date, to: date }),
            );
        }
    };

    const handleClear = () => {
        reset();
        dispatch(clearSchedulesList());
    };

    return (
        <CardContainer title="Rondines de verificación de asistencias">
            <Row>
                <Col xs={12} sm={12} md={12} lg={12} xl={12} xxl={6}>
                    <CoordinationSelectApp
                        coordination_name="coordination_id"
                        coordination_id={coordination_id}
                        handleInputChange={handleInputChange}
                        placeholder={"Seleccione una coordinación"}
                        infoText={null}
                        aboveFooter
                        required
                        errors={errors}
                    />
                </Col>

                {/* <Col xs={12} sm={12} md={12} lg={12} xl={6} xxl={6}>
                    <SelectSearchApp
                        title="Oferta educativa"
                        placeholder="Filtrar por oferta educativa"
                        name="curriculum_id"
                        value={curriculum_id}
                        onChange={handleInputChange}
                        options={curriculumsByCoordination.map((d) => ({
                            value: d.id,
                            label: d.full_name,
                        }))}
                        aboveFooter
                        errorText={
                            errors.curriculum_id && errors.curriculum_id[0]
                        }
                    />
                </Col> */}

                <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={3}>
                    <SelectSearchApp
                        title="Hora"
                        placeholder="Seleccione la hora"
                        name="hours"
                        value={hours}
                        multiple
                        onChange={handleInputChange}
                        options={OptionsHours}
                        aboveFooter
                        required
                        errorText={errors.hours && errors.hours[0]}
                    />
                </Col>

                <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={3}>
                    <SelectSearchApp
                        title="Edificio"
                        placeholder="Filtrar por edificios"
                        name="building_id"
                        value={building_id}
                        onChange={handleInputChange}
                        options={buildingsList.map((b) => ({
                            value: b.id,
                            label: b.code,
                        }))}
                        aboveFooter
                        errorText={errors.building_id && errors.building_id[0]}
                    />
                </Col>
            </Row>

            <Row className="d-flex justify-content-center w-100 mt-3">
                <Col
                    md={12}
                    className="d-flex align-items-center justify-content-center w-100"
                >
                    {date && (
                        <IconApp
                            iconClassName="fa-regular fa-chevron-left mr-4 mt-4"
                            fontSize="20px"
                            description="Retroceder un día"
                            isClickable
                            onClick={() => moveDay("back")}
                            disabled={date <= monthAgoDate}
                        />
                    )}
                    <InputApp
                        type="date"
                        name="date"
                        title={"Fecha"}
                        centeredinput="true"
                        value={date}
                        onChange={handleInputChange}
                        min={monthAgoDate}
                        max={todayDate}
                    />
                    {date && (
                        <IconApp
                            iconClassName="fa-regular fa-chevron-right ml-4 mt-4"
                            fontSize="20px"
                            description="Avanzar un día"
                            isClickable
                            onClick={() => moveDay("forward")}
                            disabled={date >= todayDate}
                        />
                    )}
                </Col>

                {date && (
                    <h4 className="d-flex justify-content-center w-100 mt-1">
                        {formatDate(date)}
                    </h4>
                )}
            </Row>

            <Row className="text-center mt-4 mb-3">
                <Col md={12}>
                    <Button
                        className="me-4"
                        onClick={handleSearch}
                        disabled={!canStartSearch}
                    >
                        Realizar búsqueda
                        <IconApp iconClassName="fas fa-search ml-2" />
                    </Button>

                    <Button variant="secondary" onClick={handleClear}>
                        Limpiar
                    </Button>
                </Col>
            </Row>

            {!canStartSearch && !schedulesList ? (
                <Row className="mt-5">
                    <Empty
                        image={Empty.PRESENTED_IMAGE_SIMPLE}
                        className="text-size-16"
                        description="Seleccione una coordinación, una hora y una fecha para habilitar la búsqueda."
                    />
                </Row>
            ) : (
                <>
                    {schedulesList?.total > 0 && (
                        <>
                            <hr />

                            <Row className="g-3 mb-4 d-flex justify-content-center w-100 mt-2">
                                <Col sm="6" md="4" lg="3">
                                    <div
                                        className="shadow-sm rounded-4 p-3 text-center border"
                                        style={{
                                            background:
                                                "linear-gradient(135deg, #e8f1ff, #f4f8ff)",
                                            borderColor: "#b3d4ff",
                                            color: "#004a9f",
                                        }}
                                    >
                                        <div
                                            className="fw-semibold text-uppercase mb-1"
                                            style={{
                                                letterSpacing: "0.5px",
                                            }}
                                        >
                                            Total de horarios
                                        </div>
                                        <div className="fs-3 fw-bold">
                                            <IconApp
                                                iconClassName="fa-solid fa-calendar-alt me-2"
                                                style={{ color: "#007bff" }}
                                            />

                                            <CountUp
                                                value={schedulesList.total}
                                                duration={900}
                                            />
                                        </div>
                                    </div>
                                </Col>
                                <Col sm="6" md="4" lg="3">
                                    <div
                                        className="shadow-sm rounded-4 p-3 text-center border"
                                        style={{
                                            background:
                                                "linear-gradient(135deg, #e8fff4, #f4fff9)",
                                            borderColor: "#8fd19e",
                                            color: "#0f5132",
                                        }}
                                    >
                                        <div
                                            className="fw-semibold text-uppercase mb-1"
                                            style={{
                                                letterSpacing: "0.5px",
                                            }}
                                        >
                                            Rondines realizados
                                        </div>
                                        <div className="fs-3 fw-bold">
                                            <IconApp
                                                iconClassName="fa-solid fa-clipboard-check me-2"
                                                style={{ color: "#198754" }}
                                            />

                                            <CountUp
                                                value={
                                                    schedulesList.rounded_total ||
                                                    0
                                                }
                                                duration={900}
                                            />
                                        </div>
                                    </div>
                                </Col>
                            </Row>

                            <Row>
                                <Col
                                    className="mx-auto mt-3 mb-5"
                                    style={{ maxWidth: "75rem" }}
                                >
                                    <div
                                        style={{
                                            // maxHeight: "90vh",
                                            overflowY: "auto",
                                            marginBottom: "15px",
                                        }}
                                    >
                                        {memoizedBuildings.map(
                                            renderBuildingItem,
                                        )}
                                    </div>
                                </Col>
                            </Row>
                        </>
                    )}
                </>
            )}

            {openForm && (
                <AttendanceRoundsRegisterModal handleSearch={handleSearch} />
            )}
        </CardContainer>
    );
}