"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Upload } from "lucide-react";

type PartnerFormData = {
  name: string;
  logo: string;
  description: string;
  category: string;
  published: boolean;
  order: number;
};

const CATEGORIES = [
  "Nations Unies",
  "ONG Internationale",
  "Gouvernement",
  "Secteur Privé",
  "Réseau/Initiative",
];

export default function PartnerForm({ partnerId, onSuccess, onCancel }: { partnerId?: string; onSuccess?: () => void; onCancel?: () => void }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [formData, setFormData] = useState<PartnerFormData>({
    name: "",
    logo: "",
    description: "",
    category: "Nations Unies",
    published: false,
    order: 0,
  });

  useEffect(() => {
    if (partnerId) {
      fetch(`/api/admin/partners/${partnerId}`)
        .then((res) => res.json())
        .then((data) => setFormData(data));
    }
  }, [partnerId]);

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

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

    try {
      const res = await fetch("/api/upload", {
        method: "POST",
        body: formData,
      });
      const data = await res.json();
      setFormData((prev) => ({ ...prev, logo: data.url }));
    } catch (error) {
      console.error("Upload error:", error);
      alert("Erreur lors du téléchargement");
    } finally {
      setUploading(false);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      const url = partnerId
        ? `/api/admin/partners/${partnerId}`
        : "/api/admin/partners";
      const method = partnerId ? "PUT" : "POST";

      const res = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      });

      if (res.ok) {
        if (onSuccess) { onSuccess(); } else { router.push("/admin/partenaires"); router.refresh(); }
      } else {
        alert("Erreur lors de l'enregistrement");
      }
    } catch (error) {
      console.error("Submit error:", error);
      alert("Erreur lors de l'enregistrement");
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* Name */}
      <div>
        <label className="block text-sm font-bold text-gray-700 mb-2">
          Nom du partenaire <span className="text-red-500">*</span>
        </label>
        <input
          type="text"
          required
          value={formData.name}
          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
          className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#4A7C59] focus:border-[#4A7C59]"
          placeholder="Ex: UNICEF"
        />
      </div>

      {/* Category */}
      <div>
        <label className="block text-sm font-bold text-gray-700 mb-2">
          Catégorie <span className="text-red-500">*</span>
        </label>
        <select
          required
          value={formData.category}
          onChange={(e) => setFormData({ ...formData, category: e.target.value })}
          className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#4A7C59] focus:border-[#4A7C59]"
        >
          {CATEGORIES.map((category) => (
            <option key={category} value={category}>
              {category}
            </option>
          ))}
        </select>
      </div>

      {/* Description */}
      <div>
        <label className="block text-sm font-bold text-gray-700 mb-2">
          Description
        </label>
        <textarea
          rows={3}
          value={formData.description}
          onChange={(e) => setFormData({ ...formData, description: e.target.value })}
          className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#4A7C59] focus:border-[#4A7C59] resize-none"
          placeholder="Description du partenaire..."
        />
      </div>

      {/* Logo Upload */}
      <div>
        <label className="block text-sm font-bold text-gray-700 mb-2">
          Logo <span className="text-red-500">*</span>
        </label>
        <div className="relative">
          <input
            type="file"
            accept="image/*"
            onChange={handleLogoUpload}
            className="hidden"
            id="partner-logo-upload"
          />
          <label
            htmlFor="partner-logo-upload"
            className="flex items-center justify-center gap-2 px-4 py-3 border-2 border-gray-200 rounded-xl cursor-pointer hover:bg-gray-50 transition-colors"
          >
            {uploading ? (
              <>
                <div className="w-5 h-5 border-2 border-[#4A7C59]/30 border-t-[#4A7C59] rounded-full animate-spin"></div>
                Téléchargement...
              </>
            ) : (
              <>
                <Upload size={18} />
                {formData.logo ? "Changer le logo" : "Télécharger le logo"}
              </>
            )}
          </label>
        </div>
      </div>

      {/* Logo Preview */}
      {formData.logo && (
        <div className="relative w-32 h-32 rounded-xl overflow-hidden border-2 border-gray-200 p-4 bg-white">
          <img src={formData.logo} alt="Preview" className="w-full h-full object-contain" />
        </div>
      )}

      {/* Order */}
      <div>
        <label className="block text-sm font-bold text-gray-700 mb-2">
          Ordre d'affichage
        </label>
        <input
          type="number"
          min="0"
          value={formData.order}
          onChange={(e) => setFormData({ ...formData, order: parseInt(e.target.value) || 0 })}
          className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#4A7C59] focus:border-[#4A7C59]"
          placeholder="0"
        />
        <p className="text-sm text-gray-500 mt-1">
          Plus le nombre est petit, plus le partenaire apparaîtra en haut
        </p>
      </div>

      {/* Published */}
      <div>
        <label className="flex items-center gap-2 cursor-pointer">
          <input
            type="checkbox"
            checked={formData.published}
            onChange={(e) => setFormData({ ...formData, published: e.target.checked })}
            className="w-5 h-5 rounded border-gray-300 text-[#4A7C59] focus:ring-[#4A7C59]"
          />
          <span className="text-sm font-medium text-gray-700">Publier immédiatement</span>
        </label>
      </div>

      {/* Actions */}
      <div className="flex items-center gap-4 pt-4">
        <button
          type="submit"
          disabled={loading}
          className="px-8 py-3 bg-[#4A7C59] hover:bg-[#3d6849] text-white font-semibold rounded-xl transition-all disabled:opacity-50"
        >
          {loading ? "Enregistrement..." : partnerId ? "Mettre à jour" : "Créer le partenaire"}
        </button>
        <button
          type="button"
          onClick={() => { if (onCancel) { onCancel(); } else { router.back(); } }}
          className="px-8 py-3 border-2 border-gray-300 hover:bg-gray-50 text-gray-700 font-semibold rounded-xl transition-all"
        >
          Annuler
        </button>
      </div>
    </form>
  );
}