import React, { useMemo } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
import { useUsers } from '@/contexts/UserContext';
import SymptomChart from '@/components/SymptomChart';
import { useAppData } from '@/contexts/AppDataContext';


const formatDateTime = (date: any): string => {
  if (!date) return '—';
  const d = new Date(date);
  if (isNaN(d.getTime())) return '—';
  return `${String(d.getDate()).padStart(2, '0')}/${String(d.getMonth() + 1).padStart(2, '0')}/${d.getFullYear()} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
};

const formatDay = (date: any): string => {
  if (!date) return '—';
  const d = new Date(date);
  if (isNaN(d.getTime())) return '—';
  return `${String(d.getDate()).padStart(2, '0')}/${String(d.getMonth() + 1).padStart(2, '0')}/${d.getFullYear()}`;
};

const SuiviDetail: React.FC = () => {
  const { fichier4a: fichier_4a, fichier8a: fichier_8a } = useAppData();
  const { id_suivi } = useLocalSearchParams<{ id_suivi: string }>();
  const { currentUser } = useUsers();

  const idNum = id_suivi ? parseInt(id_suivi) : undefined;

  const suivi = useMemo(() => {
    if (!Array.isArray(currentUser?.suivi) || idNum === undefined) return null;
    return currentUser.suivi.find(s => s.id === idNum) ?? null;
  }, [currentUser?.suivi, idNum]);

  const timeline = useMemo(() => {
    if (!suivi || !currentUser) return [];
    const events: {
      date: Date; symptomName: string; valeur: any;
      evaluateur?: string; source: 'init' | 'reevaluation';
    }[] = [];

    const initSymptoms = Array.isArray(suivi.init_symptoms) ? suivi.init_symptoms : [];
    initSymptoms.forEach((symptom: any) => {
      const name = symptom.name ?? symptom.surname ?? '—';
      if (Array.isArray(symptom.data)) {
        symptom.data.forEach((entry: any) => {
          const d = new Date(entry.date);
          if (!isNaN(d.getTime())) {
            events.push({ date: d, symptomName: name, valeur: entry.valeur, evaluateur: entry.evaluateur, source: 'init' });
          }
        });
      }
    });

    const trackedSymptoms = Array.isArray(suivi.symptoms) ? suivi.symptoms : [];
    trackedSymptoms.forEach((symptom: any) => {
      const name = symptom.name ?? symptom.surname ?? '—';
      const entry = currentUser.globalData instanceof Map
        ? currentUser.globalData.get(symptom.id)
        : (currentUser.globalData as any)?.[symptom.id];
      if (!entry?.values) return;
      entry.values
        .filter((v: any) => v.patient === currentUser.username || v.patient === null || v.patient === undefined)
        .forEach((v: any) => {
          const d = new Date(v.date);
          if (!isNaN(d.getTime())) {
            events.push({ date: d, symptomName: name, valeur: v.valeur, evaluateur: v.evaluateur, source: 'reevaluation' });
          }
        });
    });

    return events.sort((a, b) => a.date.getTime() - b.date.getTime());
  }, [suivi, currentUser]);

  const grouped = useMemo(() => {
    const map = new Map<string, typeof timeline>();
    timeline.forEach(event => {
      const key = formatDay(event.date);
      if (!map.has(key)) map.set(key, []);
      map.get(key)!.push(event);
    });
    return Array.from(map.entries());
  }, [timeline]);

  if (!suivi) {
    return (
      <View style={styles.centered}>
        <Text style={styles.emptyText}>Suivi introuvable.</Text>
      </View>
    );
  }

  const trackedSymptoms = Array.isArray(suivi.symptoms) ? suivi.symptoms : [];
  const initSymptoms = Array.isArray(suivi.init_symptoms) ? suivi.init_symptoms : [];

  return (
    <ScrollView style={styles.container} contentContainerStyle={styles.content}>

      {/* En-tête */}
      <View style={styles.header}>
        <Text style={styles.title}>{suivi.name ?? '—'}</Text>
        {suivi.date && <Text style={styles.subtitle}>Démarré le {formatDateTime(suivi.date)}</Text>}
        {suivi.evaluateur && <Text style={styles.subtitle}>Évaluateur : {suivi.evaluateur}</Text>}
      </View>

      {/* Valeurs initiales */}
      {initSymptoms.length > 0 && (
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Mesures initiales</Text>
          {initSymptoms.map((s: any, idx: number) => {
            const lastEntry = Array.isArray(s.data) && s.data.length > 0 ? s.data[s.data.length - 1] : null;
            return (
              <View key={idx} style={styles.initRow}>
                <Text style={styles.initName}>{s.name ?? s.surname ?? '—'}</Text>
                <Text style={styles.initValue}>
                  {lastEntry?.valeur !== undefined && lastEntry.valeur !== null ? String(lastEntry.valeur) : '—'}
                </Text>
              </View>
            );
          })}
        </View>
      )}

      {/* Symptômes suivis + dernière valeur */}
      {trackedSymptoms.length > 0 && (
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Symptômes suivis</Text>
          {trackedSymptoms.map((s: any, idx: number) => {
            const entry = currentUser?.globalData instanceof Map
              ? currentUser.globalData.get(s.id)
              : (currentUser?.globalData as any)?.[s.id];
            const values = entry?.values?.filter(
              (v: any) => v.patient === currentUser?.username || v.patient === null || v.patient === undefined
            ) ?? [];
            const lastEntry = values.length > 0 ? values[values.length - 1] : null;
            return (
              <View key={idx} style={styles.symptomRow}>
                <View style={{ flex: 1 }}>
                  <Text style={styles.symptomName}>{s.name ?? s.surname ?? '—'}</Text>
                  {lastEntry && <Text style={styles.symptomDate}>Dernière éval. : {formatDateTime(lastEntry.date)}</Text>}
                </View>
                <Text style={styles.symptomValue}>
                  {lastEntry?.valeur !== undefined && lastEntry.valeur !== null ? String(lastEntry.valeur) : '—'}
                </Text>
              </View>
            );
          })}

          {/* ── Graphique d'évolution ── */}
          {currentUser && (
            <SymptomChart
              symptoms={trackedSymptoms}
              username={currentUser.username}
            />
          )}
        </View>
      )}

      {/* Timeline */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Historique complet</Text>
        {grouped.length === 0 ? (
          <Text style={styles.emptyText}>Aucune évaluation enregistrée.</Text>
        ) : (
          grouped.map(([dayKey, events], groupIdx) => (
            <View key={groupIdx} style={styles.dayGroup}>
              <View style={styles.dayHeader}>
                <View style={styles.dayLine} />
                <Text style={styles.dayLabel}>{dayKey}</Text>
                <View style={styles.dayLine} />
              </View>
              {events.map((event, eventIdx) => (
                <View key={eventIdx} style={styles.eventRow}>
                  <View style={[styles.eventDot, { backgroundColor: event.source === 'init' ? '#aaa' : '#E8437B' }]} />
                  <View style={[styles.eventContent, { borderLeftColor: event.source === 'init' ? '#aaa' : '#E8437B' }]}>
                    <View style={styles.eventHeader}>
                      <Text style={styles.eventSymptom}>{event.symptomName}</Text>
                      {event.source === 'init' && <Text style={styles.eventBadge}>Initial</Text>}
                    </View>
                    <View style={styles.eventMeta}>
                      <Text style={[styles.eventValue, { color: event.source === 'init' ? '#888' : '#E8437B' }]}>
                        {event.valeur !== undefined && event.valeur !== null ? String(event.valeur) : '—'}
                      </Text>
                      <Text style={styles.eventTime}>
                        {String(event.date.getHours()).padStart(2, '0')}:{String(event.date.getMinutes()).padStart(2, '0')}
                      </Text>
                    </View>
                    {event.evaluateur && <Text style={styles.eventEval}>{event.evaluateur}</Text>}
                  </View>
                </View>
              ))}
            </View>
          ))
        )}
      </View>

    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' },
  content: { padding: 20, paddingBottom: 60 },
  centered: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  header: { marginBottom: 24, paddingBottom: 16, borderBottomWidth: 1, borderBottomColor: '#eee' },
  title: { fontSize: 22, fontWeight: 'bold', color: '#1a1a1a', marginBottom: 6 },
  subtitle: { fontSize: 13, color: '#888', marginTop: 2, fontStyle: 'italic' },
  section: { marginBottom: 28 },
  sectionTitle: { fontSize: 13, fontWeight: '700', color: '#555', marginBottom: 12, textTransform: 'uppercase', letterSpacing: 0.5 },
  initRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#f0f0f0' },
  initName: { fontSize: 14, color: '#555' },
  initValue: { fontSize: 14, fontWeight: 'bold', color: '#888' },
  symptomRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#f0f0f0' },
  symptomName: { fontSize: 14, fontWeight: '600', color: '#333' },
  symptomDate: { fontSize: 11, color: '#bbb', marginTop: 2 },
  symptomValue: { fontSize: 18, fontWeight: 'bold', color: '#E8437B', marginLeft: 8 },
  emptyText: { fontSize: 14, color: '#aaa', fontStyle: 'italic' },
  dayGroup: { marginBottom: 20 },
  dayHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
  dayLine: { flex: 1, height: 1, backgroundColor: '#e0e0e0' },
  dayLabel: { fontSize: 12, color: '#999', marginHorizontal: 10, fontWeight: '600' },
  eventRow: { flexDirection: 'row', alignItems: 'flex-start', marginBottom: 10, paddingLeft: 8 },
  eventDot: { width: 10, height: 10, borderRadius: 5, marginTop: 5, marginRight: 12 },
  eventContent: { flex: 1, backgroundColor: '#f9f9f9', borderRadius: 8, padding: 10, borderLeftWidth: 3 },
  eventHeader: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 },
  eventSymptom: { fontSize: 14, fontWeight: '600', color: '#333', flex: 1 },
  eventBadge: { fontSize: 10, color: '#999', backgroundColor: '#eee', paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, marginLeft: 6 },
  eventMeta: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  eventValue: { fontSize: 16, fontWeight: 'bold' },
  eventTime: { fontSize: 12, color: '#aaa' },
  eventEval: { fontSize: 11, color: '#bbb', marginTop: 4, fontStyle: 'italic' },
});

export default SuiviDetail;