/**
 * S12. No territory installed but S3 (Explore) reached — the edge case
 * called out in MAPMAP-NAV-UI-SPEC.md's "System & error states" inventory:
 * a friendly prompt card, not a dead end, deep-linking back to the S2c
 * territory picker. Renders as a full-screen scrim + centred card so it can
 * be dropped straight into App.tsx's `<Overlay>` wrapper over the map.
 *
 * No dismiss action is offered by design — the app genuinely cannot search
 * or route with zero territories installed, so this prompt blocks until
 * `onSetUpTerritory` is taken (matches the prop contract: exactly one
 * callback, no onDismiss).
 */
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { Button, Card } from "../../components";
import { radius, spacing, theme, typeScale } from "../../theme";

export type NoTerritoryPromptProps = {
  /** No territory installed but S3 reached — deep-link to S2c. */
  onSetUpTerritory: () => void;
};

export function NoTerritoryPrompt({
  onSetUpTerritory,
}: NoTerritoryPromptProps): React.JSX.Element {
  return (
    <View style={styles.scrim} pointerEvents="auto" testID="no-territory-prompt">
      <Card style={styles.card} testID="no-territory-prompt-card">
        <View style={styles.iconBadge}>
          <Text style={styles.iconGlyph}>🗺️</Text>
        </View>
        <Text style={styles.title}>No maps installed</Text>
        <Text style={styles.body}>
          MapMap Nav needs at least one offline territory before it can
          search or navigate. Downloads happen once, then everything works
          without a connection.
        </Text>
        <Button
          label="Set up territory"
          onPress={onSetUpTerritory}
          fullWidth
          testID="no-territory-prompt-cta"
        />
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  scrim: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(16,24,42,0.45)",
    alignItems: "center",
    justifyContent: "center",
    padding: spacing[6],
  },
  card: {
    width: "100%",
    maxWidth: 360,
    alignItems: "center",
  },
  iconBadge: {
    width: 56,
    height: 56,
    borderRadius: radius.pill,
    backgroundColor: theme.surfaceAlt,
    alignItems: "center",
    justifyContent: "center",
    marginBottom: spacing[4],
  },
  iconGlyph: {
    fontSize: 26,
  },
  title: {
    fontSize: typeScale.headline.fontSize,
    fontWeight: typeScale.headline.fontWeight,
    color: theme.textPrimary,
    textAlign: "center",
    marginBottom: spacing[2],
  },
  body: {
    fontSize: typeScale.body.fontSize,
    color: theme.textSecondary,
    lineHeight: typeScale.body.lineHeight,
    textAlign: "center",
    marginBottom: spacing[5],
  },
});
