import { useRouter } from 'expo-router';
import { useState } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

import { Button, ErrorNote, Field } from '@/components/ui';
import { Wahl } from '@/components/wahl';
import { fehlertext } from '@/lib/auth';
import { ordnerAnlegen, STARTWERTE, ZWECKE, type Startwert, type Zweck } from '@/lib/folders';
import { useSession } from '@/lib/session';
import { colors, space, text } from '@/theme/tokens';

export default function OrdnerNeuScreen() {
  const router = useRouter();
  const { brand, ordnerNeuLaden, setzeAktivenOrdner } = useSession();

  const [name, setName] = useState('');
  const [thema, setThema] = useState('');
  const [zweck, setZweck] = useState<Zweck>('wissens_scope');
  const [startwert, setStartwert] = useState<Startwert>('erben');
  const [fehler, setFehler] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  async function anlegen() {
    if (!brand?.team_id) {
      setFehler('Zur Marke ist kein Team hinterlegt – bitte neu anmelden.');
      return;
    }
    setFehler(null);
    setBusy(true);
    try {
      const o = await ordnerAnlegen(brand.$id, brand.team_id, {
        name: name.trim(),
        zweck,
        startwert_modus: startwert,
        theme_md: thema.trim(),
      });
      await ordnerNeuLaden();
      setzeAktivenOrdner(o);
      router.back();
    } catch (e) {
      setFehler(fehlertext(e));
      setBusy(false);
    }
  }

  return (
    <SafeAreaView style={s.safe} edges={['top', 'left', 'right']}>
      <ScrollView contentContainerStyle={s.body} keyboardShouldPersistTaps="handled">
        <Text style={s.titel}>Ordner anlegen</Text>
        <Text style={s.unter}>
          Ein Ordner ist ein eigener Wissensstand, keine Ablage. Was hier hineinkommt, prägt die
          Bilder, die daraus entstehen – und nur die.
        </Text>

        {fehler ? <ErrorNote message={fehler} /> : null}

        <Field label="Name" value={name} onChangeText={setName} placeholder="z. B. Sommerkampagne" />
        <Field
          label="Worum geht es hier? (optional)"
          value={thema}
          onChangeText={setThema}
          placeholder="Hilft später beim Einsortieren"
          multiline
          numberOfLines={3}
          style={s.mehrzeilig}
        />

        <Wahl label="Zweck" optionen={ZWECKE} wert={zweck} aufWahl={setZweck} />
        <Wahl label="Startwerte" optionen={STARTWERTE} wert={startwert} aufWahl={setStartwert} />

        <View style={s.actions}>
          <Button title="Ordner anlegen" onPress={anlegen} busy={busy} disabled={name.trim().length < 2} />
          <Button title="Abbrechen" variant="ghost" onPress={() => router.back()} />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: colors.bg },
  body: { padding: space.xl, gap: space.lg, paddingBottom: space.xxl },
  titel: { ...text.title, color: colors.txt },
  unter: { ...text.body, color: colors.mut, lineHeight: 21, marginTop: -space.sm },
  mehrzeilig: { minHeight: 84, textAlignVertical: 'top' },
  actions: { gap: space.md, marginTop: space.md },
});