+import { Stack, useRouter } from 'expo-router';

+import { Pressable } from 'react-native';

+

+import { IconSymbol } from '@/components/ui/icon-symbol';

+import { Colors } from '@/constants/theme';

+import { useColorScheme } from '@/hooks/use-color-scheme';

+import { useTranslation } from '@/localization/i18n';

+

+export default function CostsLayout() {

+  const { t } = useTranslation();

+  const router = useRouter();

+  const colorScheme = useColorScheme();

+  const palette = Colors[colorScheme ?? 'light'];

+

+  return (

+    <Stack

+      screenOptions={{

+        headerBackTitleVisible: false,

+        headerBackTitle: '',

+        headerBackTitleStyle: { display: 'none' },

+        headerLeft: ({ canGoBack }) =>

+          canGoBack ? (

+            <Pressable onPress={() => router.back()} hitSlop={10} style={{ paddingHorizontal: 8 }}>

+              <IconSymbol size={20} name="chevron.left" color={palette.text} />

+            </Pressable>

+          ) : null,

+      }}>

+      <Stack.Screen

+        name="index"

+        options={{

+          title: t('costs.title'),

+          headerLeft: () => (

+            <Pressable onPress={() => router.back()} hitSlop={10} style={{ paddingHorizontal: 8 }}>

+              <IconSymbol size={20} name="chevron.left" color={palette.text} />

+            </Pressable>

+          ),

+        }}

+      />

+      <Stack.Screen name="new" options={{ title: t('costs.new') }} />

+      <Stack.Screen name="[id]" options={{ title: t('costs.edit') }} />

+    </Stack>

+  );

+}

+import { useCallback, useEffect, useMemo, useState } from 'react';

+  InteractionManager,

+import { ResizeMode, Video } from 'expo-av';

+import { ZoomImageModal } from '@/components/zoom-image-modal';

+import { useLocalSearchParams, useRouter } from 'expo-router';

+import { useFocusEffect, useNavigation } from '@react-navigation/native';

+  const router = useRouter();

+  const navigation = useNavigation();

+  const params = useLocalSearchParams<{ from?: string | string[] }>();

+  const fromParam = Array.isArray(params.from) ? params.from[0] : params.from;

+

+  useEffect(() => {

+    navigation.setOptions({

+      headerLeft: () => (

+        <Pressable

+          onPress={() => {

+            if (fromParam === 'logbook') {

+              router.replace('/logbook');

+              return;

+            }

+            if (fromParam === 'home') {

+              router.replace('/');

+              return;

+            }

+            router.back();

+          }}

+          hitSlop={10}

+          style={{ paddingHorizontal: 8 }}>

+          <IconSymbol name="chevron.left" size={20} color={palette.text} />

+        </Pressable>

+      ),

+    });

+  }, [fromParam, navigation, palette.text, router]);

+  const [zoomUri, setZoomUri] = useState<string | null>(null);

+  const [pendingZoomUri, setPendingZoomUri] = useState<string | null>(null);

+  const fetchCostsPage = useCallback(async () => {

+    try {

+      const db = await dbPromise;

+      const profileRow = await db.getFirstAsync<{ currency: string | null }>(

+        'SELECT currency FROM user_profile WHERE id = 1;'

+      );

+      const costRows = await db.getAllAsync<CostRow>(

+        `SELECT c.id, c.field_id, c.crop_id, c.category, c.amount, c.currency, c.vendor, c.notes,

+                c.spent_at, c.photo_uri, f.name as field_name, cr.crop_name as crop_name

+         FROM costs c

+         LEFT JOIN fields f ON f.id = c.field_id

+         LEFT JOIN crops cr ON cr.id = c.crop_id

+         ORDER BY c.spent_at DESC;`

+      );

+      setCurrency(profileRow?.currency ?? 'THB');

+      setCosts(costRows);

+      setStatus(costRows.length === 0 ? t('costs.empty') : '');

+    } catch (error) {

+      setStatus(`Error: ${String(error)}`);

+    }

+  }, [t]);

+

+  useFocusEffect(

+    useCallback(() => {

+      fetchCostsPage();

+    }, [fetchCostsPage])

+  );

+

+  useEffect(() => {

+    if (!newModalOpen && !editModalOpen && pendingZoomUri) {

+      const uri = pendingZoomUri;

+      setPendingZoomUri(null);

+      InteractionManager.runAfterInteractions(() => {

+        setTimeout(() => setZoomUri(uri), 150);

+      });

+    }

+  }, [newModalOpen, editModalOpen, pendingZoomUri]);

+

+    router.push(`/costs/${item.id}`);

+              {normalizeMediaUri(item.photo_uri) ? (

+                isVideoUri(normalizeMediaUri(item.photo_uri) as string) ? (

+                  <Video

+                    source={{ uri: normalizeMediaUri(item.photo_uri) as string }}

+                    style={styles.videoPreview}

+                    useNativeControls

+                    resizeMode={ResizeMode.CONTAIN}

+                    isMuted

+                  />

+                ) : (

+                  <Pressable onPress={() => setZoomUri(normalizeMediaUri(item.photo_uri) as string)}>

+                    <Image

+                      source={{ uri: normalizeMediaUri(item.photo_uri) as string }}

+                      style={styles.listPhoto}

+                      resizeMode="contain"

+                    />

+                  </Pressable>

+                )

+              <Pressable style={styles.newButton} onPress={() => router.push('/costs/new')}>

+                  <ThemedText>{t('costs.addMedia')}</ThemedText>

+                  {normalizeMediaUri(photoUri) ? (

+                    isVideoUri(normalizeMediaUri(photoUri) as string) ? (

+                      <Video

+                        source={{ uri: normalizeMediaUri(photoUri) as string }}

+                        style={styles.videoPreview}

+                        useNativeControls

+                        resizeMode={ResizeMode.CONTAIN}

+                        isMuted

+                      />

+                    ) : (

+                      <Pressable

+                        onPress={() => {

+                          setPendingZoomUri(normalizeMediaUri(photoUri) as string);

+                          setNewModalOpen(false);

+                        }}>

+                        <Image

+                          source={{ uri: normalizeMediaUri(photoUri) as string }}

+                          style={styles.photoPreview}

+                          resizeMode="contain"

+                        />

+                      </Pressable>

+                    )

+                      title={t('costs.pickFromGallery')}

+                      title={t('costs.takeMedia')}

+                  <ThemedText>{t('costs.addMedia')}</ThemedText>

+                  {normalizeMediaUri(editPhotoUri) ? (

+                    isVideoUri(normalizeMediaUri(editPhotoUri) as string) ? (

+                      <Video

+                        source={{ uri: normalizeMediaUri(editPhotoUri) as string }}

+                        style={styles.videoPreview}

+                        useNativeControls

+                        resizeMode={ResizeMode.CONTAIN}

+                        isMuted

+                      />

+                    ) : (

+                      <Pressable

+                        onPress={() => {

+                          setPendingZoomUri(normalizeMediaUri(editPhotoUri) as string);

+                          setEditModalOpen(false);

+                        }}>

+                        <Image

+                          source={{ uri: normalizeMediaUri(editPhotoUri) as string }}

+                          style={styles.photoPreview}

+                          resizeMode="contain"

+                        />

+                      </Pressable>

+                    )

+                      title={t('costs.pickFromGallery')}

+                      title={t('costs.takeMedia')}

+      <ZoomImageModal

+        uri={zoomUri}

+        visible={Boolean(zoomUri)}

+        onClose={() => setZoomUri(null)}

+      />

+    mediaTypes: getMediaTypes(),

+    const result = await ImagePicker.launchCameraAsync({

+      mediaTypes: getMediaTypes(),

+      quality: 1,

+    });

+function getMediaTypes() {

+  const mediaType = (ImagePicker as {

+    MediaType?: { Image?: unknown; Images?: unknown; Video?: unknown; Videos?: unknown };

+  }).MediaType;

+  const imageType = mediaType?.Image ?? mediaType?.Images;

+  const videoType = mediaType?.Video ?? mediaType?.Videos;

+  if (imageType && videoType) {

+    return [imageType, videoType];

+  }

+  return imageType ?? videoType ?? ['images', 'videos'];

+}

+

+function isVideoUri(uri: string) {

+  return /\.(mp4|mov|m4v|webm|avi|mkv)(\?.*)?$/i.test(uri);

+}

+

+function normalizeMediaUri(uri?: string | null) {

+  if (typeof uri !== 'string') return null;

+  const trimmed = uri.trim();

+  return trimmed ? trimmed : null;

+    height: 200,

+    height: 160,

+  videoPreview: {

+    width: '100%',

+    height: 200,

+    borderRadius: 12,

+    backgroundColor: '#1C1C1C',

+  },

+import { useEffect, useMemo, useState } from 'react';

+import {

+  Image,

+  KeyboardAvoidingView,

+  Modal,

+  Platform,

+  Pressable,

+  ScrollView,

+  StyleSheet,

+  TextInput,

+  View,

+} from 'react-native';

+import * as ImagePicker from 'expo-image-picker';

+import DateTimePicker from '@react-native-community/datetimepicker';

+import { ResizeMode, Video } from 'expo-av';

+import { useRouter } from 'expo-router';

+

+import { ThemedButton } from '@/components/themed-button';

+import { ThemedText } from '@/components/themed-text';

+import { ThemedView } from '@/components/themed-view';

+import { ZoomImageModal } from '@/components/zoom-image-modal';

+import { Colors } from '@/constants/theme';

+import { useColorScheme } from '@/hooks/use-color-scheme';

+import { useTranslation } from '@/localization/i18n';

+import { dbPromise, initCoreTables } from '@/services/db';

+

+const CATEGORY_PRESETS = ['seed', 'fertilizer', 'labor', 'fuel', 'equipment', 'transport', 'misc'];

+

+type FieldRow = {

+  id: number;

+  name: string | null;

+};

+

+type CropRow = {

+  id: number;

+  crop_name: string | null;

+};

+

+export default function NewCostScreen() {

+  const { t } = useTranslation();

+  const router = useRouter();

+  const theme = useColorScheme() ?? 'light';

+  const palette = Colors[theme];

+

+  const [status, setStatus] = useState('');

+  const [fields, setFields] = useState<FieldRow[]>([]);

+  const [crops, setCrops] = useState<CropRow[]>([]);

+  const [currency, setCurrency] = useState('THB');

+  const [fieldModalOpen, setFieldModalOpen] = useState(false);

+  const [cropModalOpen, setCropModalOpen] = useState(false);

+  const [selectedFieldId, setSelectedFieldId] = useState<number | null>(null);

+  const [selectedCropId, setSelectedCropId] = useState<number | null>(null);

+  const [category, setCategory] = useState('');

+  const [amount, setAmount] = useState('');

+  const [vendor, setVendor] = useState('');

+  const [notes, setNotes] = useState('');

+  const [spentDate, setSpentDate] = useState('');

+  const [showSpentPicker, setShowSpentPicker] = useState(false);

+  const [mediaUris, setMediaUris] = useState<string[]>([]);

+  const [activeUri, setActiveUri] = useState<string | null>(null);

+  const [errors, setErrors] = useState<{ field?: string; amount?: string }>({});

+  const [zoomUri, setZoomUri] = useState<string | null>(null);

+  const [saving, setSaving] = useState(false);

+

+  useEffect(() => {

+    let isActive = true;

+

+    async function loadData() {

+      try {

+        await initCoreTables();

+        const db = await dbPromise;

+        const fieldRows = await db.getAllAsync<FieldRow>('SELECT id, name FROM fields ORDER BY name ASC;');

+        const cropRows = await db.getAllAsync<CropRow>('SELECT id, crop_name FROM crops ORDER BY crop_name ASC;');

+        const profileRow = await db.getFirstAsync<{ currency: string | null }>(

+          'SELECT currency FROM user_profile WHERE id = 1;'

+        );

+        if (!isActive) return;

+        setFields(fieldRows);

+        setCrops(cropRows);

+        setCurrency(profileRow?.currency ?? 'THB');

+      } catch (error) {

+        if (isActive) setStatus(`Error: ${String(error)}`);

+      }

+    }

+

+    loadData();

+    return () => {

+      isActive = false;

+    };

+  }, [t]);

+

+  const selectedField = useMemo(

+    () => fields.find((item) => item.id === selectedFieldId),

+    [fields, selectedFieldId]

+  );

+  const selectedCrop = useMemo(

+    () => crops.find((item) => item.id === selectedCropId),

+    [crops, selectedCropId]

+  );

+

+  const inputStyle = [

+    styles.input,

+    {

+      borderColor: palette.border,

+      backgroundColor: palette.input,

+      color: palette.text,

+    },

+  ];

+

+  async function handleSave() {

+    const parsedAmount = amount.trim() ? Number(amount) : null;

+    const nextErrors: { field?: string; amount?: string } = {};

+    if (!selectedFieldId) nextErrors.field = t('costs.fieldRequired');

+    if (!parsedAmount || !Number.isFinite(parsedAmount)) nextErrors.amount = t('costs.amountInvalid');

+    setErrors(nextErrors);

+    if (Object.keys(nextErrors).length > 0) return;

+    try {

+      setSaving(true);

+      const db = await dbPromise;

+      const now = new Date().toISOString();

+      const primaryUri = mediaUris[0] ?? normalizeMediaUri(activeUri);

+      const result = await db.runAsync(

+        'INSERT INTO costs (field_id, crop_id, category, amount, currency, vendor, notes, spent_at, photo_uri, created_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?);',

+        selectedFieldId,

+        selectedCropId,

+        category.trim() || null,

+        parsedAmount,

+        currency,

+        vendor.trim() || null,

+        notes.trim() || null,

+        spentDate || null,

+        primaryUri ?? null,

+        now

+      );

+      const costId = Number(result.lastInsertRowId);

+      if (costId) {

+        const mediaToInsert = uniqueMediaUris([

+          ...mediaUris,

+          ...(normalizeMediaUri(activeUri) ? [normalizeMediaUri(activeUri) as string] : []),

+        ]);

+        for (const uri of mediaToInsert) {

+          await db.runAsync(

+            'INSERT INTO cost_media (cost_id, uri, media_type, created_at) VALUES (?, ?, ?, ?);',

+            costId,

+            uri,

+            isVideoUri(uri) ? 'video' : 'image',

+            now

+          );

+        }

+      }

+      setStatus(t('costs.saved'));

+      router.back();

+    } catch (error) {

+      setStatus(`Error: ${String(error)}`);

+    } finally {

+      setSaving(false);

+    }

+  }

+

+  return (

+    <ThemedView style={[styles.container, { backgroundColor: palette.background }]}>

+      <KeyboardAvoidingView

+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}

+        style={styles.keyboardAvoid}>

+        <ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">

+          <ThemedText type="title">{t('costs.new')}</ThemedText>

+          {status ? <ThemedText>{status}</ThemedText> : null}

+

+          <ThemedText>

+            {t('costs.field')}

+            <ThemedText style={styles.requiredMark}> *</ThemedText>

+          </ThemedText>

+          <ThemedButton

+            title={selectedField?.name || t('costs.selectField')}

+            onPress={() => setFieldModalOpen(true)}

+            variant="secondary"

+          />

+          {errors.field ? <ThemedText style={styles.errorText}>{errors.field}</ThemedText> : null}

+

+          <ThemedText>{t('costs.crop')}</ThemedText>

+          <ThemedButton

+            title={selectedCrop?.crop_name || t('costs.selectCrop')}

+            onPress={() => setCropModalOpen(true)}

+            variant="secondary"

+          />

+

+          <ThemedText>{t('costs.category')}</ThemedText>

+          <View style={styles.chipRow}>

+            {CATEGORY_PRESETS.map((preset) => {

+              const label = t(`costs.category.${preset}`);

+              const isActive = label === category || preset === category;

+              return (

+                <Pressable

+                  key={preset}

+                  style={[styles.chip, isActive ? styles.chipActive : null]}

+                  onPress={() => setCategory(label)}>

+                  <ThemedText style={styles.chipText}>{label}</ThemedText>

+                </Pressable>

+              );

+            })}

+          </View>

+          <TextInput

+            value={category}

+            onChangeText={setCategory}

+            placeholder={t('costs.categoryPlaceholder')}

+            placeholderTextColor={palette.placeholder}

+            style={inputStyle}

+          />

+

+          <ThemedText>

+            {t('costs.amount')} ({currency})

+            <ThemedText style={styles.requiredMark}> *</ThemedText>

+          </ThemedText>

+          <TextInput

+            value={amount}

+            onChangeText={(value) => {

+              setAmount(value);

+              if (errors.amount) setErrors((prev) => ({ ...prev, amount: undefined }));

+            }}

+            placeholder={t('costs.amountPlaceholder')}

+            placeholderTextColor={palette.placeholder}

+            style={inputStyle}

+            keyboardType="decimal-pad"

+          />

+          {errors.amount ? <ThemedText style={styles.errorText}>{errors.amount}</ThemedText> : null}

+

+          <ThemedText>{t('costs.vendor')}</ThemedText>

+          <TextInput

+            value={vendor}

+            onChangeText={setVendor}

+            placeholder={t('costs.vendorPlaceholder')}

+            placeholderTextColor={palette.placeholder}

+            style={inputStyle}

+          />

+

+          <ThemedText>{t('costs.date')}</ThemedText>

+          <Pressable onPress={() => setShowSpentPicker(true)} style={styles.dateInput}>

+            <ThemedText style={styles.dateValue}>

+              {spentDate || t('costs.datePlaceholder')}

+            </ThemedText>

+          </Pressable>

+          {showSpentPicker ? (

+            <DateTimePicker

+              value={spentDate ? new Date(spentDate) : new Date()}

+              mode="date"

+              onChange={(event, date) => {

+                setShowSpentPicker(false);

+                if (date) setSpentDate(toDateOnly(date));

+              }}

+            />

+          ) : null}

+

+          <ThemedText>{t('costs.notes')}</ThemedText>

+          <TextInput

+            value={notes}

+            onChangeText={setNotes}

+            placeholder={t('costs.notesPlaceholder')}

+            placeholderTextColor={palette.placeholder}

+            style={[inputStyle, styles.multiline]}

+            multiline

+          />

+

+          <ThemedText>{t('costs.addMedia')}</ThemedText>

+          {normalizeMediaUri(activeUri) ? (

+            isVideoUri(normalizeMediaUri(activeUri) as string) ? (

+              <Video

+                source={{ uri: normalizeMediaUri(activeUri) as string }}

+                style={styles.mediaPreview}

+                useNativeControls

+                resizeMode={ResizeMode.CONTAIN}

+              />

+            ) : (

+              <Pressable onPress={() => setZoomUri(normalizeMediaUri(activeUri) as string)}>

+                <Image source={{ uri: normalizeMediaUri(activeUri) as string }} style={styles.mediaPreview} resizeMode="contain" />

+              </Pressable>

+            )

+          ) : (

+            <ThemedView style={[styles.mediaPlaceholder, { borderColor: palette.border }]}>

+              <ThemedText style={styles.mediaPlaceholderText}>{t('costs.noPhoto')}</ThemedText>

+            </ThemedView>

+          )}

+          {mediaUris.length > 0 ? (

+            <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.mediaRow}>

+              {mediaUris.map((uri) => (

+                <Pressable

+                  key={uri}

+                  style={styles.mediaThumbWrap}

+                  onPress={() => setActiveUri(uri)}>

+                  {isVideoUri(uri) ? (

+                    <Video

+                      source={{ uri }}

+                      style={styles.mediaThumb}

+                      resizeMode={ResizeMode.COVER}

+                      isMuted

+                    />

+                  ) : (

+                    <Image source={{ uri }} style={styles.mediaThumb} resizeMode="cover" />

+                  )}

+                  <Pressable

+                    style={styles.mediaRemove}

+                    onPress={() => {

+                      setMediaUris((prev) => {

+                        const next = prev.filter((item) => item !== uri);

+                        if (activeUri === uri) setActiveUri(next[0] ?? null);

+                        return next;

+                      });

+                    }}>

+                    <ThemedText style={styles.mediaRemoveText}>×</ThemedText>

+                  </Pressable>

+                </Pressable>

+              ))}

+            </ScrollView>

+          ) : null}

+

+          <View style={styles.mediaButtons}>

+            <ThemedButton

+              title={t('costs.pickFromGallery')}

+              onPress={() =>

+                handlePickMedia((uris) => {

+                  setMediaUris((prev) => uniqueMediaUris([...prev, ...uris]));

+                  if (!activeUri && uris[0]) setActiveUri(uris[0]);

+                })

+              }