// Format monétaire (utilisé pour totals commandes)
function euros(c) { return (c/100).toFixed(2) + '€'; }

function AdminUsers() {
  const { user } = window.AuthContext.useAuth();
  const [users, setUsers] = React.useState([]);
  const [selected, setSelected] = React.useState(null);

  React.useEffect(() => {
    // Charge la liste des utilisateurs (côté admin)
    (async () => {
      const res = await window.UsersAPI.list();
      setUsers(res.items || []);
    })();
  }, []);

  async function openUser(id) {
    // Charge le détail d'un utilisateur (infos + commandes)
    const data = await window.UsersAPI.get(id);
    setSelected(data);
  }

  if (!user || user.role !== 'admin') return <div className="container"><p>Accès réservé à l'admin.</p></div>;

  return (
    <div className="container">
      <h1>Utilisateurs</h1>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div>
          <h3>Liste</h3>
          <ul>
            {users.map(u => (
              <li key={u.id}>
                <a href="#" onClick={(e)=>{e.preventDefault(); openUser(u.id);}}>
                  {u.name} ({u.email}) — {u.role} — {u.orders_count} commandes
                  {u.social_handle ? ` — ${u.social_handle}` : ''}
                </a>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <h3>Détail</h3>
          {!selected ? <p>Sélectionner un utilisateur.</p> : (
            <div>
              <p><b>Nom:</b> {selected.user.name}</p>
              <p><b>Email:</b> {selected.user.email}</p>
              {/* Affichage du pseudo social saisi par l'utilisateur (Discord/Twitch) */}
              <p><b>Pseudo Discord / Twitch:</b> {selected.user.social_handle || <i>Non renseigné</i>}</p>
              <p><b>Rôle:</b> {selected.user.role}</p>
              <h4>Commandes</h4>
              {selected.orders.length === 0 ? <p>Aucune commande.</p> : (
                <table style={{ width:'100%' }}>
                  <thead><tr><th align="left">#</th><th>Statut</th><th>Total</th><th>Date</th></tr></thead>
                  <tbody>
                    {selected.orders.map(o => (
                      <tr key={o.id}>
                        <td>#{o.id}</td>
                        <td align="center">{o.status}</td>
                        <td align="right">{euros(o.total_cents || 0)}</td>
                        <td align="right">{new Date(o.created_at).toLocaleString()}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.Pages = window.Pages || {};
window.Pages.AdminUsers = AdminUsers;