/**
 * S2a. Onboarding — Welcome — MAPMAP-NAV-UI-SPEC.md.
 *
 * One screen, brand + "Offline navigation, no tracking" + Get Started. No
 * carousel padding — this is the whole first-run pitch, not step 1 of N.
 */
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Svg, { Path } from "react-native-svg";
import { Button } from "../../components";
import { radius, spacing, theme, typeScale } from "../../theme";

export type OnboardingWelcomeScreenProps = {
  onGetStarted: () => void;
};

const ICON_TILE_SIZE = 72;

function RouteMark(): 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-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z"
        fill={theme.textOnSignal}
      />
    </Svg>
  );
}

export function OnboardingWelcomeScreen({
  onGetStarted,
}: OnboardingWelcomeScreenProps): React.JSX.Element {
  const insets = useSafeAreaInsets();

  return (
    <View style={[styles.container, { paddingTop: insets.top }]} testID="onboarding-welcome">
      <View style={styles.hero}>
        <View style={styles.iconTile}>
          <RouteMark />
        </View>
        <Text style={styles.title}>MapMap Nav</Text>
        <Text style={styles.tagline}>Offline navigation. No tracking.</Text>
      </View>
      <View style={[styles.footer, { paddingBottom: insets.bottom + spacing[6] }]}>
        <Button label="Get Started" variant="primary" fullWidth onPress={onGetStarted} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.background,
  },
  hero: {
    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.display.fontSize,
    lineHeight: typeScale.display.lineHeight,
    fontWeight: typeScale.display.fontWeight,
    color: theme.textPrimary,
  },
  tagline: {
    marginTop: spacing[2],
    fontSize: typeScale.body.fontSize,
    lineHeight: typeScale.body.lineHeight,
    color: theme.textSecondary,
    textAlign: "center",
  },
  footer: {
    paddingHorizontal: spacing[6],
  },
});
