"use client";

import { useState, useEffect, useRef } from "react";

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

export default function ImageSelector({
  value,
  onChange,
  label,
}: ImageSelectorProps) {
  const [availableImages, setAvailableImages] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [urlInput, setUrlInput] = useState("");
  const [showGallery, setShowGallery] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    fetchAvailableImages();
  }, []);

  const fetchAvailableImages = async () => {
    try {
      const response = await fetch("/api/admin/images/list");
      if (response.ok) {
        const data = await response.json();
        setAvailableImages(data.images || []);
      }
    } catch (error) {
      console.error("Error fetching images:", error);
    }
  };

  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setUploading(true);
    try {
      const formData = new FormData();
      formData.append("file", file);

      const response = await fetch("/api/admin/images/upload", {
        method: "POST",
        body: formData,
      });

      if (response.ok) {
        const data = await response.json();
        onChange(data.url);
        await fetchAvailableImages(); // Rafraîchir la liste
      } else {
        alert("Erreur lors de l'upload de l'image");
      }
    } catch (error) {
      console.error("Error uploading image:", error);
      alert("Erreur lors de l'upload de l'image");
    } finally {
      setUploading(false);
      if (fileInputRef.current) {
        fileInputRef.current.value = "";
      }
    }
  };

  const handleUrlSubmit = () => {
    if (urlInput.trim()) {
      onChange(urlInput.trim());
      setUrlInput("");
    }
  };

  return (
    <div className="space-y-3">
      <label className="block text-sm text-gray-300 mb-1">{label}</label>

      <div className="flex gap-4">
        {/* Colonne gauche - Image */}
        <div className="flex-shrink-0">
          {value ? (
            <div className="relative w-48 h-32 border border-pixel-gold/30 rounded overflow-hidden bg-black/60">
              <img
                src={value}
                alt="Preview"
                className="w-full h-full object-cover"
                onError={(e) => {
                  e.currentTarget.src = "/got-2.jpg"; // Image par défaut en cas d'erreur
                }}
              />
              <button
                onClick={() => onChange("")}
                className="absolute top-2 right-2 px-2 py-1 bg-red-900/80 text-red-200 text-xs rounded hover:bg-red-900 transition"
              >
                ✕
              </button>
            </div>
          ) : (
            <div className="w-48 h-32 border border-pixel-gold/30 rounded bg-black/60 flex items-center justify-center">
              <span className="text-xs text-gray-500">Aucune</span>
            </div>
          )}
        </div>

        {/* Colonne droite - Contrôles */}
        <div className="flex-1 space-y-3">
          {/* Input URL */}
          <div className="flex gap-2">
            <input
              type="text"
              value={urlInput}
              onChange={(e) => setUrlInput(e.target.value)}
              onKeyPress={(e) => e.key === "Enter" && handleUrlSubmit()}
              placeholder="https://example.com/image.jpg ou /image.jpg"
              className="flex-1 px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm"
            />
            <button
              onClick={handleUrlSubmit}
              className="px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition"
            >
              URL
            </button>
          </div>

          {/* Upload depuis le disque */}
          <div className="flex gap-2">
            <input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              onChange={handleFileUpload}
              className="hidden"
              id={`file-${label}`}
            />
            <label
              htmlFor={`file-${label}`}
              className={`flex-1 px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition text-center cursor-pointer ${
                uploading ? "opacity-50 cursor-not-allowed" : ""
              }`}
            >
              {uploading ? "Upload..." : "Upload depuis le disque"}
            </label>
            <button
              onClick={() => setShowGallery(!showGallery)}
              className="px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition"
            >
              {showGallery ? "Masquer" : "Galerie"}
            </button>
          </div>

          {/* Chemin de l'image */}
          {value && (
            <p className="text-xs text-gray-400 truncate">{value}</p>
          )}
        </div>
      </div>

      {/* Galerie d'images */}
      {showGallery && (
        <div className="mt-4 p-4 bg-black/40 border border-pixel-gold/20 rounded">
          <h4 className="text-sm text-gray-300 mb-3">Images disponibles</h4>
          <div className="grid grid-cols-3 md:grid-cols-4 gap-3 max-h-64 overflow-y-auto">
            {availableImages.length === 0 ? (
              <div className="col-span-full text-center text-gray-400 text-sm py-4">
                Aucune image disponible
              </div>
            ) : (
              availableImages.map((imageUrl) => (
                <button
                  key={imageUrl}
                  onClick={() => {
                    onChange(imageUrl);
                    setShowGallery(false);
                  }}
                  className={`relative aspect-video rounded overflow-hidden border-2 transition ${
                    value === imageUrl
                      ? "border-pixel-gold"
                      : "border-pixel-gold/30 hover:border-pixel-gold/50"
                  }`}
                >
                  <img
                    src={imageUrl}
                    alt={imageUrl}
                    className="w-full h-full object-cover"
                    onError={(e) => {
                      e.currentTarget.style.display = "none";
                    }}
                  />
                  {value === imageUrl && (
                    <div className="absolute inset-0 bg-pixel-gold/20 flex items-center justify-center">
                      <span className="text-pixel-gold text-xs">✓</span>
                    </div>
                  )}
                </button>
              ))
            )}
          </div>
        </div>
      )}
    </div>
  );
}