dpot-frontend/app/studio/Sidebar.tsx

'use client';

import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { usePathname } from 'next/navigation';
import { ChevronsUpDown } from 'lucide-react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
	faGauge,
	faHeart,
	faChevronDown,
	faBell,
	faBullseye,
	faTrophy,
	faUsers,
	faWallet,
	faCoins,
	faChartLine,
	faArrowRightFromBracket,
	faCalculator,
	faBuildingColumns,
	faFileLines,
	faArrowLeft,
	faCircleExclamation,
} from '@fortawesome/free-solid-svg-icons';
import {
	Sidebar as SidebarRoot,
	SidebarContent,
	SidebarHeader,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
	SidebarMenuSub,
	SidebarMenuSubButton,
	SidebarMenuSubItem,
	SidebarGroup,
	SidebarGroupContent,
	useSidebar,
} from '@/components/ui/sidebar';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { fetchApi } from '@/lib/utils/client';
import type { StudioSettingsResponse } from '@/types/response/studio/settings';
import { User } from 'lucide-react';

export default function Sidebar()
{
	const pathname = usePathname();
	const { isMobile } = useSidebar();
	const [channel, setChannel] = useState<Pick<StudioSettingsResponse, 'isYouTubeConnected'|'channelName'|'handle'|'thumbnailUrl'>|null>(null);

	const isDonationPath = pathname.startsWith('/studio/donation');
	const isWalletPath = pathname.startsWith('/studio/wallet');
	const isSettlementPath = pathname.startsWith('/studio/settlement');

	const readCookie = (key: string, fallback: boolean) => {
		if (typeof document === 'undefined') return fallback;
		const match = document.cookie.match(new RegExp(`(?:^|; )${key}=([^;]*)`));
		if (!match) return fallback;
		return match[1] !== 'false';
	};

	const [donationOpen, setDonationOpen] = useState(() => readCookie('studio_menu_donation', true) || isDonationPath);
	const [walletOpen, setWalletOpen] = useState(() => readCookie('studio_menu_wallet', true) || isWalletPath);
	const [settlementOpen, setSettlementOpen] = useState(() => readCookie('studio_menu_settlement', true) || isSettlementPath);

	const saveCookie = useCallback((key: string, value: boolean) => {
		document.cookie = `${key}=${value}; path=/studio; max-age=${60 * 60 * 24 * 365}; SameSite=Lax`;
	}, []);

	const handleDonationToggle = useCallback((open: boolean) => {
		setDonationOpen(open);
		saveCookie('studio_menu_donation', open);
	}, [saveCookie]);

	const handleWalletToggle = useCallback((open: boolean) => {
		setWalletOpen(open);
		saveCookie('studio_menu_wallet', open);
	}, [saveCookie]);

	const handleSettlementToggle = useCallback((open: boolean) => {
		setSettlementOpen(open);
		saveCookie('studio_menu_settlement', open);
	}, [saveCookie]);

	const isActive = (href: string) => pathname === href || pathname.startsWith(href + '/');

	useEffect(() => {
		fetchApi<StudioSettingsResponse>('/api/studio/settings')
			.then(res => {
				if (res.data) {
					setChannel(res.data);
				}
			})
			.catch(() => {});
	}, []);

	const isConnected = channel?.isYouTubeConnected === true;

	return (
		<SidebarRoot collapsible="icon">
			<SidebarHeader>
				{/* 상단 Studio 라벨 + 돌아가기 버튼 */}
				<div className="flex items-center gap-1.5 px-2 py-1 group-data-[collapsible=icon]:hidden">
					<Link
						href="/"
						className="flex size-6 items-center justify-center rounded text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-foreground transition-colors"
						title="뒤로가기"
					>
						<FontAwesomeIcon icon={faArrowLeft} className="text-xs" />
					</Link>
					<span className="text-xs font-semibold text-sidebar-foreground/50">Studio</span>
				</div>

				{/* YouTube 채널 카드 */}
				<SidebarMenu>
					<SidebarMenuItem>
						<DropdownMenu>
							<DropdownMenuTrigger asChild>
								<SidebarMenuButton
									size="lg"
									className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
									tooltip={channel?.channelName ?? 'YouTube 채널'}
								>
									{/* 아이콘 (collapse 시 이것만 표시) */}
									<div className={`relative flex size-8 shrink-0 items-center justify-center rounded-lg ${!channel?.thumbnailUrl ? 'bg-sidebar-primary' : 'border'} text-sidebar-primary-foreground overflow-hidden`}>
										{channel?.thumbnailUrl ? (
											<Image
												src={channel.thumbnailUrl}
												alt={channel.channelName ?? 'YouTube'}
												width={32}
												height={32}
												className="size-full object-cover"
											/>
										) : (
											<span className="text-xs font-bold">
												<User />
											</span>
										)}
										{/* 미연동 경고 뱃지 */}
										{channel !== null && !isConnected && (
											<span className="absolute -right-1 -bottom-1 flex size-3.5 items-center justify-center rounded-full bg-background">
												<FontAwesomeIcon icon={faCircleExclamation} className="text-[10px] text-amber-500" />
											</span>
										)}
									</div>

									{/* 텍스트 (collapse 시 hidden) */}
									<div className="grid flex-1 text-left text-sm leading-tight">
										<span className="truncate font-semibold">
											{isConnected
												? (channel?.channelName ?? '채널 이름')
												: '채널 미연동'}
										</span>
										<span className="truncate text-xs text-sidebar-foreground/60">
											{isConnected
												? (channel?.handle ?? '')
												: '채널을 연결해 주세요'}
										</span>
									</div>

									<ChevronsUpDown className="ml-auto size-4 shrink-0" />
								</SidebarMenuButton>
							</DropdownMenuTrigger>

							<DropdownMenuContent
								className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
								align="start"
								side={isMobile ? 'bottom' : 'right'}
								sideOffset={4}
							>
								{isConnected ? (
									<>
										<DropdownMenuLabel className="text-xs text-muted-foreground">
											{channel?.channelName}
										</DropdownMenuLabel>
										<DropdownMenuSeparator />
										<DropdownMenuItem asChild>
											<Link href="/studio/settings">채널 정보 보기</Link>
										</DropdownMenuItem>
									</>
								) : (
									<>
										<DropdownMenuLabel className="text-xs text-muted-foreground">
											YouTube 채널이 연동되지 않았습니다
										</DropdownMenuLabel>
										<DropdownMenuSeparator />
										<DropdownMenuItem asChild>
											<Link href="/studio/settings">YouTube 연동하기</Link>
										</DropdownMenuItem>
									</>
								)}
							</DropdownMenuContent>
						</DropdownMenu>
					</SidebarMenuItem>
				</SidebarMenu>
			</SidebarHeader>

			<SidebarContent>
				<SidebarGroup>
					<SidebarGroupContent>
						<SidebarMenu>

							{/* 대시보드 */}
							<SidebarMenuItem>
								<SidebarMenuButton asChild isActive={isActive('/studio/dashboard')} tooltip="대시보드">
									<Link href="/studio/dashboard">
										<FontAwesomeIcon icon={faGauge} />
										<span>대시보드</span>
									</Link>
								</SidebarMenuButton>
							</SidebarMenuItem>

							{/* 후원 설정 */}
							<Collapsible open={donationOpen} onOpenChange={handleDonationToggle}>
								<SidebarMenuItem>
									<CollapsibleTrigger asChild>
										<SidebarMenuButton isActive={isDonationPath} tooltip="후원 설정">
											<FontAwesomeIcon icon={faHeart} />
											<span>후원 설정</span>
											<FontAwesomeIcon
												icon={faChevronDown}
												className={`ml-auto text-xs transition-transform duration-200${donationOpen ? ' rotate-180' : ''}`}
											/>
										</SidebarMenuButton>
									</CollapsibleTrigger>
									<CollapsibleContent>
										<SidebarMenuSub>
											<SidebarMenuSubItem>
												<SidebarMenuSubButton asChild isActive={isActive('/studio/donation/alert')}>
													<Link href="/studio/donation/alert">
														<FontAwesomeIcon icon={faBell} />
														<span>알림</span>
													</Link>
												</SidebarMenuSubButton>
											</SidebarMenuSubItem>
											<SidebarMenuSubItem>
												<SidebarMenuSubButton asChild isActive={isActive('/studio/donation/goal')}>
													<Link href="/studio/donation/goal">
														<FontAwesomeIcon icon={faBullseye} />
														<span>목표</span>
													</Link>
												</SidebarMenuSubButton>
											</SidebarMenuSubItem>
											<SidebarMenuSubItem>
												<SidebarMenuSubButton asChild isActive={isActive('/studio/donation/rank')}>
													<Link href="/studio/donation/rank">
														<FontAwesomeIcon icon={faTrophy} />
														<span>순위</span>
													</Link>
												</SidebarMenuSubButton>
											</SidebarMenuSubItem>
											<SidebarMenuSubItem>
												<SidebarMenuSubButton asChild isActive={isActive('/studio/donation/crew')}>
													<Link href="/studio/donation/crew">
														<FontAwesomeIcon icon={faUsers} />
														<span>크루 후원</span>
													</Link>
												</SidebarMenuSubButton>
											</SidebarMenuSubItem>
										</SidebarMenuSub>
									</CollapsibleContent>
								</SidebarMenuItem>
							</Collapsible>

							{/* 지갑 */}
							<Collapsible open={walletOpen} onOpenChange={handleWalletToggle}>
								<SidebarMenuItem>
									<CollapsibleTrigger asChild>
										<SidebarMenuButton isActive={isWalletPath} tooltip="지갑">
											<FontAwesomeIcon icon={faWallet} />
											<span>지갑</span>
											<FontAwesomeIcon
												icon={faChevronDown}
												className={`ml-auto text-xs transition-transform duration-200${walletOpen ? ' rotate-180' : ''}`}
											/>
										</SidebarMenuButton>
									</CollapsibleTrigger>
									<CollapsibleContent>
										<SidebarMenuSub>
											<SidebarMenuSubItem>
												<SidebarMenuSubButton asChild isActive={isActive('/studio/wallet/balance')}>
													<Link href="/studio/wallet/balance">
														<FontAwesomeIcon icon={faCoins} />
														<span>잔액</span>
													</Link>
												</SidebarMenuSubButton>
											</SidebarMenuSubItem>
											<SidebarMenuSubItem>
												<SidebarMenuSubButton asChild isActive={isActive('/studio/wallet/revenue')}>
													<Link href="/studio/wallet/revenue">
														<FontAwesomeIcon icon={faChartLine} />
														<span>수익</span>
													</Link>
												</SidebarMenuSubButton>
											</SidebarMenuSubItem>
											<SidebarMenuSubItem>
												<SidebarMenuSubButton asChild isActive={isActive('/studio/wallet/withdraw')}>
													<Link href="/studio/wallet/withdraw">
														<FontAwesomeIcon icon={faArrowRightFromBracket} />
														<span>출금</span>
													</Link>
												</SidebarMenuSubButton>
											</SidebarMenuSubItem>
										</SidebarMenuSub>
									</CollapsibleContent>
								</SidebarMenuItem>
							</Collapsible>

							{/* 정산 */}
							<Collapsible open={settlementOpen} onOpenChange={handleSettlementToggle}>
								<SidebarMenuItem>
									<CollapsibleTrigger asChild>
										<SidebarMenuButton isActive={isSettlementPath} tooltip="정산">
											<FontAwesomeIcon icon={faCalculator} />
											<span>정산</span>
											<FontAwesomeIcon
												icon={faChevronDown}
												className={`ml-auto text-xs transition-transform duration-200${settlementOpen ? ' rotate-180' : ''}`}
											/>
										</SidebarMenuButton>
									</CollapsibleTrigger>
									<CollapsibleContent>
										<SidebarMenuSub>
											<SidebarMenuSubItem>
												<SidebarMenuSubButton asChild isActive={isActive('/studio/settlement/account')}>
													<Link href="/studio/settlement/account">
														<FontAwesomeIcon icon={faBuildingColumns} />
														<span>계좌 관리</span>
													</Link>
												</SidebarMenuSubButton>
											</SidebarMenuSubItem>
											<SidebarMenuSubItem>
												<SidebarMenuSubButton asChild isActive={isActive('/studio/settlement/tax')}>
													<Link href="/studio/settlement/tax">
														<FontAwesomeIcon icon={faFileLines} />
														<span>세금계산서</span>
													</Link>
												</SidebarMenuSubButton>
											</SidebarMenuSubItem>
										</SidebarMenuSub>
									</CollapsibleContent>
								</SidebarMenuItem>
							</Collapsible>

						</SidebarMenu>
					</SidebarGroupContent>
				</SidebarGroup>
			</SidebarContent>
		</SidebarRoot>
	);
}