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

const CATEGORIES = [
  { value: 'executif', label: 'Exécutif' },
  { value: 'service', label: 'Service' },
  { value: 'physique', label: 'Physique' },
];

const MODULES = [
  ['S1T', 'Trésorerie'], ['M4', 'Envoi contributions'],
  ['M1', 'Rédiger PV'], ['M2', 'Présences'], ['M3', 'Rapport RSG'],
  ['S2', 'Remise jeton'], ['M6', 'Commander jetons'],
  ['S3', 'Vente littérature'], ['M5', 'Ajuster inventaire'], ['S4', 'Rapport réunion'],
  ['G2', 'Gestion membres'], ['G6', 'Sondages'], ['G9', 'Paramètres'],
  ['G11', 'Gestion mandats'], ['G12', 'Gestion postes'],
];

export default function GererPostes() {
  const [postes, setPostes] = useState([]);
  const [modulesPostes, setModulesPostes] = useState({});
  const [candidatures, setCandidatures] = useState([]);
  const [tab, setTab] = useState('postes');
  const [showForm, setShowForm] = useState(false);
  const [msg, setMsg] = useState('');
  const [error, setError] = useState('');

  const [nom, setNom] = useState('');
  const [categorie, setCategorie] = useState('service');
  const [description, setDescription] = useState('');
  const [prerequis, setPrerequis] = useState('');
  const [informations, setInformations] = useState('');

  const charger = async () => {
    try {
      const [p, mp, c] = await Promise.all([
        api.get('/postes/?inclure_abolis=true'),
        api.get('/postes/modules'),
        api.get('/postes/candidatures'),
      ]);
      setPostes(p);
      setModulesPostes(mp);
      setCandidatures(c);
    } catch (e) { setError(e.message); }
  };

  useEffect(() => { charger(); }, []);

  const flash = (m) => { setMsg(m); setTimeout(() => setMsg(''), 2500); };

  const creerPoste = async () => {
    if (!nom.trim()) { setError('Nom requis'); return; }
    setError('');
    try {
      await api.post('/postes/', {
        nom: nom.trim(), categorie,
        description: description.trim() || null,
        prerequis: prerequis.trim() || null,
        informations: informations.trim() || null,
      });
      setNom(''); setDescription(''); setPrerequis(''); setInformations(''); setShowForm(false);
      flash('Poste créé ✓');
      await charger();
    } catch (e) { setError(e.message); }
  };

  const abolir = async (id, nomPoste) => {
    if (!confirm(`Abolir le poste «${nomPoste}» ?\nTous les mandats actifs seront terminés.`)) return;
    try {
      const res = await api.request('DELETE', `/postes/${id}`);
      flash(`Poste aboli — ${res.mandats_termines} mandat(s) terminé(s)`);
      await charger();
    } catch (e) { setError(e.message); }
  };

  const reactiver = async (id) => {
    try {
      await api.post(`/postes/${id}/reactiver`);
      flash('Poste réactivé ✓');
      await charger();
    } catch (e) { setError(e.message); }
  };

  const supprimerPermanent = async (id, nomPoste) => {
    if (!confirm(`Supprimer définitivement le poste «${nomPoste}» ?`)) return;
    try {
      await api.request('DELETE', `/postes/${id}/permanent`);
      flash('Poste supprimé');
      await charger();
    } catch (e) { setError(e.message); }
  };

  const toggleModule = async (posteId, code) => {
    const actuel = new Set(modulesPostes[posteId] || []);
    if (actuel.has(code)) actuel.delete(code);
    else actuel.add(code);
    const codes = [...actuel];
    setModulesPostes({ ...modulesPostes, [posteId]: codes });
    try {
      await api.request('PUT', `/postes/${posteId}/modules`, codes);
      flash('Accès mis à jour ✓');
    } catch (e) { setError(e.message); await charger(); }
  };

  const traiterCandidature = async (id, statut) => {
    try {
      await api.patch(`/postes/candidatures/${id}?statut=${statut}`);
      flash(statut === 'acceptee' ? 'Candidature acceptée ✓' : 'Candidature refusée');
      await charger();
    } catch (e) { setError(e.message); }
  };

  const CAT_ICON = { executif: '🔵', service: '🟣', physique: '🟢' };

  return (
    <div className="min-h-screen bg-gray-100">
      <PageHeader titre="Gestion des postes" sousTitre="Postes, candidatures, accès aux modules" />

      <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="flex gap-1 overflow-x-auto">
          {[
            ['postes', `Postes (${postes.length})`],
            ['acces', 'Accès'],
            ['candidatures', `Candidatures (${candidatures.length})`],
          ].map(([t, label]) => (
            <button key={t} onClick={() => { setTab(t); setError(''); }}
              className={`flex-1 py-2 rounded-xl text-xs font-bold transition whitespace-nowrap px-2 ${
                tab === t ? 'bg-aa-blue text-white' : 'bg-white text-gray-500'
              }`}>{label}</button>
          ))}
        </div>

        {tab === 'postes' && (
          <div className="space-y-3">
            <button onClick={() => setShowForm(!showForm)}
              className="w-full py-3 bg-green-50 text-green-700 rounded-xl font-bold border border-green-200">
              + Créer un poste
            </button>
            {showForm && (
              <div className="bg-white rounded-2xl p-4 shadow-sm space-y-3">
                <input value={nom} onChange={(e) => setNom(e.target.value)} placeholder="Nom du poste"
                  className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue" />
                <select value={categorie} onChange={(e) => setCategorie(e.target.value)}
                  className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue">
                  {CATEGORIES.map((c) => <option key={c.value} value={c.value}>{c.label}</option>)}
                </select>
                <input value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Description"
                  className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue" />
                <input value={prerequis} onChange={(e) => setPrerequis(e.target.value)} placeholder="Prérequis"
                  className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue" />
                <textarea value={informations} onChange={(e) => setInformations(e.target.value)} placeholder="Informations"
                  rows={2} className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue resize-none" />
                <button onClick={creerPoste} disabled={!nom.trim()}
                  className="w-full py-3 bg-aa-blue text-white rounded-xl font-bold disabled:opacity-40">Créer</button>
              </div>
            )}
            {postes.map((p) => (
              <div key={p.id} className={`bg-white rounded-2xl p-4 shadow-sm ${!p.actif ? 'border-2 border-dashed border-gray-300' : ''}`}>
                <div className="flex items-start justify-between gap-2">
                  <div className="flex-1">
                    <p className="font-bold text-gray-800">{CAT_ICON[p.categorie] || '⚪'} {p.nom}</p>
                    {p.description && <p className="text-xs text-gray-500 mt-1">{p.description}</p>}
                    {p.informations && <p className="text-xs text-gray-400 mt-1 italic">{p.informations}</p>}
                  </div>
                  {p.actif ? (
                    <button onClick={() => abolir(p.id, p.nom)} className="text-xs text-red-500 font-medium px-2 py-1">Abolir</button>
                  ) : (
                    <div className="flex flex-col gap-1">
                      <button onClick={() => reactiver(p.id)} className="text-xs text-green-600 font-medium px-2 py-1">Réactiver</button>
                      <button onClick={() => supprimerPermanent(p.id, p.nom)} className="text-xs text-red-500 font-medium px-2 py-1">Supprimer</button>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}

        {tab === 'acces' && (
          <div className="space-y-3">
            {postes.filter((p) => p.actif).map((p) => (
              <div key={p.id} className="bg-white rounded-2xl p-4 shadow-sm">
                <p className="font-bold text-gray-800 mb-3">{p.nom}</p>
                <div className="grid grid-cols-2 gap-2">
                  {MODULES.map(([code, label]) => {
                    const actif = (modulesPostes[p.id] || []).includes(code);
                    return (
                      <button key={code} onClick={() => toggleModule(p.id, code)}
                        className={`p-2 rounded-xl text-xs font-bold border ${
                          actif ? 'bg-aa-blue text-white border-aa-blue' : 'bg-gray-50 text-gray-500 border-gray-200'
                        }`}>
                        {code} · {label}
                      </button>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        )}

        {tab === 'candidatures' && (
          candidatures.length === 0 ? (
            <div className="text-center py-12"><p className="text-gray-500">Aucune candidature en attente</p></div>
          ) : (
            <div className="space-y-3">
              {candidatures.map((c) => (
                <div key={c.id} className="bg-white rounded-2xl p-4 shadow-sm">
                  <p className="font-bold text-gray-800">{c.membre_prenom} → {c.poste_nom}</p>
                  {c.motivation && <p className="text-sm text-gray-500 mt-1 italic">«{c.motivation}»</p>}
                  <div className="flex gap-2 mt-3">
                    <button onClick={() => traiterCandidature(c.id, 'acceptee')}
                      className="flex-1 py-2 bg-green-50 text-green-700 rounded-xl text-sm font-bold border border-green-200">Accepter</button>
                    <button onClick={() => traiterCandidature(c.id, 'refusee')}
                      className="flex-1 py-2 bg-red-50 text-red-700 rounded-xl text-sm font-bold border border-red-200">Refuser</button>
                  </div>
                </div>
              ))}
            </div>
          )
        )}
      </div>
    </div>
  );
}