"use client";
import React, { useEffect, useState } from "react";
import { Button, OverlayTrigger, Table, Tooltip } from "react-bootstrap";
import styles from "@/styles/Component/Dashboard/LeadsLimitation.module.scss";
import useFetchData from "@/components/App/useFetchData";
import { formatDate, toastrC, formatDateWithFormatType } from "@/utils/helpers";
import { useRequest } from "@/components/App/request";
import { Formik, Form as FormikForm, Field } from "formik";
import * as Yup from "yup";
import TableNoData from "@/components/common/TableNoData";
import { useApp } from "@/components/App";
import PaginationComp from "@/Layout/Component/Pagination/pagination";

interface LogsResponse {
  id: number;
  member_id: number;
  lead: number;
  created_at: string;
  updated_at: string;
  day: string;
  performedby: {
    id: number;
    company_name: string;
  };
}

const LeadsLimitation = () => {
  const { request } = useRequest();
  const [dependency, setDependency] = useState<number>(0);
  const { userDetail, setUserDetail } = useApp();
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPagesVal, setTotalPagesVal] = useState(10);
  const handlePageChange = page => {
    setCurrentPage(page);
  };
  const { data: logData, isLoading } = useFetchData<{
    data: LogsResponse[];
    total: number;
    per_page: number;
  }>("MEMBER_LEAD_LIMITATION_LOGS", { page: currentPage }, [
    dependency,
    currentPage
  ]);

  const validationSchema = Yup.object().shape({
    leads_per_day: Yup.number()
      .min(1, "Leads must be at least 1")
      .max(99, "Leads cannot exceed 99")
      .required("This field is required")
  });

  const handleSubmit = async (values, { setSubmitting, resetForm }) => {
    try {
      const res = await request("MEMBER_LEAD_LIMIT_UPDATE", values);
      toastrC(res.message, "success", "success");
      setUserDetail(prev => ({ ...prev, leads_per_day: values.leads_per_day }));
      setDependency(prev => prev + 1);
      resetForm();
    } catch (e) {
      toastrC(e.message, "error", "error");
    } finally {
      setSubmitting(false);
    }
  };

  const renderTooltip = props => (
    <Tooltip id="button-tooltip" {...props}>
      <p className="">Number Must be between 1 and 99</p>
    </Tooltip>
  );

  useEffect(() => {
    if (logData) {
      const respData = logData;
      const totalData = respData?.total || 1,
        perPages = respData?.per_page || 1;

      const tp = Math.ceil(totalData / perPages);
      setTotalPagesVal(tp);
    }
  }, [logData]);
  return (
    <div className={styles.LeadsLimitationBlock}>
      <div className={styles.LeadsLimitationHead}>
        <h1>Leads Limitation </h1>

        <Formik
          initialValues={{ leads_per_day: userDetail?.leads_per_day || 0 }}
          validationSchema={validationSchema}
          onSubmit={handleSubmit}
          enableReinitialize
        >
          {({ isSubmitting, errors, touched }) => (
            <FormikForm className={styles.LeadsLimitationHeadRight}>
              <p>Number of Leads Each Day</p>
              <OverlayTrigger
                placement="bottom"
                delay={{ show: 250, hide: 400 }}
                overlay={renderTooltip}
              >
                <Field
                  type="number"
                  name="leads_per_day"
                  className={`${styles.ContactInput} form-control pe-2 ${
                    errors.leads_per_day && touched.leads_per_day
                      ? "border-danger"
                      : ""
                  }`}
                />
              </OverlayTrigger>
              <Button
                type="submit"
                className="btn-custom"
                disabled={isSubmitting}
              >
                {isSubmitting ? "Submitting..." : "Submit"}
              </Button>
            </FormikForm>
          )}
        </Formik>
      </div>
      <div className="customTableCard text-center">
        <Table responsive>
          <thead>
            <tr>
              <th>S.No</th>
              <th className="dateTh">Date</th>
              <th>Day</th>
              <th>Time</th>
              <th>Action By</th>
              <th className="actionTh">Leads Each Day</th>
            </tr>
          </thead>
          <tbody>
            {Array.isArray(logData?.data) ? (
              logData?.data?.map((row, index) => (
                <tr key={index}>
                  <td>{index + 1}</td>
                  <td>{formatDate(row.created_at)}</td>
                  <td>{row.day}</td>
                  <td>
                    {formatDateWithFormatType(row.created_at, "HH:mm:ss")}
                  </td>
                  <td>
                    {row.performedby != null
                      ? row.performedby.id == 1
                        ? "Admin"
                        : row.performedby.company_name
                      : "-"}
                  </td>
                  <td>{row.lead}</td>
                </tr>
              ))
            ) : (
              <TableNoData isLoading={isLoading} colSpan={4} />
            )}
          </tbody>
        </Table>
      </div>
      <PaginationComp
        totalPages={totalPagesVal}
        currentPage={currentPage}
        onPageChange={handlePageChange}
      />
    </div>
  );
};

export default LeadsLimitation;