import apiInterceptor from "@/interceptor/interceptor";
import Cookies from "js-cookie";
import React, { useState, useEffect } from "react";
import Image from "next/image";

export default function UserCount() {
  const today = new Date();
  const yesterday = new Date(today);
  yesterday.setDate(today.getDate() - 1);
  const yesterday_date = yesterday.toISOString().split('T')[0]

  const [startDate, setStartDate] = useState(yesterday_date);
  const [endDate, setEndDate] = useState(yesterday_date);
  const [userCount, setUserCount] = useState<number | null>(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const fetchData = async () => {
      const token = Cookies.get("jazz_token");
      if (!token) {
        console.error('No token found');
        setLoading(false);
        return;
      }

      try {
        const response = await apiInterceptor.post(
          `/api/admin/dayWiseUserDetails`,
          {
            startDate: startDate,
            endDate: endDate,
            page: 1,
          },
          {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          }
        );
        // console.log("response.data", response.data);
        setUserCount(response.data.pagination.total);
  
      } catch (error) {
        console.log(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [ startDate, endDate]);



  return (
    <>
      {loading ? (
        <div className="flex justify-center items-center p-12">
          <Image
            src={"/images/loading.gif"}
            height={50}
            width={50}
            alt="loading..."
          />
        </div>
      ) : (
        <div className="p-6">
          <div className="flex flex-col">
            <div className="flex items-center justify-center gap-2">
              <input
                type="date"
                value={startDate}
                onChange={(e) => setStartDate(e.target.value)}
                className="mb-4 p-2 border border-gray-300 rounded"
              />
              <input
                type="date"
                value={endDate}
                onChange={(e) => setEndDate(e.target.value)}
                className="mb-4 p-2 border border-gray-300 rounded"
              />
            </div>
              <div className="flex justify-center items-center p-2 pb-0">
                User Count <span className='font-semibold text-lg ps-2 pt-[1px]'> {userCount}</span>
              </div>
          </div>
        </div>
      )}
    </>
  )
}