rebreak-monorepo/apps/rebreak-native/components/urge/InlineRatingDrawer.tsx

import { useEffect, useRef, useState } from 'react';
import {
  View,
  Text,
  Pressable,
  TextInput,
  StyleSheet,
  Animated,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useColors } from '../../lib/theme';
import type { SosFeedback } from './SosFeedbackModal';

/**
 * Inline-Bewertungs-Drawer (Bottom-Sheet) als Alternative zum Exit-Modal.
 * Wenn der User hier bewertet, soll der Exit-Modal nicht mehr erscheinen.
 */
export function InlineRatingDrawer({
  onSubmit,
  onClose,
}: {
  onSubmit: (feedback: SosFeedback) => Promise<void> | void;
  onClose: () => void;
}) {
  const colors = useColors();
  const slide = useRef(new Animated.Value(600)).current;
  const [better, setBetter] = useState<boolean | null>(null);
  const [rating, setRating] = useState(0);
  const [text, setText] = useState('');
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    Animated.spring(slide, {
      toValue: 0,
      useNativeDriver: true,
      damping: 22,
      mass: 1,
      stiffness: 200,
    }).start();
  }, []);

  async function submit() {
    if (submitting) return;
    setSubmitting(true);
    try {
      await onSubmit({
        better,
        rating: rating > 0 ? rating : null,
        text: text.trim(),
      });
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <>
      <Pressable style={s.backdrop} onPress={onClose} />
      <Animated.View style={[s.drawer, { transform: [{ translateY: slide }], backgroundColor: colors.bg }]}>
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          keyboardVerticalOffset={Platform.OS === 'ios' ? 24 : 0}
        >
          <View style={s.handle} />
          <ScrollView
            keyboardShouldPersistTaps="handled"
            showsVerticalScrollIndicator={false}
            contentContainerStyle={{ paddingBottom: 8 }}
          >
            <View style={s.header}>
              <Ionicons name="star" size={20} color="#f59e0b" />
              <Text style={[s.title, { color: colors.text }]}>Bewerte diese Session</Text>
            </View>
            <Text style={[s.sub, { color: colors.textMuted }]}>
              Dein Feedback hilft uns, Lyra besser zu machen.
            </Text>

            <Text style={[s.q, { color: colors.textMuted }]}>Fühlst du dich besser?</Text>
            <View style={s.btnRow}>
              <Pressable
                style={[s.choiceBtn, better === true && s.choiceBtnYes]}
                onPress={() => setBetter(true)}
              >
                <Ionicons
                  name="checkmark-circle"
                  size={18}
                  color={better === true ? '#fff' : '#16a34a'}
                />
                <Text style={[s.choiceTxt, better === true && { color: '#fff' }]}>Ja</Text>
              </Pressable>
              <Pressable
                style={[s.choiceBtn, better === false && s.choiceBtnNo]}
                onPress={() => setBetter(false)}
              >
                <Ionicons
                  name="close-circle"
                  size={18}
                  color={better === false ? '#fff' : '#dc2626'}
                />
                <Text style={[s.choiceTxt, better === false && { color: '#fff' }]}>Nein</Text>
              </Pressable>
            </View>

            <Text style={[s.q, { color: colors.textMuted }]}>Bewertung</Text>
            <View style={s.starsRow}>
              {[1, 2, 3, 4, 5].map((n) => (
                <Pressable key={n} onPress={() => setRating(n)} hitSlop={6}>
                  <Ionicons
                    name={n <= rating ? 'star' : 'star-outline'}
                    size={32}
                    color={n <= rating ? '#f59e0b' : '#cbd5e1'}
                  />
                </Pressable>
              ))}
            </View>

            <Text style={[s.q, { color: colors.textMuted }]}>Bemerkung (optional)</Text>
            <TextInput
              style={[s.textArea, { backgroundColor: colors.surfaceElevated, borderColor: colors.border, color: colors.text }]}
              placeholder="Was war hilfreich? Was nicht?"
              placeholderTextColor="#94a3b8"
              multiline
              value={text}
              onChangeText={setText}
              maxLength={500}
            />

            <View style={s.actions}>
              <Pressable style={s.cancelBtn} onPress={onClose}>
                <Text style={s.cancelTxt}>Abbrechen</Text>
              </Pressable>
              <Pressable
                style={[s.submitBtn, { backgroundColor: colors.brandOrange }, submitting && { opacity: 0.6 }]}
                onPress={submit}
                disabled={submitting}
              >
                <Text style={s.submitTxt}>{submitting ? 'Sende…' : 'Senden'}</Text>
              </Pressable>
            </View>
          </ScrollView>
        </KeyboardAvoidingView>
      </Animated.View>
    </>
  );
}

const s = StyleSheet.create({
  backdrop: {
    position: 'absolute',
    top: 0, left: 0, right: 0, bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.35)',
  },
  drawer: {
    position: 'absolute',
    left: 0, right: 0, bottom: 0,
    backgroundColor: '#fff',
    borderTopLeftRadius: 24, borderTopRightRadius: 24,
    paddingHorizontal: 18, paddingTop: 8, paddingBottom: 22,
    maxHeight: '88%',
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOffset: { width: 0, height: -4 }, shadowOpacity: 0.18, shadowRadius: 12 },
      android: { elevation: 12 },
    }),
  },
  handle: {
    width: 40, height: 4, borderRadius: 2,
    backgroundColor: '#e2e8f0',
    alignSelf: 'center',
    marginBottom: 12,
  },
  header: { flexDirection: 'row', alignItems: 'center', gap: 8 },
  title: { fontFamily: 'Nunito_800ExtraBold', fontSize: 19, color: '#111827' },
  sub: { fontFamily: 'Nunito_400Regular', fontSize: 13, color: '#6b7280', marginTop: 4 },
  q: { fontFamily: 'Nunito_700Bold', fontSize: 13, color: '#374151', marginTop: 14 },
  btnRow: { flexDirection: 'row', gap: 10, marginTop: 6 },
  choiceBtn: {
    flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 6,
    borderWidth: 1, borderColor: '#cbd5e1', backgroundColor: '#f1f5f9',
    borderRadius: 12, paddingVertical: 11,
  },
  choiceBtnYes: { backgroundColor: '#16a34a', borderColor: '#16a34a' },
  choiceBtnNo: { backgroundColor: '#dc2626', borderColor: '#dc2626' },
  choiceTxt: { fontFamily: 'Nunito_700Bold', fontSize: 14, color: '#374151' },
  starsRow: { flexDirection: 'row', justifyContent: 'center', gap: 8, marginTop: 8 },
  textArea: {
    marginTop: 6, backgroundColor: '#f8fafc', borderRadius: 12,
    borderWidth: 1, borderColor: '#e2e8f0',
    paddingHorizontal: 12, paddingVertical: 10, minHeight: 80,
    fontFamily: 'Nunito_400Regular', fontSize: 14, color: '#111827',
    textAlignVertical: 'top',
  },
  actions: { flexDirection: 'row', gap: 10, marginTop: 18 },
  cancelBtn: {
    flex: 1, paddingVertical: 12, borderRadius: 12,
    alignItems: 'center', backgroundColor: '#f1f5f9',
  },
  cancelTxt: { fontFamily: 'Nunito_700Bold', fontSize: 14, color: '#475569' },
  submitBtn: {
    flex: 2, paddingVertical: 12, borderRadius: 12,
    alignItems: 'center',
  },
  submitTxt: { fontFamily: 'Nunito_800ExtraBold', fontSize: 14, color: '#fff' },
});