import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react'
import {
  ActivityIndicator,
  Alert,
  FlatList,
  KeyboardAvoidingView,
  Modal,
  Platform,
  Pressable,
  RefreshControl,
  StyleSheet,
  Switch,
  TextInput,
  View,
} from 'react-native'
import { useIsFocused } from '@react-navigation/native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useI18n, type TranslationKey } from '@d3ro/i18n'
import type {
  DictationTemplateField,
  TemplateKind,
  UserTemplate,
  UserTemplateSelection,
} from '@d3ro/api-client'
import { useAuth } from '../lib/auth-context'
import { useMobilePreferences } from '../lib/preferences-context'
import { ThemeButton, ThemeCard, ThemeText } from '../theme/themed-components'
import {
  createTemplate,
  deleteTemplate,
  loadTemplateLibrary,
  normalizeTemplateDraft,
  selectTemplate,
  subscribeToTemplates,
  TemplateServiceError,
  type TemplateServiceErrorCode,
  updateTemplate,
} from '../features/templates'

interface TemplatesScreenProps {
  initialKind?: TemplateKind
  onSelectTemplate?: (template: UserTemplate) => void
}

interface TemplateEditor {
  source: UserTemplate | null
  kind: TemplateKind
  name: string
  description: string
  fields: DictationTemplateField[]
  outputFormat: string
  systemPrompt: string
}

const NEW_FIELD: DictationTemplateField = {
  id: 'content',
  name: 'content',
  label: 'Content',
  promptText: 'What would you like to dictate?',
  required: true,
  maxDurationSec: 120,
}

function blankEditor(kind: TemplateKind): TemplateEditor {
  return {
    source: null,
    kind,
    name: '',
    description: '',
    fields: kind === 'dictation' ? [{ ...NEW_FIELD }] : [],
    outputFormat: kind === 'dictation' ? '{{content}}' : '',
    systemPrompt: '',
  }
}

function editorFor(template: UserTemplate): TemplateEditor {
  return {
    source: template,
    kind: template.template_kind,
    name: template.name,
    description: template.description ?? '',
    fields: template.fields.map((field) => ({ ...field })),
    outputFormat: template.output_format ?? '',
    systemPrompt: template.system_prompt ?? '',
  }
}

function errorKey(code: TemplateServiceErrorCode): TranslationKey {
  switch (code) {
    case 'auth': return 'mobile.templates.error.auth'
    case 'builtin': return 'mobile.templates.error.builtin'
    case 'conflict': return 'mobile.templates.error.conflict'
    case 'forbidden': return 'mobile.templates.error.forbidden'
    case 'in-progress': return 'mobile.templates.error.inProgress'
    case 'network': return 'mobile.templates.error.network'
    case 'not-found': return 'mobile.templates.error.notFound'
    case 'provider': return 'mobile.templates.error.provider'
    case 'quota': return 'mobile.templates.error.quota'
    case 'validation': return 'mobile.templates.error.validation'
    default: return 'mobile.templates.error.server'
  }
}

function kindKey(kind: TemplateKind): TranslationKey {
  return kind === 'dictation'
    ? 'mobile.templates.kind.dictation'
    : 'mobile.templates.kind.meetingDocument'
}

function toServiceError(error: unknown): TemplateServiceError {
  return error instanceof TemplateServiceError
    ? error
    : new TemplateServiceError('server', 'Template operation failed', true)
}

export default function TemplatesScreen({
  initialKind = 'dictation',
  onSelectTemplate,
}: TemplatesScreenProps): React.ReactElement {
  const insets = useSafeAreaInsets()
  const isFocused = useIsFocused()
  const { t } = useI18n()
  const { user } = useAuth()
  const { palette } = useMobilePreferences()
  const styles = useMemo(() => createStyles(palette), [palette])
  const generation = useRef(0)
  const realtimeTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
  const [kind, setKind] = useState<TemplateKind>(initialKind)
  const [search, setSearch] = useState('')
  const [debouncedSearch, setDebouncedSearch] = useState('')
  const [templates, setTemplates] = useState<UserTemplate[]>([])
  const [selections, setSelections] = useState<Partial<Record<TemplateKind, UserTemplateSelection>>>({})
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)
  const [error, setError] = useState<TemplateServiceErrorCode | null>(null)
  const [realtimeConnected, setRealtimeConnected] = useState(true)
  const [editor, setEditor] = useState<TemplateEditor | null>(null)
  const [editorError, setEditorError] = useState<TemplateServiceErrorCode | null>(null)
  const [saving, setSaving] = useState(false)
  const [busyId, setBusyId] = useState<string | null>(null)

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedSearch(search), 300)
    return () => clearTimeout(timer)
  }, [search])

  const load = useCallback(async (pullToRefresh = false): Promise<void> => {
    const userId = user?.id
    const request = ++generation.current
    if (userId === undefined) {
      setLoading(false)
      setError('auth')
      return
    }
    if (pullToRefresh) setRefreshing(true)
    else setLoading(true)
    try {
      const library = await loadTemplateLibrary(userId, kind, debouncedSearch)
      if (request !== generation.current) return
      setTemplates(library.templates)
      setSelections(library.selections)
      setError(null)
    } catch (candidate) {
      if (request !== generation.current) return
      setError(toServiceError(candidate).code)
    } finally {
      if (request === generation.current) {
        setLoading(false)
        setRefreshing(false)
      }
    }
  }, [debouncedSearch, kind, user?.id])

  useEffect(() => {
    if (!isFocused) return
    void load()
  }, [isFocused, load])

  useEffect(() => {
    if (user?.id === undefined) return undefined
    const subscription = subscribeToTemplates(
      user.id,
      () => {
        if (realtimeTimer.current !== null) clearTimeout(realtimeTimer.current)
        realtimeTimer.current = setTimeout(() => void load(), 120)
      },
      (status) => setRealtimeConnected(status === 'SUBSCRIBED'),
    )
    return () => {
      if (realtimeTimer.current !== null) clearTimeout(realtimeTimer.current)
      void subscription.unsubscribe()
    }
  }, [load, user?.id])

  const openCreate = useCallback((): void => {
    setEditor(blankEditor(kind))
    setEditorError(null)
  }, [kind])

  const closeEditor = useCallback((): void => {
    if (saving) return
    setEditor(null)
    setEditorError(null)
  }, [saving])

  const saveEditor = useCallback(async (): Promise<void> => {
    if (editor === null || user?.id === undefined || saving) return
    const draft = {
      name: editor.name,
      description: editor.description,
      fields: editor.fields,
      outputFormat: editor.outputFormat,
      systemPrompt: editor.systemPrompt,
    }
    try {
      normalizeTemplateDraft(editor.kind, draft)
    } catch (candidate) {
      setEditorError(toServiceError(candidate).code)
      return
    }
    setSaving(true)
    setEditorError(null)
    try {
      if (editor.source === null) await createTemplate(user.id, editor.kind, draft)
      else await updateTemplate(user.id, editor.source, draft)
      setEditor(null)
      await load()
    } catch (candidate) {
      setEditorError(toServiceError(candidate).code)
    } finally {
      setSaving(false)
    }
  }, [editor, load, saving, user?.id])

  const choose = useCallback(async (template: UserTemplate): Promise<void> => {
    if (user?.id === undefined || busyId !== null) return
    const previous = selections[template.template_kind]
    const optimistic: UserTemplateSelection = {
      user_id: user.id,
      template_kind: template.template_kind,
      template_id: template.id,
      revision: (previous?.revision ?? 0) + 1,
      updated_at: new Date().toISOString(),
    }
    setBusyId(template.id)
    setSelections((current) => ({ ...current, [template.template_kind]: optimistic }))
    try {
      const saved = await selectTemplate(user.id, template, previous)
      setSelections((current) => ({ ...current, [template.template_kind]: saved }))
      setError(null)
      onSelectTemplate?.(template)
    } catch (candidate) {
      setSelections((current) => {
        const next = { ...current }
        if (previous === undefined) delete next[template.template_kind]
        else next[template.template_kind] = previous
        return next
      })
      setError(toServiceError(candidate).code)
    } finally {
      setBusyId(null)
    }
  }, [busyId, onSelectTemplate, selections, user?.id])

  const confirmDelete = useCallback((template: UserTemplate): void => {
    if (template.is_builtin || user?.id === undefined || busyId !== null) return
    Alert.alert(
      t('mobile.templates.deleteTitle'),
      t('mobile.templates.deleteBody', { name: template.name }),
      [
        { text: t('common.cancel'), style: 'cancel' },
        {
          text: t('mobile.templates.delete'),
          style: 'destructive',
          onPress: () => {
            setBusyId(template.id)
            void deleteTemplate(user.id, template)
              .then(() => load())
              .catch((candidate: unknown) => setError(toServiceError(candidate).code))
              .finally(() => setBusyId(null))
          },
        },
      ],
    )
  }, [busyId, load, t, user?.id])

  const updateField = useCallback((index: number, patch: Partial<DictationTemplateField>): void => {
    setEditor((current) => current === null ? null : {
      ...current,
      fields: current.fields.map((field, fieldIndex) => fieldIndex === index
        ? { ...field, ...patch }
        : field),
    })
  }, [])

  const removeField = useCallback((index: number): void => {
    setEditor((current) => current === null ? null : {
      ...current,
      fields: current.fields.filter((_, fieldIndex) => fieldIndex !== index),
    })
  }, [])

  const addField = useCallback((): void => {
    setEditor((current) => {
      if (current === null) return null
      const number = current.fields.length + 1
      return {
        ...current,
        fields: [...current.fields, {
          ...NEW_FIELD,
          id: `field_${number}`,
          name: `field_${number}`,
          label: `Field ${number}`,
        }],
      }
    })
  }, [])

  const renderTemplate = useCallback(({ item }: { item: UserTemplate }): React.ReactElement => {
    const selected = selections[item.template_kind]?.template_id === item.id
    const busy = busyId === item.id
    return (
      <ThemeCard
        style={[styles.card, selected && styles.cardSelected]}
        testID={`template-${item.id}`}
      >
        <View style={styles.cardHeader}>
          <View style={styles.cardTitle}>
            <View style={styles.titleRow}>
              <ThemeText variant="title" accessibilityRole="header">{item.name}</ThemeText>
              {item.is_builtin && (
                <View style={styles.badge}>
                  <ThemeText variant="label" color="accent">{t('mobile.templates.builtin')}</ThemeText>
                </View>
              )}
            </View>
            {item.description !== null && <ThemeText color="muted">{item.description}</ThemeText>}
          </View>
          {selected && <ThemeText color="accent">{t('mobile.templates.selected')}</ThemeText>}
        </View>
        <ThemeText variant="small" color="muted">
          {item.template_kind === 'dictation'
            ? t('mobile.templates.fieldCount', { count: item.fields.length })
            : t('mobile.templates.documentType', { type: item.template_type ?? 'custom' })}
        </ThemeText>
        <View style={styles.actions}>
          <ThemeButton
            label={busy ? t('mobile.templates.selecting') : t('mobile.templates.select')}
            disabled={busyId !== null || selected}
            onPress={() => void choose(item)}
            style={styles.flexButton}
            testID={`template-select-${item.id}`}
          />
          {!item.is_builtin && (
            <ThemeButton
              label={t('mobile.templates.edit')}
              variant="secondary"
              disabled={busyId !== null}
              onPress={() => setEditor(editorFor(item))}
              style={styles.flexButton}
              testID={`template-edit-${item.id}`}
            />
          )}
          {!item.is_builtin && (
            <ThemeButton
              label={t('mobile.templates.delete')}
              variant="danger"
              disabled={busyId !== null}
              onPress={() => confirmDelete(item)}
              style={styles.flexButton}
              testID={`template-delete-${item.id}`}
            />
          )}
        </View>
      </ThemeCard>
    )
  }, [busyId, choose, confirmDelete, selections, styles, t])

  const empty = loading ? (
    <View style={styles.center} testID="templates-loading">
      <ActivityIndicator color={palette.accent.main} />
      <ThemeText color="muted">{t('mobile.templates.loading')}</ThemeText>
    </View>
  ) : error !== null ? (
    <View style={styles.center} testID="templates-error">
      <ThemeText color="danger" accessibilityLiveRegion="assertive">{t(errorKey(error))}</ThemeText>
      <ThemeButton label={t('common.retry')} variant="secondary" onPress={() => void load()} />
    </View>
  ) : (
    <View style={styles.center} testID="templates-empty">
      <ThemeText color="muted" style={styles.centerText}>
        {debouncedSearch.length > 0 ? t('mobile.templates.emptySearch') : t('mobile.templates.empty')}
      </ThemeText>
      <ThemeButton label={t('mobile.templates.add')} onPress={openCreate} />
    </View>
  )

  return (
    <View style={styles.container} testID="templates-screen">
      <View style={[styles.header, { paddingTop: insets.top + 10 }]}>
        <View style={styles.headerText}>
          <ThemeText variant="title" accessibilityRole="header">{t('mobile.templates.title')}</ThemeText>
          <ThemeText variant="small" color="muted">{t('mobile.templates.description')}</ThemeText>
        </View>
        <ThemeButton label={t('mobile.templates.add')} onPress={openCreate} testID="templates-add" />
      </View>
      {!realtimeConnected && (
        <View style={styles.banner} testID="templates-realtime-warning">
          <ThemeText variant="small" color="muted">{t('mobile.templates.realtimeWaiting')}</ThemeText>
        </View>
      )}
      <View style={styles.controls}>
        <View style={styles.tabs} accessibilityRole="tablist">
          {(['dictation', 'meeting_document'] as const).map((value) => {
            const active = value === kind
            return (
              <Pressable
                key={value}
                accessibilityRole="tab"
                accessibilityState={{ selected: active }}
                onPress={() => setKind(value)}
                style={[styles.tab, active && styles.tabActive]}
                testID={`templates-kind-${value}`}
              >
                <ThemeText color={active ? 'onAccent' : 'muted'}>{t(kindKey(value))}</ThemeText>
              </Pressable>
            )
          })}
        </View>
        <TextInput
          accessibilityLabel={t('mobile.templates.search')}
          value={search}
          onChangeText={setSearch}
          placeholder={t('mobile.templates.search')}
          placeholderTextColor={palette.text.muted}
          maxLength={100}
          returnKeyType="search"
          style={styles.input}
          testID="templates-search"
        />
      </View>
      {error !== null && templates.length > 0 && (
        <View style={styles.inlineError}>
          <ThemeText color="danger" accessibilityLiveRegion="assertive">{t(errorKey(error))}</ThemeText>
          <ThemeButton label={t('common.retry')} variant="secondary" onPress={() => void load()} />
        </View>
      )}
      <FlatList
        data={templates}
        keyExtractor={(item) => item.id}
        renderItem={renderTemplate}
        contentContainerStyle={templates.length === 0 ? styles.emptyList : styles.list}
        keyboardShouldPersistTaps="handled"
        refreshControl={(
          <RefreshControl
            refreshing={refreshing}
            onRefresh={() => void load(true)}
            tintColor={palette.accent.main}
            colors={[palette.accent.main]}
          />
        )}
        ListEmptyComponent={empty}
      />

      <Modal
        visible={editor !== null}
        transparent
        animationType="fade"
        onRequestClose={closeEditor}
        statusBarTranslucent
      >
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          style={styles.modalBackdrop}
        >
          {editor !== null && (
            <FlatList
              data={editor.kind === 'dictation' ? editor.fields : []}
              keyExtractor={(field, index) => `${field.id}-${index}`}
              style={styles.modalList}
              contentContainerStyle={styles.modalCard}
              keyboardShouldPersistTaps="handled"
              accessibilityViewIsModal
              ListHeaderComponent={(
                <View style={styles.editorSection}>
                  <ThemeText variant="title" accessibilityRole="header">
                    {editor.source === null ? t('mobile.templates.addTitle') : t('mobile.templates.editTitle')}
                  </ThemeText>
                  <ThemeText variant="small" color="muted">{t(kindKey(editor.kind))}</ThemeText>
                  <EditorInput
                    label={t('mobile.templates.name')}
                    value={editor.name}
                    onChangeText={(name) => setEditor((current) => current === null ? null : { ...current, name })}
                    palette={palette}
                    testID="template-editor-name"
                    maxLength={120}
                  />
                  <EditorInput
                    label={t('mobile.templates.descriptionLabel')}
                    value={editor.description}
                    onChangeText={(description) => setEditor((current) => current === null ? null : { ...current, description })}
                    palette={palette}
                    testID="template-editor-description"
                    maxLength={1000}
                    multiline
                  />
                  {editor.kind === 'dictation' && (
                    <ThemeText variant="label" color="muted">{t('mobile.templates.fields')}</ThemeText>
                  )}
                </View>
              )}
              renderItem={({ item: field, index }) => (
                <ThemeCard style={styles.fieldCard} testID={`template-editor-field-${index}`}>
                  <View style={styles.fieldHeader}>
                    <ThemeText>{t('mobile.templates.fieldNumber', { number: index + 1 })}</ThemeText>
                    <ThemeButton
                      label={t('mobile.templates.removeField')}
                      variant="quiet"
                      disabled={editor.fields.length <= 1}
                      onPress={() => removeField(index)}
                    />
                  </View>
                  <EditorInput label={t('mobile.templates.fieldId')} value={field.id}
                    onChangeText={(id) => updateField(index, { id, name: id })} palette={palette} maxLength={80} />
                  <EditorInput label={t('mobile.templates.fieldLabel')} value={field.label}
                    onChangeText={(label) => updateField(index, { label })} palette={palette} maxLength={120} />
                  <EditorInput label={t('mobile.templates.fieldPrompt')} value={field.promptText}
                    onChangeText={(promptText) => updateField(index, { promptText })} palette={palette} maxLength={500} multiline />
                  <View style={styles.fieldOptions}>
                    <View style={styles.switchRow}>
                      <ThemeText>{t('mobile.templates.required')}</ThemeText>
                      <Switch
                        accessibilityLabel={t('mobile.templates.required')}
                        value={field.required}
                        onValueChange={(required) => updateField(index, { required })}
                        trackColor={{ false: palette.border.default, true: palette.accent.dim }}
                        thumbColor={field.required ? palette.accent.main : palette.text.muted}
                      />
                    </View>
                    <EditorInput
                      label={t('mobile.templates.durationSeconds')}
                      value={String(field.maxDurationSec)}
                      onChangeText={(value) => updateField(index, { maxDurationSec: Number(value.replace(/\D/g, '')) || 0 })}
                      palette={palette}
                      keyboardType="number-pad"
                      maxLength={4}
                      style={styles.durationInput}
                    />
                  </View>
                </ThemeCard>
              )}
              ListFooterComponent={(
                <View style={styles.editorSection}>
                  {editor.kind === 'dictation' ? (
                    <>
                      <ThemeButton label={t('mobile.templates.addField')} variant="secondary" onPress={addField} />
                      <EditorInput
                        label={t('mobile.templates.outputFormat')}
                        value={editor.outputFormat}
                        onChangeText={(outputFormat) => setEditor((current) => current === null ? null : { ...current, outputFormat })}
                        palette={palette}
                        maxLength={20000}
                        multiline
                        testID="template-editor-output"
                      />
                    </>
                  ) : (
                    <EditorInput
                      label={t('mobile.templates.systemPrompt')}
                      value={editor.systemPrompt}
                      onChangeText={(systemPrompt) => setEditor((current) => current === null ? null : { ...current, systemPrompt })}
                      palette={palette}
                      maxLength={12000}
                      multiline
                      testID="template-editor-prompt"
                    />
                  )}
                  {editorError !== null && (
                    <ThemeText color="danger" accessibilityLiveRegion="assertive" testID="template-editor-error">
                      {t(errorKey(editorError))}
                    </ThemeText>
                  )}
                  <View style={styles.actions}>
                    <ThemeButton label={t('common.cancel')} variant="secondary" disabled={saving}
                      onPress={closeEditor} style={styles.flexButton} />
                    <ThemeButton
                      label={saving ? t('mobile.templates.saving') : t('common.save')}
                      disabled={saving || editor.name.trim().length === 0}
                      onPress={() => void saveEditor()}
                      style={styles.flexButton}
                      testID="template-editor-save"
                    />
                  </View>
                </View>
              )}
            />
          )}
        </KeyboardAvoidingView>
      </Modal>
    </View>
  )
}

function EditorInput({
  label,
  palette,
  style,
  ...props
}: React.ComponentProps<typeof TextInput> & {
  label: string
  palette: Palette
}): React.ReactElement {
  return (
    <View style={stylesStatic.field}>
      <ThemeText variant="label" color="muted">{label}</ThemeText>
      <TextInput
        accessibilityLabel={label}
        placeholderTextColor={palette.text.muted}
        textAlignVertical={props.multiline === true ? 'top' : 'center'}
        style={[
          stylesStatic.editorInput,
          { color: palette.text.primary, borderColor: palette.border.default, backgroundColor: palette.bg.inset },
          props.multiline === true && stylesStatic.multiline,
          style,
        ]}
        {...props}
      />
    </View>
  )
}

type Palette = ReturnType<typeof useMobilePreferences>['palette']

const stylesStatic = StyleSheet.create({
  field: { gap: 6 },
  editorInput: {
    minHeight: 48,
    borderWidth: 1,
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 14,
  },
  multiline: { minHeight: 108 },
})

function createStyles(palette: Palette): ReturnType<typeof StyleSheet.create> {
  return StyleSheet.create({
    container: { flex: 1, backgroundColor: palette.bg.app },
    header: {
      minHeight: 94,
      paddingHorizontal: 20,
      paddingBottom: 12,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      gap: 12,
      borderBottomWidth: 1,
      borderBottomColor: palette.border.default,
      backgroundColor: palette.bg.sidebar,
    },
    headerText: { flex: 1, gap: 4 },
    banner: { paddingHorizontal: 20, paddingVertical: 8, backgroundColor: palette.accent.dim },
    controls: { padding: 16, gap: 10, borderBottomWidth: 1, borderBottomColor: palette.border.subtle },
    tabs: { flexDirection: 'row', gap: 8 },
    tab: { flex: 1, minHeight: 44, alignItems: 'center', justifyContent: 'center', borderRadius: 9, borderWidth: 1, borderColor: palette.border.default },
    tabActive: { backgroundColor: palette.accent.main, borderColor: palette.accent.main },
    input: { minHeight: 48, borderWidth: 1, borderColor: palette.border.default, borderRadius: 10, backgroundColor: palette.bg.inset, color: palette.text.primary, paddingHorizontal: 12, fontSize: 14 },
    inlineError: { padding: 12, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10, borderBottomWidth: 1, borderBottomColor: palette.tag.red },
    list: { padding: 16, gap: 12, paddingBottom: 36 },
    emptyList: { flexGrow: 1 },
    center: { flex: 1, minHeight: 260, alignItems: 'center', justifyContent: 'center', gap: 14, padding: 32 },
    centerText: { textAlign: 'center' },
    card: { gap: 12 },
    cardSelected: { borderColor: palette.accent.main, borderWidth: 1 },
    cardHeader: { flexDirection: 'row', alignItems: 'flex-start', gap: 10 },
    cardTitle: { flex: 1, gap: 5 },
    titleRow: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 8 },
    badge: { paddingHorizontal: 8, paddingVertical: 3, borderRadius: 999, backgroundColor: palette.accent.dim },
    actions: { flexDirection: 'row', alignItems: 'center', gap: 8 },
    flexButton: { flex: 1 },
    modalBackdrop: { flex: 1, justifyContent: 'center', padding: 16, backgroundColor: palette.scrim },
    modalList: { width: '100%', maxWidth: 680, maxHeight: '94%', alignSelf: 'center', borderRadius: 14, backgroundColor: palette.bg.card },
    modalCard: { padding: 18, gap: 14 },
    editorSection: { gap: 14 },
    fieldCard: { gap: 11, padding: 12 },
    fieldHeader: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
    fieldOptions: { flexDirection: 'row', alignItems: 'flex-end', gap: 14 },
    switchRow: { flex: 1, minHeight: 48, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
    durationInput: { width: 112 },
  })
}