import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { X, ShoppingCart } from 'lucide-react'

const BASICS = ['salz', 'pfeffer', 'zucker', 'mehl', 'öl', 'wasser', 'essig']

interface Ingredient {
  name: string
  amount?: number
  unit?: string
}

interface Props {
  open: boolean
  onClose: () => void
  ingredients: Ingredient[]
  onSubmit: (selected: Ingredient[]) => void
  loading?: boolean
}

export function IngredientPickerModal({ open, onClose, ingredients, onSubmit, loading }: Props) {
  const [checked, setChecked] = useState<Set<number>>(() => new Set(ingredients.map((_, i) => i)))

  const toggle = (i: number) => {
    setChecked((prev) => {
      const next = new Set(prev)
      if (next.has(i)) next.delete(i)
      else next.add(i)
      return next
    })
  }

  const selectAll = () => setChecked(new Set(ingredients.map((_, i) => i)))
  const selectNone = () => setChecked(new Set())
  const deselectBasics = () => {
    setChecked((prev) => {
      const next = new Set(prev)
      ingredients.forEach((ing, i) => {
        if (BASICS.some((b) => ing.name.toLowerCase().includes(b))) {
          next.delete(i)
        }
      })
      return next
    })
  }

  const handleSubmit = () => {
    const selected = ingredients.filter((_, i) => checked.has(i))
    if (selected.length > 0) onSubmit(selected)
  }

  return (
    <AnimatePresence>
      {open && (
        <motion.div
          className="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/40 backdrop-blur-sm"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          onClick={onClose}
        >
          <motion.div
            className="bg-cream w-full sm:max-w-md sm:rounded-2xl rounded-t-2xl max-h-[85vh] flex flex-col"
            initial={{ y: '100%' }}
            animate={{ y: 0 }}
            exit={{ y: '100%' }}
            transition={{ type: 'spring', damping: 25, stiffness: 300 }}
            onClick={(e) => e.stopPropagation()}
          >
            {/* Header */}
            <div className="flex items-center justify-between p-4 border-b border-sand">
              <h2 className="font-display text-lg text-espresso">Zutaten auswählen</h2>
              <button
                onClick={onClose}
                className="min-w-[44px] min-h-[44px] flex items-center justify-center text-warm-grey"
              >
                <X size={20} />
              </button>
            </div>

            {/* Quick actions */}
            <div className="flex gap-2 px-4 py-3 border-b border-sand/50">
              <button
                onClick={selectAll}
                className="px-3 py-1.5 rounded-lg bg-sand/50 text-xs font-medium text-espresso hover:bg-sand transition-colors"
              >
                Alles
              </button>
              <button
                onClick={deselectBasics}
                className="px-3 py-1.5 rounded-lg bg-sand/50 text-xs font-medium text-espresso hover:bg-sand transition-colors"
              >
                Basics ab
              </button>
              <button
                onClick={selectNone}
                className="px-3 py-1.5 rounded-lg bg-sand/50 text-xs font-medium text-espresso hover:bg-sand transition-colors"
              >
                Nichts
              </button>
            </div>

            {/* Ingredient list */}
            <div className="flex-1 overflow-y-auto p-4 space-y-1">
              {ingredients.map((ing, i) => (
                <button
                  key={i}
                  onClick={() => toggle(i)}
                  className="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-sand/30 transition-colors min-h-[44px]"
                >
                  <div
                    className="w-5 h-5 rounded-md border-2 flex-shrink-0 flex items-center justify-center transition-colors"
                    style={{
                      borderColor: checked.has(i) ? '#C4737E' : '#E8E0D8',
                      backgroundColor: checked.has(i) ? '#C4737E' : 'transparent',
                    }}
                  >
                    {checked.has(i) && (
                      <svg width="12" height="12" viewBox="0 0 14 14" fill="none">
                        <path d="M2.5 7L5.5 10L11.5 4" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                    )}
                  </div>
                  <span className={`text-sm flex-1 text-left ${checked.has(i) ? 'text-espresso' : 'text-warm-grey line-through'}`}>
                    {ing.name}
                  </span>
                  {(ing.amount || ing.unit) && (
                    <span className="text-xs text-warm-grey">
                      {[ing.amount, ing.unit].filter(Boolean).join(' ')}
                    </span>
                  )}
                </button>
              ))}
            </div>

            {/* Submit */}
            <div className="p-4 border-t border-sand">
              <button
                onClick={handleSubmit}
                disabled={checked.size === 0 || loading}
                className="w-full flex items-center justify-center gap-2 bg-secondary text-white rounded-xl py-3 font-medium min-h-[44px] disabled:opacity-50 transition-opacity"
              >
                <ShoppingCart size={18} />
                {loading
                  ? 'Wird hinzugefügt...'
                  : `${checked.size} Artikel hinzufügen`}
              </button>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}