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

export default function InviterMembre() {
  const [code, setCode] = useState(null);
  const [expiration, setExpiration] = useState(null);
  const [loading, setLoading] = useState(false);
  const [copied, setCopied] = useState(false);

  const generer = async () => {
    setLoading(true);
    try {
      const data = await api.post('/invitations/');
      setCode(data.code);
      setExpiration(new Date(data.expire_le).toLocaleString('fr-CA'));
    } catch (e) {
      alert(e.message);
    }
    setLoading(false);
  };

  const copier = () => {
    navigator.clipboard.writeText(code).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  };

  const partagerSMS = () => {
    const msg = `Rejoins le Groupe Méditation sur l'app ! Ton code d'invitation : ${code} (expire dans 48h)`;
    window.open(`sms:?body=${encodeURIComponent(msg)}`);
  };

  return (
    <div className="min-h-screen bg-gray-100">
      <PageHeader titre="Inviter un membre" sousTitre="G1 — Code d'invitation 48h" />

      <div className="p-4 space-y-4">
        {!code ? (
          <div className="text-center py-12">
            <p className="text-5xl mb-4">➕</p>
            <p className="text-gray-600 mb-2">Générer un code d'invitation</p>
            <p className="text-gray-400 text-sm mb-6">Le code expire après 48 heures et ne peut être utilisé qu'une fois</p>
            <button
              onClick={generer}
              disabled={loading}
              className="px-8 py-4 bg-green-600 text-white rounded-2xl text-lg font-bold active:scale-[0.97] transition shadow-lg"
            >
              {loading ? '...' : 'Générer le code'}
            </button>
          </div>
        ) : (
          <div className="space-y-4">
            <div className="bg-white rounded-2xl p-6 shadow-sm text-center">
              <p className="text-xs text-gray-400 mb-2">Code d'invitation</p>
              <p className="text-3xl font-mono font-bold tracking-widest text-aa-blue">{code}</p>
              <p className="text-xs text-gray-400 mt-3">Expire le {expiration}</p>
            </div>

            <button
              onClick={copier}
              className="w-full p-4 bg-aa-blue text-white rounded-2xl font-bold active:scale-[0.97] transition"
            >
              {copied ? '✓ Copié !' : '📋 Copier le code'}
            </button>

            <button
              onClick={partagerSMS}
              className="w-full p-4 bg-green-600 text-white rounded-2xl font-bold active:scale-[0.97] transition"
            >
              💬 Partager par SMS
            </button>

            <button
              onClick={() => { setCode(null); setExpiration(null); }}
              className="w-full p-3 text-gray-500 text-sm"
            >
              Générer un autre code
            </button>
          </div>
        )}
      </div>
    </div>
  );
}