'use client'

import { ChevronDown } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
import { useEffect, useRef, useState } from 'react'

export type Theme = 'light' | 'dark'
export type Language = 'en' | 'fr' | 'ar'

type Dictionary = {
  home: string
  storefront: string
  signIn: string
  ownerSignIn: string
  theme: string
  light: string
  dark: string
}

type LanguageMeta = {
  value: Language
  flag: string
  shortLabel: string
}


export function buildDashboardSignInHref(dashboardUrl: string, language: Language, theme: Theme): string {
  const signInParams = new URLSearchParams()
  signInParams.set('lang', language)
  signInParams.set('theme', theme)
  return `${dashboardUrl}/sign-in?${signInParams.toString()}`
}

export function localeMenuPositionClass(language: Language): string {
  return language === 'ar' ? 'right-0 sm:right-0' : 'left-0 sm:left-auto sm:right-0'
}

export function ownerWorkspaceHref(dashboardUrl: string, companyName: string | null): string {
  return companyName ? dashboardUrl : `${dashboardUrl}/sign-up`
}

export function companyInitial(companyName: string): string {
  return companyName.trim().charAt(0).toUpperCase()
}

export default function StorefrontHeader({
  dict,
  theme,
  setTheme,
  companyName,
  dashboardUrl,
  currentLanguage,
  localeOptions,
  onSelectLanguage,
}: {
  dict: Dictionary
  theme: Theme
  setTheme: (theme: Theme) => void
  companyName: string | null
  dashboardUrl: string
  currentLanguage: LanguageMeta
  localeOptions: LanguageMeta[]
  onSelectLanguage: (language: Language) => void
}) {
  const localeMenuRef = useRef<HTMLDivElement | null>(null)
  const [localeMenuOpen, setLocaleMenuOpen] = useState(false)
  const themeMenuRef = useRef<HTMLDivElement | null>(null)
  const [themeMenuOpen, setThemeMenuOpen] = useState(false)
  const themeOptions = [
    { value: 'light' as const, label: dict.light },
    { value: 'dark' as const, label: dict.dark },
  ]
  const currentTheme = themeOptions.find((option) => option.value === theme) ?? themeOptions[0]
  const menuPositionClass = localeMenuPositionClass(currentLanguage.value)

  useEffect(() => {
    function handlePointerDown(event: MouseEvent) {
      if (!localeMenuRef.current?.contains(event.target as Node)) {
        setLocaleMenuOpen(false)
      }
      if (!themeMenuRef.current?.contains(event.target as Node)) {
        setThemeMenuOpen(false)
      }
    }

    document.addEventListener('mousedown', handlePointerDown)
    return () => document.removeEventListener('mousedown', handlePointerDown)
  }, [])

  function toggleLocaleMenu() {
    setThemeMenuOpen(false)
    setLocaleMenuOpen((open) => !open)
  }

  function toggleThemeMenu() {
    setLocaleMenuOpen(false)
    setThemeMenuOpen((open) => !open)
  }

  const signInHref = buildDashboardSignInHref(dashboardUrl, currentLanguage.value, theme)

  return (
    <header className="sticky top-0 z-50 border-b border-stone-200/80 bg-white/78 backdrop-blur-xl shadow-[0_10px_30px_rgba(15,23,42,0.08)] transition-colors dark:border-blue-900 dark:bg-blue-950/76 dark:shadow-[0_10px_30px_rgba(0,0,0,0.32)]">
      <div className="shell flex min-h-14 flex-col gap-1.5 py-1.5 lg:flex-row lg:items-center lg:justify-between lg:gap-3 lg:py-2">
        <div className="flex items-center justify-between gap-3">
          <Link href="/" className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-[0.14em] text-stone-900 dark:text-stone-100 sm:text-sm sm:tracking-[0.2em]">
            <Image
              src="/rentaldrivego.png"
              alt="RentalDriveGo"
              width={36}
              height={36}
              priority
              unoptimized
              className="h-8 w-8 rounded-md object-contain sm:h-9 sm:w-9"
            />
            <span>RentalDriveGo</span>
          </Link>
        </div>

        <div className="flex flex-col gap-1.5 lg:flex-row lg:items-center lg:gap-3">
          <nav className="flex items-center gap-0.5 overflow-x-auto">
            <Link
              href="/"
              className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm"
            >
              {dict.home}
            </Link>
            <Link
              href="/storefront"
              className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm"
            >
              {dict.storefront}
            </Link>
            <a
              href={signInHref}
              className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm"
            >
              {dict.signIn}
            </a>
            {companyName ? (
              <a
                href={dashboardUrl}
                className="ml-1 flex items-center gap-1.5 rounded-full bg-orange-600 px-3 py-1 text-[12px] font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400 sm:ml-2 sm:gap-2 sm:px-4 sm:py-2 sm:text-sm"
              >
                <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-[10px] font-black dark:bg-blue-950/20">
                  {companyInitial(companyName)}
                </span>
                {companyName}
              </a>
            ) : (
              <a
                href={ownerWorkspaceHref(dashboardUrl, companyName)}
                className="ml-1 rounded-full bg-orange-600 px-3 py-1 text-[12px] font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400 sm:ml-2 sm:px-5 sm:py-2 sm:text-sm"
              >
                {dict.ownerSignIn}
              </a>
            )}
          </nav>
          <div className="flex items-center self-start rounded-full border border-stone-200/80 bg-white/95 p-0.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/85 sm:self-auto sm:p-1">
            <div ref={localeMenuRef} className="relative">
              <button
                type="button"
                onClick={toggleLocaleMenu}
                className="inline-flex min-w-[4.75rem] items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-[11px] font-semibold text-stone-700 transition hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-blue-900/40 sm:min-w-[5.25rem] sm:px-3 sm:py-2 sm:text-xs"
                aria-expanded={localeMenuOpen}
                aria-haspopup="menu"
              >
                <span aria-hidden="true">{currentLanguage.flag}</span>
                <span>{currentLanguage.shortLabel}</span>
                <ChevronDown className={`h-3.5 w-3.5 transition-transform ${localeMenuOpen ? 'rotate-180' : ''}`} />
              </button>
              {localeMenuOpen ? (
                <div className={`absolute top-full z-30 mt-2 w-44 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${menuPositionClass}`}>
                  {localeOptions.map((option) => (
                    <button
                      key={option.value}
                      type="button"
                      onClick={() => {
                        onSelectLanguage(option.value)
                        setLocaleMenuOpen(false)
                      }}
                      className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
                    >
                      <span aria-hidden="true">{option.flag}</span>
                      <span>{option.shortLabel}</span>
                    </button>
                  ))}
                </div>
              ) : null}
            </div>
            <span className="mx-1 h-6 w-px bg-stone-200 dark:bg-stone-700" aria-hidden="true" />
            <div ref={themeMenuRef} className="relative">
              <button
                type="button"
                onClick={toggleThemeMenu}
                className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 transition hover:bg-stone-100 dark:hover:bg-blue-900/40 sm:px-2.5 sm:py-1.5"
                aria-expanded={themeMenuOpen}
                aria-haspopup="menu"
              >
                <span className="rounded-full bg-blue-900 px-3 py-1 text-[11px] font-semibold text-white dark:bg-orange-400 dark:text-white sm:px-3.5 sm:py-1.5 sm:text-xs">
                  {currentTheme.label}
                </span>
                <ChevronDown className={`h-3.5 w-3.5 text-stone-500 transition-transform dark:text-stone-400 ${themeMenuOpen ? 'rotate-180' : ''}`} />
              </button>
              {themeMenuOpen ? (
                <div className={`absolute top-full z-30 mt-2 w-44 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${menuPositionClass}`}>
                  {themeOptions
                    .filter((option) => option.value !== theme)
                    .map((option) => (
                      <button
                        key={option.value}
                        type="button"
                        onClick={() => {
                          setTheme(option.value)
                          setThemeMenuOpen(false)
                        }}
                        className="flex w-full items-center justify-between px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
                      >
                        <span>{option.label}</span>
                      </button>
                    ))}
                </div>
              ) : null}
            </div>
          </div>
        </div>
      </div>
    </header>
  )
}