'use client';

import type { TileDesign } from '@/src/types/tiles';
import React from 'react';

type DesignPickerProps = {
  designs: TileDesign[];
  selectedDesignIds: number[];
  onChange: (ids: number[]) => void;
  onDesignClick?: (designId: number) => void;
  selectionLimit?: number;
  disabled?: boolean;
};

export default function DesignPicker({
  designs,
  selectedDesignIds,
  onChange,
  onDesignClick,
  selectionLimit = 6,
  disabled = false,
}: DesignPickerProps) {
  const toggleDesign = (designId: number) => {
    if (onDesignClick) {
      onDesignClick(designId);
      return;
    }
    if (disabled) return;
    const isSelected = selectedDesignIds.includes(designId);
    if (isSelected) {
      onChange(selectedDesignIds.filter((id) => id !== designId));
      return;
    }
    if (selectedDesignIds.length >= selectionLimit) {
      return;
    }
    onChange([...selectedDesignIds, designId]);
  };

  return (
    <div style={{ display: 'grid', gap: 12, gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))' }}>
      {designs.map((design) => {
        const active = selectedDesignIds.includes(design.id);
        return (
          <button
            key={design.id}
            type="button"
            onClick={() => toggleDesign(design.id)}
            disabled={disabled}
            style={{
              border: active ? '2px solid #2563eb' : '1px solid #d1d5db',
              borderRadius: 8,
              padding: 8,
              background: '#fff',
              cursor: disabled ? 'not-allowed' : 'pointer',
              boxShadow: active ? '0 0 0 2px rgba(37,99,235,0.2)' : 'none',
              display: 'flex',
              flexDirection: 'column',
              gap: 8,
            }}
          >
            <div
              style={{
                width: '100%',
                paddingBottom: '100%',
                position: 'relative',
                borderRadius: 6,
                overflow: 'hidden',
                backgroundColor: '#f5f5f5',
              }}
            >
              <img
                src={design.imageUrl}
                alt={design.name}
                style={{
                  position: 'absolute',
                  inset: 0,
                  width: '100%',
                  height: '100%',
                  objectFit: 'cover',
                  filter: disabled ? 'grayscale(1)' : 'none',
                }}
              />
            </div>
            <div style={{ fontSize: 14, fontWeight: 600, color: '#111827', textAlign: 'left' }}>{design.name}</div>
            {design.sku ? (
              <div style={{ fontSize: 12, color: '#6b7280', textAlign: 'left' }}>SKU: {design.sku}</div>
            ) : null}
          </button>
        );
      })}
      {designs.length === 0 ? <div style={{ color: '#6b7280' }}>Keine Designs verfügbar.</div> : null}
    </div>
  );
}