"use client";
import React, { useState, useEffect } from "react";
import NotificationCard from "./NotificationCard";
import axios from "axios";

const RightSidePage = () => {
  const [data, setData] = useState<any[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          `${process.env.NEXT_PUBLIC_RENDER_LINK}/get-custom-data`
        );
        setData(response.data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

  // Function to calculate the number of days between today and the given date
  const calculateDaysUntil = (dateString: string) => {
    const today = new Date();
    const targetDate = new Date(dateString.split(".").reverse().join("-")); // Convert 'dd.mm.yyyy' to 'yyyy-mm-dd'
    const timeDiff = targetDate.getTime() - today.getTime() ;
    return Math.ceil(timeDiff / (1000 * 3600 * 24)); // Convert milliseconds to days
  };

  // Filter data to include only items with daysUntil between 0 and 15
  const filteredData = data.filter((item) => {
    const daysUntil = calculateDaysUntil(item.I11);
    return daysUntil >= 0 && daysUntil <= 30;
  });

  return (
    <div className="flex flex-col justify-center items-center">
      <h1 className="text-xl font-bold border-b-2 border-gray-300 pb-2 mb-6 text-center">
        YAKLAŞAN İŞ EMİRLERİ
      </h1>
      <div className="flex flex-wrap justify-center">
        {filteredData.length > 0 ? (
          filteredData.map((item) => {
            const daysUntil = calculateDaysUntil(item.I11);
            return (
              <div key={item._id} className="p-2">
                <NotificationCard
                  title={item.C1 || "No Title"}
                  emirNo={item.I6 || "No Emir No"}
                  days={daysUntil}
                />
              </div>
            );
          })
        ) : (
          <p className="text-gray-500">Yaklaşan iş emri bulunmamakta.</p>
        )}
      </div>
    </div>
  );
};

export default RightSidePage;