/**
 * Driving-options sheet — opened from the gear in guidance. Quick controls that
 * change the live drive without leaving navigation: map tilt, puck style, and
 * the position source (real GPS vs the simulated demo drive).
 *
 * Tilt uses discrete presets rather than a drag slider on purpose: a horizontal
 * drag slider fights the sheet's own vertical drag-to-close gesture, which made
 * it snap back. Presets are reliable and match the app's other controls.
 */
import React from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Sheet, SegmentedControl } from "../../components";
import { spacing, theme, typeScale } from "../../theme";
import type { PuckStyle } from "./ChaseLayer";

export type GuidanceSettingsSheetProps = {
  visible: boolean;
  onClose: () => void;
  navMode: "live" | "simulate";
  onNavModeChange: (mode: "live" | "simulate") => void;
  /** Chase-camera tilt, degrees (0 = 2D top-down, ~58 = strong 3D lean). */
  pitchDeg: number;
  onPitchChange: (deg: number) => void;
  puckStyle: PuckStyle;
  onPuckStyleChange: (style: PuckStyle) => void;
};

const TILT_OPTIONS: Array<{ value: string; label: string }> = [
  { value: "0", label: "2D" },
  { value: "30", label: "Low" },
  { value: "45", label: "Med" },
  { value: "58", label: "High" },
];

const PUCK_OPTIONS: Array<{ value: PuckStyle; label: string }> = [
  { value: "chevron", label: "Chevron" },
  { value: "arrow", label: "Arrow" },
  { value: "beam", label: "Beam" },
];

const SOURCE_OPTIONS: Array<{ value: "live" | "simulate"; label: string }> = [
  { value: "live", label: "Live GPS" },
  { value: "simulate", label: "Simulate" },
];

/** The preset whose degrees are closest to the current pitch. */
function closestTilt(pitchDeg: number): string {
  return TILT_OPTIONS.reduce((best, option) =>
    Math.abs(Number(option.value) - pitchDeg) < Math.abs(Number(best.value) - pitchDeg)
      ? option
      : best
  ).value;
}

export function GuidanceSettingsSheet({
  visible,
  onClose,
  navMode,
  onNavModeChange,
  pitchDeg,
  onPitchChange,
  puckStyle,
  onPuckStyleChange,
}: GuidanceSettingsSheetProps): React.JSX.Element | null {
  const insets = useSafeAreaInsets();
  if (!visible) return null;
  return (
    <>
      <Pressable
        style={styles.scrim}
        onPress={onClose}
        accessibilityLabel="Close driving options"
      />
      <Sheet
        visible
        snapPoint="peek"
        onSnapPointChange={() => {}}
        onClose={onClose}
        peekHeight={430 + insets.bottom}
        testID="guidance-settings-sheet"
      >
        <View style={[styles.content, { paddingBottom: spacing[4] + insets.bottom }]}>
          <Text style={styles.title}>Driving options</Text>

          <View style={styles.row}>
            <Text style={styles.label}>Map tilt</Text>
            <SegmentedControl
              options={TILT_OPTIONS}
              value={closestTilt(pitchDeg)}
              onChange={(value) => onPitchChange(Number(value))}
              testID="guidance-tilt"
            />
          </View>

          <View style={styles.row}>
            <Text style={styles.label}>Puck style</Text>
            <SegmentedControl
              options={PUCK_OPTIONS}
              value={puckStyle}
              onChange={onPuckStyleChange}
              testID="guidance-puck-style"
            />
          </View>

          <View style={styles.row}>
            <Text style={styles.label}>Position source</Text>
            <SegmentedControl
              options={SOURCE_OPTIONS}
              value={navMode}
              onChange={onNavModeChange}
              testID="guidance-nav-mode"
            />
          </View>

          <Text style={styles.hint}>
            {navMode === "live"
              ? "Following your real GPS — the map moves only when you do."
              : "Simulating a drive along the route, for demos."}
          </Text>

          <Button label="Done" variant="primary" fullWidth onPress={onClose} />
        </View>
      </Sheet>
    </>
  );
}

const styles = StyleSheet.create({
  scrim: {
    ...StyleSheet.absoluteFill,
    backgroundColor: "rgba(16,24,42,0.28)",
  },
  content: {
    paddingHorizontal: spacing[4],
    paddingBottom: spacing[4],
    gap: spacing[4],
  },
  title: {
    ...typeScale.title,
    color: theme.textPrimary,
  },
  row: {
    gap: spacing[2],
  },
  label: {
    fontSize: typeScale.label.fontSize,
    fontWeight: typeScale.label.fontWeight,
    color: theme.textSecondary,
    textTransform: "uppercase",
    letterSpacing: 0.5,
  },
  hint: {
    fontSize: typeScale.caption.fontSize,
    color: theme.textSecondary,
  },
});
