import { useEffect, useState } from 'react'
import { api } from '../utils/api'

export default function AdminBlsImportPage() {
  const [status, setStatus] = useState(null)
  const [msg, setMsg] = useState(null)
  const [error, setError] = useState(null)

  const load = () => {
    api.adminBlsStatus().then(setStatus).catch((e) => setError(e.message))
  }
  useEffect(() => { load() }, [])

  const run = async (kind, file, dry) => {
    setError(null)
    setMsg(dry ? 'Prüfe…' : 'Importiere…')
    try {
      const fn = kind === 'components' ? api.adminBlsImportComponents : api.adminBlsImportFoods
      const res = await fn(file, dry)
      setMsg(JSON.stringify(res, null, 2))
      if (!dry) load()
    } catch (e) {
      setError(e.message)
      setMsg(null)
    }
  }

  return (
    <div className="card">
      <h1 className="page-title">BLS 4.0 importieren</h1>
      <p style={{ fontSize: 13, color: 'var(--text2)', lineHeight: 1.6 }}>
        Offizielle Dateien von blsdb.de (frei verfügbar, MRI). Codes bleiben erhalten.
        Zuerst Components, dann die Datendatei. Immer zuerst „Prüfen“.
      </p>
      {status && (
        <p style={{ fontSize: 13 }}>
          {status.official_foods} offizielle Lebensmittel · {status.official_attributes} Stoffe ·
          {status.manual_foods} manuell · {status.source}
        </p>
      )}
      {error && <p style={{ color: 'var(--danger)' }}>{error}</p>}
      <div className="form-row" style={{ marginTop: 16 }}>
        <label className="form-label">Components XLSX</label>
        <input type="file" accept=".xlsx" onChange={(e) => e.target.files[0] && run('components', e.target.files[0], true)} />
        <input type="file" accept=".xlsx" onChange={(e) => e.target.files[0] && run('components', e.target.files[0], false)} />
      </div>
      <p style={{ fontSize: 12, color: 'var(--text3)' }}>Erstes Feld = prüfen, zweites = anwenden.</p>
      <div className="form-row">
        <label className="form-label">Daten XLSX</label>
        <input type="file" accept=".xlsx" onChange={(e) => e.target.files[0] && run('foods', e.target.files[0], true)} />
        <input type="file" accept=".xlsx" onChange={(e) => e.target.files[0] && run('foods', e.target.files[0], false)} />
      </div>
      {msg && <pre style={{ whiteSpace: 'pre-wrap', fontSize: 12, background: 'var(--surface2)', padding: 12, borderRadius: 8 }}>{msg}</pre>}
    </div>
  )
}