'use client';

import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { startTransition, useEffect, useOptimistic, useRef, useState } from 'react';
import { logout } from '@/app/(protected)/_actions';
import { markNotificationReadAction } from '@/app/(protected)/(basic)/_actions';
import {
  countUnread,
  resolveNotificationHref,
  type AdminNotification,
} from '@/lib/domain/notification';
import styles from './admin-header.module.scss';
import { HeaderIconButton } from './header-icon-button';

interface AdminHeaderProps {
  /** 프로필에 표시할 이름. 세션의 관리자 이름을 상위에서 받아온다. */
  adminName: string;
  /** 종 버튼이 펼치는 알림. 상위 레이아웃이 조회해 넘긴다. */
  notifications: AdminNotification[];
}

/**
 * Basic 레이아웃 헤더 — 시안 header(7028:7614)를 그대로 옮겼다. 좌측 로고, 우측에 아이콘
 * 버튼 3개와 프로필 pill이 온다.
 *
 * 시안과 다른 점 넷(전부 사용자 확정):
 *  - 로고: 시안(관리자페이지 QsFVFFUKGH68xAPVkF3SJ9 logo 5199:9639)의 정사각 심볼과
 *    "FOX PAY ADMIN" 2색 글자를 그대로 쓴다.
 *  - 사이드바 토글 버튼을 뺐다 — 시안에 없다.
 *  - 프로필 pill을 눌러 로그아웃한다. 시안에 로그아웃 자리가 없는데 다른 경로도 없어서,
 *    CaretDown이 이미 "열린다"고 알리고 있는 이 자리에 메뉴를 붙였다.
 *
 *  - 검색·사용자 아이콘 버튼을 뺐다 — 연결할 기능이 없어 눌러도 아무 일이 없었고, 사용자
 *    자리는 옆 프로필 pill과 겹쳤다.
 *
 * 이슈: 알림 읽음은 낙관적으로 표시한 뒤 `router.refresh()`로 서버 값에 되맞춘다 — 백엔드
 * PUT이 아직 행을 갱신하지 못해(notification-repository 참조) 새로 고치면 안 읽음으로 돌아온다.
 */
export function AdminHeader({ adminName, notifications }: AdminHeaderProps) {
  const router = useRouter();
  const [isNotificationOpen, setIsNotificationOpen] = useState(false);
  const notificationRef = useRef<HTMLDivElement>(null);
  const [optimisticNotifications, markReadOptimistically] = useOptimistic(
    notifications,
    (current, id: string) =>
      current.map((item) => (item.id === id ? { ...item, isRead: true } : item))
  );
  const unreadCount = countUnread(optimisticNotifications);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const profileRef = useRef<HTMLDivElement>(null);

  function openNotification(item: AdminNotification) {
    setIsNotificationOpen(false);
    if (item.isRead) {
      return;
    }
    startTransition(async () => {
      markReadOptimistically(item.id);
      await markNotificationReadAction(item.id);
      router.refresh();
    });
  }

  // 바깥을 누르거나 Esc를 누르면 닫는다 — 열린 동안에만 듣는다. 프로필·알림이 같은 규칙이라
  // 한 곳에서 처리하고, 하나를 열면 다른 하나는 닫는다.
  useEffect(() => {
    if (!isMenuOpen && !isNotificationOpen) {
      return;
    }

    function handlePointerDown(event: MouseEvent) {
      const target = event.target as Node;
      if (!profileRef.current?.contains(target)) {
        setIsMenuOpen(false);
      }
      if (!notificationRef.current?.contains(target)) {
        setIsNotificationOpen(false);
      }
    }

    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === 'Escape') {
        setIsMenuOpen(false);
        setIsNotificationOpen(false);
      }
    }

    document.addEventListener('mousedown', handlePointerDown);
    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('mousedown', handlePointerDown);
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [isMenuOpen, isNotificationOpen]);

  return (
    <header className={styles.header}>
      <div className={styles.logo}>
        {/* 옆 글자가 같은 내용을 이미 말하므로 장식으로 둔다 — alt를 채우면 두 번 읽힌다. */}
        <Image
          src="/images/logo-foxpay-symbol.svg"
          alt=""
          width={28}
          height={28}
          className={styles.logoMark}
          priority
        />
        <span className={styles.title}>
          <span className={styles.titleStrong}>FOX PAY</span>{' '}
          <span className={styles.titleSub}>ADMIN</span>
        </span>
      </div>

      <div className={styles.fnc}>
        <div className={styles.btnGroup} ref={notificationRef}>
          <HeaderIconButton
            icon={<i className="fox-ico fox-ico-BellSimple" aria-hidden="true" />}
            label={unreadCount > 0 ? `알림 ${unreadCount}건` : '알림'}
            hasBadge={unreadCount > 0}
            isExpanded={isNotificationOpen}
            onAction={() => {
              setIsNotificationOpen((open) => !open);
              setIsMenuOpen(false);
            }}
          />

          {isNotificationOpen && (
            <div className={styles.notifications} role="menu">
              {optimisticNotifications.length === 0 ? (
                <p className={styles.notificationEmpty}>새 알림이 없습니다.</p>
              ) : (
                <ul className={styles.notificationList}>
                  {optimisticNotifications.map((item) => {
                    const href = resolveNotificationHref(item);
                    const className = `${styles.notification} ${
                      item.isRead ? '' : styles.notificationUnread
                    }`;
                    const body = (
                      <>
                        <span className={styles.notificationTitle}>
                          {item.title}
                        </span>
                        <span className={styles.notificationContent} title={item.content}>
                          {item.content}
                        </span>
                      </>
                    );
                    return (
                      <li key={item.id}>
                        {href ? (
                          <Link
                            href={href}
                            role="menuitem"
                            className={`${className} ${styles.notificationLink}`}
                            onClick={() => openNotification(item)}
                          >
                            {body}
                          </Link>
                        ) : (
                          <div className={className}>{body}</div>
                        )}
                      </li>
                    );
                  })}
                </ul>
              )}
            </div>
          )}
        </div>

        <div className={styles.profile} ref={profileRef}>
          <button
            type="button"
            className={styles.profileButton}
            aria-haspopup="menu"
            aria-expanded={isMenuOpen}
            onClick={() => setIsMenuOpen((open) => !open)}
          >
            {/* 시안은 프로필 사진 자리지만 관리자 사진을 받는 경로가 없어 사람 아이콘으로 채운다. */}
            <span className={styles.avatar}>
              <i className="fox-ico fox-ico--fill fox-ico-User" aria-hidden="true" />
            </span>
            <span className={styles.profileName}>{adminName}</span>
            <span className={styles.caret}>
              <i className="fox-ico fox-ico-CaretDown" aria-hidden="true" />
            </span>
          </button>

          {isMenuOpen && (
            <div className={styles.menu} role="menu">
              <form action={logout}>
                <button type="submit" role="menuitem" className={styles.menuItem}>
                  로그아웃
                </button>
              </form>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}