mitai-jinkendo/frontend/src/components/FoodSearchModal.jsx

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

const COUNT_UNITS = new Set(['stück', 'scheibe', 'portion', 'becher', 'tasse'])
const UNIT_LABEL = {
  stück: 'Stück', scheibe: 'Scheibe', portion: 'Portion',
  becher: 'Becher', tasse: 'Tasse', el: 'EL', tl: 'TL', prise: 'Prise',
}

function detectUnit(...texts) {
  for (const text of texts) {
    const m = String(text || '').match(
      /(\d+(?:[.,]\d+)?)\s*(stück|stk|st\.?|scheibe|portion(?:en)?|becher|tasse|el|esslöffel|tl|teelöffel|prise)\b/i
    )
    if (!m) continue
    const raw = m[2].toLowerCase().replace(/\.$/, '')
    const unit = raw.startsWith('st') && !raw.startsWith('scheibe') ? 'stück'
      : raw.startsWith('ess') || raw === 'el' ? 'el'
      : raw.startsWith('tee') || raw === 'tl' ? 'tl'
      : raw.startsWith('portion') ? 'portion'
      : raw
    return unit
  }
  return null
}

export default function FoodSearchModal({ title, initialQuery, quantityHint, onSelect, onClose }) {
  const [q, setQ] = useState(initialQuery || '')
  const [hits, setHits] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)
  const [creating, setCreating] = useState(false)
  const [showCreate, setShowCreate] = useState(false)
  const [manual, setManual] = useState({
    name_de: initialQuery || '',
    kcal: '', protein_g: '', fat_g: '', carbs_g: '',
  })
  const suggestedUnit = detectUnit(quantityHint, initialQuery)
  const [gramsPerUnit, setGramsPerUnit] = useState(
    suggestedUnit === 'el' ? '15' : suggestedUnit === 'tl' ? '5' : ''
  )
  const inputRef = useRef(null)
  const timer = useRef(null)

  const extras = () => {
    const g = parseFloat(String(gramsPerUnit).replace(',', '.'))
    if (!suggestedUnit || !g || g <= 0) return {}
    return { grams_per_unit: g, source_unit: suggestedUnit }
  }

  const runSearch = async (term) => {
    const query = (term || '').trim()
    if (query.length < 2) {
      setHits([])
      return
    }
    setLoading(true)
    setError(null)
    try {
      setHits(await api.searchBlsFoods(query, 30))
    } catch (e) {
      setError(e.message)
      setHits([])
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    inputRef.current?.focus()
    inputRef.current?.select()
    if ((initialQuery || '').trim().length >= 2) runSearch(initialQuery)
    const onKey = (e) => { if (e.key === 'Escape') onClose() }
    window.addEventListener('keydown', onKey)
    return () => {
      window.removeEventListener('keydown', onKey)
      clearTimeout(timer.current)
    }
  }, [])

  const onChange = (value) => {
    setQ(value)
    clearTimeout(timer.current)
    timer.current = setTimeout(() => runSearch(value), 250)
  }

  const createManual = async () => {
    const name = (manual.name_de || q || '').trim()
    if (!name) {
      setError('Name für den Eintrag fehlt')
      return
    }
    setCreating(true)
    setError(null)
    try {
      const food = await api.createUserFood({
        name_de: name,
        macros_per_100g: {
          kcal: parseFloat(String(manual.kcal).replace(',', '.')) || 0,
          protein_g: parseFloat(String(manual.protein_g).replace(',', '.')) || 0,
          fat_g: parseFloat(String(manual.fat_g).replace(',', '.')) || 0,
          carbs_g: parseFloat(String(manual.carbs_g).replace(',', '.')) || 0,
        },
      })
      onSelect(food, extras())
    } catch (e) {
      setError(e.message)
    } finally {
      setCreating(false)
    }
  }

  const unitLabel = UNIT_LABEL[suggestedUnit] || suggestedUnit

  return (
    <div
      style={{
        position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 20000,
        padding: 16,
      }}
      onClick={onClose}
    >
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby="food-search-title"
        onClick={(e) => e.stopPropagation()}
        style={{
          width: '100%', maxWidth: 520, maxHeight: 'min(88vh, 720px)',
          background: 'var(--surface)', borderRadius: 16,
          boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
          display: 'flex', flexDirection: 'column',
        }}
      >
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 16px', borderBottom: '1px solid var(--border)' }}>
          <h2 id="food-search-title" className="card-title" style={{ margin: 0, fontSize: 16 }}>{title || 'Lebensmittel suchen'}</h2>
          <button type="button" className="btn btn-secondary" onClick={onClose}>Schließen</button>
        </div>
        <div style={{ padding: '12px 16px' }}>
          <input
            ref={inputRef}
            className="form-input"
            style={{ width: '100%', textAlign: 'left' }}
            placeholder="Name eingeben, z. B. Haferflocken"
            value={q}
            onChange={(e) => onChange(e.target.value)}
          />
          <p style={{ fontSize: 12, color: 'var(--text3)', margin: '8px 0 0' }}>
            Suche nach dem Namen. Fehlt der Treffer, legst du unten einen eigenen Eintrag an.
          </p>
          {suggestedUnit && (
            <label style={{ display: 'block', marginTop: 10, fontSize: 13 }}>
              1 {unitLabel} ={' '}
              <input
                className="form-input"
                type="number"
                min="0.1"
                step="0.1"
                style={{ width: 90, display: 'inline-block', textAlign: 'left' }}
                value={gramsPerUnit}
                onChange={(e) => setGramsPerUnit(e.target.value)}
                placeholder={COUNT_UNITS.has(suggestedUnit) ? 'z. B. 60' : ''}
              />
              {' '}g
            </label>
          )}
        </div>
        <div style={{ overflowY: 'auto', padding: '0 16px 16px', flex: 1 }}>
          {loading && <p style={{ fontSize: 13, color: 'var(--text2)' }}>Suche…</p>}
          {error && <p style={{ color: 'var(--danger)', fontSize: 13 }}>{error}</p>}
          {!loading && q.trim().length >= 2 && hits.length === 0 && (
            <p style={{ fontSize: 13, color: 'var(--text3)' }}>Kein Treffer im Katalog.</p>
          )}
          {hits.map((h) => (
            <button
              key={h.id}
              type="button"
              className="btn btn-secondary btn-full"
              style={{ marginTop: 8, justifyContent: 'flex-start', textAlign: 'left', height: 'auto', padding: '10px 12px' }}
              onClick={() => onSelect(h, extras())}
            >
              <span>
                <strong style={{ display: 'block' }}>{h.name_de}</strong>
                <span style={{ fontSize: 12, color: 'var(--text3)' }}>
                  {h.bls_code ? `BLS ${h.bls_code}` : 'ohne Code'}
                  {h.food_group ? ` · Gruppe ${h.food_group}` : ''}
                  {h.catalog_kind !== 'official_bls' ? ' · manuell' : ''}
                </span>
              </span>
            </button>
          ))}

          <div style={{ marginTop: 16, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
            {!showCreate ? (
              <button type="button" className="btn btn-secondary btn-full" onClick={() => {
                setShowCreate(true)
                setManual((s) => ({ ...s, name_de: s.name_de || q || initialQuery || '' }))
              }}>
                Eigenes Lebensmittel anlegen
              </button>
            ) : (
              <div>
                <p style={{ fontSize: 13, fontWeight: 600, marginBottom: 8 }}>Eigener Eintrag (pro 100 g)</p>
                <input
                  className="form-input"
                  style={{ width: '100%', textAlign: 'left', marginBottom: 8 }}
                  placeholder="Name"
                  value={manual.name_de}
                  onChange={(e) => setManual({ ...manual, name_de: e.target.value })}
                />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                  {[['kcal', 'kcal'], ['protein_g', 'Protein g'], ['fat_g', 'Fett g'], ['carbs_g', 'Kohlenhydrate g']].map(([key, label]) => (
                    <label key={key} style={{ fontSize: 12, color: 'var(--text2)' }}>
                      {label}
                      <input
                        className="form-input"
                        type="number"
                        min="0"
                        step="0.1"
                        style={{ width: '100%', textAlign: 'left', marginTop: 4 }}
                        value={manual[key]}
                        onChange={(e) => setManual({ ...manual, [key]: e.target.value })}
                      />
                    </label>
                  ))}
                </div>
                <button
                  type="button"
                  className="btn btn-primary btn-full"
                  style={{ marginTop: 10 }}
                  disabled={creating}
                  onClick={createManual}
                >
                  {creating ? 'Speichere…' : 'Anlegen und zuordnen'}
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}