import React, { useState, useEffect, createContext, useContext } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, doc, getDoc, setDoc, updateDoc, onSnapshot, collection, query, addDoc, deleteDoc } from 'firebase/firestore';

// Iconos de Lucide React
import { Home, Pill, MessageSquare, AlertCircle, User, Plus, Camera, Send, History, Check, X, Bell, Clock, Stethoscope } from 'lucide-react';

// Contexto para la aplicación (Firebase, Auth, Firestore, UserID, CurrentProfileId)
const AppContext = createContext(null);

// Proveedor del contexto de la aplicación
function AppProvider({ children }) {
    const [app, setApp] = useState(null);
    const [db, setDb] = useState(null);
    const [auth, setAuth] = useState(null);
    const [userId, setUserId] = useState(null);
    const [currentProfileId, setCurrentProfileId] = useState(null);
    const [profiles, setProfiles] = useState([]); // Todos los perfiles gestionados por el usuario actual
    const [isAuthReady, setIsAuthReady] = useState(false); // Para asegurar que la autenticación está lista

    useEffect(() => {
        // Inicializar Firebase
        const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
        const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};

        try {
            const firebaseApp = initializeApp(firebaseConfig);
            const firestoreDb = getFirestore(firebaseApp);
            const firebaseAuth = getAuth(firebaseApp);

            setApp(firebaseApp);
            setDb(firestoreDb);
            setAuth(firebaseAuth);

            // Manejar la autenticación
            const unsubscribe = onAuthStateChanged(firebaseAuth, async (user) => {
                if (user) {
                    setUserId(user.uid);
                    console.log("Usuario autenticado:", user.uid);
                } else {
                    // Si no hay token inicial, iniciar sesión anónimamente
                    if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
                        try {
                            await signInWithCustomToken(firebaseAuth, __initial_auth_token);
                            console.log("Sesión iniciada con token personalizado.");
                        } catch (error) {
                            console.error("Error al iniciar sesión con token personalizado:", error);
                            await signInAnonymously(firebaseAuth);
                            console.log("Sesión iniciada anónimamente debido a error con token.");
                        }
                    } else {
                        await signInAnonymously(firebaseAuth);
                        console.log("Sesión iniciada anónimamente.");
                    }
                }
                setIsAuthReady(true); // La autenticación ha sido procesada
            });

            return () => unsubscribe(); // Limpiar el listener al desmontar
        } catch (error) {
            console.error("Error al inicializar Firebase:", error);
        }
    }, []);

    // Cargar perfiles y establecer el perfil actual una vez que la autenticación esté lista
    useEffect(() => {
        if (db && userId && isAuthReady) {
            const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
            const profilesColRef = collection(db, `artifacts/${appId}/users/${userId}/profiles`);

            const unsubscribe = onSnapshot(profilesColRef, (snapshot) => {
                const fetchedProfiles = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
                setProfiles(fetchedProfiles);

                // Si no hay perfil actual o el perfil actual ya no existe, establecer el primero como predeterminado
                if (!currentProfileId || !fetchedProfiles.some(p => p.id === currentProfileId)) {
                    if (fetchedProfiles.length > 0) {
                        setCurrentProfileId(fetchedProfiles[0].id);
                    } else {
                        // Si no hay perfiles, crear uno por defecto para el usuario
                        const createDefaultProfile = async () => {
                            const defaultProfile = {
                                name: "Mi Perfil",
                                allergies: "Ninguna",
                                emergencyContact: "N/A",
                                bloodType: "", // Nuevo campo
                                age: "",       // Nuevo campo
                                sex: "",       // Nuevo campo
                                rut: ""        // Nuevo campo
                            };
                            try {
                                const newProfileRef = await addDoc(profilesColRef, defaultProfile);
                                setCurrentProfileId(newProfileRef.id);
                                console.log("Perfil predeterminado creado:", newProfileRef.id);
                            } catch (error) {
                                console.error("Error al crear perfil predeterminado:", error);
                            }
                        };
                        createDefaultProfile();
                    }
                }
            }, (error) => {
                console.error("Error al escuchar perfiles:", error);
            });

            return () => unsubscribe();
        }
    }, [db, userId, isAuthReady, currentProfileId]); // Dependencias para re-ejecutar cuando cambian

    return (
        <AppContext.Provider value={{ app, db, auth, userId, currentProfileId, setCurrentProfileId, profiles, isAuthReady }}>
            {children}
        </AppContext.Provider>
    );
}

// Hook personalizado para usar el contexto de la aplicación
function useAppContext() {
    return useContext(AppContext);
}

// Componente para mostrar mensajes modales (reemplazo de alert/confirm)
function Modal({ title, message, onClose, onConfirm, showCancel = false }) {
    return (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
            <div className="bg-white rounded-xl shadow-lg p-6 max-w-sm w-full animate-fade-in-up">
                <h3 className="text-xl font-bold mb-4 text-gray-800">{title}</h3>
                <p className="text-gray-600 mb-6">{message}</p>
                <div className="flex justify-end space-x-3">
                    {showCancel && (
                        <button
                            onClick={onClose}
                            className="px-5 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors duration-200"
                        >
                            Cancelar
                        </button>
                    )}
                    <button
                        onClick={onConfirm || onClose}
                        className="px-5 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors duration-200 shadow-md"
                    >
                        Aceptar
                    </button>
                </div>
            </div>
        </div>
    );
}

// Componente de navegación inferior
function Navbar({ onNavigate, currentPage }) {
    const navItems = [
        { name: "Inicio", icon: Home, page: "home" },
        { name: "Medicamentos", icon: Pill, page: "add-medication" },
        { name: "Doctor Virtual", icon: MessageSquare, page: "virtual-doctor" },
        { name: "Asistente", icon: Stethoscope, page: "medication-assistant" },
        { name: "Perfil", icon: User, page: "profile" },
    ];

    return (
        <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg z-40">
            <div className="flex justify-around items-center h-16 max-w-md mx-auto">
                {navItems.map((item) => (
                    <button
                        key={item.name}
                        onClick={() => onNavigate(item.page)}
                        className={`flex flex-col items-center justify-center px-4 py-2 text-sm font-medium transition-colors duration-200 rounded-lg
                            ${currentPage === item.page ? 'text-blue-600' : 'text-gray-500 hover:text-blue-500'}`}
                    >
                        <item.icon size={24} className="mb-1" />
                        <span>{item.name}</span>
                    </button>
                ))}
            </div>
        </nav>
    );
}

// Pantalla de Inicio
function HomeScreen({ onNavigate }) {
    const { db, userId, currentProfileId, isAuthReady } = useAppContext();
    const [medications, setMedications] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [showModal, setShowModal] = useState(false);
    const [modalContent, setModalContent] = useState({ title: '', message: '' });

    useEffect(() => {
        if (db && userId && currentProfileId && isAuthReady) {
            setLoading(true);
            setError(null);
            const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
            const medsColRef = collection(db, `artifacts/${appId}/users/${userId}/profiles/${currentProfileId}/medications`);

            const unsubscribe = onSnapshot(medsColRef, (snapshot) => {
                const fetchedMeds = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
                setMedications(fetchedMeds);
                setLoading(false);
            }, (err) => {
                console.error("Error al cargar medicamentos:", err);
                setError("Error al cargar medicamentos. Inténtalo de nuevo.");
                setLoading(false);
            });

            return () => unsubscribe();
        }
    }, [db, userId, currentProfileId, isAuthReady]);

    const handleTakeMedication = async (medId) => {
        if (!db || !userId || !currentProfileId) return;
        const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
        const medDocRef = doc(db, `artifacts/${appId}/users/${userId}/profiles/${currentProfileId}/medications`, medId);
        try {
            await updateDoc(medDocRef, {
                lastTaken: new Date().toISOString(),
                history: [...(medications.find(m => m.id === medId)?.history || []), { type: 'taken', timestamp: new Date().toISOString() }]
            });
            setModalContent({ title: "Medicamento Tomado", message: "¡Has registrado la toma de tu medicamento!" });
            setShowModal(true);
        } catch (e) {
            console.error("Error al registrar toma:", e);
            setModalContent({ title: "Error", message: "No se pudo registrar la toma. Inténtalo de nuevo." });
            setShowModal(true);
        }
    };

    const handleSkipMedication = async (medId) => {
        if (!db || !userId || !currentProfileId) return;
        const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
        const medDocRef = doc(db, `artifacts/${appId}/users/${userId}/profiles/${currentProfileId}/medications`, medId);
        try {
            await updateDoc(medDocRef, {
                history: [...(medications.find(m => m.id === medId)?.history || []), { type: 'skipped', timestamp: new Date().toISOString() }]
            });
            setModalContent({ title: "Medicamento Omitido", message: "Has marcado el medicamento como omitido." });
            setShowModal(true);
        } catch (e) {
            console.error("Error al registrar omisión:", e);
            setModalContent({ title: "Error", message: "No se pudo registrar la omisión. Inténtalo de nuevo." });
            setShowModal(true);
        }
    };

    const getNextReminder = (medication) => {
        // En una app real, esta lógica sería mucho más sofisticada para calcular el próximo recordatorio
        // basándose en la última toma, frecuencia y horarios específicos.
        if (medication.frequency && typeof medication.frequency === 'object') {
            if (medication.frequency.type === "Personalizado") {
                return medication.frequency.value;
            }
            if (medication.frequency.type === "Horarios Específicos" && medication.frequency.times && medication.frequency.times.length > 0) {
                return `Horarios: ${medication.frequency.times.join(', ')}`;
            }
            return "N/A";
        }
        // Para frecuencias antiguas o simples strings
        if (medication.frequency === "Diario") return "Hoy, " + new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        if (medication.frequency.startsWith("Cada ")) {
            const hoursMatch = medication.frequency.match(/Cada (\d+) horas/);
            if (hoursMatch && hoursMatch[1]) {
                return `Cada ${hoursMatch[1]} horas`;
            }
        }
        return "N/A";
    };

    return (
        <div className="min-h-screen bg-gray-50 p-4 pb-20 font-sans">
            <header className="flex justify-between items-center mb-6">
                <h1 className="text-3xl font-bold text-gray-800">Saludify</h1>
                <button
                    onClick={() => onNavigate('add-medication')}
                    className="bg-blue-500 text-white p-3 rounded-full shadow-lg hover:bg-blue-600 transition-all duration-200 transform hover:scale-105"
                    aria-label="Agregar Medicamento"
                >
                    <Plus size={24} />
                </button>
            </header>

            <section className="mb-8">
                <h2 className="text-xl font-semibold text-gray-700 mb-4 flex items-center">
                    <Bell size={20} className="mr-2 text-green-600" /> Próximos Recordatorios
                </h2>
                {loading ? (
                    <div className="text-center text-gray-500">Cargando recordatorios...</div>
                ) : error ? (
                    <div className="text-center text-red-500">{error}</div>
                ) : medications.length === 0 ? (
                    <div className="bg-white p-5 rounded-xl shadow-md text-center text-gray-500">
                        No hay medicamentos registrados. ¡Agrega uno!
                    </div>
                ) : (
                    <div className="space-y-4">
                        {medications.map((med) => (
                            <div key={med.id} className="bg-white p-5 rounded-xl shadow-md border border-gray-100 animate-fade-in-up">
                                <h3 className="text-lg font-semibold text-gray-800 mb-1">{med.name}</h3>
                                <p className="text-gray-600 text-sm mb-2">{med.dosage} - {getNextReminder(med)}</p> {/* Muestra la frecuencia ya procesada */}
                                <p className="text-gray-500 text-xs mb-3">Última toma: {med.lastTaken ? new Date(med.lastTaken).toLocaleString() : 'Nunca'}</p>
                                <div className="flex space-x-3">
                                    <button
                                        onClick={() => handleTakeMedication(med.id)}
                                        className="flex-1 bg-green-500 text-white py-2 rounded-lg flex items-center justify-center text-sm font-medium shadow-sm hover:bg-green-600 transition-colors duration-200"
                                    >
                                        <Check size={18} className="mr-1" /> Tomada
                                    </button>
                                    <button
                                        onClick={() => handleSkipMedication(med.id)}
                                        className="flex-1 bg-red-400 text-white py-2 rounded-lg flex items-center justify-center text-sm font-medium shadow-sm hover:bg-red-500 transition-colors duration-200"
                                    >
                                        <X size={18} className="mr-1" /> Omitida
                                    </button>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </section>

            <section>
                <h2 className="text-xl font-semibold text-gray-700 mb-4 flex items-center">
                    <History size={20} className="mr-2 text-blue-600" /> Historial Reciente
                </h2>
                {loading ? (
                    <div className="text-center text-gray-500">Cargando historial...</div>
                ) : medications.length === 0 ? (
                    <div className="bg-white p-5 rounded-xl shadow-md text-center text-gray-500">
                        Historial de cumplimiento aparecerá aquí.
                    </div>
                ) : (
                    <div className="space-y-3">
                        {medications.flatMap(med =>
                            (med.history || []).slice(-5).sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp)).map((item, index) => ( // Mostrar las últimas 5 entradas y ordenar por fecha
                                <div key={`${med.id}-${index}`} className="bg-white p-4 rounded-lg shadow-sm border border-gray-100 text-sm flex justify-between items-center">
                                    <div>
                                        <span className="font-medium text-gray-800">{med.name}</span>
                                        <span className={`ml-2 px-2 py-0.5 rounded-full text-xs font-semibold ${item.type === 'taken' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
                                            {item.type === 'taken' ? 'Tomada' : 'Omitida'}
                                        </span>
                                    </div>
                                    <span className="text-gray-500 text-xs">
                                        {new Date(item.timestamp).toLocaleString()}
                                    </span>
                                </div>
                            ))
                        )}
                        {medications.every(med => !med.history || med.history.length === 0) && (
                            <div className="bg-white p-5 rounded-xl shadow-md text-center text-gray-500">
                                Historial de cumplimiento aparecerá aquí.
                            </div>
                        )}
                    </div>
                )}
                {/* Placeholder para visualización de cumplimiento más avanzada */}
                <div className="mt-6 bg-blue-50 p-4 rounded-lg text-blue-800 text-sm border border-blue-200">
                    <p className="font-semibold">Próxima mejora: Visualización de cumplimiento.</p>
                    <p>Aquí se mostrarán gráficos interactivos para que puedas ver tu adherencia a los medicamentos a lo largo del tiempo.</p>
                </div>
            </section>

            {showModal && (
                <Modal
                    title={modalContent.title}
                    message={modalContent.message}
                    onClose={() => setShowModal(false)}
                />
            )}
        </div>
    );
}

// Pantalla para Agregar Medicamento
function AddMedicationScreen() {
    const { db, userId, currentProfileId, isAuthReady } = useAppContext();
    const [name, setName] = useState('');
    const [dosage, setDosage] = useState('');
    const [frequencyType, setFrequencyType] = useState('Diario'); // 'Diario', 'Cada X horas', 'Personalizado', 'Horarios Específicos'
    const [customFrequencyValue, setCustomFrequencyValue] = useState(''); // Para "Personalizado"
    const [specificTimes, setSpecificTimes] = useState(['09:00']); // Para "Horarios Específicos"
    const [isScanning, setIsScanning] = useState(false);
    const [loading, setLoading] = useState(false);
    const [showModal, setShowModal] = useState(false);
    const [modalContent, setModalContent] = useState({ title: '', message: '' });

    const handleAddSpecificTime = () => {
        setSpecificTimes([...specificTimes, '']); // Añadir un nuevo campo de hora vacío
    };

    const handleRemoveSpecificTime = (index) => {
        const newTimes = specificTimes.filter((_, i) => i !== index);
        setSpecificTimes(newTimes);
    };

    const handleSpecificTimeChange = (index, value) => {
        const newTimes = [...specificTimes];
        newTimes[index] = value;
        setSpecificTimes(newTimes);
    };

    const handleAddMedication = async (e) => {
        e.preventDefault();
        if (!db || !userId || !currentProfileId || !isAuthReady) {
            setModalContent({ title: "Error", message: "La aplicación no está lista. Inténtalo de nuevo." });
            setShowModal(true);
            return;
        }

        let finalFrequencyData;
        if (frequencyType === "Personalizado") {
            if (!customFrequencyValue.trim()) {
                setModalContent({ title: "Campos Incompletos", message: "Por favor, especifica la frecuencia personalizada (ej: Cada 3 horas)." });
                setShowModal(true);
                return;
            }
            finalFrequencyData = { type: "Personalizado", value: customFrequencyValue.trim() };
        } else if (frequencyType === "Horarios Específicos") {
            const validTimes = specificTimes.filter(t => t.trim() !== '');
            if (validTimes.length === 0) {
                setModalContent({ title: "Campos Incompletos", message: "Por favor, agrega al menos un horario específico." });
                setShowModal(true);
                return;
            }
            finalFrequencyData = { type: "Horarios Específicos", times: validTimes };
        } else {
            finalFrequencyData = { type: frequencyType }; // Para "Diario", "Cada 8 horas", etc.
        }

        if (!name || !dosage) {
            setModalContent({ title: "Campos Incompletos", message: "Por favor, completa el nombre y la dosis." });
            setShowModal(true);
            return;
        }

        setLoading(true);
        const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
        const medsColRef = collection(db, `artifacts/${appId}/users/${userId}/profiles/${currentProfileId}/medications`);

        try {
            await addDoc(medsColRef, {
                name,
                dosage,
                frequency: finalFrequencyData, // Usar la estructura de frecuencia final
                lastTaken: null,
                history: [],
                createdAt: new Date().toISOString()
            });
            setName('');
            setDosage('');
            setFrequencyType('Diario');
            setCustomFrequencyValue('');
            setSpecificTimes(['09:00']); // Resetear a un valor por defecto
            setModalContent({ title: "Éxito", message: "Medicamento agregado correctamente." });
            setShowModal(true);
        } catch (e) {
            console.error("Error al agregar medicamento:", e);
            setModalContent({ title: "Error", message: "No se pudo agregar el medicamento. Inténtalo de nuevo." });
            setShowModal(true);
        } finally {
            setLoading(false);
        }
    };

    const handleScanMedication = () => {
        setIsScanning(true);
        setModalContent({
            title: "Escaneo de Medicamento (IA)",
            message: "Esta función de escaneo con IA está en desarrollo. En una versión futura, podrás escanear la caja o pastilla para reconocer el medicamento automáticamente.",
            onConfirm: () => setIsScanning(false)
        });
        setShowModal(true);
    };

    return (
        <div className="min-h-screen bg-gray-50 p-4 pb-20 font-sans">
            <h1 className="text-3xl font-bold text-gray-800 mb-6">Agregar Medicamento</h1>

            <section className="bg-white p-6 rounded-xl shadow-md mb-8 animate-fade-in-up">
                <h2 className="text-xl font-semibold text-gray-700 mb-4">Ingreso Manual</h2>
                <form onSubmit={handleAddMedication} className="space-y-4">
                    <div>
                        <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">Nombre del Medicamento</label>
                        <input
                            type="text"
                            id="name"
                            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                            placeholder="Ej: Ibuprofeno"
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            required
                        />
                    </div>
                    <div>
                        <label htmlFor="dosage" className="block text-sm font-medium text-gray-700 mb-1">Dosis</label>
                        <input
                            type="text"
                            id="dosage"
                            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                            placeholder="Ej: 400 mg"
                            value={dosage}
                            onChange={(e) => setDosage(e.target.value)}
                            required
                        />
                    </div>
                    <div>
                        <label htmlFor="frequencyType" className="block text-sm font-medium text-gray-700 mb-1">Frecuencia</label>
                        <select
                            id="frequencyType"
                            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white"
                            value={frequencyType}
                            onChange={(e) => setFrequencyType(e.target.value)}
                            required
                        >
                            <option value="Diario">Diario</option>
                            <option value="Cada 8 horas">Cada 8 horas</option>
                            <option value="Cada 12 horas">Cada 12 horas</option>
                            <option value="Semanal">Semanal</option>
                            <option value="Según necesidad">Según necesidad</option>
                            <option value="Personalizado">Personalizado (ej: Cada 3 horas)</option>
                            <option value="Horarios Específicos">Horarios Específicos</option> {/* Nueva opción */}
                        </select>

                        {frequencyType === "Personalizado" && (
                            <input
                                type="text"
                                className="w-full p-3 mt-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                                placeholder="Ej: Cada 3 horas"
                                value={customFrequencyValue}
                                onChange={(e) => setCustomFrequencyValue(e.target.value)}
                                required
                            />
                        )}

                        {frequencyType === "Horarios Específicos" && (
                            <div className="mt-4 space-y-3 p-3 border border-gray-200 rounded-lg bg-gray-50">
                                <p className="text-sm font-medium text-gray-700">Define los horarios exactos:</p>
                                {specificTimes.map((time, index) => (
                                    <div key={index} className="flex items-center space-x-2">
                                        <input
                                            type="time"
                                            className="flex-1 p-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
                                            value={time}
                                            onChange={(e) => handleSpecificTimeChange(index, e.target.value)}
                                            required
                                        />
                                        {specificTimes.length > 1 && (
                                            <button
                                                type="button"
                                                onClick={() => handleRemoveSpecificTime(index)}
                                                className="p-2 bg-red-400 text-white rounded-lg hover:bg-red-500 transition-colors duration-200"
                                                aria-label="Eliminar horario"
                                            >
                                                <X size={18} />
                                            </button>
                                        )}
                                    </div>
                                ))}
                                <button
                                    type="button"
                                    onClick={handleAddSpecificTime}
                                    className="w-full flex items-center justify-center p-2 bg-blue-400 text-white rounded-lg hover:bg-blue-500 transition-colors duration-200 text-sm font-medium"
                                >
                                    <Plus size={18} className="mr-1" />
                                    Agregar Horario
                                </button>
                            </div>
                        )}
                    </div>
                    <button
                        type="submit"
                        className="w-full bg-blue-500 text-white p-3 rounded-lg font-semibold shadow-md hover:bg-blue-600 transition-colors duration-200 flex items-center justify-center"
                        disabled={loading}
                    >
                        {loading ? (
                            <svg className="animate-spin h-5 w-5 text-white mr-3" viewBox="0 0 24 24">
                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                        ) : (
                            <Plus size={20} className="mr-2" />
                        )}
                        Agregar Medicamento
                    </button>
                </form>
            </section>

            <section className="bg-white p-6 rounded-xl shadow-md animate-fade-in-up">
                <h2 className="text-xl font-semibold text-gray-700 mb-4">Escaneo con Cámara (IA)</h2>
                <p className="text-gray-600 mb-4">
                    Próximamente: Escanea la caja o pastilla de tu medicamento para reconocerlo automáticamente.
                </p>
                <button
                    onClick={handleScanMedication}
                    className="w-full bg-green-500 text-white p-3 rounded-lg font-semibold shadow-md hover:bg-green-600 transition-colors duration-200 flex items-center justify-center"
                >
                    <Camera size={20} className="mr-2" />
                    Escanear Medicamento
                </button>
                {/* Placeholder para la base de datos de medicamentos con IA */}
                <div className="mt-6 bg-blue-50 p-4 rounded-lg text-blue-800 text-sm border border-blue-200">
                    <p className="font-semibold">Próxima mejora: Base de datos de medicamentos con IA.</p>
                    <p>Aquí podrás buscar medicamentos y obtener información detallada automáticamente, o usar la cámara para identificarlos.</p>
                </div>
            </section>

            {showModal && (
                <Modal
                    title={modalContent.title}
                    message={modalContent.message}
                    onClose={() => setShowModal(false)}
                    onConfirm={modalContent.onConfirm}
                />
            )}
        </div>
    );
}

// Pantalla del Doctor Virtual (IA)
function VirtualDoctorScreen() {
    const [messages, setMessages] = useState([]);
    const [input, setInput] = useState('');
    const [loading, setLoading] = useState(false);
    const [showModal, setShowModal] = useState(false);
    const [modalContent, setModalContent] = useState({ title: '', message: '' });

    const callGeminiAPI = async (prompt) => {
        setLoading(true);
        try {
            let chatHistory = [];
            chatHistory.push({ role: "user", parts: [{ text: prompt }] });
            const payload = { contents: chatHistory };
            const apiKey = ""; // La clave API será proporcionada por el entorno de Canvas
            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;

            const response = await fetch(apiUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });

            const result = await response.json();
            if (result.candidates && result.candidates.length > 0 &&
                result.candidates[0].content && result.candidates[0].content.parts &&
                result.candidates[0].content.parts.length > 0) {
                const text = result.candidates[0].content.parts[0].text;
                return text.replace(/\*/g, ''); // Eliminar asteriscos
            } else {
                console.error("Respuesta inesperada de la API de Gemini:", result);
                return "Lo siento, no pude obtener una respuesta en este momento. Inténtalo de nuevo más tarde.";
            }
        } catch (error) {
            console.error("Error al llamar a la API de Gemini:", error);
            return "Hubo un error al conectar con el Doctor Virtual. Por favor, verifica tu conexión.";
        } finally {
            setLoading(false);
        }
    };

    const handleSendMessage = async () => {
        if (input.trim() === '') return;

        const newUserMessage = { sender: 'user', text: input };
        setMessages((prevMessages) => [...prevMessages, newUserMessage]);
        setInput('');
        setLoading(true);

        const aiResponse = await callGeminiAPI(input);
        const newAiMessage = { sender: 'ai', text: aiResponse };
        setMessages((prevMessages) => [...prevMessages, newAiMessage]);
        setLoading(false);
    };

    return (
        <div className="min-h-screen bg-gray-50 flex flex-col p-4 pb-20 font-sans">
            <h1 className="text-3xl font-bold text-gray-800 mb-4 text-center">Doctor Virtual</h1>

            <div className="bg-yellow-100 border border-yellow-300 text-yellow-800 p-3 rounded-lg text-sm mb-6 shadow-sm animate-fade-in-up">
                <p className="font-semibold">Disclaimer Legal:</p>
                <p>La información proporcionada por el Doctor Virtual es solo para fines educativos e informativos. No sustituye la consulta, diagnóstico o tratamiento médico profesional. Siempre busca el consejo de un médico u otro proveedor de salud calificado para cualquier pregunta que puedas tener sobre una condición médica.</p>
            </div>

            <div className="flex-1 overflow-y-auto mb-4 p-2 bg-white rounded-xl shadow-md border border-gray-100 flex flex-col space-y-4">
                {messages.length === 0 && (
                    <div className="text-center text-gray-500 mt-10">
                        ¡Hola! Pregúntame sobre tus medicamentos.
                        <br />
                        Ej: "¿Para qué sirve el paracetamol?"
                    </div>
                )}
                {messages.map((msg, index) => (
                    <div
                        key={index}
                        className={`flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}
                    >
                        <div
                            className={`max-w-[75%] p-3 rounded-xl shadow-sm ${
                                msg.sender === 'user'
                                    ? 'bg-blue-500 text-white rounded-br-none'
                                    : 'bg-gray-200 text-gray-800 rounded-bl-none'
                            }`}
                        >
                            {msg.text}
                        </div>
                    </div>
                ))}
                {loading && (
                    <div className="flex justify-start">
                        <div className="max-w-[75%] p-3 rounded-xl bg-gray-200 text-gray-800 rounded-bl-none animate-pulse">
                            Pensando...
                        </div>
                    </div>
                )}
            </div>

            <div className="flex items-center bg-white p-3 rounded-xl shadow-md border border-gray-100">
                <input
                    type="text"
                    className="flex-1 p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 mr-2"
                    placeholder="Escribe tu pregunta..."
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    onKeyPress={(e) => { if (e.key === 'Enter') handleSendMessage(); }}
                    disabled={loading}
                />
                <button
                    onClick={handleSendMessage}
                    className="bg-blue-500 text-white p-3 rounded-lg shadow-md hover:bg-blue-600 transition-colors duration-200"
                    disabled={loading}
                >
                    <Send size={24} />
                </button>
            </div>

            {showModal && (
                <Modal
                    title={modalContent.title}
                    message={modalContent.message}
                    onClose={() => setShowModal(false)}
                />
            )}
        </div>
    );
}

// Nueva Pantalla: Asistente de Medicamentos (IA)
function MedicationAssistantScreen() {
    const [medicationName, setMedicationName] = useState('');
    const [queryType, setQueryType] = useState('sideEffects'); // 'sideEffects' o 'interactions'
    const [response, setResponse] = useState('');
    const [loading, setLoading] = useState(false);
    const [showModal, setShowModal] = useState(false);
    const [modalContent, setModalContent] = useState({ title: '', message: '' });

    const callGeminiAPI = async (prompt) => {
        setLoading(true);
        try {
            let chatHistory = [];
            chatHistory.push({ role: "user", parts: [{ text: prompt }] });
            const payload = { contents: chatHistory };
            const apiKey = ""; // La clave API será proporcionada por el entorno de Canvas
            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;

            const res = await fetch(apiUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });

            const result = await res.json();
            if (result.candidates && result.candidates.length > 0 &&
                result.candidates[0].content && result.candidates[0].content.parts &&
                result.candidates[0].content.parts.length > 0) {
                const text = result.candidates[0].content.parts[0].text;
                return text.replace(/\*/g, ''); // Eliminar asteriscos
            } else {
                console.error("Respuesta inesperada de la API de Gemini:", result);
                return "Lo siento, no pude obtener información en este momento. Inténtalo de nuevo más tarde.";
            }
        } catch (error) {
            console.error("Error al llamar a la API de Gemini:", error);
            return "Hubo un error al conectar con el Asistente. Por favor, verifica tu conexión.";
        } finally {
            setLoading(false);
        }
    };

    const handleGetInfo = async () => {
        if (!medicationName.trim()) {
            setModalContent({ title: "Medicamento Requerido", message: "Por favor, ingresa el nombre del medicamento." });
            setShowModal(true);
            return;
        }

        let prompt = "";
        if (queryType === "sideEffects") {
            prompt = `Dame una lista concisa de los efectos secundarios comunes del medicamento ${medicationName}. Si no conoces el medicamento, indícalo.`;
        } else { // interactions
            prompt = `Enumera las posibles interacciones del medicamento ${medicationName} con otros medicamentos o sustancias comunes (alcohol, alimentos). Si no conoces el medicamento, indícalo.`;
        }

        setResponse("Buscando información...");
        const aiResponse = await callGeminiAPI(prompt);
        setResponse(aiResponse);
    };

    return (
        <div className="min-h-screen bg-gray-50 p-4 pb-20 font-sans">
            <h1 className="text-3xl font-bold text-gray-800 mb-6 text-center">Asistente de Medicamentos ✨</h1>

            <div className="bg-yellow-100 border border-yellow-300 text-yellow-800 p-3 rounded-lg text-sm mb-6 shadow-sm animate-fade-in-up">
                <p className="font-semibold">Disclaimer Legal:</p>
                <p>La información proporcionada por el Asistente de Medicamentos es solo para fines educativos e informativos. No sustituye la consulta, diagnóstico o tratamiento médico profesional. Siempre busca el consejo de un médico u otro proveedor de salud calificado para cualquier pregunta que puedas tener sobre una condición médica.</p>
            </div>

            <section className="bg-white p-6 rounded-xl shadow-md mb-8 animate-fade-in-up">
                <h2 className="text-xl font-semibold text-gray-700 mb-4">Obtener Información</h2>
                <div className="space-y-4">
                    <div>
                        <label htmlFor="medName" className="block text-sm font-medium text-gray-700 mb-1">Nombre del Medicamento</label>
                        <input
                            type="text"
                            id="medName"
                            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                            placeholder="Ej: Paracetamol"
                            value={medicationName}
                            onChange={(e) => setMedicationName(e.target.value)}
                            required
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">Tipo de Consulta</label>
                        <div className="flex space-x-4">
                            <label className="inline-flex items-center">
                                <input
                                    type="radio"
                                    name="queryType"
                                    value="sideEffects"
                                    checked={queryType === 'sideEffects'}
                                    onChange={() => setQueryType('sideEffects')}
                                    className="form-radio h-5 w-5 text-blue-600"
                                />
                                <span className="ml-2 text-gray-700">Efectos Secundarios Comunes</span>
                            </label>
                            <label className="inline-flex items-center">
                                <input
                                    type="radio"
                                    name="queryType"
                                    value="interactions"
                                    checked={queryType === 'interactions'}
                                    onChange={() => setQueryType('interactions')}
                                    className="form-radio h-5 w-5 text-blue-600"
                                />
                                <span className="ml-2 text-gray-700">Posibles Interacciones</span>
                            </label>
                        </div>
                    </div>
                    <button
                        onClick={handleGetInfo}
                        className="w-full bg-green-500 text-white p-3 rounded-lg font-semibold shadow-md hover:bg-green-600 transition-colors duration-200 flex items-center justify-center"
                        disabled={loading}
                    >
                        {loading ? (
                            <svg className="animate-spin h-5 w-5 text-white mr-3" viewBox="0 0 24 24">
                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                        ) : (
                            <Stethoscope size={20} className="mr-2" />
                        )}
                        Obtener Información
                    </button>
                </div>
            </section>

            {response && (
                <section className="bg-white p-6 rounded-xl shadow-md animate-fade-in-up">
                    <h2 className="text-xl font-semibold text-gray-700 mb-4">Resultado:</h2>
                    <div className="prose max-w-none text-gray-800">
                        <p>{response}</p>
                    </div>
                </section>
            )}

            {showModal && (
                <Modal
                    title={modalContent.title}
                    message={modalContent.message}
                    onClose={() => setShowModal(false)}
                />
            )}
        </div>
    );
}


// Pantalla SOS Medicamentos
function SOSScreen() {
    const [contact, setContact] = useState('');
    const [message, setMessage] = useState('');
    const [showModal, setShowModal] = useState(false);
    const [modalContent, setModalContent] = useState({ title: '', message: '' });

    const handleSendSOS = () => {
        if (!contact.trim()) {
            setModalContent({ title: "Contacto Requerido", message: "Por favor, ingresa un número de contacto o nombre." });
            setShowModal(true);
            return;
        }
        // Simulación de envío de SMS/Notificación
        setModalContent({
            title: "Alerta Enviada",
            message: `Se ha enviado una alerta a ${contact}. En una aplicación real, esto enviaría un SMS o notificación push.`,
        });
        setShowModal(true);
        setMessage('');
        setContact('');
    };

    return (
        <div className="min-h-screen bg-gray-50 p-4 pb-20 font-sans flex flex-col items-center justify-center">
            <h1 className="text-3xl font-bold text-gray-800 mb-8 text-center">SOS Medicamentos</h1>

            <div className="bg-white p-6 rounded-xl shadow-md w-full max-w-sm text-center animate-fade-in-up">
                <p className="text-gray-600 mb-6">
                    Envía una alerta rápida a un familiar o contacto de emergencia si necesitas ayuda o te quedas sin medicamentos.
                </p>
                <div className="mb-6">
                    <label htmlFor="contact" className="block text-sm font-medium text-gray-700 mb-1 text-left">Contacto de Emergencia (Nombre/Teléfono)</label>
                    <input
                        type="text"
                        id="contact"
                        className="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                        placeholder="Ej: Mamá / +56912345678"
                        value={contact}
                        onChange={(e) => setContact(e.target.value)}
                    />
                </div>
                <button
                    onClick={handleSendSOS}
                    className="w-full bg-red-500 text-white p-4 rounded-xl font-bold text-lg shadow-lg hover:bg-red-600 transition-colors duration-200 transform hover:scale-105 flex items-center justify-center"
                >
                    <AlertCircle size={28} className="mr-3" />
                    Enviar Alerta SOS
                </button>
            </div>

            {showModal && (
                <Modal
                    title={modalContent.title}
                    message={modalContent.message}
                    onClose={() => setShowModal(false)}
                />
            )}
        </div>
    );
}

// Pantalla de Emergencia Médica (Lock Screen accesible)
function EmergencyScreen({ onNavigate }) {
    const { db, userId, currentProfileId, profiles, isAuthReady } = useAppContext();
    const [currentProfile, setCurrentProfile] = useState(null);
    const [medications, setMedications] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        if (db && userId && currentProfileId && isAuthReady) {
            setLoading(true);
            setError(null);
            const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

            // Fetch current profile details
            const profileDocRef = doc(db, `artifacts/${appId}/users/${userId}/profiles`, currentProfileId);
            const unsubscribeProfile = onSnapshot(profileDocRef, (docSnap) => {
                if (docSnap.exists()) {
                    setCurrentProfile({ id: docSnap.id, ...docSnap.data() });
                } else {
                    console.warn("Perfil actual no encontrado para emergencia.");
                    setCurrentProfile(null);
                }
            }, (err) => {
                console.error("Error al cargar perfil para emergencia:", err);
                setError("Error al cargar datos de emergencia.");
            });

            // Fetch medications for the current profile
            const medsColRef = collection(db, `artifacts/${appId}/users/${userId}/profiles/${currentProfileId}/medications`);
            const unsubscribeMeds = onSnapshot(medsColRef, (snapshot) => {
                const fetchedMeds = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
                setMedications(fetchedMeds);
                setLoading(false);
            }, (err) => {
                console.error("Error al cargar medicamentos para emergencia:", err);
                setError("Error al cargar medicamentos de emergencia.");
                setLoading(false);
            });

            return () => {
                unsubscribeProfile();
                unsubscribeMeds();
            };
        }
    }, [db, userId, currentProfileId, isAuthReady]);

    if (loading) {
        return (
            <div className="min-h-screen bg-red-700 text-white flex items-center justify-center text-xl font-bold">
                Cargando información de emergencia...
            </div>
        );
    }

    if (error) {
        return (
            <div className="min-h-screen bg-red-700 text-white flex items-center justify-center text-xl font-bold p-4 text-center">
                {error}
                <br />
                Por favor, regresa más tarde.
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-red-700 text-white p-6 font-sans flex flex-col justify-between">
            <header className="text-center mb-8">
                <h1 className="text-4xl font-extrabold mb-2">¡EMERGENCIA MÉDICA!</h1>
                <p className="text-lg font-medium">Información Vital para Personal de Salud</p>
            </header>

            <section className="bg-white text-gray-900 p-6 rounded-xl shadow-2xl mb-8 animate-fade-in-up">
                <h2 className="text-2xl font-bold mb-4 border-b-2 border-red-300 pb-2">Datos del Paciente</h2>
                <div className="space-y-3 text-lg">
                    <p>
                        <span className="font-semibold">Nombre:</span> {currentProfile?.name || 'No especificado'}
                    </p>
                    <p>
                        <span className="font-semibold">Edad:</span> {currentProfile?.age || 'No especificado'}
                    </p>
                    <p>
                        <span className="font-semibold">Sexo:</span> {currentProfile?.sex || 'No especificado'}
                    </p>
                    <p>
                        <span className="font-semibold">Tipo de Sangre:</span> {currentProfile?.bloodType || 'No especificado'}
                    </p>
                    <p>
                        <span className="font-semibold">RUT:</span> {currentProfile?.rut || 'No especificado'}
                    </p>
                    <p>
                        <span className="font-semibold">Alergias Conocidas:</span> {currentProfile?.allergies || 'Ninguna conocida'}
                    </p>
                    <p>
                        <span className="font-semibold">Contacto de Emergencia:</span> {currentProfile?.emergencyContact || 'No especificado'}
                    </p>
                </div>
            </section>

            <section className="bg-white text-gray-900 p-6 rounded-xl shadow-2xl mb-8 animate-fade-in-up delay-100">
                <h2 className="text-2xl font-bold mb-4 border-b-2 border-red-300 pb-2">Medicamentos Actuales</h2>
                {medications.length > 0 ? (
                    <ul className="list-disc list-inside space-y-2 text-lg">
                        {medications.map((med) => (
                            <li key={med.id}>
                                <span className="font-semibold">{med.name}:</span> {med.dosage} ({typeof med.frequency === 'object' ? med.frequency.type === 'Horarios Específicos' ? med.frequency.times.join(', ') : med.frequency.value : med.frequency})
                            </li>
                        ))}
                    </ul>
                ) : (
                    <p className="text-lg text-gray-600">No hay medicamentos registrados.</p>
                )}
            </section>

            <footer className="text-center text-white text-opacity-80 text-sm mt-auto">
                <p>Saludify - Información para Emergencias</p>
                <p>Esta información es vital. Por favor, actúe con rapidez.</p>
            </footer>
        </div>
    );
}

// Pantalla de Perfil y Configuración
function ProfileScreen() {
    const { db, userId, currentProfileId, setCurrentProfileId, profiles, isAuthReady } = useAppContext();
    const [currentProfile, setCurrentProfile] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [showModal, setShowModal] = useState(false);
    const [modalContent, setModalContent] = useState({ title: '', message: '' });
    const [editMode, setEditMode] = useState(false);
    const [tempProfile, setTempProfile] = useState({
        name: '',
        allergies: '',
        emergencyContact: '',
        bloodType: '', // Nuevo
        age: '',       // Nuevo
        sex: '',       // Nuevo
        rut: ''        // Nuevo
    });

    useEffect(() => {
        if (db && userId && currentProfileId && isAuthReady) {
            setLoading(true);
            setError(null);
            const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
            const profileDocRef = doc(db, `artifacts/${appId}/users/${userId}/profiles`, currentProfileId);

            const unsubscribe = onSnapshot(profileDocRef, (docSnap) => {
                if (docSnap.exists()) {
                    const data = { id: docSnap.id, ...docSnap.data() };
                    setCurrentProfile(data);
                    // Asegurarse de que tempProfile se inicialice con todos los campos, incluso si son nulos en Firestore
                    setTempProfile({
                        name: data.name || '',
                        allergies: data.allergies || '',
                        emergencyContact: data.emergencyContact || '',
                        bloodType: data.bloodType || '',
                        age: data.age || '',
                        sex: data.sex || '',
                        rut: data.rut || ''
                    });
                } else {
                    setCurrentProfile(null);
                    setTempProfile({ name: '', allergies: '', emergencyContact: '', bloodType: '', age: '', sex: '', rut: '' });
                    console.warn("Perfil actual no encontrado.");
                }
                setLoading(false);
            }, (err) => {
                console.error("Error al cargar perfil:", err);
                setError("Error al cargar el perfil. Inténtalo de nuevo.");
                setLoading(false);
            });

            return () => unsubscribe();
        }
    }, [db, userId, currentProfileId, isAuthReady]);

    const handleUpdateProfile = async () => {
        if (!db || !userId || !currentProfileId || !currentProfile) return;
        setLoading(true);
        const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
        const profileDocRef = doc(db, `artifacts/${appId}/users/${userId}/profiles`, currentProfileId);

        try {
            await updateDoc(profileDocRef, {
                name: tempProfile.name,
                allergies: tempProfile.allergies,
                emergencyContact: tempProfile.emergencyContact,
                bloodType: tempProfile.bloodType,
                age: tempProfile.age ? parseInt(tempProfile.age) : null, // Convertir a número
                sex: tempProfile.sex,
                rut: tempProfile.rut
            });
            setEditMode(false);
            setModalContent({ title: "Perfil Actualizado", message: "Tu perfil ha sido guardado correctamente." });
            setShowModal(true);
        } catch (e) {
            console.error("Error al actualizar perfil:", e);
            setModalContent({ title: "Error", message: "No se pudo actualizar el perfil. Inténtalo de nuevo." });
            setShowModal(true);
        } finally {
            setLoading(false);
        }
    };

    const handleAddFamilyProfile = async () => {
        if (!db || !userId) return;
        const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
        const profilesColRef = collection(db, `artifacts/${appId}/users/${userId}/profiles`);

        setModalContent({
            title: "Agregar Perfil Familiar",
            message: (
                <form id="addFamilyForm" className="space-y-4 p-2">
                    <div>
                        <label htmlFor="famName" className="block text-sm font-medium text-gray-700 mb-1">Nombre</label>
                        <input type="text" id="famName" className="w-full p-2 border border-gray-300 rounded-lg" placeholder="Ej: Hijo/a" required />
                    </div>
                    <div>
                        <label htmlFor="famBloodType" className="block text-sm font-medium text-gray-700 mb-1">Tipo de Sangre</label>
                        <input type="text" id="famBloodType" className="w-full p-2 border border-gray-300 rounded-lg" placeholder="Ej: O+" />
                    </div>
                    <div>
                        <label htmlFor="famAge" className="block text-sm font-medium text-gray-700 mb-1">Edad</label>
                        <input type="number" id="famAge" className="w-full p-2 border border-gray-300 rounded-lg" placeholder="Ej: 5" />
                    </div>
                    <div>
                        <label htmlFor="famSex" className="block text-sm font-medium text-gray-700 mb-1">Sexo</label>
                        <select id="famSex" className="w-full p-2 border border-gray-300 rounded-lg bg-white">
                            <option value="">Seleccionar</option>
                            <option value="Masculino">Masculino</option>
                            <option value="Femenino">Femenino</option>
                            <option value="Otro">Otro</option>
                        </select>
                    </div>
                    <div>
                        <label htmlFor="famRut" className="block text-sm font-medium text-gray-700 mb-1">RUT</label>
                        <input type="text" id="famRut" className="w-full p-2 border border-gray-300 rounded-lg" placeholder="Ej: 12.345.678-9" />
                    </div>
                    <div>
                        <label htmlFor="famAllergies" className="block text-sm font-medium text-gray-700 mb-1">Alergias</label>
                        <input type="text" id="famAllergies" className="w-full p-2 border border-gray-300 rounded-lg" placeholder="Ej: Penicilina" />
                    </div>
                    <div>
                        <label htmlFor="famEmergency" className="block text-sm font-medium text-gray-700 mb-1">Contacto de Emergencia</label>
                        <input type="text" id="famEmergency" className="w-full p-2 border border-gray-300 rounded-lg" placeholder="Ej: +56912345678" />
                    </div>
                </form>
            ),
            showCancel: true,
            onClose: () => setShowModal(false),
            onConfirm: async () => {
                const form = document.getElementById('addFamilyForm');
                const name = form.famName.value;
                const allergies = form.famAllergies.value;
                const emergencyContact = form.famEmergency.value;
                const bloodType = form.famBloodType.value;
                const age = form.famAge.value;
                const sex = form.famSex.value;
                const rut = form.famRut.value;

                if (!name) {
                    setModalContent({ title: "Error", message: "El nombre del perfil es obligatorio." });
                    setShowModal(true);
                    return;
                }

                try {
                    const newProfileRef = await addDoc(profilesColRef, {
                        name,
                        allergies,
                        emergencyContact,
                        bloodType,
                        age: age ? parseInt(age) : null, // Convertir a número
                        sex,
                        rut,
                        isMain: false,
                        createdAt: new Date().toISOString()
                    });
                    setModalContent({ title: "Éxito", message: `Perfil de ${name} agregado correctamente.` });
                    setShowModal(true);
                } catch (e) {
                    console.error("Error al agregar perfil familiar:", e);
                    setModalContent({ title: "Error", message: "No se pudo agregar el perfil familiar." });
                    setShowModal(true);
                }
            }
        });
        setShowModal(true);
    };

    const handleDeleteProfile = (profileToDeleteId) => {
        if (profiles.length <= 1) {
            setModalContent({ title: "Error", message: "No puedes eliminar el único perfil. Debes tener al menos un perfil activo." });
            setShowModal(true);
            return;
        }

        setModalContent({
            title: "¿Eliminar Perfil?",
            message: "¿Estás seguro de que quieres eliminar este perfil? Esta acción es irreversible.",
            showCancel: true,
            onClose: () => setShowModal(false),
            onConfirm: async () => {
                if (!db || !userId) return;
                const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
                const profileDocRef = doc(db, `artifacts/${appId}/users/${userId}/profiles`, profileToDeleteId);

                try {
                    await deleteDoc(profileDocRef);
                    // Si se elimina el perfil activo, cambia al primer perfil disponible
                    if (currentProfileId === profileToDeleteId) {
                        const remainingProfiles = profiles.filter(p => p.id !== profileToDeleteId);
                        if (remainingProfiles.length > 0) {
                            setCurrentProfileId(remainingProfiles[0].id);
                        } else {
                            // Esto no debería pasar si la validación de length <= 1 funciona
                            console.warn("No quedan perfiles después de eliminar. Esto es un estado inesperado.");
                        }
                    }
                    setModalContent({ title: "Perfil Eliminado", message: "El perfil ha sido eliminado correctamente." });
                    setShowModal(true);
                } catch (e) {
                    console.error("Error al eliminar perfil:", e);
                    setModalContent({ title: "Error", message: "No se pudo eliminar el perfil." });
                    setShowModal(true);
                }
            }
        });
        setShowModal(true);
    };

    return (
        <div className="min-h-screen bg-gray-50 p-4 pb-20 font-sans">
            <h1 className="text-3xl font-bold text-gray-800 mb-6">Perfil y Configuración</h1>

            {loading ? (
                <div className="text-center text-gray-500 mt-10">Cargando perfil...</div>
            ) : error ? (
                <div className="text-center text-red-500 mt-10">{error}</div>
            ) : currentProfile ? (
                <section className="bg-white p-6 rounded-xl shadow-md mb-8 animate-fade-in-up">
                    <h2 className="text-xl font-semibold text-gray-700 mb-4 flex justify-between items-center">
                        Mi Perfil Activo ({currentProfile.name})
                        <button
                            onClick={() => setEditMode(!editMode)}
                            className="text-blue-500 hover:text-blue-600 text-sm font-medium"
                        >
                            {editMode ? "Cancelar" : "Editar"}
                        </button>
                    </h2>
                    {editMode ? (
                        <form className="space-y-4">
                            <div>
                                <label htmlFor="profileName" className="block text-sm font-medium text-gray-700 mb-1">Nombre</label>
                                <input
                                    type="text"
                                    id="profileName"
                                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
                                    value={tempProfile.name}
                                    onChange={(e) => setTempProfile({ ...tempProfile, name: e.target.value })}
                                />
                            </div>
                            <div>
                                <label htmlFor="profileBloodType" className="block text-sm font-medium text-gray-700 mb-1">Tipo de Sangre</label>
                                <input
                                    type="text"
                                    id="profileBloodType"
                                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
                                    value={tempProfile.bloodType}
                                    onChange={(e) => setTempProfile({ ...tempProfile, bloodType: e.target.value })}
                                    placeholder="Ej: A+"
                                />
                            </div>
                            <div>
                                <label htmlFor="profileAge" className="block text-sm font-medium text-gray-700 mb-1">Edad</label>
                                <input
                                    type="number"
                                    id="profileAge"
                                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
                                    value={tempProfile.age}
                                    onChange={(e) => setTempProfile({ ...tempProfile, age: e.target.value })}
                                    placeholder="Ej: 30"
                                />
                            </div>
                            <div>
                                <label htmlFor="profileSex" className="block text-sm font-medium text-gray-700 mb-1">Sexo</label>
                                <select
                                    id="profileSex"
                                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 bg-white"
                                    value={tempProfile.sex}
                                    onChange={(e) => setTempProfile({ ...tempProfile, sex: e.target.value })}
                                >
                                    <option value="">Seleccionar</option>
                                    <option value="Masculino">Masculino</option>
                                    <option value="Femenino">Femenino</option>
                                    <option value="Otro">Otro</option>
                                </select>
                            </div>
                            <div>
                                <label htmlFor="profileRut" className="block text-sm font-medium text-gray-700 mb-1">RUT</label>
                                <input
                                    type="text"
                                    id="profileRut"
                                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
                                    value={tempProfile.rut}
                                    onChange={(e) => setTempProfile({ ...tempProfile, rut: e.target.value })}
                                    placeholder="Ej: 12.345.678-9"
                                />
                            </div>
                            <div>
                                <label htmlFor="profileAllergies" className="block text-sm font-medium text-gray-700 mb-1">Alergias Conocidas</label>
                                <input
                                    type="text"
                                    id="profileAllergies"
                                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
                                    value={tempProfile.allergies}
                                    onChange={(e) => setTempProfile({ ...tempProfile, allergies: e.target.value })}
                                />
                            </div>
                            <div>
                                <label htmlFor="profileEmergency" className="block text-sm font-medium text-gray-700 mb-1">Contacto de Emergencia</label>
                                <input
                                    type="text"
                                    id="profileEmergency"
                                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
                                    value={tempProfile.emergencyContact}
                                    onChange={(e) => setTempProfile({ ...tempProfile, emergencyContact: e.target.value })}
                                />
                            </div>
                            <button
                                type="button"
                                onClick={handleUpdateProfile}
                                className="w-full bg-blue-500 text-white p-3 rounded-lg font-semibold shadow-md hover:bg-blue-600 transition-colors duration-200"
                                disabled={loading}
                            >
                                {loading ? 'Guardando...' : 'Guardar Cambios'}
                            </button>
                        </form>
                    ) : (
                        <div className="space-y-3 text-gray-700">
                            <p><span className="font-medium">Nombre:</span> {currentProfile.name}</p>
                            <p><span className="font-medium">Edad:</span> {currentProfile.age || 'No especificado'}</p>
                            <p><span className="font-medium">Sexo:</span> {currentProfile.sex || 'No especificado'}</p>
                            <p><span className="font-medium">Tipo de Sangre:</span> {currentProfile.bloodType || 'No especificado'}</p>
                            <p><span className="font-medium">RUT:</span> {currentProfile.rut || 'No especificado'}</p>
                            <p><span className="font-medium">Alergias:</span> {currentProfile.allergies || 'Ninguna'}</p>
                            <p><span className="font-medium">Contacto de Emergencia:</span> {currentProfile.emergencyContact || 'No especificado'}</p>
                            <p className="text-sm text-gray-500">ID de Usuario: {userId}</p>
                            <p className="text-sm text-gray-500">ID de Perfil Activo: {currentProfileId}</p>
                        </div>
                    )}
                </section>
            ) : (
                <div className="bg-white p-6 rounded-xl shadow-md text-center text-gray-500">
                    No se encontró el perfil.
                </div>
            )}

            <section className="bg-white p-6 rounded-xl shadow-md animate-fade-in-up">
                <h2 className="text-xl font-semibold text-gray-700 mb-4 flex justify-between items-center">
                    Modo Familiar
                    <button
                        onClick={handleAddFamilyProfile}
                        className="bg-green-500 text-white p-2 rounded-full shadow-md hover:bg-green-600 transition-colors duration-200"
                        aria-label="Agregar Perfil Familiar"
                    >
                        <Plus size={20} />
                    </button>
                </h2>
                <p className="text-gray-600 mb-4">Administra los medicamentos de otros miembros de la familia.</p>

                <div className="space-y-3">
                    {profiles.length === 0 ? (
                        <div className="text-center text-gray-500">No hay perfiles familiares.</div>
                    ) : (
                        profiles.map((profile) => (
                            <div
                                key={profile.id}
                                className={`flex items-center justify-between p-4 rounded-lg shadow-sm border ${currentProfileId === profile.id ? 'border-blue-500 bg-blue-50' : 'border-gray-200 bg-gray-100'} transition-all duration-200`}
                            >
                                <div className="flex-1">
                                    <span className="font-medium text-gray-800">{profile.name}</span>
                                    {currentProfileId === profile.id && (
                                        <span className="ml-2 px-2 py-0.5 bg-blue-200 text-blue-800 text-xs font-semibold rounded-full">
                                            Activo
                                        </span>
                                    )}
                                </div>
                                <div className="flex space-x-2">
                                    <button
                                        onClick={() => setCurrentProfileId(profile.id)}
                                        className={`px-4 py-2 rounded-lg text-sm font-medium ${currentProfileId === profile.id ? 'bg-blue-600 text-white cursor-not-allowed' : 'bg-blue-500 text-white hover:bg-blue-600'} transition-colors duration-200`}
                                        disabled={currentProfileId === profile.id}
                                    >
                                        Seleccionar
                                    </button>
                                    {profile.isMain !== true && ( // No permitir eliminar el perfil principal
                                        <button
                                            onClick={() => handleDeleteProfile(profile.id)}
                                            className="px-4 py-2 rounded-lg text-sm font-medium bg-red-400 text-white hover:bg-red-500 transition-colors duration-200"
                                        >
                                            Eliminar
                                        </button>
                                    )}
                                </div>
                            </div>
                        ))
                    )}
                </div>
            </section>

            {showModal && (
                <Modal
                    title={modalContent.title}
                    message={modalContent.message}
                    onClose={() => setShowModal(false)}
                    onConfirm={modalContent.onConfirm}
                    showCancel={modalContent.showCancel}
                />
            )}
        </div>
    );
}

// Nueva Pantalla de Bienvenida (Splash Screen)
function SplashScreen({ onNavigate }) {
    return (
        <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-blue-500 to-green-500 font-sans animate-fade-in">
            <h1 className="text-6xl font-extrabold text-white drop-shadow-lg tracking-wider">
                Saludify
            </h1>
            <p className="text-xl text-white text-opacity-80 mt-4">
                Tu salud, tu control.
            </p>
            <button
                onClick={() => onNavigate('home')}
                className="mt-12 px-8 py-4 bg-white text-blue-600 font-bold text-lg rounded-full shadow-lg hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 animate-bounce-slow"
            >
                Comenzar
            </button>
        </div>
    );
}


// Componente principal de la aplicación
function App() {
    const [currentPage, setCurrentPage] = useState('splash'); // Iniciar en la pantalla de bienvenida
    const { isAuthReady } = useAppContext();

    const renderPage = () => {
        if (!isAuthReady) {
            return (
                <div className="min-h-screen flex items-center justify-center bg-gray-100 font-sans">
                    <div className="text-center text-gray-600 text-lg">
                        <svg className="animate-spin h-8 w-8 text-blue-500 mx-auto mb-4" viewBox="0 0 24 24">
                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Cargando Saludify...
                    </div>
                </div>
            );
        }

        switch (currentPage) {
            case 'splash':
                return <SplashScreen onNavigate={setCurrentPage} />;
            case 'home':
                return <HomeScreen onNavigate={setCurrentPage} />;
            case 'add-medication':
                return <AddMedicationScreen />;
            case 'virtual-doctor':
                return <VirtualDoctorScreen />;
            case 'medication-assistant':
                return <MedicationAssistantScreen />;
            case 'sos-medication':
                return <SOSScreen />;
            case 'emergency-mode':
                return <EmergencyScreen />;
            case 'profile':
                return <ProfileScreen />;
            default:
                return <HomeScreen onNavigate={setCurrentPage} />;
        }
    };

    return (
        <div className="relative min-h-screen">
            {renderPage()}
            {currentPage !== 'splash' && currentPage !== 'emergency-mode' && (
                <Navbar onNavigate={setCurrentPage} currentPage={currentPage} />
            )}
            {/* Botón flotante para Modo Emergencia */}
            {currentPage !== 'splash' && currentPage !== 'emergency-mode' && (
                <button
                    onClick={() => setCurrentPage('emergency-mode')}
                    className="fixed bottom-20 right-4 bg-red-600 text-white p-4 rounded-full shadow-xl hover:bg-red-700 transition-all duration-200 transform hover:scale-110 z-50 animate-bounce-slow"
                    aria-label="Modo Emergencia"
                >
                    <AlertCircle size={28} />
                </button>
            )}
        </div>
    );
}

export default function AppWrapper() {
    return (
        <AppProvider>
            <App />
        </AppProvider>
    );
}