import React, { useState, useEffect, useRef, useMemo } from 'react';
import '@material/web/button/filled-button.js';
import '@material/web/button/outlined-button.js';
import '@material/web/select/filled-select.js';
import '@material/web/select/select-option.js';
import '@material/web/radio/radio.js';
import '@material/web/slider/slider.js';
// import '@material/web/card/card.js'; // Temporalmente comentado
import './App.css';

// Importa la fuente Roboto de Google Fonts
import "@fontsource/roboto"; // npm install @fontsource/roboto

function App() {
    const [lineaSeleccionada, setLineaSeleccionada] = useState('');
    const [paradaSeleccionada, setParadaSeleccionada] = useState('');
    const [tipoParada, setTipoParada] = useState('actual');
    const [audio, setAudio] = useState(null);
    const [volume, setVolume] = useState(1);
    const audioRef = useRef(null);
    const [theme, setTheme] = useState('light');
    const [playing, setPlaying] = useState(false);
    const [ciudadSeleccionada, setCiudadSeleccionada] = useState('');

    // Diccionario de paradas por línea para evitar mezclas y garantizar independencia
    const paradasPorLinea = useMemo(() => ({
        "Línea 1": [
            "Zafra", "Julio Caro Baroja (Aqualon)", "Avda. Alemania (Esquina Ruiz de Alda)",
            "Avda. Alemania (Plaza de Toros)", "Bda. Navidad", "Don Bosco",
            "Plaza de los Dolores", "Barriada del Carmen", "Humilladero", "Cardeñas",
            "Orden Baja", "Gonzalo de Berceo", "Plaza Niño Miguel", "Magnolia",
            "Hospital JRJ", "Plaza las Amapolas", "Av. Andalucia (Castaño Robledo)",
            "Monumento al Fútbol", "Relaciones Laborales (Universidad)",
            "Vista Alegre-Universidad", "Centro Comercial Holea", "Cruce Romeralejo",
            "Universidad. Avenida de las Artes", "Palacio de Deportes",
            "Higueral (Fuerzas Armadas)", "Bda. José Antonio", "Isla Chica",
            "Las Delicias", "El Árbol", "Gasolinera", "Estación de Ferrocarril",
            "El punto", "Estación de Sevilla", "Nuevo Mercado"
        ],
        "Línea 2": [
            "Zafra", "Nuevo Mercado", "Villa de Madrid", "Avenida Italia Estación de Sevilla",
            "El Punto", "Estación de Ferrocarril", "Juzgados",
            "Barrio Obrero", "El Porvenir", "Las Delicias", "Isla Chica",
            "Bda. José Antonio", "Fuerzas Armadas Los Rosales", "Palacio de Deportes",
            "Ciencias de la Educación (Universidad)", "Biblioteca (Universidad)",
            "Monumento al Fútbol", "Relaciones Laborales (Universidad)",
            "Vista Alegre-Universidad", "Centro Comercial Holea", "Plaza las Amapolas",
            "Hospital JRJ", "Magnolia", "Orden Alta", "Gonzalo de Berceo (Alto)",
            "Gonzalo de Berceo (Bajo)", "Orden Baja", "Legión Española", "Cardeñas",
            "Humilladero", "Bda. del Carmen", "Santa Lucía", "Santa Eulalia",
            "Bda. Navidad", "Molino de la Vega", "Paseo de las Palmeras",
            "Julio Caro Baroja (Aqualon)"
        ],
        "Línea 3": [
            "Zafra", "Plaza de la Vera Cruz", "San Andrés", "Av. Manuel Siurot", "La Morana",
            "Obispado", "Colegio Mayor San Pablo", "Ciudad Deportiva", "Av. Manuel Siurot (Montessori)",
            "Santuario Nuestra Sra. de la Cinta", "Legión Española (O. Alta)", "Montevideo (Legión Española)",
            "Orden Baja", "Zenobia (IPFD)", "Cruce Cementerio", "La Orden", "Avda. Santa Marta",
            "Gómez de Avellaneda", "Urb. Santa Mª del Pilar (Verdeluz)", "Honduras (Saladillo)",
            "Alanís de la Sierra", "Galaroza (H. Palomo)", "Jabugo", "Pérez Cubillas", "Jabugo",
            "Isla Chica", "Las Delicias", "El Árbol", "Polideportivo Andrés Estrada", "Bomberos",
            "San Sebastián (Bomberos)", "San Sebastián (Plaza los Litri)", "San Andrés",
            "Plaza de la Merced (Universidad)", "Molino de la Vega", "Paseo de las Palmeras", "Zafra"
        ],
        "Línea 141": ["Puente de Vallecas"],
        "Línea T32": ["Profesor Raúl Vázquez"]
    }), []);

    // Estructura de líneas con ciudad
    const datos = [
        { ciudad: "Huelva", linea: "Línea 1" },
        { ciudad: "Huelva", linea: "Línea 2" },
        { ciudad: "Huelva", linea: "Línea 3" },
        { ciudad: "Madrid", linea: "Línea 141" },
        { ciudad: "Madrid", linea: "Línea T32" }
    ];

    const ciudades = [
        "Huelva",
        "Madrid",
        "Sevilla"
    ];

    // Filtra las líneas por ciudad seleccionada
    const lineasFiltradas = datos.filter(d => d.ciudad === ciudadSeleccionada);

    // Busca las paradas de la línea seleccionada de forma segura
    const paradasFiltradas = paradasPorLinea[lineaSeleccionada] || [];

    const handleLineaChange = (event) => {
        setLineaSeleccionada(event.target.value);
        setParadaSeleccionada('');
        // Recarga interna: fuerza el componente de paradas a "resetearse"
        // Si usas un key en el select de paradas, cambiará el componente y limpiará el menú
        setParadasKey(Math.random());
    };

    // Key para forzar recarga del select de paradas
    const [paradasKey, setParadasKey] = useState(0);

    const handleParadaChange = (event) => {
        setParadaSeleccionada(event.target.value);
    };

    const handleVolumeChange = (event) => {
        setVolume(event.target.value);
        // Aplica el volumen global a cualquier audio que esté sonando
        if (audioRef.current) {
            audioRef.current.volume = event.target.value;
        }
    };

    const reproducirAudio = () => {
        if (audio && playing) {
            audio.pause();
            setPlaying(false);
        } else if (lineaSeleccionada && paradaSeleccionada) {
            const playAudio = (audioFile) => {
                const nuevoAudio = new Audio(audioFile);
                nuevoAudio.volume = volume; // Aplica volumen global
                nuevoAudio.play().catch(error => {
                    console.error("Error al reproducir audio:", error);
                });

                nuevoAudio.onended = () => {
                    setPlaying(false);
                };

                return nuevoAudio;
            };

            const lineaSinEspacios = lineaSeleccionada.split(" ")[1] || lineaSeleccionada.split(" ")[0];

            if (tipoParada === "noUsar") {
                let paradaAudioFile = `/audio/${lineaSinEspacios}-${paradaSeleccionada.toLowerCase().replace(/ /g, "_")}.wav`;
                const paradaAudio = playAudio(paradaAudioFile);
                setAudio(paradaAudio);
                audioRef.current = paradaAudio;
                paradaAudio.volume = volume;
            } else {
                const paradaTipoAudio = playAudio(`/audio/parada_${tipoParada}.wav`);
                setAudio(paradaTipoAudio);
                audioRef.current = paradaTipoAudio;
                paradaTipoAudio.volume = volume;

                paradaTipoAudio.onended = () => {
                    let paradaAudioFile = `/audio/${lineaSinEspacios}-${paradaSeleccionada.toLowerCase().replace(/ /g, "_")}.wav`;
                    const paradaAudio = playAudio(paradaAudioFile);
                    setAudio(paradaAudio);
                    audioRef.current = paradaAudio;
                    paradaAudio.volume = volume;
                };
            }
            setPlaying(true);
        } else {
            console.log("Por favor, selecciona una línea y una parada.");
            alert("Para reproducir el audio, selecciona una línea y una parada.");
        }
    };

    const reproducirColision = () => {
        const audioColision = new Audio('/audio/colision.wav');
        audioColision.volume = volume; // Aplica volumen global
        audioColision.play().catch(error => {
            console.error("Error al reproducir audio:", error);
        });
    };

    const reproducirCanceladora = (audioNombre) => {
        const audioCanceladora = new Audio(`/audio/${audioNombre}.mp3`);
        audioCanceladora.volume = volume; // Aplica volumen global
        audioCanceladora.play().catch(error => {
            console.error("Error al reproducir audio:", error);
        });
    };

    useEffect(() => {
        // Elimina variables no usadas
        // const audioActual = new Audio(`/audio/parada_actual.wav`);
        // const audioSiguiente = new Audio(`/audio/parada_siguiente.wav`);

        // Usar paradasPorLinea para evitar error de undefined
        Object.entries(paradasPorLinea).forEach(([linea, paradas]) => {
            paradas.forEach(parada => {
                const lineaSinEspacios = linea.split(" ")[1] || linea.split(" ")[0];
                // Solo crea el objeto, no lo asignes a una variable no usada
                new Audio(`/audio/${lineaSinEspacios}-${parada.toLowerCase().replace(/ /g, "_")}.wav`);
            });
        });
    }, [paradasPorLinea]);

    useEffect(() => {
        localStorage.setItem('theme', theme);

        // Material 3 green-based color schemes (from your images)
        const lightScheme = {
            '--md-sys-color-primary': '#4C7A1F', // P-40
            '--md-sys-color-on-primary': '#FFFFFF', // P-100
            '--md-sys-color-primary-container': '#B6F397', // P-90
            '--md-sys-color-on-primary-container': '#17360D', // P-10
            '--md-sys-color-secondary': '#6A745F', // S-40
            '--md-sys-color-on-secondary': '#FFFFFF', // S-100
            '--md-sys-color-secondary-container': '#D7E2C7', // S-90
            '--md-sys-color-on-secondary-container': '#23281B', // S-10
            '--md-sys-color-tertiary': '#2B6A78', // T-40
            '--md-sys-color-on-tertiary': '#FFFFFF', // T-100
            '--md-sys-color-tertiary-container': '#B6EAF3', // T-90
            '--md-sys-color-on-tertiary-container': '#102A2F', // T-10
            '--md-sys-color-error': '#BA1A1A', // E-40
            '--md-sys-color-on-error': '#FFFFFF', // E-100
            '--md-sys-color-error-container': '#FFDAD6', // E-90
            '--md-sys-color-on-error-container': '#410002', // E-10
            '--md-sys-color-background': '#F7F9F3', // N-98
            '--md-sys-color-on-background': '#1A1C18', // N-10
            '--md-sys-color-surface': '#F7F9F3', // N-98
            '--md-sys-color-on-surface': '#1A1C18', // N-10
            '--md-sys-color-surface-variant': '#E1E3D6', // NV-80
            '--md-sys-color-on-surface-variant': '#45483C', // NV-30
            '--md-sys-color-outline': '#76786B', // NV-50
            '--md-sys-color-outline-variant': '#C5C8B7', // NV-80
            '--md-sys-color-surface-dim': '#E3E3DB', // N-87
            '--md-sys-color-surface-bright': '#F7F9F3', // N-98
            '--md-sys-color-surface-container-lowest': '#FFFFFF', // N-100
            '--md-sys-color-surface-container-low': '#F1F3EB', // N-96
            '--md-sys-color-surface-container': '#ECEEE6', // N-94
            '--md-sys-color-surface-container-high': '#E7E9E1', // N-92
            '--md-sys-color-surface-container-highest': '#E3E3DB', // N-90
        };

        const darkScheme = {
            '--md-sys-color-primary': '#B6F397', // P-80
            '--md-sys-color-on-primary': '#17360D', // P-20
            '--md-sys-color-primary-container': '#2B5A1B', // P-30
            '--md-sys-color-on-primary-container': '#D6FFD6', // P-90
            '--md-sys-color-secondary': '#B6BFA8', // S-80
            '--md-sys-color-on-secondary': '#23281B', // S-20
            '--md-sys-color-secondary-container': '#3C4430', // S-30
            '--md-sys-color-on-secondary-container': '#E7F3D7', // S-90
            '--md-sys-color-tertiary': '#8FE6F3', // T-80
            '--md-sys-color-on-tertiary': '#102A2F', // T-20
            '--md-sys-color-tertiary-container': '#1B4A5A', // T-30
            '--md-sys-color-on-tertiary-container': '#D6F6FF', // T-90
            '--md-sys-color-error': '#FFDAD6', // E-80
            '--md-sys-color-on-error': '#BA1A1A', // E-20
            '--md-sys-color-error-container': '#93000A', // E-30
            '--md-sys-color-on-error-container': '#FFDAD6', // E-90
            '--md-sys-color-background': '#23281B', // N-6
            '--md-sys-color-on-background': '#E3E3DB', // N-90
            '--md-sys-color-surface': '#23281B', // N-6
            '--md-sys-color-on-surface': '#E3E3DB', // N-90
            '--md-sys-color-surface-variant': '#45483C', // NV-30
            '--md-sys-color-on-surface-variant': '#C5C8B7', // NV-80
            '--md-sys-color-outline': '#76786B', // NV-60
            '--md-sys-color-outline-variant': '#45483C', // NV-30
            '--md-sys-color-surface-dim': '#1A1C18', // N-4
            '--md-sys-color-surface-bright': '#3C4430', // N-24
            '--md-sys-color-surface-container-lowest': '#181A14', // N-4
            '--md-sys-color-surface-container-low': '#23281B', // N-10
            '--md-sys-color-surface-container': '#23281B', // N-12
            '--md-sys-color-surface-container-high': '#2B2F23', // N-17
            '--md-sys-color-surface-container-highest': '#353A2B', // N-22
        };

        const scheme = theme === 'dark' ? darkScheme : lightScheme;
        for (const [key, value] of Object.entries(scheme)) {
            document.body.style.setProperty(key, value);
        }

        document.body.classList.toggle('dark-theme', theme === 'dark');
        document.body.classList.toggle('light-theme', theme === 'light');
    }, [theme]);

    const toggleTheme = () => {
        setTheme(theme === 'light' ? 'dark' : 'light');
    };

    return (
        <div
            style={{
                maxWidth: 480,
                margin: "2rem auto",
                fontFamily: "'Roboto', Arial, Helvetica, sans-serif"
            }}
        >
            <h1 style={{ marginBottom: "1.5rem" }}>Aplicación de Megafonía</h1>

            {/* Dropdown de ciudad */}
            <div style={{ marginBottom: "1.5rem" }}>
                <label htmlFor="ciudad">Ciudad:</label>
                <md-filled-select
                    id="ciudad"
                    value={ciudadSeleccionada}
                    onInput={e => {
                        setCiudadSeleccionada(e.target.value);
                        setLineaSeleccionada('');
                        setParadaSeleccionada('');
                        setParadasKey(Math.random());
                    }}
                    style={{ width: "100%" }}
                >
                    <md-select-option value="">
                        <div slot="headline">Selecciona una ciudad</div>
                    </md-select-option>
                    {ciudades.map((ciudad) => (
                        <md-select-option key={ciudad} value={ciudad}>
                            <div slot="headline">{ciudad}</div>
                        </md-select-option>
                    ))}
                </md-filled-select>
            </div>

            <div style={{ border: "1px solid #ccc", borderRadius: 12, marginBottom: "1.5rem", boxShadow: "0 2px 4px #0001" }}>
                <div style={{ padding: "1rem" }}>
                    <div style={{ marginBottom: "1.5rem" }}>
                        <label htmlFor="linea">Línea:</label>
                        <md-filled-select
                            id="linea"
                            value={lineaSeleccionada}
                            onInput={e => handleLineaChange({ target: { value: e.target.value } })}
                            style={{ width: "100%" }}
                            disabled={!ciudadSeleccionada}
                        >
                            <md-select-option value="">
                                <div slot="headline">Selecciona una línea</div>
                            </md-select-option>
                            {lineasFiltradas.map((l) => (
                                <md-select-option key={l.linea} value={l.linea}>
                                    <div slot="headline">{l.linea}</div>
                                </md-select-option>
                            ))}
                        </md-filled-select>
                    </div>

                    <div>
                        <label htmlFor="parada">Parada:</label>
                        <md-filled-select
                            key={paradasKey}
                            id="parada"
                            value={paradaSeleccionada}
                            onInput={e => handleParadaChange({ target: { value: e.target.value } })}
                            style={{ width: "100%" }}
                            disabled={!lineaSeleccionada}
                        >
                            <md-select-option value="">
                                <div slot="headline">Selecciona una parada</div>
                            </md-select-option>
                            {paradasFiltradas.map((parada) => (
                                <md-select-option key={parada} value={parada}>
                                    <div slot="headline">{parada}</div>
                                </md-select-option>
                            ))}
                        </md-filled-select>
                    </div>
                </div>
            </div>

            <div style={{ border: "1px solid #ccc", borderRadius: 12, marginBottom: "1.5rem", boxShadow: "0 2px 4px #0001" }}>
                <div style={{ padding: "1rem" }}>
                    <div style={{ marginBottom: "1.5rem" }}>
                        <label htmlFor="tipoParada" style={{ marginBottom: 8, display: "block", fontWeight: 500 }}>
                            Tipo de parada:
                        </label>
                        <div
                            id="tipoParada"
                            style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}
                        >
                            <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }}>
                                <md-radio
                                    name="tipoParada"
                                    value="actual"
                                    checked={tipoParada === "actual"}
                                    onChange={e => setTipoParada(e.target.value)}
                                    style={{ verticalAlign: "middle" }}
                                ></md-radio>
                                Parada actual
                            </label>
                            <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }}>
                                <md-radio
                                    name="tipoParada"
                                    value="siguiente"
                                    checked={tipoParada === "siguiente"}
                                    onChange={e => setTipoParada(e.target.value)}
                                    style={{ verticalAlign: "middle" }}
                                ></md-radio>
                                Parada siguiente
                            </label>
                            <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }}>
                                <md-radio
                                    name="tipoParada"
                                    value="noUsar"
                                    checked={tipoParada === "noUsar"}
                                    onChange={e => setTipoParada(e.target.value)}
                                    style={{ verticalAlign: "middle" }}
                                ></md-radio>
                                No usar (para EMT Madrid)
                            </label>
                        </div>
                    </div>

                    <div>
                        <label htmlFor="volume">Volumen:</label>
                        <md-slider
                            id="volume"
                            min={0}
                            max={1}
                            step={0.1}
                            value={volume}
                            onInput={e => handleVolumeChange({ target: { value: Number(e.target.value) } })}
                            style={{ width: "100%" }}
                        ></md-slider>
                    </div>
                </div>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: "1rem", marginBottom: "1.5rem" }}>
                <md-filled-button
                    onClick={reproducirAudio}
                    disabled={!lineaSeleccionada || !paradaSeleccionada}
                >
                    {playing ? "Detener" : "Reproducir"}
                </md-filled-button>
                <md-outlined-button onClick={toggleTheme}>
                    Cambiar tema a {theme === 'light' ? 'oscuro' : 'claro'}
                </md-outlined-button>
                <md-filled-button onClick={reproducirColision} style={{ background: "#d32f2f", color: "#fff" }}>
                    Anti-Colisión
                </md-filled-button>
            </div>

            <div style={{ border: "1px solid #ccc", borderRadius: 12, marginBottom: "1.5rem", boxShadow: "0 2px 4px #0001" }}>
                <div style={{ padding: "1rem" }}>
                    <h5>Canceladora</h5>
                    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
                        <md-filled-button onClick={() => reproducirCanceladora('hora_de_salida')}>
                            Hora de Salida
                        </md-filled-button>
                        <md-filled-button onClick={() => reproducirCanceladora('atencion_a_su_saldo')}>
                            Atención a su Saldo
                        </md-filled-button>
                        <md-filled-button onClick={() => reproducirCanceladora('saldo_insuficiente')}>
                            Saldo Insuficiente
                        </md-filled-button>
                    </div>
                </div>
            </div>


        </div>
    );
}

export default App;