import { useEffect, useState } from 'react';
import type { FormEvent } from 'react';
import { Link, NavLink, useNavigate, useSearchParams } from 'react-router-dom';

import { Button } from '../ui/Button';
import { env } from '../../config/env';
import { usePreferencesStore } from '../../store/preferencesStore';

export function TopNavigation() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const searchTerm = searchParams.get('q') ?? '';
  const [query, setQuery] = useState(searchTerm);
  const theme = usePreferencesStore((state) => state.theme);
  const toggleTheme = usePreferencesStore((state) => state.toggleTheme);

  useEffect(() => {
    setQuery(searchTerm);
  }, [searchTerm]);

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const trimmedQuery = query.trim();
    navigate(trimmedQuery ? `/?q=${encodeURIComponent(trimmedQuery)}` : '/');
  };

  return (
    <header className="sticky top-0 z-40 border-b border-line/70 bg-background/86 backdrop-blur-xl">
      <nav
        aria-label="Primary navigation"
        className="mx-auto flex h-16 max-w-[1800px] items-center gap-4 px-4 sm:px-6"
      >
        <Link
          className="group flex items-center gap-3 rounded-xl focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
          to="/"
        >
          <span className="grid h-10 w-10 place-items-center rounded-2xl border border-primary/50 bg-primary/15 text-lg font-black text-primary shadow-glow">
            M
          </span>
          <span className="hidden sm:block">
            <span className="block text-sm font-black uppercase tracking-[0.28em] text-white dark:text-white">
              {env.appName}
            </span>
            <span className="block text-xs text-muted">Mechanical Systems Explorer</span>
          </span>
        </Link>

        <div className="hidden h-6 w-px bg-line/70 md:block" />

        <NavLink
          className={({ isActive }) =>
            [
              'hidden rounded-xl px-3 py-2 text-sm font-semibold transition hover:bg-elevated/70 hover:text-white md:inline-flex',
              isActive ? 'bg-primary/15 text-blue-100' : 'text-slate-300'
            ].join(' ')
          }
          to="/"
        >
          Catalogue
        </NavLink>

        <form className="ml-auto hidden flex-1 justify-end md:flex" onSubmit={handleSubmit} role="search">
          <label className="sr-only" htmlFor="global-search">
            Search the machine catalogue
          </label>
          <div className="relative w-full max-w-md">
            <input
              className="h-10 w-full rounded-xl border border-line/70 bg-surface/80 px-4 pr-24 text-sm text-white placeholder:text-muted transition focus:border-primary focus:outline-none"
              id="global-search"
              onChange={(event) => setQuery(event.currentTarget.value)}
              placeholder="Search engines, pumps, gears..."
              type="search"
              value={query}
            />
            <button
              className="absolute right-1 top-1 h-8 rounded-lg bg-primary px-3 text-xs font-bold uppercase tracking-[0.14em] text-white transition hover:bg-primary/90"
              type="submit"
            >
              Search
            </button>
          </div>
        </form>

        <Button
          aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
          onClick={toggleTheme}
          size="sm"
          variant="ghost"
        >
          {theme === 'dark' ? 'Light' : 'Dark'}
        </Button>
      </nav>
    </header>
  );
}