import { Feather } from '@expo/vector-icons'; import { Stack, useLocalSearchParams, useRouter } from 'expo-router'; import React, { useEffect, useState } from 'react'; import { ActivityIndicator, Alert, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; export const unstable_settings = { headerShown: false, }; import { BackButton } from '@/components/ui/back-button'; import { DynamicFormField } from '@/components/forms/dynamic-form-field'; import { getTemplateById } from '@/lib/api/templates'; import { recordTokenUsage, getUserBalance } from '@/lib/api/balance'; import { runTemplate, pollTemplateGeneration } from '@/lib/api/template-runs'; import { uploadFile } from '@/lib/api/upload'; import { Template, TemplateGraphNode } from '@/lib/types/template'; import { TemplateGeneration } from '@/lib/types/template-run'; import { useAuth } from '@/hooks/use-auth'; const FALLBACK_PREVIEW = 'https://images.unsplash.com/photo-1542204165-0198c1e21a3b?auto=format&fit=crop&w=1200&q=80'; const FALLBACK_INSET = 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=640&q=80'; export default function TemplateFormScreen() { const { id } = useLocalSearchParams<{ id: string }>(); const router = useRouter(); const { session, isLoading: authLoading } = useAuth(); const [template, setTemplate] = useState