"use client";

import React, { useState } from 'react';
import { addBlog, deleteBlog } from "@/app/actions/adminData";
import { Plus, Trash2 } from "lucide-react";

export default function BlogClient({ initialBlogs }: { initialBlogs: any[] }) {
  const [isAdding, setIsAdding] = useState(false);

  return (
    <div className="space-y-6">
      <div className="flex justify-end">
        <button 
          onClick={() => setIsAdding(!isAdding)}
          className="bg-[#dc2626] text-white px-4 py-2 rounded-lg font-bold flex items-center gap-2 hover:bg-red-700 transition"
        >
          <Plus className="w-4 h-4" /> Publier un article
        </button>
      </div>

      {isAdding && (
        <form action={async (formData) => {
          await addBlog(formData);
          setIsAdding(false);
        }} className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 space-y-4">
          <h2 className="text-xl font-bold">Nouvel Article</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="md:col-span-2">
              <label className="block text-sm font-bold text-gray-700 mb-1">Titre de l'article</label>
              <input type="text" name="title" required className="w-full border border-gray-300 rounded-lg px-4 py-2" />
            </div>
            <div>
              <label className="block text-sm font-bold text-gray-700 mb-1">Auteur</label>
              <input type="text" name="author" defaultValue="Admin" className="w-full border border-gray-300 rounded-lg px-4 py-2" />
            </div>
            <div className="md:col-span-1">
              <label className="block text-sm font-bold text-gray-700 mb-1">Image (Fichier)</label>
              <input type="file" name="imageFile" accept="image/*" className="w-full border border-gray-300 rounded-lg px-4 py-1.5" />
            </div>
            <div className="md:col-span-1">
              <label className="block text-sm font-bold text-gray-700 mb-1">URL de l'image (optionnel)</label>
              <input type="text" name="image" className="w-full border border-gray-300 rounded-lg px-4 py-2" />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-bold text-gray-700 mb-1">Contenu</label>
              <textarea name="content" required className="w-full border border-gray-300 rounded-lg px-4 py-2 h-32"></textarea>
            </div>
          </div>
          <div className="flex justify-end gap-3">
            <button type="button" onClick={() => setIsAdding(false)} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-bold">Annuler</button>
            <button type="submit" className="px-4 py-2 bg-[#dc2626] text-white rounded-lg font-bold">Publier</button>
          </div>
        </form>
      )}

      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <table className="w-full text-left">
          <thead className="bg-gray-50 border-b border-gray-100">
            <tr>
              <th className="px-6 py-3 text-xs font-black text-gray-500 uppercase">Article</th>
              <th className="px-6 py-3 text-xs font-black text-gray-500 uppercase">Auteur</th>
              <th className="px-6 py-3 text-xs font-black text-gray-500 uppercase">Date</th>
              <th className="px-6 py-3 text-xs font-black text-gray-500 uppercase">Actions</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {initialBlogs.map((blog) => (
              <tr key={blog.id} className="hover:bg-gray-50">
                <td className="px-6 py-4 font-bold text-gray-900">{blog.title}</td>
                <td className="px-6 py-4 text-gray-600">{blog.author}</td>
                <td className="px-6 py-4 text-gray-500 text-sm">{new Date(blog.createdAt).toLocaleDateString('fr-FR')}</td>
                <td className="px-6 py-4">
                  <button onClick={() => deleteBlog(blog.id)} className="text-red-500 hover:text-red-700">
                    <Trash2 className="w-5 h-5" />
                  </button>
                </td>
              </tr>
            ))}
            {initialBlogs.length === 0 && (
              <tr>
                <td colSpan={4} className="px-6 py-8 text-center text-gray-500">Aucun article publié.</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}