"use client";

import {
  useState,
  useEffect,
  Suspense,
  Dispatch,
  SetStateAction,
  useRef,
} from "react";
import { motion, useAnimation } from "framer-motion";
import { ContentItem } from "@/lib/types/note";
import { useRouter, useSearchParams } from "next/navigation";
import NewPostButton from "@/ui/new-post-button";
import UserDropdown from "@/ui/layout/user-dropdown";
import { Session } from "next-auth";
import { useCollaborationByUserId, useUserShareNotes } from "./request";
import Link from "next/link";
import { exportAsJson, fetcher } from "@/lib/utils";
import { Collaboration, ShareNote } from "@prisma/client";
import SearchInput from "@/ui/search-input";
import {
  Check,
  ChevronLeft,
  ChevronRight,
  Download,
  DownloadCloud,
  Edit,
  ExternalLink,
  Minus,
  Plus,
  Trash2,
  Shapes,
  FolderClosed,
  FolderOpen,
  FolderEdit,
} from "lucide-react";
import Tooltip from "@/ui/shared/tooltip";
import useWindowSize from "@/lib/hooks/use-window-size";
import toast from "react-hot-toast";
import { addNote, deleteNote, patchNote, updateNote } from "@/store/db.model";
import useLocalStorage from "@/lib/hooks/use-local-storage";
import { Note_Storage_Key } from "@/lib/consts";

export default function Sidebar({
  id,
  session,
  contents,
  setShowSignInModal,
  setShowEditModal,
  setShowRoomModal,
}: {
  id?: string;
  session: Session | null;
  contents: ContentItem[];
  setShowSignInModal: Dispatch<SetStateAction<boolean>>;
  setShowEditModal: Dispatch<SetStateAction<boolean>>;
  setShowRoomModal: Dispatch<SetStateAction<boolean>>;
}) {
  const router = useRouter();
  const params = useSearchParams();
  const { isMobile } = useWindowSize();

  const [active, setActive] = useState(false);
  const [showEditInput, setShowEditInput] = useState(false);
  const [showEditCate, setShowEditCate] = useState(false);
  const [searchKey, setSearchKey] = useState("");

  const controls = useAnimation();
  const controlText = useAnimation();
  const controlTitleText = useAnimation();

  const [contentsCache, setContentsCache] = useState<ContentItem[]>([]);
  const [categorizedData, setCategorizedData] = useState<{
    [key: string]: ContentItem[];
  }>();

  const { shares, isLoading } = useUserShareNotes();
  const [sharesCache, setSharesCache] = useState<ShareNote[]>([]);

  const { rooms } = useCollaborationByUserId();
  const [roomsCache, setRoomsCache] = useState<Collaboration[]>([]);

  const [openHistory, setOpenHistory] = useState(true);
  const [openShares, setOpenShares] = useState(false);
  const [openRooms, setOpenRooms] = useState(false);

  const editCateRef = useRef<HTMLInputElement>(null);
  const editTitleRef = useRef<HTMLInputElement>(null);

  const [oldContents, setOldContents] = useLocalStorage<ContentItem[]>(
    Note_Storage_Key,
    [],
  );

  const showMore = () => {
    controls.start({
      width: "270px",
      transition: { duration: 0.001 },
    });
    controlText.start({
      opacity: 1,
      display: "block",
      transition: { delay: 0.3 },
    });
    controlTitleText.start({
      opacity: 1,
      transition: { delay: 0.3 },
    });

    setActive(true);
  };

  const showLess = () => {
    controls.start({
      width: "0px",
      transition: { duration: 0.001 },
    });

    controlText.start({
      opacity: 0,
      display: "none",
    });

    controlTitleText.start({
      opacity: 0,
    });

    setActive(false);
  };

  // patch
  useEffect(() => {
    if (oldContents.length > 0) {
      patchNote(oldContents);
      setOldContents([]);
    }
  }, [oldContents]);

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

  useEffect(() => {
    if (isMobile) {
      showLess();
    }
  }, [isMobile]);

  useEffect(() => {
    if (searchKey === "") {
      setContentsCache(contents);
      setSharesCache(shares?.data || []);
      setCategorizedData(() => {
        return (
          contents
            // .sort((a, b) => b.updated_at - a.updated_at)
            .reduce((acc, item) => {
              const tag = item.tag || ""; // If tag is undefined, default it to an empty string
              if (!acc[tag]) {
                acc[tag] = [];
              }
              acc[tag].push(item);
              return acc;
            }, {} as { [key: string]: ContentItem[] })
        );
      });
    }
  }, [searchKey, contents, shares]);

  useEffect(() => {
    if (shares && shares.data) {
      setSharesCache(shares.data);
    }
  }, [shares]);

  useEffect(() => {
    if (rooms && rooms.data) {
      setRoomsCache(rooms.data);
    }
  }, [rooms]);

  const handleDeleteItem = (_id: string) => {
    deleteNote(_id);
  };
  const handleDeletePublicItem = async (_id: string) => {
    const res = await fetcher(`/api/share?id=${_id}`, {
      method: "DELETE",
    });
    const updatedList = shares.data.filter((item) => item.id !== _id);
    setSharesCache(updatedList);
  };

  const handleEditTitle = (itemId: string) => {
    if (showEditInput && id === itemId) {
      setShowEditInput(false);
      const index = contents.findIndex((item) => item.id === id);
      if (index !== -1) {
        updateNote({
          ...contents[index],
          title: editTitleRef.current.value,
        });
      }
    } else {
      setShowEditInput(true);
    }
  };
  const handleEditCate = (itemId: string) => {
    if (showEditCate && id === itemId) {
      setShowEditCate(false);
      const index = contents.findIndex((item) => item.id === id);
      if (index !== -1) {
        updateNote({
          ...contents[index],
          tag: editCateRef.current.value,
        });
      }
    } else {
      setShowEditCate(true);
    }
  };

  const handleExportJson = () => {
    if (!contents) return;
    exportAsJson(contents, "Inke-notes-local");
  };

  const handleInputSearch = (value: string) => {
    if (value.length > 0) {
      setSearchKey(value);
      const local_res = contents.filter((item) => {
        if (
          item.title.includes(value) ||
          JSON.stringify(item.content).includes(value) ||
          (item.tag && item.tag.includes(value))
        ) {
          return item;
        }
      });
      setContentsCache(local_res);
      setCategorizedData(() => {
        return (
          local_res
            // .sort((a, b) => b.updated_at - a.updated_at)
            .reduce((acc, item) => {
              const tag = item.tag || ""; // If tag is undefined, default it to an empty string
              if (!acc[tag]) {
                acc[tag] = [];
              }
              acc[tag].push(item);
              return acc;
            }, {} as { [key: string]: ContentItem[] })
        );
      });

      if (shares && shares.data) {
        const publish_res = shares.data.filter((item) => {
          if (item.data.includes(value)) {
            return item;
          }
        });
        setSharesCache(publish_res);
      }
    } else {
      setSearchKey("");
    }
  };

  const handleClickPublishNote = (publishId: string, localId: string) => {
    const localIndex = contentsCache.findIndex((i) => i.id === localId);
    if (localIndex !== -1) {
      router.push(`/post/${localId}`);
    } else {
      router.push(`/publish/${localId}`);
    }
  };

  const handleSyncPublisToLocal = (localId: string, remoteDate: string) => {
    const data = JSON.parse(remoteDate || "{}");
    if (remoteDate && data) {
      addNote(data);
      router.push(`/post/${data.id}`);
    }
  };

  const handleQuitSpace = async (id: string, roomId: string) => {
    const res = await fetcher(`/api/collaboration?id=${id}`, {
      method: "DELETE",
    });

    if (res && res.code === 200) {
      toast("Exit space");
    }
  };

  const handleCreateSpace = () => {
    setShowRoomModal(true);
  };

  const handleToggleCollapse = (tag: string) => {
    setCategorizedData((prevData) => {
      const updatedData = { ...prevData };
      updatedData[tag].forEach((item) => {
        item.collapsed = !item.collapsed;
      });
      return updatedData;
    });
  };

  return (
    <div className="relative">
      <motion.div
        animate={controls}
        className={
          `${active ? "border-r" : ""}` +
          " animate group flex h-screen w-[270px] flex-col gap-3 overflow-y-auto border-slate-200/60 py-6 duration-300"
        }
      >
        {active && (
          <button
            onClick={showLess}
            className="absolute -right-4 top-28 z-[10] cursor-pointer rounded-r bg-slate-100 py-2 shadow transition-all hover:bg-slate-200 "
          >
            <ChevronLeft className="h-4 w-4 text-slate-400" />
          </button>
        )}
        {!active && (
          <button
            onClick={showMore}
            className="absolute -right-4 top-28 z-[10] cursor-pointer rounded-r bg-slate-100 py-2 shadow transition-all hover:bg-slate-200"
          >
            <ChevronRight className="h-4 w-4 text-slate-400" />
          </button>
        )}

        <div className="mx-3 flex flex-col gap-2">
          <SearchInput onChange={handleInputSearch} />
          <div className="flex items-center justify-between gap-2">
            <NewPostButton
              isShowIcon={true}
              className="h-9 w-full shadow"
              text="Note"
              from="post"
            />
            <button
              className="flex h-9 w-full items-center justify-center gap-1 rounded-md bg-cyan-500 px-3 text-center text-sm text-slate-100 shadow transition-all hover:opacity-80"
              onClick={handleCreateSpace}
            >
              <Shapes className="inline h-4 w-4 text-slate-50" /> Space
            </button>
          </div>
        </div>

        <div className="border-b border-slate-200/70" />

        <div className="h-[40%] w-full grow overflow-y-auto px-3">
          <div
            className="flex cursor-pointer items-center justify-between"
            onClick={() => {
              setOpenHistory(!openHistory);
            }}
          >
            <p className="font-mono text-sm font-semibold text-slate-400">
              History({contents.length})
            </p>
            <button className="rounded bg-slate-100 hover:bg-slate-200">
              {openHistory ? (
                <Minus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
              ) : (
                <Plus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
              )}
            </button>
          </div>

          {openHistory &&
            categorizedData &&
            Object.keys(categorizedData).map((tag) => (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.3 }}
                key={tag}
              >
                <h2
                  className={
                    `${
                      categorizedData[tag].findIndex((i) => i.id === id) !== -1
                        ? "text-cyan-500"
                        : "text-gray-500"
                    }` +
                    " flex cursor-pointer items-center justify-start gap-1 pt-2 font-mono text-xs font-semibold transition-all  hover:text-slate-300"
                  }
                  onClick={() => handleToggleCollapse(tag)}
                >
                  {categorizedData[tag][0].collapsed ? (
                    <FolderOpen className="h-3 w-3 text-slate-400" />
                  ) : (
                    <FolderClosed className="h-3 w-3 text-slate-400" />
                  )}
                  {tag || "Uncategorized"}
                </h2>
                {categorizedData[tag][0].collapsed &&
                  categorizedData[tag].map((item) => (
                    <div
                      className="group/item my-2 mb-2 flex items-center justify-between gap-2 pl-4 transition-all"
                      key={item.id}
                    >
                      {showEditInput && id === item.id ? (
                        <input
                          ref={editTitleRef}
                          type="text"
                          className="rounded border px-2 py-1 text-xs text-slate-500"
                          defaultValue={item.title}
                          placeholder="Enter note title"
                        />
                      ) : showEditCate && id === item.id ? (
                        <input
                          ref={editCateRef}
                          type="text"
                          className="rounded border px-2 py-1 text-xs text-slate-500"
                          defaultValue={item.tag}
                          placeholder="Enter note category"
                        />
                      ) : (
                        <p
                          className={
                            "flex cursor-pointer items-center justify-start gap-2 truncate font-mono text-xs hover:opacity-80 " +
                            `${
                              id === item.id ? "text-cyan-500" : "text-gray-500"
                            }`
                          }
                          onClick={() => router.push(`/post/${item.id}`)}
                        >
                          {item.title.length > 0 ? item.title : "Untitled"}
                        </p>
                      )}

                      <div className="ml-auto hidden group-hover/item:block">
                        <div className="flex items-center justify-end gap-2">
                          {id === item.id && (
                            <button onClick={() => handleEditTitle(item.id)}>
                              {showEditInput ? (
                                <Check className="h-4 w-4 text-green-500" />
                              ) : (
                                <Edit className="h-4 w-4 text-slate-300 hover:text-slate-500" />
                              )}
                            </button>
                          )}
                          {id === item.id && (
                            <button onClick={() => handleEditCate(item.id)}>
                              {showEditCate ? (
                                <Check className="h-4 w-4 text-green-500" />
                              ) : (
                                <FolderEdit className="h-4 w-4 text-slate-300 hover:text-slate-500" />
                              )}
                            </button>
                          )}
                          {id !== item.id && (
                            <button onClick={() => handleDeleteItem(item.id)}>
                              <Trash2 className="h-4 w-4 text-slate-300" />
                            </button>
                          )}
                        </div>
                      </div>

                      {sharesCache.length > 0 &&
                        sharesCache.find((i) => i.localId === item.id) && (
                          <Link href={`/publish/${item.id}`} target="_blank">
                            <ExternalLink className="h-4 w-4 text-cyan-500" />
                          </Link>
                        )}
                    </div>
                  ))}
              </motion.div>
            ))}

          {sharesCache.length > 0 && (
            <>
              <div
                className="mt-3 flex cursor-pointer items-center justify-between border-t border-slate-200/50 pt-3"
                onClick={() => {
                  setOpenShares(!openShares);
                }}
              >
                <p className="font-mono text-sm font-semibold text-slate-400">
                  Published({shares.data.length})
                </p>
                <button className="rounded bg-slate-100 hover:bg-slate-200">
                  {openShares ? (
                    <Minus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
                  ) : (
                    <Plus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
                  )}
                </button>
              </div>

              {openShares &&
                sharesCache.map((item) => (
                  <motion.div
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ duration: 0.3 }}
                    key={item.id}
                    className="group/item mt-2 flex items-center justify-between"
                  >
                    <button
                      onClick={() =>
                        handleClickPublishNote(item.id, item.localId)
                      }
                      className={
                        `${
                          item.localId === id
                            ? "text-cyan-500"
                            : "text-gray-500"
                        }` + " truncate font-mono text-xs hover:opacity-80"
                      }
                    >
                      {JSON.parse(item.data || "{}").title || "Untitled"}
                    </button>

                    <button
                      className="ml-auto hidden group-hover/item:block"
                      onClick={() => handleDeletePublicItem(item.id)}
                    >
                      <Trash2 className="h-4 w-4 text-slate-300" />
                    </button>

                    {contentsCache.findIndex((i) => i.id === item.localId) ===
                      -1 && (
                      <Tooltip
                        content={
                          <div className="w-64 px-3 py-2 text-sm text-slate-400">
                            <h1 className="mb-2 font-semibold text-slate-500">
                              Cross device sync note
                            </h1>
                            <p>
                              Sync your notes from other devices to the current
                              device (history list).
                            </p>
                          </div>
                        }
                        fullWidth={false}
                      >
                        <button
                          className="ml-2"
                          onClick={() =>
                            handleSyncPublisToLocal(item.localId, item.data)
                          }
                        >
                          <DownloadCloud className="h-4 w-4 text-slate-400" />
                        </button>
                      </Tooltip>
                    )}
                  </motion.div>
                ))}
            </>
          )}

          {roomsCache.length > 0 && (
            <>
              <div
                className="mt-3 flex cursor-pointer items-center justify-between border-t border-slate-200/50 pt-3"
                onClick={() => {
                  setOpenRooms(!openRooms);
                }}
              >
                <p className="font-mono text-sm font-semibold text-slate-400">
                  Collaborations({rooms.data.length})
                </p>
                <button className="rounded bg-slate-100 hover:bg-slate-200">
                  {openRooms ? (
                    <Minus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
                  ) : (
                    <Plus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
                  )}
                </button>
              </div>

              {openRooms &&
                roomsCache.map((item) => (
                  <motion.div
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ duration: 0.3 }}
                    key={item.id}
                    className="group/item mt-2 flex items-center justify-between"
                  >
                    <button
                      onClick={() =>
                        router.push(`/post/${item.localId}?work=${item.roomId}`)
                      }
                      className={
                        `${
                          item.localId === id
                            ? "text-cyan-500"
                            : "text-gray-500"
                        }` + " truncate font-mono text-xs hover:opacity-80"
                      }
                    >
                      {item.title}
                    </button>

                    <button
                      className="ml-auto hidden group-hover/item:block"
                      onClick={() => handleQuitSpace(item.id, item.roomId)}
                    >
                      <Trash2 className="h-4 w-4 text-slate-300" />
                    </button>
                  </motion.div>
                ))}
            </>
          )}
        </div>

        <div className="border-b border-slate-200/70" />

        <Suspense>
          {session ? (
            <div className="-mb-2 text-center">
              <UserDropdown
                session={session}
                setShowEditModal={setShowEditModal}
              />
            </div>
          ) : (
            <button
              className="mx-3 mt-3 rounded-md border border-slate-800 bg-slate-800 px-3 py-2 text-sm font-semibold text-slate-100 transition-all hover:bg-slate-600"
              onClick={() => setShowSignInModal(true)}
            >
              Sign in for more
            </button>
          )}
        </Suspense>

        <div className="-mb-1 flex items-center justify-center text-sm">
          <Link className="hover:text-slate-300" href="/">
            Home
          </Link>
          <span className="mx-2">‣</span>
          <Link
            className="hover:text-slate-300"
            href="/document"
            target="_blank"
          >
            Document
          </Link>
          <span className="mx-2">‣</span>
          <Link className="hover:text-slate-300" href="/pricing">
            Pricing
          </Link>
        </div>
      </motion.div>
    </div>
  );
}