<script setup lang="ts">
import { computed } from "vue";
import { LogOut, Monitor, Moon, Sun, User } from "lucide-vue-next";
import { useTheme, type ThemePreference } from "../composables/useTheme";
import { useTranslations } from "../composables/useTranslations";
import { useBuilderPrefix } from "../composables/useBuilderPrefix";
import { Link, useForm, usePage } from "@inertiajs/vue3";
import Avatar from "./ui/Avatar.vue";
import AvatarFallback from "./ui/AvatarFallback.vue";
import DropdownMenu from "./ui/DropdownMenu.vue";
import DropdownMenuContent from "./ui/DropdownMenuContent.vue";
import DropdownMenuItem from "./ui/DropdownMenuItem.vue";
import DropdownMenuLabel from "./ui/DropdownMenuLabel.vue";
import DropdownMenuSeparator from "./ui/DropdownMenuSeparator.vue";
import DropdownMenuTrigger from "./ui/DropdownMenuTrigger.vue";
import SidebarMenu from "./ui/sidebar/SidebarMenu.vue";
import SidebarMenuButton from "./ui/sidebar/SidebarMenuButton.vue";
import SidebarMenuItem from "./ui/sidebar/SidebarMenuItem.vue";
import { ChevronsUpDown } from "lucide-vue-next";
import { useSidebar } from "./ui/sidebar/utils";

const { isMobile } = useSidebar();
const { t } = useTranslations();
const prefix = useBuilderPrefix();

const page = usePage<{
  auth?: {
    user: { name: string; email: string } | null;
    logoutUrl: string;
  };
}>();

const authUser = computed(
  () => page.props.auth?.user ?? { name: "Admin", email: "" },
);
const logoutUrl = computed(() => page.props.auth?.logoutUrl ?? "/admin/logout");

const logoutForm = useForm({});

function logout(): void {
  logoutForm.post(logoutUrl.value);
}

const { theme, setTheme } = useTheme();

const THEME_CYCLE: ThemePreference[] = ["system", "light", "dark"];

const themeIcon = computed(() => {
  if (theme.value === "light") return Sun;
  if (theme.value === "dark") return Moon;
  return Monitor;
});

const themeLabel = computed(() => {
  if (theme.value === "light") return t("builder.theme.light");
  if (theme.value === "dark") return t("builder.theme.dark");
  return t("builder.theme.system");
});

function cycleTheme(): void {
  const next =
    THEME_CYCLE[(THEME_CYCLE.indexOf(theme.value) + 1) % THEME_CYCLE.length];
  setTheme(next);
}

function initials(name: string): string {
  return name
    .split(" ")
    .slice(0, 2)
    .map((n) => n[0]?.toUpperCase() ?? "")
    .join("");
}
</script>

<template>
  <SidebarMenu>
    <SidebarMenuItem>
      <DropdownMenu>
        <DropdownMenuTrigger as-child>
          <SidebarMenuButton
            size="lg"
            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
          >
            <Avatar class="h-8 w-8 rounded-lg">
              <AvatarFallback class="rounded-lg">{{
                initials(authUser.name)
              }}</AvatarFallback>
            </Avatar>
            <div class="grid flex-1 text-left text-sm leading-tight">
              <span class="truncate font-semibold">{{ authUser.name }}</span>
              <span class="truncate text-xs">{{ authUser.email }}</span>
            </div>
            <ChevronsUpDown class="ml-auto size-4" />
          </SidebarMenuButton>
        </DropdownMenuTrigger>
        <DropdownMenuContent
          class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
          :side="isMobile ? 'bottom' : 'right'"
          align="end"
          :side-offset="4"
        >
          <DropdownMenuLabel class="p-0 font-normal">
            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
              <Avatar class="h-8 w-8 rounded-lg">
                <AvatarFallback class="rounded-lg">{{
                  initials(authUser.name)
                }}</AvatarFallback>
              </Avatar>
              <div class="grid flex-1 text-left text-sm leading-tight">
                <span class="truncate font-semibold">{{ authUser.name }}</span>
                <span class="truncate text-xs">{{ authUser.email }}</span>
              </div>
            </div>
          </DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem as-child>
            <Link :href="`/${prefix}/account`">
              <User />
              <span>{{ t("builder.nav.account") }}</span>
            </Link>
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem @click.prevent="cycleTheme">
            <component :is="themeIcon" />
            <span>{{ themeLabel }}</span>
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem @click="logout">
            <LogOut />
            <span>{{ t("builder.nav.sign_out") }}</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </SidebarMenuItem>
  </SidebarMenu>
</template>
