import { type FC, useCallback, useEffect, useState } from 'react';
import { HtmlEvent } from '../App.types';
import { requestDrawingNavigation } from '../integration/aislo-drawing-bridge';
import { getDesignMeta } from '../state';

/**
 * 도면 내비게이션 바 (CAD 화면 하단 중심).
 * 수량 산출표는 HTML 테이블 대신 도면 자체의 CAD 테이블 레이어(b08-cross-table)로
 * 렌더되므로, 여기서는 제목·측점정보·확정상태·이전/다음 이동만 담당한다.
 */
export const QuantityPanel: FC = () => {
	const [meta, setMeta] = useState(getDesignMeta());

	const refresh = useCallback(() => setMeta(getDesignMeta()), []);
	useEffect(() => {
		window.addEventListener(HtmlEvent.UPDATE_STATE, refresh);
		return () => window.removeEventListener(HtmlEvent.UPDATE_STATE, refresh);
	}, [refresh]);

	if (!meta) return null;

	return (
		<section className="cad-qtable controls" data-collapsed="true">
			<header className="cad-qtable__header">
				<button
					type="button"
					className="cad-qtable__nav"
					disabled={!meta.hasPrev}
					title="이전 도면"
					onClick={() => requestDrawingNavigation('prev')}
				>
					‹
				</button>
				<div className="cad-qtable__title">
					<strong>{meta.title}</strong>
					{meta.info && <span>{meta.info}</span>}
					<em
						className="cad-qtable__status"
						data-confirmed={meta.confirmed}
						title={meta.confirmed ? '설계 확정됨' : '미확정'}
					>
						{meta.confirmed ? '확정' : '미확정'}
					</em>
				</div>
				<button
					type="button"
					className="cad-qtable__nav"
					disabled={!meta.hasNext}
					title="다음 도면"
					onClick={() => requestDrawingNavigation('next')}
				>
					›
				</button>
			</header>
		</section>
	);
};