import React, { useEffect } from "react";
import { Button, Col, Row, OverlayTrigger, Tooltip, Badge, Modal } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import {
    CardContainer,
    InputApp,
    IconApp,
    ModalApp,
    SelectSearchApp,
} from "@components";
import { CrudApp } from "@components/Crud/CrudApp";
import { InvoiceInfoApp } from "./InvoiceInfoApp";
import GenerateInvoice from "./GenerateInvoice";
import LinkToStudenFormApp from "@components/LinkToStudenFormApp";
import { formatDateShortMonth, formatMoney } from "@helpers/FormatString";
import { useForm } from "@hooks/useForm";
import Swal from "sweetalert2";
import {
    startGetInvoiceIncidents,
    startRetryInvoiceIncidentAsPublicGeneral,
    startRetryInvoiceIncident,
    startRetryInvoiceIncidentsAsPublicGeneral,
    startRetryInvoiceIncidents,
    startValidateInvoiceData,
} from "@redux/slices/students/studentInvoice";
import { reasonOptions, statusOptions } from "@components/Options/OptionsInvoiceIncidents";

const defaultValues = {
    page: 1,
    query: "",
    number_rows: 10,
    status: "PENDIENTE",
    reason_code: "",
    from: "",
    to: "",
    errors: {},
};

const InvoiceIncidentsScreen = () => {
    const dispatch = useDispatch();
    const invoiceIncidents = useSelector(
        (state) => state.studentInvoices.invoiceIncidents,
    );
    const { values, handleInputChange, setInputValue } = useForm(defaultValues);
    const { status, reason_code, from, to, errors } = values;

    useEffect(() => {
        dispatch(startGetInvoiceIncidents(values));
    }, [values]);

    const getReasonLabel = (reasonCode) => {
        return (
            reasonOptions.find((option) => option.value === reasonCode)
                ?.label || reasonCode
        );
    };

    const handleRetry = (incidentId) => {
        dispatch(startRetryInvoiceIncident(incidentId, values));
    };

    const handleRetryAsPublicGeneral = (incidentId) => {
        dispatch(startRetryInvoiceIncidentAsPublicGeneral(incidentId, values));
    };

    const handleValidate = async (studentInvoiceId) => {
        const result = await dispatch(startValidateInvoiceData(studentInvoiceId));
        if (result?.httpError) return;

        Swal.fire({
            title: "Validación completada",
            text: result.valid
                ? "Los datos son válidos."
                : "Los datos son inválidos.",
            icon: result.valid ? "success" : "warning",
            timer: 3000,
        });
        dispatch(startGetInvoiceIncidents(values));
    };

    const handleRetryAll = () => {
        dispatch(startRetryInvoiceIncidents(values));
    };

    const handleRetryAllAsPublicGeneral = () => {
        dispatch(startRetryInvoiceIncidentsAsPublicGeneral(values));
    };

    return (
        <CardContainer title="Incidencias de facturación">
            <Row className="mb-3">
                <Col md={2}>
                    <SelectSearchApp
                        title="Estado"
                        name="status"
                        value={status}
                        onChange={handleInputChange}
                        options={statusOptions}
                        errorText={errors.status && errors.status[0]}
                    />
                </Col>
                <Col md={2}>
                    <SelectSearchApp
                        title="Motivo"
                        name="reason_code"
                        value={reason_code}
                        onChange={handleInputChange}
                        options={reasonOptions}
                        errorText={errors.reason_code && errors.reason_code[0]}
                    />
                </Col>
                <Col md={2}>
                    <InputApp
                        title="Pagos desde"
                        type="date"
                        name="from"
                        value={from}
                        onChange={handleInputChange}
                        errorText={errors.from && errors.from[0]}
                    />
                </Col>
                <Col md={2}>
                    <InputApp
                        title="Pagos hasta"
                        type="date"
                        name="to"
                        value={to}
                        min={from}
                        onChange={handleInputChange}
                        disabled={!from}
                        errorText={errors.to && errors.to[0]}
                    />
                </Col>
                <Col md={4} className="d-flex justify-content-end align-items-end gap-2 flex-wrap">
                    <Button
                        variant="primary"
                        onClick={handleRetryAll}
                        disabled={invoiceIncidents?.total === 0 || status === "RESUELTA"}
                    >
                        <IconApp iconClassName="fa-solid fa-rotate-right me-2" />
                        Reintentar todas
                    </Button>
                    <Button
                        variant="warning"
                        onClick={handleRetryAllAsPublicGeneral}
                        disabled={invoiceIncidents?.total === 0 || status === "RESUELTA"}
                    >
                        <IconApp iconClassName="fa-solid fa-users me-2" />
                        Público general
                    </Button>
                </Col>
            </Row>

            <CrudApp
                crudName="invoice-incidents-crud"
                values={values}
                setInputValue={setInputValue}
                handleInputChange={handleInputChange}
                pagination={invoiceIncidents}
                tableHeaders={[
                    "Folio",
                    "Fecha pago",
                    "Matrícula",
                    "Alumno",
                    "Oferta educativa",
                    "RFC",
                    "Monto",
                    "Motivo",
                    "Nota",
                    "Datos Fiscales",
                    "Intentos"
                ]}
                hasActions={true}
            >
                {invoiceIncidents?.data?.map((incident) => {
                    const payment = incident?.payment;
                    const academicRecord = payment?.academic_record;
                    const curriculum = academicRecord?.curriculum;
                    const studentInvoice = payment?.student_invoice;
                    const BtnToInvoice = () => {
                        return (
                            <IconApp
                                iconClassName="fa-solid fa-eye mx-2"
                                description="Ver detalle y facturar"
                                color="#0d6efd"
                                isClickable={true}
                            />
                        );
                    };

                    const generateInvoice = () => (
                        <GenerateInvoice
                            sale={payment}
                            currentValues={values}
                            canInvoice={true}
                            callback={() => {
                                dispatch(startGetInvoiceIncidents(values));
                            }}
                        />
                    );

                    return (
                        <tr key={incident.id}>
                            <td>#{payment?.id || "--"}</td>
                            <td>{formatDateShortMonth(payment?.payed_at)}</td>
                            <td>
                                {academicRecord?.student_number ? (
                                    <LinkToStudenFormApp
                                        student_number={
                                            academicRecord.student_number
                                        }
                                    />
                                ) : (
                                    "--"
                                )}
                            </td>
                            <td>
                                {academicRecord?.student?.full_name || "--"}
                            </td>
                            <td>
                                {curriculum?.agreement || "--"} -{" "}
                                {curriculum?.name || "--"}
                            </td>
                            <td>{studentInvoice?.rfc || "--"}</td>
                            <td>{formatMoney(payment?.amount || 0)}</td>
                            <td>{getReasonLabel(incident.reason_code)}</td>
                            <td>{incident.message || "--"}</td>
                            <td>
                                {incident.has_valid_billing_data === false ? (
                                    <OverlayTrigger
                                        placement="left"
                                        overlay={
                                            <Tooltip id={`tooltip-${incident.id}`}>
                                                <div className="text-start">
                                                    <strong>Errores de Facturación:</strong>
                                                    <ul className="mb-0 ps-3">
                                                        {Object.entries(incident.billing_data_errors || {}).map(([key, msgs]) => (
                                                            <li key={key}>{msgs[0]}</li>
                                                        ))}
                                                    </ul>
                                                </div>
                                            </Tooltip>
                                        }
                                    >
                                        <Badge bg="danger" className="cursor-pointer">
                                            Datos Inválidos <i className="fa-solid fa-circle-exclamation ms-1"></i>
                                        </Badge>
                                    </OverlayTrigger>
                                ) : incident.has_valid_billing_data === null ? (
                                    <div className="d-flex align-items-center justify-content-between">
                                        <Badge bg="secondary">Sin Validar</Badge>
                                        <IconApp
                                            iconClassName="fa-solid fa-check-double ms-2"
                                            description="Validar datos en SAT"
                                            color="#17a2b8"
                                            isClickable={true}
                                            onClick={() => handleValidate(studentInvoice?.id)}
                                        />
                                    </div>
                                ) : (
                                    <Badge bg="success">Correctos</Badge>
                                )}
                            </td>
                            <td>{incident.attempts || 0}</td>
                            <td className="text-center align-middle">
                                {!incident.resolved_at ? (
                                    <ModalApp
                                        titleModal="Detalles de venta"
                                        size="sm"
                                        backdrop="static"
                                        Action={BtnToInvoice}
                                        component={({ closeButton }) => (
                                            <div>
                                                <Modal.Body>
                                                    <InvoiceInfoApp
                                                        data={payment}
                                                        session="operator"
                                                    />
                                                </Modal.Body>
                                                <Modal.Footer>
                                                    <div className="d-flex justify-content-between w-100">
                                                        {closeButton()}
                                                        {generateInvoice()}
                                                    </div>
                                                </Modal.Footer>
                                            </div>
                                        )}
                                    />
                                ) : (
                                    <span className="text-success">
                                        Resuelta
                                    </span>
                                )}
                                {!incident.resolved_at ? (
                                    <>
                                        <IconApp
                                            iconClassName="fa-solid fa-rotate-right mx-2"
                                            description="Reintentar factura con datos fiscales"
                                            color="#0d6efd"
                                            isClickable={true}
                                            onClick={() => handleRetry(incident.id)}
                                        />
                                        <IconApp
                                            iconClassName="fa-solid fa-users mx-2"
                                            description="Facturar a público general"
                                            color="#f59f00"
                                            isClickable={true}
                                            onClick={() => handleRetryAsPublicGeneral(incident.id)}
                                        />
                                    </>
                                ) : null}
                            </td>
                        </tr>
                    );
                })}
            </CrudApp>
        </CardContainer>
    );
};

export default InvoiceIncidentsScreen;