package at.mocode.horses.ui.components

import at.mocode.horses.domain.model.DomPferd
import io.ktor.client.*
import io.ktor.client.call.*
import io.ktor.client.plugins.contentnegotiation.*
import io.ktor.client.request.*
import io.ktor.serialization.kotlinx.json.*
import kotlinx.coroutines.MainScope
import kotlinx.coroutines.launch
import kotlinx.serialization.json.Json
import react.*
import react.dom.html.ReactHTML.div
import react.dom.html.ReactHTML.h1
import react.dom.html.ReactHTML.h3
import react.dom.html.ReactHTML.p
import react.dom.html.ReactHTML.span
import emotion.react.css

/**
 * Props for the PferdeListe component
 */
external interface PferdeListeProps : Props

// Create Ktor client for API calls
private val apiClient = HttpClient {
    install(ContentNegotiation) {
        json(Json {
            ignoreUnknownKeys = true
        })
    }
}

/**
 * React component that displays a list of horses (Pferde).
 *
 * This component loads horse data from the API and renders it as HTML.
 * Uses useState for state management and useEffectOnce for data loading.
 */
val PferdeListe = FC<PferdeListeProps> { _ ->
    // State management with useState
    var horses by useState<List<DomPferd>>(emptyList())
    var loading by useState(true)
    var error by useState<String?>(null)

    // Data loading with useEffectOnce hook
    useEffectOnce {
        val scope = MainScope()
        scope.launch {
            try {
                loading = true
                error = null
                // Load data with Ktor client
                val response = apiClient.get("http://localhost:8080/api/horses")
                val loadedHorses: List<DomPferd> = response.body()
                horses = loadedHorses
            } catch (e: Exception) {
                error = "Fehler beim Laden der Pferde: ${e.message}"
                console.error("Error loading horses:", e)
            } finally {
                loading = false
            }
        }
    }

    // Render HTML with React DOM elements
    div {
        css {
            // Basic styling for the main container
            "padding" to "20px"
            "fontFamily" to "Arial, sans-serif"
            "maxWidth" to "1200px"
            "margin" to "0 auto"
        }

        h1 {
            css {
                "color" to "#2c3e50"
                "borderBottom" to "2px solid #3498db"
                "paddingBottom" to "10px"
                "marginBottom" to "20px"
            }
            +"Pferde-Register"
        }

        when {
            loading -> {
                div {
                    css {
                        "padding" to "20px"
                        "textAlign" to "center"
                        "color" to "#666"
                        "fontSize" to "18px"
                    }
                    +"Lade Pferde..."
                }
            }
            error != null -> {
                div {
                    css {
                        "padding" to "20px"
                        "textAlign" to "center"
                        "color" to "#e74c3c"
                        "backgroundColor" to "#fdeaea"
                        "border" to "1px solid #e74c3c"
                        "borderRadius" to "8px"
                        "margin" to "20px 0"
                    }
                    +error!!
                }
            }
            horses.isEmpty() -> {
                div {
                    css {
                        "padding" to "20px"
                        "textAlign" to "center"
                        "color" to "#666"
                        "backgroundColor" to "#f8f9fa"
                        "border" to "1px solid #e0e0e0"
                        "borderRadius" to "8px"
                        "margin" to "20px 0"
                    }
                    +"Keine Pferde verfügbar"
                }
            }
            else -> {
                div {
                    css {
                        "display" to "grid"
                        "gridTemplateColumns" to "repeat(auto-fill, minmax(300px, 1fr))"
                        "gap" to "20px"
                    }
                    horses.forEach { horse ->
                        div {
                            css {
                                "border" to "1px solid #e0e0e0"
                                "borderRadius" to "8px"
                                "padding" to "15px"
                                "backgroundColor" to "#f9f9f9"
                                "boxShadow" to "0 2px 4px rgba(0,0,0,0.1)"
                                "transition" to "transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out"
                                "hover" to {
                                    "transform" to "translateY(-5px)"
                                    "boxShadow" to "0 5px 15px rgba(0,0,0,0.1)"
                                }
                            }
                            h3 {
                                css {
                                    "color" to "#3498db"
                                    "marginTop" to "0"
                                    "marginBottom" to "10px"
                                    "borderBottom" to "1px solid #e0e0e0"
                                    "paddingBottom" to "5px"
                                }
                                +horse.getDisplayName()
                            }

                            // Basic information
                            p {
                                span {
                                    +"🐎"
                                }
                                +" Geschlecht: ${horse.geschlecht.name}"
                            }

                            horse.geburtsdatum?.let { birthDate ->
                                p {
                                    span {
                                        +"📅"
                                    }
                                    +" Geburtsdatum: $birthDate"
                                    horse.getAge()?.let { age ->
                                        +" (${age} Jahre alt)"
                                    }
                                }
                            }

                            horse.rasse?.let { breed ->
                                p {
                                    span {
                                        +"🏇"
                                    }
                                    +" Rasse: $breed"
                                }
                            }

                            horse.farbe?.let { color ->
                                p {
                                    span {
                                        +"🎨"
                                    }
                                    +" Farbe: $color"
                                }
                            }

                            horse.stockmass?.let { height ->
                                p {
                                    span {
                                        +"📏"
                                    }
                                    +" Stockmaß: ${height} cm"
                                }
                            }

                            // Identification numbers
                            val identificationNumbers = mutableListOf<String>()
                            horse.lebensnummer?.let { identificationNumbers.add("Lebensnummer: $it") }
                            horse.chipNummer?.let { identificationNumbers.add("Chip: $it") }
                            horse.passNummer?.let { identificationNumbers.add("Pass: $it") }
                            horse.oepsNummer?.let { identificationNumbers.add("OEPS: $it") }
                            horse.feiNummer?.let { identificationNumbers.add("FEI: $it") }

                            if (identificationNumbers.isNotEmpty()) {
                                p {
                                    span {
                                        +"🆔"
                                    }
                                    +" Identifikation: ${identificationNumbers.joinToString(", ")}"
                                }
                            }

                            // Pedigree information
                            val pedigreeInfo = mutableListOf<String>()
                            horse.vaterName?.let { pedigreeInfo.add("Vater: $it") }
                            horse.mutterName?.let { pedigreeInfo.add("Mutter: $it") }
                            horse.mutterVaterName?.let { pedigreeInfo.add("Muttervater: $it") }

                            if (pedigreeInfo.isNotEmpty()) {
                                p {
                                    span {
                                        +"🧬"
                                    }
                                    +" Abstammung: ${pedigreeInfo.joinToString(", ")}"
                                }
                            }

                            // Breeding information
                            horse.zuechterName?.let { breeder ->
                                p {
                                    span {
                                        +"👨‍🌾"
                                    }
                                    +" Züchter: $breeder"
                                }
                            }

                            horse.zuchtbuchNummer?.let { studbook ->
                                p {
                                    span {
                                        +"📖"
                                    }
                                    +" Zuchtbuchnummer: $studbook"
                                }
                            }

                            // Status indicators
                            val statusList = mutableListOf<String>()
                            if (horse.istAktiv) statusList.add("Aktiv") else statusList.add("Inaktiv")
                            if (horse.hasCompleteIdentification()) statusList.add("Vollständig identifiziert")
                            if (horse.isOepsRegistered()) statusList.add("OEPS registriert")
                            if (horse.isFeiRegistered()) statusList.add("FEI registriert")

                            p {
                                span {
                                    +"ℹ️"
                                }
                                +" Status: ${statusList.joinToString(", ")}"
                            }

                            // Data source
                            p {
                                span {
                                    +"📊"
                                }
                                +" Datenquelle: ${horse.datenQuelle.name}"
                            }

                            // Notes
                            horse.bemerkungen?.let { notes ->
                                p {
                                    span {
                                        +"📝"
                                    }
                                    +" Bemerkungen: $notes"
                                }
                            }

                            // Creation and update dates
                            p {
                                span {
                                    +"📅"
                                }
                                +" Erstellt am: ${horse.createdAt}"
                            }

                            p {
                                span {
                                    +"🔄"
                                }
                                +" Zuletzt geändert: ${horse.updatedAt}"
                            }
                        }
                    }
                }
            }
        }
    }
}
