'use client';

import { AnimatePresence, motion } from 'framer-motion';
import { FolderInput, FolderOpen, Tag, Trash2, X } from 'lucide-react';
import type { Folder, Tag as TagType } from './types';

type BulkActionsBarProps = {
  selectedCount: number;
  isBulkSubmitting: boolean;
  folders: Folder[];
  localTags: TagType[];
  showBulkFolderMenu: boolean;
  showBulkTagsMenu: boolean;
  onOpenBulkFolderMenu: () => void;
  onOpenBulkTagsMenu: () => void;
  onBulkMoveToFolder: (folderId: string | null) => void;
  onBulkAddTag: (tagId: string) => void;
  onBulkClearTags: () => void;
  onBulkDelete: () => void;
};

export function BulkActionsBar({
  selectedCount,
  isBulkSubmitting,
  folders,
  localTags,
  showBulkFolderMenu,
  showBulkTagsMenu,
  onOpenBulkFolderMenu,
  onOpenBulkTagsMenu,
  onBulkMoveToFolder,
  onBulkAddTag,
  onBulkClearTags,
  onBulkDelete,
}: BulkActionsBarProps) {
  return (
    <AnimatePresence>
      {selectedCount > 0 ? (
        <motion.div
          initial={{ opacity: 0, y: -10, height: 0 }}
          animate={{ opacity: 1, y: 0, height: 'auto' }}
          exit={{ opacity: 0, y: -10, height: 0 }}
          className="relative z-40 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-violet-500/30 bg-violet-900/20 px-4 py-3"
        >
          <div className="flex items-center gap-2">
            <span className="inline-flex h-5 w-5 items-center justify-center rounded bg-violet-500/20 text-xs font-bold text-violet-300">
              {selectedCount}
            </span>
            <span className="text-sm font-medium text-white">Выбрано ссылок</span>
          </div>

          <div className="flex flex-wrap items-center gap-2">
            <div className="relative">
              <button
                type="button"
                disabled={isBulkSubmitting}
                onClick={(event) => {
                  event.stopPropagation();
                  onOpenBulkFolderMenu();
                }}
                className="inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white transition-colors hover:bg-white/10 disabled:opacity-60"
              >
                <FolderInput className="h-4 w-4" />
                В папку
              </button>

              <AnimatePresence>
                {showBulkFolderMenu ? (
                  <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 right-0 top-[120%] z-50 mt-1 flex w-64 max-w-[80vw] flex-col gap-1 rounded-xl border border-white/10 bg-[#111] p-2 shadow-[0_10px_40px_rgba(0,0,0,0.8)]"
                  >
                    <div className="px-2 pt-1 text-[10px] font-bold uppercase tracking-wider text-gray-500">Добавить папку</div>
                    {folders.map((folder) => (
                      <button
                        key={folder.id}
                        type="button"
                        onClick={() => onBulkMoveToFolder(folder.id)}
                        className="inline-flex w-full min-w-0 items-center gap-2 rounded-lg px-3 py-2 text-left text-sm text-gray-300 transition-colors hover:bg-white/5 hover:text-white"
                      >
                        <FolderOpen className="h-3.5 w-3.5 shrink-0 text-violet-300/90" />
                        <span className="truncate">{folder.name}</span>
                      </button>
                    ))}
                    {folders.length === 0 ? (
                      <div className="px-3 py-2 text-xs text-gray-500">Папок пока нет</div>
                    ) : null}
                    <div className="mx-2 my-1 h-px bg-white/10" />
                    <button
                      type="button"
                      onClick={() => onBulkMoveToFolder(null)}
                      className="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-left text-sm text-red-400 transition-colors hover:bg-red-500/10 hover:text-red-300"
                    >
                      <X className="h-4 w-4" />
                      Очистить папки
                    </button>
                  </motion.div>
                ) : null}
              </AnimatePresence>
            </div>

            <div className="relative">
              <button
                type="button"
                disabled={isBulkSubmitting}
                onClick={(event) => {
                  event.stopPropagation();
                  onOpenBulkTagsMenu();
                }}
                className="inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white transition-colors hover:bg-white/10 disabled:opacity-60"
              >
                <Tag className="h-4 w-4" />
                Теги
              </button>

              <AnimatePresence>
                {showBulkTagsMenu ? (
                  <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 right-0 top-[120%] z-50 mt-1 flex w-64 max-w-[80vw] flex-col gap-1 rounded-xl border border-white/10 bg-[#111] p-2 shadow-[0_10px_40px_rgba(0,0,0,0.8)]"
                  >
                    <div className="px-2 pt-1 text-[10px] font-bold uppercase tracking-wider text-gray-500">Добавить тег</div>
                    {localTags.map((tag) => (
                      <button
                        key={tag.id}
                        type="button"
                        onClick={() => onBulkAddTag(tag.id)}
                        className="inline-flex w-full min-w-0 items-center gap-2 rounded-lg px-3 py-2 text-left text-sm text-gray-300 transition-colors hover:bg-white/5 hover:text-white"
                      >
                        <span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: tag.color }} />
                        <span className="truncate">{tag.name}</span>
                      </button>
                    ))}
                    <div className="mx-2 my-1 h-px bg-white/10" />
                    <button
                      type="button"
                      onClick={onBulkClearTags}
                      className="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-left text-sm text-red-400 transition-colors hover:bg-red-500/10 hover:text-red-300"
                    >
                      <X className="h-4 w-4" />
                      Очистить теги
                    </button>
                  </motion.div>
                ) : null}
              </AnimatePresence>
            </div>

            <button
              type="button"
              disabled={isBulkSubmitting}
              onClick={onBulkDelete}
              className="inline-flex items-center gap-2 rounded-lg border border-red-500/20 bg-red-500/10 px-3 py-1.5 text-sm text-red-300 transition-colors hover:bg-red-500/20 disabled:opacity-60"
            >
              <Trash2 className="h-4 w-4" />
              Удалить
            </button>
          </div>
        </motion.div>
      ) : null}
    </AnimatePresence>
  );
}