import React, { useEffect, useState } from 'react';
import {
  View, ScrollView, StyleSheet, Text, TouchableOpacity, ActivityIndicator,
} from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { useUsers } from '@/contexts/UserContext';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { exportAndShareBilans } from '@/utils/bilanToPdf';
import { useAppData } from '@/contexts/AppDataContext';


const BilanPage: React.FC = () => {
  const { fichier4a: fichier_4a, fichier8a: fichier_8a } = useAppData();
  const { currentUser, currentRole, getBilanKey } = useUsers();
  const [bilans, setBilans] = useState<any[]>([]);
  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
  const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set());
  const [exporting, setExporting] = useState(false);

  useEffect(() => {
    const loadBilans = async () => {
      if (!currentUser) { setBilans([]); return; }

      if (currentRole === 'admin') {
        const roleKeys = ['default', 'reeduc', 'geron'];
        const all: any[] = [];
        await Promise.all(
          roleKeys.map(async r => {
            const stored = await AsyncStorage.getItem(`bilan_${currentUser.username}_${r}`);
            if (stored) {
              const parsed = JSON.parse(stored);
              parsed.forEach((b: any) => { b._sourceRole = r; });
              all.push(...parsed);
            }
          })
        );
        setBilans(all.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()));
      } else {
        const key = getBilanKey(currentUser.username);
        const stored = await AsyncStorage.getItem(key);
        const parsed = stored ? JSON.parse(stored) : [];
        setBilans(parsed.sort((a: any, b: any) =>
          new Date(b.date).getTime() - new Date(a.date).getTime()
        ));
      }
    };

    setBilans([]);
    setSelectedIds(new Set());
    setExpandedIds(new Set());
    loadBilans();
  }, [currentUser?.username, currentRole]);

  const toggleSelect = (index: number) => {
    setSelectedIds(prev => {
      const next = new Set(prev);
      if (next.has(index)) next.delete(index);
      else next.add(index);
      return next;
    });
  };

  const toggleExpand = (index: number) => {
    setExpandedIds(prev => {
      const next = new Set(prev);
      if (next.has(index)) next.delete(index);
      else next.add(index);
      return next;
    });
  };

  const handleExport = async () => {
    const selected = bilans.filter((_, i) => selectedIds.has(i));
    if (selected.length === 0) return;
    setExporting(true);
    try {
      await exportAndShareBilans(selected);
    } catch (e) {
      console.error('Export error:', e);
    } finally {
      setExporting(false);
    }
  };

  const computeIMC = (symptoms: any[]): string | null => {
    if (!symptoms?.length) return null;
    const tailleSym = symptoms.find((s: any) => s.id === 41);
    const poidsSym  = symptoms.find((s: any) => s.id === 42);
    if (!tailleSym || !poidsSym) return null;
    const taille = parseFloat(String(tailleSym.value));
    const poids  = parseFloat(String(poidsSym.value));
    if (isNaN(taille) || isNaN(poids) || taille === 0) return null;
    return (poids / (taille * taille)).toFixed(2);
  };

  if (!currentUser) return null;

  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <ScrollView contentContainerStyle={styles.container}>
        {bilans.length === 0 ? (
          <Text style={styles.noBilan}>Aucun bilan disponible.</Text>
        ) : (
          bilans.map((bilan, index) => {
            const isSelected = selectedIds.has(index);
            const isExpanded = expandedIds.has(index);
            const imc = computeIMC(bilan.symptoms);

            return (
              <View
                key={index}
                style={[styles.bilanCard, isSelected && styles.bilanCardSelected]}
              >
                {/* ── Ligne résumée : flèche + nom/date + checkbox ── */}
                <View style={styles.cardHeader}>
                  <TouchableOpacity
                    onPress={() => toggleExpand(index)}
                    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
                    style={styles.arrowButton}
                  >
                    <AntDesign
                      name={isExpanded ? 'up' : 'down'}
                      size={16}
                      color="#888"
                    />
                  </TouchableOpacity>

                  <TouchableOpacity
                    style={{ flex: 1 }}
                    onPress={() => toggleExpand(index)}
                    activeOpacity={0.7}
                  >
                    <Text style={styles.bilanTitle}>{bilan.name}</Text>
                    {bilan.date && (
                      <Text style={styles.bilanDate}>
                        {new Date(bilan.date).toLocaleDateString('fr-FR', {
                          day: '2-digit', month: 'long', year: 'numeric',
                        })}
                      </Text>
                    )}
                    {currentRole === 'admin' && bilan._sourceRole && (
                      <Text style={styles.roleBadge}>
                        Rôle : {bilan._sourceRole}
                      </Text>
                    )}
                  </TouchableOpacity>

                  <TouchableOpacity
                    onPress={() => toggleSelect(index)}
                    style={styles.checkbox}
                    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
                  >
                    {isSelected
                      ? <AntDesign name="checkcircle" size={24} color="#E8437B" />
                      : <AntDesign name="checkcircleo" size={24} color="#bbb" />}
                  </TouchableOpacity>
                </View>

                {/* ── Contenu déplié ── */}
                {isExpanded && (
                  <>
                    {/* ── Symptômes ── */}
                    <Text style={styles.sectionLabel}>Symptômes :</Text>
                    {bilan.symptoms?.length > 0 ? (
                      <>
                        {bilan.symptoms.map((symptom: any, idx: number) => (
                          <Text key={idx} style={styles.symptomText}>
                            • {symptom.name}
                            {symptom.value !== null && symptom.value !== undefined
                              ? ` : ${symptom.value}` : ' : —'}
                          </Text>
                        ))}
                        {imc !== null && (
                          <Text style={[styles.symptomText, styles.imcText]}>
                            • IMC : {imc}
                          </Text>
                        )}
                      </>
                    ) : (
                      <Text style={styles.noData}>Aucun symptôme</Text>
                    )}

                    {/* ── Infos supplémentaires ── */}
                    <View style={styles.extraContainer}>
                      <Text style={styles.extraLabel}>Informations supplémentaires :</Text>
                      <Text style={styles.extraText}>• Patient : {bilan.patient ?? '—'}</Text>
                      <Text style={styles.extraText}>• Évaluateur : {bilan.evaluateur ?? '—'}</Text>
                      <Text style={styles.extraText}>• Latitude : {bilan.latitude ?? '—'}</Text>
                      <Text style={styles.extraText}>• Longitude : {bilan.longitude ?? '—'}</Text>
                    </View>

                    {/* ── Remarque ── */}
                    {bilan.remarque && (
                      <View style={styles.remarqueContainer}>
                        <Text style={styles.remarqueLabel}>Remarque :</Text>
                        <Text style={styles.remarqueText}>{bilan.remarque}</Text>
                      </View>
                    )}

                    {/* ── Score ── */}
                    {(bilan.valeurTotale !== undefined || bilan.valeurMaxTotale !== undefined) && (
                      <View style={styles.scoreContainer}>
                        <Text style={styles.scoreLabel}>Score :</Text>
                        <Text style={styles.scoreValue}>
                          {bilan.valeurTotale ?? '—'} / {bilan.valeurMaxTotale ?? '—'}
                        </Text>
                      </View>
                    )}
                  </>
                )}
              </View>
            );
          })
        )}
      </ScrollView>

      {selectedIds.size > 0 && (
        <TouchableOpacity
          style={[styles.exportButton, exporting && { opacity: 0.6 }]}
          onPress={handleExport}
          disabled={exporting}
        >
          {exporting ? (
            <ActivityIndicator color="#fff" />
          ) : (
            <>
              <AntDesign name="export" size={18} color="white" style={{ marginRight: 8 }} />
              <Text style={styles.exportText}>
                Envoyer {selectedIds.size} bilan{selectedIds.size > 1 ? 's' : ''}
              </Text>
            </>
          )}
        </TouchableOpacity>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20, paddingBottom: 100, backgroundColor: '#fff' },
  noBilan: { fontSize: 16, fontStyle: 'italic', textAlign: 'center', color: '#888', marginTop: 40 },
  bilanCard: {
    backgroundColor: '#f0f0f5', borderRadius: 12, padding: 15,
    marginBottom: 12, elevation: 2, borderWidth: 2, borderColor: 'transparent',
  },
  bilanCardSelected: { borderColor: '#E8437B', backgroundColor: '#fff0f4' },
  cardHeader: { flexDirection: 'row', alignItems: 'center' },
  arrowButton: { marginRight: 10, padding: 2 },
  checkbox: { marginLeft: 10 },
  bilanTitle: { fontSize: 17, fontWeight: 'bold' },
  bilanDate: { fontSize: 13, color: '#555', marginTop: 2 },
  roleBadge: {
    fontSize: 11, color: '#E8437B', marginTop: 2,
    fontStyle: 'italic', fontWeight: '600',
  },
  sectionLabel: { fontWeight: '600', marginTop: 12, marginBottom: 4 },
  symptomText: { fontSize: 14, marginLeft: 10 },
  imcText: { color: '#E8437B', fontWeight: '600', marginTop: 2 },
  noData: { fontStyle: 'italic', color: '#888', marginLeft: 10 },
  extraContainer: { marginTop: 15, paddingTop: 10, borderTopWidth: 1, borderTopColor: '#ccc' },
  extraLabel: { fontWeight: '600', marginBottom: 6 },
  extraText: { fontSize: 14, marginLeft: 10, marginBottom: 2 },
  remarqueContainer: { marginTop: 15, paddingTop: 10, borderTopWidth: 1, borderTopColor: '#ccc' },
  remarqueLabel: { fontWeight: '600', marginBottom: 6 },
  remarqueText: { fontSize: 14, marginLeft: 10, fontStyle: 'italic', color: '#333' },
  scoreContainer: {
    marginTop: 15, paddingTop: 10, borderTopWidth: 1, borderTopColor: '#ccc',
    flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
  },
  scoreLabel: { fontWeight: '600' },
  scoreValue: { fontSize: 22, fontWeight: 'bold', color: '#E8437B' },
  exportButton: {
    position: 'absolute', bottom: 24, left: 24, right: 24,
    backgroundColor: '#E8437B', borderRadius: 14, paddingVertical: 14,
    flexDirection: 'row', justifyContent: 'center', alignItems: 'center',
    elevation: 5, shadowColor: '#000',
    shadowOffset: { width: 0, height: 3 }, shadowOpacity: 0.2, shadowRadius: 4,
  },
  exportText: { color: 'white', fontWeight: 'bold', fontSize: 16 },
});

export default BilanPage;