import { FormEvent } from 'react';
import { Link, NavLink, useLocation, useNavigate } from 'react-router-dom';

import { appConfig } from '@/config/appConfig';
import { Badge } from '@/components/ui/Badge';
import { IconButton } from '@/components/ui/IconButton';
import { Input } from '@/components/ui/Input';
import { usePreferencesStore } from '@/store/preferencesStore';
import { cn } from '@/utils/classNames';

function SearchIcon() {
  return (
    <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" strokeLinecap="round" />
    </svg>
  );
}

function LogoMark() {
  return (
    <span className="relative flex size-10 shrink-0 items-center justify-center rounded-2xl border border-accent/35 bg-accent/12 text-accent shadow-glow">
      <svg className="size-6" viewBox="0 0 32 32" fill="none" aria-hidden="true">
        <path
          d="M6 18.5 13.5 6 20 18.5 26 8v16"
          stroke="currentColor"
          strokeWidth="2.6"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <circle cx="13.5" cy="6" r="2.2" fill="currentColor" />
        <circle cx="20" cy="18.5" r="2.2" fill="currentColor" />
      </svg>
    </span>
  );
}

function ThemeIcon({ mode }: { readonly mode: string }) {
  if (mode === 'light') {
    return (
      <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <circle cx="12" cy="12" r="4" />
        <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" strokeLinecap="round" />
      </svg>
    );
  }

  if (mode === 'dark') {
    return (
      <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M21 14.5A8.5 8.5 0 0 1 9.5 3a7 7 0 1 0 11.5 11.5Z" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    );
  }

  return (
    <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M12 3v18M4.2 7.5A9 9 0 0 1 12 3a9 9 0 0 1 0 18 9 9 0 0 1-7.8-4.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function TopNav() {
  const location = useLocation();
  const navigate = useNavigate();
  const query = usePreferencesStore((state) => state.catalogueQuery);
  const setQuery = usePreferencesStore((state) => state.setCatalogueQuery);
  const favouriteCount = usePreferencesStore((state) => state.favourites.length);
  const themeMode = usePreferencesStore((state) => state.themeMode);
  const toggleThemeMode = usePreferencesStore((state) => state.toggleThemeMode);

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

    const nextParams = new URLSearchParams(location.pathname === '/' ? location.search : '');
    const trimmedQuery = query.trim();

    if (trimmedQuery) {
      nextParams.set('q', trimmedQuery);
    } else {
      nextParams.delete('q');
    }

    navigate({
      pathname: '/',
      search: nextParams.toString()
    });
  };

  const nextThemeLabel =
    themeMode === 'system'
      ? 'Switch to dark theme'
      : themeMode === 'dark'
        ? 'Switch to light theme'
        : 'Use system theme';

  return (
    <header className="sticky top-0 z-50 border-b border-border/70 bg-bg/78 backdrop-blur-xl">
      <div className="mx-auto flex min-h-16 w-full max-w-[1540px] items-center gap-3 px-4 py-3 sm:px-6 lg:px-8">
        <Link
          to="/"
          className="interactive-ring flex min-w-0 items-center gap-3 rounded-2xl pr-2"
          aria-label={`${appConfig.name} catalogue home`}
        >
          <LogoMark />
          <span className="hidden min-w-0 sm:block">
            <span className="block truncate text-sm font-black uppercase tracking-[0.26em] text-foreground">
              {appConfig.name}
            </span>
            <span className="block truncate text-xs font-medium text-muted">{appConfig.tagline}</span>
          </span>
        </Link>

        <nav className="ml-1 hidden items-center gap-1 md:flex" aria-label="Primary navigation">
          <NavLink
            to="/"
            className={({ isActive }) =>
              cn(
                'interactive-ring rounded-xl px-3 py-2 text-sm font-semibold transition hover:bg-elevated/75',
                isActive ? 'text-foreground' : 'text-muted hover:text-foreground',
              )
            }
          >
            Catalogue
          </NavLink>
        </nav>

        <form className="ml-auto hidden w-full max-w-md lg:block" role="search" onSubmit={handleSubmit}>
          <Input
            label="Search machines"
            hideLabel
            type="search"
            value={query}
            onChange={(event) => setQuery(event.currentTarget.value)}
            placeholder="Search engines, gears, pumps…"
            leftIcon={<SearchIcon />}
            inputSize="sm"
          />
        </form>

        <Badge tone="accent" className="hidden md:inline-flex">
          {favouriteCount} saved
        </Badge>

        <IconButton
          label={`${nextThemeLabel}. Current mode: ${themeMode}.`}
          icon={<ThemeIcon mode={themeMode} />}
          onClick={toggleThemeMode}
          variant="outline"
        />
      </div>

      <div className="border-t border-border/50 px-4 py-3 lg:hidden">
        <form role="search" onSubmit={handleSubmit}>
          <Input
            label="Search machines"
            hideLabel
            type="search"
            value={query}
            onChange={(event) => setQuery(event.currentTarget.value)}
            placeholder="Search the mechanical catalogue…"
            leftIcon={<SearchIcon />}
            inputSize="sm"
          />
        </form>
      </div>
    </header>
  );
}