import React from 'react'
import AudioPlayer from './AudioPlayer'
import type { ExamplesData } from './Examples'
import { groupByNameAndVariant } from './galleryUtils'
import ExampleMetadata from './ExampleMetadata'
import ExampleDetailsSection from './ExampleDetailsSection'
import ExampleVariantSelector from './ExampleVariantSelector'

interface GalleryProps {
  selectedModel: string
  selectedAttack: string
  examples: {
    [model: string]: {
      [attack: string]: ExamplesData[]
    }
  }
}

const AudioGallery: React.FC<GalleryProps> = ({ selectedModel, selectedAttack, examples }) => {
  const exampleItems = examples[selectedModel][selectedAttack]
  const grouped = groupByNameAndVariant(exampleItems)
  console.log('Audio examples:', exampleItems)
  console.log('Grouped audio examples:', grouped)
  const audioNames = Object.keys(grouped)
  const [selectedAudio, setSelectedAudio] = React.useState(audioNames[0] || '')
  const variants = grouped[selectedAudio] || {}
  const variantKeys = Object.keys(variants)
  const [selectedVariant, setSelectedVariant] = React.useState(variantKeys[0] || '')

  React.useEffect(() => {
    setSelectedVariant(variantKeys[0] || '')
  }, [selectedAudio])

  if (!audioNames.length) {
    return (
      <div className="w-full mt-12 flex items-center justify-center">
        <div className="text-gray-500">
          No audio examples available. Please select another model and attack.
        </div>
      </div>
    )
  }

  console.log(variants[selectedVariant])

  return (
    <div className="w-full overflow-auto" style={{ minHeight: '100vh' }}>
      <div className="example-display">
        <div className="mb-4">
          <fieldset className="fieldset">
            <legend className="fieldset-legend">Audio Example</legend>
            <select
              className="select select-bordered"
              value={selectedAudio || ''}
              onChange={(e) => {
                setSelectedAudio(e.target.value || '')
              }}
            >
              {audioNames.map((name) => (
                <option key={name} value={name}>
                  {name}
                </option>
              ))}
            </select>
          </fieldset>
        </div>
        {selectedAudio && selectedVariant && variants[selectedVariant] && (
          <>
            <ExampleVariantSelector
              variantKeys={variantKeys}
              selectedVariant={selectedVariant}
              setSelectedVariant={setSelectedVariant}
            />
            <ExampleMetadata metadata={variants[selectedVariant].metadata || {}} />
            <ExampleDetailsSection>
              <div className="flex flex-col items-center gap-4">
                {variants[selectedVariant].image_url && (
                  <img
                    src={variants[selectedVariant].image_url}
                    alt={selectedAudio}
                    className="example-image"
                    style={{ display: 'block' }}
                  />
                )}
                {variants[selectedVariant].audio_url && (
                  <AudioPlayer src={variants[selectedVariant].audio_url} />
                )}
              </div>
            </ExampleDetailsSection>
          </>
        )}
      </div>
    </div>
  )
}

export default AudioGallery