import { computed, h, markRaw, ref } from "vue";
import Agents from "./Agents.vue";
import EmailConfig from "./EmailConfig.vue";
import TeamsConfig from "./Teams/TeamsConfig.vue";
import Sla from "./Sla/Sla.vue";
import HolidayList from "./Holiday/Holiday.vue";
import FieldDependencyConfig from "./FieldDependency/FieldDependencyConfig.vue";
import InviteAgents from "./InviteAgents.vue";
import LucideMail from "~icons/lucide/mail";
import LucideMailOpen from "~icons/lucide/mail-open";
import LucideUser from "~icons/lucide/user";
import LucideUserPlus from "~icons/lucide/user-plus";
import LucideUsers from "~icons/lucide/users";
import ShieldCheck from "~icons/lucide/shield-check";
import Briefcase from "~icons/lucide/briefcase";
import AssignmentRules from "./Assignment Rules/AssignmentRules.vue";
import Settings from "~icons/lucide/settings-2";
import {
  ERPNextSettingsIcon,
  FieldDependencyIcon,
  PhoneIcon,
  SlidersIcon,
} from "@/components/icons";
import ERPNextIntegrationSettings from "@/components/erpnext-integration/ERPNextIntegrationSettings.vue";
import TelephonyPage from "./Telephony/TelephonyPage.vue";
import { EmailNotifications } from "./EmailNotifications";
import { __ } from "@/translation";
import SavedReplies from "./SavedReplies/SavedReplies.vue";
import { Avatar } from "frappe-ui";
import { useAuthStore } from "@/stores/auth";
import General from "./General/General.vue";
import KnowledgeBase from "./KnowledgeBase/KnowledgeBase.vue";
import PortalPermissions from "./Customers/PortalPermissions.vue";
import LucideUserCog from "~icons/lucide/user-cog";
import LucideBookOpen from "~icons/lucide/book-open";
import SettingsGear from "~icons/lucide/settings";
import ZapIcon from "~icons/lucide/zap";
import ProfilePage from "./Profile/ProfilePage.vue";
import Preferences from "./Preferences/Preferences.vue";

export const showSettingsModal = ref(false);

const auth = useAuthStore();

export const tabs = computed(() => {
  const _tabs = [
    {
      label: __("My settings"),
      hideLabel: true,
      noborder: true,
      items: [
        {
          label: __("Profile"),
          icon: h(Avatar, {
            image: auth.userImage,
            label: auth.userName,
            size: "xs",
          }),
          component: markRaw(ProfilePage),
        },
        {
          label: __("Preferences"),
          icon: markRaw(SlidersIcon),
          component: markRaw(Preferences),
        },
      ],
    },
    {
      label: __("Email Settings"),
      condition: () => auth.isAdmin || auth.isManager,
      items: [
        {
          label: __("Email Accounts"),
          icon: markRaw(LucideMail),
          component: markRaw(EmailConfig),
        },
        {
          label: __("Email Notifications"),
          icon: markRaw(LucideMailOpen),
          component: markRaw(EmailNotifications),
        },
      ],
    },
    {
      label: __("App Settings"),
      items: [
        {
          label: __("General"),
          icon: markRaw(SettingsGear),
          component: markRaw(General),
          condition: () => auth.isAdmin,
        },
        {
          label: __("Agents"),
          icon: markRaw(LucideUser),
          component: markRaw(Agents),
          condition: () => auth.isAdmin || auth.isManager,
        },
        {
          label: __("Invite Agents"),
          icon: markRaw(LucideUserPlus),
          component: markRaw(InviteAgents),
          condition: () => auth.isAdmin || auth.isManager,
        },
        {
          label: __("Teams"),
          icon: markRaw(LucideUsers),
          component: markRaw(TeamsConfig),
          condition: () => auth.isAdmin || auth.isManager,
        },
        {
          label: __("SLA Policies"),
          icon: markRaw(ShieldCheck),
          component: markRaw(Sla),
          condition: () => auth.isAdmin || auth.isManager,
        },
        {
          label: __("Business Holidays"),
          icon: markRaw(Briefcase),
          component: markRaw(HolidayList),
          condition: () => auth.isAdmin || auth.isManager,
        },
        {
          label: __("Assignment Rules"),
          icon: markRaw(h(Settings, { class: "rotate-90" })),
          component: markRaw(AssignmentRules),
          condition: () => auth.isAdmin || auth.isManager,
        },
        {
          label: __("Field Dependencies"),
          icon: markRaw(FieldDependencyIcon),
          component: markRaw(FieldDependencyConfig),
          condition: () => auth.isAdmin || auth.isManager,
        },
        {
          label: __("Saved Replies"),
          icon: markRaw(ZapIcon),
          component: markRaw(SavedReplies),
        },
      ],
    },
    {
      label: __("Customer Portal"),
      condition: () => auth.isAdmin || auth.isManager,
      items: [
        {
          label: __("Portal Settings"),
          icon: markRaw(LucideUserCog),
          component: markRaw(PortalPermissions),
        },
        {
          label: __("Knowledge Base"),
          icon: markRaw(LucideBookOpen),
          component: markRaw(KnowledgeBase),
        },
      ],
    },
    {
      label: __("Integrations"),
      items: [
        {
          label: __("Telephony"),
          icon: markRaw(PhoneIcon),
          component: markRaw(TelephonyPage),
        },
        {
          label: __("ERPNext"),
          icon: markRaw(ERPNextSettingsIcon),
          component: markRaw(ERPNextIntegrationSettings),
          condition: () => auth.isAdmin || auth.isManager,
        },
      ],
    },
  ];

  return _tabs.filter((tab) => {
    if (tab.condition && !tab.condition()) return false;
    if (tab.items) {
      tab.items = tab.items.filter((item) => {
        if (item.condition && !item.condition()) return false;
        return true;
      });
    }
    return true;
  });
});

export const activeTab = ref(tabs.value[0].items[0]);

export const nextActiveTab = ref(null);

export const disableSettingModalOutsideClick = ref(false);

type TabName =
  | "Profile"
  | "Preferences"
  | "Email Accounts"
  | "Email Notifications"
  | "General"
  | "Knowledge Base"
  | "Portal Settings"
  | "Agents"
  | "Invite Agents"
  | "Teams"
  | "SLA Policies"
  | "Business Holidays"
  | "Assignment Rules"
  | "Field Dependencies"
  | "Telephony"
  | "ERPNext"
  | "Saved Replies";

export const setActiveSettingsTab = (tabName: TabName) => {
  activeTab.value =
    (tabName &&
      tabs.value
        .map((tab) => tab.items)
        .flat()
        .find((tab) => tab.label == __(tabName))) ||
    tabs.value[0].items[0];
};