import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * RegionSelectScreen — Choose Amplitude data-center region (US or EU).
 *
 * Appears as the very first screen so the correct OAuth URL is known
 * before the browser is opened. Skipped for returning users whose
 * region is pre-populated from ~/.ampli.json.
 *
 * Also re-shown when the /region slash command sets regionForced.
 *
 * US is focused by default — pressing Enter selects it without navigating.
 */
import { Box, Text } from 'ink';
import { useWizardStore } from '../hooks/useWizardStore.js';
import { useEscapeBack } from '../hooks/useEscapeBack.js';
import { PickerMenu } from '../primitives/index.js';
import { Colors, Icons } from '../styles.js';
const REGION_HINTS_BASE = Object.freeze([
    { key: '↑↓', label: 'Navigate' },
    { key: 'Enter', label: 'Select' },
]);
const REGIONS = [
    {
        label: 'United States',
        hint: 'app.amplitude.com',
        value: 'us',
    },
    {
        label: 'Europe',
        hint: 'app.eu.amplitude.com',
        value: 'eu',
    },
];
export const RegionSelectScreen = ({ store }) => {
    useWizardStore(store);
    const { session } = store;
    useEscapeBack(store, {
        extraHints: REGION_HINTS_BASE,
        enabled: !session.regionForced,
    });
    const heading = session.regionForced
        ? 'Switch data-center region'
        : 'Select your data region';
    const hint = session.regionForced
        ? `Current: ${session.region?.toUpperCase() ?? 'US'} ${Icons.dash} pick a new region below`
        : 'Select the region for your Amplitude project. This should match the region your organization uses.';
    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: Colors.heading, children: heading }), _jsx(Text, { color: Colors.muted, children: hint })] }), _jsx(PickerMenu, { options: REGIONS, onSelect: (value) => {
                    const region = Array.isArray(value) ? value[0] : value;
                    store.setRegion(region);
                } }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: Colors.muted, children: [Icons.dot, " Data residency affects API endpoints and compliance. You can change this later with", ' ', _jsx(Text, { color: Colors.secondary, children: "/region" }), "."] }), session.regionForced && (_jsxs(Text, { color: Colors.warning, children: [Icons.dot, " You'll need to sign in again for the new region."] }))] })] }));
};
