"use client";

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

interface ImageUploaderProps {
  value: string;
  onChange: (url: string) => void;
  label?: string;
}

export default function ImageUploader({ value, onChange, label = "Imagen" }: ImageUploaderProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [uploading, setUploading] = useState(false);
  const [error, setError] = useState("");

  const handleFile = async (file: File) => {
    setError("");
    setUploading(true);
    try {
      const fd = new FormData();
      fd.append("file", file);
      const res = await fetch("/api/admin/upload", {
        method: "POST",
        credentials: "include",
        body: fd,
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setError(data.error || `Error al subir (${res.status})`);
        return;
      }
      if (!data.url) {
        setError("El servidor no devolvió la URL de la imagen");
        return;
      }
      onChange(data.url);
    } finally {
      setUploading(false);
    }
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    const file = e.dataTransfer.files[0];
    if (file) handleFile(file);
  };

  return (
    <div>
      <label className="block text-xs text-gray-400 mb-1">{label}</label>

      {/* Preview: rutas tipo "uploads/x" sin "/" rompen en /admin/* → /admin/uploads/x */}
      {value.trim() !== "" && (
        <div className="relative mb-2 rounded-xl overflow-hidden h-40 bg-white/5 border border-white/10">
          <img
            src={normalizeMediaUrl(value) || value}
            alt="preview"
            className="w-full h-full object-cover"
          />
          <button
            type="button"
            onClick={() => onChange("")}
            className="absolute top-2 right-2 p-1 bg-black/60 rounded-full text-white hover:bg-red-500/80 transition-colors"
          >
            <X className="w-4 h-4" />
          </button>
        </div>
      )}

      {/* Drop zone */}
      <div
        onDrop={handleDrop}
        onDragOver={(e) => e.preventDefault()}
        onClick={() => inputRef.current?.click()}
        className="cursor-pointer border-2 border-dashed border-white/20 hover:border-neon-blue/60 rounded-xl p-6 flex flex-col items-center gap-2 transition-colors bg-white/3"
      >
        {uploading ? (
          <Loader2 className="w-6 h-6 animate-spin text-neon-blue" />
        ) : (
          <Upload className="w-6 h-6 text-gray-400" />
        )}
        <p className="text-xs text-gray-400 text-center">
          {uploading ? "Subiendo..." : "Haz clic o arrastra una imagen aquí"}
        </p>
        <p className="text-xs text-gray-600">JPG, PNG, WEBP · Máx 5 MB</p>
      </div>

      <input
        ref={inputRef}
        type="file"
        accept="image/jpeg,image/png,image/webp,image/gif"
        className="hidden"
        onChange={(e) => { const f = e.target.files?.[0]; if (f) handleFile(f); }}
      />

      {/* URL manual como fallback */}
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder="O pega una URL de imagen"
        className="mt-2 w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:border-neon-blue"
      />

      {error && <p className="text-red-400 text-xs mt-1">{error}</p>}
    </div>
  );
}