import { useState, useEffect } from 'react'
import axios from 'axios'
import { BookOpen, Music, Film, AlertCircle, CheckCircle, Search, Loader2 } from 'lucide-react'
import type { LucideIcon } from 'lucide-react'
import { useDarkMode } from '../context/ThemeContext'

interface Metadata {
  type: 'movie' | 'tv' | 'music' | 'unknown'
  id: number
  title: string
  year?: number
  overview?: string
  poster_path?: string
  backdrop_path?: string
  runtime?: number
  genres?: string[]
}

interface Track {
  track_number: number
  title: string
  duration?: number
}

interface PrescanResult {
  disc_type: 'cd' | 'dvd' | 'bluray'
  title: string
  year?: number
  confidence: number
  metadata?: Metadata
  tracks?: Track[]
}

const API_URL = 'http://localhost:8000'

export default function MetadataPreview() {
  const [device, setDevice] = useState<string>('')
  const [result, setResult] = useState<PrescanResult | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [confirming, setConfirming] = useState(false)
  const { theme } = useDarkMode()

  const handleScan = async () => {
    if (!device) {
      setError('Bitte wählen Sie ein Gerät aus.')
      return
    }

    setLoading(true)
    setError(null)

    try {
      const response = await axios.post(`${API_URL}/prescan`, { device_path: device })
      setResult(response.data)
    } catch (err) {
      setError('Pre-Scan fehlgeschlagen.')
    } finally {
      setLoading(false)
    }
  }

  const handleConfirm = async () => {
    if (!result) return

    setConfirming(true)

    try {
      await axios.post(`${API_URL}/metadata/confirm`, {
        title: result.title,
        year: result.year,
        metadata: result.metadata
      })

      // Job erstellen
      await axios.post(`${API_URL}/jobs`, {
        device: device,
        type: result.disc_type
      })
    } catch (err) {
      setError('Bestätigung fehlgeschlagen.')
    } finally {
      setConfirming(false)
    }
  }

  const getIcon = (type: string): LucideIcon => {
    switch (type) {
      case 'cd':
        return Music
      case 'dvd':
      case 'bluray':
        return Film
      default:
        return BookOpen
    }
  }

  const getConfidenceColor = (confidence: number): string => {
    if (confidence >= 0.9) return 'text-green-600 bg-green-100'
    if (confidence >= 0.7) return 'text-yellow-600 bg-yellow-100'
    return 'text-red-600 bg-red-100'
  }

  return (
    <div className="p-6 max-w-4xl mx-auto">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">Metadaten-Preview</h1>
        <p className="text-gray-600 mt-1">
          Wählen Sie ein Gerät aus, um die Metadaten vor dem Ripping zu lookupen
        </p>
      </div>

      {/* Device Selection */}
      <div className="bg-white p-4 rounded-lg shadow mb-6">
        <div className="flex gap-4">
          <select
            value={device}
            onChange={(e) => setDevice(e.target.value)}
            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          >
            <option value="">Gerät auswählen...</option>
            <option value="/dev/cdrom">CD-ROM (/dev/cdrom)</option>
            <option value="/dev/dvd">DVD (/dev/dvd)</option>
            <option value="/dev/bluray">Blu-ray (/dev/bluray)</option>
          </select>

          <button
            onClick={handleScan}
            disabled={!device || loading}
            className={`flex items-center gap-2 px-6 py-2 rounded-lg text-white ${
              !device || loading
                ? 'bg-gray-400 cursor-not-allowed'
                : 'bg-blue-600 hover:bg-blue-700'
            }`}
          >
            {loading ? (
              <>
                <Loader2 className="animate-spin" size={20} />
                Scannen...
              </>
            ) : (
              <>
                <Search size={20} />
                Scan starten
              </>
            )}
          </button>
        </div>
      </div>

      {error && (
        <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3 text-red-700">
          <AlertCircle size={24} />
          <span>{error}</span>
        </div>
      )}

      {/* Results */}
      {result && (
        <div className="bg-white rounded-lg shadow overflow-hidden">
          {/* Header */}
          <div className="bg-gradient-to-r from-blue-600 to-indigo-700 p-6 text-white">
            <div className="flex items-center gap-3 mb-2">
              {getIcon(result.disc_type)({ size: 32 })}
              <span className="text-sm font-medium opacity-90 uppercase tracking-wide">
                {result.disc_type.toUpperCase()}
              </span>
            </div>
            <h2 className="text-3xl font-bold">{result.title}</h2>
            {result.year && (
              <p className="text-lg opacity-90 mt-1">{result.year}</p>
            )}
          </div>

          {/* Confidence Score */}
          <div className="p-6 border-b border-gray-200">
            <div className="flex items-center gap-2">
              <span className="text-sm font-medium text-gray-700">Übereinstimmung:</span>
              <span className={`px-3 py-1 rounded-full text-sm font-medium ${getConfidenceColor(result.confidence)}`}>
                {Math.round(result.confidence * 100)}%
              </span>
            </div>
          </div>

          {/* Metadata */}
          <div className="p-6">
            {result.metadata && (
              <div className="space-y-4">
                {result.metadata.overview && (
                  <div>
                    <h3 className="text-sm font-medium text-gray-500 uppercase mb-2">Beschreibung</h3>
                    <p className="text-gray-700 leading-relaxed">{result.metadata.overview}</p>
                  </div>
                )}

                {result.metadata.genres && (
                  <div>
                    <h3 className="text-sm font-medium text-gray-500 uppercase mb-2">Genre</h3>
                    <div className="flex flex-wrap gap-2">
                      {result.metadata.genres.map((genre, index) => (
                        <span
                          key={index}
                          className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm"
                        >
                          {genre}
                        </span>
                      ))}
                    </div>
                  </div>
                )}

                {result.metadata.runtime && (
                  <div>
                    <h3 className="text-sm font-medium text-gray-500 uppercase mb-2">Laufzeit</h3>
                    <p className="text-gray-700">{Math.floor(result.metadata.runtime / 60)}h {result.metadata.runtime % 60}m</p>
                  </div>
                )}
              </div>
            )}

            {/* Tracks */}
            {result.tracks && result.tracks.length > 0 && (
              <div className="mt-6">
                <h3 className="text-sm font-medium text-gray-500 uppercase mb-3">Tracks</h3>
                <div className="space-y-2">
                  {result.tracks.map((track, index) => (
                    <div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div className="flex items-center gap-3">
                        <span className="w-8 font-medium text-gray-500">{track.track_number}</span>
                        <span className="text-gray-900">{track.title}</span>
                      </div>
                      {track.duration && (
                        <span className="text-sm text-gray-500">
                          {Math.floor(track.duration / 60)}:{String(track.duration % 60).padStart(2, '0')}
                        </span>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* Action */}
          <div className="p-6 bg-gray-50 border-t border-gray-200">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3 text-sm text-gray-600">
                <CheckCircle className="text-green-600" size={20} />
                <span>Bereit zum Ripping</span>
              </div>
              <button
                onClick={handleConfirm}
                disabled={confirming}
                className="flex items-center gap-2 px-6 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors"
              >
                {confirming ? (
                  <>
                    <Loader2 className="animate-spin" size={20} />
                    Bestätigen...
                  </>
                ) : (
                  <>
                    <CheckCircle size={20} />
                    Rippen starten
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}