contactsUI <- function(id) {
  ns <- NS(id)
  tagList(
    useShinyjs(),
    # Sync-Button oben
    div(
      style = "display: flex; justify-content: flex-end; margin-bottom: 8px;",
      actionBttn(ns("sync"), "Sync Hibiscus",
        size = "xs", style = "minimal",
        icon = icon("rotate"), color = "primary")
    ),
    sidebarLayout(
      sidebarPanel(width = 6,
        reactableOutput(ns("contacts_table"), height = 800)
        
      ),
      mainPanel(width = 6, 
        fluidRow(
          column(8, textInput(ns("display_name"), label = "Bezeichnung", value = NA, width = "100%")),
          column(4, numericInput(ns("cid"), label = "ID", value = NA, width = "100%"))
        ),
        fluidRow(
          column(6, textInput(ns("first_name"), label = "Vorname", value = NA, width = "100%")),
          column(6, textInput(ns("last_name"), label = "Nachname", value = NA, width = "100%"))
        ),
        fluidRow(
          column(12, textInput(ns("street"), label = "Strasse", value = NA, width = "100%"))
        ),
        fluidRow(
          column(4, textInput(ns("postal_code"), label = "PLZ", value = NA, width = "100%")),
          column(8, textInput(ns("city"), label = "Ort", value = NA, width = "100%"))
        ),
        fluidRow(
          column(4, textInput(ns("phone"), label = "Telefon", value = NA, width = "100%")),
          column(4, textInput(ns("mobile"), label = "Mobil", value = NA, width = "100%")),
          column(4, textInput(ns("email"), label = "E-Mail", value = NA, width = "100%"))
        ),
        fluidRow(
          column(4, checkboxInput(ns("is_company"), label = "Firma", value = F, width = "100%")),
          column(4, checkboxInput(ns("member"), label = "Mitglied", value = F, width = "100%"))
        ),
        fluidRow(
          column(12, textAreaInput(ns("note"), label = "Notiz", value = NA, width = "100%"))
        ),
        fluidRow(
          column(4,     actionBttn(ns("add"), "Neu", size = "sm", style = "material-flat", color = "warning", icon = icon("plus"), block = T)),
          column(4,     actionBttn(ns("del"), "Löschen", size = "sm", style = "material-flat", color = "danger", icon = icon("trash"), block = T)),
          column(4,     actionBttn(ns("save"), "Speichern", size = "sm", style = "material-flat", color = "success", icon = icon("floppy-disk"), block = T)),
        ),
        br(),
        reactableOutput(ns("entries"))
        
      )
    )
  )
}

contactsServer <- function(id, conn, r_global) {
  moduleServer(id, function(input, output, session) {
    ns <- session$ns
    
    # ── Daten ----
    refresh    <- reactiveVal(0)
    zeige_alle <- reactiveVal(FALSE)
    
    contact_data <- reactive({
      f_contacts_tabelle(conn)
    })
    
    
    # ── Filter-Buttons ----
    observeEvent(input$mitglieder, { zeige_alle(FALSE) })
    observeEvent(input$filter_alle,      { zeige_alle(TRUE)  })
    
    # ── Tabelle ----
    output$contacts_table <- renderReactable({
      reactable(
        contact_data(),
        striped       = TRUE,
        highlight     = TRUE,
        filterable    = T,
        pagination = F,
        selection     = "single",
        onClick       = "select",
        defaultSorted = list(display_name = "asc"),
        columns       = list(
          id  = colDef(show = FALSE),
          display_name  = colDef( name = "Bezeichnung", minWidth = 150    ),
          street = colDef(name = "Strasse",      minWidth = 150),
          city = colDef(name = "Ort",      minWidth = 150),
          member   = colDef(name = "Mitglied", maxWidth = 80,
            align    = "center")
        )
      )
    })
    
    ## * Selektierter Umsatz ----
    sel <- reactive(getReactableState("contacts_table", "selected"))
    observeEvent(sel(), ignoreInit = T, {
      idwert <- contact_data()$id[sel()]
      record <- f_contact(conn, idwert)
      contact_io(session, input, output, record, "schreiben")
      # ── Buchungs-Panel ----
      entries <- read_buch_tabelle(conn) %>% 
        filter(contact_id == idwert) %>%
        select(id, valuta, account_name, projektname, amount)
      output$entries <- renderReactable(
        reactable(entries,
          striped       = TRUE,
          highlight     = TRUE,
          searchable = T,
          filterable    = F,
          pagination = T,
          defaultPageSize = 6,
          selection     = "single",
          onClick       = "select",
          columns       = list(
            id  = colDef(show = FALSE),
            valuta = colDef(name = "Wertstellung", minWidth = 80),
            account_name  = colDef( name = "Konto", minWidth = 150    ),
            projektname = colDef(name = "Projekt",      minWidth = 150),
            
            amount = colDef(name = "Betrag",      minWidth = 150)
          )
        )
      )
    })
    
    ## * Speichern ----
    observeEvent(input$save, ignoreInit = T, {
      record <- leer_df_from_table(conn, "contacts")
      record <- contact_io(session, input, output, record, "lesen")
      print(record)
      dbxUpsert(conn, "contacts", records = record, where_cols = c("id"))
    })
    
    ## * Hinzufügen ----
    observeEvent(input$add, ignoreInit = T, {
      record <- leer_df_from_table(conn, "contacts")
      record$id <- max_id(conn, "contacts")
      record <- contact_io(session, input, output, record, "schreiben")
    })
    ## * Löschen ----
    observeEvent(input$del, ignoreInit = T, {
      dbxDelete(conn, "contacts", where = data.frame(id = input$cid))
    })
    
    
    
    
    
    
    # ── Zur Buchung springen ----
    # observeEvent(input$goto_buchung, {
    #   req(selected_umsatz())
    #   r_global$nav_history      <- c(r_global$nav_history, list(list(tab = "umsatz")))
    #   r_global$jump_to_entry_id <- selected_umsatz()$entry_id
    #   r_global$active_tab       <- "buchungen"
    # })
    
    
    
    
    
    
    
  })
}