/**
 * Confirmation Component
 * Shows capture summary after submission
 */

const ConfirmationComponent = {
    render() {
        const capture = app.state.lastCapture;

        if (!capture) {
            return `
                <div class="nav">
                    <h1>Confirmación</h1>
                </div>
                <div class="content">
                    <div class="card">
                        <p>No hay datos de captura.</p>
                    </div>
                    <button class="btn-primary btn-full" onclick="app.navigate('home')">
                        Volver al Inicio
                    </button>
                </div>
            `;
        }

        return `
            <div class="nav">
                <h1>✅ Captura Registrada</h1>
            </div>
            
            <div class="content">
                <div class="card">
                    <h2 style="color: var(--secondary-color); text-align: center;">
                        ¡Captura guardada exitosamente!
                    </h2>
                    <p class="text-center">
                        ${capture.synced ? '✅ Sincronizada con el servidor' : '⏳ Se sincronizará cuando haya conexión'}
                    </p>
                </div>
                
                <div class="card confirmation-details">
                    <h3>Resumen de Captura</h3>
                    
                    <dl>
                        <dt>👤 Contacto y Puerto</dt>
                        <dd>
                            <strong>Puerto: ${capture.port}</strong><br>
                            ${capture.phone ? `Tel: ${capture.phone}` : ''}
                        </dd>

                        <dt>📅 Fecha y Hora</dt>
                        <dd>${this.formatDate(capture.timestamp)}</dd>
                        
                        <dt>📍 Ubicación</dt>
                        <dd>
                            ${capture.placeName ? `<strong>${capture.placeName}</strong><br>` : ''}
                            Lat: ${capture.latitude.toFixed(6)}<br>
                            Lon: ${capture.longitude.toFixed(6)}
                        </dd>
                        
                        <dt>🐟 Especies</dt>
                        <dd>
                            ${capture.items.map(item => `
                                ${item.commonName || item.customName || this.getSpeciesName(item.speciesId)}: 
                                ${item.quantity} ${item.unit === 'lbs' ? 'libras' : 'unidades'}
                            `).join('<br>')}
                        </dd>

                        <dt>📉 Otros Detalles</dt>
                        <dd>
                            <strong>Método:</strong> ${capture.fishingMethod}<br>
                            <strong>Profundidad:</strong> ${capture.depth} brazadas
                        </dd>
                    </dl>
                </div>
                
                <button class="btn-primary btn-full" onclick="app.navigate('home')">
                    🏠 Volver al Inicio
                </button>
                
                <button class="btn-secondary btn-full" onclick="app.navigate('species-selector')">
                    ➕ Registrar Otra Captura
                </button>
            </div>
        `;
    },

    init() {
        // Component initialized
    },

    formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleString('es-DO', {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    },

    getSpeciesName(speciesId) {
        if (speciesId === 'otro') return 'Otra Especie';
        const species = SpeciesSelectorComponent.allSpecies.find(s => s.id === speciesId);
        return species ? species.commonName : speciesId;
    }
};