/* Verzendingen — alle verzonden bestellingen + bezorgstatus via track & trace (PostNL/DHL) */

function VerzendStatusBadge({ s, stuck }) {
  const map = {
    delivered: { txt: "Bezorgd", bg: "rgba(31,138,91,.12)", fg: "#1F8A5B" },
    transit:   { txt: "Onderweg", bg: "rgba(42,111,219,.12)", fg: "#2A6FDB" },
    announced: { txt: "Aangemeld", bg: "rgba(120,120,130,.14)", fg: "#5c5f6b" },
    unknown:   { txt: "Nog niet gecheckt", bg: "rgba(120,120,130,.14)", fg: "#5c5f6b" },
  };
  let m = map[s] || map.unknown;
  if (stuck) m = { txt: m.txt + " ⚠", bg: "rgba(214,69,60,.12)", fg: "#D6453C" };
  return (
    <span style={{ display: "inline-block", padding: "3px 10px", borderRadius: "999px", fontSize: "12px", fontWeight: 700, whiteSpace: "nowrap", background: m.bg, color: m.fg }}>{m.txt}</span>
  );
}

function Verzendingen({ db, onNav }) {
  const [filter, setFilter] = React.useState("alles");
  const [zoek, setZoek] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [checking, setChecking] = React.useState({});
  const data = db.shipments();
  const list = (data && data.shipments) || [];
  const now = Date.now();
  const daysUnderway = (s) => Math.max(0, Math.floor((now - new Date(s.date).getTime()) / 86400000));
  const isStuck = (s) => (s.status === "transit" || s.status === "announced") && daysUnderway(s) >= 4;

  const nOnderweg = list.filter(s => s.status === "transit" || s.status === "announced").length;
  const nBezorgd = list.filter(s => s.status === "delivered").length;
  const nStuck = list.filter(isStuck).length;
  const nPending = list.filter(s => s.status === "unknown").length;

  const q = zoek.trim().toLowerCase();
  const matchZoek = (s) => !q ||
    String(s.orderId || "").toLowerCase().includes(q) ||
    String(s.name || "").toLowerCase().includes(q) ||
    String(s.city || "").toLowerCase().includes(q) ||
    String(s.code || "").toLowerCase().includes(q) ||
    String(s.channel || "").toLowerCase().includes(q) ||
    (s.items || []).some(it => String(it.sku || "").toLowerCase().includes(q));

  const shown = list.filter(s => {
    if (!matchZoek(s)) return false;
    if (filter === "onderweg") return s.status === "transit" || s.status === "announced";
    if (filter === "bezorgd") return s.status === "delivered";
    if (filter === "aandacht") return isStuck(s);
    return true;
  });

  async function refresh() {
    setBusy(true);
    try { await db.refreshShipments(); } finally { setBusy(false); }
  }

  const fmtD = (d) => { try { const x = new Date(d); return x.toLocaleDateString("nl-NL", { day: "numeric", month: "short" }); } catch (e) { return ""; } };
  const chips = [
    { id: "alles", label: "Alles (" + list.length + ")" },
    { id: "onderweg", label: "Onderweg (" + nOnderweg + ")" },
    { id: "bezorgd", label: "Bezorgd (" + nBezorgd + ")" },
    { id: "aandacht", label: "Aandacht (" + nStuck + ")" },
  ];

  return (
    <div>
      <div className="ph-row">
        <div>
          <h1>Verzendingen</h1>
          <div className="ph-sub">Alle verzonden bestellingen (laatste 3 weken) met live bezorgstatus via track &amp; trace — bol, Maxeda en eigen webshop.</div>
        </div>
      </div>

      {!list.length ? (
        <Card>
          <CardHead title="Nog geen verzendgegevens" icon="truck" />
          <p style={{ color: "var(--text-dim)", margin: "6px 0 0", fontSize: "14px" }}>
            De datakraan heeft nog geen verzendingen doorgegeven. Controleer of de nieuwste worker-versie is gedeployed en ververs daarna hieronder.
          </p>
          <button className="btn" style={{ marginTop: "12px" }} onClick={refresh} disabled={busy}>{busy ? "Bezig..." : "Nu ophalen"}</button>
        </Card>
      ) : (
        <Card>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: "10px", marginBottom: "12px" }}>
            <div style={{ display: "flex", gap: "6px", flexWrap: "wrap", alignItems: "center" }}>
              <input type="search" value={zoek} onChange={e => setZoek(e.target.value)} placeholder="Zoek order, product, plaats..."
                style={{ border: "1px solid var(--line)", borderRadius: "999px", padding: "6px 14px", fontSize: "13px", width: "210px", background: "var(--bg)", color: "var(--text)", outline: "none" }} />
              {chips.map(c => (
                <button key={c.id} onClick={() => setFilter(c.id)}
                  style={{ border: "1px solid " + (filter === c.id ? "var(--accent)" : "var(--line)"), background: filter === c.id ? "var(--accent-soft)" : "transparent", color: filter === c.id ? "var(--accent)" : "var(--text-dim)", borderRadius: "999px", padding: "5px 12px", fontSize: "13px", fontWeight: 600, cursor: "pointer" }}>
                  {c.label}
                </button>
              ))}
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
              <span style={{ fontSize: "12px", color: "var(--text-dim)" }}>
                {db.shipmentsSyncedAt() ? "Gecheckt: " + new Date(db.shipmentsSyncedAt()).toLocaleTimeString("nl-NL", { hour: "2-digit", minute: "2-digit" }) : ""}
              </span>
              <button className="btn" onClick={refresh} disabled={busy}>{busy ? "Bezig..." : "Ververs"}</button>
            </div>
          </div>

          <div style={{ overflowX: "auto" }}>
            <table className="tbl">
              <thead><tr><th>Status</th><th>Verzonden</th><th>Order</th><th>Producten</th><th>Bestemming</th><th></th></tr></thead>
              <tbody>
                {shown.map(s => {
                  const stuck = isStuck(s);
                  return (
                    <tr key={s.code}>
                      <td>
                        <VerzendStatusBadge s={s.status} stuck={stuck} />
                        {s.status === "delivered" && s.deliveredAt ? (
                          <div style={{ fontSize: "11px", color: "var(--text-dim)", marginTop: "3px" }}>{fmtD(s.deliveredAt)}</div>
                        ) : stuck ? (
                          <div style={{ fontSize: "11px", color: "#D6453C", marginTop: "3px", fontWeight: 600 }}>{daysUnderway(s)} dgn onderweg</div>
                        ) : s.status !== "unknown" && s.statusText ? (
                          <div style={{ fontSize: "11px", color: "var(--text-dim)", marginTop: "3px", maxWidth: "180px" }}>{s.statusText}</div>
                        ) : null}
                        {s.status !== "delivered" ? (
                          <button
                            onClick={async () => { setChecking(c => Object.assign({}, c, { [s.code]: true })); await db.checkShipment(s.code, s.country, s.zip, s.carrier); setChecking(c => Object.assign({}, c, { [s.code]: false })); }}
                            disabled={!!checking[s.code]}
                            style={{ display: "block", background: "none", border: "none", padding: 0, marginTop: "4px", fontSize: "11px", fontWeight: 700, color: "var(--accent)", cursor: "pointer" }}>
                            {checking[s.code] ? "Checken..." : "Check nu"}
                          </button>
                        ) : null}
                      </td>
                      <td style={{ whiteSpace: "nowrap" }}>{fmtD(s.date)}</td>
                      <td>
                        <div style={{ fontWeight: 600, fontSize: "13px" }}>{s.orderId}</div>
                        <div style={{ fontSize: "11px", color: "var(--text-dim)" }}>{s.channel}{s.country === "BE" ? " · BE" : ""}</div>
                      </td>
                      <td style={{ fontSize: "13px" }}>
                        {(s.items || []).map((it, i) => (
                          <span key={i} style={{ display: "inline-block", background: "var(--bg)", border: "1px solid var(--line)", borderRadius: "6px", padding: "1px 7px", fontSize: "12px", fontWeight: 600, marginRight: "4px", marginBottom: "2px" }}>
                            {(it.qty > 1 ? it.qty + "× " : "") + (it.sku || "?")}
                          </span>
                        ))}
                      </td>
                      <td style={{ fontSize: "13px" }}>
                        {s.city}
                        <div style={{ fontSize: "11px", color: "var(--text-dim)" }}>{s.name}</div>
                      </td>
                      <td style={{ whiteSpace: "nowrap", textAlign: "right" }}>
                        {s.url || s.code ? (
                          <a href={s.url || ("https://jouw.postnl.nl/track-and-trace/" + s.code + "-" + s.country + "-" + s.zip)} target="_blank" rel="noopener noreferrer"
                            style={{ fontSize: "12px", fontWeight: 700 }}>T&amp;T ↗</a>
                        ) : null}
                      </td>
                    </tr>
                  );
                })}
                {!shown.length ? (
                  <tr><td colSpan={6} style={{ color: "var(--text-dim)", fontSize: "13px", padding: "18px 8px" }}>Geen verzendingen in deze selectie.</td></tr>
                ) : null}
              </tbody>
            </table>
          </div>
          <p style={{ fontSize: "12px", color: "var(--text-dim)", margin: "10px 0 0" }}>
            {nPending > 0 ? nPending + " pakketten wachten nog op hun eerste check bij de vervoerder — dit loopt automatisch bij (±30 per verversing). " : ""}
            Bezorgstatus komt rechtstreeks van PostNL/DHL en wordt elke ~45 min per pakket ververst. "Aangemeld" = label gemaakt, nog niet gescand door de vervoerder. Pakketten die na 4 dagen nog niet bezorgd zijn krijgen een melding.
          </p>
        </Card>
      )}
    </div>
  );
}

Object.assign(window, { Verzendingen });