"use client";
import dayjs from "dayjs";
import { useEffect, useRef, useState } from "react";
import utc from "dayjs/plugin/utc";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { close, loading } from "@/config/swal";
import { useSearchParams } from "next/navigation";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";

import Image from "next/image";
import { FreeMode, Navigation, Thumbs } from "swiper/modules";
import { Swiper as SwiperType } from "swiper/types";
import {
  getMonthlyPlanList,
  getPlanningDailyByTypeId,
  getPlanningDailyMedsosByPlatform,
  getPlanningMonthlyPerSocmed,
  getWeeklyPlanList,
  getWeeklyPlanListByParentId,
} from "@/service/agenda-setting/agenda-setting";
import TaskPlanMediahubTable from "@/app/[locale]/(protected)/curator/task-plan/mediahub/components/table";
import weekday from "dayjs/plugin/weekday";
import { Icon } from "@iconify/react/dist/iconify.js";
import {
  FacebookIcon,
  InstagramIcon,
  TiktokIcon,
  XIcon,
  YoutubeIcon,
} from "@/components/icon";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import TaskPlanningSocialMediaTable from "./social-media-modal/table";

const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const TODAY = dayjs().format("YYYY-MM-DD");

export default function SingleViewSocialMediaTable() {
  const params = useSearchParams();
  const [selectedMonthItem, setSelectedMonthItem] = useState<
    string | undefined
  >(undefined);
  const [selectedWeekly, setSelectedWeekly] = useState<string | undefined>(
    undefined
  );
  const [selectedDate, setSelectedDate] = useState<number>(
    new Date(TODAY).getDate()
  );
  const [nowDate, setNowDate] = useState<string>(TODAY);

  const INITIAL_YEAR = dayjs().format("YYYY");
  const INITIAL_MONTH = dayjs().format("M");
  const size = 20;

  const page: string | undefined | null = params?.get("page");
  const id: string | undefined | null = params?.get("id");
  const pages = page ? Number(page) - 1 : 0;
  const no = (size || 10) * pages;

  const [selectedMonth, setSelectedMonth] = useState<any>(
    dayjs(new Date(parseInt(INITIAL_YEAR), parseInt(INITIAL_MONTH) - 1, 1))
  );

  const [selectedMonthTitle, setSelectedMonthTitle] = useState<string>("");
  const [days, setDays] = useState<any>([]);

  const weekday = require("dayjs/plugin/weekday");
  const weekOfYear = require("dayjs/plugin/weekOfYear");

  const [planningData, setPlanningData] = useState<any>([]);

  dayjs.extend(utc);
  dayjs.extend(weekday);
  dayjs.extend(weekOfYear);

  let currentMonthDays: any;
  let previousMonthDays: any;
  let nextMonthDays: any;

  const [monthlyList, setMonthlyList] = useState([]);
  const [weeklyList, setWeeklyList] = useState([]);
  const [getData, setGetData] = useState<any>([]);
  const [isOpen, setIsOpen] = useState(false);
  const [selectedDateNow, setSelectedDateNow] = useState("");
  const [selectedPlatform, setSelectedPlatform] = useState("");

  useEffect(() => {
    createCalendar("START");
  }, []);

  function createDaysForCurrentMonth(
    year: string,
    month: string,
    daysInMonth: number
  ) {
    const days: any = [];
    for (let day = 1; day <= daysInMonth; day++) {
      const date = dayjs(
        new Date(parseInt(year), parseInt(month) - 1, day)
      ).format("YYYY-MM-DD");
      days.push({
        date,
        isCurrentMonth: true,
        isToday: date === TODAY,
      });
    }
    return days;
  }

  async function getMonthlyPlanning(dates: number) {
    const res = await getMonthlyPlanList(dates, 2);
    setMonthlyList(res?.data?.data);
  }

  async function getWeeklyPlanning(
    id: string | undefined,
    date: number | undefined
  ) {
    if (id) {
      const res = await getWeeklyPlanListByParentId(id, 2);
      setWeeklyList(res?.data?.data);
    } else {
      const res = await getWeeklyPlanList(date, 2, true);
      setWeeklyList(res?.data?.data);
    }
  }

  function createCalendar(
    year: string = INITIAL_YEAR,
    month: string = INITIAL_MONTH
  ) {
    year = year === "START" ? INITIAL_YEAR : year;

    fetchData(month, year);

    setSelectedMonthTitle(
      dayjs(new Date(parseInt(year), parseInt(month) - 1))
        .utc()
        .local()
        .format("MMMM YYYY")
    );

    currentMonthDays = createDaysForCurrentMonth(
      year,
      month,
      dayjs(`${year}-${month}-01`).daysInMonth()
    );

    getMonthlyPlanning(year ? currentMonthDays[0]?.date : TODAY);
    getWeeklyPlanning(undefined, year ? currentMonthDays[0]?.date : TODAY);

    previousMonthDays = createDaysForPreviousMonth(year, month);
    nextMonthDays = createDaysForNextMonth(year, month);
    const listDay = [
      ...previousMonthDays,
      ...currentMonthDays,
      ...nextMonthDays,
    ];
    setDays(listDay);
  }

  function getWeekday(date: string | undefined) {
    return dayjs(date).weekday();
  }

  function createDaysForPreviousMonth(year: string, month: string) {
    const firstDayOfTheMonthWeekday = getWeekday(currentMonthDays[0]?.date);

    const previousMonth = dayjs(`${year}-${month}-01`).subtract(1, "month");

    // Cover first day of the month being sunday (firstDayOfTheMonthWeekday == 0)
    const visibleNumberOfDaysFromPreviousMonth = firstDayOfTheMonthWeekday
      ? firstDayOfTheMonthWeekday - 1
      : 6;

    const previousMonthLastMondayDayOfMonth = dayjs(currentMonthDays[0].date)
      .subtract(visibleNumberOfDaysFromPreviousMonth, "day")
      .date();

    return [...new Array(visibleNumberOfDaysFromPreviousMonth)].map(
      (day, index) => ({
        date: dayjs(
          `${previousMonth.year()}-${previousMonth.month() + 1}-${
            previousMonthLastMondayDayOfMonth + index
          }`
        ).format("YYYY-MM-DD"),
        dayOfMonth: previousMonthLastMondayDayOfMonth + index,
        isCurrentMonth: false,
      })
    );
  }

  function createDaysForNextMonth(year: string, month: string) {
    const lastDayOfTheMonthWeekday = getWeekday(
      `${year}-${month}-${currentMonthDays.length}`
    );

    const nextMonth = dayjs(`${year}-${month}-01`).add(1, "month");

    const visibleNumberOfDaysFromNextMonth = lastDayOfTheMonthWeekday
      ? 7 - lastDayOfTheMonthWeekday
      : lastDayOfTheMonthWeekday;

    return [...new Array(visibleNumberOfDaysFromNextMonth)].map(
      (day, index) => ({
        date: dayjs(
          `${nextMonth.year()}-${nextMonth.month() + 1}-${index + 1}`
        ).format("YYYY-MM-DD"),
        dayOfMonth: index + 1,
        isCurrentMonth: false,
      })
    );
  }

  async function fetchData(
    month: string,
    year: string,

    parentId?: string | undefined
  ) {
    loading();
    const res = await getPlanningMonthlyPerSocmed(month, year, 2, parentId);
    close();
    setPlanningData(res?.data?.data);
  }

  function getPrevMonth() {
    const selectedMonthNew = dayjs(selectedMonth).subtract(1, "month");

    createCalendar(
      selectedMonthNew.format("YYYY"),
      selectedMonthNew.format("M")
    );
    fetchData("", selectedMonthNew?.format("YYYY-MM-DD"));
    setSelectedMonth(selectedMonthNew);
    setSelectedDate(1);
  }

  function getPresentMonth() {
    const selectedMonthNew = dayjs(
      new Date(parseInt(INITIAL_YEAR), parseInt(INITIAL_MONTH) - 1, 1)
    );

    createCalendar(
      selectedMonthNew.format("YYYY"),
      selectedMonthNew.format("M")
    );
    fetchData("", TODAY);
    setSelectedDate(Number(dayjs().format("D")));
    setSelectedMonth(selectedMonthNew);
  }

  function getNextMonth() {
    const selectedMonthNew = dayjs(selectedMonth).add(1, "month");

    createCalendar(
      selectedMonthNew.format("YYYY"),
      selectedMonthNew.format("M")
    );
    fetchData("", selectedMonthNew?.format("YYYY-MM-DD"));
    setSelectedMonth(selectedMonthNew);
    setSelectedDate(1);
  }
  const onSelectedMonthItem = (id: string | undefined) => {
    // fetchData(date)
    setSelectedMonthItem(id);
    getWeeklyPlanning(id, undefined);
  };

  const onSelectedWeekly = (id: string | undefined) => {
    setSelectedWeekly(id);
    fetchData("", String(id));
  };

  const removeSelection = () => {
    setSelectedMonthItem(undefined);
    setSelectedWeekly(undefined);
  };

  const onSelectedSocmed = async (date: string, platform: string) => {
    setSelectedDateNow(date);
    setSelectedPlatform(platform);
    setIsOpen(true);
  };

  const getDataForThisDate = (day: number) => {
    const todayData = planningData?.find((a: any) => a?.day == day);

    if (todayData) {
      return (
        <div className="flex flex-col gap-1">
          <a
            onClick={() =>
              onSelectedSocmed(todayData.planningList[0].date, "5")
            }
            className="flex flex-row gap-5 rounded-sm bg-[#0C0705] text-white px-3 py-1 justify-center cursor-pointer"
          >
            Total: {todayData.totalTwitter} <XIcon />
          </a>
          <a
            onClick={() =>
              onSelectedSocmed(todayData.planningList[0].date, "1")
            }
            className="flex flex-row gap-5 rounded-sm bg-[#1877F2] text-white px-3 py-1 justify-center cursor-pointer"
          >
            Total: {todayData.totalFacebook} <FacebookIcon />
          </a>
          <a
            onClick={() =>
              onSelectedSocmed(todayData.planningList[0].date, "2")
            }
            className="flex flex-row gap-5 rounded-sm bg-[#d62976] text-white px-3 py-1 justify-center cursor-pointer"
          >
            Total: {todayData.totalInstagram} <InstagramIcon />
          </a>
          <a
            onClick={() =>
              onSelectedSocmed(todayData.planningList[0].date, "3")
            }
            className="flex flex-row gap-5 rounded-sm bg-[#FF0000] text-white px-3 py-1 justify-center cursor-pointer"
          >
            Total: {todayData.totalYoutube} <YoutubeIcon />
          </a>
          <a
            onClick={() =>
              onSelectedSocmed(todayData.planningList[0].date, "4")
            }
            className="flex flex-row gap-5 rounded-sm bg-[#000000] text-white px-3 py-1 justify-center cursor-pointer"
          >
            Total: {todayData.totalTiktok} <TiktokIcon />
          </a>
        </div>
      );
    }
  };

  return (
    <div className="border-2 rounded-sm p-4 flex gap-3 flex-col">
      <div className="flex justify-between">
        <div className="flex flex-row gap-2">
          <a onClick={getPrevMonth} className="cursor-pointer">
            <ChevronLeft />
          </a>
          <a onClick={getPresentMonth} className="cursor-pointer">
            Today
          </a>
          <a onClick={getNextMonth} className="cursor-pointer">
            <ChevronRight />
          </a>
        </div>
        <p className="text-xl font-semibold">{selectedMonthTitle}</p>
      </div>
      <div className="flex justify-end">
        <a
          className="border-2 border-primary px-2 py-1 rounded-full text-[10px] text-primary cursor-pointer"
          onClick={() => removeSelection()}
        >
          Hapus Pilihan
        </a>
      </div>
      <div className="px-8 flex flex-col gap-2 text-sm">
        <p className="font-semibold">Rencana Bulanan</p>
        {monthlyList?.length > 0 ? (
          <div className="flex flex-nowrap gap-3 flex-row">
            {monthlyList?.map((item: any) => (
              <div
                key={item.id}
                className={`rounded-full px-8 py-3 cursor-pointer ${
                  selectedMonthItem === item.id
                    ? "bg-sky-600 text-white "
                    : "bg-sky-300"
                }`}
                onClick={() => onSelectedMonthItem(item.id)}
              >
                <p>{item.title}</p>
              </div>
            ))}
          </div>
        ) : (
          <div className="flex justify-center bg-slate-200 dark:bg-black rounded-full py-1">
            Rencana Bulanan Belum Tersedia
          </div>
        )}
        <p className="font-semibold">Rencana Mingguan</p>
        {weeklyList?.length > 0 ? (
          <div className="flex flex-nowrap gap-3 flex-row">
            {weeklyList?.map((item: any) => (
              <a
                key={item.id}
                className={`bg-sky-300 rounded-full px-8 py-3 cursor-pointer ${
                  selectedWeekly === item.id
                    ? "bg-sky-600 text-white "
                    : "bg-sky-300"
                }`}
                onClick={() => onSelectedWeekly(item.id)}
              >
                <p>{item.title}</p>
              </a>
            ))}
          </div>
        ) : (
          <div className="flex justify-center bg-slate-200 dark:bg-black rounded-full py-1">
            Rencana Mingguan Belum Tersedia
          </div>
        )}
      </div>
      <div>
        <div className="w-full mb-2">
          <div className="overflow-auto">
            <ol
              id="days-of-week"
              className="grid grid-cols-7 gap-1 border-y-2 py-3"
            >
              {WEEKDAYS.map((weekday, index) => (
                <li
                  key={`weekday-${index}`}
                  className="mr-1 text-sm font-medium text-end"
                >
                  {weekday}
                </li>
              ))}
            </ol>
            <ol id="calendar-days" className="grid grid-cols-7 gap-1">
              {days?.map((day: any, index: number) => (
                <li
                  key={`day-${index}`}
                  className={`p-2 text-end min-h-[100px] ${
                    day.isCurrentMonth ? "" : "bg-slate-200 dark:bg-black text-slate-400"
                  }`}
                >
                  <span
                    className={`block mb-1 ${
                      day.date == TODAY ? "font-semibold text-xl" : ""
                    }`}
                  >
                    {parseInt(day.date.split("-")[2])}
                  </span>
                  {day.isCurrentMonth &&
                    getDataForThisDate(parseInt(day.date.split("-")[2]))}
                </li>
              ))}
            </ol>
          </div>
        </div>
      </div>
      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogContent size="lg" className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Perencanaan Medsos Harian</DialogTitle>
          </DialogHeader>
          <div className="flex items-center space-x-2">
            <TaskPlanningSocialMediaTable
              date={selectedDateNow}
              platform={selectedPlatform}
            />
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}