import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { useCallback, useEffect, useState } from 'react';
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

import { ModellWahl } from '@/components/modellwahl';
import { Button, ErrorNote, Field } from '@/components/ui';
import { Wahl } from '@/components/wahl';
import { assetsMitBild, type AssetMitBild } from '@/lib/assets';
import { fehlertext } from '@/lib/auth';
import { reifegrad } from '@/lib/folders';
import { FORMATE, postAnlegen, type Format, type Slots } from '@/lib/posts';
import { useSession } from '@/lib/session';
import { colors, radius, space, text } from '@/theme/tokens';

export default function PostErstellenScreen() {
  const router = useRouter();
  const { brand, ordner, aktiverOrdner, setzeAktivenOrdner } = useSession();

  const [modelle, setModelle] = useState<AssetMitBild[]>([]);
  const [titel, setTitel] = useState('');
  const [prompt, setPrompt] = useState('');
  const [format, setFormat] = useState<Format>('4:5');
  const [kette, setKette] = useState(3);
  const [slots, setSlots] = useState<Slots>({});
  const [fehler, setFehler] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  const laden = useCallback(async () => {
    if (!brand) return;
    setModelle(await assetsMitBild(brand.$id));
  }, [brand]);

  useEffect(() => {
    void laden();
  }, [laden]);

  const setzeSlot = (k: keyof Slots) => (v: string | undefined) =>
    setSlots((s) => ({ ...s, [k]: v }));

  const bereit = !!aktiverOrdner && titel.trim().length > 1 && prompt.trim().length > 5;

  async function anlegen() {
    if (!brand?.team_id || !aktiverOrdner) return;
    setFehler(null);
    setBusy(true);
    try {
      await postAnlegen(brand.$id, brand.team_id, {
        folderId: aktiverOrdner.$id,
        titel: titel.trim(),
        prompt: prompt.trim(),
        format,
        bildCount: kette,
        slots,
        nische: brand.nische,
      });
      router.replace(`/ordner/${aktiverOrdner.$id}`);
    } 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}>Post erstellen</Text>

        {/* Der aktive Ordner gehört sichtbar in die Kopfzeile, nicht in ein
            Untermenü – sonst wird im falschen Scope generiert (app-aufbau.md §2.2). */}
        <View style={s.ordnerBox}>
          <Text style={s.ordnerLabel}>Speichern in</Text>
          {ordner.length === 0 ? (
            <Text style={s.leer}>Noch kein Ordner. Erst im Profil einen anlegen.</Text>
          ) : (
            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={s.chips}>
              {ordner.map((o) => {
                const aktiv = o.$id === aktiverOrdner?.$id;
                return (
                  <Pressable
                    key={o.$id}
                    onPress={() => setzeAktivenOrdner(o)}
                    accessibilityRole="radio"
                    accessibilityState={{ selected: aktiv }}
                    style={[s.chip, aktiv ? s.chipAktiv : null]}>
                    <Text style={[s.chipText, aktiv ? s.chipTextAktiv : null]}>{o.name}</Text>
                  </Pressable>
                );
              })}
            </ScrollView>
          )}
          {aktiverOrdner ? (
            <Text style={s.ordnerHinweis}>
              <Ionicons name="information-circle-outline" size={12} color={colors.faint} />{' '}
              Zieht sein Wissen aus „{aktiverOrdner.name}" · {reifegrad(aktiverOrdner)}
            </Text>
          ) : null}
        </View>

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

        <Field label="Titel" value={titel} onChangeText={setTitel} placeholder="z. B. Serum auf Waschtisch" />

        <ModellWahl
          label="Kulisse"
          typ="kulisse"
          modelle={modelle}
          gewaehlt={slots.kulisse_asset_id}
          aufWahl={setzeSlot('kulisse_asset_id')}
          hinweis="Wo das Bild spielt."
        />
        <ModellWahl
          label="Produkt"
          typ="produkt"
          modelle={modelle}
          gewaehlt={slots.produkt_asset_id}
          aufWahl={setzeSlot('produkt_asset_id')}
          hinweis="Muss genau so aussehen wie im Regal."
        />
        <ModellWahl
          label="Person"
          typ="gesicht"
          modelle={modelle}
          gewaehlt={slots.person_asset_id}
          aufWahl={setzeSlot('person_asset_id')}
          hinweis="Optional. Nur KI-generierte Gesichter – echte brauchen eine dokumentierte Einwilligung."
        />

        <Wahl
          label="Format"
          optionen={FORMATE.map((f) => ({ wert: f.wert, titel: f.titel, erklaerung: f.erklaerung }))}
          wert={format}
          aufWahl={setFormat}
        />

        <View style={s.block}>
          <Text style={s.label}>Bilder in der Kette</Text>
          <Text style={s.hinweis}>
            Über die Kette variieren nur Position und Winkel. Modelle, Kulisse, Licht und Farbe
            bleiben gleich.
          </Text>
          <View style={s.zahlen}>
            {[1, 2, 3, 4, 5].map((n) => (
              <Pressable
                key={n}
                onPress={() => setKette(n)}
                accessibilityRole="radio"
                accessibilityState={{ selected: n === kette }}
                style={[s.zahl, n === kette ? s.zahlAktiv : null]}>
                <Text style={[s.zahlText, n === kette ? s.zahlTextAktiv : null]}>{n}</Text>
              </Pressable>
            ))}
          </View>
        </View>

        <Field
          label="Was soll zu sehen sein?"
          value={prompt}
          onChangeText={setPrompt}
          placeholder="Ein Satz genügt – die Marke steuert den Rest bei."
          multiline
          numberOfLines={4}
          style={s.mehrzeilig}
        />

        <View style={s.actions}>
          <Button title={`Rezept speichern und ${kette} Bilder einreihen`} onPress={anlegen} busy={busy} disabled={!bereit} />
          <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 },

  ordnerBox: {
    backgroundColor: colors.surface,
    borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth,
    borderRadius: radius.md, padding: space.lg, gap: space.sm,
  },
  ordnerLabel: { ...text.label, color: colors.mut },
  ordnerHinweis: { ...text.label, color: colors.faint, lineHeight: 18 },
  chips: { gap: space.sm, paddingRight: space.lg },
  chip: {
    borderRadius: radius.pill, paddingHorizontal: space.lg, paddingVertical: space.sm,
    backgroundColor: colors.surface2, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth,
  },
  chipAktiv: { backgroundColor: colors.accent, borderColor: colors.accent },
  chipText: { ...text.label, color: colors.mut },
  chipTextAktiv: { color: '#fff', fontWeight: '700' },

  block: { gap: space.sm },
  label: { ...text.label, color: colors.mut },
  hinweis: { ...text.label, color: colors.faint, lineHeight: 18 },
  leer: { ...text.label, color: colors.faint },
  mehrzeilig: { minHeight: 96, textAlignVertical: 'top' },

  zahlen: { flexDirection: 'row', gap: space.sm, marginTop: space.xs },
  zahl: {
    width: 46, height: 46, borderRadius: radius.sm,
    alignItems: 'center', justifyContent: 'center',
    backgroundColor: colors.surface, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth,
  },
  zahlAktiv: { borderColor: colors.accent, backgroundColor: 'rgba(255,92,57,0.12)' },
  zahlText: { ...text.body, color: colors.mut, fontWeight: '600' },
  zahlTextAktiv: { color: colors.txt },

  actions: { gap: space.md, marginTop: space.md },
});
