import { router, useLocalSearchParams } from 'expo-router';
import { ScrollView, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { WEB_URL } from '@/api/client';
import { BoutonTel, Carte, EnteteFiche } from '@/composants/ui';
import { useTokens } from '@/theme/tokens';

/** Lien d'activation émis — R6.4. Pas de presse-papiers natif sur mobile
 *  pour l'instant (`expo-clipboard` demanderait un nouveau build natif,
 *  même raisonnement que l'ouverture de document en Ressources) : le texte
 *  est sélectionnable (`Text selectable`, RN natif, aucune dépendance) —
 *  appui long → copier, comme partout sur le téléphone. */
export default function PageLienActivation() {
  const t = useTokens();
  const { token, expiresAt } = useLocalSearchParams<{ token: string; expiresAt: string }>();
  const url = `${WEB_URL}/activation?token=${token}`;

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
      <ScrollView contentContainerStyle={{ padding: 14, gap: 12 }}>
        <EnteteFiche titre="Lien d'activation émis" />
        <Text style={{ fontFamily: 'Manrope_600SemiBold', fontSize: 13, color: t.encre2 }}>
          Transmettez ce lien à la personne (valable jusqu'au{' '}
          {new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long' }).format(new Date(expiresAt))}) :
        </Text>
        <Carte>
          <Text
            selectable
            style={{ fontFamily: 'Manrope_700Bold', fontSize: 13, color: t.primaire }}
          >
            {url}
          </Text>
        </Carte>
        <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 11.5, color: t.encre3 }}>
          Appui long sur le lien pour le sélectionner et le copier.
        </Text>
        <View style={{ marginTop: 8 }}>
          <BoutonTel libelle="Terminé" surAppui={() => router.replace('/personnes')} />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}