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

import { Screen } from '@/components/screen';
import { useSession } from '@/lib/session';
import { colors, radius, space, text } from '@/theme/tokens';

/**
 * Wird in E6 zum Popover über der Tab-Leiste. Bis dahin dieselbe Auswahl als
 * Screen – die drei Abläufe sind unterschiedlich lang, keiner darf der
 * Standard werden (app-aufbau.md §3).
 */
export default function ErstellenScreen() {
  const router = useRouter();
  const { aktiverOrdner } = useSession();

  return (
    <Screen title="Erstellen">
      {aktiverOrdner ? (
        <Text style={s.scope}>
          Aktiver Ordner: <Text style={s.scopeName}>{aktiverOrdner.name}</Text>
        </Text>
      ) : (
        <Text style={s.scope}>Noch kein Ordner gewählt – im Profil einen anlegen.</Text>
      )}

      <Eintrag
        icon="images-outline"
        titel="Post"
        text="Kulisse, Produkt und Person wählen, Bilderkette erzeugen."
        aufDruck={() => router.push('/erstellen/post')}
      />
      <Eintrag icon="film-outline" titel="Video" text="Kommt mit E10." gesperrt />
      <Eintrag
        icon="cube-outline"
        titel="Modell"
        text="Person, Produkt oder Kulisse anlegen."
        aufDruck={() => router.push('/modell/neu')}
      />
      <Eintrag icon="document-outline" titel="Entwürfe" text="Kommt mit E6." gesperrt />
    </Screen>
  );
}

function Eintrag({
  icon, titel, text: beschreibung, aufDruck, gesperrt,
}: {
  icon: keyof typeof Ionicons.glyphMap;
  titel: string;
  text: string;
  aufDruck?: () => void;
  gesperrt?: boolean;
}) {
  return (
    <Pressable
      onPress={aufDruck}
      disabled={gesperrt}
      accessibilityRole="button"
      style={({ pressed }) => [s.zeile, gesperrt ? s.aus : null, pressed && !gesperrt ? s.gedrueckt : null]}>
      <View style={s.icon}>
        <Ionicons name={icon} size={20} color={gesperrt ? colors.faint : colors.accent} />
      </View>
      <View style={s.zeileText}>
        <Text style={s.zeileTitel}>{titel}</Text>
        <Text style={s.zeileUnter}>{beschreibung}</Text>
      </View>
      {!gesperrt ? <Ionicons name="chevron-forward" size={18} color={colors.faint} /> : null}
    </Pressable>
  );
}

const s = StyleSheet.create({
  scope: { ...text.label, color: colors.mut },
  scopeName: { color: colors.txt, fontWeight: '700' },
  zeile: {
    flexDirection: 'row', alignItems: 'center', gap: space.lg,
    backgroundColor: colors.surface,
    borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth,
    borderRadius: radius.md, padding: space.lg,
  },
  aus: { opacity: 0.45 },
  gedrueckt: { opacity: 0.8 },
  icon: {
    width: 38, height: 38, borderRadius: radius.sm,
    backgroundColor: colors.surface2, alignItems: 'center', justifyContent: 'center',
  },
  zeileText: { flex: 1, gap: 2 },
  zeileTitel: { ...text.body, fontWeight: '600', color: colors.txt },
  zeileUnter: { ...text.label, color: colors.mut, lineHeight: 18 },
});