/**
 * SettingsPanel Component
 *
 * A headless settings panel for configuring canvas event-action mappings.
 * This component is intentionally unstyled — all layout is controlled via
 * className props so consumers can use any CSS framework (Tailwind, etc.).
 *
 * @refactored 1.4.0 — Extracted SettingsPresets, SettingsEventMap, EventMappingRow
 */

import React from 'react';
import { useCanvasSettings } from '../hooks/useCanvasSettings';
import { useVirtualization } from '../hooks/useVirtualization';
import { SettingsPresets } from './SettingsPresets';
import { SettingsEventMap } from './SettingsEventMap';

// Re-export sub-components
export { SettingsPresets } from './SettingsPresets';
export type { SettingsPresetsProps } from './SettingsPresets';
export { SettingsEventMap, EventMappingRow } from './SettingsEventMap';
export type { SettingsEventMapProps } from './SettingsEventMap';

// =============================================================================
// Types
// =============================================================================

export interface SettingsPanelProps {
	className?: string;
	headerClassName?: string;
	contentClassName?: string;
	footerClassName?: string;
	rowClassName?: string;
	labelClassName?: string;
	selectClassName?: string;
	buttonClassName?: string;
	presetClassName?: string;
	presetSelectClassName?: string;
	presetButtonsClassName?: string;
	checkboxClassName?: string;
	groupClassName?: string;
	groupHeadingClassName?: string;
	quickActionsClassName?: string;
	virtualizationClassName?: string;
	virtualizationStatsClassName?: string;
	inputClassName?: string;
	renderHeader?: () => React.ReactNode;
	renderFooter?: () => React.ReactNode;
	onClose?: () => void;
}

// =============================================================================
// QuickActions (kept inline — small)
// =============================================================================

function QuickActions({
	className,
	checkboxClassName,
	virtualizationClassName,
	virtualizationStatsClassName,
}: {
	className?: string;
	checkboxClassName?: string;
	virtualizationClassName?: string;
	virtualizationStatsClassName?: string;
}) {
	const { enabled, toggle, visibleNodes, totalNodes, culledNodes } = useVirtualization();

	return (
		<div className={className}>
			<div className={virtualizationClassName}>
				<label>
					<input type="checkbox" className={checkboxClassName} checked={enabled} onChange={toggle} />
					<span>Virtualization</span>
				</label>
				<span className={virtualizationStatsClassName}>
					{enabled ? `${visibleNodes}/${totalNodes} (${culledNodes} culled)` : 'Off'}
				</span>
			</div>
		</div>
	);
}

// =============================================================================
// Main Component
// =============================================================================

export function SettingsPanel({
	className, headerClassName, contentClassName, footerClassName,
	rowClassName, labelClassName, selectClassName, buttonClassName,
	presetClassName, presetSelectClassName, presetButtonsClassName,
	checkboxClassName, groupClassName, groupHeadingClassName,
	quickActionsClassName, virtualizationClassName, virtualizationStatsClassName,
	inputClassName, renderHeader, renderFooter, onClose,
}: SettingsPanelProps) {
	const { mappings, setEventMapping } = useCanvasSettings();

	return (
		<div className={className}>
			{renderHeader ? renderHeader() : (
				<div className={headerClassName}>
					<h2>Canvas Settings</h2>
					{onClose && <button className={buttonClassName} onClick={onClose}>×</button>}
				</div>
			)}

			<SettingsPresets
				className={presetClassName}
				selectClassName={presetSelectClassName || selectClassName}
				buttonClassName={buttonClassName}
				buttonsClassName={presetButtonsClassName}
				inputClassName={inputClassName}
			/>

			<QuickActions
				className={quickActionsClassName}
				checkboxClassName={checkboxClassName}
				virtualizationClassName={virtualizationClassName}
				virtualizationStatsClassName={virtualizationStatsClassName}
			/>

			<SettingsEventMap
				mappings={mappings}
				onActionChange={setEventMapping}
				contentClassName={contentClassName}
				groupClassName={groupClassName}
				groupHeadingClassName={groupHeadingClassName}
				rowClassName={rowClassName}
				labelClassName={labelClassName}
				selectClassName={selectClassName}
			/>

			{renderFooter ? renderFooter() : (
				<div className={footerClassName}>Changes auto-saved to localStorage.</div>
			)}
		</div>
	);
}
