/**
 * CAD 화면 골격 조립 — 제목표시줄 · 리본 · 좌측 팔레트 · 탐색막대 · 명령행 · 상태막대.
 * 각 조각은 자기 파일에 있고, 여기서는 배치와 표시 상태만 다룬다.
 */
import { type FC, useEffect, useState } from 'react';
import { CommandLine } from './CommandLine';
import { InspectorPanel } from './InspectorPanel';
import { QuickProperties } from './QuickProperties';
import { BlockLibraryPanel } from './BlockLibraryPanel';
import { LayersWidget, PropertiesWidget, TextStyleWidget } from './RibbonWidgets';
import { QuickAccessBar } from './QuickAccessBar';
import { Ribbon } from '../ribbon/Ribbon';
import { StatusBar } from './StatusBar';
import { useCadRefresh } from './use-cad-refresh';
import { isRibbonCollapsed } from './ui-state';
import { getActiveToolActor } from '../state';
import type { Tool } from '../tools';
import { ViewControls } from './ViewControls';

export const Toolbar: FC = () => {
	useCadRefresh();
	const [panelCollapsed, setPanelCollapsed] = useState(false);
	const [commandLineVisible, setCommandLineVisible] = useState(false);

	const activeTool = (getActiveToolActor()?.getSnapshot()?.context?.type ?? null) as Tool | null;
	const ribbonCollapsed = isRibbonCollapsed();

	useEffect(() => {
		// 편 상태의 폭은 App.css의 `--cad-panel-width` 기본값을 쓴다. 여기 숫자를 박아
		// 두면 스타일에서 넓혀도 이 인라인 값이 덮는다(2026-09-01 실측: 300px 무시됨).
		if (panelCollapsed) document.documentElement.style.setProperty('--cad-panel-width', '0px');
		else document.documentElement.style.removeProperty('--cad-panel-width');
		document.documentElement.style.setProperty(
			'--cad-command-height',
			commandLineVisible ? '86px' : '0px'
		);
		// 리본 접힘 — 탭 줄(26px)만 남기고 패널 줄 자리를 걷는다(`Ribbon.tsx` 가 안 그림).
		if (ribbonCollapsed) document.documentElement.style.setProperty('--cad-ribbon-height', '26px');
		else document.documentElement.style.removeProperty('--cad-ribbon-height');
		window.dispatchEvent(new Event('resize'));
	}, [panelCollapsed, commandLineVisible, ribbonCollapsed]);

	return (
		<>
			<QuickAccessBar />
			<Ribbon
				activeTool={activeTool}
				widgets={{
					properties: <PropertiesWidget />,
					layers: <LayersWidget />,
					textStyle: <TextStyleWidget />,
				}}
			/>
			<InspectorPanel
				collapsed={panelCollapsed}
				onToggleCollapsed={() => setPanelCollapsed((value) => !value)}
			/>
			<ViewControls />
			<QuickProperties />
			<BlockLibraryPanel />
			{commandLineVisible && <CommandLine />}
			<StatusBar
				commandLineVisible={commandLineVisible}
				onToggleCommandLine={() => setCommandLineVisible((value) => !value)}
			/>
		</>
	);
};