"use client";

import { useState } from "react";
import { Plus, Trash2, ImageIcon, Loader2 } from "lucide-react";
import ImageUploader from "@/components/ImageUploader";
import { normalizeMediaUrl } from "@/lib/media-url";

type Slide = { id: string; imageUrl: string; order: number };

export default function AdminWatermarksClient({ initialSlides }: { initialSlides: Slide[] }) {
  const [slides, setSlides] = useState<Slide[]>(initialSlides);
  const [adding, setAdding] = useState(false);
  const [newUrl, setNewUrl] = useState("");
  const [loading, setLoading] = useState(false);

  const addSlide = async () => {
    if (!newUrl.trim()) return;
    setLoading(true);
    try {
      const res = await fetch("/api/admin/watermarks", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ imageUrl: newUrl.trim() }),
      });
      const data = await res.json();
      if (data.id) {
        setSlides((prev) => [...prev, data]);
        setNewUrl("");
        setAdding(false);
      }
    } catch (e) {
      console.error(e);
      alert("Error guardando la imagen.");
    } finally {
      setLoading(false);
    }
  };

  const removeSlide = async (id: string) => {
    if (!confirm("¿Eliminar esta marca de agua del carrusel?")) return;
    try {
      const res = await fetch(`/api/admin/watermarks/${id}`, { method: "DELETE" });
      if (res.ok) setSlides((prev) => prev.filter((s) => s.id !== id));
    } catch (e) {
      console.error(e);
      alert("Error eliminando la imagen.");
    }
  };

  return (
    <div className="space-y-8">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <ImageIcon className="text-[#39ff14] w-7 h-7" />
          <h1 className="text-3xl font-bold">Marcas de Agua (Empresas)</h1>
        </div>
      </div>

      <p className="text-gray-400 text-sm">
        Sube imágenes jpg, png, etc. Estas imágenes se muestran en el carrusel inferior de inicio de "Nuestros Sorteos Confiables".
      </p>

      <div className="space-y-4">
        {slides.map((slide) => (
          <div
            key={slide.id}
            className="flex items-center gap-4 p-4 rounded-xl border border-white/10 bg-white/5"
          >
            <div className="w-32 h-20 rounded-lg overflow-hidden bg-black/30 shrink-0 flex items-center justify-center p-2">
              <img
                src={normalizeMediaUrl(slide.imageUrl) || slide.imageUrl}
                alt=""
                className="w-full h-full object-contain"
              />
            </div>
            <span className="text-sm text-gray-500">Orden {slide.order}</span>
            <button
              type="button"
              onClick={() => removeSlide(slide.id)}
              className="ml-auto p-2 rounded-lg text-red-400 hover:bg-red-500/20 transition-colors"
              title="Eliminar"
            >
              <Trash2 className="w-4 h-4" />
            </button>
          </div>
        ))}
        {slides.length === 0 && !adding && (
          <p className="text-gray-500 text-sm py-4">No hay marcas de agua. Añade la primera abajo.</p>
        )}
      </div>

      {adding ? (
        <div className="p-6 rounded-2xl border border-white/10 bg-white/5 space-y-4">
          <h3 className="font-semibold">Nueva marca de agua</h3>
          <ImageUploader
            label="Logo / Imagen"
            value={newUrl}
            onChange={setNewUrl}
          />
          <div className="flex gap-2">
            <button
              type="button"
              onClick={() => { setAdding(false); setNewUrl(""); }}
              className="px-4 py-2 rounded-xl border border-white/10 text-gray-400 hover:text-white"
            >
              Cancelar
            </button>
            <button
              type="button"
              onClick={addSlide}
              disabled={loading || !newUrl.trim()}
              className="px-6 py-2 rounded-xl bg-[#39ff14] text-black font-semibold disabled:opacity-50 flex items-center gap-2 hover:bg-[#32e012]"
            >
              {loading && <Loader2 className="w-4 h-4 animate-spin" />}
              Subir
            </button>
          </div>
        </div>
      ) : (
        <button
          type="button"
          onClick={() => setAdding(true)}
          className="flex items-center gap-2 px-4 py-3 rounded-xl border border-dashed border-white/20 text-gray-400 hover:text-white hover:border-[#39ff14]/50 transition-colors"
        >
          <Plus className="w-5 h-5" /> Añadir marca de agua
        </button>
      )}
    </div>
  );
}