"use client";

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

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

export default function AdminCarouselClient({ initialSlides }: { initialSlides: Slide[] }) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [slides, setSlides] = useState<Slide[]>(initialSlides);
  const [uploading, setUploading] = useState(false);
  const [error, setError] = useState("");
  const [okMsg, setOkMsg] = useState("");

  const uploadAndAdd = async (file: File) => {
    setError("");
    setOkMsg("");
    setUploading(true);
    try {
      const fd = new FormData();
      fd.append("file", file);

      const up = await fetch("/api/admin/upload", {
        method: "POST",
        credentials: "include",
        body: fd,
      });
      const upData = await up.json().catch(() => ({}));
      if (!up.ok || !upData.url) {
        setError(upData.error || `No se pudo subir la imagen (${up.status})`);
        return;
      }

      const res = await fetch("/api/admin/carousel", {
        method: "POST",
        credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ imageUrl: upData.url, order: slides.length }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || !data.slide) {
        setError(data.error || `Imagen subida pero no se pudo agregar al carrusel (${res.status})`);
        return;
      }

      setSlides((prev) => [...prev, data.slide]);
      setOkMsg("Imagen agregada al carrusel de la portada.");
    } catch {
      setError("Error de red. ¿Está corriendo npm run dev?");
    } finally {
      setUploading(false);
      if (inputRef.current) inputRef.current.value = "";
    }
  };

  const onPick = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) void uploadAndAdd(file);
  };

  const onDrop = (e: React.DragEvent) => {
    e.preventDefault();
    const file = e.dataTransfer.files?.[0];
    if (file) void uploadAndAdd(file);
  };

  const removeSlide = async (id: string) => {
    if (!confirm("¿Eliminar esta imagen del carrusel?")) return;
    setError("");
    try {
      const res = await fetch(`/api/admin/carousel/${id}`, {
        method: "DELETE",
        credentials: "include",
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        setError(data.error || "No se pudo eliminar.");
        return;
      }
      setSlides((prev) => prev.filter((s) => s.id !== id));
      setOkMsg("Imagen eliminada.");
    } catch {
      setError("Error de red al eliminar.");
    }
  };

  return (
    <div className="space-y-8">
      <div className="flex items-center justify-between gap-4 flex-wrap">
        <div className="flex items-center gap-3">
          <ImageIcon className="text-[#7c3aed] w-7 h-7" />
          <h1 className="text-3xl font-bold">Carrusel del Hero (portada)</h1>
        </div>
        <span className="text-xs text-gray-500 bg-white/5 px-3 py-1 rounded-full">
          {slides.length} imagen{slides.length !== 1 ? "es" : ""}
        </span>
      </div>

      <p className="text-gray-400 text-sm">
        Sube fotos aquí y aparecerán en la portada. Si no hay ninguna, se usa la imagen de{" "}
        <a href="/admin/site-images" className="text-[#7c3aed] hover:underline">
          Imágenes del sitio
        </a>
        . Formatos: JPG, PNG, WEBP · máx. 5 MB.
      </p>

      {error && (
        <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
          {error}
        </div>
      )}
      {okMsg && (
        <div className="p-3 rounded-lg bg-green-500/10 border border-green-500/30 text-green-400 text-sm">
          {okMsg}
        </div>
      )}

      {/* Zona de subida: un solo paso */}
      <div
        onDrop={onDrop}
        onDragOver={(e) => e.preventDefault()}
        onClick={() => !uploading && inputRef.current?.click()}
        className={`cursor-pointer border-2 border-dashed rounded-2xl p-10 flex flex-col items-center gap-3 transition-colors ${
          uploading
            ? "border-[#7c3aed]/40 bg-[#7c3aed]/5"
            : "border-white/20 hover:border-[#7c3aed]/50 bg-white/[0.03]"
        }`}
      >
        {uploading ? (
          <Loader2 className="w-8 h-8 animate-spin text-[#7c3aed]" />
        ) : (
          <Upload className="w-8 h-8 text-gray-400" />
        )}
        <p className="text-sm text-white font-medium">
          {uploading ? "Subiendo y agregando…" : "Haz clic o arrastra una imagen aquí"}
        </p>
        <p className="text-xs text-gray-500 flex items-center gap-1">
          <Plus className="w-3.5 h-3.5" /> Se agrega al carrusel automáticamente
        </p>
        <input
          ref={inputRef}
          type="file"
          accept="image/jpeg,image/png,image/webp,image/gif"
          className="hidden"
          onChange={onPick}
          disabled={uploading}
        />
      </div>

      {/* Lista */}
      <div className="space-y-3">
        {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-36 h-24 rounded-lg overflow-hidden bg-black/30 shrink-0 border border-white/10">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={normalizeMediaUrl(slide.imageUrl) || slide.imageUrl}
                alt={`Slide ${slide.order}`}
                className="w-full h-full object-cover"
              />
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-xs text-gray-500 truncate">{slide.imageUrl}</p>
              <p className="text-xs text-gray-600 mt-1">Posición {slide.order}</p>
            </div>
            <button
              type="button"
              onClick={() => removeSlide(slide.id)}
              className="p-2 rounded-lg text-red-400 hover:bg-red-500/20 transition-colors shrink-0"
              title="Eliminar"
            >
              <Trash2 className="w-4 h-4" />
            </button>
          </div>
        ))}
        {slides.length === 0 && (
          <div className="py-8 text-center text-gray-500 border border-dashed border-white/10 rounded-xl">
            <ImageIcon className="w-10 h-10 mx-auto mb-3 opacity-30" />
            <p>Aún no hay imágenes en el carrusel.</p>
          </div>
        )}
      </div>
    </div>
  );
}