import { useState } from 'react';
import type { ShopOffer } from '../data/mock';
import PriceComparisonTable from './PriceComparisonTable';

interface Props {
  offers: ShopOffer[];
  lowestPrice: number;
  sizes: string[];
  productId?: string;
  sneakerData?: {
    item_id: string;
    item_name: string;
    item_brand: string;
    price: number;
  };
}

export default function ProductPriceSection({ offers, lowestPrice, sizes, productId, sneakerData }: Props) {
  const [selectedSize, setSelectedSize] = useState<string | null>(null);

  const sortedSizes = [...sizes].sort((a, b) => parseFloat(a) - parseFloat(b));

  return (
    <div>
      {/* Size filter */}
      {sortedSizes.length > 0 && (
        <div className="mb-4">
          <h4 className="mb-2 text-xs font-bold uppercase tracking-widest text-text-muted">Filter op maat</h4>
          <div className="flex flex-wrap gap-1.5">
            <button
              onClick={() => setSelectedSize(null)}
              className={`rounded-lg px-3 py-1.5 text-xs font-bold transition-colors ${
                selectedSize === null
                  ? 'bg-accent text-bg'
                  : 'bg-bg-elevated text-text-muted hover:text-text'
              }`}
            >
              Alle maten
            </button>
            {sortedSizes.map((size) => {
              const available = offers.some(o => o.inStock && o.sizes.includes(size));
              return (
                <button
                  key={size}
                  onClick={() => setSelectedSize(selectedSize === size ? null : size)}
                  className={`rounded-lg px-3 py-1.5 text-xs font-bold transition-colors ${
                    selectedSize === size
                      ? 'bg-accent text-bg'
                      : available
                        ? 'bg-bg-elevated text-text-muted hover:text-text'
                        : 'bg-bg-elevated text-text-muted/40'
                  }`}
                >
                  {size}
                </button>
              );
            })}
          </div>
        </div>
      )}

      <PriceComparisonTable
        offers={offers}
        lowestPrice={lowestPrice}
        productId={productId}
        sneakerData={sneakerData}
        selectedSize={selectedSize}
      />
    </div>
  );
}