"use client";
import React, { useEffect, useState } from "react";
import { Table } from "react-bootstrap";
import styles from "@/styles/Component/Dashboard/MonthlyStatement.module.scss";
import { useRequest } from "@/components/App/request";
import { SuspenseLoader } from "@/components/App/Loader";
import Details from "./components/Details";
import Filter from "./components/Filter";
import DownloadDropdown from "./components/DownloadDropdown";
import { current_year } from "@/utils/const";
import { formatDate, getStartInitialDate } from "@/utils/helpers";
import PaginationComp from "@/Layout/Component/Pagination/paginationCustom";
import moment from "moment";
import { useApp } from "@/components/App";

interface MonthlyStatementResponse {
  member_id: number;
  member_lead_id: number | null;
  date: string;
  time: string;
  area_code: string | null;
  area_name: string;
  area_id: number | null;
  vrm: string | null;
  make: string | null;
  model: string | null;
  credit: number | null;
  debit: number | null;
  type: string;
  plan_name: string | null;
  balance: number;
}

interface MemberInfo {
  business_name: string;
  business_address: string;
  business_address_line_two: string;
  business_post_code: string;
  name: string;
  account_number: string;
  balance: string;
}

interface AccountSummary {
  member: MemberInfo;
  opening_balance: string;
  credits_in: string;
  debits_out: string;
  closing_balance: string;
}

interface ApiResponse {
  listing: {
    current_page: number;
    data: MonthlyStatementResponse[];
    first_page_url: string;
    from: number;
    last_page: number;
    last_page_url: string;
    links: Array<{
      url: string | null;
      label: string;
      active: boolean;
    }>;
    next_page_url: string | null;
    path: string;
    per_page: number;
    prev_page_url: string | null;
    to: number;
    total: number;
  };
  summary: AccountSummary;
}

const MonthlyStatement = () => {
  const [currentYear, setCurrentYear] = useState<string>(current_year.toString());
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPagesVal, setTotalPagesVal] = useState(10);
  const [currentPeriod, setCurrentPeriod] = useState("monthly");
  const { userDetail } = useApp();
  const [dateRange, setDateRange] = useState({
    startDate: moment(getStartInitialDate(moment(userDetail?.created_at))),
    endDate: moment().endOf('month')
  });
  const [data, setData] = useState<ApiResponse | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const { request } = useRequest();
  const [selectedStartDate, setSelectedStartDate] = useState(moment(getStartInitialDate(moment(userDetail?.created_at))));
  const [selectedEndDate, setSelectedEndDate] = useState(moment().endOf('month'));
  const [perPage, setPerPage] = useState(20);
  const [goToPage, setGoToPage] = useState(1);
  const fetchData1 = async (startDate = selectedStartDate, endDate = selectedEndDate) => {
    console.log(dateRange);
    try {
      setIsLoading(true);
      const response = await request("LEAD_REPORT_MONTHLY_STATEMENT", {
        filter: currentPeriod,
        start_date: startDate,
        end_date: endDate,
        page: currentPage,
        per_page: perPage
      });
      const responseData = response?.data as ApiResponse;
      setData(responseData);
      if (responseData?.listing) {
        setTotalPagesVal(responseData.listing.last_page);
      }
    } catch (error) {
      console.error("Error fetching monthly statement:", error);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    if (selectedStartDate && selectedEndDate) {
      fetchData1(selectedStartDate, selectedEndDate);
    }
  }, [selectedStartDate, selectedEndDate, currentPage, perPage]);

  useEffect(() => {
    if (goToPage !== currentPage) {
      setCurrentPage(goToPage);
    }
  }, [goToPage]);

  const handlePageChange = page => {
    setCurrentPage(page);
  };

  const handleDateRangeChange = (startDate: moment.Moment, endDate: moment.Moment) => {
    setDateRange({ startDate, endDate });
    setCurrentPage(1); // Reset to first page when date range changes
  };

  return (
    <div className={styles.MonthlyStatementBlock}>
      <div className="row">
        <h1 className="col-md-5">Your Statement</h1>
        <div className="col-md-7 d-flex justify-content-end align-items-center mb-3 gap-3">
          <Filter
            currentYear={currentYear}
            setCurrentYear={setCurrentYear}
            currentPeriod={currentPeriod}
            setCurrentPeriod={setCurrentPeriod}
            onDateRangeChange={handleDateRangeChange}
            setSelectedStartDate={setSelectedStartDate}
            setSelectedEndDate={setSelectedEndDate}
          />
          <DownloadDropdown startDate={selectedStartDate} endDate={selectedEndDate} />
        </div>
      </div>

      {isLoading ? (
        <SuspenseLoader />
      ) : (
        <>
          <Details
            accountSummary={data?.summary}
            selectedStartDate={selectedStartDate}
            selectedEndDate={selectedEndDate}
          />
          
          <div className="customTableCard text-center">
            <Table responsive>
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Time</th>
                  <th>Code</th>
                  <th>Description</th>
                  <th>VRM</th>
                  <th>Make</th>
                  <th>Model</th>
                  <th>Debit</th>
                  <th>Credit</th>
                  <th>Balance</th>
                </tr>
              </thead>
              <tbody>
                {data?.listing?.data?.length > 0 ? (
                  data.listing.data.map((tx, index) => (
                    <tr key={index}>
                      <td>{formatDate(tx?.date)}</td>
                      <td>{tx?.time}</td>
                      <td>{tx?.area_code || "-"}</td>
                      <td>{tx?.area_name}</td>
                      <td>{tx?.vrm || "-"}</td>
                      <td>{tx?.make || "-"}</td>
                      <td>
                        {tx?.model?.length > 15
                          ? tx.model.slice(0, 15) + "..."
                          : tx?.model || "-"}
                      </td>
                      <td>{tx?.debit || "-"}</td>
                      <td>{tx?.credit || "-"}</td>
                      <td>{tx?.balance}</td>
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td colSpan={10} className="text-center">
                      No data available
                    </td>
                  </tr>
                )}
              </tbody>
            </Table>
          </div>
          <PaginationComp
            totalPages={totalPagesVal}
            currentPage={currentPage}
            onPageChange={handlePageChange}
            maxVisiblePages={5}
            perPage={perPage}
            setPerPage={setPerPage}
            totalPagesVal={totalPagesVal}
            goToPage={goToPage}
            setGoToPage={setGoToPage}
            setCurrentPage={setCurrentPage}
            leadData={data?.listing}
          />
        </>
      )}

      <div className={styles.MonthlyStatementInfo}>
        <p>
          CarBaBa.co.uk is trading name of HARIS YOUNAS Limited, Company reg.
          no.04461458 Vat 0798609949
        </p>
        <p>
          Address: Priory House, Marsh Road, Wembley, HA0 1ES, Phone 0203 940
          4777 email:dp@carbaba.co.uk
        </p>
      </div>
    </div>
  );
};

export default MonthlyStatement;