'use client';

import '@/app/styles/market-sidebar.scss';
import { useCallback, useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAnglesLeft, faAnglesRight, faStar, faSun, faMoon } from '@fortawesome/free-solid-svg-icons';
import useTheme from '@/hooks/useTheme';

const STORAGE_KEY = 'az-sidebar-collapsed';
const WIDTH_EXPANDED = '220px';
const WIDTH_COLLAPSED = '64px';

// 좌측 사이드바 자리표시 (D6 그리드 셸) — 관심종목/게시판 즐겨찾기 본구현은 후속(MarketSidebar 본체)
// 접기 메커니즘은 ChannelSidebar 와 동일: html 루트의 --antooza-sidebar-width 로 layout grid 열 폭 반응
export default function MarketSidebar()
{
	// 자리표시 단계라 기본 접힘(64px 아이콘 레일) — 본문 우선. 토글 시 localStorage 영속.
	const [collapsed, setCollapsed] = useState(true);
	const { toggleTheme, isDark } = useTheme();

	// 최초 mount 시 localStorage에서 collapsed 상태 복원
	useEffect(() => {
		try {
			const saved = window.localStorage.getItem(STORAGE_KEY);
			if (saved === 'false') {
				setCollapsed(false);
			}
		} catch {}
	}, []);

	// collapsed 변경 시 html 루트 CSS 변수 동기화
	useEffect(() => {
		const root = document.documentElement;
		root.style.setProperty('--antooza-sidebar-width', collapsed ? WIDTH_COLLAPSED : WIDTH_EXPANDED);
		try {
			window.localStorage.setItem(STORAGE_KEY, String(collapsed));
		} catch {}
		return () => {
			// unmount 시 원복 (breakpoint 별 --az-sidebar-w 기본값으로 복귀)
			root.style.removeProperty('--antooza-sidebar-width');
		};
	}, [collapsed]);

	const handleToggleCollapse = useCallback(() => {
		setCollapsed(prev => !prev);
	}, []);

	return (
		<div className={`market-sidebar${collapsed ? ' market-sidebar--collapsed' : ''}`}>
			{/* 헤더: 타이틀 + 접기 토글 */}
			<div className='market-sidebar__header'>
				{!collapsed && (
					<span className='market-sidebar__title'>관심종목</span>
				)}
				<button
					type='button'
					className='market-sidebar__collapse-btn'
					onClick={handleToggleCollapse}
					aria-label={collapsed ? '사이드바 펼치기' : '사이드바 접기'}
					aria-expanded={!collapsed}
					title={collapsed ? '사이드바 펼치기' : '사이드바 접기'}
				>
					<FontAwesomeIcon icon={collapsed ? faAnglesRight : faAnglesLeft} />
				</button>
			</div>

			{/* 자리표시 본문 */}
			<div className='market-sidebar__body'>
				{collapsed ? (
					<div className='market-sidebar__icon-placeholder' title='관심종목 (준비 중)' aria-hidden='true'>
						<FontAwesomeIcon icon={faStar} />
					</div>
				) : (
					<p className='market-sidebar__empty'>관심종목 기능을 준비 중입니다</p>
				)}
			</div>

			{/* 하단: 테마 전환 (기존 ChannelSidebar 토글이 feature-off 로 미노출되어 여기서 제공) */}
			<div className='market-sidebar__footer'>
				<button type='button' className='market-sidebar__icon-btn' onClick={toggleTheme} aria-label={isDark ? '라이트 모드' : '다크 모드'} title={isDark ? '라이트 모드' : '다크 모드'}>
					<FontAwesomeIcon icon={isDark ? faSun : faMoon} />
				</button>
			</div>
		</div>
	);
}