import { useEffect, useState } from 'react'
import { Film, Tv, RefreshCw, Trash2, Plus, Check, X, ChevronDown, ChevronUp, Loader, Pencil } from 'lucide-react'
import api from '../lib/api'

interface JellyfinConfig {
  id: number
  name: string
  url: string
  api_key: string
  is_active: boolean
  movies_library_id: string | null
  series_library_id: string | null
  movies_category_name: string
  series_category_name: string
  last_sync_at: string | null
  item_count: number
}

interface Library {
  id: string
  name: string
  type: string
}

interface SyncStatus {
  status: 'idle' | 'running' | 'done' | 'error'
  message: string
  synced: number
}

const EMPTY_FORM = {
  name: '',
  url: 'http://10.10.10.15:8096',
  api_key: 'c339ccd3b7234c9a874bcfb70e92364a',
  movies_category_name: 'Películas KiraTV',
  series_category_name: 'Series KiraTV',
  movies_library_id: '',
  series_library_id: '',
}

export default function Jellyfin() {
  const [configs, setConfigs] = useState<JellyfinConfig[]>([])
  const [loading, setLoading] = useState(true)
  const [showForm, setShowForm] = useState(false)
  const [editId, setEditId] = useState<number | null>(null)
  const [form, setForm] = useState({ ...EMPTY_FORM })
  const [saving, setSaving] = useState(false)
  const [testResult, setTestResult] = useState<{ ok: boolean; server_name?: string; error?: string } | null>(null)
  const [testing, setTesting] = useState(false)
  const [libraries, setLibraries] = useState<Library[]>([])
  const [libsLoading, setLibsLoading] = useState(false)
  const [syncStatus, setSyncStatus] = useState<Record<number, SyncStatus>>({})
  const [expanded, setExpanded] = useState<number | null>(null)

  useEffect(() => { load() }, [])

  async function load() {
    setLoading(true)
    try {
      const { data } = await api.get('/jellyfin')
      setConfigs(data)
    } finally {
      setLoading(false)
    }
  }

  function openCreate() {
    setEditId(null)
    setForm({ ...EMPTY_FORM })
    setTestResult(null)
    setLibraries([])
    setShowForm(true)
  }

  function openEdit(cfg: JellyfinConfig) {
    setEditId(cfg.id)
    setForm({
      name: cfg.name,
      url: cfg.url,
      api_key: cfg.api_key,
      movies_category_name: cfg.movies_category_name,
      series_category_name: cfg.series_category_name,
      movies_library_id: cfg.movies_library_id ?? '',
      series_library_id: cfg.series_library_id ?? '',
    })
    setTestResult(null)
    setLibraries([])
    setShowForm(true)
  }

  async function testConnection() {
    if (!form.url || !form.api_key) return
    setTesting(true)
    setTestResult(null)
    try {
      // Test via temporary save-less call using an existing config if editId, else test inline
      if (editId) {
        const { data } = await api.post(`/jellyfin/${editId}/test`)
        setTestResult(data)
      } else {
        // Create temp config, test, then delete
        const { data: created } = await api.post('/jellyfin', {
          name: '__test__',
          url: form.url,
          api_key: form.api_key,
          movies_category_name: form.movies_category_name,
          series_category_name: form.series_category_name,
        })
        const { data: result } = await api.post(`/jellyfin/${created.id}/test`)
        await api.delete(`/jellyfin/${created.id}`)
        setTestResult(result)
      }
    } catch {
      setTestResult({ ok: false, error: 'Error de red' })
    } finally {
      setTesting(false)
    }
  }

  async function loadLibraries() {
    if (!editId) {
      // Need to save first
      await save()
      return
    }
    setLibsLoading(true)
    try {
      const { data } = await api.get(`/jellyfin/${editId}/libraries`)
      setLibraries(data)
    } catch {
      setLibraries([])
    } finally {
      setLibsLoading(false)
    }
  }

  async function save() {
    setSaving(true)
    try {
      const payload = {
        ...form,
        movies_library_id: form.movies_library_id || null,
        series_library_id: form.series_library_id || null,
      }
      if (editId) {
        await api.put(`/jellyfin/${editId}`, payload)
      } else {
        const { data } = await api.post('/jellyfin', payload)
        setEditId(data.id)
      }
      await load()
    } finally {
      setSaving(false)
    }
  }

  async function deleteCfg(id: number) {
    if (!confirm('¿Eliminar esta configuración de Jellyfin? Se borrarán todos los canales sincronizados.')) return
    await api.delete(`/jellyfin/${id}`)
    setConfigs(prev => prev.filter(c => c.id !== id))
    if (editId === id) setShowForm(false)
  }

  async function startSync(id: number) {
    setSyncStatus(prev => ({ ...prev, [id]: { status: 'running', message: 'Iniciando…', synced: 0 } }))
    await api.post(`/jellyfin/${id}/sync`)
    pollSync(id)
  }

  function pollSync(id: number) {
    const iv = setInterval(async () => {
      try {
        const { data } = await api.get(`/jellyfin/${id}/sync-status`)
        setSyncStatus(prev => ({ ...prev, [id]: data }))
        if (data.status !== 'running') {
          clearInterval(iv)
          if (data.status === 'done') load()
        }
      } catch {
        clearInterval(iv)
      }
    }, 1500)
  }

  const movieLibs = libraries.filter(l => l.type === 'movies' || l.type === '')
  const tvLibs = libraries.filter(l => l.type === 'tvshows' || l.type === '')

  return (
    <div className="p-6 max-w-4xl mx-auto">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold">Biblioteca Jellyfin</h1>
          <p className="text-gray-400 text-sm mt-1">
            Integra tu catálogo local de Jellyfin como VOD y Series en KiraStream
          </p>
        </div>
        <button
          onClick={openCreate}
          className="flex items-center gap-2 bg-primary-600 hover:bg-primary-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
        >
          <Plus size={16} /> Nueva conexión
        </button>
      </div>

      {/* Config list */}
      {loading ? (
        <div className="flex justify-center py-12">
          <Loader size={24} className="animate-spin text-gray-400" />
        </div>
      ) : configs.length === 0 ? (
        <div className="bg-dark-800 border border-dark-700 rounded-xl p-12 text-center text-gray-500">
          <Film size={36} className="mx-auto mb-3 opacity-30" />
          <p className="text-sm">No hay conexiones Jellyfin configuradas</p>
          <button onClick={openCreate} className="mt-4 text-primary-400 hover:text-primary-300 text-sm">
            + Añadir primera conexión
          </button>
        </div>
      ) : (
        <div className="space-y-4">
          {configs.map(cfg => {
            const ss = syncStatus[cfg.id]
            return (
              <div key={cfg.id} className="bg-dark-800 border border-dark-700 rounded-xl overflow-hidden">
                <div className="flex items-center gap-4 p-4">
                  <div className="w-10 h-10 rounded-lg bg-purple-900/30 flex items-center justify-center shrink-0">
                    <Film size={20} className="text-purple-400" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <span className="font-medium">{cfg.name}</span>
                      <span className={`text-xs px-1.5 py-0.5 rounded ${cfg.is_active ? 'bg-green-900/30 text-green-400' : 'bg-gray-700 text-gray-400'}`}>
                        {cfg.is_active ? 'activo' : 'inactivo'}
                      </span>
                    </div>
                    <div className="text-xs text-gray-500 mt-0.5 truncate">{cfg.url}</div>
                    <div className="text-xs text-gray-600 mt-0.5">
                      {cfg.item_count} elementos
                      {cfg.last_sync_at && ` · Última sync: ${new Date(cfg.last_sync_at).toLocaleString('es-ES')}`}
                    </div>
                  </div>
                  <div className="flex items-center gap-2 shrink-0">
                    {ss?.status === 'running' ? (
                      <span className="flex items-center gap-1 text-xs text-yellow-400">
                        <RefreshCw size={12} className="animate-spin" /> {ss.message}
                      </span>
                    ) : (
                      <button
                        onClick={() => startSync(cfg.id)}
                        className="flex items-center gap-1.5 text-xs bg-dark-700 hover:bg-primary-600 text-gray-300 hover:text-white px-3 py-1.5 rounded-lg transition-colors"
                      >
                        <RefreshCw size={12} /> Sincronizar
                      </button>
                    )}
                    <button
                      onClick={() => openEdit(cfg)}
                      className="text-gray-500 hover:text-primary-400 p-1.5 rounded transition-colors"
                      title="Editar"
                    >
                      <Pencil size={14} />
                    </button>
                    <button
                      onClick={() => deleteCfg(cfg.id)}
                      className="text-gray-500 hover:text-red-400 p-1.5 rounded transition-colors"
                      title="Eliminar"
                    >
                      <Trash2 size={14} />
                    </button>
                    <button
                      onClick={() => setExpanded(expanded === cfg.id ? null : cfg.id)}
                      className="text-gray-500 hover:text-gray-300 p-1.5 rounded transition-colors"
                    >
                      {expanded === cfg.id ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
                    </button>
                  </div>
                </div>

                {ss?.status === 'done' && (
                  <div className="px-4 pb-3 text-xs text-green-400 flex items-center gap-1">
                    <Check size={12} /> {ss.message} · {ss.synced} elementos importados
                  </div>
                )}
                {ss?.status === 'error' && (
                  <div className="px-4 pb-3 text-xs text-red-400 flex items-center gap-1">
                    <X size={12} /> Error: {ss.message}
                  </div>
                )}

                {expanded === cfg.id && (
                  <div className="px-4 pb-4 border-t border-dark-700 pt-3 grid grid-cols-2 gap-4 text-xs text-gray-400">
                    <div>
                      <div className="flex items-center gap-1 mb-1 text-purple-400 font-medium">
                        <Film size={12} /> Películas
                      </div>
                      <div>Categoría: <span className="text-gray-300">{cfg.movies_category_name}</span></div>
                      <div>Biblioteca: <span className="text-gray-300">{cfg.movies_library_id || '—'}</span></div>
                    </div>
                    <div>
                      <div className="flex items-center gap-1 mb-1 text-blue-400 font-medium">
                        <Tv size={12} /> Series
                      </div>
                      <div>Categoría: <span className="text-gray-300">{cfg.series_category_name}</span></div>
                      <div>Biblioteca: <span className="text-gray-300">{cfg.series_library_id || '—'}</span></div>
                    </div>
                  </div>
                )}
              </div>
            )
          })}
        </div>
      )}

      {/* Form modal */}
      {showForm && (
        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
          <div className="bg-dark-800 border border-dark-700 rounded-xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
            <div className="flex items-center justify-between p-4 border-b border-dark-700">
              <h2 className="font-semibold">{editId ? 'Editar conexión' : 'Nueva conexión Jellyfin'}</h2>
              <button onClick={() => setShowForm(false)} className="text-gray-500 hover:text-white">
                <X size={16} />
              </button>
            </div>

            <div className="p-4 space-y-4">
              <div>
                <label className="text-xs text-gray-400 mb-1 block">Nombre</label>
                <input
                  className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm"
                  value={form.name}
                  onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
                  placeholder="Mi Jellyfin"
                />
              </div>
              <div>
                <label className="text-xs text-gray-400 mb-1 block">URL del servidor</label>
                <input
                  className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm font-mono"
                  value={form.url}
                  onChange={e => setForm(f => ({ ...f, url: e.target.value }))}
                  placeholder="http://192.168.1.x:8096"
                />
              </div>
              <div>
                <label className="text-xs text-gray-400 mb-1 block">API Key</label>
                <input
                  className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm font-mono"
                  value={form.api_key}
                  onChange={e => setForm(f => ({ ...f, api_key: e.target.value }))}
                  placeholder="Tu API key de Jellyfin"
                />
              </div>

              {/* Test connection */}
              <div className="flex items-center gap-3">
                <button
                  onClick={testConnection}
                  disabled={testing || !form.url || !form.api_key}
                  className="flex items-center gap-1.5 bg-dark-700 hover:bg-dark-600 text-sm px-3 py-2 rounded-lg transition-colors disabled:opacity-50"
                >
                  {testing ? <Loader size={14} className="animate-spin" /> : <Check size={14} />}
                  Probar conexión
                </button>
                {testResult && (
                  <span className={`text-xs flex items-center gap-1 ${testResult.ok ? 'text-green-400' : 'text-red-400'}`}>
                    {testResult.ok ? (
                      <><Check size={12} /> {testResult.server_name}</>
                    ) : (
                      <><X size={12} /> {testResult.error}</>
                    )}
                  </span>
                )}
              </div>

              <hr className="border-dark-600" />

              {/* Library selectors */}
              <div className="flex items-center justify-between">
                <span className="text-xs text-gray-400 font-medium uppercase tracking-wider">Bibliotecas</span>
                <button
                  onClick={loadLibraries}
                  disabled={libsLoading}
                  className="flex items-center gap-1 text-xs text-primary-400 hover:text-primary-300 transition-colors disabled:opacity-50"
                >
                  {libsLoading ? <Loader size={11} className="animate-spin" /> : <RefreshCw size={11} />}
                  {editId ? 'Cargar bibliotecas' : 'Guardar primero para cargar'}
                </button>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="text-xs text-gray-400 mb-1 block flex items-center gap-1">
                    <Film size={11} /> Biblioteca de Películas
                  </label>
                  {libraries.length > 0 ? (
                    <select
                      className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm"
                      value={form.movies_library_id}
                      onChange={e => setForm(f => ({ ...f, movies_library_id: e.target.value }))}
                    >
                      <option value="">— ninguna —</option>
                      {libraries.map(l => (
                        <option key={l.id} value={l.id}>{l.name} ({l.type || 'sin tipo'})</option>
                      ))}
                    </select>
                  ) : (
                    <input
                      className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm font-mono text-xs"
                      value={form.movies_library_id}
                      onChange={e => setForm(f => ({ ...f, movies_library_id: e.target.value }))}
                      placeholder="ID de biblioteca"
                    />
                  )}
                </div>
                <div>
                  <label className="text-xs text-gray-400 mb-1 block flex items-center gap-1">
                    <Tv size={11} /> Biblioteca de Series
                  </label>
                  {libraries.length > 0 ? (
                    <select
                      className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm"
                      value={form.series_library_id}
                      onChange={e => setForm(f => ({ ...f, series_library_id: e.target.value }))}
                    >
                      <option value="">— ninguna —</option>
                      {libraries.map(l => (
                        <option key={l.id} value={l.id}>{l.name} ({l.type || 'sin tipo'})</option>
                      ))}
                    </select>
                  ) : (
                    <input
                      className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm font-mono text-xs"
                      value={form.series_library_id}
                      onChange={e => setForm(f => ({ ...f, series_library_id: e.target.value }))}
                      placeholder="ID de biblioteca"
                    />
                  )}
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="text-xs text-gray-400 mb-1 block">Nombre categoría Películas</label>
                  <input
                    className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm"
                    value={form.movies_category_name}
                    onChange={e => setForm(f => ({ ...f, movies_category_name: e.target.value }))}
                  />
                </div>
                <div>
                  <label className="text-xs text-gray-400 mb-1 block">Nombre categoría Series</label>
                  <input
                    className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm"
                    value={form.series_category_name}
                    onChange={e => setForm(f => ({ ...f, series_category_name: e.target.value }))}
                  />
                </div>
              </div>
            </div>

            <div className="flex justify-end gap-3 p-4 border-t border-dark-700">
              <button
                onClick={() => setShowForm(false)}
                className="px-4 py-2 text-sm text-gray-400 hover:text-white"
              >
                Cancelar
              </button>
              <button
                onClick={async () => { await save(); setShowForm(false) }}
                disabled={saving || !form.name || !form.url || !form.api_key}
                className="flex items-center gap-2 bg-primary-600 hover:bg-primary-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
              >
                {saving && <Loader size={14} className="animate-spin" />}
                {editId ? 'Guardar cambios' : 'Crear'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}