// Terminal Atlas index — browse all facilities. The entry point to the atlas.

const { useState: useStateTL, useEffect: useEffectTL, useMemo: useMemoTL } = React;

function TerminalsListPage({ onNav }) {
  const [terminals, setTerminals] = useStateTL([]);
  const [parents, setParents] = useStateTL({});
  const [statuses, setStatuses] = useStateTL({});
  const [waits, setWaits] = useStateTL({});
  const [cities, setCities] = useStateTL({});
  const [filter, setFilter] = useStateTL("");
  const [loading, setLoading] = useStateTL(true);

  useEffectTL(() => {
    if (!window.SI_DB) { setLoading(false); return; }
    (async () => {
      const today = new Date().toISOString().slice(0, 10);
      const [ts, parentRows, statusRows, waitRows, cityRows] = await Promise.all([
        window.SI_DB.raw.select(
          "entities",
          "select=id,slug,name,parent_id,primary_city_id,address&type=eq.facility_xdock&order=name.asc"
        ),
        window.SI_DB.raw.select("entities", "select=id,name,slug&type=eq.carrier"),
        window.SI_DB.raw.select(
          "facility_status_log",
          `select=entity_id,status,end_date,notes&or=(end_date.is.null,end_date.gte.${today})`
        ),
        window.SI_DB.raw.select(
          "wait_time_reports",
          "select=facility_id,minutes,created_at&order=created_at.desc&limit=200"
        ),
        window.SI_DB.cities(),
      ]);

      setTerminals(ts || []);
      const pm = {};
      (parentRows || []).forEach((p) => { pm[p.id] = p; });
      setParents(pm);

      const sm = {};
      (statusRows || []).forEach((s) => {
        if (!sm[s.entity_id] && s.status !== "open") sm[s.entity_id] = s;
      });
      setStatuses(sm);

      const wm = {};
      (waitRows || []).forEach((w) => {
        if (!wm[w.facility_id]) wm[w.facility_id] = [];
        wm[w.facility_id].push(w);
      });
      const avg = {};
      Object.keys(wm).forEach((fid) => {
        const list = wm[fid].slice(0, 5);
        avg[fid] = Math.round(list.reduce((a, b) => a + b.minutes, 0) / list.length);
      });
      setWaits(avg);

      const cm = {};
      (cityRows || []).forEach((c) => { cm[c.id] = c; });
      setCities(cm);

      setLoading(false);
    })();
  }, []);

  const grouped = useMemoTL(() => {
    const f = filter.trim().toLowerCase();
    const visible = !f ? terminals : terminals.filter((t) => {
      const parent = parents[t.parent_id];
      return (
        t.name.toLowerCase().includes(f) ||
        (t.address || "").toLowerCase().includes(f) ||
        (parent && parent.name.toLowerCase().includes(f))
      );
    });
    const byCity = {};
    visible.forEach((t) => {
      const cid = t.primary_city_id || "_other";
      if (!byCity[cid]) byCity[cid] = [];
      byCity[cid].push(t);
    });
    return byCity;
  }, [terminals, parents, filter]);

  if (loading) {
    return (
      <div style={{ padding: 80, textAlign: "center", color: "var(--ink-soft)" }}>
        Loading terminals…
      </div>
    );
  }

  const cityOrder = ["los-angeles", "new-york", "chicago", "atlanta", "denver", "_other"];

  return (
    <div className="terminals-list-page">
      <style>{`
        .tl-hero { padding: 56px 24px 24px; max-width: 1100px; margin: 0 auto; }
        .tl-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
          text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
        .tl-title { font-family: var(--font-serif); font-size: 48px; line-height: 1.05;
          letter-spacing: -0.02em; margin: 0 0 12px; }
        .tl-sub { color: var(--ink-soft); font-size: 17px; max-width: 720px; line-height: 1.5; }
        .tl-search-wrap { max-width: 1100px; margin: 24px auto; padding: 0 24px; }
        .tl-search { width: 100%; padding: 14px 18px; font-size: 15px; border: 1px solid var(--rule);
          border-radius: 6px; font-family: inherit; box-sizing: border-box; }
        .tl-grid { max-width: 1100px; margin: 16px auto 80px; padding: 0 24px; }
        .tl-city { margin-top: 36px; }
        .tl-city-header { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
          text-transform: uppercase; color: var(--ink-soft); padding-bottom: 10px;
          border-bottom: 1px solid var(--rule); margin-bottom: 16px; }
        .tl-row { display: grid; grid-template-columns: 2fr 1.2fr 1fr 100px;
          gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule);
          align-items: center; cursor: pointer; }
        .tl-row:hover { background: oklch(0.97 0.01 250); }
        @media (max-width: 700px) { .tl-row { grid-template-columns: 1fr; gap: 4px; } }
        .tl-name { font-family: var(--font-serif); font-size: 19px; letter-spacing: -0.01em; }
        .tl-parent { color: var(--ink-soft); font-size: 12px; font-family: var(--font-mono);
          letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }
        .tl-addr { color: var(--ink-soft); font-size: 13px; }
        .tl-status { font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.1em;
          text-transform: uppercase; }
        .tl-status.remodel { color: oklch(0.55 0.16 50); }
        .tl-status.closed { color: oklch(0.55 0.18 25); }
        .tl-status.open { color: var(--ink-soft); }
        .tl-wait { text-align: right; font-family: var(--font-serif); font-size: 18px; }
        .tl-wait-unit { color: var(--ink-soft); font-size: 11px; font-family: var(--font-mono);
          letter-spacing: 0.1em; text-transform: uppercase; margin-left: 4px; }
        .tl-empty { text-align: center; padding: 80px 24px; color: var(--ink-soft); }
      `}</style>

      <div className="tl-hero">
        <div className="tl-eyebrow">Terminal Atlas · {terminals.length} facilities</div>
        <h1 className="tl-title">Every terminal, every tip, every wait.</h1>
        <p className="tl-sub">
          The driver-facing directory of carrier hubs, depots, ports, and warehouses across
          the country. Gate access, hours, dock tips, and live wait times — submitted by
          drivers and shippers on the ground.
        </p>
      </div>

      <div className="tl-search-wrap">
        <input
          className="tl-search"
          placeholder="Search by terminal, carrier, or city…"
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
        />
      </div>

      <div className="tl-grid">
        {Object.keys(grouped).length === 0 && (
          <div className="tl-empty">No terminals match "{filter}".</div>
        )}
        {cityOrder.map((cid) => {
          const list = grouped[cid];
          if (!list || list.length === 0) return null;
          const cityName = cid === "_other"
            ? "Other Locations"
            : (cities[cid] ? `${cities[cid].name}, ${cities[cid].state}` : cid);

          return (
            <section className="tl-city" key={cid}>
              <div className="tl-city-header">{cityName} · {list.length}</div>
              {list.map((t) => {
                const parent = parents[t.parent_id];
                const status = statuses[t.id];
                const wait = waits[t.id];
                return (
                  <div
                    className="tl-row"
                    key={t.id}
                    onClick={() => { window.location.hash = `#/terminal/${t.slug}`; }}
                  >
                    <div>
                      <div className="tl-name">{t.name}</div>
                      <div className="tl-parent">{parent ? parent.name : "Independent"}</div>
                    </div>
                    <div className="tl-addr">{t.address || "—"}</div>
                    <div className={`tl-status ${status ? status.status : "open"}`}>
                      {status ? `🚧 ${status.status}` : "Open"}
                    </div>
                    <div className="tl-wait">
                      {wait ? <>{wait}<span className="tl-wait-unit">min avg</span></> : <span style={{ color: "var(--ink-soft)", fontSize: 12 }}>—</span>}
                    </div>
                  </div>
                );
              })}
            </section>
          );
        })}
      </div>
    </div>
  );
}

window.TerminalsListPage = TerminalsListPage;