/**
 * S1. Splash — MAPMAP-NAV-UI-SPEC.md.
 *
 * Brand route-mark on a dark tile (matches the website favicon), app name,
 * and a subtle progress indicator only once startup work is measurably slow
 * (>300ms) — the `progress` prop is omitted entirely for a fast boot, so
 * there is never a fake delay here, only a reflection of real work.
 */
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Svg, { G, Path } from "react-native-svg";
import { ProgressBar } from "../../components";
import { radius, spacing, theme, typeScale } from "../../theme";

export type SplashScreenProps = {
  /** 0..1 once startup work is measurably slow (>300ms); omit for no progress UI. */
  progress?: number;
};

const ICON_TILE_SIZE = 88;
const MARK_SIZE = 56;
const PROGRESS_WIDTH = 120;

/**
 * The real MapMap logomark — same geometry and brand colours as
 * `website/app/icon.svg` (the app-icon/favicon source of truth), translated
 * to react-native-svg. Keep this in sync with that file if the brand mark
 * ever changes.
 */
function MapMapMark(): React.JSX.Element {
  return (
    <Svg width={MARK_SIZE} height={MARK_SIZE} viewBox="0 0 64 64">
      <G transform="translate(1.5 1.6) scale(1.6)">
        <Path
          d="M28.8652 27.3001C30.3835 24.8138 32.2188 22.3777 32.6748 19.4509C33.7787 12.3665 28.3888 5.75034 20.9413 5.31185C18.3113 5.15719 14.2095 5.12166 11.6008 5.31143C10.3805 5.40005 9.19229 5.93886 8.36846 6.81082C7.88641 7.3212 5.28897 11.5318 5.20863 12.0752C5.01798 13.3609 5.87612 14.4202 7.21805 14.5502C9.44852 14.7659 12.323 14.5084 14.6212 14.5096C16.6111 14.5105 18.8538 14.3851 20.8111 14.5084C27.3179 14.918 31.4127 21.5542 28.8657 27.3006L28.8652 27.3001Z"
          fill="#3A86FF"
        />
        <Path
          d="M14.6205 14.5091L10.9647 20.6253C10.2825 21.8517 11.0403 23.4477 12.5203 23.6161C14.6952 23.864 17.8025 23.6007 20.0929 23.6216C22.2821 23.6416 24.3983 23.2771 26.1298 24.8543C27.5421 26.1409 27.9807 28.1444 27.3019 29.8916L28.8654 27.3C31.4124 21.5537 27.3176 14.917 20.8107 14.5078C18.8534 14.3845 16.6108 14.5103 14.6209 14.5091H14.6205Z"
          fill="#5DEC10"
        />
        <Path
          d="M20.0926 23.6218L16.3451 29.9424C15.8787 30.9377 16.4211 32.2423 17.4877 32.6289C18.2555 32.9069 22.9879 32.8438 23.906 32.664C25.3656 32.3785 26.7801 31.234 27.3016 29.8922C27.98 28.145 27.5413 26.1415 26.1295 24.8549C24.398 23.2773 22.2818 23.6422 20.0926 23.6222V23.6218Z"
          fill="#F845A2"
        />
      </G>
    </Svg>
  );
}

export function SplashScreen({ progress }: SplashScreenProps): React.JSX.Element {
  return (
    <View style={styles.container} testID="splash-screen">
      <View style={styles.iconTile}>
        <MapMapMark />
      </View>
      <Text style={styles.title}>MapMap Nav</Text>
      {typeof progress === "number" && (
        <View style={styles.progressTrack}>
          <ProgressBar progress={progress} tone="signal" testID="splash-progress" />
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: theme.textPrimary,
  },
  iconTile: {
    width: ICON_TILE_SIZE,
    height: ICON_TILE_SIZE,
    borderRadius: radius.lg,
    backgroundColor: theme.textPrimary,
    alignItems: "center",
    justifyContent: "center",
    ...theme.shadow,
  },
  title: {
    marginTop: spacing[5],
    fontSize: typeScale.title.fontSize,
    lineHeight: typeScale.title.lineHeight,
    fontWeight: typeScale.title.fontWeight,
    color: theme.surface,
  },
  progressTrack: {
    marginTop: spacing[8],
    width: PROGRESS_WIDTH,
  },
});
