import type { NativeStackScreenProps } from '@react-navigation/native-stack';
import { StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

import { PrimaryButton } from '../components/PrimaryButton';
import type { RootStackParamList } from '../navigation/types';
import { colors } from '../theme/colors';

type ResultScreenProps = NativeStackScreenProps<RootStackParamList, 'Result'>;

export function ResultScreen({ navigation }: ResultScreenProps) {
  return (
    <SafeAreaView style={styles.safeArea} edges={['bottom']}>
      <View style={styles.container}>
        <View style={styles.modelPreview}>
          <View style={styles.floorPlan}>
            <View style={styles.wallLong} />
            <View style={styles.wallShort} />
            <View style={styles.roomBlockLarge} />
            <View style={styles.roomBlockSmall} />
          </View>
          <Text style={styles.previewLabel}>Mock 3D Modell</Text>
        </View>

        <View style={styles.summaryCard}>
          <Text style={styles.title}>Scan bereit zur Auswertung</Text>
          <Text style={styles.body}>
            Diese Ansicht ist ein Platzhalter fuer das spaetere RoomPlan-Ergebnis. Nach der nativen iOS
            Integration werden hier erkannte Waende, Tueren, Fenster und Moebel angezeigt.
          </Text>
        </View>

        <View style={styles.actions}>
          <PrimaryButton label="Neuen Scan starten" onPress={() => navigation.navigate('Scan')} />
          <PrimaryButton label="Zur Startseite" variant="secondary" onPress={() => navigation.navigate('Home')} />
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
  },
  container: {
    flex: 1,
    gap: 20,
    padding: 20,
  },
  modelPreview: {
    alignItems: 'center',
    backgroundColor: colors.surface,
    borderColor: colors.border,
    borderRadius: 30,
    borderWidth: 1,
    flex: 1,
    justifyContent: 'center',
    minHeight: 360,
    padding: 24,
  },
  floorPlan: {
    borderColor: colors.primary,
    borderRadius: 24,
    borderWidth: 3,
    height: 220,
    transform: [{ rotateX: '58deg' }, { rotateZ: '-18deg' }],
    width: 220,
  },
  wallLong: {
    backgroundColor: colors.primary,
    borderRadius: 10,
    height: 14,
    left: 20,
    position: 'absolute',
    top: 72,
    width: 150,
  },
  wallShort: {
    backgroundColor: colors.accent,
    borderRadius: 10,
    height: 110,
    position: 'absolute',
    right: 48,
    top: 54,
    width: 14,
  },
  roomBlockLarge: {
    backgroundColor: 'rgba(98, 214, 255, 0.24)',
    borderRadius: 18,
    bottom: 28,
    height: 70,
    left: 34,
    position: 'absolute',
    width: 88,
  },
  roomBlockSmall: {
    backgroundColor: 'rgba(181, 240, 109, 0.28)',
    borderRadius: 14,
    height: 52,
    position: 'absolute',
    right: 32,
    top: 24,
    width: 58,
  },
  previewLabel: {
    color: colors.textSecondary,
    fontSize: 15,
    marginTop: 32,
  },
  summaryCard: {
    backgroundColor: colors.surfaceRaised,
    borderRadius: 24,
    padding: 20,
  },
  title: {
    color: colors.textPrimary,
    fontSize: 21,
    fontWeight: '900',
  },
  body: {
    color: colors.textSecondary,
    fontSize: 15,
    lineHeight: 23,
    marginTop: 10,
  },
  actions: {
    gap: 12,
  },
});