"use client";

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

export default function ClientLogoClient({ initialClients }: { initialClients: 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 client
        </button>
      </div>

      {isAdding && (
        <form action={async (formData) => {
          await addClient(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 Logo Client</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 client</label>
              <input type="text" name="name" 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">Logo (Fichier)</label>
              <input type="file" name="logoFile" 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">Logo (URL alternative)</label>
              <input type="text" name="logoUrl" placeholder="/uploads/clients/logo1.png" 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">Ajouter</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">Logo</th>
              <th className="px-6 py-3 text-xs font-black text-gray-500 uppercase">Client</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">
            {initialClients.map((client) => (
              <tr key={client.id} className="hover:bg-gray-50">
                <td className="px-6 py-4">
                  <div className="w-16 h-16 bg-white border border-gray-200 rounded flex items-center justify-center p-2">
                    <img src={client.logoUrl} className="max-w-full max-h-full object-contain" />
                  </div>
                </td>
                <td className="px-6 py-4 font-bold text-gray-900">{client.name}</td>
                <td className="px-6 py-4">
                  <button onClick={() => deleteClient(client.id)} className="text-red-500 hover:text-red-700">
                    <Trash2 className="w-5 h-5" />
                  </button>
                </td>
              </tr>
            ))}
            {initialClients.length === 0 && (
              <tr>
                <td colSpan={3} className="px-6 py-8 text-center text-gray-500">Aucun logo client ajouté.</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}