"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Image from "@tiptap/extension-image";
import { Bold, Italic, List, ListOrdered, Heading2, Image as ImageIcon, Upload } from "lucide-react";

type ArticleFormData = {
  title: string;
  excerpt: string;
  content: string;
  image: string;
  category: string;
  categoryColor: string;
  featured: boolean;
  published: boolean;
};

const CATEGORIES = [
  { name: "Projet", color: "#4A7C59" },
  { name: "Rapport", color: "#1E40AF" },
  { name: "Événement", color: "#E67E22" },
  { name: "Partenariat", color: "#7D3C98" },
];

export default function ArticleForm({ articleId, onSuccess, onCancel }: { articleId?: string; onSuccess?: () => void; onCancel?: () => void }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [mounted, setMounted] = useState(false);
  const [formData, setFormData] = useState<ArticleFormData>({
    title: "",
    excerpt: "",
    content: "",
    image: "",
    category: "Projet",
    categoryColor: "#4A7C59",
    featured: false,
    published: false,
  });

  const editor = useEditor({
    extensions: [StarterKit, Image],
    content: formData.content,
    immediatelyRender: false,
    onUpdate: ({ editor }) => {
      setFormData((prev) => ({ ...prev, content: editor.getHTML() }));
    },
    editorProps: {
      attributes: {
        class: 'prose prose-sm max-w-none focus:outline-none min-h-[200px] px-4 py-3',
      },
    },
  });

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (articleId) {
      // Fetch article data
      fetch(`/api/admin/articles/${articleId}`)
        .then((res) => res.json())
        .then((data) => {
          setFormData(data);
          editor?.commands.setContent(data.content);
        });
    }
  }, [articleId, editor]);

  const handleImageUpload = 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, image: 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 = articleId
        ? `/api/admin/articles/${articleId}`
        : "/api/admin/articles";
      const method = articleId ? "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/actualites"); 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">
      {/* Title */}
      <div>
        <label className="block text-sm font-bold text-gray-700 mb-2">
          Titre <span className="text-red-500">*</span>
        </label>
        <input
          type="text"
          required
          value={formData.title}
          onChange={(e) => setFormData({ ...formData, title: 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="Titre de l'article"
        />
      </div>

      {/* Excerpt */}
      <div>
        <label className="block text-sm font-bold text-gray-700 mb-2">
          Extrait <span className="text-red-500">*</span>
        </label>
        <textarea
          required
          rows={3}
          value={formData.excerpt}
          onChange={(e) => setFormData({ ...formData, excerpt: 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="Résumé court de l'article"
        />
      </div>

      {/* Category */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <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) => {
              const cat = CATEGORIES.find((c) => c.name === e.target.value);
              setFormData({
                ...formData,
                category: e.target.value,
                categoryColor: cat?.color || "#4A7C59",
              });
            }}
            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((cat) => (
              <option key={cat.name} value={cat.name}>
                {cat.name}
              </option>
            ))}
          </select>
        </div>

        {/* Image Upload */}
        <div>
          <label className="block text-sm font-bold text-gray-700 mb-2">
            Image <span className="text-red-500">*</span>
          </label>
          <div className="relative">
            <input
              type="file"
              accept="image/*"
              onChange={handleImageUpload}
              className="hidden"
              id="image-upload"
            />
            <label
              htmlFor="image-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.image ? "Changer l'image" : "Télécharger l'image"}
                </>
              )}
            </label>
          </div>
        </div>
      </div>

      {/* Image Preview */}
      {formData.image && (
        <div className="relative w-full h-48 rounded-xl overflow-hidden border-2 border-gray-200">
          <img src={formData.image} alt="Preview" className="w-full h-full object-cover" />
        </div>
      )}

      {/* Rich Text Editor */}
      <div>
        <label className="block text-sm font-bold text-gray-700 mb-2">
          Contenu <span className="text-red-500">*</span>
        </label>

        {!mounted ? (
          <div className="w-full h-[300px] border-2 border-gray-200 rounded-xl flex items-center justify-center bg-gray-50">
            <div className="w-8 h-8 border-4 border-[#4A7C59]/30 border-t-[#4A7C59] rounded-full animate-spin"></div>
          </div>
        ) : (
          <>
            {/* Editor Toolbar */}
            <div className="flex items-center gap-1 p-2 bg-gray-50 border-2 border-gray-200 rounded-t-xl">
              <button
                type="button"
                onClick={() => editor?.chain().focus().toggleBold().run()}
                className={`p-2 rounded hover:bg-gray-200 ${editor?.isActive("bold") ? "bg-gray-300" : ""}`}
              >
                <Bold size={18} />
              </button>
              <button
                type="button"
                onClick={() => editor?.chain().focus().toggleItalic().run()}
                className={`p-2 rounded hover:bg-gray-200 ${editor?.isActive("italic") ? "bg-gray-300" : ""}`}
              >
                <Italic size={18} />
              </button>
              <button
                type="button"
                onClick={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()}
                className={`p-2 rounded hover:bg-gray-200 ${editor?.isActive("heading") ? "bg-gray-300" : ""}`}
              >
                <Heading2 size={18} />
              </button>
              <button
                type="button"
                onClick={() => editor?.chain().focus().toggleBulletList().run()}
                className={`p-2 rounded hover:bg-gray-200 ${editor?.isActive("bulletList") ? "bg-gray-300" : ""}`}
              >
                <List size={18} />
              </button>
              <button
                type="button"
                onClick={() => editor?.chain().focus().toggleOrderedList().run()}
                className={`p-2 rounded hover:bg-gray-200 ${editor?.isActive("orderedList") ? "bg-gray-300" : ""}`}
              >
                <ListOrdered size={18} />
              </button>
            </div>

            {/* Editor Content */}
            <EditorContent
              editor={editor}
              className="prose max-w-none min-h-[300px] px-4 py-3 border-2 border-t-0 border-gray-200 rounded-b-xl focus-within:ring-2 focus-within:ring-[#4A7C59]"
            />
          </>
        )}
      </div>

      {/* Checkboxes */}
      <div className="flex items-center gap-6">
        <label className="flex items-center gap-2 cursor-pointer">
          <input
            type="checkbox"
            checked={formData.featured}
            onChange={(e) => setFormData({ ...formData, featured: 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">Article à la une</span>
        </label>

        <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..." : articleId ? "Mettre à jour" : "Créer l'article"}
        </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>
  );
}