"use client";

import { FormEvent, useState } from "react";

type CatalogRow={id:string;reference:string;description:string;category:string;brand:string;unit:string;offerId:string;supplierName:string;supplierRating:number;unitPrice:number;minimumQuantity:number;leadTimeDays:number;validUntil:string;homologated:boolean;supplierReference:string};
type SupplierRow={id:string;name:string;rating:number};
type Recommendation={supplierId:string;supplierName:string;rating:number;totalHt:number;leadTimeDays:number;coverage:number;eligible:boolean};

export function TariffCatalogModal({catalog,suppliers,units,format,onSave,onDelete,onClose}:{catalog:CatalogRow[];suppliers:SupplierRow[];units:string[];format:(value:number)=>string;onSave:(event:FormEvent<HTMLFormElement>)=>void;onDelete:(offerId:string)=>void;onClose:()=>void}){
  const [query,setQuery]=useState("");
  const visible=catalog.filter(item=>`${item.reference} ${item.description} ${item.category} ${item.brand} ${item.supplierName}`.toLowerCase().includes(query.toLowerCase()));
  return <div className="modal-backdrop tariff-modal-backdrop" onMouseDown={event=>event.target===event.currentTarget&&onClose()}><section className="modal tariff-catalog-modal"><header className="modal-header"><div><p>RÉFÉRENTIEL ACHATS PARTAGÉ</p><h2>Base tarifaire fournisseurs</h2></div><button onClick={onClose}>×</button></header><div className="tariff-modal-body"><section className="tariff-guidance"><strong>Sélection sécurisée du fournisseur</strong><span>Les offres homologuées, valides et compatibles avec la quantité demandée sont comparées par coût total, puis délai et note fournisseur.</span></section><form className="tariff-entry-form" onSubmit={onSave}><label><span>Référence article *</span><input name="reference" required placeholder="Ex. FIL-HU12140"/></label><label className="wide"><span>Désignation *</span><input name="description" required placeholder="Désignation précise de l’article"/></label><label><span>Catégorie</span><input name="category" placeholder="Filtration, freinage…"/></label><label><span>Marque</span><input name="brand"/></label><label><span>Réf. fabricant</span><input name="manufacturerReference"/></label><label><span>Fournisseur *</span><select name="supplierId" required defaultValue=""><option value="">Sélectionner</option>{suppliers.map(supplier=><option value={supplier.id} key={supplier.id}>{supplier.name} · {supplier.rating.toFixed(1)}/5</option>)}</select></label><label><span>Réf. fournisseur</span><input name="supplierReference"/></label><label><span>Unité</span><select name="unit">{units.map(unit=><option key={unit}>{unit}</option>)}</select></label><label><span>Prix unitaire HT *</span><input name="unitPrice" type="number" min="0" step="0.01" required/></label><label><span>Devise</span><select name="currency"><option>MAD</option><option>EUR</option><option>USD</option></select></label><label><span>TVA %</span><input name="taxRate" type="number" min="0" max="100" step="0.01" defaultValue="20"/></label><label><span>Quantité minimale</span><input name="minimumQuantity" type="number" min="0.01" step="0.01" defaultValue="1"/></label><label><span>Délai (jours)</span><input name="leadTimeDays" type="number" min="0" step="1" defaultValue="0"/></label><label><span>Valide du</span><input name="validFrom" type="date"/></label><label><span>Valide jusqu’au</span><input name="validUntil" type="date"/></label><label className="tariff-approved"><input name="homologated" type="checkbox"/><span>Fournisseur homologué pour cet article</span></label><label className="wide"><span>Notes / conditions</span><input name="notes" placeholder="Franco, garantie, conditionnement…"/></label><button className="primary-button">Enregistrer l’offre</button></form><div className="tariff-list-toolbar"><label className="table-search"><span>⌕</span><input value={query} onChange={event=>setQuery(event.target.value)} placeholder="Référence, article, fournisseur…"/></label><strong>{visible.length} offre(s)</strong></div><div className="tariff-list"><div className="tariff-list-head"><span>Article</span><span>Fournisseur</span><span>Prix / validité</span><span>Approvisionnement</span><span/></div>{visible.map(item=><div className="tariff-list-row" key={item.id}><span><strong>{item.description}</strong><small>{item.reference} · {item.brand||item.category||"Sans catégorie"}</small></span><span><strong>{item.supplierName||"Aucune offre"}</strong><small>{item.supplierRating?`${item.supplierRating.toFixed(1)}/5`:"—"} · {item.supplierReference||"réf. non renseignée"}</small></span><span><strong>{item.offerId?format(item.unitPrice):"Prix à renseigner"}</strong><small>{item.validUntil?`jusqu’au ${new Date(`${item.validUntil}T12:00:00`).toLocaleDateString("fr-MA")}`:"sans date de fin"}</small></span><span><b className={item.homologated?"tariff-approved-badge":"tariff-pending-badge"}>{item.homologated?"Homologué":"Non homologué"}</b><small>Mini {item.minimumQuantity} · {item.leadTimeDays} j</small></span><button type="button" className="danger-button" disabled={!item.offerId} onClick={()=>onDelete(item.offerId)}>Supprimer</button></div>)}</div></div><footer className="modal-actions"><button className="primary-button" onClick={onClose}>Terminer</button></footer></section></div>;
}

export function SupplierRecommendationModal({requestId,pressedSupplier,recommendations,warning,loading,format,onChoose,onClose}:{requestId:string;pressedSupplier:string;recommendations:Recommendation[];warning:string;loading:boolean;format:(value:number)=>string;onChoose:(choice:{supplierId?:string;supplierName?:string})=>void;onClose:()=>void}){
  const eligible=recommendations.filter(item=>item.eligible);
  return <div className="modal-backdrop recommendation-backdrop" onMouseDown={event=>event.target===event.currentTarget&&onClose()}><section className="modal supplier-recommendation-modal"><header className="modal-header"><div><p>COMPARAISON AVANT COMMANDE</p><h2>Choisir le fournisseur de {requestId}</h2></div><button onClick={onClose}>×</button></header><div className="recommendation-body"><section className="recommendation-rule"><b>Règle de décision</b><span>1. fournisseur homologué et tarif valide · 2. couverture complète · 3. meilleur total HT · 4. délai le plus court · 5. meilleure note.</span></section>{warning&&<p className="recommendation-warning">{warning}</p>}{loading?<p>Comparaison en cours…</p>:eligible.length?<div className="recommendation-list">{eligible.map((item,index)=><article className={index===0?"recommended":""} key={item.supplierId}><header><div><span>{index===0?"✓ MEILLEUR CHOIX":"OFFRE ÉLIGIBLE"}</span><h3>{item.supplierName}</h3></div><b>{format(item.totalHt)} HT</b></header><div><p><span>Couverture</span><strong>{item.coverage}%</strong></p><p><span>Délai</span><strong>{item.leadTimeDays} jour(s)</strong></p><p><span>Note</span><strong>{item.rating.toFixed(1)}/5</strong></p><p><span>Homologation</span><strong>Validée</strong></p></div><button className={index===0?"primary-button":"secondary-button"} onClick={()=>onChoose({supplierId:item.supplierId,supplierName:item.supplierName})}>{index===0?"Créer le BC avec ce fournisseur":"Choisir cette offre"}</button></article>)}</div>:<section className="recommendation-empty"><strong>Aucune offre homologuée complète</strong><span>Complétez la base tarifaire ou utilisez le fournisseur pressenti de la DA.</span>{pressedSupplier&&<button className="secondary-button" onClick={()=>onChoose({supplierName:pressedSupplier})}>Créer avec {pressedSupplier}</button>}</section>}</div><footer className="modal-actions"><button className="secondary-button" onClick={onClose}>Retour au dossier</button></footer></section></div>;
}

type ReceiptLine={id:string;description:string;reference:string;quantity:number;receivedQuantity?:number;unit:string};

export function PurchaseReceiptModal({requestId,orderRef,lines,onSubmit,onClose}:{requestId:string;orderRef:string;lines:ReceiptLine[];onSubmit:(payload:Record<string,unknown>)=>void;onClose:()=>void}){
  const submit=(event:FormEvent<HTMLFormElement>)=>{event.preventDefault();const form=new FormData(event.currentTarget),received=lines.map(line=>({lineId:line.id,quantity:Number(form.get(`qty-${line.id}`)||0)})).filter(line=>line.quantity>0);onSubmit({warehouse:String(form.get("warehouse")),deliveryNote:String(form.get("deliveryNote")),notes:String(form.get("notes")),lines:received})};
  return <div className="modal-backdrop receipt-modal-backdrop" onMouseDown={event=>event.target===event.currentTarget&&onClose()}><section className="modal purchase-receipt-modal"><header className="modal-header"><div><p>RÉCEPTION FOURNISSEUR & MISE À JOUR DU STOCK</p><h2>{orderRef} · {requestId}</h2></div><button onClick={onClose}>×</button></header><form onSubmit={submit}><div className="receipt-header-fields"><label><span>Magasin de réception *</span><input name="warehouse" required defaultValue="Magasin central"/></label><label><span>Bon de livraison</span><input name="deliveryNote" placeholder="N° BL fournisseur"/></label></div><section className="receipt-control-note"><strong>Contrôle quantitatif</strong><span>Saisissez uniquement les quantités réellement reçues. Le reliquat restera ouvert pour une prochaine livraison.</span></section><div className="receipt-lines"><div className="receipt-lines-head"><span>Article</span><span>Commandé</span><span>Déjà reçu</span><span>Reliquat</span><span>Reçu maintenant</span></div>{lines.map(line=>{const received=Number(line.receivedQuantity||0),remaining=Math.max(0,Number(line.quantity)-received);return <div key={line.id}><span><strong>{line.description}</strong><small>{line.reference||"Sans référence"}</small></span><b>{line.quantity} {line.unit}</b><b>{received} {line.unit}</b><b>{remaining} {line.unit}</b><input name={`qty-${line.id}`} type="number" min="0" max={remaining} step="0.01" defaultValue={remaining}/></div>})}</div><label className="receipt-notes"><span>Réserves / observations</span><textarea name="notes" rows={3} placeholder="Écart, colis endommagé, quantité refusée…"/></label><footer className="modal-actions"><button type="button" className="secondary-button" onClick={onClose}>Annuler</button><button className="primary-button">Valider la réception et entrer en stock</button></footer></form></section></div>;
}