import { useState, useEffect } from 'react'
import { FormProvider, useFormData } from './FormContext'
import packageJson from '../package.json'
import './App.css'
import FandStattVer from './components/FandStattVer.jsx'
import BesucherBar from './components/BesucherBar.jsx'
import Spende from './components/Spende.jsx'
import LastLine from './components/LastLine.jsx'
import Bemerkungen from './components/Bemerkungen.jsx'
import LastButtons from './components/LastButtons.jsx'
import Verschoben from './components/Verschoben.jsx'


function AppContent() {
  // States für Backend-Daten
  const [datum, setDatum] = useState("")
  const [name, setName] = useState("")
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  //const [mitsend, setMitsend] = useState(false)
  //const [mitback, setMitback] = useState(false)
  
  const version = packageJson.version
  const vdate = new Date().toLocaleDateString('de-DE')

  // States
  const [schritt, setSchritt] = useState(0)
  const [pfad, setPfad] = useState('')

  // Hole formData aus dem Context
  const { formData, updateFormData } = useFormData()

  // URL-Parameter und Backend-Aufruf
  useEffect(() => {
    const fetchData = async () => {
      // API URL aus Environment Variable laden
      const APIURL = import.meta.env.VITE_API_URL
      
      if (!APIURL) {
        throw new Error('API URL nicht konfiguriert. Bitte VITE_API_URL in .env Datei setzen.')
      }
      
      try {
        // URL-Parameter auslesen
        const urlParams = new URLSearchParams(window.location.search)
        const id = urlParams.get('id')
        
        if (!id) {
          throw new Error('Keine ID in der URL gefunden. Bitte rufen Sie die Seite mit ?id=123 auf.')
        }
        
        console.log('Loading data for ID:', id)
        
        // Backend-Aufruf mit HTTP Basic Auth
        const formData = new FormData()
        formData.append('cmd', 'GET_ONE')
        formData.append('id', id)
        
        // HTTP Basic Authentication Header erstellen
        const username = import.meta.env.VITE_API_USERNAME
        const password = import.meta.env.VITE_API_PASSWORD
        const headers = {}
        
        if (username && password) {
          const credentials = btoa(`${username}:${password}`)
          headers['Authorization'] = `Basic ${credentials}`
        }
        
        console.log(formData)

        const response = await fetch(APIURL, {
          method: 'POST',
          headers: headers,
          body: formData
        })
        
        if (!response.ok) {
          throw new Error(`Daten konnten nicht geladen werden. Server-Fehler: ${response.status}`)
        }
        
        const data = await response.json()
        
        console.log('Received data:', data) // Debug-Ausgabe
        
        // Anpassung an die Datenbankfelder der SoFue2 Tabelle
        if (!data.wtermin || !data.name) {
          throw new Error('Unvollständige Daten vom Server erhalten.')
        }
        
        // Daten aus Backend setzen
        // wtermin ist vermutlich ein datetime, also nur das Datum extrahieren
        const terminDate = new Date(data.wtermin)
        const formatiertesDatum = terminDate.toLocaleDateString('de-DE')
        
        setDatum(formatiertesDatum)
        setName(data.name + (data.vorname ? ' ' + data.vorname : ''))
        
        console.log('Data loaded:', data)
        setLoading(false)
        
      } catch (err) {
        console.error('Error loading data:', err)
        setError(err.message)
        setLoading(false)
      }
    }

    fetchData()
  }, []) // Leere Dependency-Array = nur beim ersten Laden ausführen


  // Callbacks:
  const handleFandStattVerNext = (auswahl) => {
    auswahl && setPfad(auswahl)
    handleNext()
  }

  const handleNext = () => {
    setSchritt((schritt) => schritt + 1)
  }

  const handleBack = () => {
    if (schritt > 0) {
      const neuerSchritt = schritt - 1
      setSchritt(neuerSchritt)
      
      // Entsprechende FormData-Felder zurücksetzen je nach Schritt und Pfad
      if (pfad === 'ja') {
        // JA-Pfad rückwärts
        if (schritt === 1) {
          // Von Besucher zurück zu ja/nein → Pfad löschen
          setPfad('')
          updateFormData('stattgefunden', '')
        } else if (schritt === 2) {
          // Von Spende zurück zu Besucher → Besucher löschen
          updateFormData('besucher', '')
        } else if (schritt === 3) {
          // Von Betrag/Bemerkungen zurück zu Spende → Spende löschen
          updateFormData('spendenArt', '')
        } else if (schritt === 4) {
          // Von Bemerkungen zurück → Betrag löschen (bei Bar-Spende)
          updateFormData('betrag', '')
        } else if (schritt === 5) {
          // Von Senden zurück → Bemerkungen löschen
          updateFormData('bemerkungen', '')
        }
      } else if (pfad === 'nein') {
        // NEIN-Pfad rückwärts
        if (schritt === 1) {
          // Von abgesagt/verschoben zurück zu ja/nein → Pfad löschen
          setPfad('')
          updateFormData('stattgefunden', '')
        } else if (schritt === 2) {
          // Von Datum/Senden zurück zu abgesagt/verschoben → abgesagt löschen
          updateFormData('abgesagt', '')
        } else if (schritt === 3) {
          // Von Senden zurück → neues Datum löschen (bei verschoben)
          updateFormData('neuesDatum', '')
        }
      }
    }
  }

  const setBackButton = () => {
    // setMitback(true)
  }

  // Welche Komponeneten werden angezeigt:
  const renderCoponents = () => {
    const components = []

    // Schritt 0: ja/nein - Auswahl
    components.push(
      <FandStattVer key="fandstatt" left='ja' right='nein' title='Fand die Führung statt?' 
      onNext={handleFandStattVerNext} 
      setbackButton={setBackButton}   
      iscompleted={schritt > 1} />
    )
    if (schritt === 0) {
      // Bei ja/nein Auswahl: Kein Zurück-Button, kein Senden-Button
      components.push(<LastButtons key='lastbutt' mitSend={false} mitBack={false} handleBack={handleBack}/>)
      return components
    }

    // JA-Pfad:
    if (pfad === 'ja') {
      // Schritt 1: Besucher-Anzahl
      if (schritt >= 1) {
        components.push(<BesucherBar key='besucher' title='Besucher-Anzahl' euro='' onNext={handleNext} isCompleted={schritt > 1} />
        )
      }

      // Schritt 2: Spende
      if (schritt >= 2) {
        components.push(<Spende key='spende' onNext={handleNext} isComplete={schritt > 2} />
        )
      }

      // Schritt 3: Betrag der Spende (nur bei Bar-Spende)
      if ((schritt >= 3) && (formData.spendenArt === 'bar')) {
        components.push(<BesucherBar key='betrag' title='Höhe der Barspende' euro='€' onNext={handleNext} isCompleted={schritt > 3} />
        )
      }

      // Schritt 4 (bei Bar-Spende) oder Schritt 3 (bei anderen Spenden): Bemerkungen
      const bemerkungsSchritt = (formData.spendenArt === 'bar') ? 4 : 3
      if (schritt >= bemerkungsSchritt) {
        components.push(<Bemerkungen key='bemerkungen' onNext={handleNext} isCompleted={schritt > bemerkungsSchritt} />
        )
      }

    }
    // NEIN - Pfad
    if (pfad === 'nein')  {

      // Schritt 1: abgesagt / verschoben
      if (schritt >= 1) {
        components.push(
          <FandStattVer key="abgesagt" left='abgesagt' right='verschoben' title='Die Führung wurde' radioName='abgesagt' 
            onNext={handleNext}
            setbackButton={setBackButton}   
            iscompleted={schritt > 1} />
        )
      }

      // Schritt 2:  Ende wenn abgesagt bzw. neues Datum bei verschoben
      if (schritt >= 2  && formData.abgesagt === 'verschoben') {
        components.push(<Verschoben key='verschoben' onNext={handleNext} isCompleted={schritt > 2} />
        )
      }

    }
    
    // Zurück-Button nur anzeigen wenn nicht bei ja/nein Auswahl
    const backVerfuegbar = schritt > 0
    
    // LastButtons IMMER anzeigen, aber Senden-Button nur wenn bereit
    const sendenBereit = () => {
      if (pfad === 'ja') {
        // JA-Pfad: vollständig wenn Bemerkungen-Schritt ABGESCHLOSSEN ist
        const bemerkungsSchritt = (formData.spendenArt === 'bar') ? 4 : 3
        return schritt > bemerkungsSchritt  // NACH dem Bemerkungsschritt, nicht beim Erreichen
      } else if (pfad === 'nein') {
        // NEIN-Pfad: vollständig wenn abgesagt ODER verschoben mit Datum
        if (formData.abgesagt === 'abgesagt') {
          return schritt >= 2  // Beim Erreichen von Schritt 2 (nach Auswahl abgesagt)
        } else if (formData.abgesagt === 'verschoben') {
          return schritt >= 3 && formData.neuesDatum  // Beim Erreichen von Schritt 3 mit Datum
        }
      }
      return false
    }
    
    // LastButtons immer anzeigen
    components.push(<LastButtons key='lastbutt' mitSend={sendenBereit()} mitBack={backVerfuegbar} handleBack={handleBack} />)
        
    return components
  }

  // Loading und Error States
  if (loading) {
    return (
      <div className="wrapper">
        <div>
          <h2 className="topline">Lade Daten...</h2>
          <p>Bitte warten Sie, während die Führungsdaten geladen werden.</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="wrapper">
        <div>
          <h2 className="nachbearbeitung" style={{backgroundColor: '#ff6b6b', color: 'white'}}>
            Fehler beim Laden der Daten
          </h2>
          <div style={{padding: '20px', textAlign: 'left'}}>
            <h3>❌ Die Anwendung kann nicht gestartet werden</h3>
            <p><strong>Grund:</strong> {error}</p>
            <hr />
            <h4>Mögliche Lösungen:</h4>
            <ul>
              <li>Überprüfen Sie die URL - sie sollte eine ID enthalten (z.B. ?id=123)</li>
              <li>Stellen Sie sicher, dass das Backend erreichbar ist</li>
              <li>Kontaktieren Sie den Administrator</li>
            </ul>
            <button 
              onClick={() => window.location.reload()} 
              style={{
                marginTop: '20px',
                padding: '10px 20px',
                backgroundColor: '#007bff',
                color: 'white',
                border: 'none',
                borderRadius: '5px',
                cursor: 'pointer'
              }}
            >
              Seite neu laden
            </button>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="wrapper">
      <div>
        <h2 className="topline">
          Sonderführung vom <br className="umbruch" />{datum}
        </h2>
        <h4>für {name}</h4>
        <h2 className="nachbearbeitung">Nachbearbeitung</h2>
      </div>
      {renderCoponents().map(component => component)}
      <LastLine version={version} vdate={vdate} />
    </div>
  )
}

function App() {
  return (
    <FormProvider>
      <AppContent />
    </FormProvider>
  )
}

export default App
