/**
 * Copyright (c) 2023-present Pi Dash Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { useCallback } from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import useSWR from "swr";
// pi dash imports
import { useTranslation } from "@pi-dash/i18n";
import type { TPageVersion } from "@pi-dash/types";
import { Avatar } from "@pi-dash/ui";
import { cn, getFileURL, renderFormattedDate, renderFormattedTime } from "@pi-dash/utils";
// components
import type { TPageRootHandlers } from "@/components/pages/editor/page-root";
// hooks
import { useMember } from "@/hooks/store/use-member";
import { useQueryParams } from "@/hooks/use-query-params";
// store
import type { TPageInstance } from "@/store/pages/base-page";
// local imports
import { PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM } from "../..";

type Props = {
  page: TPageInstance;
  versionHistory: Pick<TPageRootHandlers, "fetchAllVersions" | "fetchVersionDetails">;
};

type VersionHistoryItemProps = {
  getVersionLink: (versionID: string) => string;
  isVersionActive: boolean;
  version: TPageVersion;
};

const VersionHistoryItem = observer(function VersionHistoryItem(props: VersionHistoryItemProps) {
  const { getVersionLink, isVersionActive, version } = props;
  // store hooks
  const { getUserDetails } = useMember();
  // derived values
  const versionCreator = getUserDetails(version.owned_by);
  // translation
  const { t } = useTranslation();

  return (
    <li className="relative flex items-center gap-x-4 text-11 font-medium">
      {/* timeline icon */}
      <div className="relative grid size-6 flex-none place-items-center">
        <div className="size-2 rounded-full bg-layer-3" />
      </div>
      {/* end timeline icon */}
      <Link
        href={getVersionLink(version.id)}
        className={cn("block flex-1 rounded-md px-1 py-2 hover:bg-layer-transparent-hover", {
          "bg-layer-transparent-selected hover:bg-layer-transparent-selected": isVersionActive,
        })}
      >
        <p className="text-tertiary">
          {renderFormattedDate(version.last_saved_at)}, {renderFormattedTime(version.last_saved_at)}
        </p>
        <p className="mt-1 flex items-center gap-1">
          <Avatar
            size="sm"
            src={getFileURL(versionCreator?.avatar_url ?? "")}
            name={versionCreator?.display_name}
            className="shrink-0"
          />
          <span>{versionCreator?.display_name ?? t("Deactivated user")}</span>
        </p>
      </Link>
    </li>
  );
});

export const PageNavigationPaneInfoTabVersionHistory = observer(function PageNavigationPaneInfoTabVersionHistory(
  props: Props
) {
  const { page, versionHistory } = props;
  // navigation
  const searchParams = useSearchParams();
  const activeVersion = searchParams.get(PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM);
  // derived values
  const { id } = page;
  // translation
  const { t } = useTranslation();
  // query params
  const { updateQueryParams } = useQueryParams();
  // fetch all versions
  const { data: versionsList } = useSWR(
    id ? `PAGE_VERSIONS_LIST_${id}` : null,
    id ? () => versionHistory.fetchAllVersions(id) : null
  );

  const getVersionLink = useCallback(
    (versionID?: string) => {
      if (versionID) {
        return updateQueryParams({
          paramsToAdd: { [PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM]: versionID },
        });
      } else {
        return updateQueryParams({
          paramsToRemove: [PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM],
        });
      }
    },
    [updateQueryParams]
  );

  return (
    <div>
      <p className="text-11 font-medium text-secondary">{t("Version history")}</p>
      <div className="mt-3">
        <ul className="relative">
          {/* timeline line */}
          <div className={cn("absolute top-0 left-0 flex h-full w-6 justify-center")}>
            <div className="w-px bg-layer-3" />
          </div>
          {/* end timeline line */}
          <li className="relative flex items-center gap-x-4 text-11 font-medium">
            {/* timeline icon */}
            <div className="relative grid size-6 flex-none place-items-center rounded-full bg-accent-primary/20">
              <div className="size-2.5 rounded-full bg-accent-primary/40" />
            </div>
            {/* end timeline icon */}
            <Link
              href={getVersionLink()}
              className={cn("flex-1 rounded-md bg-layer-transparent px-1 py-2 hover:bg-layer-transparent-hover", {
                "bg-layer-transparent-selected hover:bg-layer-transparent-selected": !activeVersion,
              })}
            >
              {t("Current version")}
            </Link>
          </li>
          {versionsList?.map((version) => (
            <VersionHistoryItem
              key={version.id}
              getVersionLink={getVersionLink}
              isVersionActive={activeVersion === version.id}
              version={version}
            />
          ))}
        </ul>
      </div>
    </div>
  );
});
