/**
 * S2b. Onboarding — Location primer — MAPMAP-NAV-UI-SPEC.md.
 *
 * Friendly explanation BEFORE the OS permission dialog fires. Allow / Not
 * now — the app works without it (puck hidden, search still works), so
 * "Not now" is a first-class path, not a dead end.
 */
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Svg, { Circle, Path } from "react-native-svg";
import { Button } from "../../components";
import { radius, spacing, theme, typeScale } from "../../theme";

export type OnboardingLocationScreenProps = {
  onAllow: () => void;
  onNotNow: () => void;
};

const ICON_TILE_SIZE = 72;

function PinIcon(): React.JSX.Element {
  return (
    <Svg width={34} height={34} viewBox="0 0 24 24">
      <Path
        d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7Z"
        fill={theme.textOnSignal}
      />
      <Circle cx={12} cy={9} r={2.5} fill={theme.signal} />
    </Svg>
  );
}

export function OnboardingLocationScreen({
  onAllow,
  onNotNow,
}: OnboardingLocationScreenProps): React.JSX.Element {
  const insets = useSafeAreaInsets();

  return (
    <View style={[styles.container, { paddingTop: insets.top }]} testID="onboarding-location">
      <View style={styles.content}>
        <View style={styles.iconTile}>
          <PinIcon />
        </View>
        <Text style={styles.title}>Know where you are</Text>
        <Text style={styles.body}>
          MapMap Nav uses your location to show your position on the map and
          start routes from where you&apos;re standing. Search and offline
          maps work fine without it — you can always turn this on later in
          Settings.
        </Text>
      </View>
      <View style={[styles.footer, { paddingBottom: insets.bottom + spacing[6] }]}>
        <Button label="Allow location" variant="primary" fullWidth onPress={onAllow} />
        <Button
          label="Not now"
          variant="secondary"
          fullWidth
          onPress={onNotNow}
          style={styles.notNowButton}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.background,
  },
  content: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: spacing[8],
  },
  iconTile: {
    width: ICON_TILE_SIZE,
    height: ICON_TILE_SIZE,
    borderRadius: radius.lg,
    backgroundColor: theme.signal,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    marginTop: spacing[5],
    fontSize: typeScale.headline.fontSize,
    lineHeight: typeScale.headline.lineHeight,
    fontWeight: typeScale.headline.fontWeight,
    color: theme.textPrimary,
    textAlign: "center",
  },
  body: {
    marginTop: spacing[3],
    fontSize: typeScale.body.fontSize,
    lineHeight: typeScale.body.lineHeight,
    color: theme.textSecondary,
    textAlign: "center",
  },
  footer: {
    paddingHorizontal: spacing[6],
  },
  notNowButton: {
    marginTop: spacing[3],
  },
});
