// Format monétaire en euros (à partir de centimes)
function euros(c) { return (c/100).toFixed(2) + '€'; }

// Interface d'administration des commandes: liste, détail, changement de statut, renvoi d'email
function AdminOrders() {
  const { user } = window.AuthContext.useAuth();
  const toast = window.Toast.useToast();
  const [orders, setOrders] = React.useState([]);
  const [selected, setSelected] = React.useState(null);
  const [open, setOpen] = React.useState(false);

  // Charge la liste des commandes
  async function load() {
    const res = await window.OrdersAPI.list();
    setOrders(res.items);
  }
  React.useEffect(() => { load(); }, []);

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

  // Charge le détail d'une commande spécifique
  async function openOrder(id) {
    const data = await window.OrdersAPI.get(id);
    setSelected(data);
    // Ne pas ouvrir automatiquement la modale; affichage dans le panneau de droite
    setOpen(false);
  }
  // Modifie le statut d'une commande (pending/processed/canceled)
  async function setStatus(id, status) {
    try {
      await window.OrdersAPI.setStatus(id, status);
      toast.success(`Statut changé: ${status}`);
      openOrder(id); load();
    } catch (e) {
      const msg = e?.error?.message || 'Erreur lors du changement de statut';
      toast.error(msg);
    }
  }
  // Renvoyer l'email de confirmation pour une commande
  async function resend(id) {
    try {
      await window.OrdersAPI.resend(id);
      toast.success("Email renvoyé");
    } catch (e) {
      const msg = e?.error?.message || "Erreur lors de l'envoi de l'email";
      toast.error(msg);
    }
  }

  return (
    <div className="container">
      <h1>Commandes</h1>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div>
          <h3>Liste</h3>
          <ul>
            {orders.map(o => (
              <li key={o.id}>
                <a href="#" onClick={(e)=>{e.preventDefault();openOrder(o.id);}}>
                  #{o.id} — {o.user_name} — {{ pending:'En attente', processed:'Traitée', canceled:'Annulée' }[o.status] || o.status}
                </a>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <h3>Détail</h3>
          {!selected ? <p>Sélectionner une commande.</p> : (
            <div>
              <p><b>Commande:</b> #{selected.order.id} — Statut: {{ pending:'En attente', processed:'Traitée', canceled:'Annulée' }[selected.order.status] || selected.order.status}</p>
              <p><b>Client:</b> {selected.order.user_name} ({selected.order.user_email})</p>
              {selected.order.user_postal_address && (
                <p><b>Adresse postale:</b><br/>
                  <pre style={{ whiteSpace:'pre-wrap', background:'var(--brand-card)', padding:8, borderRadius:8, border:'1px solid var(--brand-border)' }}>{selected.order.user_postal_address}</pre>
                </p>
              )}
              <button onClick={()=>setOpen(true)}>Ouvrir en modal</button>
              <div style={{ marginTop: 8, display: 'flex', gap: 8 }}>
                <button onClick={()=>setStatus(selected.order.id, 'pending')}>En attente</button>
                <button onClick={()=>setStatus(selected.order.id, 'processed')}>Traitée</button>
                <button onClick={()=>setStatus(selected.order.id, 'canceled')}>Annulée</button>
                <button onClick={()=>resend(selected.order.id)}>Renvoyer l'email</button>
              </div>
            </div>
          )}
        </div>
      </div>
      {open && selected && (
        <div className="modal-backdrop" onClick={()=>setOpen(false)}>
          <div className="modal" onClick={(e)=>e.stopPropagation()}>
            <div className="modal-header">
              <h3>Commande #{selected.order.id}</h3>
              <button onClick={()=>setOpen(false)} aria-label="Fermer">×</button>
            </div>
            <div className="modal-body">
              <p><b>Statut:</b> <span className={`badge status ${selected.order.status}`}>{{ pending:'En attente', processed:'Traitée', canceled:'Annulée' }[selected.order.status] || selected.order.status}</span></p>
              <p><b>Date:</b> {new Date(selected.order.created_at).toLocaleString()}</p>
              <p><b>Client:</b> {selected.order.user_name} ({selected.order.user_email})</p>
              <table style={{ width:'100%', borderCollapse:'collapse' }}>
                <thead>
                  <tr><th align="left">Article</th><th>Qté</th><th>PU</th><th>Catégorie</th></tr>
                </thead>
                <tbody>
                  {selected.items.map(it => {
                    let opts = [];
                    try { if (it.options_json) { const parsed = JSON.parse(it.options_json); if (Array.isArray(parsed)) opts = parsed; } } catch {}
                    return (
                    <tr key={it.id}>
                      <td style={{ padding:'6px 0' }}>
                        {it.name}
                        {opts.length>0 && (
                          <div style={{ fontSize:12, color:'#666' }}>
                            {opts.map(o=>`${o.name}${o.price_cents?` (+${euros(o.price_cents)})`:''}`).join(', ')}
                          </div>
                        )}
                      </td>
                      <td align="center">{it.quantity}</td>
                      <td align="right">{euros(it.unit_price_cents)}</td>
                      <td align="left">{it.category || '-'}</td>
                    </tr>
                  );})}
                </tbody>
              </table>
            </div>
            <div className="modal-footer" style={{ display:'flex', gap:8, justifyContent:'flex-end' }}>
              <button onClick={()=>setStatus(selected.order.id, 'pending')}>En attente</button>
              <button onClick={()=>setStatus(selected.order.id, 'processed')}>Traitée</button>
              <button onClick={()=>setStatus(selected.order.id, 'canceled')}>Annulée</button>
              <button onClick={()=>resend(selected.order.id)}>Renvoyer l'email</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

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