import { useEffect, useRef, useState } 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 VariantSelectProps {
  variants: Variant[];
  stock: number;
  selectedVariantId: number;
  onChange: (variantId: number) => void;
  showMobilePriceSeparator?: boolean;
}

const VariantSelect: React.FC<VariantSelectProps> = ({
  variants,
  stock,
  selectedVariantId,
  onChange,
  showMobilePriceSeparator = false,
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const selectedVariant = variants.find((variant) => variant.id === selectedVariantId) || variants[0];

  useEffect(() => {
    const handleOutsideClick = (event: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };

    document.addEventListener('mousedown', handleOutsideClick);
    return () => document.removeEventListener('mousedown', handleOutsideClick);
  }, []);

  return (
    <div ref={containerRef} className="relative z-20" onClick={(e) => e.stopPropagation()}>
      <span className="block text-[10px] sm:text-xs font-bold text-luxury-light/60 uppercase tracking-wider mb-1">
        Objem
      </span>
      <button
        type="button"
        aria-expanded={isOpen}
        onClick={() => setIsOpen((open) => !open)}
        className={`flex min-h-11 w-full items-center justify-between gap-2 rounded-lg border bg-luxury-dark/70 px-3 py-2 text-left text-xs sm:text-sm font-bold text-luxury-light outline-none transition-all duration-200 ${
          isOpen
            ? 'border-luxury-gold bg-luxury-dark shadow-lg shadow-luxury-gold/10'
            : 'border-luxury-gold/35 hover:border-luxury-gold/70'
        }`}
      >
        <span>{selectedVariant.volume}</span>
        <span className={`text-luxury-gold transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}>▼</span>
      </button>

      {isOpen && (
        <div className="absolute left-0 right-0 top-full mt-1 overflow-hidden rounded-lg border border-luxury-gold/70 bg-luxury-dark shadow-xl shadow-black/40">
          {variants.map((variant) => {
            const isSoldOut = !isVariantAvailable(variant, stock);
            const isSelected = variant.id === selectedVariantId;

            return (
              <button
                type="button"
                key={variant.id}
                disabled={isSoldOut}
                onClick={() => {
                  if (!isSoldOut) {
                    onChange(variant.id);
                    setIsOpen(false);
                  }
                }}
                className={`flex min-h-11 w-full items-center justify-between gap-1 px-1.5 xs:px-2 sm:px-3 py-2 text-left text-[10px] xs:text-[11px] sm:text-sm transition-colors ${
                  isSoldOut
                    ? 'cursor-not-allowed text-luxury-light/30'
                    : isSelected
                    ? 'bg-luxury-gold text-luxury-dark'
                    : 'text-luxury-light hover:bg-luxury-gold/15 hover:text-luxury-gold'
                }`}
                >
                <span className="shrink-0">
                  {variant.kind === 'BOTTLE' || variant.kind === 'OTHER'
                    ? `${getVariantKindLabel(variant.kind)} · ${variant.volume}`
                    : variant.volume}
                </span>
                {showMobilePriceSeparator ? (
                  <span className="shrink-0 whitespace-nowrap">
                    <span className="sm:hidden inline-block mr-1.5">–</span>
                    {Number(variant.currentPrice).toFixed(2)} Kč
                  </span>
                ) : (
                  !isSelected && <span>{Number(variant.currentPrice).toFixed(2)} Kč</span>
                )}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
};

export default VariantSelect;