import { useState } from 'react'
import ProductFoundModal from './ProductFoundModal'
import ProductNotFoundForm from './ProductNotFoundForm'
import ProductSearchInput from './ProductSearchInput'
import MealTypeSelect from './MealTypeSelect'
import { defaultMealType } from '../utils/mealTypes'

export default function AddMealModal({ onLogged, onClose }) {
  const [mealType, setMealType] = useState(defaultMealType)
  const [selectedProduct, setSelectedProduct] = useState(null)
  const [showManualForm, setShowManualForm] = useState(false)

  if (selectedProduct) {
    return (
      <ProductFoundModal
        product={selectedProduct}
        initialAmountG={selectedProduct.last_amount_g ?? 100}
        initialMealType={mealType}
        onLogged={onLogged}
        onClose={() => setSelectedProduct(null)}
      />
    )
  }

  if (showManualForm) {
    return (
      <ProductNotFoundForm
        initialMealType={mealType}
        onLogged={onLogged}
        onClose={() => setShowManualForm(false)}
      />
    )
  }

  return (
    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/50 sm:items-center">
      <div className="flex max-h-[85vh] w-full max-w-sm flex-col rounded-t-2xl bg-white p-6 sm:rounded-2xl dark:bg-gray-800">
        <div className="mb-4 flex items-center justify-between">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-50">
            Mahlzeit hinzufügen
          </h2>
          <button
            onClick={onClose}
            className="text-2xl leading-none text-gray-400 dark:text-gray-500"
          >
            &times;
          </button>
        </div>

        <div className="mb-4">
          <MealTypeSelect value={mealType} onChange={setMealType} />
        </div>

        <ProductSearchInput onSelect={setSelectedProduct} placeholder="Produkt suchen (z. B. Döner)" />

        <button
          type="button"
          onClick={() => setShowManualForm(true)}
          className="mt-3 w-full rounded-lg border border-dashed border-gray-300 py-2.5 text-sm font-medium text-emerald-600 dark:border-gray-600 dark:text-emerald-400"
        >
          + Neues Produkt anlegen
        </button>
      </div>
    </div>
  )
}