import React, { useState, useEffect, useRef } from 'react';
import {
  Modal, View, Text, StyleSheet, TouchableOpacity,
  BackHandler, Platform, TextInput, Pressable,
} from 'react-native';
import { useAdmin } from '@/contexts/AdminContext';
import { useInactivity } from '@/contexts/InactivityContext';
import { useUsers } from '@/contexts/UserContext';
import { useId4a } from '@/contexts/Id4aContext';
import { router } from 'expo-router';
import fichier_4a from '@/assets/json/fichier_4a.json';
import fichier_8a from '@/assets/json/fichier_8a.json';
import symptomes from '@/assets/json/symptomes.json';

const ROLE_LABELS: Record<string, string> = {
  admin: 'Administrateur',
  reeduc: 'Rééducateur',
  geron: 'Gérontologue',
  kine: 'Kinésithérapeute',
  ergo: 'Ergothérapeute',
  infirmiere: 'Infirmière',
  naturo: 'Naturopathe',
};

export default function InactivityPopup() {
  const { isInactivityVisible, dismissInactivity } = useInactivity();
  const { role, setAdmin, setReeduc, setGeron, setKine, setErgo, setInfirmiere, setNaturo } = useAdmin();
  const { users, setCurrentRole } = useUsers();
  const { setId4a } = useId4a();

  const hasRole = role !== null;

  // ── Countdown pour le mode sans rôle (60s)
  const [countdown, setCountdown] = useState(60);
  const countdownRef = useRef<ReturnType<typeof setInterval> | null>(null);

  // ── Code pour le mode avec rôle
  const [code, setCode] = useState('');
  const [error, setError] = useState('');

  useEffect(() => {
    if (!isInactivityVisible) {
      setCode('');
      setError('');
      setCountdown(60);
      if (countdownRef.current) clearInterval(countdownRef.current);
      return;
    }

    if (!hasRole) {
      // Lance le countdown
      countdownRef.current = setInterval(() => {
        setCountdown(prev => {
          if (prev <= 1) {
            clearInterval(countdownRef.current!);
            handleExit();
            return 0;
          }
          return prev - 1;
        });
      }, 1000);
    }

    return () => { if (countdownRef.current) clearInterval(countdownRef.current); };
  }, [isInactivityVisible, hasRole]);

  const handleExit = () => {
      dismissInactivity();
      router.replace('/closure');
    };

  const handleStillHere = () => {
    if (countdownRef.current) clearInterval(countdownRef.current);
    dismissInactivity();
  };

  const navigateTo = (id: number) => {
    const node = fichier_4a.find(e => e.id === id);
    const node8a = fichier_8a.find(e => e.id === node?.id_8a);
    if (node8a?.href) {
      setId4a(id);
      dismissInactivity();
      router.replace({ pathname: node8a.href, params: { id_4a: id } });
    }
  };

  const resetAllRoles = () => {
    setAdmin(false); setReeduc(false); setGeron(false);
    setKine(false); setErgo(false); setInfirmiere(false); setNaturo(false);
  };

  const handleCodeValidate = () => {
    if (!code.trim()) return;
    const firstChar = code.trim()[0].toUpperCase();
    const noUsers = users.length === 0;

    switch (firstChar) {
      case 'A': case 'M':
        resetAllRoles(); setAdmin(true); setCurrentRole?.('admin');
        navigateTo(noUsers ? 319 : 86); break;
      case 'R':
        resetAllRoles(); setReeduc(true); setCurrentRole?.('reeduc');
        navigateTo(noUsers ? 319 : 351); break;
      case 'G':
        resetAllRoles(); setGeron(true); setCurrentRole?.('geron');
        navigateTo(noUsers ? 319 : 352); break;
      case 'K':
        resetAllRoles(); setKine(true); setCurrentRole?.('kine');
        navigateTo(noUsers ? 319 : 292); break;
      case 'E':
        resetAllRoles(); setErgo(true); setCurrentRole?.('ergo');
        navigateTo(noUsers ? 319 : 293); break;
      case 'I':
        resetAllRoles(); setInfirmiere(true); setCurrentRole?.('infirmiere');
        navigateTo(noUsers ? 319 : 294); break;
      case 'N':
        resetAllRoles(); setNaturo(true); setCurrentRole?.('naturo');
        navigateTo(noUsers ? 319 : 290); break;
      default:
        setError("Code incorrect. Réessayez.");
    }
  };

  if (!isInactivityVisible) return null;

  const roleLabel = role ? (ROLE_LABELS[role] ?? role) : '';

  return (
    <Modal visible transparent animationType="fade" onRequestClose={() => {}}>
      <View style={styles.backdrop}>
        <View style={styles.card}>

          {hasRole ? (
            // ── Mode avec rôle : saisie du code
            <>
              <Text style={styles.title}>Inactivité détectée</Text>
              <Text style={styles.body}>
                Vous êtes connecté en tant que{' '}
                <Text style={styles.bold}>{roleLabel}</Text>.{'\n\n'}
                Veuillez renseigner à nouveau votre code professionnel pour continuer, ou redémarrer l'application.
              </Text>

              <TextInput
                value={code}
                onChangeText={v => { setCode(v); setError(''); }}
                placeholder="Votre code"
                placeholderTextColor="#aaa"
                style={styles.input}
                autoCapitalize="characters"
                returnKeyType="done"
                onSubmitEditing={handleCodeValidate}
              />

              {error !== '' && <Text style={styles.error}>{error}</Text>}

              <TouchableOpacity style={styles.btnPrimary} onPress={handleCodeValidate}>
                <Text style={styles.btnPrimaryText}>Valider</Text>
              </TouchableOpacity>

              <TouchableOpacity style={styles.btnSecondary} onPress={handleExit}>
                <Text style={styles.btnSecondaryText}>Redémarrer l'application</Text>
              </TouchableOpacity>
            </>
          ) : (
            // ── Mode sans rôle : êtes-vous toujours là ?
            <>
              <Text style={styles.title}>Êtes-vous toujours là ?</Text>
              <Text style={styles.body}>
                Vous avez été inactif un certain temps.{'\n'}
                L'application se fermera dans{' '}
                <Text style={styles.bold}>{countdown}s</Text>.
              </Text>

              <TouchableOpacity style={styles.btnPrimary} onPress={handleStillHere}>
                <Text style={styles.btnPrimaryText}>Oui, je suis là</Text>
              </TouchableOpacity>

              <TouchableOpacity style={styles.btnSecondary} onPress={handleExit}>
                <Text style={styles.btnSecondaryText}>Non, quitter</Text>
              </TouchableOpacity>
            </>
          )}

        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  backdrop: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.6)',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 24,
  },
  card: {
    backgroundColor: 'white',
    borderRadius: 16,
    padding: 28,
    width: '100%',
    maxWidth: 380,
  },
  title: {
    fontSize: 20,
    fontWeight: '700',
    color: '#1a1a1a',
    marginBottom: 16,
    textAlign: 'center',
  },
  body: {
    fontSize: 15,
    color: '#444',
    lineHeight: 22,
    marginBottom: 24,
    textAlign: 'center',
  },
  bold: {
    fontWeight: '700',
    color: '#E8437B',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 10,
    paddingHorizontal: 14,
    paddingVertical: 10,
    fontSize: 16,
    color: 'black',
    marginBottom: 10,
  },
  error: {
    color: '#E8437B',
    fontSize: 13,
    marginBottom: 10,
    textAlign: 'center',
  },
  btnPrimary: {
    backgroundColor: '#E8437B',
    borderRadius: 10,
    paddingVertical: 13,
    alignItems: 'center',
    marginBottom: 10,
  },
  btnPrimaryText: {
    color: 'white',
    fontWeight: '700',
    fontSize: 16,
  },
  btnSecondary: {
    paddingVertical: 10,
    alignItems: 'center',
  },
  btnSecondaryText: {
    color: '#888',
    fontSize: 14,
  },
});