ANTOOZA-FRONTEND/app/component/Header.tsx

'use client';

import Styles from '../styles/layout.module.scss';
import { useCallback, useEffect, useRef } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import useAuth from '@/hooks/useAuth';
import useDragScroll from '@/hooks/useDragScroll';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars, faXmark, faCartShopping, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
import NotificationBell from '@/app/component/NotificationBell';
import Profile from '@/app/component/Profile';
import Logo from '@/app/component/Logo';
import PointChargeIcon from '@/public/icons/layout/point.svg';
import useCart from '@/hooks/useCart';
import { FEATURE_CHANNEL } from '@/constants/features';

// 채널/방송 메뉴(생방송·크리에이터)는 채널 기능 ON 일 때만 노출
const channelNavItems = [
	{ href: '/live', label: '생방송' },
	{ href: '/creators', label: '크리에이터' }
];

const baseNavItems = [
	{ href: '/games', label: '게임' },
	{ href: '/feed/all', label: '피드' },
	{ href: '/store', label: '상점' },
	{ href: '/attendance', label: '출석부' },
	{ href: '/board/notice', label: '고객지원' }
];

const navItems = FEATURE_CHANNEL ? [...channelNavItems, ...baseNavItems] : baseNavItems;

const SCROLL_AMOUNT = 120;

type Props = {
	sidebarOpen: boolean;
	onToggle: () => void;
};

export default function Header({ sidebarOpen, onToggle }: Props)
{
	const { isAuthenticated } = useAuth();
	const { totalCount: cartCount } = useCart();
	const pathname = usePathname();
	const dragScroll = useDragScroll<HTMLDivElement>();
	const searchRef = useRef<HTMLInputElement>(null);

	// 통합 검색 포커스 단축키: Ctrl+K(⌘+K) / '/' (finviz 관례) — 검색 동작 자체는 후속
	useEffect(() => {
		const handler = (e: KeyboardEvent) => {
			if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
				e.preventDefault();
				searchRef.current?.focus();
				return;
			}

			if (e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey) {
				const target = e.target as HTMLElement|null;
				const tag = target?.tagName;
				if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target?.isContentEditable) {
					return;
				}

				e.preventDefault();
				searchRef.current?.focus();
			}
		};

		window.addEventListener('keydown', handler);
		return () => {
			window.removeEventListener('keydown', handler);
		};
	}, []);

	const scrollTabs = useCallback((dir: 'left' | 'right') => {
		const el = dragScroll.ref.current;
		if (!el) {
			return;
		}

		el.scrollBy({ left: dir === 'left' ? -SCROLL_AMOUNT : SCROLL_AMOUNT, behavior: 'smooth' });
	}, [dragScroll.ref]);

	const handlePopupCharge = useCallback(() => {
		const w = 450, h = 635;
		const left = window.screenX + (window.outerWidth - w) / 2;
		const top = window.screenY + (window.outerHeight - h) / 2;
		window.open('/charge', 'charge', `width=${w},height=${h},left=${left},top=${top},scrollbars=no,resizable=no`);
	}, []);

	return (
		<header id='header' className={Styles.header}>

			{/* 1줄: 로고 + 우측 아이콘 (PC에서는 전체 내비) */}
			<div className={Styles.headerRow1}>
				{/* 햄버거 — 좌측 사이드바(채널 or 관심종목 자리표시) 슬라이드 토글 (모바일 전용) */}
				<button type='button' className={Styles.hamburger} onClick={onToggle} aria-label='메뉴' aria-expanded={sidebarOpen}>
					<FontAwesomeIcon icon={sidebarOpen ? faXmark : faBars} />
				</button>

				<Link href='/' className={Styles.logo} aria-label="개미투자 홈">
					<Logo size="sm" />
				</Link>

				{/* PC 내비게이션 */}
				<nav className={Styles.pcNav} aria-label='주요 메뉴'>
					<ul className='flex gap-4'>
						{navItems.map(item => (
							<li key={item.label}>
								<Link href={item.href}>{item.label}</Link>
							</li>
						))}
					</ul>
				</nav>

				{/* 중앙 통합 검색 — UI + Ctrl+K/'/' 포커스만 (자동완성·커맨드 팔레트는 후속 D6-4) */}
				<div className={Styles.searchBox} role='search'>
					<input
						ref={searchRef}
						type='search'
						className={Styles.searchInput}
						placeholder='종목·글·유저 검색'
						aria-label='통합 검색'
						autoComplete='off'
					/>
					<kbd className={Styles.searchKbd} aria-hidden='true'>Ctrl K</kbd>
				</div>

				{/* 우측 아이콘 (항상 표시) */}
				<div className={Styles.headerActions}>
					<Link href="/cart" className={Styles.cartBtn} title="장바구니" aria-label="장바구니">
						<FontAwesomeIcon icon={faCartShopping} />
						{cartCount > 0 && (
							<span className={Styles.cartBadge}>{cartCount > 99 ? '99+' : cartCount}</span>
						)}
					</Link>
					{isAuthenticated && (
						<>
							<button type="button" className={Styles.chargeBtn} onClick={handlePopupCharge} title="포인트 충전">
								<PointChargeIcon width={24} height={24} />
							</button>
							<NotificationBell />
						</>
					)}
					<Profile />
				</div>
			</div>

			{/* 2줄: 모바일 전용 가로 스크롤 탭 */}
			<nav className={Styles.headerRow2} aria-label='주요 메뉴 (모바일)'>
				<button type='button' className={Styles.scrollArrow} onClick={() => scrollTabs('left')} aria-label='왼쪽 스크롤'>
					<FontAwesomeIcon icon={faChevronLeft} />
				</button>
				<div
					className={Styles.mobileTabScroll}
					ref={dragScroll.ref}
					onMouseDown={dragScroll.onMouseDown}
					onMouseMove={dragScroll.onMouseMove}
					onMouseUp={dragScroll.onMouseUp}
					onMouseLeave={dragScroll.onMouseLeave}
				>
					{navItems.map(item => (
						<Link
							key={item.label}
							href={item.href}
							className={`${Styles.mobileTab}${pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href)) ? ` ${Styles.mobileTabActive}` : ''}`}
						>
							{item.label}
						</Link>
					))}
				</div>
				<button type='button' className={Styles.scrollArrow} onClick={() => scrollTabs('right')} aria-label='오른쪽 스크롤'>
					<FontAwesomeIcon icon={faChevronRight} />
				</button>
			</nav>

			{/* 지수 티커 스트립 — TradingView 임베드 컨테이너 (규격만, 내용 주입 전까지 :empty 로 미표시) */}
			<div id='header-ticker' className={Styles.tickerStrip} aria-hidden='true' />
		</header>
	);
}