'use client';

import { AnimatePresence, motion } from 'framer-motion';
import {
  CalendarDays,
  Check,
  ChevronDown,
  Edit2,
  Filter,
  FolderOpen,
  MoreVertical,
  Plus,
  SlidersHorizontal,
  Star,
  Trash2,
  TrendingUp,
} from 'lucide-react';
import type { Dispatch, SetStateAction } from 'react';
import { UniversalDropdown, UniversalDropdownOption } from '@/app/components/profile/UniversalDropdown';
import { PERIOD_LABELS, SORT_LABELS } from './constants';
import type { Folder, LinksPeriod, SortBy, Tag as TagType } from './types';

type MenuKey = 'folder' | 'tag' | 'period' | 'sort' | null;

type FilterToolbarProps = {
  folderId: string | null;
  isFavorite: boolean;
  tagIds: string[];
  sortBy: SortBy;
  selectedPeriod: LinksPeriod;
  totalLinks: number;
  favoriteCount: number;
  folders: Folder[];
  localTags: TagType[];
  activeFolderLabel: string;
  activeTagLabel: string;
  sortLabel: string;

  showFolderMenu: boolean;
  showTagMenu: boolean;
  showPeriodMenu: boolean;
  showSortMenu: boolean;
  setShowFolderMenu: Dispatch<SetStateAction<boolean>>;
  setShowTagMenu: Dispatch<SetStateAction<boolean>>;
  setShowPeriodMenu: Dispatch<SetStateAction<boolean>>;
  setShowSortMenu: Dispatch<SetStateAction<boolean>>;
  closeOtherMenus: (keep: MenuKey) => void;

  newFolderName: string;
  setNewFolderName: Dispatch<SetStateAction<string>>;
  showAddFolderInput: boolean;
  setShowAddFolderInput: Dispatch<SetStateAction<boolean>>;
  isCreatingFolder: boolean;
  folderActionError: string;
  setFolderActionError: Dispatch<SetStateAction<string>>;
  openFolderActionsId: string | null;
  setOpenFolderActionsId: Dispatch<SetStateAction<string | null>>;
  editingFolderId: string | null;
  editingFolderName: string;
  setEditingFolderName: Dispatch<SetStateAction<string>>;
  isRenamingFolderId: string | null;
  isDeletingFolderId: string | null;

  newTagName: string;
  setNewTagName: Dispatch<SetStateAction<string>>;
  showAddTagInput: boolean;
  setShowAddTagInput: Dispatch<SetStateAction<boolean>>;
  isCreatingTag: boolean;
  tagActionError: string;
  setTagActionError: Dispatch<SetStateAction<string>>;
  openTagActionsId: string | null;
  setOpenTagActionsId: Dispatch<SetStateAction<string | null>>;
  editingTagId: string | null;
  editingTagName: string;
  setEditingTagName: Dispatch<SetStateAction<string>>;
  isRenamingTagId: string | null;
  isDeletingTagId: string | null;

  handleCreateFolder: () => void;
  handleRenameFolder: () => void;
  handleDeleteFolder: (folder: Folder) => void;
  startRenameFolder: (folder: Folder) => void;
  cancelRenameFolder: () => void;

  handleCreateTag: () => void;
  handleRenameTag: () => void;
  handleDeleteTag: (tag: TagType) => void;
  startRenameTag: (tag: TagType) => void;
  cancelRenameTag: () => void;
  toggleTagFilter: (tagId: string) => void;

  updateParams: (mutate: (params: URLSearchParams) => void) => void;
};

export function FilterToolbar(props: FilterToolbarProps) {
  const {
    folderId,
    isFavorite,
    tagIds,
    sortBy,
    selectedPeriod,
    totalLinks,
    favoriteCount,
    folders,
    localTags,
    activeFolderLabel,
    activeTagLabel,
    sortLabel,

    showFolderMenu,
    showTagMenu,
    showPeriodMenu,
    showSortMenu,
    setShowFolderMenu,
    setShowTagMenu,
    setShowPeriodMenu,
    setShowSortMenu,
    closeOtherMenus,

    newFolderName,
    setNewFolderName,
    showAddFolderInput,
    setShowAddFolderInput,
    isCreatingFolder,
    folderActionError,
    setFolderActionError,
    openFolderActionsId,
    setOpenFolderActionsId,
    editingFolderId,
    editingFolderName,
    setEditingFolderName,
    isRenamingFolderId,
    isDeletingFolderId,

    newTagName,
    setNewTagName,
    showAddTagInput,
    setShowAddTagInput,
    isCreatingTag,
    tagActionError,
    setTagActionError,
    openTagActionsId,
    setOpenTagActionsId,
    editingTagId,
    editingTagName,
    setEditingTagName,
    isRenamingTagId,
    isDeletingTagId,

    handleCreateFolder,
    handleRenameFolder,
    handleDeleteFolder,
    startRenameFolder,
    cancelRenameFolder,

    handleCreateTag,
    handleRenameTag,
    handleDeleteTag,
    startRenameTag,
    cancelRenameTag,
    toggleTagFilter,

    updateParams,
  } = props;

  return (
    <div className="relative z-30 rounded-xl border border-white/10 bg-black/40 p-2 backdrop-blur-md">
      <div className="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap sm:items-center">
        <button
          type="button"
          aria-label={`Все ссылки: ${totalLinks}`}
          onClick={() => {
            updateParams((params) => {
              params.delete('isFavorite');
              params.delete('folderId');
              params.delete('tagIds');
            });
          }}
          className={`inline-flex w-full items-center justify-between gap-2 rounded-lg border px-4 py-1.5 text-sm font-medium transition-colors sm:w-auto sm:justify-start ${
            !isFavorite && !folderId && tagIds.length === 0
              ? 'border-white/10 bg-white/10 text-white'
              : 'border-transparent text-gray-300 hover:border-white/10 hover:bg-white/[0.05] hover:text-white'
          }`}
        >
          Все ссылки
          <span className="rounded bg-black/50 px-1.5 py-0.5 font-mono text-xs text-gray-500">{totalLinks}</span>
        </button>

        <button
          type="button"
          onClick={() => {
            updateParams((params) => {
              params.set('isFavorite', 'true');
              params.delete('folderId');
            });
          }}
          className={`inline-flex w-full items-center justify-between gap-2 rounded-lg border px-4 py-1.5 text-sm font-medium transition-colors sm:w-auto sm:justify-start ${
            isFavorite
              ? 'border-white/10 bg-white/10 text-white'
              : 'border-white/10 bg-white/5 text-gray-300 hover:border-white/20 hover:bg-white/[0.08] hover:text-white'
          }`}
        >
          <Star className={`h-4 w-4 transition-colors ${isFavorite ? 'fill-current text-amber-300' : 'text-gray-500'}`} />
          Избранное
          <span className="rounded bg-black/50 px-1.5 py-0.5 font-mono text-xs text-gray-500">{favoriteCount}</span>
        </button>

        <div className="min-w-0">
          <UniversalDropdown
            open={showFolderMenu}
            onOpenChange={(nextOpen) => {
              setShowFolderMenu(nextOpen);
              if (nextOpen) {
                closeOtherMenus('folder');
              }
            }}
            label={activeFolderLabel}
            leadingIcon={<FolderOpen className="h-4 w-4 opacity-80" />}
            active={showFolderMenu || Boolean(folderId)}
            triggerClassName="flex w-full max-w-full justify-between px-4 py-1.5 text-sm font-medium sm:w-auto sm:max-w-[13rem] sm:justify-start"
            widthClassName="w-[calc(100vw-2rem)] max-w-[19rem] sm:w-[19rem]"
            menuClassName="flex max-h-[min(82vh,560px)] flex-col overflow-x-hidden overflow-y-auto"
          >
            <div className="mb-1 shrink-0 rounded-lg border border-white/10 bg-black/35 p-2">
              {showAddFolderInput ? (
                <div className="flex items-center gap-2">
                  <input
                    value={newFolderName}
                    onChange={(event) => {
                      setNewFolderName(event.target.value);
                      if (folderActionError) setFolderActionError('');
                    }}
                    onKeyDown={(event) => {
                      event.stopPropagation();
                      if (event.key === 'Enter') {
                        event.preventDefault();
                        handleCreateFolder();
                      }
                      if (event.key === 'Escape') {
                        event.preventDefault();
                        setShowAddFolderInput(false);
                        setNewFolderName('');
                        setFolderActionError('');
                      }
                    }}
                    autoFocus
                    placeholder="Новая папка"
                    onClick={(event) => event.stopPropagation()}
                    className="h-8 min-w-0 flex-1 rounded-md border border-white/10 bg-black/40 px-2 text-xs text-white placeholder:text-gray-500 outline-none transition-colors focus:border-violet-500/40"
                  />
                  <button
                    type="button"
                    onClick={() => handleCreateFolder()}
                    disabled={isCreatingFolder || !newFolderName.trim()}
                    className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-violet-500/30 bg-violet-500/15 text-xs text-violet-100 transition-colors hover:bg-violet-500/25 disabled:cursor-not-allowed disabled:opacity-60"
                    title="Создать папку"
                  >
                    {isCreatingFolder ? (
                      <span className="h-3 w-3 animate-spin rounded-full border border-violet-200 border-t-transparent" />
                    ) : (
                      <Check className="h-3.5 w-3.5" />
                    )}
                  </button>
                </div>
              ) : (
                <button
                  type="button"
                  onClick={() => {
                    setShowAddFolderInput(true);
                    setFolderActionError('');
                  }}
                  className="inline-flex h-8 w-full items-center justify-center gap-2 rounded-md border border-violet-500/30 bg-violet-500/15 px-3 text-xs font-medium text-violet-100 transition-colors hover:bg-violet-500/25"
                >
                  <Plus className="h-3.5 w-3.5" />
                  Добавить папку
                </button>
              )}
              {folderActionError ? (
                <p className="mt-1.5 rounded-md border border-red-500/20 bg-red-500/10 px-2 py-1 text-[11px] text-red-200">{folderActionError}</p>
              ) : null}
            </div>

            <div className="min-h-0 flex-1 space-y-1 pr-1">
              {folders.length > 0 ? (
                folders.map((folder) => {
                  const active = folderId === folder.id;
                  const isEditingFolder = editingFolderId === folder.id;
                  const isFolderActionsOpen = openFolderActionsId === folder.id;
                  return (
                    <div key={folder.id} className="space-y-1">
                      {isEditingFolder ? (
                        <div className="rounded-lg border border-white/10 bg-black/35 p-2">
                          <input
                            value={editingFolderName}
                            onChange={(event) => {
                              setEditingFolderName(event.target.value);
                              if (folderActionError) setFolderActionError('');
                            }}
                            onClick={(event) => event.stopPropagation()}
                            onKeyDown={(event) => {
                              event.stopPropagation();
                              if (event.key === 'Enter') {
                                event.preventDefault();
                                handleRenameFolder();
                              }
                              if (event.key === 'Escape') {
                                event.preventDefault();
                                cancelRenameFolder();
                              }
                            }}
                            autoFocus
                            className="mb-1.5 h-8 w-full rounded-md border border-white/10 bg-black/40 px-2 text-xs text-white outline-none transition-colors focus:border-violet-500/40"
                            placeholder="Название папки"
                          />
                          <div className="flex items-center gap-1.5">
                            <button
                              type="button"
                              onClick={() => handleRenameFolder()}
                              disabled={isRenamingFolderId === folder.id || !editingFolderName.trim()}
                              className="inline-flex flex-1 items-center justify-center gap-1 rounded-md border border-violet-500/30 bg-violet-500/15 px-2 py-1 text-[11px] text-violet-100 transition-colors hover:bg-violet-500/25 disabled:cursor-not-allowed disabled:opacity-60"
                            >
                              {isRenamingFolderId === folder.id ? (
                                <>
                                  <span className="h-3 w-3 animate-spin rounded-full border border-violet-200 border-t-transparent" />
                                  Сохранение...
                                </>
                              ) : (
                                'Сохранить'
                              )}
                            </button>
                            <button
                              type="button"
                              onClick={cancelRenameFolder}
                              className="inline-flex flex-1 items-center justify-center rounded-md border border-white/10 bg-white/[0.03] px-2 py-1 text-[11px] text-gray-300 transition-colors hover:bg-white/[0.08] hover:text-white"
                            >
                              Отмена
                            </button>
                          </div>
                        </div>
                      ) : (
                        <>
                          <div className={`grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2 rounded-lg transition-colors ${
                            active
                              ? 'bg-violet-500/15 text-violet-100'
                              : 'text-gray-300 hover:bg-white/5 hover:text-white'
                          }`}>
                            <button
                              type="button"
                              onClick={() => {
                                updateParams((params) => {
                                  if (active) {
                                    params.delete('folderId');
                                  } else {
                                    params.set('folderId', folder.id);
                                    params.delete('isFavorite');
                                  }
                                });
                              }}
                              className="inline-flex min-w-0 items-center gap-2 px-3 py-2 text-left text-sm"
                            >
                              <FolderOpen className={`h-4 w-4 shrink-0 ${active ? 'text-violet-300' : 'text-gray-400'}`} />
                              <span className="truncate">{folder.name}</span>
                            </button>

                            <div className="inline-flex shrink-0 items-center gap-1.5 pr-1">
                              <span className="rounded border border-white/10 bg-black/40 px-1.5 py-0.5 text-[10px] text-gray-500">
                                {folder._count?.links ?? 0}
                              </span>
                              {active ? <Check className="h-4 w-4 text-violet-200" /> : null}
                              <button
                                type="button"
                                onClick={(event) => {
                                  event.stopPropagation();
                                  setOpenFolderActionsId((current) => (current === folder.id ? null : folder.id));
                                }}
                                className={`inline-flex h-7 w-7 items-center justify-center rounded-md border text-gray-500 transition-all duration-200 hover:border-white/20 hover:bg-white/[0.08] hover:text-white ${
                                  isFolderActionsOpen
                                    ? 'border-white/10 bg-white/[0.08] opacity-100'
                                    : 'border-transparent opacity-100 focus-visible:border-white/10 focus-visible:bg-white/[0.08]'
                                }`}
                                title="Действия с папкой"
                              >
                                <MoreVertical className="h-3.5 w-3.5" />
                              </button>
                            </div>
                          </div>

                          <AnimatePresence>
                            {isFolderActionsOpen ? (
                              <motion.div
                                initial={{ opacity: 0, y: -4 }}
                                animate={{ opacity: 1, y: 0 }}
                                exit={{ opacity: 0, y: -4 }}
                                transition={{ duration: 0.14 }}
                                onClick={(event) => event.stopPropagation()}
                                className="folder-actions-panel grid grid-cols-2 gap-1.5 rounded-lg border border-white/10 bg-black/35 p-1.5"
                              >
                                <button
                                  type="button"
                                  onClick={() => startRenameFolder(folder)}
                                  className="inline-flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/[0.06] hover:text-white"
                                >
                                  <Edit2 className="h-3.5 w-3.5 text-blue-300" />
                                  Переименовать
                                </button>
                                <button
                                  type="button"
                                  disabled={isDeletingFolderId === folder.id}
                                  onClick={() => handleDeleteFolder(folder)}
                                  className="inline-flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-red-200 transition-colors hover:bg-red-500/15 disabled:cursor-not-allowed disabled:opacity-60"
                                >
                                  <Trash2 className="h-3.5 w-3.5" />
                                  {isDeletingFolderId === folder.id ? 'Удаление...' : 'Удалить'}
                                </button>
                              </motion.div>
                            ) : null}
                          </AnimatePresence>
                        </>
                      )}
                    </div>
                  );
                })
              ) : (
                <p className="px-2 py-1 text-sm text-gray-500">Нет папок</p>
              )}
            </div>
          </UniversalDropdown>
        </div>

        <div className="min-w-0">
          <UniversalDropdown
            open={showTagMenu}
            onOpenChange={(nextOpen) => {
              setShowTagMenu(nextOpen);
              if (nextOpen) {
                closeOtherMenus('tag');
              }
            }}
            label={activeTagLabel}
            leadingIcon={<Filter className="h-4 w-4 opacity-80" />}
            active={showTagMenu || tagIds.length > 0}
            align="right"
            triggerClassName="flex w-full max-w-full justify-between px-4 py-1.5 text-sm font-medium sm:w-auto sm:max-w-[13rem] sm:justify-start"
            widthClassName="w-[calc(100vw-2rem)] max-w-[19rem] sm:w-[19rem]"
            menuClassName="flex max-h-[min(82vh,560px)] flex-col overflow-x-hidden overflow-y-auto"
          >
          <div className="mb-1 shrink-0 rounded-lg border border-white/10 bg-black/35 p-2">
            {showAddTagInput ? (
              <div className="flex items-center gap-2">
                <input
                  value={newTagName}
                  onChange={(event) => {
                    setNewTagName(event.target.value);
                    if (tagActionError) setTagActionError('');
                  }}
                  onKeyDown={(event) => {
                    event.stopPropagation();
                    if (event.key === 'Enter') {
                      event.preventDefault();
                      handleCreateTag();
                    }
                    if (event.key === 'Escape') {
                      event.preventDefault();
                      setShowAddTagInput(false);
                      setNewTagName('');
                      setTagActionError('');
                    }
                  }}
                  autoFocus
                  placeholder="Новый тег"
                  onClick={(event) => event.stopPropagation()}
                  className="h-8 min-w-0 flex-1 rounded-md border border-white/10 bg-black/40 px-2 text-xs text-white placeholder:text-gray-500 outline-none transition-colors focus:border-violet-500/40"
                />
                <button
                  type="button"
                  onClick={() => handleCreateTag()}
                  disabled={isCreatingTag || !newTagName.trim()}
                  className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-violet-500/30 bg-violet-500/15 text-xs text-violet-100 transition-colors hover:bg-violet-500/25 disabled:cursor-not-allowed disabled:opacity-60"
                  title="Создать тег"
                >
                  {isCreatingTag ? (
                    <span className="h-3 w-3 animate-spin rounded-full border border-violet-200 border-t-transparent" />
                  ) : (
                    <Check className="h-3.5 w-3.5" />
                  )}
                </button>
              </div>
            ) : (
              <button
                type="button"
                onClick={() => {
                  setShowAddTagInput(true);
                  setTagActionError('');
                }}
                className="inline-flex h-8 w-full items-center justify-center gap-2 rounded-md border border-violet-500/30 bg-violet-500/15 px-3 text-xs font-medium text-violet-100 transition-colors hover:bg-violet-500/25"
              >
                <Plus className="h-3.5 w-3.5" />
                Добавить тег
              </button>
            )}
            {tagActionError ? (
              <p className="mt-1.5 rounded-md border border-red-500/20 bg-red-500/10 px-2 py-1 text-[11px] text-red-200">{tagActionError}</p>
            ) : null}
          </div>

          <div className="min-h-0 flex-1 space-y-1 pr-1">
            {localTags.length > 0 ? (
              localTags.map((tag) => {
                const active = tagIds.includes(tag.id);
                const isEditingTag = editingTagId === tag.id;
                const isTagActionsOpen = openTagActionsId === tag.id;
                return (
                  <div key={tag.id} className="space-y-1">
                    {isEditingTag ? (
                      <div className="rounded-lg border border-white/10 bg-black/35 p-2">
                        <input
                          value={editingTagName}
                          onChange={(event) => {
                            setEditingTagName(event.target.value);
                            if (tagActionError) setTagActionError('');
                          }}
                          onClick={(event) => event.stopPropagation()}
                          onKeyDown={(event) => {
                            event.stopPropagation();
                            if (event.key === 'Enter') {
                              event.preventDefault();
                              handleRenameTag();
                            }
                            if (event.key === 'Escape') {
                              event.preventDefault();
                              cancelRenameTag();
                            }
                          }}
                          autoFocus
                          className="mb-1.5 h-8 w-full rounded-md border border-white/10 bg-black/40 px-2 text-xs text-white outline-none transition-colors focus:border-violet-500/40"
                          placeholder="Название тега"
                        />
                        <div className="flex items-center gap-1.5">
                          <button
                            type="button"
                            onClick={() => handleRenameTag()}
                            disabled={isRenamingTagId === tag.id || !editingTagName.trim()}
                            className="inline-flex flex-1 items-center justify-center gap-1 rounded-md border border-violet-500/30 bg-violet-500/15 px-2 py-1 text-[11px] text-violet-100 transition-colors hover:bg-violet-500/25 disabled:cursor-not-allowed disabled:opacity-60"
                          >
                            {isRenamingTagId === tag.id ? (
                              <>
                                <span className="h-3 w-3 animate-spin rounded-full border border-violet-200 border-t-transparent" />
                                Сохранение...
                              </>
                            ) : (
                              'Сохранить'
                            )}
                          </button>
                          <button
                            type="button"
                            onClick={cancelRenameTag}
                            className="inline-flex flex-1 items-center justify-center rounded-md border border-white/10 bg-white/[0.03] px-2 py-1 text-[11px] text-gray-300 transition-colors hover:bg-white/[0.08] hover:text-white"
                          >
                            Отмена
                          </button>
                        </div>
                      </div>
                    ) : (
                      <>
                        <div className={`grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2 rounded-lg transition-colors ${
                          active
                            ? 'bg-violet-500/15 text-violet-100'
                            : 'text-gray-300 hover:bg-white/5 hover:text-white'
                        }`}>
                          <button
                            type="button"
                            onClick={() => toggleTagFilter(tag.id)}
                            className="inline-flex min-w-0 items-center gap-2 px-3 py-2 text-left text-sm"
                          >
                            <span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: tag.color }} />
                            <span className="truncate">{tag.name}</span>
                          </button>

                          <div className="inline-flex shrink-0 items-center gap-1.5 pr-1">
                            <span className="rounded border border-white/10 bg-black/40 px-1.5 py-0.5 text-[10px] text-gray-500">
                              {tag._count?.links ?? 0}
                            </span>
                            {active ? <Check className="h-4 w-4 text-violet-200" /> : null}
                            <button
                              type="button"
                              onClick={(event) => {
                                event.stopPropagation();
                                setOpenTagActionsId((current) => (current === tag.id ? null : tag.id));
                              }}
                              className={`inline-flex h-7 w-7 items-center justify-center rounded-md border text-gray-500 transition-all duration-200 hover:border-white/20 hover:bg-white/[0.08] hover:text-white ${
                                isTagActionsOpen
                                  ? 'border-white/10 bg-white/[0.08]'
                                  : 'border-transparent'
                              }`}
                              title="Действия с тегом"
                            >
                              <MoreVertical className="h-3.5 w-3.5" />
                            </button>
                          </div>
                        </div>

                        <AnimatePresence>
                          {isTagActionsOpen ? (
                            <motion.div
                              initial={{ opacity: 0, y: -4 }}
                              animate={{ opacity: 1, y: 0 }}
                              exit={{ opacity: 0, y: -4 }}
                              transition={{ duration: 0.14 }}
                              onClick={(event) => event.stopPropagation()}
                              className="tag-actions-panel grid grid-cols-2 gap-1.5 rounded-lg border border-white/10 bg-black/35 p-1.5"
                            >
                              <button
                                type="button"
                                onClick={() => startRenameTag(tag)}
                                className="inline-flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/[0.06] hover:text-white"
                              >
                                <Edit2 className="h-3.5 w-3.5 text-blue-300" />
                                Переименовать
                              </button>
                              <button
                                type="button"
                                disabled={isDeletingTagId === tag.id}
                                onClick={() => handleDeleteTag(tag)}
                                className="inline-flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-red-200 transition-colors hover:bg-red-500/15 disabled:cursor-not-allowed disabled:opacity-60"
                              >
                                <Trash2 className="h-3.5 w-3.5" />
                                {isDeletingTagId === tag.id ? 'Удаление...' : 'Удалить'}
                              </button>
                            </motion.div>
                          ) : null}
                        </AnimatePresence>
                      </>
                    )}
                  </div>
                );
              })
            ) : (
              <p className="px-2 py-1 text-sm text-gray-500">Нет тегов</p>
            )}
          </div>
          </UniversalDropdown>
        </div>

        <div className="col-span-2 grid grid-cols-2 justify-center gap-2 sm:flex sm:w-full sm:flex-wrap sm:items-center sm:justify-center sm:gap-2 lg:ml-auto lg:w-auto lg:justify-end">
          <div className="relative">
            <button
              type="button"
              onClick={(event) => {
                event.stopPropagation();
                setShowPeriodMenu((prev) => !prev);
                closeOtherMenus('period');
              }}
              className={`inline-flex w-full items-center justify-between gap-2 rounded-lg border px-3 py-1.5 text-sm transition-colors sm:w-auto sm:justify-start ${
                showPeriodMenu || selectedPeriod !== 'all'
                  ? 'border-white/10 bg-white/10 text-white'
                  : 'border-white/10 bg-white/5 text-gray-300 hover:text-white'
              }`}
            >
              <CalendarDays className="h-4 w-4" />
              {PERIOD_LABELS[selectedPeriod]}
              <ChevronDown className={`h-4 w-4 transition-transform ${showPeriodMenu ? 'rotate-180' : ''}`} />
            </button>

            <AnimatePresence>
              {showPeriodMenu ? (
                <motion.div
                  initial={{ opacity: 0, y: 10, scale: 0.95 }}
                  animate={{ opacity: 1, y: 0, scale: 1 }}
                  exit={{ opacity: 0, y: 10, scale: 0.95 }}
                  transition={{ duration: 0.15 }}
                  onClick={(event) => event.stopPropagation()}
                  className="absolute left-0 top-[120%] z-50 mt-1 flex w-44 flex-col gap-1 rounded-xl border border-white/10 bg-[#111] p-2 shadow-[0_10px_40px_rgba(0,0,0,0.8)] sm:left-auto sm:right-0"
                >
                  {(['all', '7', '30', '90', '365'] as LinksPeriod[]).map((period) => (
                    <button
                      key={period}
                      type="button"
                      onClick={() => {
                        setShowPeriodMenu(false);
                        updateParams((params) => {
                          if (period === 'all') {
                            params.delete('period');
                          } else {
                            params.set('period', period);
                          }
                        });
                      }}
                      className={`inline-flex w-full items-center justify-between rounded-lg px-2 py-2 text-left text-sm transition-colors ${
                        selectedPeriod === period
                          ? 'bg-violet-500/15 text-violet-100'
                          : 'text-gray-300 hover:bg-white/5 hover:text-white'
                      }`}
                    >
                      <span>{PERIOD_LABELS[period]}</span>
                      {selectedPeriod === period ? <Check className="h-4 w-4" /> : null}
                    </button>
                  ))}
                </motion.div>
              ) : null}
            </AnimatePresence>
          </div>

          <UniversalDropdown
            open={showSortMenu}
            onOpenChange={(nextOpen) => {
              setShowSortMenu(nextOpen);
              if (nextOpen) {
                closeOtherMenus('sort');
              }
            }}
            label={sortLabel}
            leadingIcon={<SlidersHorizontal className="h-4 w-4" />}
            active={showSortMenu || sortBy !== 'newest'}
            align="right"
            triggerClassName="w-full justify-between px-3 py-1.5 sm:w-auto sm:justify-start"
            widthClassName="w-52"
            menuClassName="space-y-1"
          >
            {(['newest', 'oldest', 'most-clicked'] as SortBy[]).map((sort) => (
              <UniversalDropdownOption
                key={sort}
                onSelect={() => {
                  setShowSortMenu(false);
                  updateParams((params) => {
                    if (sort === 'newest') params.delete('sort');
                    else params.set('sort', sort);
                  });
                }}
                selected={sortBy === sort}
                leftSlot={sort === 'most-clicked' ? <TrendingUp className="h-4 w-4 text-fuchsia-300" /> : <CalendarDays className="h-4 w-4 text-violet-300" />}
                label={SORT_LABELS[sort]}
              />
            ))}
          </UniversalDropdown>
        </div>
      </div>

    </div>
  );
}