"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import ProfileIcon from "@app/components/ProfileIcon";
import ThemeSwitcher from "@app/components/ThemeSwitcher";
import { useTheme } from "next-themes";
import BrandingLogo from "./BrandingLogo";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
import { ListUserOrgsResponse } from "@server/routers/org";
import { LauncherOrgSelector } from "@app/components/resource-launcher/LauncherOrgSelector";
import { Button } from "@app/components/ui/button";
import { useTranslations } from "next-intl";
import { CommandPaletteTrigger } from "@app/components/command-palette/CommandPaletteTrigger";
import type { SidebarNavItem } from "@app/components/SidebarNav";
import { cn } from "@app/lib/cn";

type LayoutHeaderProps = {
    showTopBar: boolean;
    launcherMode?: boolean;
    orgId?: string;
    orgs?: ListUserOrgsResponse["orgs"];
    showViewAsAdmin?: boolean;
    launcherNavItems?: SidebarNavItem[];
};

export function LayoutHeader({
    showTopBar,
    launcherMode = false,
    orgId,
    orgs,
    showViewAsAdmin = false,
    launcherNavItems = []
}: LayoutHeaderProps) {
    const { theme } = useTheme();
    const [path, setPath] = useState<string>("");
    const { env } = useEnvContext();
    const { isUnlocked } = useLicenseStatusContext();
    const t = useTranslations();
    const pathname = usePathname();

    const logoWidth = isUnlocked()
        ? env.branding.logo?.navbar?.width || 128
        : 128;
    const logoHeight = isUnlocked()
        ? env.branding.logo?.navbar?.height || 32
        : 32;

    useEffect(() => {
        function getPath() {
            let lightOrDark = theme;

            if (theme === "system" || !theme) {
                lightOrDark = window.matchMedia("(prefers-color-scheme: dark)")
                    .matches
                    ? "dark"
                    : "light";
            }

            if (lightOrDark === "light") {
                return "/logo/word_mark_black.png";
            }

            return "/logo/word_mark_white.png";
        }

        setPath(getPath());
    }, [theme]);

    return (
        <div className="absolute top-0 left-0 right-0 z-50 hidden md:block">
            <div className="absolute inset-0 bg-background backdrop-blur-sm" />
            <div className="relative z-10 px-6 py-2">
                <div className="container mx-auto max-w-12xl">
                    <div className="h-16 flex items-center justify-between">
                        <div className="flex items-center gap-5 min-w-0">
                            <Link
                                href="/"
                                className="flex items-center shrink-0"
                            >
                                <BrandingLogo
                                    width={logoWidth}
                                    height={logoHeight}
                                />
                            </Link>
                            {launcherMode ? (
                                <>
                                    <LauncherOrgSelector
                                        orgId={orgId}
                                        orgs={orgs}
                                    />
                                    {orgId
                                        ? launcherNavItems
                                              .filter((item) => item.href)
                                              .map((item) => {
                                                  const href =
                                                      item.href!.replace(
                                                          "{orgId}",
                                                          orgId
                                                      );
                                                  const isActive =
                                                      href === `/${orgId}`
                                                          ? pathname === href
                                                          : pathname === href ||
                                                            pathname?.startsWith(
                                                                `${href}/`
                                                            );

                                                  return (
                                                      <Button
                                                          key={href}
                                                          variant="text"
                                                          size="sm"
                                                          className={cn(
                                                              "p-0",
                                                              isActive &&
                                                                  "text-foreground font-medium underline-offset-4 underline"
                                                          )}
                                                          asChild
                                                      >
                                                          <Link href={href}>
                                                              {t(item.title)}
                                                          </Link>
                                                      </Button>
                                                  );
                                              })
                                        : null}
                                    {showViewAsAdmin && orgId ? (
                                        <Button
                                            variant="text"
                                            size="sm"
                                            className="p-0"
                                            asChild
                                        >
                                            <Link href={`/${orgId}/settings`}>
                                                {t(
                                                    "resourceLauncherViewAsAdmin"
                                                )}
                                            </Link>
                                        </Button>
                                    ) : null}
                                </>
                            ) : null}
                        </div>

                        {showTopBar && (
                            <div className="flex items-center space-x-2">
                                <ThemeSwitcher />
                                <CommandPaletteTrigger
                                    orgId={orgId}
                                    orgs={orgs}
                                />
                                <ProfileIcon />
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default LayoutHeader;