import React, { useState, useEffect } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import API from '../API'
import LoadingSpinner from './LoadingSpinner'
import ImageGallery from './ImageGallery'
import AudioGallery from './AudioGallery'
import VideoGallery from './VideoGallery'

interface ExamplesProps {
  fileType: 'image' | 'audio' | 'video'
}

// Move ExamplesData type export to allow import in Galleries.tsx
export type ExamplesData = {
  image_url: string
  audio_url?: string
  video_url?: string
  name: string
  metadata: {
    [key: string]: string | boolean
  }
}

const Examples = ({ fileType }: ExamplesProps) => {
  const [examples, setExamples] = useState<{
    [model: string]: { [attack: string]: ExamplesData[] }
  }>({})
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [selectedModel, setSelectedModel] = useState<string | null>(null)
  const [selectedAttack, setSelectedAttack] = useState<string | null>(null)

  const location = useLocation()
  // Parse query params for model and attack
  useEffect(() => {
    const params = new URLSearchParams(location.search)
    const modelParam = params.get('model')
    const attackParam = params.get('attack')
    const strengthParam = params.get('strength')
    if (modelParam) setSelectedModel(modelParam)
    // Find the most appropriate selectedAttack
    if (attackParam || strengthParam) {
      setSelectedAttack((prev) => {
        if (!selectedModel || !examples[selectedModel]) return prev
        const attacks = Object.keys(examples[selectedModel])
        // If both attack and strength are present, look for attack containing attackParam and ending with strengthParam
        if (attackParam && strengthParam) {
          const found = attacks.find(a => a.includes(attackParam) && a.endsWith(strengthParam))
          if (found) return found
        }
        // If only attack is present, look for attack containing attackParam
        if (attackParam) {
          const found = attacks.find(a => a.includes(attackParam))
          if (found) return found
        }
        // If only strength is present, look for attack ending with strengthParam
        if (strengthParam) {
          const found = attacks.find(a => a.endsWith(strengthParam))
          if (found) return found
        }
        return prev
      })
    }
  }, [location.search, selectedModel, examples])

  useEffect(() => {
    setLoading(true)
    setError(null)
    API.fetchExamplesByType(fileType)
      .then((data) => {
        setExamples(data)
        const models = Object.keys(data)
        if (models.length > 0) {
          // If query param exists and is valid, use it, else default to first
          setSelectedModel((prev) => (prev && data[prev] ? prev : models[0]))
          const attacks = Object.keys(data[models[0]])
          if (attacks.length > 0) {
            setSelectedAttack((prev) => (prev && data[models[0]][prev] ? prev : attacks[0]))
          } else {
            setSelectedAttack(null)
          }
        } else {
          setSelectedModel(null)
          setSelectedAttack(null)
        }
        setLoading(false)
      })
      .catch((err) => {
        setError(err.message)
        setLoading(false)
      })
  }, [fileType])

  if (loading) {
    return <LoadingSpinner />
  }

  return (
    <div className="examples-container">
      <div className="selectors-container flex flex-col md:flex-row gap-4 mb-4">
        <fieldset className="fieldset">
          <legend className="fieldset-legend">Model</legend>
          <select
            className="select select-bordered w-full"
            value={selectedModel || ''}
            onChange={(e) => setSelectedModel(e.target.value || null)}
          >
            {Object.keys(examples).map((model) => (
              <option key={model} value={model}>
                {model}
              </option>
            ))}
          </select>
        </fieldset>

        {selectedModel && (
          <fieldset className="fieldset">
            <legend className="fieldset-legend">Attack</legend>
            <select
              className="select select-bordered w-full"
              value={selectedAttack || ''}
              onChange={(e) => setSelectedAttack(e.target.value || null)}
            >
              {Object.keys(examples[selectedModel]).map((attack) => (
                <option key={attack} value={attack}>
                  {attack}
                </option>
              ))}
            </select>
          </fieldset>
        )}
      </div>

      {error && <p className="error">Error: {error}</p>}

      {selectedModel && selectedAttack && fileType === 'image' && (
        <ImageGallery
          selectedModel={selectedModel}
          selectedAttack={selectedAttack}
          examples={examples}
        />
      )}
      {selectedModel && selectedAttack && fileType === 'audio' && (
        <AudioGallery
          selectedModel={selectedModel}
          selectedAttack={selectedAttack}
          examples={examples}
        />
      )}
      {selectedModel && selectedAttack && fileType === 'video' && (
        <VideoGallery
          selectedModel={selectedModel}
          selectedAttack={selectedAttack}
          examples={examples}
        />
      )}
    </div>
  )
}

export default Examples
