import { Ionicons } from '@expo/vector-icons';
import { Image } from 'expo-image';
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';

import { TYPEN, type AssetMitBild, type AssetTyp } from '@/lib/assets';
import { useBildQuelle } from '@/lib/bildquelle';
import { colors, radius, space, text } from '@/theme/tokens';

type Props = {
  label: string;
  typ: AssetTyp;
  modelle: AssetMitBild[];
  gewaehlt?: string;
  aufWahl: (id: string | undefined) => void;
  hinweis?: string;
};

/**
 * Auswahl eines eigenen Modells für einen Slot – als Bildkachel, nicht als
 * Dropdown. Bei Kulissen und Produkten ist das Aussehen die Information; ein
 * Name wie „Halle, Metallwand" sagt nichts darüber, ob es passt.
 */
export function ModellWahl({ label, typ, modelle, gewaehlt, aufWahl, hinweis }: Props) {
  const passende = modelle.filter((m) => m.typ === typ);
  const titel = TYPEN.find((t) => t.wert === typ)?.titel ?? label;

  return (
    <View style={s.block}>
      <View style={s.kopf}>
        <Text style={s.label}>{label}</Text>
        {gewaehlt ? (
          <Pressable onPress={() => aufWahl(undefined)} accessibilityRole="button">
            <Text style={s.loeschen}>entfernen</Text>
          </Pressable>
        ) : null}
      </View>
      {hinweis ? <Text style={s.hinweis}>{hinweis}</Text> : null}

      {passende.length === 0 ? (
        <Text style={s.leer}>Noch kein Modell vom Typ „{titel}". Erst im Profil anlegen.</Text>
      ) : (
        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={s.reihe}>
          {passende.map((m) => (
            <Kachel key={m.$id} modell={m} aktiv={m.$id === gewaehlt} aufWahl={() => aufWahl(m.$id)} />
          ))}
        </ScrollView>
      )}
    </View>
  );
}

function Kachel({ modell, aktiv, aufWahl }: { modell: AssetMitBild; aktiv: boolean; aufWahl: () => void }) {
  const quelle = useBildQuelle(modell.titelbildId);
  return (
    <Pressable
      onPress={aufWahl}
      accessibilityRole="radio"
      accessibilityState={{ selected: aktiv }}
      accessibilityLabel={modell.name}
      style={({ pressed }) => [s.kachel, pressed ? s.gedrueckt : null]}>
      <View style={[s.rahmen, aktiv ? s.rahmenAktiv : null]}>
        {quelle ? (
          <Image source={quelle} style={s.bild} contentFit="cover" transition={150} />
        ) : (
          <View style={[s.bild, s.bildLeer]}>
            <Ionicons name="image-outline" size={20} color={colors.faint} />
          </View>
        )}
        {aktiv ? (
          <View style={s.haken}>
            <Ionicons name="checkmark" size={13} color="#fff" />
          </View>
        ) : null}
      </View>
      <Text style={[s.name, aktiv ? s.nameAktiv : null]} numberOfLines={1}>
        {modell.name}
      </Text>
    </Pressable>
  );
}

const s = StyleSheet.create({
  block: { gap: space.sm },
  kopf: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
  label: { ...text.label, color: colors.mut },
  loeschen: { ...text.label, color: colors.faint },
  hinweis: { ...text.label, color: colors.faint, lineHeight: 18 },
  leer: { ...text.label, color: colors.faint, lineHeight: 18, paddingVertical: space.sm },
  reihe: { gap: space.md, paddingRight: space.xl, paddingTop: space.xs },
  kachel: { width: 92, gap: space.xs },
  gedrueckt: { opacity: 0.8 },
  rahmen: {
    width: 92, height: 92, borderRadius: radius.md, overflow: 'hidden',
    borderColor: colors.border, borderWidth: 2, backgroundColor: colors.surface,
  },
  rahmenAktiv: { borderColor: colors.accent },
  bild: { width: '100%', height: '100%' },
  bildLeer: { alignItems: 'center', justifyContent: 'center' },
  haken: {
    position: 'absolute', top: 5, right: 5,
    width: 20, height: 20, borderRadius: 10, backgroundColor: colors.accent,
    alignItems: 'center', justifyContent: 'center',
  },
  name: { ...text.label, color: colors.faint },
  nameAktiv: { color: colors.txt },
});
