import React, { useState, useRef } from 'react';
import { 
  StyleSheet, Text, View, TouchableOpacity, 
  ScrollView, SafeAreaView, ActivityIndicator, Image 
} from 'react-native';
import { Camera, CameraView, useCameraPermissions } from 'expo-camera';

export default function App() {
  const [screen, setScreen] = useState('setup'); // setup, camera, loading, results
  const [gender, setGender] = useState('Female');
  const [permission, requestPermission] = useCameraPermissions();
  const [photo, setPhoto] = useState(null);
  const cameraRef = useRef(null);

  // Deep personalized dataset 
  const engineData = {
    Female: {
      feature: "High prominent cheekbones & almond eyes",
      colors: "Warm Autumn Undertones",
      swatches: ["#a0522d", "#d2b48c", "#8b4513", "#ff7f50"],
      makeup: "Warm bronze highlights on the cheekbones, terracotta wing liner, and matte brick-red lip tones.",
      hair: "Long curtain bangs, texturized layers, or a chic asymmetrical bob to accentuate bone structure.",
      wardrobe: "Tailored A-line silhouettes, warm olive trenches, and structured deep V-neck tops."
    },
    Male: {
      feature: "Angular square jawline & strong brow ridge",
      colors: "Cool Winter Undertones",
      swatches: ["#0f172a", "#1e3a8a", "#e2e8f0", "#475569"],
      makeup: "Keep skin matte with oil-control primer. Brush brows upward naturally, and apply lightweight matte beard balm.",
      hair: "Textured modern skin-fade with volume on top, low-taper mid sweeps, or a classic clean pompadour.",
      wardrobe: "Sharp tailored structures, crew neck sweaters in slate grey or navy, and crisp utility overshirts."
    }
  };

  const handleStart = async () => {
    if (!permission || !permission.granted) {
      const status = await requestPermission();
      if (!status.granted) {
        alert("Camera access is needed to analyze your face features!");
        return;
      }
    }
    setScreen('camera');
  };

  const capturePhoto = async () => {
    if (cameraRef.current) {
      const options = { quality: 0.8, skipProcessing: false };
      const data = await cameraRef.current.takePictureAsync(options);
      setPhoto(data.uri);
      
      // Trigger AI Analysis pipeline simulation
      setScreen('loading');
      setTimeout(() => {
        setScreen('results');
      }, 3000);
    }
  };

  // SCREEN: SETUP
  if (screen === 'setup') {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.content}>
          <Text style={styles.logo}>GlowUp AI✨</Text>
          <Text style={styles.tagline}>Your personal style consultant. Always free.</Text>
          
          <View style={styles.selectionBox}>
            <Text style={styles.label}>Select your style preference:</Text>
            <View style={styles.row}>
              <TouchableOpacity 
                style={[styles.genderBtn, gender === 'Female' && styles.activeBtn]}
                onPress={() => setGender('Female')}
              >
                <Text style={[styles.genderBtnTxt, gender === 'Female' && styles.activeBtnTxt]}>Female</Text>
              </TouchableOpacity>
              
              <TouchableOpacity 
                style={[styles.genderBtn, gender === 'Male' && styles.activeBtn]}
                onPress={() => setGender('Male')}
              >
                <Text style={[styles.genderBtnTxt, gender === 'Male' && styles.activeBtnTxt]}>Male</Text>
              </TouchableOpacity>
            </View>
          </View>

          <TouchableOpacity style={styles.mainBtn} onPress={handleStart}>
            <Text style={styles.mainBtnTxt}>Open Scanner</Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }

  // SCREEN: NATIVE DEVICE CAMERA
  if (screen === 'camera') {
    return (
      <View style={styles.cameraContainer}>
        <CameraView style={StyleSheet.absoluteFillObject} facing="front" ref={cameraRef}>
          <View style={styles.overlayContainer}>
            <View style={styles.faceGuide} />
            <Text style={styles.cameraTip}>Center your face in the box</Text>
            <TouchableOpacity style={styles.captureBtn} onPress={capturePhoto}>
              <View style={styles.captureInner} />
            </TouchableOpacity>
          </View>
        </CameraView>
      </View>
    );
  }

  // SCREEN: AI LOADING PIPELINE
  if (screen === 'loading') {
    return (
      <View style={[styles.container, styles.center]}>
        <ActivityIndicator size="large" color="#d4a373" />
        <Text style={styles.loadingTxt}>Analyzing Geometry...</Text>
        <Text style={styles.subLoadingTxt}>Mapping skin undertones, face shape, and features.</Text>
      </View>
    );
  }

  // SCREEN: DYNAMIC DASHBOARD RESULTS
  if (screen === 'results') {
    const activeResult = engineData[gender];
    return (
      <SafeAreaView style={styles.container}>
        <ScrollView contentContainerStyle={styles.resultsScroll}>
          <Text style={styles.resultsTitle}>Your Custom Blueprint</Text>
          <Text style={styles.resultsSubtitle}>Based on your scanned profile geometry</Text>

          {/* Card 1: Features */}
          <View style={styles.card}>
            <Text style={styles.cardHeading}>⭐ Strong Features Detected</Text>
            <Text style={styles.cardBody}>{activeResult.feature}</Text>
          </View>

          {/* Card 2: Color Palette */}
          <View style={styles.card}>
            <Text style={styles.cardHeading}>🎨 Color Palette & Skin Tone</Text>
            <Text style={styles.cardBody}>{activeResult.colors}</Text>
            <View style={styles.paletteRow}>
              {activeResult.swatches.map((color, idx) => (
                <View key={idx} style={[styles.swatch, { backgroundColor: color }]} />
              ))}
            </View>
          </View>

          {/* Card 3: Makeup */}
          <View style={styles.card}>
            <Text style={styles.cardHeading}>💄 Makeup & Grooming</Text>
            <Text style={styles.cardBody}>{activeResult.makeup}</Text>
          </View>

          {/* Card 4: Hair */}
          <View style={styles.card}>
            <Text style={styles.cardHeading}>✂️ Recommended Hairstyles</Text>
            <Text style={styles.cardBody}>{activeResult.hair}</Text>
          </View>

          {/* Card 5: Clothes */}
          <View style={styles.card}>
            <Text style={styles.cardHeading}>👗 Wardrobe Styles</Text>
            <Text style={styles.cardBody}>{activeResult.wardrobe}</Text>
          </View>

          <TouchableOpacity style={styles.mainBtn} onPress={() => setScreen('setup')}>
            <Text style={styles.mainBtnTxt}>Scan New Face</Text>
          </TouchableOpacity>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fdfaf7' },
  content: { flex: 1, padding: 24, justifyContent: 'center' },
  center: { justifyContent: 'center', alignItems: 'center', padding: 20 },
  logo: { fontSize: 32, fontWeight: 'bold', color: '#3a302c', textAlign: 'center', marginBottom: 8 },
  tagline: { fontSize: 14, color: '#72625a', textAlign: 'center', marginBottom: 40 },
  selectionBox: { marginBottom: 40 },
  label: { fontSize: 16, fontWeight: '600', color: '#4a403b', marginBottom: 12 },
  row: { flexDirection: 'row', gap: 12 },
  genderBtn: { flex: 1, padding: 16, borderRadius: 12, borderWidth: 2, borderColor: '#e6ded7', backgroundColor: '#fff', alignItems: 'center' },
  activeBtn: { borderColor: '#d4a373', backgroundColor: '#fef6ee' },
  genderBtnTxt: { fontSize: 16, fontWeight: '600', color: '#555' },
  activeBtnTxt: { color: '#d4a373' },
  mainBtn: { backgroundColor: '#d4a373', padding: 16, borderRadius: 14, alignItems: 'center', marginTop: 20 },
  mainBtnTxt: { color: '#fff', fontSize: 16, fontWeight: 'bold' },
  cameraContainer: { flex: 1, backgroundColor: '#000' },
  overlayContainer: { flex: 1, justifyContent: 'space-between', alignItems: 'center', paddingVertical: 50 },
  faceGuide: { width: 260, height: 340, borderWidth: 2, borderColor: 'rgba(255,255,255,0.5)', borderRadius: 100, marginTop: 60 },
  cameraTip: { color: '#fff', fontSize: 16, fontWeight: '500', textShadowColor: '#000', textShadowOffset: { width: 1, height: 1 }, textShadowRadius: 4 },
  captureBtn: { width: 76, height: 76, borderRadius: 38, borderWidth: 4, borderColor: '#fff', justifyContent: 'center', alignItems: 'center' },
  captureInner: { width: 60, height: 60, borderRadius: 30, backgroundColor: '#fff' },
  loadingTxt: { fontSize: 20, fontWeight: 'bold', color: '#3a302c', marginTop: 20 },
  subLoadingTxt: { fontSize: 13, color: '#72625a', textAlign: 'center', marginTop: 6, paddingHorizontal: 30 },
  resultsScroll: { padding: 24 },
  resultsTitle: { fontSize: 24, fontWeight: 'bold', color: '#3a302c', textAlign: 'center' },
  resultsSubtitle: { fontSize: 13, color: '#72625a', textAlign: 'center', marginBottom: 24, marginTop: 4 },
  card: { backgroundColor: '#fff', borderRadius: 16, padding: 16, marginBottom: 16, borderWidth: 1, borderColor: '#efe6dd' },
  cardHeading: { fontSize: 14, fontWeight: 'bold', color: '#d4a373', textTransform: 'uppercase', marginBottom: 6 },
  cardBody: { fontSize: 14, color: '#4a403b', lineHeight: 20 },
  paletteRow: { flexDirection: 'row', gap: 10, marginTop: 10 },
  swatch: { width: 24, height: 24, borderRadius: 12, borderWidth: 1, borderColor: 'rgba(0,0,0,0.1)' }
});


<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>