function StatusStepper({statuses,current}){
const labels = {paiement_a_verifier:'Paiement à vérifier',paiement_confirme:'Paiement confirmé',en_preparation:'En préparation',en_route:'En route',livree:'Livrée'};
const icons = {paiement_a_verifier:'clock',paiement_confirme:'check',en_preparation:'package',en_route:'truck',livree:'home'};
function Icon({name,size=18}){const pascal=name.replace(/(^\w|-\w)/g,c=>c.replace('-','').toUpperCase());const nodes=window.lucide&&window.lucide.icons[pascal];const inner=nodes?nodes.map(([tag,attrs])=>'<'+tag+' '+Object.entries(attrs).map(([k,v])=>k+'="'+v+'"').join(' ')+'/>').join(''):'';const svg='<svg xmlns="http://www.w3.org/2000/svg" width="'+size+'" height="'+size+'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">'+inner+'</svg>';return React.createElement('span',{style:{display:'inline-flex',width:size,height:size},dangerouslySetInnerHTML:{__html:svg}});}
const currentIndex = statuses.indexOf(current);
const steps = statuses.map(function(s,i){
const done = i<=currentIndex;
const isCurrent = i===currentIndex;
const dot = React.createElement('div',{style:{
width:40,height:40,borderRadius:'50%',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,
background:done?'var(--brand-primary)':'var(--color-gray-100)',
color:done?'#fff':'var(--text-muted)',
border:isCurrent?'3px solid var(--brand-accent)':'none',
boxShadow:isCurrent?'0 0 0 4px var(--surface-tint-orange)':'none'
}},React.createElement(Icon,{name:icons[s]}));
const label = React.createElement('div',{style:{fontFamily:'var(--font-body)',fontSize:12.5,fontWeight:isCurrent?700:600,color:done?'var(--text-primary)':'var(--text-muted)',marginTop:8,textAlign:'center'}},labels[s]);
const line = i<statuses.length-1 ? React.createElement('div',{style:{flex:1,height:3,background:i<currentIndex?'var(--brand-primary)':'var(--color-gray-200)',margin:'20px 4px 0'}}) : null;
return React.createElement(React.Fragment,{key:s},
React.createElement('div',{style:{display:'flex',flexDirection:'column',alignItems:'center',width:88}},dot,label),
line
);
});
return React.createElement('div',{style:{display:'flex',alignItems:'flex-start',marginTop:8,overflowX:'auto',paddingBottom:4}},steps);
}

function Suivi({go}){
const {SectionHeader,Breadcrumbs,Card,Input,Button,Alert} = window.IDHDesignSystem_6f4674;
const [orderNumber,setOrderNumber] = React.useState('');
const [phone,setPhone] = React.useState('');
const [loading,setLoading] = React.useState(false);
const [error,setError] = React.useState(null);
const [result,setResult] = React.useState(null);

function submit(ev){
ev.preventDefault();
if(!orderNumber.trim()||!phone.trim()){
setError('Renseignez le numéro de commande et le téléphone utilisés lors de la commande.');
return;
}
setLoading(true);
setError(null);
setResult(null);
const qs = 'order_number='+encodeURIComponent(orderNumber.trim())+'&phone='+encodeURIComponent(phone.trim());
fetch('api/order_status.php?'+qs)
.then(function(res){ return res.json().catch(function(){return null;}).then(function(data){ return {res:res,data:data}; }); })
.then(function(o){
if(!o.res.ok||!o.data||!o.data.success){
throw new Error((o.data&&o.data.error)||'Impossible de vérifier cette commande pour le moment. Réessayez plus tard.');
}
setResult(o.data);
})
.catch(function(err){
if(err instanceof TypeError){
setError('Le serveur de suivi est injoignable pour le moment.');
}else{
setError(err.message);
}
})
.finally(function(){ setLoading(false); });
}

const form = React.createElement(Card,{padding:'28px'},
React.createElement('form',{onSubmit:submit,style:{display:'flex',flexDirection:'column',gap:18}},
React.createElement(Input,{label:'Numéro de commande',placeholder:'IDH-20260723-A1B2C3',value:orderNumber,onChange:function(e){setOrderNumber(e.target.value);}}),
React.createElement(Input,{label:'Téléphone utilisé lors de la commande',type:'tel',placeholder:'+225 07 00 00 00 00',value:phone,onChange:function(e){setPhone(e.target.value);}}),
error&&React.createElement(Alert,{tone:'warning'},error),
React.createElement(Button,{variant:'primary',type:'submit',size:'lg',disabled:loading},loading?'Recherche...':'Suivre ma commande')
)
);

let resultBlock = null;
if(result){
const itemLines = result.items.map(function(it){
return React.createElement('div',{key:it.product_name+it.unit_price,style:{display:'flex',justifyContent:'space-between',fontFamily:'var(--font-body)',fontSize:13.5,color:'var(--text-secondary)',marginBottom:6}},
React.createElement('span',null,it.quantity,'× ',it.product_name),
React.createElement('span',null,(it.unit_price*it.quantity).toLocaleString('fr-FR'),' FCFA')
);
});
resultBlock = React.createElement('div',{style:{marginTop:24}},React.createElement(Card,{padding:'28px',elevated:true},
React.createElement('div',{style:{fontFamily:'var(--font-body)',fontSize:12,fontWeight:700,color:'var(--text-muted)',textTransform:'uppercase',letterSpacing:'var(--tracking-wide)'}},'Commande '+result.order_number),
React.createElement(StatusStepper,{statuses:result.statuses,current:result.status}),
React.createElement('div',{style:{marginTop:32,paddingTop:20,borderTop:'1px solid var(--border-default)'}},
itemLines,
React.createElement('div',{style:{display:'flex',justifyContent:'space-between',fontFamily:'var(--font-display)',fontWeight:700,fontSize:18,color:'var(--brand-primary)',marginTop:10,paddingTop:10,borderTop:'1px solid var(--border-default)'}},
React.createElement('span',null,'Total'),
React.createElement('span',null,result.total.toLocaleString('fr-FR'),' FCFA')
)
),
React.createElement('div',{style:{marginTop:16,fontFamily:'var(--font-body)',fontSize:12.5,color:'var(--text-muted)'}},'Commandé le '+new Date(result.created_at.replace(' ','T')).toLocaleDateString('fr-FR')+' — livraison à '+result.commune)
));
}

return React.createElement('div',{style:{maxWidth:1240,margin:'0 auto',padding:'32px 32px 80px'}},
React.createElement(Breadcrumbs,{items:[{href:'accueil',label:'Accueil'},{href:'suivi',label:'Suivre ma commande'}],onNavigate:go}),
React.createElement('div',{style:{marginTop:20}},React.createElement(SectionHeader,{eyebrow:'Suivi de commande',title:'Où en est ma commande ?',subtitle:'Entrez le numéro de commande reçu à la confirmation, ainsi que le téléphone utilisé.'})),
React.createElement('div',{style:{maxWidth:640,marginTop:32}},form,resultBlock)
);
}
window.Suivi = Suivi;