import { useState } from 'react';
import { registerCustomer, findCustomerByPhone, addLoyaltyPoints, subtractLoyaltyPoints } from '../api/customers';

const initialForm = { firstName: '', lastName: '', phoneNumber: '' };

export default function Customers() {
  const [form, setForm] = useState(initialForm);
  const [registerMsg, setRegisterMsg] = useState(null);
  const [submitting, setSubmitting] = useState(false);
  const [pointsInput, setPointsInput] = useState('');

  function handleChange(e) {
    const { name, value } = e.target;
    setForm((prev) => ({ ...prev, [name]: value }));
  }

  function handleRegister(e) {
    e.preventDefault();
    setSubmitting(true);
    setRegisterMsg(null);
    registerCustomer(form)
      .then((response) => {
        setRegisterMsg(`Client créé (id : ${response.data})`);
        setForm(initialForm);
      })
      .catch((error) => {
        console.error(error);
        setRegisterMsg('Erreur lors de la création du client.');
      })
      .finally(() => setSubmitting(false));
  }

  const [phone, setPhone] = useState('');
  const [customer, setCustomer] = useState(null);
  const [searchError, setSearchError] = useState(null);

  function handleSearch(e) {
    e.preventDefault();
    setSearchError(null);
    setCustomer(null);
    findCustomerByPhone(phone)
      .then((response) => setCustomer(response.data))
      .catch((error) => {
        console.error(error);
        setSearchError('Aucun client trouvé avec ce numéro.');
      });
  }
  function applyLoyalty(operation) {
  const points = Number(pointsInput);
  const action = operation === 'add' ? addLoyaltyPoints : subtractLoyaltyPoints;

  action(customer.id, points)
    .then((response) => {
      setCustomer((prev) => ({ ...prev, loyaltyPoints: response.data }));
      setPointsInput('');
    })
    .catch((error) => {
      console.error(error);
      if (error.response?.status === 400) setSearchError('Pas assez de points pour ce retrait.');
      else setSearchError('Erreur lors de la mise à jour des points.');
    });
  }

  return (
    <main>
      <h1>Gestion des clients</h1>

      <section>
        <h2>Enregistrer un client</h2>
        <form onSubmit={handleRegister}>
          <label>Prénom
            <input name="firstName" value={form.firstName} onChange={handleChange} required />
          </label>
          <label>Nom
            <input name="lastName" value={form.lastName} onChange={handleChange} required />
          </label>
          <label>Téléphone
            <input name="phoneNumber" value={form.phoneNumber} onChange={handleChange} required />
          </label>
          <button type="submit" disabled={submitting}>
            {submitting ? 'Envoi…' : 'Créer le client'}
          </button>
        </form>
        {registerMsg && <p>{registerMsg}</p>}
      </section>

      <section>
        <h2>Rechercher un client</h2>
        <form onSubmit={handleSearch}>
          <label>Téléphone
            <input value={phone} onChange={(e) => setPhone(e.target.value)} required />
          </label>
          <button type="submit">Rechercher</button>
        </form>
        {searchError && <p>{searchError}</p>}
        {customer && (
          <div>
            <p>{customer.firstName} {customer.lastName}</p>
            <p>Téléphone : {customer.phoneNumber}</p>
            <p><strong>Points de fidélité : {customer.loyaltyPoints}</strong></p>
            <input type="number"value={pointsInput}onChange={(e) => setPointsInput(e.target.value)}placeholder="Nombre de points"/>
            <button type="button" onClick={() => applyLoyalty('add')}>Ajouter</button>
            <button type="button" onClick={() => applyLoyalty('subtract')}>Retirer</button>
          </div>
        )}
      </section>
    </main>
  );
}