import React from 'react';
import { getVariantKindLabel, isVariantAvailable, type VariantKind } from '../lib/variantStock';

interface Variant {
  id: number;
  volume: string;
  volumeMl: number;
  currentPrice: number;
  kind?: VariantKind;
  stock?: number;
}

interface StickyAddToCartProps {
  visible: boolean;
  variants: Variant[];
  stock: number;
  selectedVariantId: number | null;
  isSoldOut: boolean;
  addedToCart: boolean;
  quantity: number;
  onVariantChange: (variantId: number) => void;
  onAddToCart: () => void;
}

const StickyAddToCart: React.FC<StickyAddToCartProps> = ({
  visible,
  variants,
  stock,
  selectedVariantId,
  isSoldOut,
  addedToCart,
  quantity,
  onVariantChange,
  onAddToCart,
}) => {
  const selectedVariant = variants.find((variant) => variant.id === selectedVariantId) || variants[0];
  const selectableVariants = variants.filter((variant) => isVariantAvailable(variant, stock));
  const canSwitchVolume = selectableVariants.length > 1;

  return (
    <div
      role="region"
      aria-label="Přidat do košíku"
      aria-hidden={!visible}
      className={`md:hidden fixed inset-x-0 bottom-0 z-[35] border-t border-luxury-gold/40 bg-luxury-dark/95 backdrop-blur-md shadow-[0_-8px_30px_rgba(0,0,0,0.45)] transition-transform duration-300 ${
        visible ? 'translate-y-0' : 'translate-y-full pointer-events-none'
      }`}
    >
      <div className="flex items-center gap-2.5 px-3 pt-2.5 pb-[max(0.65rem,env(safe-area-inset-bottom))]">
        {selectedVariant && (
          <div className="flex min-w-0 flex-1 items-center gap-2.5">
            {canSwitchVolume ? (
              <label className="block min-w-[6.5rem] flex-1">
                <span className="sr-only">Objem</span>
                <select
                  value={selectedVariant.id}
                  onChange={(event) => {
                    const nextId = Number(event.target.value);
                    if (Number.isFinite(nextId)) {
                      onVariantChange(nextId);
                    }
                  }}
                  className="min-h-11 w-full appearance-none rounded-lg border border-luxury-gold/50 bg-luxury-dark bg-[length:0.85rem] bg-[right_0.7rem_center] bg-no-repeat px-3 py-2 pr-8 text-base font-bold text-luxury-light outline-none focus:border-luxury-gold"
                  style={{
                    backgroundImage:
                      "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23DDA20D' d='M1 1l5 5 5-5'/%3E%3C/svg%3E\")",
                  }}
                >
                  {variants.map((variant) => {
                    const variantSoldOut = !isVariantAvailable(variant, stock);
                    return (
                      <option key={variant.id} value={variant.id} disabled={variantSoldOut}>
                        {variant.kind === 'BOTTLE' || variant.kind === 'OTHER'
                          ? `${getVariantKindLabel(variant.kind)} · ${variant.volume}`
                          : variant.volume}
                        {variantSoldOut ? ' — vyprodáno' : ''}
                      </option>
                    );
                  })}
                </select>
              </label>
            ) : (
              <p className="min-h-11 flex items-center rounded-lg border border-luxury-gold/50 px-3 text-base font-bold text-luxury-light">
                {selectedVariant.kind === 'BOTTLE' || selectedVariant.kind === 'OTHER'
                  ? `${getVariantKindLabel(selectedVariant.kind)} · ${selectedVariant.volume}`
                  : selectedVariant.volume}
              </p>
            )}
            <p
              className={`shrink-0 whitespace-nowrap font-aptos text-lg font-black leading-none ${
                isSoldOut ? 'text-red-400' : 'text-luxury-gold'
              }`}
            >
              {`${Number(selectedVariant.currentPrice).toFixed(2)} Kč`}
            </p>
          </div>
        )}

        {isSoldOut ? (
          <div className="min-h-11 flex-shrink-0 rounded-lg border border-red-500/40 bg-red-500/15 px-4 py-2 text-center text-sm font-bold text-red-400">
            Vyprodáno
          </div>
        ) : (
          <button
            type="button"
            onClick={onAddToCart}
            className={`min-h-11 flex-shrink-0 rounded-lg px-4 py-2 font-aptos text-sm font-bold transition-colors duration-200 ${
              addedToCart
                ? 'bg-green-500 text-white'
                : 'bg-luxury-gold text-luxury-dark hover:bg-yellow-300'
            }`}
          >
            {addedToCart
              ? '✓ Přidáno'
              : quantity > 1
              ? `Přidat · ${quantity} ks`
              : 'Do košíku'}
          </button>
        )}
      </div>
    </div>
  );
};

export default StickyAddToCart;