'use client'

import { useState } from 'react'
import type { TrainingMedia } from '@/lib/sdk/training/types'
import { generateAudio, publishMedia } from '@/lib/sdk/training/api'

interface AudioPlayerProps {
  moduleId: string
  audio: TrainingMedia | null
  onMediaUpdate: () => void
}

export default function AudioPlayer({ moduleId, audio, onMediaUpdate }: AudioPlayerProps) {
  const [generating, setGenerating] = useState(false)
  const [error, setError] = useState<string | null>(null)

  async function handleGenerate() {
    setGenerating(true)
    setError(null)
    try {
      await generateAudio(moduleId)
      onMediaUpdate()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Audio-Generierung fehlgeschlagen')
    } finally {
      setGenerating(false)
    }
  }

  async function handlePublishToggle() {
    if (!audio) return
    try {
      await publishMedia(audio.id, !audio.is_published)
      onMediaUpdate()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Aendern des Status')
    }
  }

  function formatDuration(seconds: number): string {
    const mins = Math.floor(seconds / 60)
    const secs = Math.floor(seconds % 60)
    return `${mins}:${secs.toString().padStart(2, '0')}`
  }

  function formatSize(bytes: number): string {
    if (bytes < 1024) return `${bytes} B`
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
  }

  return (
    <div className="border rounded-lg p-4 bg-white">
      <div className="flex items-center justify-between mb-3">
        <h4 className="text-sm font-medium text-gray-700">Audio</h4>
        {!audio && (
          <button
            onClick={handleGenerate}
            disabled={generating}
            className="px-3 py-1.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
          >
            {generating ? 'Generiere Audio...' : 'Audio generieren'}
          </button>
        )}
      </div>

      {error && (
        <div className="text-xs text-red-600 mb-2">{error}</div>
      )}

      {generating && !audio && (
        <div className="flex items-center gap-2 text-sm text-gray-500">
          <div className="animate-spin h-4 w-4 border-2 border-blue-500 border-t-transparent rounded-full" />
          Audio wird generiert (kann einige Minuten dauern)...
        </div>
      )}

      {audio && audio.status === 'processing' && (
        <div className="flex items-center gap-2 text-sm text-gray-500">
          <div className="animate-spin h-4 w-4 border-2 border-blue-500 border-t-transparent rounded-full" />
          Audio wird verarbeitet...
        </div>
      )}

      {audio && audio.status === 'failed' && (
        <div className="space-y-2">
          <div className="text-xs text-red-600">Generierung fehlgeschlagen: {audio.error_message}</div>
          <button
            onClick={handleGenerate}
            disabled={generating}
            className="px-3 py-1.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
          >
            Erneut versuchen
          </button>
        </div>
      )}

      {audio && audio.status === 'completed' && (
        <div className="space-y-3">
          <audio controls className="w-full" preload="none">
            <source src={`/api/sdk/v1/training/media/${audio.id}/stream`} type="audio/mpeg" />
            Ihr Browser unterstuetzt kein Audio.
          </audio>
          <div className="flex items-center justify-between text-xs text-gray-500">
            <div className="flex gap-4">
              <span>Dauer: {formatDuration(audio.duration_seconds)}</span>
              <span>Groesse: {formatSize(audio.file_size_bytes)}</span>
              <span>Stimme: {audio.voice_model}</span>
            </div>
            <div className="flex items-center gap-2">
              <button
                onClick={handlePublishToggle}
                className={`px-2 py-1 rounded text-xs ${audio.is_published ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'}`}
              >
                {audio.is_published ? 'Veroeffentlicht' : 'Veroeffentlichen'}
              </button>
              <button
                onClick={handleGenerate}
                disabled={generating}
                className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200 disabled:opacity-50"
              >
                Neu generieren
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}