/**
 * Group Node Component
 *
 * Container node that renders a header bar with collapse/expand toggle.
 * Children are rendered by the normal NodeRenderer when expanded.
 */

'use client';

import React from 'react';
import { useAtomValue, useSetAtom } from 'jotai';
import { collapsedGroupsAtom, toggleGroupCollapseAtom, groupChildCountAtom } from '../core/group-store';
import type { UINodeState } from '../core/types';

export interface GroupNodeProps {
	/** The group node data */
	node: UINodeState;
	/** Whether the node is selected */
	isSelected?: boolean;
	/** Custom header content (replaces default label) */
	renderHeader?: (props: { node: UINodeState; isCollapsed: boolean; childCount: number }) => React.ReactNode;
	/** Custom styles */
	className?: string;
	style?: React.CSSProperties;
}

/**
 * Group node with collapsible header.
 *
 * @example
 * ```tsx
 * registerNodeType('group', ({ nodeData }) => (
 *   <GroupNode node={nodeData} isSelected={false} />
 * ));
 * ```
 */
export function GroupNode({ node, isSelected, renderHeader, className, style }: GroupNodeProps) {
	const collapsed = useAtomValue(collapsedGroupsAtom);
	const toggleCollapse = useSetAtom(toggleGroupCollapseAtom);
	const getChildCount = useAtomValue(groupChildCountAtom);

	const isCollapsed = collapsed.has(node.id);
	const childCount = getChildCount(node.id);

	const handleToggle = (e: React.MouseEvent) => {
		e.stopPropagation();
		toggleCollapse(node.id);
	};

	return (
		<div
			className={className}
			style={{
				width: '100%',
				height: '100%',
				border: `2px ${isSelected ? 'solid' : 'dashed'} ${isSelected ? '#4A90D9' : '#666'}`,
				borderRadius: '8px',
				background: isCollapsed ? 'rgba(100, 100, 100, 0.15)' : 'rgba(100, 100, 100, 0.05)',
				display: 'flex',
				flexDirection: 'column',
				overflow: 'hidden',
				...style,
			}}
		>
			{/* Header bar */}
			<div
				style={{
					display: 'flex',
					alignItems: 'center',
					gap: '6px',
					padding: '6px 10px',
					background: 'rgba(100, 100, 100, 0.2)',
					borderBottom: '1px solid rgba(100, 100, 100, 0.2)',
					cursor: 'pointer',
					userSelect: 'none',
					fontSize: '13px',
					color: '#ccc',
				}}
				onClick={handleToggle}
				data-no-drag="true"
			>
				{/* Collapse/expand icon */}
				<span style={{ fontSize: '10px', width: '14px', textAlign: 'center' }}>
					{isCollapsed ? '▶' : '▼'}
				</span>

				{renderHeader
					? renderHeader({ node, isCollapsed, childCount })
					: (
						<>
							<span style={{ fontWeight: 500 }}>{node.label || 'Group'}</span>
							<span style={{ opacity: 0.6, marginLeft: 'auto' }}>
								{childCount} node{childCount !== 1 ? 's' : ''}
							</span>
						</>
					)
				}
			</div>

			{/* Collapsed summary or empty body for children */}
			{isCollapsed && (
				<div
					style={{
						flex: 1,
						display: 'flex',
						alignItems: 'center',
						justifyContent: 'center',
						color: '#888',
						fontSize: '12px',
						fontStyle: 'italic',
					}}
				>
					{childCount} collapsed node{childCount !== 1 ? 's' : ''}
				</div>
			)}
		</div>
	);
}
