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

const STATUTS = {
  en_attente: { label: 'En attente', bg: 'bg-yellow-100', text: 'text-yellow-800', emoji: '⏳' },
  en_cours: { label: 'En cours', bg: 'bg-blue-100', text: 'text-blue-800', emoji: '🔄' },
  complete: { label: 'Complété', bg: 'bg-green-100', text: 'text-green-800', emoji: '✓' },
};

function Badge({ statut }) {
  const s = STATUTS[statut] || STATUTS.en_attente;
  return (
    <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-bold ${s.bg} ${s.text}`}>
      {s.emoji} {s.label}
    </span>
  );
}

export default function Decisions() {
  const [decisions, setDecisions] = useState([]);
  const [filtre, setFiltre] = useState('ouvertes'); // ouvertes | toutes
  const [loading, setLoading] = useState(true);

  const charger = async () => {
    setLoading(true);
    try {
      let url = '/decisions/';
      if (filtre === 'ouvertes') {
        // Charger en_attente et en_cours
        const [att, enc] = await Promise.all([
          api.get('/decisions/?statut=en_attente'),
          api.get('/decisions/?statut=en_cours'),
        ]);
        setDecisions([...enc, ...att]);
      } else {
        const data = await api.get(url);
        setDecisions(data);
      }
    } catch (e) {
      console.error(e);
    }
    setLoading(false);
  };

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

  return (
    <div className="min-h-screen bg-gray-100">
      <PageHeader titre="Décisions en cours" sousTitre="C5 — Suivi réunion d'affaires" />

      {/* Filtres */}
      <div className="p-4 pb-0">
        <div className="flex gap-2">
          {[
            { key: 'ouvertes', label: 'Ouvertes' },
            { key: 'toutes', label: 'Toutes' },
          ].map((f) => (
            <button
              key={f.key}
              onClick={() => setFiltre(f.key)}
              className={`px-4 py-2 rounded-full text-sm font-bold transition ${
                filtre === f.key
                  ? 'bg-aa-blue text-white'
                  : 'bg-white text-gray-600 border border-gray-200'
              }`}
            >
              {f.label}
            </button>
          ))}
        </div>
      </div>

      {/* Liste */}
      <div className="p-4 space-y-3">
        {loading ? (
          <p className="text-center text-gray-400 py-8">Chargement...</p>
        ) : decisions.length === 0 ? (
          <div className="text-center py-12">
            <p className="text-4xl mb-2">📌</p>
            <p className="text-gray-500">Aucune décision {filtre === 'ouvertes' ? 'ouverte' : ''}</p>
          </div>
        ) : (
          decisions.map((d) => (
            <div key={d.id} className="bg-white rounded-2xl p-4 shadow-sm">
              <div className="flex items-start justify-between gap-3">
                <div className="flex-1">
                  <p className="font-bold text-gray-800">{d.sujet}</p>
                  {d.description && (
                    <p className="text-sm text-gray-500 mt-1">{d.description}</p>
                  )}
                  <div className="flex flex-wrap items-center gap-2 mt-2">
                    <Badge statut={d.statut} />
                    {d.responsable_prenom && (
                      <span className="text-xs text-gray-400">→ {d.responsable_prenom}</span>
                    )}
                    <span className="text-xs text-gray-300">{d.date_decision}</span>
                  </div>
                  {d.proposeur && (
                    <p className="text-xs text-gray-400 mt-1">
                      Proposé par {d.proposeur}{d.secondeur ? `, secondé par ${d.secondeur}` : ''}
                    </p>
                  )}
                </div>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}