rippy/docker/ui/src/components/FirstRunWizard.tsx

import { useState, useEffect } from 'react'
import { Disc, Cpu, Globe, Tv, CheckCircle, ArrowRight } from 'lucide-react'
import { api } from '../lib/api'
import { MEDIA_SERVER_OPTIONEN } from '../lib/mediaServer'
import { Button } from './ui/Button'
import { Input, Select } from './ui/Input'

interface WorkerInfo {
  name: string
  encoders: string[]
  last_seen?: string
}

const ENCODER_LABELS: Record<string, string> = {
  'cpu-x264': 'CPU · H.264 (x264)',
  'cpu-x265': 'CPU · H.265 (x265)',
  'vaapi': 'Hardware · VAAPI (AMD/Intel)',
  'nvenc': 'Hardware · NVENC (NVIDIA)',
}

export default function FirstRunWizard({ onDone }: { onDone: () => void }) {
  const [tmdbKey, setTmdbKey] = useState('')
  const [omdbKey, setOmdbKey] = useState('')
  const [mediaServer, setMediaServer] = useState('jellyfin')
  const [transcodeEnabled, setTranscodeEnabled] = useState(true)
  const [preset, setPreset] = useState('H.265 MKV 1080p30')
  const [workers, setWorkers] = useState<WorkerInfo[]>([])
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    api.get('/capabilities')
      .then(r => setWorkers(r.data.workers || []))
      .catch(() => setWorkers([]))
  }, [])

  const abschliessen = async () => {
    setSaving(true)
    setError(null)
    try {
      const bestehende = (await api.get('/settings')).data || {}
      await api.post('/settings', {
        ...bestehende,
        ...(tmdbKey ? { tmdbApiKey: tmdbKey } : {}),
        ...(omdbKey ? { omdbApiKey: omdbKey } : {}),
        mediaServer,
        transcodeEnabled,
        transcodePreset: preset,
      })
      await api.post('/setup/complete')
      onDone()
    } catch {
      setError('Speichern fehlgeschlagen — läuft die API?')
    } finally {
      setSaving(false)
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center p-6 bg-slate-100 dark:bg-slate-950">
      <div className="w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
        <div className="bg-gradient-to-r from-amber-500 via-indigo-600 to-purple-700 p-8 text-white">
          <div className="flex items-center gap-3 mb-2">
            <Disc size={32} className="animate-disc-spin" />
            <h1 className="text-2xl font-bold">Willkommen bei Rippy</h1>
          </div>
          <p className="opacity-90">Einmalige Einrichtung — dauert keine zwei Minuten. Alles ist später unter Einstellungen änderbar.</p>
        </div>

        <div className="p-8 space-y-8">
          {/* Metadaten-APIs */}
          <section>
            <h2 className="flex items-center gap-2 text-lg font-semibold mb-3 text-slate-900 dark:text-slate-100">
              <Globe size={18} className="text-amber-500" /> Metadaten-Erkennung
            </h2>
            <div className="space-y-3">
              <Input
                type="password"
                label="TMDB API-Key (empfohlen)"
                value={tmdbKey}
                onChange={e => setTmdbKey(e.target.value)}
                placeholder="Kostenlos auf themoviedb.org"
              />
              <Input
                type="password"
                label="OMDb API-Key (optional, zweite Quelle)"
                value={omdbKey}
                onChange={e => setOmdbKey(e.target.value)}
                placeholder="Kostenlos auf omdbapi.com"
              />
              <p className="text-xs text-slate-500 dark:text-slate-400">
                Ohne Keys rippt Rippy trotzdem — Discs heißen dann nur wie ihr Volume-Label.
              </p>
            </div>
          </section>

          {/* Media-Server */}
          <section>
            <h2 className="flex items-center gap-2 text-lg font-semibold mb-3 text-slate-900 dark:text-slate-100">
              <Tv size={18} className="text-amber-500" /> Dein Media-Server
            </h2>
            <p className="text-sm mb-3 text-slate-500 dark:text-slate-400">
              Rippy benennt fertige Rips als „Titel (Jahr)" und legt für Jellyfin/Emby/Kodi
              zusätzlich movie.nfo + poster.jpg dazu.
            </p>
            <div className="grid grid-cols-2 md:grid-cols-5 gap-2">
              {MEDIA_SERVER_OPTIONEN.map(o => (
                <button
                  key={o.wert}
                  type="button"
                  onClick={() => setMediaServer(o.wert)}
                  title={o.hinweis}
                  className={`px-3 py-2 rounded-xl text-sm font-medium border transition-all ${
                    mediaServer === o.wert
                      ? 'bg-amber-500/20 border-amber-500 text-amber-600 dark:text-amber-300 font-semibold'
                      : 'bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:border-slate-300 dark:hover:border-slate-600'
                  }`}
                >
                  {o.label}
                </button>
              ))}
            </div>
            <p className="text-xs mt-2 text-slate-500 dark:text-slate-400">
              {MEDIA_SERVER_OPTIONEN.find(o => o.wert === mediaServer)?.hinweis}
            </p>
          </section>

          {/* Verarbeitung + erkannte Hardware */}
          <section>
            <h2 className="flex items-center gap-2 text-lg font-semibold mb-3 text-slate-900 dark:text-slate-100">
              <Cpu size={18} className="text-amber-500" /> Verarbeitung
            </h2>

            <div className="rounded-xl p-4 mb-3 bg-slate-50 dark:bg-slate-950/80 border border-slate-200 dark:border-slate-800">
              <p className="text-sm font-medium mb-2 text-slate-700 dark:text-slate-300">Erkannte Encoder in deinem System:</p>
              {workers.length === 0 ? (
                <p className="text-sm text-slate-500 dark:text-slate-400">Noch kein Worker gemeldet — startet gerade?</p>
              ) : (
                workers.map(w => (
                  <div key={w.name} className="mb-1">
                    <span className="text-xs font-mono text-slate-500 dark:text-slate-400">{w.name}: </span>
                    {w.encoders.map(e => (
                      <span key={e} className={`inline-block text-xs px-2 py-0.5 rounded font-medium mr-1 ${
                        e.startsWith('cpu')
                          ? 'bg-slate-200 dark:bg-slate-800 text-slate-600 dark:text-slate-300'
                          : 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400'
                      }`}>
                        {ENCODER_LABELS[e] || e}
                      </span>
                    ))}
                  </div>
                ))
              )}
            </div>

            <label className="flex items-center gap-3 mb-3 text-sm text-slate-700 dark:text-slate-300">
              <input type="checkbox" checked={transcodeEnabled} onChange={e => setTranscodeEnabled(e.target.checked)} className="w-4 h-4 accent-amber-500 rounded" />
              Nach dem Rip auf Arbeitsgröße komprimieren (empfohlen — sonst ~40 GB pro Blu-ray)
            </label>

            {transcodeEnabled && (
              <Select value={preset} onChange={e => setPreset(e.target.value)}>
                <option value="H.265 MKV 1080p30">H.265 — klein &amp; modern (Standard)</option>
                <option value="HQ 1080p30 Surround">H.264 — schneller auf schwacher CPU, etwas größer</option>
              </Select>
            )}
          </section>

          {error && <p className="text-sm text-rose-500">{error}</p>}

          <Button
            variant="amber"
            size="lg"
            onClick={abschliessen}
            disabled={saving}
            className="w-full"
          >
            {saving ? 'Speichern…' : <>Los geht's <ArrowRight size={18} /></>}
          </Button>

          <p className="text-xs text-center flex items-center justify-center gap-1 text-slate-500 dark:text-slate-400">
            <CheckCircle size={12} /> Läuft komplett lokal — keine Cloud, keine Telemetrie.
          </p>
        </div>
      </div>
    </div>
  )
}