"use client";

import React, { useState } from 'react';
import { addProduct, deleteProduct } from "@/app/actions/product";
import { Plus, Trash2 } from "lucide-react";

export default function ProductClient({ initialProducts }: { initialProducts: 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" /> Ajouter un produit
        </button>
      </div>

      {isAdding && (
        <form action={async (formData) => {
          await addProduct(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">Nouveau Produit</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-bold text-gray-700 mb-1">Nom du produit</label>
              <input type="text" name="name" 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">Catégorie</label>
              <input type="text" name="category" required 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">Image (URL alternative)</label>
              <input type="text" name="image" placeholder="/uploads/products/prod1.png" 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">Description</label>
              <textarea name="description" required className="w-full border border-gray-300 rounded-lg px-4 py-2 h-24"></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">Sauvegarder</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">Produit</th>
              <th className="px-6 py-3 text-xs font-black text-gray-500 uppercase">Catégorie</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">
            {initialProducts.map((p) => (
              <tr key={p.id} className="hover:bg-gray-50">
                <td className="px-6 py-4 flex items-center gap-3">
                  {p.image ? (
                    <img src={p.image} className="w-10 h-10 object-contain bg-gray-100 rounded" />
                  ) : (
                    <div className="w-10 h-10 bg-gray-100 rounded"></div>
                  )}
                  <span className="font-bold text-gray-900">{p.name}</span>
                </td>
                <td className="px-6 py-4 text-gray-600">{p.category}</td>
                <td className="px-6 py-4">
                  <button onClick={() => deleteProduct(p.id)} className="text-red-500 hover:text-red-700">
                    <Trash2 className="w-5 h-5" />
                  </button>
                </td>
              </tr>
            ))}
            {initialProducts.length === 0 && (
              <tr>
                <td colSpan={3} className="px-6 py-8 text-center text-gray-500">Aucun produit trouvé.</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}