xenia-pos-cloud/connect_frontend/menu-app/src/pages/ProductModal.jsx

import { useState } from 'react'
import { X, Plus, Minus } from 'lucide-react'

export default function ProductModal({ product, onClose, onAdd }) {
  const [quantity, setQuantity] = useState(1)
  const [selectedOptions, setSelectedOptions] = useState([])

  const basePrice = product.digital_price ?? product.base_price
  const hasDiscount = product.digital_discount > 0 && !product.digital_price
  const displayPrice = hasDiscount
    ? basePrice * (1 - product.digital_discount / 100)
    : basePrice

  function toggleOption(opt) {
    setSelectedOptions(prev =>
      prev.find(o => o.id === opt.id)
        ? prev.filter(o => o.id !== opt.id)
        : [...prev, opt]
    )
  }

  const optionsTotal = selectedOptions.reduce((s, o) => s + (o.price || 0), 0)
  const lineTotal = (displayPrice + optionsTotal) * quantity

  return (
    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
      <div className="relative bg-white w-full max-w-lg rounded-t-2xl sm:rounded-2xl max-h-[90vh] overflow-y-auto">

        {/* Image */}
        {(product.digital_image_url || product.image_url) && (
          <img
            src={product.digital_image_url || product.image_url}
            alt={product.digital_name || product.name}
            className="w-full h-48 object-cover rounded-t-2xl sm:rounded-t-2xl"
          />
        )}

        <button
          onClick={onClose}
          className="absolute top-3 right-3 bg-white/90 rounded-full p-1.5 shadow"
        >
          <X size={18} />
        </button>

        <div className="p-5 space-y-4">
          <div>
            <h2 className="text-xl font-bold text-slate-800">
              {product.digital_name || product.name}
            </h2>
            {product.digital_description && (
              <p className="text-sm text-slate-500 mt-1">{product.digital_description}</p>
            )}
          </div>

          {/* Price */}
          <div className="flex items-baseline gap-2">
            <span className="text-2xl font-bold text-emerald-600">
              €{displayPrice.toFixed(2)}
            </span>
            {hasDiscount && (
              <span className="text-sm text-slate-400 line-through">
                €{basePrice.toFixed(2)}
              </span>
            )}
            {hasDiscount && (
              <span className="text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded-full font-semibold">
                -{product.digital_discount}%
              </span>
            )}
          </div>

          {/* Quick options */}
          {product.quick_options?.length > 0 && (
            <div className="space-y-2">
              <p className="text-sm font-semibold text-slate-700">Options</p>
              <div className="flex flex-wrap gap-2">
                {product.quick_options.map(opt => {
                  const active = selectedOptions.find(o => o.id === opt.id)
                  return (
                    <button
                      key={opt.id}
                      onClick={() => toggleOption(opt)}
                      className={`px-3 py-1.5 rounded-full text-sm font-medium border transition-colors ${
                        active
                          ? 'bg-emerald-500 text-white border-emerald-500'
                          : 'bg-white text-slate-700 border-slate-200 hover:border-emerald-300'
                      }`}
                    >
                      {opt.name}{opt.price > 0 ? ` +€${opt.price.toFixed(2)}` : ''}
                    </button>
                  )
                })}
              </div>
            </div>
          )}

          {/* Quantity */}
          <div className="flex items-center gap-4">
            <span className="text-sm font-semibold text-slate-700">Quantity</span>
            <div className="flex items-center gap-3">
              <button
                onClick={() => setQuantity(q => Math.max(1, q - 1))}
                className="w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center hover:bg-slate-200"
              >
                <Minus size={16} />
              </button>
              <span className="text-lg font-bold w-6 text-center">{quantity}</span>
              <button
                onClick={() => setQuantity(q => q + 1)}
                className="w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center hover:bg-slate-200"
              >
                <Plus size={16} />
              </button>
            </div>
          </div>

          {/* Add to cart */}
          {product.digital_available ? (
            <button
              onClick={() => onAdd(product, quantity, selectedOptions)}
              className="w-full bg-emerald-500 hover:bg-emerald-600 text-white py-3.5 rounded-xl font-semibold flex items-center justify-between px-5 transition-colors"
            >
              <span>Add to order</span>
              <span>€{lineTotal.toFixed(2)}</span>
            </button>
          ) : (
            <div className="w-full bg-slate-100 text-slate-400 py-3.5 rounded-xl font-semibold text-center">
              Currently unavailable
            </div>
          )}
        </div>
      </div>
    </div>
  )
}