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

const JOURS = ['lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi', 'dimanche'];

export default function Parametres() {
  const [groupe, setGroupe] = useState(null);
  const [editing, setEditing] = useState(false);
  const [form, setForm] = useState({});
  const [msg, setMsg] = useState('');
  const [error, setError] = useState('');

  useEffect(() => {
    api.get('/groupe/').then((data) => {
      setGroupe(data);
      setForm({
        nom: data.nom || '',
        adresse_local: data.adresse_local || '',
        jour_reunion: data.jour_reunion || '',
        heure_reunion: data.heure_reunion || '',
        assemblee_affaires_ordre: data.assemblee_affaires_ordre || 'premiere',
        format_reunion: data.format_reunion || '',
        lien_aa87: data.lien_aa87 || 'https://aa87.org',
      });
    });
  }, []);

  const sauvegarder = async () => {
    try {
      const updated = await api.patch('/groupe/', form);
      setGroupe(updated);
      setEditing(false);
      setMsg('Paramètres enregistrés ✓');
      setTimeout(() => setMsg(''), 2000);
    } catch (e) {
      setError(e.message);
    }
  };

  if (!groupe) return <div className="flex items-center justify-center min-h-screen"><p className="text-gray-400">Chargement...</p></div>;

  const Field = ({ label, value }) => (
    <div className="py-3 border-b border-gray-100">
      <p className="text-xs text-gray-400">{label}</p>
      <p className="text-gray-800 font-medium">{value || '—'}</p>
    </div>
  );

  return (
    <div className="min-h-screen bg-gray-100">
      <PageHeader titre="Paramètres du groupe" sousTitre="G9 — Nom, horaire, adresse" />

      <div className="p-4 space-y-4">
        {msg && <div className="bg-green-50 text-green-700 p-3 rounded-xl text-center text-sm font-medium">{msg}</div>}
        {error && <div className="bg-red-50 text-red-600 p-3 rounded-xl text-center text-sm">{error}</div>}

        <div className="bg-white rounded-2xl p-4 shadow-sm">
          <div className="flex items-center justify-between mb-2">
            <h2 className="font-bold text-gray-700">Informations du groupe</h2>
            {!editing && (
              <button onClick={() => setEditing(true)} className="text-aa-blue text-sm font-medium">Modifier</button>
            )}
          </div>

          {!editing ? (
            <>
              <Field label="Nom du groupe" value={groupe.nom} />
              <Field label="District" value={groupe.district} />
              <Field label="Région" value={groupe.region} />
              <Field label="Adresse du local" value={groupe.adresse_local} />
              <Field label="Jour de réunion" value={groupe.jour_reunion} />
              <Field label="Heure" value={groupe.heure_reunion} />
              <Field label="Assemblée d'affaires mensuelle" value={ORDRES_ASSEMBLEE.find(([v]) => v === groupe.assemblee_affaires_ordre)?.[1]} />
              <Field label="Format de réunion" value={groupe.format_reunion} />
              <Field label="Lien aa87.org" value={groupe.lien_aa87} />
            </>
          ) : (
            <div className="space-y-3 mt-3">
              <div>
                <label className="text-xs text-gray-400">Nom du groupe</label>
                <input type="text" value={form.nom} onChange={(e) => setForm({ ...form, nom: e.target.value })}
                  className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue" />
              </div>
              <div>
                <label className="text-xs text-gray-400">Adresse du local</label>
                <textarea value={form.adresse_local} onChange={(e) => setForm({ ...form, adresse_local: e.target.value })}
                  rows={2} className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue resize-none" />
              </div>
              <div>
                <label className="text-xs text-gray-400">Jour de réunion</label>
                <select value={form.jour_reunion} onChange={(e) => setForm({ ...form, jour_reunion: e.target.value })}
                  className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue">
                  <option value="">—</option>
                  {JOURS.map((j) => <option key={j} value={j}>{j.charAt(0).toUpperCase() + j.slice(1)}</option>)}
                </select>
              </div>
              <div>
                <label className="text-xs text-gray-400">Heure de réunion</label>
                <input type="time" value={form.heure_reunion} onChange={(e) => setForm({ ...form, heure_reunion: e.target.value })}
                  className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue" />
              </div>
              <div>
                <label className="text-xs text-gray-400">Assemblée d'affaires mensuelle</label>
                <select value={form.assemblee_affaires_ordre} onChange={(e) => setForm({ ...form, assemblee_affaires_ordre: e.target.value })}
                  className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue">
                  {ORDRES_ASSEMBLEE.map(([value, label]) => <option key={value} value={value}>{label}</option>)}
                </select>
              </div>
              <div>
                <label className="text-xs text-gray-400">Format de réunion</label>
                <input type="text" placeholder="Discussion ouverte, conférencier, étapes..."
                  value={form.format_reunion} onChange={(e) => setForm({ ...form, format_reunion: e.target.value })}
                  className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue" />
              </div>
              <div>
                <label className="text-xs text-gray-400">Lien aa87.org</label>
                <input type="url" value={form.lien_aa87} onChange={(e) => setForm({ ...form, lien_aa87: e.target.value })}
                  className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue" />
              </div>

              <div className="flex gap-3 pt-2">
                <button onClick={sauvegarder} className="flex-1 p-3 bg-aa-blue text-white rounded-xl font-bold">Enregistrer</button>
                <button onClick={() => setEditing(false)} className="flex-1 p-3 bg-gray-200 text-gray-700 rounded-xl font-bold">Annuler</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}