import React from "react";
// mobx
import { Hotel } from "lucide-react";
import { observer } from "mobx-react";
import Link from "next/link";
import { useParams } from "next/navigation";
// buzzwareTech ui
import { EUserPermissions, EUserPermissionsLevel } from "@buzzwaretech/constants";
import { useLocalStorage } from "@buzzwaretech/hooks";
import { useTranslation } from "@buzzwaretech/i18n";
import {
    CheckIcon,
    CloseIcon,
    MembersPropertyIcon,
    ProjectIcon,
} from "@buzzwaretech/propel/icons";
import { cn, getFileURL } from "@buzzwaretech/utils";
// hooks
import { useCommandPalette } from "@/hooks/store/use-command-palette";
import { useProject } from "@/hooks/store/use-project";
import { useWorkspace } from "@/hooks/store/use-workspace";
import { useUser, useUserPermissions } from "@/hooks/store/user";
// buzzwareTech web constants

export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
  // navigation
  const { workspaceSlug } = useParams();
  // store hooks
  const { allowPermissions } = useUserPermissions();
  const { toggleCreateProjectModal } = useCommandPalette();
  const { data: currentUser } = useUser();
  const { joinedProjectIds } = useProject();
  const { currentWorkspace: activeWorkspace } = useWorkspace();
  // local storage
  const { storedValue, setValue } = useLocalStorage(
    `quickstart-guide-${workspaceSlug}`,
    {
      hide: false,
      visited_members: false,
      visited_workspace: false,
      visited_profile: false,
    },
  );
  const { t } = useTranslation();
  // derived values
  const canCreateProject = allowPermissions(
    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
    EUserPermissionsLevel.WORKSPACE,
  );
  const isWorkspaceAdmin = allowPermissions(
    [EUserPermissions.ADMIN],
    EUserPermissionsLevel.WORKSPACE,
  );

  const EMPTY_STATE_DATA = [
    {
      id: "create-project",
      title: "home.empty.create_project.title",
      description: "home.empty.create_project.description",
      icon: <ProjectIcon className="size-4" />,
      flag: "projects",
      cta: {
        text: "home.empty.create_project.cta",
        onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
          if (!canCreateProject) return;
          e.preventDefault();
          e.stopPropagation();
          toggleCreateProjectModal(true);
        },
        disabled: !canCreateProject,
      },
    },
    {
      id: "invite-team",
      title: "home.empty.invite_team.title",
      description: "home.empty.invite_team.description",
      icon: <MembersPropertyIcon className="size-4" />,
      flag: "visited_members",
      cta: {
        text: "home.empty.invite_team.cta",
        link: `/${workspaceSlug}/settings/members`,
        disabled: !isWorkspaceAdmin,
      },
    },
    {
      id: "configure-workspace",
      title: "home.empty.configure_workspace.title",
      description: "home.empty.configure_workspace.description",
      icon: <Hotel className="size-4" />,
      flag: "visited_workspace",
      cta: {
        text: "home.empty.configure_workspace.cta",
        link: "settings",
        disabled: !isWorkspaceAdmin,
      },
    },
    {
      id: "personalize-account",
      title: "home.empty.personalize_account.title",
      description: "home.empty.personalize_account.description",
      icon:
        currentUser?.avatar_url && currentUser?.avatar_url.trim() !== "" ? (
          <Link href={`/${workspaceSlug}/profile/${currentUser?.id}`}>
            <span className="relative flex size-4 items-center justify-center rounded-full p-4 text-on-color capitalize">
              <img
                src={getFileURL(currentUser?.avatar_url)}
                className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
                alt={currentUser?.display_name || currentUser?.email}
              />
            </span>
          </Link>
        ) : (
          <Link href={`/${workspaceSlug}/profile/${currentUser?.id}`}>
            <span className="relative flex size-4 items-center justify-center rounded-full bg-[#028375] p-4 text-13 text-on-color capitalize">
              {(currentUser?.email ?? currentUser?.display_name ?? "?")[0]}
            </span>
          </Link>
        ),
      flag: "visited_profile",
      cta: {
        text: "home.empty.personalize_account.cta",
        link: `/settings/profile/general`,
        disabled: false,
      },
    },
  ];
  const isComplete = (type: string) => {
    switch (type) {
      case "projects":
        return joinedProjectIds?.length > 0;
      case "visited_members":
        return (activeWorkspace?.total_members || 0) >= 2;
      case "visited_workspace":
        return storedValue?.visited_workspace;
      case "visited_profile":
        return storedValue?.visited_profile;
    }
  };

  if (
    storedValue?.hide ||
    (joinedProjectIds?.length > 0 && (activeWorkspace?.total_members || 0) >= 2)
  )
    return null;

  return (
    <div>
      <div className="mb-4 flex items-center justify-between">
        <div className="text-14 font-semibold text-tertiary">
          {t("home.empty.quickstart_guide")}
        </div>
        <button
          className="flex items-center gap-1 text-13 font-medium text-tertiary"
          onClick={() => {
            if (!storedValue) return;
            setValue({ ...storedValue, hide: true });
          }}
        >
          <CloseIcon className="size-4" />
          {t("home.empty.not_right_now")}
        </button>
      </div>
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        {EMPTY_STATE_DATA.map((item) => {
          const isStateComplete = isComplete(item.flag);
          return (
            <div
              key={item.id}
              className="flex flex-col rounded-xl border border-subtle bg-layer-2 p-4"
            >
              <div
                className={cn(
                  "mb-3 grid size-9 place-items-center rounded-full bg-surface-2 text-placeholder",
                  {
                    "bg-accent-primary/10 text-accent-primary":
                      !isStateComplete,
                  },
                )}
              >
                <span className="my-auto text-24">{item.icon}</span>
              </div>
              <h3 className="mb-2 text-13 font-medium text-primary">
                {t(item.title)}
              </h3>
              <p className="mb-2 text-11 text-tertiary">
                {t(item.description)}
              </p>
              {isStateComplete ? (
                <div className="flex w-fit items-center gap-2 rounded-full bg-[#17a34a] p-1">
                  <CheckIcon className="size-3 text-accent-primary text-on-color" />
                </div>
              ) : (
                !item.cta.disabled &&
                (item.cta.link ? (
                  <Link
                    href={item.cta.link}
                    onClick={(e) => {
                      if (!storedValue) {
                        e.stopPropagation();
                        e.preventDefault();
                        return;
                      }
                      setValue({
                        ...storedValue,
                        [item.flag]: true,
                      });
                    }}
                    className={cn(
                      "text-13 font-medium text-accent-primary hover:text-accent-secondary",
                      {},
                    )}
                  >
                    {t(item.cta.text)}
                  </Link>
                ) : (
                  <button
                    type="button"
                    className="text-left text-13 font-medium text-accent-primary hover:text-accent-secondary"
                    onClick={item.cta.onClick}
                  >
                    {t(item.cta.text)}
                  </button>
                ))
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
});