/*
 * ShipmentDetail — main workspace on the right.
 * Plays the "chat area" role: header with shipment lockup + KPIs, customs stepper,
 * a timeline of ShipmentEvent items, and the QuickActionBar composer at the foot.
 */
const ShipmentDetail = ({ shipment, events, onSubmitNote }) => {
  if (!shipment) {
    return (
      <main className="tm-detail tm-detail--empty">
        <div>
          <h2 className="tx-h2">Selecciona un embarque</h2>
          <p className="tx-body" style={{ color: "var(--muted)" }}>
            Elige una fila del listado para ver detalle, documentos y línea de tiempo.
          </p>
        </div>
      </main>
    );
  }

  const steps = ["Documentación", "Pre-validación", "Despacho", "Liberación", "Entrega"];

  return (
    <main className="tm-detail">
      <header className="tm-detail__head">
        <div>
          <div className="tx-caption" style={{ color: "var(--brand-blue-600)" }}>
            {shipment.customer} · BL <span className="tx-mono">{shipment.bl}</span>
          </div>
          <h1 className="tx-h2" style={{ margin: "4px 0 0" }}>
            {shipment.origin} → {shipment.destination}
          </h1>
          <div className="tm-detail__meta tx-body-sm">
            <span className="tx-mono">{shipment.container}</span>
            <span>·</span>
            <span>{shipment.carrier}</span>
            <span>·</span>
            <span>ETA {shipment.eta}</span>
            <span className={"pill pill-" + shipment.statusTone}>{shipment.statusLabel}</span>
          </div>
        </div>
        <div className="tm-detail__actions">
          <button className="btn btn-ghost">Asignar</button>
          <button className="btn btn-secondary">Compartir con cliente</button>
        </div>
      </header>

      <section className="tm-detail__kpis">
        <div className="tm-kpi"><span className="lbl tx-caption">Distancia restante</span><span className="num tx-num">412 <small>km</small></span></div>
        <div className="tm-kpi"><span className="lbl tx-caption">Demora vs SLA</span><span className="num tx-num" style={{ color: "var(--success)" }}>+12 min</span></div>
        <div className="tm-kpi"><span className="lbl tx-caption">Costo acumulado</span><span className="num tx-num">$ 84,210 <small>MXN</small></span></div>
        <div className="tm-kpi"><span className="lbl tx-caption">Documentos</span><span className="num tx-num">9 / 11</span></div>
      </section>

      <section className="tm-stepper" aria-label="Estado aduanal">
        {steps.map((s, i) => {
          const cls = i < shipment.stepIndex ? "done" : (i === shipment.stepIndex ? "now" : "");
          return (
            <div key={s} className={"tm-stepper__step " + cls}>
              <span className="lbl tx-caption">{String(i + 1).padStart(2, "0")}</span>
              <span className="name">{s}</span>
            </div>
          );
        })}
      </section>

      <section className="tm-timeline">
        <h3 className="tx-h3">Línea de tiempo</h3>
        <ol className="tm-timeline__list">
          {events.map((e) => <ShipmentEvent key={e.id} event={e} />)}
        </ol>
      </section>

      <footer className="tm-detail__foot">
        <QuickActionBar onSubmit={onSubmitNote} />
      </footer>
    </main>
  );
};
window.ShipmentDetail = ShipmentDetail;
globalThis.ShipmentDetail = ShipmentDetail;