/**
 * Radial Menu
 *
 * Layout computation and rendering for the radial menu items
 * around the floating action button.
 */

import React from 'react';

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

export interface ActionItem {
	id: string;
	label: string;
	icon: React.ReactNode;
	action: () => void;
	disabled?: boolean;
}

interface RadialPosition {
	dx: number;
	dy: number;
	angle: number;
}

// =============================================================================
// Constants
// =============================================================================

export const FAB_SIZE = 56;
export const ITEM_SIZE = 48;
const STAGGER_MS = 35;

// =============================================================================
// Layout
// =============================================================================

export function getRadialPositions(
	count: number,
	radius: number,
	position: string,
): RadialPosition[] {
	let startAngle: number;
	let endAngle: number;

	switch (position) {
		case 'bottom-left':
			startAngle = -20;
			endAngle = -160;
			break;
		case 'bottom-right':
			startAngle = -160;
			endAngle = -20;
			break;
		case 'top-left':
			startAngle = 20;
			endAngle = 160;
			break;
		case 'top-right':
			startAngle = 160;
			endAngle = 20;
			break;
		default:
			startAngle = -20;
			endAngle = -160;
	}

	const positions: RadialPosition[] = [];
	for (let i = 0; i < count; i++) {
		const t = count === 1 ? 0.5 : i / (count - 1);
		const angleDeg = startAngle + (endAngle - startAngle) * t;
		const angleRad = (angleDeg * Math.PI) / 180;
		positions.push({
			dx: Math.cos(angleRad) * radius,
			dy: Math.sin(angleRad) * radius,
			angle: angleDeg,
		});
	}

	return positions;
}

// =============================================================================
// Position Styles
// =============================================================================

export function getPositionStyles(position: string): React.CSSProperties {
	switch (position) {
		case 'bottom-left':
			return { bottom: 'max(16px, env(safe-area-inset-bottom, 16px))', left: 'max(16px, env(safe-area-inset-left, 16px))' };
		case 'bottom-right':
			return { bottom: 'max(16px, env(safe-area-inset-bottom, 16px))', right: 'max(16px, env(safe-area-inset-right, 16px))' };
		case 'top-left':
			return { top: 'max(16px, env(safe-area-inset-top, 16px))', left: 'max(16px, env(safe-area-inset-left, 16px))' };
		case 'top-right':
			return { top: 'max(16px, env(safe-area-inset-top, 16px))', right: 'max(16px, env(safe-area-inset-right, 16px))' };
		default:
			return { bottom: 'max(16px, env(safe-area-inset-bottom, 16px))', left: 'max(16px, env(safe-area-inset-left, 16px))' };
	}
}

// =============================================================================
// RadialMenuItem
// =============================================================================

interface RadialMenuItemProps {
	item: ActionItem;
	position: RadialPosition;
	index: number;
	totalItems: number;
	isOpen: boolean;
	isHighlighted: boolean;
	onTap: (item: ActionItem) => void;
}

export function RadialMenuItem({ item, position: pos, index: i, totalItems, isOpen, isHighlighted, onTap }: RadialMenuItemProps) {
	const deployed = isOpen;

	return (
		<div
			key={item.id}
			style={{
				position: 'absolute',
				left: FAB_SIZE / 2 - ITEM_SIZE / 2,
				top: FAB_SIZE / 2 - ITEM_SIZE / 2,
				transform: deployed
					? `translate(${pos.dx}px, ${pos.dy}px) scale(1)`
					: 'translate(0, 0) scale(0)',
				opacity: deployed ? (item.disabled ? 0.35 : 1) : 0,
				transition: deployed
					? `transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1) ${i * STAGGER_MS}ms, opacity 200ms ease ${i * STAGGER_MS}ms`
					: `transform 200ms cubic-bezier(0.55, 0, 1, 0.45) ${(totalItems - 1 - i) * 20}ms, opacity 150ms ease ${(totalItems - 1 - i) * 20}ms`,
				pointerEvents: deployed ? 'auto' : 'none',
				willChange: 'transform, opacity',
			}}
		>
			<button
				onPointerUp={() => onTap(item)}
				disabled={item.disabled}
				aria-label={item.label}
				data-no-drag="true"
				style={{
					width: ITEM_SIZE,
					height: ITEM_SIZE,
					borderRadius: '50%',
					border: `1.5px solid ${isHighlighted ? 'rgba(99,160,255,0.5)' : 'var(--canvas-control-border, rgba(255,255,255,0.12))'}`,
					backgroundColor: isHighlighted
						? 'var(--canvas-control-active-bg, rgba(59,130,246,0.9))'
						: 'var(--canvas-control-bg, rgba(30,30,30,0.88))',
					color: 'var(--canvas-control-fg, rgba(255,255,255,0.9))',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center',
					cursor: item.disabled ? 'default' : 'pointer',
					touchAction: 'manipulation',
					WebkitTapHighlightColor: 'transparent',
					userSelect: 'none',
					backdropFilter: 'blur(16px) saturate(1.5)',
					WebkitBackdropFilter: 'blur(16px) saturate(1.5)',
					padding: 0,
					transition: 'background-color 180ms ease, border-color 180ms ease, transform 180ms cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 250ms ease',
					transform: isHighlighted ? 'scale(1.18)' : 'scale(1)',
					boxShadow: isHighlighted
						? '0 0 0 3px rgba(59,130,246,0.25), 0 4px 16px rgba(59,130,246,0.35)'
						: '0 2px 8px rgba(0,0,0,0.35)',
				}}
			>
				{item.icon}
			</button>

			{/* Label — always mounted, crossfades via opacity */}
			<span
				style={{
					position: 'absolute',
					top: -24,
					left: '50%',
					fontSize: '11px',
					fontWeight: 600,
					letterSpacing: '0.02em',
					color: 'var(--canvas-control-fg, rgba(255,255,255,0.95))',
					backgroundColor: 'var(--canvas-control-bg, rgba(20,20,20,0.92))',
					backdropFilter: 'blur(12px)',
					WebkitBackdropFilter: 'blur(12px)',
					padding: '3px 9px',
					borderRadius: '7px',
					whiteSpace: 'nowrap',
					pointerEvents: 'none',
					opacity: isHighlighted ? 1 : 0,
					transform: isHighlighted
						? 'translateX(-50%) translateY(0)'
						: 'translateX(-50%) translateY(4px)',
					transition: 'opacity 150ms ease, transform 150ms ease',
				}}
			>
				{item.label}
			</span>
		</div>
	);
}
