import React, { useState } from 'react';
import { api } from '../stores/api';
import PageHeader from '../components/PageHeader';
import SuccessCheck from '../components/SuccessCheck';

export default function Collecte() {
  const [montant, setMontant] = useState('');
  const [dateCollecte, setDateCollecte] = useState(new Date().toISOString().slice(0, 10));
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async () => {
    if (!montant || parseFloat(montant) <= 0) {
      setError('Entrez un montant valide');
      return;
    }
    setLoading(true);
    setError('');
    try {
      await api.post('/collectes/', {
        date_collecte: dateCollecte,
        montant: parseFloat(montant),
      });
      setSuccess(true);
    } catch (e) {
      setError(e.message);
      setLoading(false);
    }
  };

  if (success) return <SuccessCheck message="Collecte enregistrée ✓" />;

  return (
    <div className="min-h-screen bg-gray-100">
      <PageHeader titre="Collecte 7e Tradition" sousTitre="S1 — Saisir le panier" />

      <div className="p-4 space-y-4">
        {/* Date pré-remplie */}
        <div className="bg-white rounded-2xl p-4 shadow-sm">
          <label className="text-xs text-gray-400 block mb-1">Date</label>
          <input
            type="date"
            value={dateCollecte}
            onChange={(e) => setDateCollecte(e.target.value)}
            className="w-full p-3 bg-gray-50 rounded-xl text-lg border-0 focus:ring-2 focus:ring-aa-blue"
          />
        </div>

        {/* Montant — gros clavier numérique */}
        <div className="bg-white rounded-2xl p-4 shadow-sm">
          <label className="text-xs text-gray-400 block mb-1">Montant collecté</label>
          <div className="relative">
            <span className="absolute left-4 top-1/2 -translate-y-1/2 text-2xl text-gray-400">$</span>
            <input
              type="number"
              inputMode="decimal"
              step="0.01"
              min="0"
              placeholder="0.00"
              value={montant}
              onChange={(e) => setMontant(e.target.value)}
              className="w-full p-4 pl-10 bg-gray-50 rounded-xl text-3xl font-bold text-center border-0 focus:ring-2 focus:ring-green-500"
              autoFocus
            />
          </div>
        </div>

        {error && <p className="text-red-500 text-sm text-center bg-red-50 p-3 rounded-lg">{error}</p>}

        {/* Bouton enregistrer */}
        <button
          onClick={handleSubmit}
          disabled={loading || !montant}
          className="w-full p-5 bg-green-600 text-white rounded-2xl text-xl font-bold disabled:opacity-40 active:scale-[0.97] transition shadow-lg"
        >
          {loading ? '...' : '💰 Enregistrer la collecte'}
        </button>
      </div>
    </div>
  );
}