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

import { Button } from '@/components/ui';
import { assetsMitBild, type AssetMitBild } from '@/lib/assets';
import { useBildQuelle } from '@/lib/bildquelle';
import { BUCKET_BILDER } from '@/lib/dateien';
import { ordnerLesen, reifegrad, type Ordner } from '@/lib/folders';
import { bilderZuPosts, postsImOrdner, slotsLesen, type Post, type PostBild } from '@/lib/posts';
import { useSession } from '@/lib/session';
import { colors, radius, space, text } from '@/theme/tokens';

export default function OrdnerDetailScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const router = useRouter();
  const { brand, aktiverOrdner, setzeAktivenOrdner } = useSession();

  const [ordner, setOrdner] = useState<Ordner | null>(null);
  const [posts, setPosts] = useState<Post[]>([]);
  const [modelle, setModelle] = useState<AssetMitBild[]>([]);
  const [bilder, setBilder] = useState<Map<string, PostBild[]>>(new Map());

  const laden = useCallback(async () => {
    if (!id || !brand) return;
    const [o, p, m] = await Promise.all([ordnerLesen(id), postsImOrdner(id), assetsMitBild(brand.$id)]);
    setOrdner(o);
    setPosts(p);
    setModelle(m);
    setBilder(await bilderZuPosts(p.map((x) => x.$id)));
  }, [id, brand]);

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

  const istAktiv = ordner?.$id === aktiverOrdner?.$id;
  const nameVon = (assetId?: string) => modelle.find((m) => m.$id === assetId)?.name;

  return (
    <SafeAreaView style={s.safe} edges={['top', 'left', 'right']}>
      <ScrollView contentContainerStyle={s.body}>
        <Text style={s.titel}>{ordner?.name ?? 'Ordner'}</Text>
        <Text style={s.unter}>
          {ordner?.zweck === 'sammlung' ? 'Sammlung' : 'Wissens-Scope'} ·{' '}
          {ordner?.startwert_modus === 'erben' ? 'geerbte Startwerte' : 'startet aus den Posts'} ·{' '}
          {ordner ? reifegrad(ordner) : '–'}
        </Text>

        {!istAktiv && ordner ? (
          <Button title="Als aktiven Ordner setzen" variant="ghost" onPress={() => setzeAktivenOrdner(ordner)} />
        ) : (
          <View style={s.aktivHinweis}>
            <Ionicons name="checkmark-circle" size={15} color={colors.accent} />
            <Text style={s.aktivText}>Aktiver Ordner – neue Posts landen hier.</Text>
          </View>
        )}

        <View style={s.abschnitt}>
          <Text style={s.abschnittTitel}>Posts</Text>
          {posts.length === 0 ? (
            <Text style={s.leer}>Noch nichts drin. Ein Post entsteht über „Erstellen“.</Text>
          ) : (
            posts.map((p) => {
              const sl = slotsLesen(p);
              const teile = [nameVon(sl.kulisse_asset_id), nameVon(sl.produkt_asset_id), nameVon(sl.person_asset_id)]
                .filter(Boolean)
                .join(' · ');
              return (
                <View key={p.$id} style={s.karte}>
                  <View style={s.karteKopf}>
                    <Text style={s.karteTitel} numberOfLines={1}>
                      {p.titel || 'Ohne Titel'}
                    </Text>
                    <View style={[s.status, p.status === 'generiert' ? s.statusOk : null]}>
                      <Text style={s.statusText}>{p.status === 'generiert' ? 'fertig' : 'wartet'}</Text>
                    </View>
                  </View>
                  <Text style={s.karteZeile}>
                    {p.format} · {p.bild_count} {p.bild_count === 1 ? 'Bild' : 'Bilder'} ·{' '}
                    {p.sichtbarkeit === 'oeffentlich' ? 'öffentlich' : 'privat'}
                  </Text>
                  {teile ? <Text style={s.karteSlots}>{teile}</Text> : null}
                  {p.user_prompt ? (
                    <Text style={s.kartePrompt} numberOfLines={2}>
                      {p.user_prompt}
                    </Text>
                  ) : null}

                  {(bilder.get(p.$id) ?? []).length > 0 ? (
                    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={s.kette}>
                      {(bilder.get(p.$id) ?? []).map((b) => (
                        <KettenBild key={b.$id} bild={b} />
                      ))}
                    </ScrollView>
                  ) : null}
                </View>
              );
            })
          )}
        </View>

        <Button title="Zurück" variant="ghost" onPress={() => router.back()} />
      </ScrollView>
    </SafeAreaView>
  );
}

function KettenBild({ bild }: { bild: PostBild }) {
  const quelle = useBildQuelle(bild.storage_file_id, BUCKET_BILDER);
  return (
    <View style={s.kettenRahmen}>
      {quelle ? (
        <Image source={quelle} style={s.kettenBild} contentFit="cover" transition={150} />
      ) : (
        <View style={[s.kettenBild, s.kettenLeer]}>
          <Ionicons name="hourglass-outline" size={16} color={colors.faint} />
        </View>
      )}
      <View style={s.kettenNr}>
        <Text style={s.kettenNrText}>{bild.position}</Text>
      </View>
    </View>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: colors.bg },
  kette: { gap: space.sm, paddingTop: space.sm, paddingRight: space.lg },
  kettenRahmen: {
    width: 76, height: 95, borderRadius: radius.sm, overflow: 'hidden',
    backgroundColor: colors.surface2,
    borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth,
  },
  kettenBild: { width: '100%', height: '100%' },
  kettenLeer: { alignItems: 'center', justifyContent: 'center' },
  kettenNr: {
    position: 'absolute', bottom: 4, left: 4,
    minWidth: 16, height: 16, borderRadius: 8, paddingHorizontal: 4,
    backgroundColor: 'rgba(0,0,0,0.65)', alignItems: 'center', justifyContent: 'center',
  },
  kettenNrText: { fontSize: 10, color: '#fff', fontWeight: '700' },
  body: { padding: space.xl, gap: space.lg, paddingBottom: space.xxl },
  titel: { ...text.title, color: colors.txt },
  unter: { ...text.label, color: colors.mut, marginTop: -space.sm },
  aktivHinweis: { flexDirection: 'row', alignItems: 'center', gap: space.sm },
  aktivText: { ...text.label, color: colors.mut },

  abschnitt: { gap: space.md },
  abschnittTitel: { ...text.heading, color: colors.txt },
  leer: { ...text.body, color: colors.faint },

  karte: {
    backgroundColor: colors.surface,
    borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth,
    borderRadius: radius.md, padding: space.lg, gap: space.xs,
  },
  karteKopf: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: space.md },
  karteTitel: { ...text.body, fontWeight: '600', color: colors.txt, flexShrink: 1 },
  status: { backgroundColor: colors.surface2, borderRadius: radius.pill, paddingHorizontal: space.md, paddingVertical: 2 },
  statusOk: { backgroundColor: 'rgba(52,211,153,0.18)' },
  statusText: { fontSize: 11, color: colors.mut, fontWeight: '600' },
  karteZeile: { ...text.label, color: colors.mut },
  karteSlots: { ...text.label, color: colors.faint },
  kartePrompt: { ...text.label, color: colors.faint, lineHeight: 18, marginTop: space.xs },
});
