import { useRef, useState, type ReactNode } from 'react';
import { Check, ChevronDown, Info } from 'lucide-react';
import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
import { environment } from '../../environments/environment';
import { leaveSandboxMode, reloadPage } from '../../environments/sandboxMode';
import { getAkashicPortalContainer } from '../../lib/getAkashicPortalContainer';
import { Z_POPOVER_CLASS } from '../../lib/stackingLayers';
import SandboxEntryDialog from './SandboxEntryDialog';

export { canEnterSandbox } from './useSandboxEntry';

type Mode = 'live' | 'sandbox';

// The workspace-mode menu on the header's practice name. Whoever renders it has already asked
// `sandboxOffered()`; the brand it wraps is passed as children so the header keeps drawing it.
export const SandboxModeControl = ({ practiceName, children }: { practiceName: string; children: ReactNode }) => {
    const [explaining, setExplaining] = useState(false);
    const explainOnClose = useRef(false);
    const current: Mode = environment.inSandboxMode ? 'sandbox' : 'live';

    const choose = (next: string) => {
        if (next === current) return;
        if (next === 'sandbox') explainOnClose.current = true;
        else leaveSandboxMode(localStorage, reloadPage);
    };

    return (
        <>
            <DropdownMenuPrimitive.Root>
                <DropdownMenuPrimitive.Trigger asChild>
                    <button
                        type="button"
                        className="flex min-w-0 items-center gap-2.5 rounded-md hover:opacity-90"
                        aria-label={practiceName ? practiceName + ', workspace mode' : 'Workspace mode'}
                        data-testid="portal-frame-mode-menu"
                    >
                        {children}
                        <ChevronDown className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
                    </button>
                </DropdownMenuPrimitive.Trigger>
                <DropdownMenuPrimitive.Portal container={getAkashicPortalContainer() ?? undefined}>
                    <DropdownMenuPrimitive.Content
                        align="start"
                        sideOffset={4}
                        // The dialog opens only once the menu has let go of focus; two focus traps at once fight forever.
                        onCloseAutoFocus={(event) => {
                            if (!explainOnClose.current) return;
                            explainOnClose.current = false;
                            event.preventDefault();
                            setExplaining(true);
                        }}
                        className={'ak-menu w-72 ' + Z_POPOVER_CLASS}
                    >
                        <div className="px-2.5 pt-1">
                            <DropdownMenuPrimitive.Label className="ak-caption">Workspace mode</DropdownMenuPrimitive.Label>
                        </div>
                        <DropdownMenuPrimitive.RadioGroup value={current} onValueChange={choose}>
                            <DropdownMenuPrimitive.RadioItem value="live" className="ak-menu__item">
                                <span className="flex flex-col">
                                    Live practice
                                    <span className="ak-field-help">
                                        {current === 'sandbox' ? 'Return to your everyday workspace' : 'Your everyday workspace'}
                                    </span>
                                </span>
                                <DropdownMenuPrimitive.ItemIndicator className="ml-auto">
                                    <Check className="size-4" aria-hidden="true" />
                                </DropdownMenuPrimitive.ItemIndicator>
                            </DropdownMenuPrimitive.RadioItem>
                            <DropdownMenuPrimitive.RadioItem value="sandbox" className="ak-menu__item">
                                <span className="flex flex-col">
                                    Sandbox Mode
                                    <span className="ak-field-help">
                                        {current === 'sandbox' ? 'Sample data · nothing here goes live' : 'Try changes with sample data'}
                                    </span>
                                </span>
                                {/* Choosing it explains first, so it carries the same info mark as the workspace picker. */}
                                {current !== 'sandbox' && <Info className="ml-auto size-4" aria-hidden="true" />}
                                <DropdownMenuPrimitive.ItemIndicator className="ml-auto">
                                    <Check className="size-4" aria-hidden="true" />
                                </DropdownMenuPrimitive.ItemIndicator>
                            </DropdownMenuPrimitive.RadioItem>
                        </DropdownMenuPrimitive.RadioGroup>
                    </DropdownMenuPrimitive.Content>
                </DropdownMenuPrimitive.Portal>
            </DropdownMenuPrimitive.Root>
            {explaining && <SandboxEntryDialog onClose={() => setExplaining(false)} />}
        </>
    );
};

export default SandboxModeControl;