mediahub-fe/components/landing-page/event-calender.tsx

import { getCalendarPagination } from "@/service/schedule/schedule";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useParams } from "next/navigation";
import React, { useEffect, useState } from "react";

interface CalendarItem {
  id: number;
  title: string;
  description: string;
  assignedTo: string;
  assignedToLevel: string;
  startDate: string;
  endDate: string;
  isActive: boolean;
  createdById: number;
  createdByName: string;
  thumbnailUrl: string;
  createdAt: string;
  updatedAt: string;
}

const EventCalender = () => {
  const today = new Date();
  const currentMonth = today.getMonth();
  const currentYear = today.getFullYear();
  const currentDate = today.getDate();
  const [events, setEvents] = useState<CalendarItem[]>([]);
  const [selectedEvent, setSelectedEvent] = useState<CalendarItem | null>(null);
  const [month, setMonth] = useState(currentMonth);
  const [year, setYear] = useState(currentYear);
  const t = useTranslations("LandingPage");
  const params = useParams();
  const locale = params?.locale;

  const monthNames = [
    t("january", { defaultValue: "January" }),
    t("february", { defaultValue: "February" }),
    t("march", { defaultValue: "March" }),
    "April",
    t("may", { defaultValue: "May" }),
    t("june", { defaultValue: "June" }),
    t("july", { defaultValue: "July" }),
    t("august", { defaultValue: "August" }),
    "September",
    t("october", { defaultValue: "October" }),
    "November",
    t("december", { defaultValue: "December" }),
  ];

  const fetchData = async () => {
    try {
      const res = await getCalendarPagination(100, 0);
      const data = res?.data?.data;
      const contentData = data?.content;
      setEvents(contentData || []);
      if (contentData && contentData.length > 0) {
        setSelectedEvent(contentData[0]);
      }
    } catch (error) {
      console.error("Error fetching calendar events:", error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  const firstDayOfMonth = new Date(year, month, 1);
  const lastDayOfMonth = new Date(year, month + 1, 0);
  const daysInMonth = lastDayOfMonth.getDate();
  const startingDayOfWeek = firstDayOfMonth.getDay();
  const adjustedStartingDay =
    startingDayOfWeek === 0 ? 6 : startingDayOfWeek - 1;

  const generateCalendarDays = () => {
    const days = [];
    for (let i = 0; i < adjustedStartingDay; i++) {
      days.push(null);
    }
    for (let day = 1; day <= daysInMonth; day++) {
      days.push(day);
    }
    while (days.length < 42) {
      days.push(null);
    }
    return days;
  };

  const calendarDays = generateCalendarDays();

  const getDateFromString = (dateString: string) => {
    try {
      const date = new Date(dateString);
      if (date.getMonth() === month && date.getFullYear() === year) {
        return date.getDate();
      }
      return null;
    } catch {
      return null;
    }
  };

  const formatDateRange = (startDate: string, endDate: string) => {
    try {
      const start = new Date(startDate);
      const end = new Date(endDate);

      const startDay = start.getDate();
      const endDay = end.getDate();
      const startMonth = monthNames[start.getMonth()];
      const endMonth = monthNames[end.getMonth()];

      if (startDay === endDay && startMonth === endMonth) {
        return `${startDay} ${startMonth}`;
      } else {
        return `${startDay} ${startMonth} - ${endDay} ${endMonth}`;
      }
    } catch {
      return "Tanggal tidak valid";
    }
  };

  const formatTimeRange = (startDate: string, endDate: string) => {
    try {
      const start = new Date(startDate);
      const end = new Date(endDate);

      const startTime = start.toLocaleTimeString("id-ID", {
        hour: "2-digit",
        minute: "2-digit",
        timeZone: "Asia/Jakarta",
      });
      const endTime = end.toLocaleTimeString("id-ID", {
        hour: "2-digit",
        minute: "2-digit",
        timeZone: "Asia/Jakarta",
      });

      return `${startTime} - ${endTime} WIB`;
    } catch {
      return "Waktu tidak tersedia";
    }
  };

  const eventDates = events
    .map((event) => getDateFromString(event.startDate))
    .filter((date) => date !== null);

  const handlePreviousMonth = () => {
    if (month === 0) {
      setMonth(11);
      setYear((y) => y - 1);
    } else {
      setMonth((m) => m - 1);
    }
  };

  const handleNextMonth = () => {
    if (month === 11) {
      setMonth(0);
      setYear((y) => y + 1);
    } else {
      setMonth((m) => m + 1);
    }
  };

  return (
    <>
      {locale === "in" && (
        <div className="mt-8 rounded-lg bg-white dark:bg-zinc-900 p-4 shadow">
          <h2 className="text-lg font-bold text-red-600 border-b border-red-600 mb-4 pb-2">
            {t("calendar", { defaultValue: "Calendar" })}
          </h2>
          <div className="flex flex-col lg:flex-row gap-6">
            <div className="w-full lg:w-1/2">
              <div className="bg-gray-100 dark:bg-zinc-800 p-4 rounded-md mb-4">
                <div className="flex items-center justify-between mb-2">
                  <button onClick={handlePreviousMonth}>
                    <ChevronLeft className="w-4 h-4" />
                  </button>
                  <div className="text-center font-semibold">
                    {monthNames[month]} {year}
                  </div>
                  <button onClick={handleNextMonth}>
                    <ChevronRight className="w-4 h-4" />
                  </button>
                </div>
                <div className="grid grid-cols-7 gap-1 text-sm text-center">
                  {["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => (
                    <div key={d} className="font-medium p-1">
                      {d}
                    </div>
                  ))}
                  {calendarDays.map((day, index) => {
                    const isToday =
                      day === currentDate &&
                      month === currentMonth &&
                      year === currentYear;

                    return (
                      <div
                        key={index}
                        className={`p-1 rounded min-h-[24px] flex items-center justify-center text-xs ${
                          day === null
                            ? ""
                            : eventDates.includes(day)
                            ? "bg-red-600 text-white font-semibold"
                            : isToday
                            ? "bg-blue-500 text-white font-semibold"
                            : "hover:bg-gray-200 dark:hover:bg-zinc-700"
                        }`}
                      >
                        {day}
                      </div>
                    );
                  })}
                </div>
              </div>

              <div
                className="space-y-3 max-h-[230px] overflow-y-auto pr-5"
                data-lenis-prevent
              >
                <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">
                  {t("eventList", { defaultValue: "Event List" })}
                </h3>
                {events?.length === 0 ? (
                  <div className="text-center text-gray-500 dark:text-gray-400 py-8">
                    {t("noEvent", { defaultValue: "No Event" })}
                  </div>
                ) : (
                  events.map((event) => (
                    <div
                      key={event.id}
                      onClick={() => setSelectedEvent(event)}
                      className={`flex items-center rounded-xl shadow-sm p-3 cursor-pointer transition-all duration-200 hover:shadow-md ${
                        selectedEvent?.id === event.id
                          ? "bg-red-100 dark:bg-red-900/20 border-2 border-red-500"
                          : "bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700"
                      }`}
                    >
                      <Image
                        src={event.thumbnailUrl || "/images/default-event.png"}
                        alt={event.title}
                        width={1920}
                        height={1080}
                        className="w-16 h-12 object-cover rounded flex-shrink-0"
                      />
                      <div className="ml-3 flex-1 min-w-0">
                        <div className="text-sm font-semibold text-gray-800 dark:text-gray-200 line-clamp-2">
                          {event.title}
                        </div>
                        <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
                          {formatDateRange(event.startDate, event.endDate)}
                        </div>
                      </div>
                      <div className="ml-2 flex-shrink-0">
                        <div
                          className={`w-2 h-2 rounded-full ${
                            event.isActive ? "bg-green-500" : "bg-red-500"
                          }`}
                        ></div>
                      </div>
                    </div>
                  ))
                )}
              </div>
            </div>

            <div className="w-full lg:w-1/2">
              <div className="bg-gray-100 dark:bg-zinc-800 rounded-lg p-4 sticky top-4">
                <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">
                  {t("eventDetails", { defaultValue: "Event Details" })}
                </h3>

                {selectedEvent ? (
                  <div className="space-y-4">
                    <img
                      src={
                        selectedEvent.thumbnailUrl ||
                        "/images/default-event.png"
                      }
                      alt={selectedEvent.title}
                      className="w-full h-48 object-cover rounded-lg"
                      onError={(e) => {
                        const target = e.target as HTMLImageElement;
                        target.src = "/images/default-event.png";
                      }}
                    />

                    <div>
                      <h4 className="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">
                        {selectedEvent.title}
                      </h4>

                      <div className="grid grid-cols-1 gap-3 mb-4">
                        <div className="flex items-start text-sm text-gray-600 dark:text-gray-400">
                          <span className="w-20 font-semibold flex-shrink-0">
                            {t("date", { defaultValue: "Date" })}
                          </span>
                          <span>
                            {formatDateRange(
                              selectedEvent.startDate,
                              selectedEvent.endDate
                            )}
                          </span>
                        </div>
                        <div className="mb-4">
                          <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                            {selectedEvent.description ||
                              "Tidak ada deskripsi tersedia."}
                          </p>
                        </div>
                      </div>

                      {/* <div className="flex gap-2">
                        <button className="px-4 py-2 bg-gray-300 dark:bg-zinc-700 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg hover:bg-gray-400 dark:hover:bg-zinc-600 transition-colors">
                          {t("share", { defaultValue: "Share" })}
                        </button>
                      </div> */}
                    </div>
                  </div>
                ) : (
                  <div className="text-center text-gray-500 dark:text-gray-400 py-8">
                    {t("selectEvent", { defaultValue: "Select Event" })}
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default EventCalender;