// src/features/legislativas/nacionales/DevAppLegislativas.tsx
import { useState } from 'react'; // <-- Importar useState
import { ResultadosNacionalesCardsWidget } from './nacionales/ResultadosNacionalesCardsWidget';
import { CongresoNacionalWidget } from './nacionales/CongresoNacionalWidget';
import { PanelNacionalWidget } from './nacionales/PanelNacionalWidget';
import { HomeCarouselWidget } from './nacionales/HomeCarouselWidget';
import './DevAppStyle.css'

// --- NUEVO COMPONENTE REUTILIZABLE PARA CONTENIDO COLAPSABLE ---
const CollapsibleWidgetWrapper = ({ children }: { children: React.ReactNode }) => {
    const [isExpanded, setIsExpanded] = useState(false);

    return (
        <div className="collapsible-container">
            <div className={`collapsible-content ${isExpanded ? 'expanded' : ''}`}>
                {children}
            </div>
            <button className="toggle-button" onClick={() => setIsExpanded(!isExpanded)}>
                {isExpanded ? 'Mostrar Menos' : 'Mostrar Más'}
            </button>
        </div>
    );
};

export const DevAppLegislativas = () => {
    // Estilos para los separadores y descripciones para mejorar la legibilidad
    const sectionStyle = {
        border: '2px solid #007bff',
        borderRadius: '8px',
        padding: '1rem 2rem',
        marginTop: '3rem',
        marginBottom: '3rem',
        backgroundColor: '#f8f9fa'
    };
    const descriptionStyle = {
        fontFamily: 'sans-serif',
        color: '#333',
        lineHeight: 1.6
    };
    const codeStyle = {
        backgroundColor: '#e9ecef',
        padding: '2px 6px',
        borderRadius: '4px',
        fontFamily: 'Roboto'
    };

    return (
        <div className="container-legislativas2025">
            <h1>Visor de Widgets</h1>

            <CongresoNacionalWidget eleccionId={2} />
            <PanelNacionalWidget eleccionId={2} />

            <div style={sectionStyle}>
                <h2>Widget: Carrusel de Resultados (Home)</h2>
                <p style={descriptionStyle}>
                    Uso: <code style={codeStyle}>&lt;HomeCarouselWidget eleccionId={2} distritoId="02" categoriaId={2} titulo="Diputados - Provincia de Buenos Aires" /&gt;</code>
                </p>
                <HomeCarouselWidget
                    eleccionId={2} // Nacional
                    distritoId="02" // Buenos Aires
                    categoriaId={2} // Diputados Nacionales
                    titulo="Diputados - Provincia de Buenos Aires"
                />
            </div>

            {/* --- SECCIÓN PARA EL WIDGET DE TARJETAS CON EJEMPLOS --- */}
            <div style={sectionStyle}>
                <h2>Widget: Resultados por Provincia (Tarjetas)</h2>
                
                <hr />

                <h3 style={{ marginTop: '2rem' }}>1. Vista por Defecto</h3>
                <p style={descriptionStyle}>
                    Sin parámetros adicionales. Muestra todas las provincias, con sus categorías correspondientes (Diputados para las 24, Senadores para las 8 que renuevan). Muestra los 2 principales partidos por defecto.
                    <br />
                    Uso: <code style={codeStyle}>&lt;ResultadosNacionalesCardsWidget eleccionId={2} /&gt;</code>
                </p>
                <CollapsibleWidgetWrapper>
                    <ResultadosNacionalesCardsWidget eleccionId={2} />
                </CollapsibleWidgetWrapper>

                <hr style={{ marginTop: '2rem' }} />

                <h3 style={{ marginTop: '2rem' }}>2. Filtrado por Provincia (focoDistritoId)</h3>
                <p style={descriptionStyle}>
                    Muestra únicamente la tarjeta de una provincia específica. Ideal para páginas de noticias locales. El ID de distrito ("02" para Bs. As., "06" para Chaco) se pasa como prop.
                    <br />
                    Ejemplo Buenos Aires: <code style={codeStyle}>&lt;ResultadosNacionalesCardsWidget eleccionId={2} focoDistritoId="02" /&gt;</code>
                </p>
                <ResultadosNacionalesCardsWidget eleccionId={2} focoDistritoId="02" />
                
                <p style={{ ...descriptionStyle, marginTop: '2rem' }}>
                    Ejemplo Chaco (que también renueva Senadores): <code style={codeStyle}>&lt;ResultadosNacionalesCardsWidget eleccionId={2} focoDistritoId="06" /&gt;</code>
                </p>
                <ResultadosNacionalesCardsWidget eleccionId={2} focoDistritoId="06" />

                <hr style={{ marginTop: '2rem' }} />

                <h3 style={{ marginTop: '2rem' }}>3. Filtrado por Categoría (focoCategoriaId)</h3>
                <p style={descriptionStyle}>
                    Muestra todas las provincias que votan para una categoría específica.
                    <br />
                    Ejemplo Senadores (ID 1): <code style={codeStyle}>&lt;ResultadosNacionalesCardsWidget eleccionId={2} focoCategoriaId={1} /&gt;</code>
                </p>
                <ResultadosNacionalesCardsWidget eleccionId={2} focoCategoriaId={1} />
                
                <hr style={{ marginTop: '2rem' }} />

                <h3 style={{ marginTop: '2rem' }}>4. Indicando Cantidad de Resultados (cantidadResultados)</h3>
                <p style={descriptionStyle}>
                    Controla cuántos partidos se muestran en cada categoría. Por defecto son 2.
                    <br />
                    Ejemplo mostrando el TOP 3 de cada categoría: <code style={codeStyle}>&lt;ResultadosNacionalesCardsWidget eleccionId={2} cantidadResultados={3} /&gt;</code>
                </p>
                <CollapsibleWidgetWrapper>
                    <ResultadosNacionalesCardsWidget eleccionId={2} cantidadResultados={3} />
                </CollapsibleWidgetWrapper>

                <hr style={{ marginTop: '2rem' }} />

                <h3 style={{ marginTop: '2rem' }}>5. Mostrando las Bancas (mostrarBancas)</h3>
                <p style={descriptionStyle}>
                    Útil para contextos donde importan las bancas. La prop <code style={codeStyle}>mostrarBancas</code> se establece en <code style={codeStyle}>true</code>.
                    <br />
                    Ejemplo en Tierra del Fuego: <code style={codeStyle}>&lt;ResultadosNacionalesCardsWidget eleccionId={2} focoDistritoId="23" mostrarBancas={true} /&gt;</code>
                </p>
                <ResultadosNacionalesCardsWidget eleccionId={2} focoDistritoId="23" mostrarBancas={true} />

                <hr style={{ marginTop: '2rem' }} />

                <h3 style={{ marginTop: '2rem' }}>6. Combinación de Parámetros</h3>
                <p style={descriptionStyle}>
                    Se pueden combinar todos los parámetros para vistas muy específicas.
                    <br />
                    Ejemplo: Mostrar el TOP 1 (el ganador) para la categoría de SENADORES en la provincia de RÍO NEGRO (Distrito ID "16").
                    <br />
                    Uso: <code style={codeStyle}>&lt;ResultadosNacionalesCardsWidget eleccionId={2} focoDistritoId="16" focoCategoriaId={1} cantidadResultados={1} /&gt;</code>
                </p>
                <ResultadosNacionalesCardsWidget eleccionId={2} focoDistritoId="16" focoCategoriaId={1} cantidadResultados={1} />

            </div>
        </div>
    );
};