"use client";

import Image from "next/image";
import Link from "next/link";
import { useDeferredValue, useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { PageContainer } from "@/components/layout/page-container";
import { Button } from "@/components/ui/button";
import {
  STOREFRONT_CART_UPDATED,
  STOREFRONT_WISHLIST_UPDATED,
} from "@/lib/storefront-events";
import { detonexFigmaAssets } from "@/lib/detonex-figma";
import { siteConfig } from "@/lib/site-config";
import type { StorefrontHeaderCategory, StorefrontSearchSuggestion } from "@/types/storefront";

function buildSearchHref(query: string) {
  const params = new URLSearchParams();
  params.set("q", query.trim());
  return `/shop?${params.toString()}`;
}

export function StorefrontHeaderClient({
  categories,
  initialCartCount,
  initialWishlistCount,
  initialIsLoggedIn,
}: {
  categories: StorefrontHeaderCategory[];
  initialCartCount: number;
  initialWishlistCount: number;
  initialIsLoggedIn: boolean;
}) {
  const router = useRouter();
  const visibleCategories = useMemo(
    () => categories.filter((category) => category.slug !== "uncategorized"),
    [categories],
  );
  const [cartCount, setCartCount] = useState(initialCartCount);
  const [wishlistCount, setWishlistCount] = useState(initialWishlistCount);
  const [isLoggedIn, setIsLoggedIn] = useState(initialIsLoggedIn);
  const [activeCategorySlug, setActiveCategorySlug] = useState<string | null>(null);
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query.trim());
  const [suggestions, setSuggestions] = useState<StorefrontSearchSuggestion[]>([]);
  const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false);
  const [activeSuggestionIndex, setActiveSuggestionIndex] = useState<number>(-1);
  const [isSearchFocused, setIsSearchFocused] = useState(false);

  const activeCategory = useMemo(
    () =>
      visibleCategories.find((category) => category.slug === activeCategorySlug) ?? null,
    [activeCategorySlug, visibleCategories],
  );

  useEffect(() => {
    let mounted = true;

    async function loadAccountState() {
      try {
        const response = await fetch("/api/account/session", {
          cache: "no-store",
        });
        const payload = (await response.json()) as {
          session?: unknown;
        };

        if (!mounted) {
          return;
        }

        setIsLoggedIn(Boolean(payload.session));
      } catch {}
    }

    loadAccountState();

    function handleCartUpdated(event: Event) {
      const detail = (event as CustomEvent<{ count?: number }>).detail;
      setCartCount(typeof detail?.count === "number" ? detail.count : 0);
    }

    function handleWishlistUpdated(event: Event) {
      const detail = (event as CustomEvent<{ count?: number }>).detail;
      setWishlistCount(typeof detail?.count === "number" ? detail.count : 0);
    }

    window.addEventListener(STOREFRONT_CART_UPDATED, handleCartUpdated);
    window.addEventListener(STOREFRONT_WISHLIST_UPDATED, handleWishlistUpdated);

    return () => {
      mounted = false;
      window.removeEventListener(STOREFRONT_CART_UPDATED, handleCartUpdated);
      window.removeEventListener(STOREFRONT_WISHLIST_UPDATED, handleWishlistUpdated);
    };
  }, []);

  useEffect(() => {
    if (deferredQuery.length < 2) {
      return;
    }

    const controller = new AbortController();
    const timeoutId = window.setTimeout(async () => {
      try {
        setIsLoadingSuggestions(true);

        const response = await fetch(`/api/search?q=${encodeURIComponent(deferredQuery)}`, {
          signal: controller.signal,
        });
        const payload = (await response.json()) as { items?: StorefrontSearchSuggestion[] };

        if (!response.ok) {
          throw new Error("Search failed");
        }

        setSuggestions(payload.items ?? []);
        setActiveSuggestionIndex(-1);
      } catch (error) {
        if ((error as Error).name !== "AbortError") {
          setSuggestions([]);
        }
      } finally {
        setIsLoadingSuggestions(false);
      }
    }, 180);

    return () => {
      controller.abort();
      window.clearTimeout(timeoutId);
    };
  }, [deferredQuery]);

  function submitSearch(input: string) {
    const normalized = input.trim();

    if (!normalized) {
      return;
    }

    router.push(buildSearchHref(normalized));
    setIsSearchFocused(false);
  }

  function handleSearchKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
    if (event.key === "ArrowDown") {
      event.preventDefault();
      setActiveSuggestionIndex((current) =>
        Math.min(current + 1, Math.max(suggestions.length - 1, 0)),
      );
      return;
    }

    if (event.key === "ArrowUp") {
      event.preventDefault();
      setActiveSuggestionIndex((current) => Math.max(current - 1, -1));
      return;
    }

    if (event.key === "Enter") {
      event.preventDefault();

      if (activeSuggestionIndex >= 0 && suggestions[activeSuggestionIndex]) {
        router.push(suggestions[activeSuggestionIndex].href);
        setIsSearchFocused(false);
        return;
      }

      submitSearch(query);
      return;
    }

    if (event.key === "Escape") {
      setIsSearchFocused(false);
      setActiveSuggestionIndex(-1);
    }
  }

  return (
    <header className="sticky top-0 z-40 bg-surface">
      <PageContainer className="flex min-h-[76px] items-center justify-between gap-5 py-[14px]">
        <div className="flex min-w-0 flex-1 items-center gap-5">
          <button
            type="button"
            aria-label="Otvori izbornik"
            className="inline-flex size-6 items-center justify-center text-primary"
          >
            <Image src={detonexFigmaAssets.icons.menu} alt="" width={24} height={24} className="size-6" />
          </button>
          <Link href="/" className="shrink-0">
            <Image
              src={detonexFigmaAssets.headerLogo}
              alt={siteConfig.name}
              width={177}
              height={42}
              className="h-[42px] w-auto"
              priority
            />
          </Link>
        </div>

        <div className="relative hidden flex-[1.2] items-center md:flex">
          <form
            className="w-full"
            onSubmit={(event) => {
              event.preventDefault();
              submitSearch(query);
            }}
          >
            <div className="flex h-12 w-full items-center justify-between rounded-control border border-line bg-muted-surface px-6 focus-within:outline-none focus-within:ring-0 focus-within:ring-transparent">
              <input
                type="search"
                value={query}
                onChange={(event) => {
                  const nextQuery = event.target.value;
                  setQuery(nextQuery);
                  setActiveSuggestionIndex(-1);

                  if (nextQuery.trim().length < 2) {
                    setSuggestions([]);
                    setIsLoadingSuggestions(false);
                  }
                }}
                onFocus={() => setIsSearchFocused(true)}
                onKeyDown={handleSearchKeyDown}
                placeholder="Unesite pojam za pretragu..."
                className="h-full flex-1 appearance-none border-0 bg-transparent text-sm font-medium tracking-[-0.02em] text-primary outline-none placeholder:text-primary/65 ring-0 shadow-none focus:border-0 focus:outline-none focus:ring-0 focus:shadow-none focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-none active:outline-none active:ring-0 [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden"
                style={{ outline: "none", boxShadow: "none" }}
              />
              <button type="submit" aria-label="Pretraži shop" className="inline-flex size-5 items-center justify-center">
                <Image src={detonexFigmaAssets.icons.search} alt="" width={20} height={20} className="size-5" />
              </button>
            </div>
          </form>

          {isSearchFocused && (query.trim().length > 0 || suggestions.length > 0) ? (
            <div className="absolute inset-x-0 top-[calc(100%+8px)] z-[120] overflow-hidden rounded-[8px] border border-black/10 bg-white shadow-[0_24px_48px_rgba(0,0,0,0.12)]">
              {isLoadingSuggestions ? (
                <div className="px-5 py-4 text-sm font-medium text-primary/60">Pretražujem...</div>
              ) : suggestions.length > 0 ? (
                <div className="py-2">
                  {suggestions.map((suggestion, index) => (
                    <button
                      key={suggestion.id}
                      type="button"
                      className={`flex w-full items-center gap-3 px-4 py-3 text-left transition-colors ${
                        index === activeSuggestionIndex ? "bg-muted-surface" : "bg-white"
                      }`}
                      onMouseDown={(event) => {
                        event.preventDefault();
                        router.push(suggestion.href);
                        setIsSearchFocused(false);
                      }}
                    >
                      <div className="relative size-12 shrink-0 overflow-hidden rounded-[6px] bg-muted-surface">
                        {suggestion.image ? (
                          <Image
                            src={suggestion.image.src}
                            alt={suggestion.image.alt || suggestion.name}
                            fill
                            sizes="48px"
                            className="object-cover"
                          />
                        ) : null}
                      </div>
                      <div className="min-w-0 flex-1">
                        <p className="truncate text-[14px] font-semibold tracking-[-0.02em] text-primary">
                          {suggestion.name}
                        </p>
                        <p className="mt-1 text-[13px] text-primary/60">
                          {suggestion.brand?.name ? `${suggestion.brand.name} · ` : ""}
                          {suggestion.price}
                        </p>
                      </div>
                    </button>
                  ))}
                </div>
              ) : query.trim().length >= 2 ? (
                <button
                  type="button"
                  className="block w-full px-5 py-4 text-left text-sm font-medium text-primary/70"
                  onMouseDown={(event) => {
                    event.preventDefault();
                    submitSearch(query);
                  }}
                >
                  Nema direktnih rezultata. Otvori pretragu za &quot;{query.trim()}&quot;.
                </button>
              ) : null}
            </div>
          ) : null}
        </div>

        <div className="hidden flex-1 items-center justify-end gap-6 md:flex">
          <Link href="/wishlist" className="relative">
            <Image src={detonexFigmaAssets.icons.heart} alt="Lista želja" width={24} height={24} className="size-6" />
            <span className="absolute -right-2 -top-2 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[10px] bg-accent px-1 text-[12px] font-semibold leading-none text-white">
              {wishlistCount}
            </span>
          </Link>
          <Link href="/cart" className="relative">
            <Image src={detonexFigmaAssets.icons.cart} alt="Košarica" width={24} height={24} className="size-6" />
            <span className="absolute -right-2 -top-2 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[10px] bg-accent px-1 text-[12px] font-semibold leading-none text-white">
              {cartCount}
            </span>
          </Link>
          <Link
            href={isLoggedIn ? "/my-account" : "/login"}
            className="inline-flex size-12 items-center justify-center rounded-full border border-line bg-muted-surface text-primary"
          >
            <Image src={detonexFigmaAssets.icons.user} alt="Moj račun" width={24} height={24} className="size-6" />
          </Link>
          <Button href={isLoggedIn ? "/my-account" : "/register/company"} size="md">
            B2B
          </Button>
        </div>
      </PageContainer>

      <div className="relative bg-dark-green" onMouseLeave={() => setActiveCategorySlug(null)}>
        <PageContainer className="hidden h-[54px] items-center justify-between md:flex">
          {visibleCategories.map((item) => (
            <Link
              key={item.id}
              href={item.href}
              className="inline-flex h-full items-center gap-1.5 text-[14px] font-semibold tracking-[-0.02em] text-white visited:text-white hover:text-white focus:text-white"
              onMouseEnter={() => setActiveCategorySlug(item.slug)}
            >
              <span className="text-white">{item.name}</span>
              <Image
                src={detonexFigmaAssets.icons.chevronDown}
                alt=""
                width={16}
                height={16}
                className="size-4"
              />
            </Link>
          ))}
          <Link
            href="/shop?on_sale=1"
            className="inline-flex h-full items-center gap-2 text-[14px] font-semibold tracking-[-0.02em] text-white visited:text-white hover:text-white focus:text-white"
          >
            <span className="size-1.5 rounded-full bg-accent" />
            <span className="text-white">Akcija</span>
          </Link>
        </PageContainer>

        {activeCategory?.children.length ? (
          <>
            <div
              className="fixed inset-x-0 bottom-0 top-[130px] z-[60] bg-black/30"
              onMouseEnter={() => setActiveCategorySlug(null)}
            />
            <div className="absolute left-0 top-full z-[70] w-full px-0 py-5">
              <PageContainer>
                <div className="rounded-[8px] bg-white p-5 shadow-[0_24px_48px_rgba(0,0,0,0.16)]">
                  <div className="grid gap-5 xl:grid-cols-5">
                    {activeCategory.children.map((child) => (
                      <Link
                        key={child.id}
                        href={child.href}
                        className="relative flex h-[160px] items-end justify-center overflow-hidden rounded-[6px] p-[10px]"
                      >
                        {child.image ? (
                          <Image
                            src={child.image.src}
                            alt={child.image.alt || child.name}
                            fill
                            sizes="224px"
                            className="object-cover"
                          />
                        ) : (
                          <div className="absolute inset-0 bg-[linear-gradient(135deg,#61695e_0%,#202621_100%)]" />
                        )}
                        <div className="absolute inset-0 bg-black/30" />
                        <span className="relative w-full text-center text-[16px] font-semibold tracking-[-0.02em] text-white">
                          {child.name}
                        </span>
                      </Link>
                    ))}
                  </div>
                </div>
              </PageContainer>
            </div>
          </>
        ) : null}
      </div>
    </header>
  );
}