/* Custex — pricing breakdown UI (depends on React UMD + CxPricing quote shape). */

function CxPriceBreakdown({ quote, validation }) {
  if (!quote || !quote.lines) return null;
  const err = (validation || []).filter((v) => v.level === 'error');
  return (
    <div className="cx-price-breakdown">
      {err.length > 0 && (
        <div className="cx-price-invalid" role="status">
          Validation failed — line items below are estimates only.
        </div>
      )}
      <div className="cx-price-logic">
        Logic score <strong>{quote.logicScore}</strong>
      </div>
      <ul className="cx-price-lines">
        {quote.lines.map((row) => (
          <li key={row.id} className="cx-price-line">
            <span className="cx-price-line-k">{row.label}</span>
            <span className="cx-price-line-v">
              £{Number(row.priceDelta).toFixed(2)}
            </span>
            {row.logicWeight ? (
              <span className="cx-price-line-w"> · +{row.logicWeight} logic</span>
            ) : null}
            {row.detail ? <span className="cx-price-line-d">{row.detail}</span> : null}
          </li>
        ))}
      </ul>
      <div className="cx-price-total-unit">
        Unit price (est.) <strong>£{quote.unitPrice.toFixed(2)}</strong>
      </div>
      <p className="cx-price-shipping-note">Excludes shipping &amp; delivery</p>
    </div>
  );
}

window.CxPricingUI = { CxPriceBreakdown };
window.CxPriceBreakdown = CxPriceBreakdown;