import { useState } from 'react'
import { useFormData } from '../FormContext'
import Modal from './Modal'
import ConfirmModal from './ConfirmModal'
import './LastButtons.css';

export default function LastButtons({ mitSend, mitBack, handleBack}) {

    const { formData, resetFormData } = useFormData()
    const [isSending, setIsSending] = useState(false)
    const [showModal, setShowModal] = useState(false)
    const [modalMessage, setModalMessage] = useState('')
    const [modalType, setModalType] = useState('error') // 'error' oder 'success'
    const [isModalHtml, setIsModalHtml] = useState(false)
    const [showConfirmModal, setShowConfirmModal] = useState(false)
    const [isSuccessModal, setIsSuccessModal] = useState(false)
    const [isWideModal, setIsWideModal] = useState(false)

    
    const handleSenden = async () => {
        console.log("Alle Formulardaten: ", formData)

        setIsSending(true)

        try {
            // API URL aus Environment Variable
            const APIURL = import.meta.env.VITE_API_URL
            const username = import.meta.env.VITE_API_USERNAME
            const password = import.meta.env.VITE_API_PASSWORD
            
            if (!APIURL) {
                throw new Error('API URL nicht konfiguriert.')
            }

            // URL-Parameter für ID auslesen
            const urlParams = new URLSearchParams(window.location.search)
            const id = urlParams.get('id')

            if (!id) {
                throw new Error('Keine ID in der URL gefunden.')
            }

            // JSON-Objekt statt FormData erstellen
            const backendData = {
                cmd: 'UPDATEAFTER',
                id: id
            }

            // Formulardaten zu Backend-Feldern mappen
            // Basis-Status
            if (formData.stattgefunden === 'ja') {
                backendData.stattgefunden = '1'

                // Spenden-Informationen
                if (formData.spendenArt) {
                    switch (formData.spendenArt) {
                        case 'bar':
                            backendData.bezahlt = `Kasse ${formData.betrag}€`
                            break
                        case 'ueber':
                            backendData.bezahlt = 'Überweisung'
                            break
                        case 'kasse':
                            backendData.bezahlt = 'Spendenkässle'
                            break
                        case 'keine':
                            backendData.bezahlt = 'keine'
                            break
                    }
                }

            } else if (formData.stattgefunden === 'nein') {
                backendData.stattgefunden = '0'
                backendData.bezahlt = 'keine'

                // Grund für Ausfall
                if (formData.abgesagt === 'abgesagt') {
                    backendData.status = 3
                } else if (formData.abgesagt === 'verschoben') {
                    backendData.wtermin = formData.neuesDatum || '1900-01-01 00:00:00'
                }
            }

            // Bemerkungen
            backendData.remark = formData.bemerkungen || ''
            // Besucher
            backendData.besucher = formData.besucher || '0'

            // Debug: JSON-Daten loggen
            console.log("=== JSON DATA DEBUG ===")
            console.log("Original formData aus Context:", formData)
            console.log("URL ID:", id)
            console.log("Backend JSON Daten:", JSON.stringify(backendData, null, 2))
            console.log("========================")

            // HTTP Headers mit Basic Authentication und Content-Type
            const headers = {
                'Content-Type': 'application/json'
            }
            
            if (username && password) {
                const credentials = btoa(`${username}:${password}`)
                headers['Authorization'] = `Basic ${credentials}`
            }

            // Backend-Aufruf mit JSON
            const response = await fetch(APIURL, {
                method: 'POST',
                headers: headers,
                body: JSON.stringify(backendData)
            })

            if (!response.ok) {
                throw new Error(`Server-Fehler: ${response.status}`)
            }

            // Backend Response auslesen
            const responseText = await response.text()
            console.log('Backend Response (raw):', responseText)

            let result
            try {
                // Versuche JSON zu parsen
                result = JSON.parse(responseText)
                console.log('Backend Response (parsed):', result)
            } catch {
                // Falls kein JSON, behandle als einfachen Text
                console.log('Backend Response ist kein JSON, behandle als Text')
                result = { success: responseText.trim() === 'true', raw: responseText }
            }

            // Erfolg prüfen - sowohl JSON als auch Text-Format unterstützen
            const isSuccess = result.success === true ||
                result.success === 'true' ||
                responseText.trim() === 'true'

            if (isSuccess) {
                // E-Mail-Benachrichtigung senden (nicht blockierend)
                sendEmailNotification(id, formData, backendData, APIURL, headers)
                
                setModalType('success')
                setModalMessage('✅ Daten erfolgreich gespeichert!')
                setIsSuccessModal(true)
                setIsWideModal(false)
                setShowModal(true)

            } else {
                throw new Error(result.message || result.error || 'Unbekannter Fehler beim Speichern')
            }

        } catch (error) {
            console.error('Fehler beim Speichern:', error)
            setModalType('error')
            setModalMessage(`❌ Fehler beim Speichern: ${error.message}`)
            setIsSuccessModal(false)
            setIsWideModal(false)
            setShowModal(true)
        } finally {
            setIsSending(false)
        }
    }

    // E-Mail-Benachrichtigung senden (asynchron, nicht blockierend)
    const sendEmailNotification = async (id, formData, backendData, apiUrl, headers) => {
        try {
            // Details zur Sonderführung laden (für BEO und Besucher-Name)
            let beoName = 'unbekannt'
            let visitorName = 'unbekannt'
            let termin = ''

            try {
                const detailsResp = await fetch(apiUrl, {
                    method: 'POST',
                    headers,
                    body: JSON.stringify({ cmd: 'GET_ONE', id })
                })
                if (detailsResp.ok) {
                    const details = await detailsResp.json()
                    // Backend kann Objekt oder Array liefern; robust extrahieren
                    const d = Array.isArray(details) ? (details[0] || {}) : (details || {})
                    // Felder: mitarbeiter (BEO), name/vorname (Besucher), wtermin (Termin)
                    beoName = d.mitarbeiter || beoName
                    const vn = d.vorname || ''
                    const nn = d.name || ''
                    visitorName = (vn + ' ' + nn).trim() || visitorName
                    termin = d.wtermin || ''
                }
            } catch (e) {
                console.warn('Konnte Details für E-Mail nicht laden:', e)
            }
            // E-Mail-Betreff und Inhalt erstellen
            const stattgefunden = formData.stattgefunden === 'ja' ? 'Ja' : 'Nein'
            const besucher = formData.besucher || '0'
            const spenden = backendData.bezahlt || 'keine'
            const bemerkungen = formData.bemerkungen || 'keine'
            
            const subject = `Sonderführung vom ${termin} - Nachbearbeitung`
            const body = `Nachbearbeitung für Sonderführung ID ${id}

BEO: ${beoName}
Besucher: ${visitorName}
Termin: ${termin}

Stattgefunden: ${stattgefunden}
Anzahl Besucher: ${besucher}
Spenden: ${spenden}
Bemerkungen: ${bemerkungen}

Status: ${formData.stattgefunden === 'ja' ? 'Durchgeführt' : 
          formData.abgesagt === 'abgesagt' ? 'Abgesagt' : 
          formData.abgesagt === 'verschoben' ? `Verschoben auf ${formData.neuesDatum}` : 
          'Unbekannt'}

Diese E-Mail wurde automatisch vom Nachbearbeitungs-System generiert.
`

            // E-Mail-Command an Backend senden
            const emailData = {
                cmd: 'SEND_CONFIRMATION',
                to: 'rxf@gmx.de',
                subject: subject,
                body: body
            }

            const emailResponse = await fetch(apiUrl, {
                method: 'POST',
                headers: headers,
                body: JSON.stringify(emailData)
            })

            if (emailResponse.ok) {
                console.log('✅ E-Mail-Benachrichtigung erfolgreich gesendet')
            } else {
                console.warn('⚠️ E-Mail-Benachrichtigung konnte nicht gesendet werden:', emailResponse.status)
            }

        } catch (error) {
            // Fehler beim E-Mail-Versand nicht kritisch - nur loggen
            console.warn('⚠️ E-Mail-Benachrichtigung fehlgeschlagen:', error)
        }
    }

    const handleAbbruch = () => {
        setShowConfirmModal(true)
    }

    const confirmAbbruch = () => {
        setShowConfirmModal(false)
        
        // Versuche das Browser-Fenster zu schließen (wie beim Speichern)
        window.close()
        
        // Fallback: Falls window.close() nicht funktioniert
        setTimeout(() => {
            if (!window.closed) {
                // Wenn das Fenster nicht geschlossen werden kann, zur vorherigen Seite
                window.location.reload()
            }
        }, 100)
    }

    const cancelAbbruch = () => {
        setShowConfirmModal(false)
    }

    const handleAnleitung = async () => {
        try {
            // Anleitung soll im großen Modal erscheinen
            setIsWideModal(true)
            // Respect Vite base path in production (vite.config.js base: '/beoanswer/')
            const base = (import.meta.env && import.meta.env.BASE_URL) ? import.meta.env.BASE_URL : '/'
            const normalizedBase = base.endsWith('/') ? base : base + '/'
            const url = `${normalizedBase}Anleitung.html?v=${Date.now()}` // cache-bust

            // Fetch Anleitung.html relative to app base
            let response = await fetch(url)

            // Fallback: try relative path without base if first attempt failed
            if (!response.ok) {
                const fallbackUrl = `Anleitung.html?v=${Date.now()}`
                response = await fetch(fallbackUrl)
            }

            if (!response.ok) {
                throw new Error(`Fehler beim Laden der Anleitung (${response.status}): ${response.url}`)
            }

            const anleitungContent = await response.text()

            // Display the content in the modal
            setModalType('info')
            setModalMessage(anleitungContent)
            setIsModalHtml(true)
            setShowModal(true)
        } catch (error) {
            console.error('Fehler beim Laden der Anleitung:', error)
            setModalType('error')
            setModalMessage('❌ Anleitung konnte nicht geladen werden.')
            setIsModalHtml(false)
            setIsWideModal(false)
            setShowModal(true)
        }
    }

    const closeModal = () => {
        if (isSuccessModal) {
            // Bei erfolgreichem Speichern: Browser-Fenster schließen
            console.log('Schließe Browser-Fenster nach erfolgreichem Speichern...')

            // Formular zurücksetzen (für den Fall, dass das Schließen nicht funktioniert)
            resetFormData()

            // Browser-Fenster schließen
            window.close()

            // Fallback: Falls window.close() nicht funktioniert (z.B. bei direkt aufgerufenen URLs)
            // Nach 100ms prüfen, ob das Fenster noch offen ist
            setTimeout(() => {
                // Wenn das Fenster noch offen ist, zur vorherigen Seite oder Neustart
                if (!window.closed) {
                    console.log('Fenster konnte nicht geschlossen werden, führe Neustart durch...')
                    window.location.reload()
                }
            }, 100)

        } else {
            // Normales Modal schließen
            setShowModal(false)
            setModalMessage('')
            setIsModalHtml(false)
            setIsSuccessModal(false)
            setIsWideModal(false)
        }
    }

    const sendeButton = mitSend ?
        <button
            className="btnsend"
            onClick={handleSenden}
            disabled={isSending}
        >
            {isSending ? 'Speichert...' : 'Senden'}
        </button>
        : null

    const backButton = mitBack ?
        <button className="btnback" onClick={handleBack}>
            Zurück
        </button>
        : null

    return (
        <>
            <div className="lastbuttons">
                <button className="btnabbruch" onClick={handleAbbruch}>
                    Abbruch
                </button>
                <button className="btnanleit" onClick={handleAnleitung}>
                    Anleitung
                </button>
                {backButton}
                {sendeButton}
            </div>

            {showModal && (
                <Modal
                    message={modalMessage}
                    onClose={closeModal}
                    type={modalType}
                    isHtml={isModalHtml}
                    className={isWideModal ? 'custom-modal' : ''}
                />
            )}

            {showConfirmModal && (
                <ConfirmModal
                    message={`Möchten Sie wirklich abbrechen?

Alle eingegebenen Daten gehen verloren und werden nicht gespeichert.`}
                    onClose={cancelAbbruch}
                    onConfirm={confirmAbbruch}
                    type="warning"
                    title="Vorgang abbrechen?"
                />
            )}
        </>
    )
}