Leaflet + Google Maps / Waze
Arquitetura Híbrida para Federal Pro

import { Platform, Linking, Alert } from 'react-native';
import * as Location from 'expo-location';

export type NavApp = 'google_maps' | 'waze';

export type LatLng = { lat: number; lng: number };

/** Google Maps — deep link universal */
function googleMapsUrl(dest: LatLng, origin?: LatLng): string {
  const daddr = `${dest.lat},${dest.lng}`;
  const saddr = origin ? `&origin=${origin.lat},${origin.lng}` : '';

  if (Platform.OS === 'ios') {
    // Esquema nativo iOS (turn-by-turn)
    return `comgooglemaps://?daddr=${daddr}${saddr}&directionsmode=driving`;
  }
  if (Platform.OS === 'android') {
    // Intent nativo Android (turn-by-turn)
    return `google.navigation:q=${daddr}&mode=d`;
  }
  // Fallback universal (abre browser ou app)
  return `https://www.google.com/maps/dir/?api=1&destination=${daddr}${saddr}&travelmode=driving`;
}

/** Waze — deep link universal */
function wazeUrl(dest: LatLng): string {
  return `waze://?ll=${dest.lat},${dest.lng}&navigate=yes`;
}

/** Verifica se um esquema está disponível no dispositivo */
async function canOpen(url: string): Promise<boolean> {
  try {
    return await Linking.canOpenURL(url);
  } catch {
    return false;
  }
}

/** Abre a navegação com fallback inteligente */
export async function openNavigation(
  dest: LatLng,
  origin: LatLng | undefined,
  preferred: NavApp = 'google_maps'
) {
  if (preferred === 'waze') {
    const waze = wazeUrl(dest);
    if (await canOpen(waze)) {
      return Linking.openURL(waze);
    }
    // Waze não instalado → cai para Google Maps
    return openNavigation(dest, origin, 'google_maps');
  }

  // Google Maps (tenta nativo, cai para universal)
  const native = googleMapsUrl(dest, origin);
  if (await canOpen(native)) {
    return Linking.openURL(native);
  }

  // Fallback universal (sempre funciona)
  const web = `https://www.google.com/maps/dir/?api=1&destination=${dest.lat},${dest.lng}&travelmode=driving`;
  return Linking.openURL(web);
}

import { WebView } from 'react-native-webview';
import { useMemo } from 'react';

type Props = {
  origin: { lat: number; lng: number };
  destination: { lat: number; lng: number };
  polyline: Array<{ lat: number; lng: number }>;
  distanceKm: number;
  durationMin: number;
  trafficLevel?: 'low' | 'medium' | 'high';
};

export function RoutePreview({
  origin, destination, polyline, distanceKm, durationMin, trafficLevel,
}: Props) {
  const color = {
    low: '#16A34A', medium: '#F59E0B', high: '#DC2626',
  }[trafficLevel ?? 'low'];

  const html = useMemo(() => `
    <!DOCTYPE html>
    <html><head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
      <style>
        html, body, #map { height: 100%; margin: 0; }
        #info {
          position: absolute; top: 12px; left: 12px; z-index: 999;
          background: #fff; padding: 12px 16px; border-radius: 12px;
          font-family: -apple-system, sans-serif; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }
        #info b { font-size: 18px; display: block; margin-bottom: 4px; }
        #info span { font-size: 13px; color: #64748B; }
      </style>
    </head><body>
      <div id="map"></div>
      <div id="info">
        <b>${distanceKm.toFixed(1)} km</b>
        <span>≈ ${Math.ceil(durationMin)} min</span>
      </div>
      <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
      <script>
        const map = L.map('map').setView([${origin.lat}, ${origin.lng}], 14);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

        // Rota colorida por trânsito
        const coords = ${JSON.stringify(polyline.map((p) => [p.lat, p.lng]))};
        L.polyline(coords, { color: '${color}', weight: 6, opacity: 0.85 }).addTo(map);

        // Marcadores
        L.circleMarker([${origin.lat}, ${origin.lng}], {
          radius: 8, fillColor: '#22C55E', fillOpacity: 1, color: '#fff', weight: 3,
        }).addTo(map).bindPopup('Origem');

        L.circleMarker([${destination.lat}, ${destination.lng}], {
          radius: 8, fillColor: '#DC2626', fillOpacity: 1, color: '#fff', weight: 3,
        }).addTo(map).bindPopup('Destino');

        map.fitBounds(coords, { padding: [40, 40] });
      </script>
    </body></html>
  `, [origin, destination, polyline, distanceKm, durationMin, color]);

  return (
    <WebView
      originWhitelist={['*']}
      source={{ html }}
      style={{ flex: 1, borderRadius: 16 }}
      javaScriptEnabled
      domStorageEnabled
    />
  );
}

// Header
{ "alg": "RS256", "typ": "JWT", "kid": "firebase-key-1" }

// Payload (claims)
{
  "iss": "https://securetoken.google.com/federal-pro",
  "aud": "federal-pro",
  "user_id": "abc123uid",
  "sub": "abc123uid",
  "iat": 1790000000,
  "exp": 1790003600,          // 1 hora
  "email": "motorista@exemplo.com",
  "phone_number": "+5511999998888",
  "role": "driver",           // custom claim
  "categoria": "pro",          // custom claim
  "status": "aprovado",        // custom claim
  "nav_app": "waze"            // preferência de navegação
}

import * as admin from 'firebase-admin';
import * as functions from 'firebase-functions';

export function withAuth(
  handler: (data: any, ctx: AuthContext) => Promise<any>,
  requiredRole?: 'driver' | 'passenger' | 'admin'
) {
  return functions.https.onCall(async (data, context) => {
    if (!context.auth) {
      throw new functions.https.HttpsError(
        'unauthenticated', 'JWT ausente ou inválido'
      );
    }

    const { uid, token } = context.auth;

    // Verifica se a conta está aprovada
    if (token.status !== 'aprovado') {
      throw new functions.https.HttpsError(
        'permission-denied', 'Conta pendente de aprovação'
      );
    }

    // Verifica role (RBAC)
    if (requiredRole && token.role !== requiredRole) {
      throw new functions.https.HttpsError(
        'permission-denied', `Requer role '${requiredRole}'`
      );
    }

    // Rate limiting
    const allowed = await checkRateLimit(uid, 60, '1m');
    if (!allowed) {
      throw new functions.https.HttpsError('resource-exhausted', 'Demasiados pedidos');
    }

    // Auditoria
    await admin.firestore().collection('audit_logs').add({
      uid, action: 'call', fn: handler.name,
      timestamp: admin.firestore.FieldValue.serverTimestamp(),
    });

    return handler(data, { uid, role: token.role, claims: token });
  });
}

type AuthContext = {
  uid: string;
  role: 'driver' | 'passenger' | 'admin';
  claims: any;
};

{
  "expo": {
    "ios": {
      "infoPlist": {
        "LSApplicationQueriesSchemes": [
          "comgooglemaps",
          "waze"
        ]
      }
    },
    "android": {
      "intentFilters": [
        {
          "action": "VIEW",
          "data": [{ "scheme": "https", "host": "federalpro.com.br" }],
          "category": ["BROWSABLE", "DEFAULT"]
        }

      ]
    }
  }
}

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    function isSignedIn() { return request.auth != null; }
    function isOwner(uid) { return request.auth.uid == uid; }
    function isRole(role) { return request.auth.token.role == role; }
    function isApproved() { return request.auth.token.status == 'aprovado'; }
    function isParticipant() { return request.auth.uid in resource.data.participants; }

    match /users/{uid} {
      allow read: if isOwner(uid) || isRole('admin');
      allow update: if isOwner(uid)
        && !request.resource.data.diff(resource.data).affectedKeys()
             .hasAny(['role', 'status', 'cpf_encrypted']);
    }

    match /drivers/{driverId} {
      allow write: if isOwner(driverId) && isRole('driver') && isApproved();
      allow read: if isSignedIn();
    }

    match /trips/{tripId} {
      allow read: if isParticipant() || isRole('admin');
      allow create: if isSignedIn()
        && request.resource.data.participants.hasAll([request.auth.uid]);
      allow update: if isParticipant();
    }

    match /match_requests/{uid} {
      allow read: if isOwner(uid);
      allow write: if false; // só Cloud Functions
    }

    match /{document=**} {
      allow read, write: if false;
    }
  }
}

import { useState, useEffect } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
import { RoutePreview } from '@/components/RoutePreview';
import { openNavigation } from '@/services/navigation/deepLinks';
import { acceptTrip } from '@/services/trips';
import { useAuth } from '@/auth/AuthContext';

export function NewTripNotification({ trip, onClose }: Props) {
  const { user } = useAuth();
  const [countdown, setCountdown] = useState(15);
  const [accepting, setAccepting] = useState(false);

  // Countdown para aceitar
  useEffect(() => {
    if (countdown <= 0) { onClose(); return; }
    const t = setTimeout(() => setCountdown((c) => c - 1), 1000);
    return () => clearTimeout(t);
  }, [countdown]);

  async function handleAccept() {
    setAccepting(true);
    await acceptTrip(trip.id);

    // Abre Google Maps ou Waze com 1 toque
    await openNavigation(
      { lat: trip.pickupLat, lng: trip.pickupLng },
      { lat: trip.currentLat, lng: trip.currentLng },
      user?.navApp ?? 'google_maps'
    );

    onClose();
  }

  return (
    <View style={s.container}>
      <View style={s.header}>
        <Text style={s.title}>Nova viagem!</Text>
        <Text style={s.countdown}>{countdown}s</Text>
      </View>

      {/* Leaflet preview com rota, distância e tempo */}
      <View style={s.mapWrap}>
        <RoutePreview
          origin={{ lat: trip.currentLat, lng: trip.currentLng }}
          destination={{ lat: trip.pickupLat, lng: trip.pickupLng }}
          polyline={trip.polyline}
          distanceKm={trip.distanceKm}
          durationMin={trip.durationMin}
          trafficLevel={trip.trafficLevel}
        />
      </View>

      <Text style={s.passenger}>
        {trip.passengerName} • ★ {trip.passengerRating.toFixed(2)}
      </Text>

      <View style={s.actions}>
        <Pressable style={[s.btn, s.reject]} onPress={onClose}>
          <Text style={s.btnText}>Rejeitar</Text>
        </Pressable>
        <Pressable
          style={[s.btn, s.accept, accepting && { opacity: 0.6 }]}
          onPress={handleAccept}
          disabled={accepting}
        >
          <Text style={s.btnText}>Aceitar e Navegar</Text>
        </Pressable>
      </View>
    </View>
  );
}

const s = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#0F172A', padding: 20 },
  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 },
  title: { color: '#FFF', fontSize: 20, fontWeight: '800' },
  countdown: { color: '#F59E0B', fontSize: 18, fontWeight: '800' },
  mapWrap: { flex: 1, borderRadius: 16, overflow: 'hidden' },
  passenger: { color: '#94A3B8', marginTop: 12, fontSize: 14 },
  actions: { flexDirection: 'row', gap: 12, marginTop: 16 },
  btn: { flex: 1, paddingVertical: 16, borderRadius: 12, alignItems: 'center' },
  accept: { backgroundColor: '#22C55E' },
  reject: { backgroundColor: '#334155' },
  btnText: { color: '#FFF', fontWeight: '800', fontSize: 15 },
});