/*
 * App — composes the Transmodal ops shell.
 * Sidebar (left) + ShipmentsList (rail) + ShipmentDetail (right with QuickActionBar).
 * Stateful enough to feel like the real product, not a static screenshot.
 */
const App = () => {
  const initialShipments = [
    { id: "s1", origin: "Lázaro Cárdenas", destination: "Monterrey, NL", container: "MSCU 8421906-3",
      carrier: "MSC", customer: "Cementos Apasco", eta: "Hoy · 18:40",
      statusLabel: "En tránsito", statusTone: "success", bl: "TMOD-2026-04-09817", stepIndex: 2 },
    { id: "s2", origin: "Manzanillo", destination: "Querétaro", container: "MAEU 5512098-7",
      carrier: "Maersk", customer: "Bachoco", eta: "Mañana · 09:15",
      statusLabel: "Despachando", statusTone: "info", bl: "TMOD-2026-04-09822", stepIndex: 2 },
    { id: "s3", origin: "Veracruz", destination: "CDMX", container: "HLXU 1003445-2",
      carrier: "Hapag-Lloyd", customer: "Heineken MX", eta: "Demora 2h",
      statusLabel: "Demora 2h", statusTone: "warning", bl: "TMOD-2026-04-09805", stepIndex: 3 },
    { id: "s4", origin: "Houston, TX", destination: "Monterrey, NL", container: "CMAU 7780012-4",
      carrier: "CMA CGM", customer: "Whirlpool MX", eta: "Retención SAT",
      statusLabel: "Retención SAT", statusTone: "danger", bl: "TMOD-2026-04-09781", stepIndex: 1 },
    { id: "s5", origin: "Lázaro Cárdenas", destination: "Guadalajara", container: "MSCU 6612301-1",
      carrier: "MSC", customer: "Grupo Modelo", eta: "Vie · 14:00",
      statusLabel: "Documentación", statusTone: "info", bl: "TMOD-2026-04-09833", stepIndex: 0 },
  ];

  const seedEvents = {
    s1: [
      { id: "e1", actor: "system", author: "Sistema", role: "Auto", time: "08:14",
        tone: "info", text: "Pedimento A1 generado y enviado al despachador." },
      { id: "e2", actor: "human", author: "M. Robledo", role: "Despacho · Lázaro Cárdenas", time: "09:02",
        tone: "info", text: "Unidad #284 asignada. Operador Hugo Pacheco confirmó arribo a patio.",
        attachment: "asignacion-unidad-284.pdf" },
      { id: "e3", actor: "system", author: "Sistema", role: "Aduana", time: "11:38",
        tone: "success", text: "Pre-validación SAT exitosa. Liberación estimada en 90 min." },
      { id: "e4", actor: "human", author: "Carla T.", role: "Cuenta · Cementos Apasco", time: "12:01",
        tone: "info", text: "Cliente confirmó ventana de entrega 17:00–19:00 en planta Apodaca." },
    ],
    s2: [
      { id: "e1", actor: "system", author: "Sistema", role: "Auto", time: "Ayer · 22:14", tone: "info",
        text: "Naviera confirmó descarga programada 06:30 Manzanillo." },
    ],
    s3: [
      { id: "e1", actor: "system", author: "Sistema", role: "Auto", time: "07:30", tone: "warning",
        text: "Demora de 2h reportada por bloqueo en la autopista 150D km 247." },
      { id: "e2", actor: "human", author: "L. Garza", role: "Soporte cliente", time: "07:45", tone: "warning",
        text: "Heineken MX notificada vía email + WhatsApp. Reprogramación tentativa 16:30." },
    ],
    s4: [
      { id: "e1", actor: "system", author: "Sistema", role: "Aduana", time: "Mié · 14:08", tone: "danger",
        text: "Pedimento marcado en revisión. Se solicita certificado de origen y carta porte." },
    ],
    s5: [
      { id: "e1", actor: "system", author: "Sistema", role: "Auto", time: "06:00", tone: "info",
        text: "Booking confirmado MSC – salida vie 14:00 LZC." },
    ],
  };

  const [activeId, setActiveId] = React.useState("s1");
  const [section, setSection] = React.useState("embarques");
  const [eventsById, setEventsById] = React.useState(seedEvents);

  const activeShipment = initialShipments.find((s) => s.id === activeId);
  const activeEvents = eventsById[activeId] || [];

  const onSubmitNote = (text) => {
    const stamp = new Date().toLocaleTimeString("es-MX", { hour: "2-digit", minute: "2-digit" });
    const next = {
      id: "n" + Date.now(),
      actor: "human",
      author: "Carla T.",
      role: "Dispatch · Lázaro Cárdenas",
      time: stamp,
      tone: "info",
      text,
    };
    setEventsById((prev) => ({ ...prev, [activeId]: [...(prev[activeId] || []), next] }));
  };

  return (
    <div className="tm-shell" data-theme="dark">
      <Sidebar activeSection={section} onNavigate={setSection} />
      <ShipmentsList shipments={initialShipments} activeId={activeId} onSelect={setActiveId} />
      <ShipmentDetail shipment={activeShipment} events={activeEvents} onSubmitNote={onSubmitNote} />
    </div>
  );
};
window.App = App;
globalThis.App = App;