import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, TextInput, TouchableOpacity, Image, Switch, ScrollView } from "react-native";
import { Audio } from "expo-av";
import * as ImagePicker from "expo-image-picker";
import { useColorScheme } from "react-native";

export default function App() {
  const [conversation, setConversation] = useState("");
  const [advice, setAdvice] = useState("");
  const [suggestions, setSuggestions] = useState([]);
  const [image, setImage] = useState(null);
  const [sound, setSound] = useState(null);
  const [musicOn, setMusicOn] = useState(true);
  const colorScheme = useColorScheme();

  useEffect(() => {
    if (musicOn) playMusic();
    else stopMusic();
    return stopMusic;
  }, [musicOn]);

  const playMusic = async () => {
    try {
      const { sound } = await Audio.Sound.createAsync(
        require("./assets/TINI_Morat_ConsejoDeAmor.mp3"),
        { shouldPlay: true, volume: 0.15 }
      );
      setSound(sound);
      await sound.playAsync();
    } catch (error) {
      console.log("Error al reproducir la música:", error);
    }
  };

  const stopMusic = async () => {
    if (sound) {
      await sound.stopAsync();
      await sound.unloadAsync();
    }
  };

  const pickImage = async () => {
    const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (!permission.granted) {
      alert("Se necesita permiso para acceder a tus imágenes.");
      return;
    }
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: false,
      quality: 0.8,
    });
    if (!result.canceled) setImage(result.assets[0].uri);
  };

  const generateAdvice = () => {
    if (!conversation.trim()) {
      setAdvice("Por favor, pega una parte de la conversación o sube una captura 💬");
      return;
    }

    const responses = [
      "Podrías decir algo como: 'Cada palabra tuya me deja pensando en ti más de lo que debería ❤️'",
      "Respóndele con ternura: 'No sé si fue tu mensaje o tu forma de decirlo, pero me hiciste sonreír' 💫",
      "Puedes enviarle algo romántico pero sutil: 'No sé si fue casualidad o destino, pero me alegra haber hablado contigo' 💞",
      "Intenta con humor y cariño: 'Si sigo leyendo esta conversación, me voy a terminar enamorando' 😍"
    ];
    const randomAdvice = responses[Math.floor(Math.random() * responses.length)];
    setAdvice(randomAdvice);

    const wordOptions = [
      ["cariño", "mi vida", "corazón"],
      ["me encantas", "me fascinas", "no dejo de pensar en ti"],
      ["😍", "❤️", "💋"]
    ];
    setSuggestions(wordOptions.map(arr => arr[Math.floor(Math.random() * arr.length)]));
  };

  return (
    <View style={[styles.container, colorScheme === "dark" ? styles.dark : styles.light]}>
      <ScrollView contentContainerStyle={styles.scroll}>
        <Image source={require("./assets/logo.png")} style={styles.logo} />
        <Text style={styles.title}>Consejos de Gianchito el más capito 💖</Text>
        <Text style={styles.subtitle}>By Gianchito 💫</Text>

        <TouchableOpacity style={styles.uploadButton} onPress={pickImage}>
          <Text style={styles.uploadText}>📸 Subir captura</Text>
        </TouchableOpacity>
        {image && <Image source={{ uri: image }} style={styles.preview} />}

        <TextInput
          multiline
          style={styles.textBox}
          placeholder="Pega aquí parte de tu conversación..."
          placeholderTextColor="#999"
          value={conversation}
          onChangeText={setConversation}
        />

        <TouchableOpacity style={styles.adviceButton} onPress={generateAdvice}>
          <Text style={styles.adviceText}>💌 Obtener consejo</Text>
        </TouchableOpacity>

        {advice && (
          <View style={styles.adviceContainer}>
            <Text style={styles.adviceResult}>{advice}</Text>
          </View>
        )}

        {suggestions.length > 0 && (
          <View style={styles.suggestionBox}>
            <Text style={styles.suggestionText}>
              Palabras que podrías usar: {suggestions.join(", ")}
            </Text>
          </View>
        )}

        <View style={styles.switchContainer}>
          <Text style={styles.switchLabel}>Música: {musicOn ? "ON 🔈" : "OFF 🔇"}</Text>
          <Switch value={musicOn} onValueChange={setMusicOn} />
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  scroll: { padding: 20, alignItems: "center" },
  dark: { backgroundColor: "#1a1a1a" },
  light: { backgroundColor: "#ffe4ec" },
  logo: { width: 120, height: 120, borderRadius: 60, marginBottom: 10 },
  title: { fontSize: 22, fontWeight: "bold", color: "#e91e63", textAlign: "center" },
  subtitle: { fontSize: 14, color: "#999", marginBottom: 10 },
  uploadButton: { backgroundColor: "#e91e63", padding: 10, borderRadius: 20, marginVertical: 10 },
  uploadText: { color: "#fff", fontWeight: "bold" },
  preview: { width: 150, height: 150, borderRadius: 10, marginVertical: 10 },
  textBox: {
    backgroundColor: "#fff",
    borderRadius: 10,
    padding: 10,
    width: "100%",
    minHeight: 120,
    textAlignVertical: "top",
  },
  adviceButton: { backgroundColor: "#ff6699", padding: 10, borderRadius: 20, marginTop: 10 },
  adviceText: { color: "#fff", fontWeight: "bold" },
  adviceContainer: { backgroundColor: "#ffe6ef", borderRadius: 10, padding: 10, marginTop: 10 },
  adviceResult: { color: "#333", textAlign: "center" },
  suggestionBox: { backgroundColor: "#fff", borderRadius: 10, padding: 10, marginTop: 10 },
  suggestionText: { color: "#555", fontSize: 14, textAlign: "center" },
  switchContainer: { flexDirection: "row", alignItems: "center", marginTop: 20 },
  switchLabel: { marginRight: 10, color: "#e91e63", fontWeight: "bold" },
});