import { BaseElement } from '../../types/elements';
import { useCanvasSettings } from '../../contexts/CanvasSettingsContext';
import { NumericPropertyInput } from '../ui/NumericPropertyInput';

interface ExtendedElement extends BaseElement {
  src?: string;
  objectFit?: string;
  padding?: number;
}

interface ImagePropertiesProps {
  element: ExtendedElement;
  onChange: (elementId: string, property: string, value: unknown) => void;
  activeTab: { [key: string]: 'fonctionnalites' | 'personnalisation' | 'positionnement' };
  setActiveTab: (tabs: { [key: string]: 'fonctionnalites' | 'personnalisation' | 'positionnement' }) => void;
}

export function ImageProperties({ element, onChange, activeTab, setActiveTab }: ImagePropertiesProps) {
  const canvasSettings = useCanvasSettings();
  const imageCurrentTab = activeTab[element.id] || 'fonctionnalites';
  const setImageCurrentTab = (tab: 'fonctionnalites' | 'personnalisation' | 'positionnement') => {
    setActiveTab({ ...activeTab, [element.id]: tab });
  };

  const openMediaLibrary = () => {
    if (window.wp?.media && typeof window.wp.media === 'function') {
      const media = window.wp.media({
        title: 'Sélectionner une image',
        button: {
          text: 'Utiliser cette image'
        },
        multiple: false
      });

      (media as any).on('select', () => {
        const attachment = (media as any).state().get('selection').first().toJSON();
        onChange(element.id, 'src', attachment.url);
      });

      (media as any).open();
    } else {
      alert('Bibliothèque de médias WordPress non disponible. Veuillez saisir l\'URL manuellement.');
    }
  };

  return (
    <>
      {/* Système d'onglets pour Image */}
      <div style={{ display: 'flex', marginBottom: '12px', borderBottom: '2px solid #ddd', gap: '2px', flexWrap: 'wrap' }}>
        <button
          onClick={() => setImageCurrentTab('fonctionnalites')}
          style={{
            flex: '1 1 30%',
            padding: '8px 6px',
            backgroundColor: imageCurrentTab === 'fonctionnalites' ? '#007bff' : '#f0f0f0',
            color: imageCurrentTab === 'fonctionnalites' ? '#fff' : '#333',
            border: 'none',
            cursor: 'pointer',
            fontSize: '11px',
            fontWeight: 'bold',
            borderRadius: '3px 3px 0 0',
            minWidth: '0',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis'
          }}
          title="Fonctionnalités"
        >
          Fonctionnalités
        </button>
        <button
          onClick={() => setImageCurrentTab('personnalisation')}
          style={{
            flex: '1 1 30%',
            padding: '8px 6px',
            backgroundColor: imageCurrentTab === 'personnalisation' ? '#007bff' : '#f0f0f0',
            color: imageCurrentTab === 'personnalisation' ? '#fff' : '#333',
            border: 'none',
            cursor: 'pointer',
            fontSize: '11px',
            fontWeight: 'bold',
            borderRadius: '3px 3px 0 0',
            minWidth: '0',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis'
          }}
          title="Personnalisation"
        >
          Personnalisation
        </button>
        <button
          onClick={() => setImageCurrentTab('positionnement')}
          style={{
            flex: '1 1 30%',
            padding: '8px 6px',
            backgroundColor: imageCurrentTab === 'positionnement' ? '#007bff' : '#f0f0f0',
            color: imageCurrentTab === 'positionnement' ? '#fff' : '#333',
            border: 'none',
            cursor: 'pointer',
            fontSize: '11px',
            fontWeight: 'bold',
            borderRadius: '3px 3px 0 0',
            minWidth: '0',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis'
          }}
          title="Positionnement"
        >
          Positionnement
        </button>
      </div>

      {/* Onglet Fonctionnalités */}
      {imageCurrentTab === 'fonctionnalites' && (
        <>
          <div style={{ marginBottom: '12px' }}>
            <label style={{ display: 'block', fontSize: '12px', fontWeight: 'bold', marginBottom: '6px' }}>
              Source de l&apos;image
            </label>
            <div style={{ display: 'flex', gap: '4px' }}>
              <input
                type="text"
                value={element.src || ''}
                onChange={(e) => onChange(element.id, 'src', e.target.value)}
                placeholder="URL de l'image"
                style={{
                  flex: 1,
                  padding: '4px 8px',
                  border: '1px solid #ccc',
                  borderRadius: '3px',
                  fontSize: '12px'
                }}
              />
              <button
                onClick={openMediaLibrary}
                style={{
                  padding: '4px 8px',
                  border: '1px solid #007bff',
                  borderRadius: '3px',
                  backgroundColor: '#007bff',
                  color: '#fff',
                  cursor: 'pointer',
                  fontSize: '11px'
                }}
                title="Ouvrir la médiathèque WordPress"
              >
                📁
              </button>
            </div>
          </div>

          {element.src && (
            <div style={{ marginBottom: '12px' }}>
              <label style={{ display: 'block', fontSize: '12px', fontWeight: 'bold', marginBottom: '6px' }}>
                Aperçu
              </label>
              <div style={{
                padding: '8px',
                border: '1px solid #e0e0e0',
                borderRadius: '4px',
                backgroundColor: '#f8f9fa',
                textAlign: 'center'
              }}>
                <img
                  src={element.src}
                  alt="Aperçu"
                  style={{
                    maxWidth: '100%',
                    maxHeight: '100px',
                    borderRadius: '4px',
                    boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
                  }}
                />
              </div>
            </div>
          )}
        </>
      )}

      {/* Onglet Personnalisation */}
      {imageCurrentTab === 'personnalisation' && (
        <>
          <div style={{ marginBottom: '12px' }}>
            <label style={{ display: 'block', fontSize: '12px', fontWeight: 'bold', marginBottom: '6px' }}>
              Ajustement de l&apos;image
            </label>
            <select
              value={element.objectFit || 'contain'}
              onChange={(e) => onChange(element.id, 'objectFit', e.target.value)}
              style={{
                width: '100%',
                padding: '4px 8px',
                border: '1px solid #ccc',
                borderRadius: '3px',
                fontSize: '12px'
              }}
            >
              <option value="contain">Contenir (respecter les proportions)</option>
              <option value="cover">Couvrir (remplir complètement)</option>
              <option value="fill">Remplir (étirer si nécessaire)</option>
              <option value="none">Aucun (taille originale)</option>
              <option value="scale-down">Réduire (taille originale ou contenir)</option>
            </select>
          </div>
        </>
      )}

      {/* Onglet Positionnement */}
      {imageCurrentTab === 'positionnement' && (
        <>
          <div style={{ marginBottom: '12px' }}>
            <NumericPropertyInput
              label="Position X"
              value={element.x}
              defaultValue={0}
              unit="px"
              onChange={(value) => onChange(element.id, 'x', value)}
            />
          </div>

          <div style={{ marginBottom: '12px' }}>
            <NumericPropertyInput
              label="Position Y"
              value={element.y}
              defaultValue={0}
              unit="px"
              onChange={(value) => onChange(element.id, 'y', value)}
            />
          </div>

          <div style={{ marginBottom: '12px' }}>
            <NumericPropertyInput
              label="Largeur"
              value={element.width}
              defaultValue={100}
              min={1}
              unit="px"
              onChange={(value) => onChange(element.id, 'width', value)}
            />
          </div>

          <div style={{ marginBottom: '12px' }}>
            <NumericPropertyInput
              label="Hauteur"
              value={element.height}
              defaultValue={100}
              min={1}
              unit="px"
              onChange={(value) => onChange(element.id, 'height', value)}
            />
          </div>

          {canvasSettings?.selectionRotationEnabled && (
          <div style={{ marginBottom: '12px' }}>
            <NumericPropertyInput
              label="Rotation"
              value={element.rotation}
              defaultValue={0}
              min={-180}
              max={180}
              unit="°"
              onChange={(value) => onChange(element.id, 'rotation', value)}
            />
          </div>
          )}

          <div style={{ marginBottom: '12px' }}>
            <NumericPropertyInput
              label="Padding interne (px)"
              value={element.padding || 12}
              defaultValue={12}
              min={0}
              max={50}
              onChange={(value) => onChange(element.id, 'padding', value)}
            />
          </div>

          <div style={{ marginBottom: '12px' }}>
            <label style={{ display: 'block', fontSize: '12px', fontWeight: 'bold', marginBottom: '6px' }}>
              Opacité <span style={{ color: '#666', fontSize: '10px' }}>({Math.round((element.opacity || 1) * 100)}%)</span>
            </label>
            <input
              type="range"
              min="0"
              max="1"
              step="0.1"
              value={element.opacity || 1}
              onChange={(e) => onChange(element.id, 'opacity', parseFloat(e.target.value))}
              style={{ width: '100%' }}
            />
          </div>
        </>
      )}
    </>
  );
}