'use client';

import { useState, useCallback } from 'react';
import Link from 'next/link';
import Styles from '../styles/common.module.scss';
import useAuth from '@/hooks/useAuth';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars, faXmark } from '@fortawesome/free-solid-svg-icons';

type Props = {
	children: React.ReactNode;
	sidebarContent?: React.ReactNode;
};

export default function Layout({ children, sidebarContent }: Props) {
	const { isAuthenticated, isLoading, logout } = useAuth();
	const [sidebarOpen, setSidebarOpen] = useState(false);

	const toggleSidebar = useCallback(() => {
		setSidebarOpen((prev) => !prev);
	}, []);

	const closeSidebar = useCallback(() => {
		setSidebarOpen(false);
	}, []);

	if (isLoading) {
		return <></>;
	}

    return (
        <>
            <div id='container' className={`${Styles.container}${sidebarOpen ? ` ${Styles.sidebarOpen}` : ''}`}>

                {/* 상단 내용 */}
                <header id='header' className={`${Styles.header} flex items-center justify-between w-full px-4`}>
					<div className='flex items-center gap-2'>
						<button type='button' className={Styles.hamburger} onClick={toggleSidebar} aria-label='메뉴'>
							<FontAwesomeIcon icon={sidebarOpen ? faXmark : faBars} />
						</button>
						<Link href='/' className='font-bold text-xl'>
							<picture>
								<source src="image.webp" type="image/webp" />
								<img src="/resources/logo.svg" alt="bitforum logo" />
							</picture>
						</Link>
					</div>
                    <nav className='flex grow items-center justify-between'>
                        <ul className='flex gap-4'>
                            <li>
                                <Link href='/'>
                                    코인
                                </Link>
                            </li>
                            <li>
                                <Link href='/latest'>
                                    토론
                                </Link>
                            </li>
                            <li>
                                <Link href='/news'>
                                    뉴스
                                </Link>
                            </li>
                            <li>
                                <Link href='/board/notice'>
                                    고객지원
                                </Link>
                            </li>
                        </ul>
						{!isAuthenticated ? (
							<ul className='flex gap-4'>
								<li>
									<a href='/login'>
										로그인
									</a>
								</li>
								<li>
									<a href='/register'>
										회원가입
									</a>
								</li>
							</ul>
						) : (
							<ul className='flex gap-4'>
								<li>
									<Link href='/profile'>
										내 정보
									</Link>
								</li>
								<li>
									<button type='button' onClick={logout}>
										로그아웃
									</button>
								</li>
							</ul>
						)}
                    </nav>
                </header>

                {/* 좌측 사이드바 */}
                <aside id='aside' className={Styles.aside}>
					{sidebarContent}
				</aside>

				{/* 모바일 오버레이 */}
				<div className={Styles.overlay} onClick={closeSidebar} />

                {/* 메인 내용 */}
                <main id='main' className={`${Styles.main} relative`}>
                    {children}
                </main>

				{/* 우측 채팅 사이드바 */}
				<aside id='chatAside' className={Styles.chatAside}></aside>

                {/* 하단 내용 */}
                <footer id='footer' className={`${Styles.footer} px-4`}>
                    <ol>
                        {/* 최신글 표시 ▼ */}
                        <li>111111</li>

                        {/* 공지사항 표시 ▲ */}
                        <li>222222</li>

                        {/* 저작권 표시 */}
                        <li>© 2025 PLAYR. All rights reserved.</li>
                    </ol>
                </footer>
            </div>
        </>
    );
}