"use client";

import React, { useState } from 'react';
import { updateSetting } from "@/app/actions/adminData";

export default function FooterClient({ initialSettings }: { initialSettings: Record<string, string> }) {
  const [isSaving, setIsSaving] = useState(false);

  const handleSubmit = async (formData: FormData) => {
    setIsSaving(true);
    for (const [key, value] of formData.entries()) {
      await updateSetting(key, value as string);
    }
    setIsSaving(false);
    alert('Paramètres sauvegardés avec succès !');
  };

  return (
    <div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
      <form action={handleSubmit} className="space-y-6 max-w-2xl">
        
        <div>
          <h3 className="text-lg font-bold text-gray-900 mb-4 border-b pb-2">Informations de Contact</h3>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-bold text-gray-700 mb-1">Adresse</label>
              <input type="text" name="footer_address" defaultValue={initialSettings.footer_address || 'Zone Industrielle, Alger, Algérie'} className="w-full border border-gray-300 rounded-lg px-4 py-2" />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-bold text-gray-700 mb-1">Téléphone 1</label>
                <input type="text" name="footer_phone1" defaultValue={initialSettings.footer_phone1 || '+213 550 00 00 00'} 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">Téléphone 2</label>
                <input type="text" name="footer_phone2" defaultValue={initialSettings.footer_phone2 || '+213 21 00 00 00'} className="w-full border border-gray-300 rounded-lg px-4 py-2" />
              </div>
            </div>
            <div>
              <label className="block text-sm font-bold text-gray-700 mb-1">Email de Contact</label>
              <input type="email" name="footer_email" defaultValue={initialSettings.footer_email || 'contact@kcreation.dz'} className="w-full border border-gray-300 rounded-lg px-4 py-2" />
            </div>
          </div>
        </div>

        <div>
          <h3 className="text-lg font-bold text-gray-900 mb-4 border-b pb-2">Réseaux Sociaux</h3>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-bold text-gray-700 mb-1">URL Facebook</label>
              <input type="text" name="social_facebook" defaultValue={initialSettings.social_facebook || '#'} 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">URL LinkedIn</label>
              <input type="text" name="social_linkedin" defaultValue={initialSettings.social_linkedin || '#'} className="w-full border border-gray-300 rounded-lg px-4 py-2" />
            </div>
          </div>
        </div>

        <div>
          <h3 className="text-lg font-bold text-gray-900 mb-4 border-b pb-2">À Propos (Pied de page)</h3>
          <div>
            <label className="block text-sm font-bold text-gray-700 mb-1">Courte Description</label>
            <textarea name="footer_about" defaultValue={initialSettings.footer_about || 'Leader en Algérie dans la conception et fabrication de destructeurs industriels et de solutions de recyclage.'} className="w-full border border-gray-300 rounded-lg px-4 py-2 h-24"></textarea>
          </div>
        </div>

        <div className="pt-4 border-t border-gray-100 flex justify-end">
          <button type="submit" disabled={isSaving} className="bg-[#dc2626] hover:bg-red-700 text-white font-bold py-3 px-8 rounded-xl transition-colors disabled:opacity-50 flex items-center gap-2">
            {isSaving ? 'Sauvegarde...' : 'Sauvegarder les modifications'}
          </button>
        </div>
      </form>
    </div>
  );
}