/**
 * BackgroundSettingsEditor Component
 *
 * Compact editor for background image, video, or audio settings.
 * Used in the element editor panel for background menu items.
 * For video backgrounds, includes playback settings (autoplay, loop, muted, start/end time).
 */

import React from 'react';
import type { AssetOption, VideoPlaybackSettings } from './types';
import { addFallbackAssetOption } from '../../lib/constructorHelpers';

interface BackgroundSettingsEditorProps {
  type: 'image' | 'video' | 'audio';
  value: string;
  options: AssetOption[];
  durationNote?: string;
  onChange: (value: string) => void;
  onClearImage?: () => void;
  // Video-specific playback settings (only used when type='video')
  videoAutoplay?: boolean;
  videoLoop?: boolean;
  videoMuted?: boolean;
  videoStartTime?: number | null;
  videoEndTime?: number | null;
  onVideoSettingsChange?: (settings: VideoPlaybackSettings) => void;
}

const LABELS: Record<string, string> = {
  image: 'Background image',
  video: 'Background video',
  audio: 'Background audio (loop)',
};

const BackgroundSettingsEditor: React.FC<BackgroundSettingsEditorProps> = ({
  type,
  value,
  options,
  durationNote,
  onChange,
  onClearImage,
  videoAutoplay,
  videoLoop,
  videoMuted,
  videoStartTime,
  videoEndTime,
  onVideoSettingsChange,
}) => {
  const label = LABELS[type] || 'Background';
  const selectOptions = addFallbackAssetOption(
    options,
    value,
    `Current ${type} · ${value}`,
  );

  // Show video playback settings when type is video and a video is selected
  const showVideoSettings = type === 'video' && value && onVideoSettingsChange;

  return (
    <div>
      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
        {label}
      </label>
      <select
        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
        value={value}
        onChange={(event) => {
          const nextValue = event.target.value;
          onChange(nextValue);
          // For image, if switching to a new image, clear video (handled externally)
          if (type === 'image' && nextValue && onClearImage) {
            onClearImage();
          }
        }}
      >
        <option value=''>None</option>
        {selectOptions.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      {durationNote && (
        <p className='mt-1 text-[11px] text-gray-500'>{durationNote}</p>
      )}

      {/* Video Playback Settings */}
      {showVideoSettings && (
        <div className='mt-3 space-y-2 border-t border-gray-200 pt-3'>
          <p className='text-[10px] font-semibold uppercase text-gray-500'>
            Playback Settings
          </p>

          <label className='flex cursor-pointer items-center gap-2 text-[11px] text-gray-700'>
            <input
              type='checkbox'
              className='h-3 w-3 rounded border-gray-300'
              checked={videoAutoplay ?? true}
              onChange={(e) =>
                onVideoSettingsChange({ autoplay: e.target.checked })
              }
            />
            Autoplay
          </label>

          <label className='flex cursor-pointer items-center gap-2 text-[11px] text-gray-700'>
            <input
              type='checkbox'
              className='h-3 w-3 rounded border-gray-300'
              checked={videoLoop ?? true}
              onChange={(e) =>
                onVideoSettingsChange({ loop: e.target.checked })
              }
            />
            Loop
          </label>

          <label className='flex cursor-pointer items-center gap-2 text-[11px] text-gray-700'>
            <input
              type='checkbox'
              className='h-3 w-3 rounded border-gray-300'
              checked={!(videoMuted ?? true)}
              onChange={(e) =>
                onVideoSettingsChange({ muted: !e.target.checked })
              }
            />
            Sound
          </label>

          <div className='flex gap-2'>
            <div className='flex-1'>
              <label className='mb-1 block text-[10px] text-gray-500'>
                Start (sec)
              </label>
              <input
                type='number'
                step='0.1'
                min='0'
                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
                placeholder='0.0'
                value={videoStartTime ?? ''}
                onChange={(e) =>
                  onVideoSettingsChange({
                    startTime: e.target.value
                      ? parseFloat(e.target.value)
                      : null,
                  })
                }
              />
            </div>
            <div className='flex-1'>
              <label className='mb-1 block text-[10px] text-gray-500'>
                End (sec)
              </label>
              <input
                type='number'
                step='0.1'
                min='0'
                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
                placeholder='auto'
                value={videoEndTime ?? ''}
                onChange={(e) =>
                  onVideoSettingsChange({
                    endTime: e.target.value ? parseFloat(e.target.value) : null,
                  })
                }
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default BackgroundSettingsEditor;
