"use client";

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

export default function CarouselClient({ initialImages }: { initialImages: 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 une image
        </button>
      </div>

      {isAdding && (
        <form action={async (formData) => {
          await addCarouselImage(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">Nouvelle Image Carrousel</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <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="image" 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="url" placeholder="/uploads/slider1.png" 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">Titre (optionnel)</label>
              <input type="text" name="title" 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">Description (optionnel)</label>
              <input type="text" name="description" className="w-full border border-gray-300 rounded-lg px-4 py-2" />
            </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">Image</th>
              <th className="px-6 py-3 text-xs font-black text-gray-500 uppercase">Titre</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">
            {initialImages.map((img) => (
              <tr key={img.id} className="hover:bg-gray-50">
                <td className="px-6 py-4">
                  <img src={img.url} className="w-24 h-12 object-cover rounded border border-gray-200" />
                </td>
                <td className="px-6 py-4 font-bold text-gray-900">{img.title || '-'}</td>
                <td className="px-6 py-4">
                  <button onClick={() => deleteCarouselImage(img.id)} className="text-red-500 hover:text-red-700">
                    <Trash2 className="w-5 h-5" />
                  </button>
                </td>
              </tr>
            ))}
            {initialImages.length === 0 && (
              <tr>
                <td colSpan={3} className="px-6 py-8 text-center text-gray-500">Aucune image dans le carrousel.</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}