/**
 * S12. No location permission — MAPMAP-NAV-UI-SPEC.md: "puck hidden,
 * locate-me FAB explains + deep-link to OS settings." Presented as a
 * friendly card (full-screen scrim + centred card, matching
 * NoTerritoryPrompt) when the locate-me FAB is pressed without permission;
 * dismissible, since the app stays usable (search still works, puck stays
 * hidden) without granting.
 *
 * Deep-link: calls `Linking.openSettings()` directly (per the task brief)
 * so the OS settings screen opens regardless of what the caller does with
 * `onOpenOsSettings` — the callback still fires afterwards so a caller can
 * re-check permission state or dismiss the card once the user returns.
 */
import React from "react";
import { Linking, StyleSheet, Text, View } from "react-native";
import { Button, Card } from "../../components";
import { radius, spacing, theme, typeScale } from "../../theme";

export type LocationPermissionExplainerProps = {
  /** Deep-link to OS settings — puck stays hidden until granted. */
  onOpenOsSettings: () => void;
  onDismiss: () => void;
};

export function LocationPermissionExplainer({
  onOpenOsSettings,
  onDismiss,
}: LocationPermissionExplainerProps): React.JSX.Element {
  const handleOpenSettings = (): void => {
    Linking.openSettings().catch(() => {
      // Nothing further to do if the OS refuses the intent — the app stays
      // fully usable without location per spec S12; the caller still hears
      // about the tap via onOpenOsSettings below.
    });
    onOpenOsSettings();
  };

  return (
    <View
      style={styles.scrim}
      pointerEvents="auto"
      testID="location-permission-explainer"
    >
      <Card style={styles.card} testID="location-permission-explainer-card">
        <View style={styles.iconBadge}>
          <Text style={styles.iconGlyph}>📍</Text>
        </View>
        <Text style={styles.title}>Location access is off</Text>
        <Text style={styles.body}>
          MapMap Nav can't show your position on the map or start
          turn-by-turn guidance without location access. Search and offline
          maps still work fine without it.
        </Text>
        <Button
          label="Open Settings"
          onPress={handleOpenSettings}
          fullWidth
          testID="location-permission-explainer-open-settings"
        />
        <Button
          label="Not now"
          variant="secondary"
          onPress={onDismiss}
          fullWidth
          style={styles.dismissButton}
          testID="location-permission-explainer-dismiss"
        />
      </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],
  },
  dismissButton: {
    marginTop: spacing[3],
  },
});
