'use client';

import { type CSSProperties, type FocusEvent, useEffect, useRef, useState } from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { clsx } from 'clsx';
import type { LucideIcon } from 'lucide-react';
import {
  Archive,
  Crown,
  Home,
  LogIn,
  LogOut,
  Menu,
  MoreHorizontal,
  PenLine,
  Pin,
  PinOff,
  Settings,
  UserPlus,
} from 'lucide-react';
import ThemeToggle from '@/components/theme/ThemeToggle';
import { useAuthStore } from '@/store/authStore';

interface DesktopDockProps {
  isSidebarCollapsed: boolean;
  onOpenMobileMenu: () => void;
}

type DockAction = {
  key: string;
  href?: string;
  label: string;
  icon: LucideIcon;
  isActive?: (pathname: string) => boolean;
  onClick?: () => void;
};

const isActivePath = (target: string) => (pathname: string) => {
  if (target === '/') return pathname === '/';
  return pathname.startsWith(target);
};

const DOCK_LEAVE_DELAY_MS = 120;
const DOCK_COLLAPSE_MS = 560;
const DOCK_PINNED_STORAGE_KEY = 'dock-pinned-v2';

type DockToneStyle = CSSProperties & {
  '--dock-item-bg': string;
  '--dock-item-bg-hover': string;
  '--dock-item-bg-active': string;
  '--dock-item-border': string;
  '--dock-item-border-hover': string;
  '--dock-item-fg': string;
  '--dock-item-fg-strong': string;
  '--dock-item-ring': string;
};

const createDockTone = (
  bg: string,
  hover: string,
  active: string,
  border: string,
  borderHover: string,
  fg: string,
  fgStrong: string,
  ring: string,
): DockToneStyle => ({
  '--dock-item-bg': bg,
  '--dock-item-bg-hover': hover,
  '--dock-item-bg-active': active,
  '--dock-item-border': border,
  '--dock-item-border-hover': borderHover,
  '--dock-item-fg': fg,
  '--dock-item-fg-strong': fgStrong,
  '--dock-item-ring': ring,
});

const dockGlassTone = createDockTone(
  'rgba(255, 255, 255, 0.24)',
  'rgba(255, 255, 255, 0.36)',
  'rgba(255, 255, 255, 0.46)',
  'rgba(255, 255, 255, 0.2)',
  'rgba(255, 255, 255, 0.34)',
  'var(--color-text-muted)',
  'var(--color-text)',
  'rgba(255, 255, 255, 0.34)',
);

const homeDockTone = createDockTone(
  'rgba(255, 255, 255, 0.58)',
  'rgba(255, 255, 255, 0.68)',
  'rgba(255, 255, 255, 0.76)',
  'rgba(255, 255, 255, 0.28)',
  'rgba(255, 255, 255, 0.46)',
  'var(--color-text-muted)',
  'var(--color-text)',
  'rgba(255, 255, 255, 0.42)',
);

const dockToneStyles: Record<string, DockToneStyle> = {
  home: homeDockTone,
  archive: createDockTone('rgba(222, 216, 255, 0.54)', 'rgba(222, 216, 255, 0.64)', 'rgba(222, 216, 255, 0.72)', 'rgba(255, 255, 255, 0.26)', 'rgba(151, 132, 214, 0.34)', '#6f668f', '#514274', 'rgba(151, 132, 214, 0.2)'),
  chess: createDockTone('rgba(255, 229, 162, 0.54)', 'rgba(255, 229, 162, 0.64)', 'rgba(255, 229, 162, 0.72)', 'rgba(255, 255, 255, 0.28)', 'rgba(184, 134, 42, 0.34)', '#7b6d4a', '#665125', 'rgba(184, 134, 42, 0.2)'),
  admin: createDockTone('rgba(192, 226, 255, 0.54)', 'rgba(192, 226, 255, 0.64)', 'rgba(192, 226, 255, 0.72)', 'rgba(255, 255, 255, 0.27)', 'rgba(81, 145, 195, 0.34)', '#627f96', '#3f6686', 'rgba(81, 145, 195, 0.2)'),
  write: createDockTone('rgba(255, 209, 184, 0.54)', 'rgba(255, 209, 184, 0.64)', 'rgba(255, 209, 184, 0.72)', 'rgba(255, 255, 255, 0.28)', 'rgba(187, 106, 70, 0.34)', '#8c705f', '#724d38', 'rgba(187, 106, 70, 0.2)'),
  login: createDockTone('rgba(190, 236, 238, 0.54)', 'rgba(190, 236, 238, 0.64)', 'rgba(190, 236, 238, 0.72)', 'rgba(255, 255, 255, 0.27)', 'rgba(68, 150, 158, 0.34)', '#63898c', '#446d72', 'rgba(68, 150, 158, 0.2)'),
  signup: createDockTone('rgba(237, 207, 250, 0.54)', 'rgba(237, 207, 250, 0.64)', 'rgba(237, 207, 250, 0.72)', 'rgba(255, 255, 255, 0.27)', 'rgba(153, 91, 176, 0.34)', '#846c8e', '#684a78', 'rgba(153, 91, 176, 0.2)'),
  logout: createDockTone('rgba(255, 207, 216, 0.54)', 'rgba(255, 207, 216, 0.64)', 'rgba(255, 207, 216, 0.72)', 'rgba(255, 255, 255, 0.28)', 'rgba(188, 84, 99, 0.34)', '#8f6970', '#714850', 'rgba(188, 84, 99, 0.2)'),
  pin: createDockTone('rgba(255, 219, 170, 0.56)', 'rgba(255, 219, 170, 0.66)', 'rgba(255, 219, 170, 0.74)', 'rgba(255, 255, 255, 0.28)', 'rgba(184, 118, 44, 0.36)', '#8a704e', '#6b4f2d', 'rgba(184, 118, 44, 0.22)'),
  menu: createDockTone('rgba(213, 234, 203, 0.54)', 'rgba(213, 234, 203, 0.64)', 'rgba(213, 234, 203, 0.72)', 'rgba(255, 255, 255, 0.27)', 'rgba(98, 143, 80, 0.34)', '#6f8366', '#526f44', 'rgba(98, 143, 80, 0.2)'),
  more: createDockTone('rgba(210, 228, 255, 0.54)', 'rgba(210, 228, 255, 0.64)', 'rgba(210, 228, 255, 0.72)', 'rgba(255, 255, 255, 0.27)', 'rgba(86, 126, 183, 0.34)', '#6d7f98', '#4f688d', 'rgba(86, 126, 183, 0.2)'),
  default: dockGlassTone,
};

const getDockToneStyle = (key: string) => dockToneStyles[key] ?? dockToneStyles.default;

export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: DesktopDockProps) {
  const pathname = usePathname();
  const router = useRouter();
  const { isLoggedIn, role, logout, _hasHydrated } = useAuthStore();
  const [isPinned, setIsPinned] = useState(true);
  const [isMoreOpen, setIsMoreOpen] = useState(false);
  const [isDockHovered, setIsDockHovered] = useState(false);
  const [isDockFocused, setIsDockFocused] = useState(false);
  const [isDockClosing, setIsDockClosing] = useState(false);
  const dockZoneRef = useRef<HTMLDivElement>(null);
  const dockLeaveTimerRef = useRef<number | null>(null);
  const dockCollapseTimerRef = useRef<number | null>(null);
  const pinToggleStartedByPointerRef = useRef(false);
  const isAdmin = _hasHydrated && isLoggedIn && role?.includes('ADMIN');
  const isDockOpen = isPinned || isDockHovered || isDockFocused;
  const isDockRangeExpanded = isDockOpen || isDockClosing;

  const clearDockTimers = () => {
    if (dockLeaveTimerRef.current !== null) {
      window.clearTimeout(dockLeaveTimerRef.current);
      dockLeaveTimerRef.current = null;
    }

    if (dockCollapseTimerRef.current !== null) {
      window.clearTimeout(dockCollapseTimerRef.current);
      dockCollapseTimerRef.current = null;
    }
  };

  const expandDock = () => {
    clearDockTimers();
    setIsDockClosing(false);
    setIsDockHovered(true);
  };

  const startDockCollapse = () => {
    clearDockTimers();
    setIsDockHovered(false);
    setIsDockClosing(true);
    dockCollapseTimerRef.current = window.setTimeout(() => {
      setIsDockClosing(false);
      dockCollapseTimerRef.current = null;
    }, DOCK_COLLAPSE_MS);
  };

  const scheduleDockCollapse = () => {
    if (isPinned || isDockFocused) return;

    clearDockTimers();
    dockLeaveTimerRef.current = window.setTimeout(() => {
      startDockCollapse();
    }, DOCK_LEAVE_DELAY_MS);
  };

  useEffect(() => {
    const frameId = window.requestAnimationFrame(() => {
      const savedValue = window.localStorage.getItem(DOCK_PINNED_STORAGE_KEY);
      setIsPinned(savedValue === null ? true : savedValue === 'true');
    });

    return () => window.cancelAnimationFrame(frameId);
  }, []);

  useEffect(() => {
    const frameId = window.requestAnimationFrame(() => {
      setIsMoreOpen(false);
    });

    return () => window.cancelAnimationFrame(frameId);
  }, [pathname]);

  useEffect(() => {
    return () => clearDockTimers();
  }, []);

  const handlePinnedChange = () => {
    const nextValue = !isPinned;
    const startedByPointer = pinToggleStartedByPointerRef.current;
    const isPointerInsideDock = dockZoneRef.current?.matches(':hover') ?? false;

    pinToggleStartedByPointerRef.current = false;
    window.localStorage.setItem(DOCK_PINNED_STORAGE_KEY, String(nextValue));
    clearDockTimers();
    setIsPinned(nextValue);

    if (nextValue) {
      setIsDockClosing(false);
      setIsDockHovered(false);
      return;
    }

    if (startedByPointer) {
      setIsDockFocused(false);

      if (
        document.activeElement instanceof HTMLElement &&
        dockZoneRef.current?.contains(document.activeElement)
      ) {
        document.activeElement.blur();
      }
    }

    if (isPointerInsideDock) {
      setIsDockClosing(false);
      setIsDockHovered(true);
      return;
    }

    if (!isDockFocused || startedByPointer) {
      startDockCollapse();
      return;
    }

    setIsDockHovered(false);
    setIsDockClosing(false);
  };

  const handleDockZoneFocus = () => {
    clearDockTimers();
    setIsDockClosing(false);
    setIsDockFocused(true);
  };

  const handleDockHandleFocus = () => {
    handleDockZoneFocus();

    window.requestAnimationFrame(() => {
      dockZoneRef.current
        ?.querySelector<HTMLElement>('[data-dock-panel="true"] a, [data-dock-panel="true"] button')
        ?.focus();
    });
  };

  const handleDockBlur = (event: FocusEvent<HTMLDivElement>) => {
    const nextTarget = event.relatedTarget;

    if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) return;

    if (!nextTarget) {
      window.setTimeout(() => {
        if (dockZoneRef.current?.contains(document.activeElement)) return;

        setIsDockFocused(false);
        if (!isPinned && !isDockHovered) {
          startDockCollapse();
        }
      }, 80);
      return;
    }

    setIsDockFocused(false);
    if (!isPinned && !isDockHovered) {
      startDockCollapse();
    }
  };

  const handleLogout = () => {
    if (confirm('로그아웃 하시겠습니까?')) {
      logout();
      setIsMoreOpen(false);
      router.push('/');
    }
  };

  const baseItems: DockAction[] = [
    {
      key: 'home',
      href: '/',
      label: '홈',
      icon: Home,
      isActive: isActivePath('/'),
    },
    {
      key: 'archive',
      href: '/archive',
      label: '아카이브',
      icon: Archive,
      isActive: isActivePath('/archive'),
    },
    {
      key: 'chess',
      href: '/play/chess',
      label: '체스',
      icon: Crown,
      isActive: isActivePath('/play/chess'),
    },
  ];

  const authItems: DockAction[] = [];

  if (_hasHydrated && isAdmin) {
    authItems.push(
      {
        key: 'admin',
        href: '/admin',
        label: '관리자',
        icon: Settings,
        isActive: (currentPath) => currentPath === '/admin',
      },
      {
        key: 'write',
        href: '/admin/posts/new',
        label: '글쓰기',
        icon: PenLine,
        isActive: isActivePath('/admin/posts/new'),
      },
      {
        key: 'logout',
        label: '로그아웃',
        icon: LogOut,
        onClick: handleLogout,
      },
    );
  } else if (_hasHydrated && isLoggedIn) {
    authItems.push({
      key: 'logout',
      label: '로그아웃',
      icon: LogOut,
      onClick: handleLogout,
    });
  } else if (_hasHydrated) {
    authItems.push(
      {
        key: 'login',
        href: '/login',
        label: '로그인',
        icon: LogIn,
        isActive: isActivePath('/login'),
      },
      {
        key: 'signup',
        href: '/signup',
        label: '회원가입',
        icon: UserPlus,
        isActive: isActivePath('/signup'),
      },
    );
  }

  const desktopItems = [...baseItems, ...authItems];

  const renderDesktopItem = (item: DockAction) => {
    const Icon = item.icon;
    const active = item.isActive?.(pathname) ?? false;
    const toneStyle = getDockToneStyle(item.key);
    const itemClass = clsx(
      'group/item relative flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition duration-150 hover:-translate-y-1 hover:border-[var(--dock-item-border-hover)] hover:bg-[var(--dock-item-bg-hover)] hover:text-[var(--dock-item-fg-strong)] focus-visible:-translate-y-1',
      active && 'border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] ring-1 ring-[var(--dock-item-ring)]',
    );

    const content = (
      <>
        <Icon size={20} strokeWidth={2.1} />
        <span className="pointer-events-none absolute -top-9 whitespace-nowrap rounded-full border border-[var(--card-border)] bg-[var(--card-bg-strong)] px-2.5 py-1 text-xs font-semibold text-[var(--color-text)] opacity-0 shadow-[var(--shadow-control)] backdrop-blur-[18px] transition group-hover/item:opacity-100">
          {item.label}
        </span>
        {active && (
          <span className="absolute -bottom-1 h-1 w-1 rounded-full bg-[var(--dock-item-fg-strong)]" />
        )}
      </>
    );

    if (item.href) {
      return (
        <Link
          key={item.key}
          href={item.href}
          title={item.label}
          aria-label={item.label}
          aria-current={active ? 'page' : undefined}
          className={itemClass}
          style={toneStyle}
        >
          {content}
        </Link>
      );
    }

    return (
      <button
        key={item.key}
        type="button"
        title={item.label}
        aria-label={item.label}
        onClick={item.onClick}
        className={itemClass}
        style={toneStyle}
      >
        {content}
      </button>
    );
  };

  const renderMobileItem = (item: DockAction, activeOverride?: boolean) => {
    const Icon = item.icon;
    const active = activeOverride ?? item.isActive?.(pathname) ?? false;
    const toneStyle = getDockToneStyle(item.key);
    const itemClass = clsx(
      'flex h-12 min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] px-1 text-[10px] font-semibold leading-none text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors',
      'hover:border-[var(--dock-item-border-hover)] hover:bg-[var(--dock-item-bg-hover)] hover:text-[var(--dock-item-fg-strong)] focus-visible:bg-[var(--dock-item-bg-active)]',
      active && 'border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] ring-1 ring-[var(--dock-item-ring)]',
    );
    const content = (
      <>
        <Icon size={18} strokeWidth={2.1} />
        <span className="max-w-full truncate">{item.label}</span>
      </>
    );

    if (item.href) {
      return (
        <Link
          key={item.key}
          href={item.href}
          title={item.label}
          aria-label={item.label}
          aria-current={active ? 'page' : undefined}
          className={itemClass}
          style={toneStyle}
          onClick={() => setIsMoreOpen(false)}
        >
          {content}
        </Link>
      );
    }

    return (
      <button
        key={item.key}
        type="button"
        title={item.label}
        aria-label={item.label}
        onClick={item.onClick}
        className={itemClass}
        style={toneStyle}
      >
        {content}
      </button>
    );
  };

  return (
    <>
      <nav
        aria-label="빠른 실행 Dock"
        className={clsx(
          'fixed bottom-0 left-1/2 z-40 hidden -translate-x-1/2 md:block',
          'transition-[left] duration-300 ease-out',
          isSidebarCollapsed ? 'md:left-[calc(50%+2.5rem)]' : 'md:left-[calc(50%+9rem)]',
        )}
      >
        <div
          ref={dockZoneRef}
          onMouseEnter={expandDock}
          onMouseLeave={scheduleDockCollapse}
          onFocus={handleDockZoneFocus}
          onBlur={handleDockBlur}
          className={clsx(
            'relative flex items-end justify-center transition-[width,height,padding] duration-[560ms] ease-[cubic-bezier(0.22,1,0.36,1)]',
            isDockRangeExpanded
              ? 'h-32 w-[min(calc(100vw-2rem),56rem)] px-8 pb-7 pt-12'
              : 'h-12 w-16 px-0 pb-0 pt-0',
          )}
        >
          <button
            type="button"
            aria-label="Dock 열기"
            tabIndex={isDockRangeExpanded ? -1 : 0}
            onMouseEnter={expandDock}
            onFocus={handleDockHandleFocus}
            className={clsx(
              'absolute bottom-0 left-1/2 z-10 flex h-9 w-12 -translate-x-1/2 items-start justify-center rounded-t-lg border border-b-0 border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] pt-1.5 text-[var(--dock-item-fg-strong)] shadow-[var(--shadow-control)] backdrop-blur-[22px]',
              'transition-[transform,opacity,width,height] duration-[560ms] ease-[cubic-bezier(0.22,1,0.36,1)] hover:bg-[var(--dock-item-bg-hover)] focus-visible:bg-[var(--dock-item-bg-hover)]',
              isDockRangeExpanded
                ? 'pointer-events-none translate-y-5 scale-75 opacity-0'
                : 'pointer-events-auto translate-y-0 scale-100 opacity-100 hover:h-10 hover:w-14',
            )}
            style={getDockToneStyle('more')}
          >
            <MoreHorizontal size={18} strokeWidth={2.3} />
          </button>

          <div
            data-dock-panel="true"
            className={clsx(
              'flex max-w-[calc(100vw-2rem)] origin-bottom items-end gap-2 overflow-visible rounded-lg border border-[var(--dock-border)] bg-[var(--dock-bg)] px-2 py-2 shadow-[var(--shadow-dock)] backdrop-blur-[30px]',
              'transition-[transform,opacity,filter] duration-[560ms] ease-[cubic-bezier(0.22,1,0.36,1)]',
              isDockOpen
                ? 'pointer-events-auto translate-y-0 scale-x-100 scale-y-100 opacity-100 blur-0'
                : clsx(
                    'translate-y-8 scale-x-[0.16] scale-y-[0.22] opacity-0 blur-sm',
                    isDockClosing ? 'pointer-events-auto' : 'pointer-events-none',
                  ),
            )}
          >
          {desktopItems.map(renderDesktopItem)}
          <button
            type="button"
            title={isPinned ? 'Dock 고정 해제' : 'Dock 고정'}
            aria-label={isPinned ? 'Dock 고정 해제' : 'Dock 고정'}
            aria-pressed={isPinned}
            onPointerDown={() => {
              pinToggleStartedByPointerRef.current = true;
            }}
            onClick={handlePinnedChange}
            className={clsx(
              'group/item relative ml-1 flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] shadow-[var(--shadow-control)] ring-1 ring-[var(--dock-item-ring)] backdrop-blur-[18px] transition duration-150 hover:-translate-y-1 hover:bg-[var(--dock-item-bg-hover)]',
              isPinned && 'shadow-[var(--shadow-dock)]',
            )}
            style={getDockToneStyle('pin')}
          >
            {isPinned ? <PinOff size={19} /> : <Pin size={19} />}
            <span className="pointer-events-none absolute -top-9 whitespace-nowrap rounded-full border border-[var(--card-border)] bg-[var(--card-bg-strong)] px-2.5 py-1 text-xs font-semibold text-[var(--color-text)] opacity-0 shadow-[var(--shadow-control)] backdrop-blur-[18px] transition group-hover/item:opacity-100">
              {isPinned ? '고정 해제' : '고정'}
            </span>
          </button>
          </div>
        </div>
      </nav>

      {isMoreOpen && (
        <div className="fixed inset-x-2 bottom-[4.75rem] z-50 md:hidden">
          <div className="mx-auto max-w-md rounded-lg border border-[var(--dock-border)] bg-[var(--dock-bg)] p-3 shadow-[var(--shadow-dock)] backdrop-blur-[30px]">
            <div className="mb-3 flex items-center justify-between gap-3">
              <span className="text-xs font-bold uppercase tracking-normal text-[var(--color-text-subtle)]">
                설정
              </span>
              <ThemeToggle />
            </div>
            <div className="grid grid-cols-2 gap-2">
              {authItems.map((item) => {
                const Icon = item.icon;
                const active = item.isActive?.(pathname) ?? false;
                const toneStyle = getDockToneStyle(item.key);
                const className = clsx(
                  'inline-flex h-10 min-w-0 items-center justify-center gap-2 rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] px-3 text-sm font-semibold text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors hover:border-[var(--dock-item-border-hover)] hover:bg-[var(--dock-item-bg-hover)] hover:text-[var(--dock-item-fg-strong)]',
                  active && 'border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] ring-1 ring-[var(--dock-item-ring)]',
                );

                if (item.href) {
                  return (
                    <Link
                      key={item.key}
                      href={item.href}
                      className={className}
                      style={toneStyle}
                      onClick={() => setIsMoreOpen(false)}
                    >
                      <Icon size={16} />
                      <span className="truncate">{item.label}</span>
                    </Link>
                  );
                }

                return (
                  <button
                    key={item.key}
                    type="button"
                    className={className}
                    style={toneStyle}
                    onClick={item.onClick}
                  >
                    <Icon size={16} />
                    <span className="truncate">{item.label}</span>
                  </button>
                );
              })}
            </div>
          </div>
        </div>
      )}

      <nav aria-label="모바일 Dock" className="fixed inset-x-2 bottom-2 z-40 md:hidden">
        <div className="mx-auto flex max-w-md items-center gap-1 rounded-lg border border-[var(--dock-border)] bg-[var(--dock-bg)] p-1.5 pb-[calc(0.375rem+env(safe-area-inset-bottom))] shadow-[var(--shadow-dock)] backdrop-blur-[30px]">
          {renderMobileItem(baseItems[0])}
          {renderMobileItem(baseItems[1])}
          {renderMobileItem({
            key: 'menu',
            label: '메뉴',
            icon: Menu,
            onClick: () => {
              setIsMoreOpen(false);
              onOpenMobileMenu();
            },
          })}
          {renderMobileItem(baseItems[2])}
          {renderMobileItem({
            key: 'more',
            label: '더보기',
            icon: MoreHorizontal,
            onClick: () => setIsMoreOpen((previous) => !previous),
          }, isMoreOpen)}
        </div>
      </nav>
    </>
  );
}