"use client"

/**
 * "Home layout" block for the profile menu — switches between `/home/<variant>`
 * links (`use-home-variant`).
 *
 * Lives in the profile menu rather than on the page itself for the same reason
 * theme does: it is a standing preference about a surface, not an action on the
 * content in front of you, and putting a layout control in the page's own
 * header would spend the most valuable row on the page on a setting most people
 * set once.
 *
 * Choosing a layout navigates to that layout's URL and remembers it so bare
 * `/home` (post-login, All products) still lands on the last one you used.
 *
 * Campus carries a second preference — greeting-only vs full cover banner —
 * in a nested submenu (`use-campus-banner-mode`). Spotlight carries v1 vs v2
 * in a nested submenu (`SPOTLIGHT_VARIANTS`).
 *
 * Rendered in both profile menus — the utility bar's avatar (the one that is
 * actually visible on `/home`, since the shell strips the sidebar there) and
 * the sidebar's `NavUser`, so someone who changes their mind from inside a
 * product does not have to go back to home to find the control.
 */

import { useLocation, useNavigate } from "react-router"

import {
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
} from "@/components/ui/dropdown-menu"
import {
  CAMPUS_BANNER_MODES,
  setCampusBannerMode,
  useCampusBannerMode,
  type CampusBannerMode,
} from "@/hooks/use-campus-banner-mode"
import {
  CAMPUS_VARIANTS,
  HOME_VARIANTS,
  SPOTLIGHT_VARIANTS,
  STOREFRONT_VARIANTS,
  homeVariantFromPathname,
  homeVariantPath,
  setHomeVariant,
  useHomeVariant,
  type HomeVariant,
} from "@/hooks/use-home-variant"

const FLAT_VARIANTS = HOME_VARIANTS.filter(
  option =>
    option.id !== "campus" &&
    option.id !== "spotlight" &&
    option.id !== "storefront",
)
const CAMPUS_VARIANT = HOME_VARIANTS.find(option => option.id === "campus")!
const SPOTLIGHT_VARIANT = HOME_VARIANTS.find(option => option.id === "spotlight")!
const STOREFRONT_VARIANT = HOME_VARIANTS.find(option => option.id === "storefront")!

function isCampusVariant(variant: HomeVariant): variant is "campus" | "campus-v3" {
  return variant === "campus" || variant === "campus-v3"
}

function isSpotlightVariant(
  variant: HomeVariant,
): variant is "spotlight" | "spotlight-v2" | "spotlight-v3" | "spotlight-v4" {
  return (
    variant === "spotlight" ||
    variant === "spotlight-v2" ||
    variant === "spotlight-v3" ||
    variant === "spotlight-v4"
  )
}

function isStorefrontVariant(
  variant: HomeVariant,
): variant is "storefront" | "storefront-v2" {
  return variant === "storefront" || variant === "storefront-v2"
}

export function HomeLayoutMenu() {
  const navigate = useNavigate()
  const { pathname } = useLocation()
  const preferred = useHomeVariant()
  const variant = homeVariantFromPathname(pathname) ?? preferred
  const campusBannerMode = useCampusBannerMode()
  const active = HOME_VARIANTS.find(option => option.id === variant)
  const activeCampusBanner = CAMPUS_BANNER_MODES.find(option => option.id === campusBannerMode)
  const activeCampusLayout = CAMPUS_VARIANTS.find(option => option.id === variant)
  const activeSpotlight = SPOTLIGHT_VARIANTS.find(option => option.id === variant)
  const activeStorefront = STOREFRONT_VARIANTS.find(option => option.id === variant)

  const selectCampusLayout = (next: "campus" | "campus-v3" = "campus") => {
    setHomeVariant(next)
    navigate(homeVariantPath(next))
  }

  const selectSpotlightLayout = (
    next: "spotlight" | "spotlight-v2" | "spotlight-v3" | "spotlight-v4" = "spotlight",
  ) => {
    setHomeVariant(next)
    navigate(homeVariantPath(next))
  }

  const selectStorefrontLayout = (
    next: "storefront" | "storefront-v2" = "storefront",
  ) => {
    setHomeVariant(next)
    navigate(homeVariantPath(next))
  }

  const trailingLabel =
    isCampusVariant(variant) && activeCampusBanner && activeCampusLayout
      ? `${activeCampusLayout.label} · ${activeCampusBanner.label}`
      : isSpotlightVariant(variant) && activeSpotlight
        ? activeSpotlight.label
        : isStorefrontVariant(variant) && activeStorefront
          ? activeStorefront.label
          : active?.label

  return (
    <DropdownMenuSub>
      <DropdownMenuSubTrigger>
        <i className="fa-light fa-house" aria-hidden="true" />
        Home layout
        <span className="ms-auto pe-1 text-xs text-muted-foreground">{trailingLabel}</span>
      </DropdownMenuSubTrigger>
      <DropdownMenuSubContent className="w-64">
        <DropdownMenuRadioGroup
          value={
            isCampusVariant(variant) ||
            isSpotlightVariant(variant) ||
            isStorefrontVariant(variant)
              ? ""
              : variant
          }
          onValueChange={value => {
            const next = value as HomeVariant
            setHomeVariant(next)
            navigate(homeVariantPath(next))
          }}
        >
          {FLAT_VARIANTS.map(option => (
            <DropdownMenuRadioItem
              key={option.id}
              value={option.id}
              className="items-start gap-2 py-2"
            >
              <span className="flex flex-col gap-0.5">
                <span className="font-medium">{option.label}</span>
                <span className="text-xs leading-snug text-muted-foreground">
                  {option.description}
                </span>
              </span>
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>

        <DropdownMenuSeparator />

        <DropdownMenuSub>
          <DropdownMenuSubTrigger
            className="items-start gap-2 py-2"
            onClick={() =>
              selectStorefrontLayout(isStorefrontVariant(variant) ? variant : "storefront")
            }
          >
            <span className="flex min-w-0 flex-col gap-0.5">
              <span className="font-medium">{STOREFRONT_VARIANT.label}</span>
              <span className="text-xs leading-snug text-muted-foreground">
                {STOREFRONT_VARIANT.description}
              </span>
            </span>
            {isStorefrontVariant(variant) ? (
              <i className="fa-solid fa-check ms-auto shrink-0 text-sm" aria-hidden="true" />
            ) : null}
          </DropdownMenuSubTrigger>
          <DropdownMenuSubContent className="w-56">
            <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
              Storefront layout
            </DropdownMenuLabel>
            <DropdownMenuRadioGroup
              value={isStorefrontVariant(variant) ? variant : "storefront"}
              onValueChange={value => {
                selectStorefrontLayout(value as "storefront" | "storefront-v2")
              }}
            >
              {STOREFRONT_VARIANTS.map(option => (
                <DropdownMenuRadioItem
                  key={option.id}
                  value={option.id}
                  className="items-start gap-2 py-2"
                >
                  <span className="flex flex-col gap-0.5">
                    <span className="font-medium">{option.label}</span>
                    <span className="text-xs leading-snug text-muted-foreground">
                      {option.description}
                    </span>
                  </span>
                </DropdownMenuRadioItem>
              ))}
            </DropdownMenuRadioGroup>
          </DropdownMenuSubContent>
        </DropdownMenuSub>

        <DropdownMenuSub>
          <DropdownMenuSubTrigger
            className="items-start gap-2 py-2"
            onClick={() => selectSpotlightLayout(isSpotlightVariant(variant) ? variant : "spotlight")}
          >
            <span className="flex min-w-0 flex-col gap-0.5">
              <span className="font-medium">{SPOTLIGHT_VARIANT.label}</span>
              <span className="text-xs leading-snug text-muted-foreground">
                {SPOTLIGHT_VARIANT.description}
              </span>
            </span>
            {isSpotlightVariant(variant) ? (
              <i className="fa-solid fa-check ms-auto shrink-0 text-sm" aria-hidden="true" />
            ) : null}
          </DropdownMenuSubTrigger>
          <DropdownMenuSubContent className="w-56">
            <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
              Spotlight layout
            </DropdownMenuLabel>
            <DropdownMenuRadioGroup
              value={isSpotlightVariant(variant) ? variant : "spotlight"}
              onValueChange={value => {
                selectSpotlightLayout(
                  value as "spotlight" | "spotlight-v2" | "spotlight-v3" | "spotlight-v4",
                )
              }}
            >
              {SPOTLIGHT_VARIANTS.map(option => (
                <DropdownMenuRadioItem
                  key={option.id}
                  value={option.id}
                  className="items-start gap-2 py-2"
                >
                  <span className="flex flex-col gap-0.5">
                    <span className="font-medium">{option.label}</span>
                    <span className="text-xs leading-snug text-muted-foreground">
                      {option.description}
                    </span>
                  </span>
                </DropdownMenuRadioItem>
              ))}
            </DropdownMenuRadioGroup>
          </DropdownMenuSubContent>
        </DropdownMenuSub>

        <DropdownMenuSub>
          <DropdownMenuSubTrigger
            className="items-start gap-2 py-2"
            onClick={() =>
              selectCampusLayout(isCampusVariant(variant) ? variant : "campus")
            }
          >
            <span className="flex min-w-0 flex-col gap-0.5">
              <span className="font-medium">{CAMPUS_VARIANT.label}</span>
              <span className="text-xs leading-snug text-muted-foreground">
                {CAMPUS_VARIANT.description}
              </span>
            </span>
            {isCampusVariant(variant) ? (
              <i className="fa-solid fa-check ms-auto shrink-0 text-sm" aria-hidden="true" />
            ) : null}
          </DropdownMenuSubTrigger>
          <DropdownMenuSubContent className="w-56">
            <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
              Campus layout
            </DropdownMenuLabel>
            <DropdownMenuRadioGroup
              value={isCampusVariant(variant) ? variant : "campus"}
              onValueChange={value => {
                selectCampusLayout(value as "campus" | "campus-v3")
              }}
            >
              {CAMPUS_VARIANTS.map(option => (
                <DropdownMenuRadioItem
                  key={option.id}
                  value={option.id}
                  className="items-start gap-2 py-2"
                >
                  <span className="flex flex-col gap-0.5">
                    <span className="font-medium">{option.label}</span>
                    <span className="text-xs leading-snug text-muted-foreground">
                      {option.description}
                    </span>
                  </span>
                </DropdownMenuRadioItem>
              ))}
            </DropdownMenuRadioGroup>
            <DropdownMenuSeparator />
            <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
              Campus banner
            </DropdownMenuLabel>
            <DropdownMenuRadioGroup
              value={campusBannerMode}
              onValueChange={value => {
                setCampusBannerMode(value as CampusBannerMode)
                selectCampusLayout(isCampusVariant(variant) ? variant : "campus")
              }}
            >
              {CAMPUS_BANNER_MODES.map(banner => (
                <DropdownMenuRadioItem
                  key={banner.id}
                  value={banner.id}
                  className="items-start gap-2 py-2"
                >
                  <span className="flex flex-col gap-0.5">
                    <span className="font-medium">{banner.label}</span>
                    <span className="text-xs leading-snug text-muted-foreground">
                      {banner.description}
                    </span>
                  </span>
                </DropdownMenuRadioItem>
              ))}
            </DropdownMenuRadioGroup>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
  )
}