managarten/chat/apps/mobile/app/templates.tsx

import React, { useState, useEffect, useCallback } from 'react';
import { 
  View, 
  Text, 
  StyleSheet, 
  FlatList, 
  TouchableOpacity, 
  SafeAreaView, 
  Alert,
  Modal,
  ActivityIndicator
} from 'react-native';
import { useTheme, useFocusEffect } from '@react-navigation/native';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useAuth } from '../context/AuthProvider';
import { useAppTheme } from '../theme/ThemeProvider';

import TemplateCard from '../components/TemplateCard';
import TemplateForm from '../components/TemplateForm';
import CustomDrawer from '../components/CustomDrawer';
import { 
  Template, 
  getTemplates, 
  createTemplate, 
  updateTemplate,
  deleteTemplate, 
  setDefaultTemplate 
} from '../services/template';

export default function TemplatesScreen() {
  const { colors } = useTheme();
  const router = useRouter();
  const { user } = useAuth();
  const { isDarkMode } = useAppTheme();
  
  const [templates, setTemplates] = useState<Template[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isFormModalVisible, setIsFormModalVisible] = useState(false);
  const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  
  // Lade die Vorlagen
  const loadTemplates = async () => {
    if (!user) return;
    
    setIsLoading(true);
    try {
      const userTemplates = await getTemplates(user.id);
      setTemplates(userTemplates);
    } catch (error) {
      console.error('Fehler beim Laden der Vorlagen:', error);
      Alert.alert('Fehler', 'Die Vorlagen konnten nicht geladen werden.');
    } finally {
      setIsLoading(false);
    }
  };
  
  // Lade Vorlagen beim ersten Laden und wenn der Benutzer sich ändert
  useEffect(() => {
    loadTemplates();
  }, [user]);
  
  // Lade Vorlagen erneut, wenn der Screen fokussiert wird
  useFocusEffect(
    useCallback(() => {
      if (user) loadTemplates();
      return () => {};
    }, [user])
  );
  
  // Öffne das Formular zum Erstellen einer neuen Vorlage
  const handleCreateTemplate = () => {
    setSelectedTemplate(null);
    setIsFormModalVisible(true);
  };
  
  // Öffne das Formular zum Bearbeiten einer Vorlage
  const handleEditTemplate = (id: string) => {
    const template = templates.find(t => t.id === id);
    if (template) {
      setSelectedTemplate(template);
      setIsFormModalVisible(true);
    }
  };
  
  // Lösche eine Vorlage nach Bestätigung
  const handleDeleteTemplate = (id: string) => {
    Alert.alert(
      "Vorlage löschen",
      "Möchtest du diese Vorlage wirklich löschen?",
      [
        {
          text: "Abbrechen",
          style: "cancel"
        },
        {
          text: "Löschen",
          style: "destructive",
          onPress: async () => {
            try {
              const success = await deleteTemplate(id);
              if (success) {
                setTemplates(prev => prev.filter(t => t.id !== id));
              } else {
                Alert.alert("Fehler", "Die Vorlage konnte nicht gelöscht werden.");
              }
            } catch (error) {
              console.error('Fehler beim Löschen der Vorlage:', error);
              Alert.alert("Fehler", "Die Vorlage konnte nicht gelöscht werden.");
            }
          }
        }
      ]
    );
  };
  
  // Setze eine Vorlage als Standard
  const handleSetDefaultTemplate = async (id: string) => {
    if (!user) return;
    
    try {
      const success = await setDefaultTemplate(id, user.id);
      if (success) {
        // Aktualisiere den lokalen Zustand, um die Änderungen anzuzeigen
        setTemplates(prev => 
          prev.map(t => ({
            ...t,
            is_default: t.id === id
          }))
        );
      } else {
        Alert.alert("Fehler", "Die Standardvorlage konnte nicht gesetzt werden.");
      }
    } catch (error) {
      console.error('Fehler beim Setzen der Standardvorlage:', error);
      Alert.alert("Fehler", "Die Standardvorlage konnte nicht gesetzt werden.");
    }
  };
  
  // Speichert eine neue oder bearbeitete Vorlage
  const handleSubmitTemplate = async (templateData: Partial<Template>) => {
    if (!user) return;
    
    try {
      // Prüfe, ob wir eine bestehende Vorlage bearbeiten oder eine neue erstellen
      if (templateData.id) {
        // Aktualisiere eine bestehende Vorlage
        const success = await updateTemplate(templateData.id, {
          name: templateData.name,
          description: templateData.description,
          system_prompt: templateData.system_prompt,
          initial_question: templateData.initial_question,
          color: templateData.color,
          model_id: templateData.model_id,
          document_mode: templateData.document_mode
        });
        
        if (success) {
          setTemplates(prev => 
            prev.map(t => 
              t.id === templateData.id 
                ? { ...t, ...templateData }
                : t
            )
          );
        } else {
          Alert.alert("Fehler", "Die Vorlage konnte nicht aktualisiert werden.");
        }
      } else {
        // Erstelle eine neue Vorlage
        const newTemplate = await createTemplate({
          user_id: user.id,
          name: templateData.name!,
          description: templateData.description,
          system_prompt: templateData.system_prompt!,
          initial_question: templateData.initial_question,
          color: templateData.color!,
          model_id: templateData.model_id,
          is_default: false,
          document_mode: templateData.document_mode || false,
        });
        
        if (newTemplate) {
          setTemplates(prev => [...prev, newTemplate]);
        } else {
          Alert.alert("Fehler", "Die Vorlage konnte nicht erstellt werden.");
        }
      }
      
      // Schließe das Modal
      setIsFormModalVisible(false);
    } catch (error) {
      console.error('Fehler beim Speichern der Vorlage:', error);
      Alert.alert("Fehler", "Die Vorlage konnte nicht gespeichert werden.");
    }
  };
  
  // Starte einen neuen Chat mit einer Vorlage
  const handleUseTemplate = (id: string) => {
    const template = templates.find(t => t.id === id);
    if (template) {
      // Erstelle einen neuen Chat mit dieser Vorlage
      router.push({
        pathname: '/conversation/new',
        params: {
          templateId: template.id,
          mode: 'template',
          documentMode: template.document_mode ? 'true' : 'false'
        }
      });
    }
  };
  
  return (
    <SafeAreaView style={[styles.container, { backgroundColor: colors.background }]}>
      <View style={styles.mainLayout}>
        {/* Drawer / Seitenmenü */}
        {isDrawerOpen && (
          <View style={styles.drawerContainer}>
            <CustomDrawer 
              isVisible={isDrawerOpen}
              onClose={() => setIsDrawerOpen(false)}
            />
          </View>
        )}
        
        {/* Hauptinhalt */}
        <View style={styles.mainContainer}>
          <View style={styles.contentContainer}>
            <View style={styles.header}>
              <TouchableOpacity
                style={styles.menuButton}
                onPress={() => setIsDrawerOpen(!isDrawerOpen)}
              >
                <Ionicons 
                  name="menu-outline"
                  size={28} 
                  color={colors.text} 
                />
              </TouchableOpacity>
              
              <Text style={[styles.title, { color: colors.text }]}>Vorlagen</Text>
              
              <TouchableOpacity 
                style={[styles.addButton, { backgroundColor: colors.primary }]}
                onPress={handleCreateTemplate}
              >
                <Ionicons name="add" size={20} color="white" />
                <Text style={styles.addButtonText}>Neue Vorlage</Text>
              </TouchableOpacity>
            </View>
        
            {/* Beschreibung */}
            <View style={styles.descriptionContainer}>
              <Text style={[styles.description, { color: colors.text + 'CC' }]}>
                Erstelle Vorlagen mit benutzerdefinierten System-Prompts für verschiedene KI-Verhaltensweisen.
              </Text>
            </View>
        
            {/* Vorlagenliste */}
            {isLoading ? (
              <View style={styles.loadingContainer}>
                <ActivityIndicator size="large" color={colors.primary} />
                <Text style={[styles.loadingText, { color: colors.text + '80' }]}>
                  Vorlagen werden geladen...
                </Text>
              </View>
            ) : templates.length > 0 ? (
              <FlatList
                data={templates}
                keyExtractor={(item) => item.id}
                renderItem={({ item }) => (
                  <TemplateCard
                    id={item.id}
                    name={item.name}
                    description={item.description}
                    systemPrompt={item.system_prompt}
                    color={item.color}
                    isDefault={item.is_default}
                    onPress={handleUseTemplate}
                    onEdit={handleEditTemplate}
                    onDelete={handleDeleteTemplate}
                    onSetDefault={handleSetDefaultTemplate}
                  />
                )}
                contentContainerStyle={styles.listContent}
              />
            ) : (
              <View style={styles.emptyContainer}>
                <Ionicons 
                  name="document-text-outline" 
                  size={64} 
                  color={colors.text + '40'} 
                />
                <Text style={[styles.emptyText, { color: colors.text + '80' }]}>
                  Keine Vorlagen vorhanden
                </Text>
                <Text style={[styles.emptySubtext, { color: colors.text + '60' }]}>
                  Erstelle deine erste Vorlage, um loszulegen
                </Text>
              </View>
            )}
            
            {/* Modal für das Erstellen/Bearbeiten von Vorlagen */}
            <Modal
              visible={isFormModalVisible}
              animationType="slide"
              transparent={false}
              onRequestClose={() => setIsFormModalVisible(false)}
            >
              <SafeAreaView style={styles.modalContainer}>
                <TemplateForm
                  initialData={selectedTemplate || undefined}
                  onSubmit={handleSubmitTemplate}
                  onCancel={() => setIsFormModalVisible(false)}
                />
              </SafeAreaView>
            </Modal>
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  mainLayout: {
    flex: 1,
    flexDirection: 'row',
  },
  mainContainer: {
    flex: 1,
    alignItems: 'center',
  },
  drawerContainer: {
    width: 260,
    height: '100%',
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    zIndex: 10,
  },
  contentContainer: {
    flex: 1,
    maxWidth: 1200,
    width: '100%',
  },
  header: {
    paddingHorizontal: 20,
    paddingTop: 16,
    paddingBottom: 8,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    maxWidth: 800,
    width: '100%',
    alignSelf: 'center',
  },
  menuButton: {
    padding: 8,
    marginRight: 8,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    flex: 1,
    marginLeft: 8,
  },
  addButton: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 20,
  },
  addButtonText: {
    color: 'white',
    fontWeight: '500',
    marginLeft: 4,
  },
  descriptionContainer: {
    paddingHorizontal: 20,
    marginBottom: 16,
    maxWidth: 800,
    width: '100%',
    alignSelf: 'center',
  },
  description: {
    fontSize: 14,
  },
  listContent: {
    padding: 16,
    paddingHorizontal: 20,
    paddingBottom: 120,
    maxWidth: 800,
    width: '100%',
    alignSelf: 'center',
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 40,
  },
  loadingText: {
    marginTop: 16,
    fontSize: 16,
  },
  emptyContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 32,
    paddingTop: 40,
    height: 300,
  },
  emptyText: {
    fontSize: 18,
    fontWeight: '600',
    marginTop: 16,
    textAlign: 'center',
  },
  emptySubtext: {
    fontSize: 14,
    marginTop: 8,
    textAlign: 'center',
  },
  modalContainer: {
    flex: 1,
  },
});