"use client";

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

export default function TestimonialClient({ initialTestimonials }: { initialTestimonials: 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 témoignage
        </button>
      </div>

      {isAdding && (
        <form action={async (formData) => {
          await addTestimonial(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 Témoignage</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">Auteur</label>
              <input type="text" name="author" 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">Entreprise / Fonction (optionnel)</label>
              <input type="text" name="company" 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-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">Ajouter</button>
          </div>
        </form>
      )}

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {initialTestimonials.map((t) => (
          <div key={t.id} className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 relative group">
            <button 
              onClick={() => deleteTestimonial(t.id)} 
              className="absolute top-4 right-4 text-gray-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <Trash2 className="w-5 h-5" />
            </button>
            <div className="flex items-center gap-1 mb-4">
              {[...Array(5)].map((_, i) => (
                <Star key={i} className="w-4 h-4 text-yellow-400 fill-yellow-400" />
              ))}
            </div>
            <p className="text-gray-700 italic mb-6">"{t.content}"</p>
            <div>
              <p className="font-bold text-gray-900">{t.author}</p>
              <p className="text-sm text-gray-500">{t.company}</p>
            </div>
          </div>
        ))}
        {initialTestimonials.length === 0 && (
          <div className="col-span-full py-12 text-center bg-white rounded-2xl border border-gray-100 text-gray-500">
            Aucun témoignage ajouté.
          </div>
        )}
      </div>
    </div>
  );
}