/**
 * Memory-Detail-Modal — Anzeige + Edit eines einzelnen Memory-Eintrags.
 *
 * Zwei Modi:
 * - read-only: zeigt alle Felder + Anhang-Vorschau (Klick auf Bild = Vollbild)
 * - edit: Form mit Save/Delete/Anhang-hochladen
 *
 * Memory-Daten werden beim Oeffnen aus dem Brain (via brainApi → RVS) frisch
 * gezogen. Optimistic Updates sind explizit nicht da — der DB-Stand ist die
 * Truth.
 */

import React, { useEffect, useState } from 'react';
import {
  ActivityIndicator,
  Alert,
  Image,
  Modal,
  ScrollView,
  StyleSheet,
  Switch,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import DocumentPicker, { DocumentPickerResponse } from 'react-native-document-picker';
import RNFS from 'react-native-fs';

import brainApi, { Memory, MemoryAttachment } from '../services/brainApi';

interface Props {
  memoryId: string | null;
  visible: boolean;
  onClose: () => void;
  onDeleted?: (id: string) => void;
}

const TYPE_OPTIONS = [
  { value: 'identity',     label: 'identity (FEST)' },
  { value: 'rule',         label: 'rule (FEST)' },
  { value: 'preference',   label: 'preference (FEST)' },
  { value: 'tool',         label: 'tool (FEST)' },
  { value: 'skill',        label: 'skill (FEST)' },
  { value: 'fact',         label: 'fact (Cold)' },
  { value: 'conversation', label: 'conversation (Cold)' },
  { value: 'reminder',     label: 'reminder (Cold)' },
];

export const MemoryDetailModal: React.FC<Props> = ({ memoryId, visible, onClose, onDeleted }) => {
  const [memory, setMemory] = useState<Memory | null>(null);
  const [loading, setLoading] = useState(false);
  const [editing, setEditing] = useState(false);
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const [busy, setBusy] = useState<string | null>(null);

  // Edit-Felder
  const [eTitle, setETitle] = useState('');
  const [eContent, setEContent] = useState('');
  const [eCategory, setECategory] = useState('');
  const [eTags, setETags] = useState('');
  const [ePinned, setEPinned] = useState(false);

  // Bild-Vollbild
  const [fullscreen, setFullscreen] = useState<string | null>(null);

  // Memory laden beim Oeffnen
  useEffect(() => {
    if (!visible || !memoryId) {
      setMemory(null); setEditing(false); setErr(null); return;
    }
    setLoading(true); setErr(null);
    brainApi.getMemory(memoryId)
      .then(m => {
        setMemory(m);
        setETitle(m.title || '');
        setEContent(m.content || '');
        setECategory(m.category || '');
        setETags((m.tags || []).join(', '));
        setEPinned(!!m.pinned);
      })
      .catch(e => setErr(String(e?.message || e)))
      .finally(() => setLoading(false));
  }, [visible, memoryId]);

  const reload = () => {
    if (!memoryId) return;
    setLoading(true);
    brainApi.getMemory(memoryId)
      .then(m => setMemory(m))
      .catch(e => setErr(String(e?.message || e)))
      .finally(() => setLoading(false));
  };

  const onSave = async () => {
    if (!memoryId) return;
    setSaving(true); setErr(null);
    try {
      const tags = eTags.split(',').map(t => t.trim()).filter(Boolean);
      const m = await brainApi.updateMemory(memoryId, {
        title: eTitle.trim(),
        content: eContent.trim(),
        category: eCategory.trim(),
        tags,
        pinned: ePinned,
      });
      setMemory(m);
      setEditing(false);
    } catch (e: any) {
      setErr(String(e?.message || e));
    } finally {
      setSaving(false);
    }
  };

  const onDelete = () => {
    if (!memoryId || !memory) return;
    Alert.alert(
      'Memory loeschen?',
      `"${memory.title}"\n\nWird permanent aus der DB entfernt, inkl. aller Anhaenge.`,
      [
        { text: 'Abbrechen', style: 'cancel' },
        {
          text: 'Loeschen',
          style: 'destructive',
          onPress: async () => {
            try {
              await brainApi.deleteMemory(memoryId);
              if (onDeleted) onDeleted(memoryId);
              onClose();
            } catch (e: any) {
              Alert.alert('Fehler', String(e?.message || e));
            }
          },
        },
      ],
    );
  };

  const onPickAndUpload = async () => {
    if (!memoryId) return;
    try {
      const picked: DocumentPickerResponse[] = await DocumentPicker.pick({
        type: [DocumentPicker.types.images, DocumentPicker.types.pdf, DocumentPicker.types.allFiles],
        copyTo: 'cachesDirectory',
      });
      for (const f of picked) {
        setBusy(`Lade ${f.name}…`);
        // RNFS lesen → base64 → API
        const localPath = (f.fileCopyUri || f.uri).replace(/^file:\/\//, '');
        const b64 = await RNFS.readFile(localPath, 'base64');
        await brainApi.uploadAttachment(memoryId, f.name || 'datei', b64);
      }
      setBusy(null);
      reload();
    } catch (e: any) {
      setBusy(null);
      if (DocumentPicker.isCancel(e)) return;
      Alert.alert('Upload-Fehler', String(e?.message || e));
    }
  };

  const onDeleteAttachment = (att: MemoryAttachment) => {
    if (!memoryId) return;
    Alert.alert(
      'Anhang loeschen?',
      `"${att.name}"`,
      [
        { text: 'Abbrechen', style: 'cancel' },
        {
          text: 'Loeschen',
          style: 'destructive',
          onPress: async () => {
            try {
              const m = await brainApi.deleteAttachment(memoryId, att.name);
              setMemory(m);
            } catch (e: any) {
              Alert.alert('Fehler', String(e?.message || e));
            }
          },
        },
      ],
    );
  };

  const onTapAttachment = async (att: MemoryAttachment) => {
    if (!memoryId) return;
    if ((att.mime || '').startsWith('image/')) {
      try {
        setBusy('Lade Bild…');
        const data = await brainApi.getAttachmentBytes(memoryId, att.name);
        // Temp-File schreiben damit <Image source={uri: file://...}> es zeigen kann
        const safe = att.name.replace(/[^A-Za-z0-9._-]/g, '_');
        const localPath = `${RNFS.CachesDirectoryPath}/memory_${memoryId}_${safe}`;
        await RNFS.writeFile(localPath, data.base64, 'base64');
        setBusy(null);
        setFullscreen('file://' + localPath);
      } catch (e: any) {
        setBusy(null);
        Alert.alert('Fehler', String(e?.message || e));
      }
    } else {
      Alert.alert('Anhang', `${att.name}\n${att.mime}\n${att.size} Byte\n\nPfad: ${att.path}`);
    }
  };

  return (
    <Modal visible={visible} animationType="slide" transparent onRequestClose={onClose}>
      <View style={s.backdrop}>
        <View style={s.box}>
          <View style={s.header}>
            <Text style={s.title}>{editing ? 'Memory bearbeiten' : 'Memory-Detail'}</Text>
            <TouchableOpacity onPress={onClose} hitSlop={{top:8,bottom:8,left:8,right:8}}>
              <Text style={s.closeX}>×</Text>
            </TouchableOpacity>
          </View>

          <ScrollView style={s.body} contentContainerStyle={{paddingBottom:20}}>
            {loading ? (
              <ActivityIndicator color="#0096FF" style={{marginTop:30}} />
            ) : err && !memory ? (
              <Text style={s.err}>{err}</Text>
            ) : memory ? (
              editing ? (
                <View>
                  <Text style={s.label}>Typ</Text>
                  <Text style={{color:'#888',fontSize:12,marginBottom:8}}>{memory.type} (kann hier nicht geaendert werden)</Text>

                  <Text style={s.label}>Titel</Text>
                  <TextInput style={s.input} value={eTitle} onChangeText={setETitle} />

                  <Text style={s.label}>Inhalt</Text>
                  <TextInput
                    style={[s.input, {minHeight:120, textAlignVertical:'top'}]}
                    value={eContent}
                    onChangeText={setEContent}
                    multiline
                  />

                  <Text style={s.label}>Kategorie</Text>
                  <TextInput style={s.input} value={eCategory} onChangeText={setECategory} />

                  <Text style={s.label}>Tags (komma-getrennt)</Text>
                  <TextInput style={s.input} value={eTags} onChangeText={setETags} />

                  <View style={{flexDirection:'row',alignItems:'center',marginTop:10,gap:8}}>
                    <Switch value={ePinned} onValueChange={setEPinned} />
                    <Text style={{color:'#E0E0F0'}}>📌 Pinned (immer im System-Prompt)</Text>
                  </View>

                  {err ? <Text style={s.err}>{err}</Text> : null}

                  <View style={{flexDirection:'row',gap:8,marginTop:14}}>
                    <TouchableOpacity style={[s.btn,s.btnSecondary]} onPress={() => setEditing(false)} disabled={saving}>
                      <Text style={s.btnText}>Abbrechen</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={[s.btn,s.btnPrimary,{flex:1}]} onPress={onSave} disabled={saving}>
                      <Text style={s.btnText}>{saving ? 'Speichere…' : 'Speichern'}</Text>
                    </TouchableOpacity>
                  </View>
                </View>
              ) : (
                <View>
                  <View style={{flexDirection:'row',alignItems:'flex-start',justifyContent:'space-between'}}>
                    <Text style={s.bigTitle}>{memory.pinned ? '📌 ' : ''}{memory.title}</Text>
                    <TouchableOpacity onPress={() => setEditing(true)} style={s.iconBtn}>
                      <Text style={s.iconBtnText}>✎</Text>
                    </TouchableOpacity>
                  </View>
                  <Text style={s.meta}>
                    {memory.type}{memory.category ? `  ·  [${memory.category}]` : ''}
                  </Text>
                  {(memory.tags || []).length > 0 ? (
                    <View style={s.tagsRow}>
                      {memory.tags.map(t => <Text key={t} style={s.tag}>{t}</Text>)}
                    </View>
                  ) : null}

                  <Text style={s.contentBlock}>{memory.content}</Text>

                  <Text style={s.sectionHead}>📎 Anhaenge</Text>
                  {(memory.attachments || []).length === 0 ? (
                    <Text style={{color:'#555570',fontStyle:'italic',fontSize:12}}>(keine)</Text>
                  ) : (
                    (memory.attachments || []).map((a) => {
                      const isImage = (a.mime || '').startsWith('image/');
                      return (
                        <View key={a.name} style={s.attRow}>
                          <TouchableOpacity style={{flexDirection:'row',alignItems:'center',gap:8,flex:1}} onPress={() => onTapAttachment(a)}>
                            <Text style={{fontSize:18}}>{isImage ? '🖼️' : '📄'}</Text>
                            <View style={{flex:1}}>
                              <Text style={{color:'#E0E0F0',fontSize:12}} numberOfLines={1}>{a.name}</Text>
                              <Text style={{color:'#555570',fontSize:10}}>{a.mime} · {Math.round(a.size/1024)} KB</Text>
                            </View>
                          </TouchableOpacity>
                          <TouchableOpacity onPress={() => onDeleteAttachment(a)} style={s.attDelete}>
                            <Text style={{color:'#FF6B6B',fontSize:12}}>🗑</Text>
                          </TouchableOpacity>
                        </View>
                      );
                    })
                  )}
                  <TouchableOpacity style={[s.btn,s.btnSecondary,{marginTop:8}]} onPress={onPickAndUpload}>
                    <Text style={s.btnText}>⬆ Datei anhaengen</Text>
                  </TouchableOpacity>
                  {busy ? <Text style={{color:'#8888AA',fontSize:11,marginTop:4}}>{busy}</Text> : null}

                  <Text style={s.timestamps}>
                    angelegt: {(memory.created_at || '').slice(0,16).replace('T',' ')}{'\n'}
                    geaendert: {(memory.updated_at || '').slice(0,16).replace('T',' ')}{'\n'}
                    id: {memory.id}
                  </Text>

                  <TouchableOpacity style={[s.btn,s.btnDanger,{marginTop:14}]} onPress={onDelete}>
                    <Text style={s.btnText}>🗑 Memory komplett loeschen</Text>
                  </TouchableOpacity>
                </View>
              )
            ) : null}
          </ScrollView>
        </View>
      </View>

      <Modal visible={!!fullscreen} transparent onRequestClose={() => setFullscreen(null)}>
        <TouchableOpacity style={s.fsBack} onPress={() => setFullscreen(null)}>
          {fullscreen ? <Image source={{uri:fullscreen}} style={s.fsImg} resizeMode="contain" /> : null}
        </TouchableOpacity>
      </Modal>
    </Modal>
  );
};

const s = StyleSheet.create({
  backdrop: { flex:1, backgroundColor:'rgba(0,0,0,0.75)', justifyContent:'flex-end' },
  box: { backgroundColor:'#0D0D1A', borderTopLeftRadius:12, borderTopRightRadius:12, maxHeight:'92%' },
  header: { flexDirection:'row', justifyContent:'space-between', alignItems:'center', padding:14, borderBottomColor:'#1E1E2E', borderBottomWidth:1 },
  title: { color:'#FFD60A', fontWeight:'bold', fontSize:15 },
  closeX: { color:'#8888AA', fontSize:24, paddingHorizontal:6 },
  body: { padding:14 },
  err: { color:'#FF6B6B', fontSize:12, marginTop:8 },
  label: { color:'#8888AA', fontSize:11, marginBottom:3, marginTop:8 },
  input: { backgroundColor:'#080810', borderColor:'#1E1E2E', borderWidth:1, borderRadius:4, padding:8, color:'#E0E0F0', fontSize:13 },
  bigTitle: { color:'#E0E0F0', fontWeight:'bold', fontSize:16, flex:1, marginRight:6 },
  iconBtn: { padding:6, backgroundColor:'#1E1E2E', borderRadius:6 },
  iconBtnText: { color:'#0096FF', fontSize:14 },
  meta: { color:'#8888AA', fontSize:11, marginTop:4 },
  tagsRow: { flexDirection:'row', flexWrap:'wrap', gap:4, marginTop:6 },
  tag: { backgroundColor:'#1E1E2E', color:'#8888AA', fontSize:10, paddingHorizontal:6, paddingVertical:2, borderRadius:8 },
  contentBlock: { color:'#E0E0F0', fontSize:13, marginTop:12, lineHeight:18 },
  sectionHead: { color:'#0096FF', fontSize:11, marginTop:14, marginBottom:6, textTransform:'uppercase', letterSpacing:0.5 },
  attRow: { flexDirection:'row', alignItems:'center', backgroundColor:'#080810', padding:8, borderRadius:6, marginBottom:4, gap:6 },
  attDelete: { padding:4 },
  timestamps: { color:'#555570', fontSize:10, marginTop:12, fontFamily:'monospace' },
  btn: { paddingVertical:10, paddingHorizontal:14, borderRadius:6, alignItems:'center' },
  btnPrimary: { backgroundColor:'#0096FF' },
  btnSecondary: { backgroundColor:'#1E1E2E' },
  btnDanger: { backgroundColor:'#3B1010', borderWidth:1, borderColor:'#FF6B6B' },
  btnText: { color:'#fff', fontSize:13, fontWeight:'600' },
  fsBack: { flex:1, backgroundColor:'rgba(0,0,0,0.95)', justifyContent:'center', alignItems:'center' },
  fsImg: { width:'95%', height:'85%' },
});

export default MemoryDetailModal;