'use client'

import { useState, useEffect, useRef, useCallback } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import {
  Upload,
  Plus,
  Edit2,
  Trash2,
  Save,
  X,
  LogOut,
  Image as ImageIcon,
  Film,
  Music,
  FileText,
  Eye,
  Loader2,
} from 'lucide-react'

type Memory = {
  id: number
  title: string
  content: string
  created_at: string
  updated_at: string
}

type MediaItem = {
  id: number
  filename: string
  original_name: string | null
  type: 'photo' | 'video' | 'music'
  caption: string | null
  sort_order: number
  created_at: string
}

export default function AdminPage() {
  const [authed, setAuthed] = useState<boolean | null>(null)
  const [password, setPassword] = useState('')
  const [loginError, setLoginError] = useState('')
  const [loginLoading, setLoginLoading] = useState(false)

  const [memories, setMemories] = useState<Memory[]>([])
  const [photos, setPhotos] = useState<MediaItem[]>([])
  const [videos, setVideos] = useState<MediaItem[]>([])
  const [music, setMusic] = useState<MediaItem[]>([])

  const [uploading, setUploading] = useState(false)
  const [uploadCaption, setUploadCaption] = useState('')
  const [uploadStatus, setUploadStatus] = useState('')
  const [dragOver, setDragOver] = useState(false)

  const [editingMemory, setEditingMemory] = useState<Memory | null>(null)
  const [newMemory, setNewMemory] = useState({ title: '', content: '' })
  const [showNewMemory, setShowNewMemory] = useState(false)
  const [savingMemory, setSavingMemory] = useState(false)

  const fileInputRef = useRef<HTMLInputElement>(null)

  const loadData = useCallback(async () => {
    const [memoriesRes, mediaRes] = await Promise.all([
      fetch('/api/memories'),
      fetch('/api/media'),
    ])
    const [memoriesData, mediaData] = await Promise.all([
      memoriesRes.json(),
      mediaRes.json(),
    ])
    setMemories(Array.isArray(memoriesData) ? memoriesData : [])
    const items: MediaItem[] = Array.isArray(mediaData) ? mediaData : []
    setPhotos(items.filter((m) => m.type === 'photo'))
    setVideos(items.filter((m) => m.type === 'video'))
    setMusic(items.filter((m) => m.type === 'music'))
  }, [])

  useEffect(() => {
    fetch('/api/auth')
      .then((r) => r.json())
      .then((d) => {
        setAuthed(d.authed)
        if (d.authed) loadData()
      })
      .catch(() => setAuthed(false))
  }, [loadData])

  const login = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoginLoading(true)
    setLoginError('')
    try {
      const res = await fetch('/api/auth', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ password }),
      })
      if (res.ok) {
        setAuthed(true)
        loadData()
      } else {
        setLoginError('Falsches Passwort')
      }
    } finally {
      setLoginLoading(false)
    }
  }

  const logout = async () => {
    await fetch('/api/auth', { method: 'DELETE' })
    setAuthed(false)
    setPassword('')
  }

  const uploadFile = async (file: File) => {
    const formData = new FormData()
    formData.append('file', file)
    if (uploadCaption) formData.append('caption', uploadCaption)

    const res = await fetch('/api/upload', { method: 'POST', body: formData })
    if (!res.ok) {
      const err = await res.json().catch(() => ({}))
      setUploadStatus(`Fehler: ${err.error || 'Unbekannter Fehler'}`)
      return false
    }
    return true
  }

  const handleFiles = async (files: File[]) => {
    if (files.length === 0) return
    setUploading(true)
    setUploadStatus(`Lade ${files.length} Datei(en) hoch...`)

    let success = 0
    for (const file of files) {
      const ok = await uploadFile(file)
      if (ok) success++
    }

    setUploadStatus(`${success} von ${files.length} hochgeladen.`)
    setUploadCaption('')
    await loadData()
    setUploading(false)
    if (fileInputRef.current) fileInputRef.current.value = ''
    setTimeout(() => setUploadStatus(''), 3000)
  }

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    handleFiles(Array.from(e.target.files || []))
  }

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    setDragOver(false)
    handleFiles(Array.from(e.dataTransfer.files))
  }

  const deleteMedia = async (id: number) => {
    if (!confirm('Datei wirklich löschen?')) return
    await fetch(`/api/media/${id}`, { method: 'DELETE' })
    loadData()
  }

  const saveMemory = async (e: React.FormEvent) => {
    e.preventDefault()
    setSavingMemory(true)
    try {
      if (editingMemory) {
        await fetch(`/api/memories/${editingMemory.id}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            title: editingMemory.title,
            content: editingMemory.content,
          }),
        })
        setEditingMemory(null)
      } else {
        await fetch('/api/memories', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(newMemory),
        })
        setNewMemory({ title: '', content: '' })
        setShowNewMemory(false)
      }
      loadData()
    } finally {
      setSavingMemory(false)
    }
  }

  const deleteMemory = async (id: number) => {
    if (!confirm('Erinnerung wirklich löschen?')) return
    await fetch(`/api/memories/${id}`, { method: 'DELETE' })
    loadData()
  }

  // ── Loading state ──────────────────────────────────────────────────────────
  if (authed === null) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-cream">
        <Loader2 className="animate-spin text-warm-gold" size={28} />
      </div>
    )
  }

  // ── Login ─────────────────────────────────────────────────────────────────
  if (!authed) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-cream px-4">
        <div className="w-full max-w-sm">
          <h1 className="font-cormorant italic text-4xl text-center text-warm-brown mb-1">
            Verwaltung
          </h1>
          <p className="text-center text-warm-brown-light text-sm mb-8 font-lora">
            Maria Malejka · Gedenkseite
          </p>

          <form onSubmit={login} className="space-y-4">
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="Passwort"
              className="w-full px-4 py-3 rounded-xl border border-warm-border bg-white text-warm-brown focus:outline-none focus:ring-2 focus:ring-amber-400 font-lora"
              autoFocus
            />
            {loginError && (
              <p className="text-red-500 text-sm text-center">{loginError}</p>
            )}
            <button
              type="submit"
              disabled={loginLoading}
              className="w-full py-3 bg-amber-800 hover:bg-amber-700 disabled:opacity-60 text-amber-100 rounded-xl font-lora transition-colors flex items-center justify-center gap-2"
            >
              {loginLoading && <Loader2 size={16} className="animate-spin" />}
              Anmelden
            </button>
          </form>

          <a
            href="/"
            className="block text-center mt-5 text-sm text-warm-brown-light hover:text-warm-gold transition-colors"
          >
            ← Zur Gedenkseite
          </a>
        </div>
      </div>
    )
  }

  // ── Admin UI ───────────────────────────────────────────────────────────────
  return (
    <div className="min-h-screen bg-cream">
      {/* Header */}
      <header className="bg-amber-950/95 text-amber-100 px-4 py-3 flex items-center justify-between sticky top-0 z-20 backdrop-blur-sm">
        <a
          href="/"
          className="text-amber-400 hover:text-amber-200 transition-colors flex items-center gap-1.5 text-sm"
        >
          <Eye size={14} />
          Seite ansehen
        </a>
        <h1 className="font-cormorant italic text-xl text-amber-200">
          Verwaltung
        </h1>
        <button
          onClick={logout}
          className="text-amber-500 hover:text-amber-200 transition-colors flex items-center gap-1.5 text-sm"
        >
          <LogOut size={14} />
          Abmelden
        </button>
      </header>

      <div className="max-w-3xl mx-auto px-4 py-10 space-y-14">
        {/* ── Upload Section ───────────────────────────────────────────────── */}
        <section>
          <h2 className="font-cormorant italic text-3xl text-warm-brown mb-5 flex items-center gap-2">
            <Upload size={20} className="text-warm-gold" />
            Dateien hochladen
          </h2>

          <div className="mb-3">
            <input
              type="text"
              value={uploadCaption}
              onChange={(e) => setUploadCaption(e.target.value)}
              placeholder="Bildunterschrift / Beschreibung (optional)"
              className="w-full px-4 py-2.5 rounded-xl border border-warm-border bg-white text-warm-brown text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 font-lora"
            />
          </div>

          <div
            onDrop={handleDrop}
            onDragOver={(e) => { e.preventDefault(); setDragOver(true) }}
            onDragLeave={() => setDragOver(false)}
            className={`border-2 border-dashed rounded-2xl p-8 text-center transition-colors ${
              dragOver
                ? 'border-amber-500 bg-amber-50/50'
                : 'border-warm-border hover:border-amber-400'
            }`}
          >
            <Upload className="mx-auto mb-3 text-warm-gold" size={28} />
            <p className="text-warm-brown font-lora text-sm mb-1">
              Fotos, Videos oder Musik hochladen
            </p>
            <p className="text-warm-brown-light text-xs mb-4">
              JPG, PNG, HEIC (iPhone), MP4, MOV, MP3, M4A — mehrere auf einmal möglich
            </p>

            <input
              ref={fileInputRef}
              type="file"
              multiple
              accept="image/*,video/*,audio/*"
              onChange={handleFileChange}
              className="hidden"
              id="file-upload"
            />
            <label
              htmlFor="file-upload"
              className={`inline-block px-6 py-2.5 rounded-xl cursor-pointer transition-colors font-lora text-sm ${
                uploading
                  ? 'bg-amber-200 text-amber-700 cursor-not-allowed'
                  : 'bg-amber-800 hover:bg-amber-700 text-amber-100'
              }`}
            >
              {uploading ? 'Lädt hoch…' : 'Dateien auswählen'}
            </label>

            {uploadStatus && (
              <p className="mt-3 text-sm text-warm-brown-light font-lora">
                {uploadStatus}
              </p>
            )}
          </div>
        </section>

        {/* ── Photos ──────────────────────────────────────────────────────── */}
        <section>
          <h2 className="font-cormorant italic text-3xl text-warm-brown mb-5 flex items-center gap-2">
            <ImageIcon size={20} className="text-warm-gold" />
            Fotos
            <span className="text-warm-brown-light text-xl">({photos.length})</span>
          </h2>

          {photos.length === 0 ? (
            <p className="text-warm-brown-light text-sm italic font-lora">
              Noch keine Fotos hochgeladen.
            </p>
          ) : (
            <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-3">
              {photos.map((photo) => (
                <div key={photo.id} className="relative group aspect-square">
                  <img
                    src={`/api/files/${photo.filename}`}
                    alt={photo.caption || ''}
                    className="w-full h-full object-cover rounded-xl"
                    loading="lazy"
                  />
                  <button
                    onClick={() => deleteMedia(photo.id)}
                    className="absolute top-1 right-1 bg-red-500/90 text-white rounded-full p-1.5 opacity-0 group-hover:opacity-100 transition-opacity shadow"
                    title="Löschen"
                  >
                    <Trash2 size={12} />
                  </button>
                  {photo.caption && (
                    <div className="absolute bottom-0 inset-x-0 bg-black/50 rounded-b-xl px-1.5 py-1">
                      <p className="text-white text-xs truncate">{photo.caption}</p>
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </section>

        {/* ── Videos ──────────────────────────────────────────────────────── */}
        <section>
          <h2 className="font-cormorant italic text-3xl text-warm-brown mb-5 flex items-center gap-2">
            <Film size={20} className="text-warm-gold" />
            Videos
            <span className="text-warm-brown-light text-xl">({videos.length})</span>
          </h2>

          {videos.length === 0 ? (
            <p className="text-warm-brown-light text-sm italic font-lora">
              Noch keine Videos hochgeladen.
            </p>
          ) : (
            <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
              {videos.map((video) => (
                <div key={video.id} className="relative group">
                  <video
                    src={`/api/files/${video.filename}`}
                    className="w-full aspect-video object-cover rounded-xl bg-stone-900"
                    preload="metadata"
                    muted
                  />
                  <p className="text-xs text-warm-brown-light mt-1 truncate font-lora">
                    {video.original_name || video.caption || video.filename}
                  </p>
                  <button
                    onClick={() => deleteMedia(video.id)}
                    className="absolute top-1 right-1 bg-red-500/90 text-white rounded-full p-1.5 opacity-0 group-hover:opacity-100 transition-opacity shadow"
                    title="Löschen"
                  >
                    <Trash2 size={12} />
                  </button>
                </div>
              ))}
            </div>
          )}
        </section>

        {/* ── Music ───────────────────────────────────────────────────────── */}
        <section>
          <h2 className="font-cormorant italic text-3xl text-warm-brown mb-5 flex items-center gap-2">
            <Music size={20} className="text-warm-gold" />
            Musik
            <span className="text-warm-brown-light text-xl">({music.length})</span>
          </h2>

          {music.length === 0 ? (
            <p className="text-warm-brown-light text-sm italic font-lora">
              Noch keine Musik hochgeladen.
            </p>
          ) : (
            <div className="space-y-2">
              {music.map((track, i) => (
                <div
                  key={track.id}
                  className="flex items-center gap-3 bg-white/60 rounded-xl px-4 py-3 border border-warm-border group"
                >
                  <span className="text-warm-gold/60 text-sm font-cormorant">{i + 1}.</span>
                  <Music size={14} className="text-warm-gold flex-shrink-0" />
                  <div className="flex-1 min-w-0">
                    <p className="text-sm text-warm-brown truncate font-lora">
                      {track.original_name?.replace(/\.[^/.]+$/, '') ||
                        track.caption ||
                        track.filename}
                    </p>
                  </div>
                  <button
                    onClick={() => deleteMedia(track.id)}
                    className="text-red-400/60 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100 flex-shrink-0"
                    title="Löschen"
                  >
                    <Trash2 size={15} />
                  </button>
                </div>
              ))}
            </div>
          )}
        </section>

        {/* ── Memories ────────────────────────────────────────────────────── */}
        <section>
          <div className="flex items-center justify-between mb-5">
            <h2 className="font-cormorant italic text-3xl text-warm-brown flex items-center gap-2">
              <FileText size={20} className="text-warm-gold" />
              Erinnerungen
              <span className="text-warm-brown-light text-xl">({memories.length})</span>
            </h2>
            <button
              onClick={() => {
                setShowNewMemory(true)
                setEditingMemory(null)
              }}
              className="flex items-center gap-1.5 px-4 py-2 bg-amber-800 hover:bg-amber-700 text-amber-100 rounded-xl text-sm transition-colors font-lora"
            >
              <Plus size={15} />
              Neue Erinnerung
            </button>
          </div>

          {/* New / Edit form */}
          <AnimatePresence>
            {(showNewMemory || editingMemory) && (
              <motion.form
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: 'auto' }}
                exit={{ opacity: 0, height: 0 }}
                transition={{ duration: 0.25 }}
                onSubmit={saveMemory}
                className="bg-white/80 rounded-2xl p-5 mb-6 space-y-3 border border-warm-border overflow-hidden"
              >
                <div className="flex items-center justify-between">
                  <span className="text-sm text-warm-brown-light font-lora">
                    {editingMemory ? 'Erinnerung bearbeiten' : 'Neue Erinnerung'}
                  </span>
                  <button
                    type="button"
                    onClick={() => {
                      setShowNewMemory(false)
                      setEditingMemory(null)
                    }}
                    className="text-warm-brown-light hover:text-warm-brown"
                  >
                    <X size={16} />
                  </button>
                </div>

                <input
                  type="text"
                  value={editingMemory ? editingMemory.title : newMemory.title}
                  onChange={(e) =>
                    editingMemory
                      ? setEditingMemory({ ...editingMemory, title: e.target.value })
                      : setNewMemory({ ...newMemory, title: e.target.value })
                  }
                  placeholder="Titel"
                  required
                  className="w-full px-4 py-2.5 rounded-xl border border-warm-border bg-white font-cormorant italic text-xl text-warm-brown focus:outline-none focus:ring-2 focus:ring-amber-400"
                />

                <textarea
                  value={editingMemory ? editingMemory.content : newMemory.content}
                  onChange={(e) =>
                    editingMemory
                      ? setEditingMemory({ ...editingMemory, content: e.target.value })
                      : setNewMemory({ ...newMemory, content: e.target.value })
                  }
                  placeholder="Deine Gedanken und Erinnerungen…"
                  required
                  rows={7}
                  className="w-full px-4 py-3 rounded-xl border border-warm-border bg-white font-lora text-warm-brown focus:outline-none focus:ring-2 focus:ring-amber-400 resize-none text-sm leading-relaxed"
                />

                <div className="flex gap-2 justify-end">
                  <button
                    type="button"
                    onClick={() => {
                      setShowNewMemory(false)
                      setEditingMemory(null)
                    }}
                    className="px-4 py-2 rounded-xl border border-warm-border text-warm-brown-light hover:text-warm-brown text-sm transition-colors font-lora"
                  >
                    Abbrechen
                  </button>
                  <button
                    type="submit"
                    disabled={savingMemory}
                    className="px-4 py-2 bg-amber-800 hover:bg-amber-700 disabled:opacity-60 text-amber-100 rounded-xl text-sm transition-colors flex items-center gap-1.5 font-lora"
                  >
                    {savingMemory ? (
                      <Loader2 size={14} className="animate-spin" />
                    ) : (
                      <Save size={14} />
                    )}
                    Speichern
                  </button>
                </div>
              </motion.form>
            )}
          </AnimatePresence>

          {memories.length === 0 ? (
            <p className="text-warm-brown-light text-sm italic font-lora">
              Noch keine Erinnerungen geschrieben.
            </p>
          ) : (
            <div className="space-y-3">
              {memories.map((memory) => (
                <div
                  key={memory.id}
                  className={`bg-white/60 rounded-2xl p-5 border transition-colors ${
                    editingMemory?.id === memory.id
                      ? 'border-amber-400'
                      : 'border-warm-border'
                  }`}
                >
                  <div className="flex items-start justify-between gap-3">
                    <div className="flex-1 min-w-0">
                      <h3 className="font-cormorant italic text-xl text-warm-brown leading-snug">
                        {memory.title}
                      </h3>
                      <p className="text-warm-brown-light text-xs mt-0.5 font-lora">
                        {new Date(memory.created_at).toLocaleDateString('de-DE', {
                          day: 'numeric',
                          month: 'long',
                          year: 'numeric',
                        })}
                      </p>
                      <p className="text-warm-brown/70 text-sm mt-2 line-clamp-3 font-lora leading-relaxed">
                        {memory.content}
                      </p>
                    </div>
                    <div className="flex gap-1 flex-shrink-0">
                      <button
                        onClick={() => {
                          setEditingMemory(memory)
                          setShowNewMemory(false)
                        }}
                        className="p-2 text-amber-700 hover:text-amber-500 transition-colors rounded-lg hover:bg-amber-50"
                        title="Bearbeiten"
                      >
                        <Edit2 size={15} />
                      </button>
                      <button
                        onClick={() => deleteMemory(memory.id)}
                        className="p-2 text-red-400/70 hover:text-red-500 transition-colors rounded-lg hover:bg-red-50"
                        title="Löschen"
                      >
                        <Trash2 size={15} />
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </section>
      </div>
    </div>
  )
}