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

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

// =============================================================
// TERMINAL RADAR — focal hero for /#/terminals. Pulses each
// terminal as a colored dot + status ring (open / restricted /
// closed). Same dark aesthetic as the other radars but with
// LARGER pin treatment because the data set is small (10 today,
// growing). Click any pin → opens the terminal detail page.
// =============================================================

function TerminalRadar({ user, onNav, terminals, parents, statuses, waits }) {
  const mapRef = useRefTL(null);
  const containerRef = useRefTL(null);
  const layersRef = useRefTL(null);

  const isAuthed = !!user && !!user.email;

  useEffectTL(() => {
    if (!containerRef.current || !window.L || mapRef.current) return;
    const map = window.L.map(containerRef.current, {
      zoomControl: false, scrollWheelZoom: false, attributionControl: true,
      fadeAnimation: false, zoomAnimation: false, markerZoomAnimation: false,
      worldCopyJump: false, minZoom: 3, maxZoom: 12,
      maxBounds: [[10, -175], [72, -50]], maxBoundsViscosity: 1.0,
    }).setView([39.5, -98.5], 4);
    window.L.tileLayer(
      "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
      { attribution: "© OpenStreetMap · © CARTO", subdomains: "abcd",
        maxZoom: 12, noWrap: true, bounds: [[-90,-180],[90,180]] }
    ).addTo(map);
    window.L.control.zoom({ position: "bottomright" }).addTo(map);
    mapRef.current = map;
    setTimeout(() => map.invalidateSize(), 80);
    return () => { map.remove(); mapRef.current = null; };
  }, []);

  useEffectTL(() => {
    const map = mapRef.current;
    if (!map || !window.L) return;
    if (layersRef.current && map.hasLayer(layersRef.current)) map.removeLayer(layersRef.current);

    const positioned = (terminals || []).filter(t => t.lat != null && t.lng != null);
    const lg = window.L.layerGroup(positioned.map(t => {
      const parent = parents[t.parent_id];
      const status = statuses[t.id];
      const statusColor = status
        ? (status.status === "closed" ? "#FF4D6A" : "#FFA94D")
        : "#5BA9DE";
      const statusLabel = status ? status.status.toUpperCase() : "OPEN";
      const wait = waits[t.id];
      const html = `
        <div class="tr-pin">
          <span class="tr-ring" style="border-color:${statusColor}"></span>
          <span class="tr-dot" style="background:${statusColor}"></span>
        </div>`;
      const icon = window.L.divIcon({
        className: "tr-icon", html,
        iconSize: [22, 22], iconAnchor: [11, 11],
      });
      const m = window.L.marker([t.lat, t.lng], { icon, riseOnHover: true });
      const popup = isAuthed ? `
        <div class="tr-pop">
          <div class="tr-pop-eye" style="color:${statusColor}">${statusLabel} · ${parent ? parent.name : ""}</div>
          <div class="tr-pop-num">${t.name}</div>
          <div class="tr-pop-meta">${t.address || ""}</div>
          ${wait != null ? `<div class="tr-pop-meta"><strong>${wait} min</strong> avg dock wait (last 5 reports)</div>` : ""}
          <a class="tr-pop-link" href="#/terminal/${t.slug}"
             onclick="window.location.hash='#/terminal/${t.slug}';return false">
             Open terminal page →
          </a>
        </div>` : `
        <div class="tr-pop">
          <div class="tr-pop-eye" style="color:${statusColor}">${statusLabel}</div>
          <div class="tr-pop-num">${t.name}</div>
          <div class="tr-pop-meta tr-pop-cta">Sign in for status notes · wait times · driver intel →</div>
        </div>`;
      m.bindPopup(popup);
      return m;
    }));
    lg.addTo(map);
    layersRef.current = lg;
  }, [terminals, parents, statuses, waits, isAuthed]);

  const positionedCount = (terminals || []).filter(t => t.lat != null && t.lng != null).length;
  const closedCount = (terminals || []).filter(t => statuses[t.id]?.status === "closed").length;
  const restrictedCount = (terminals || []).filter(t => statuses[t.id] && statuses[t.id].status !== "closed").length;

  return (
    <section className="tr-radar">
      <style>{`
        .tr-radar { position: relative; background: #0a0e15; overflow: hidden;
          border-bottom: 1px solid #1f2937; }
        .tr-radar-map { width: 100%; height: 64vh; min-height: 460px; max-height: 700px;
          background: #0a0e15; }
        @media (max-width: 760px) { .tr-radar-map { height: 56vh; min-height: 400px; } }
        .tr-radar-map::after {
          content: ""; position: absolute; inset: 0; pointer-events: none;
          background: radial-gradient(ellipse at center, transparent 55%, rgba(10,14,21,0.55) 100%);
          z-index: 401;
        }
        .tr-icon { background: transparent !important; border: 0 !important; }
        .tr-pin { position: relative; width: 22px; height: 22px; }
        .tr-dot {
          position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
          width: 10px; height: 10px; border-radius: 50%;
          border: 1.5px solid rgba(255,255,255,0.7);
          box-shadow: 0 0 6px rgba(0,0,0,0.6);
        }
        .tr-ring {
          position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
          width: 22px; height: 22px; border-radius: 50%;
          border: 2px solid; opacity: 0.55;
          animation: tr-pulse 2.4s ease-out infinite;
        }
        @keyframes tr-pulse {
          0% { transform: translate(-50%, -50%) scale(1); opacity: 0.55; }
          80%, 100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
        }

        .tr-title { position: absolute; top: 18px; left: 22px; z-index: 500;
          color: #fff; pointer-events: none; max-width: 600px; }
        .tr-title-eye { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
          text-transform: uppercase; color: #5BA9DE;
          display: inline-flex; align-items: center; gap: 8px;
          padding: 6px 10px; background: rgba(0,0,0,0.5); border-radius: 4px;
          backdrop-filter: blur(6px); }
        .tr-title-eye .dot { display: inline-block; width: 8px; height: 8px;
          border-radius: 50%; background: #5BA9DE;
          animation: tr-livedot 1.6s ease-in-out infinite; }
        @keyframes tr-livedot {
          0%, 100% { box-shadow: 0 0 0 0 rgba(91,169,222,0.6); }
          70% { box-shadow: 0 0 0 8px rgba(91,169,222,0); }
        }
        .tr-title-h { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 44px);
          line-height: 1.05; letter-spacing: -0.025em; margin: 12px 0 6px;
          text-shadow: 0 2px 16px rgba(0,0,0,0.6); }
        .tr-title-h em { font-style: italic; color: #5BA9DE; }
        .tr-title-sub { font-size: 14px; color: #cbd5e1; line-height: 1.45;
          text-shadow: 0 1px 8px rgba(0,0,0,0.6); max-width: 520px; }

        .tr-cta-overlay { position: absolute; top: 18px; right: 22px; z-index: 500;
          background: rgba(10,14,21,0.85); backdrop-filter: blur(10px);
          border: 1px solid rgba(91,169,222,0.35); border-radius: 8px;
          padding: 14px 18px; max-width: 320px; color: #f1f5f9;
          box-shadow: 0 12px 36px rgba(0,0,0,0.4); }
        .tr-cta-eye { font-family: var(--font-mono); font-size: 10px;
          letter-spacing: 0.18em; text-transform: uppercase; color: #5BA9DE; margin-bottom: 6px; }
        .tr-cta-h { font-family: var(--font-serif); font-size: 17px;
          letter-spacing: -0.015em; margin: 0 0 6px; }
        .tr-cta-sub { font-size: 12px; color: #94a3b8; line-height: 1.45; margin-bottom: 10px; }
        .tr-cta-btn { display: inline-flex; align-items: center; gap: 6px;
          background: #5BA9DE; color: #0a0e15; border: 0;
          padding: 8px 14px; border-radius: 5px; font-family: inherit;
          font-weight: 600; font-size: 13px; cursor: pointer; }

        .leaflet-popup-content-wrapper { background: rgba(10,14,21,0.95) !important; color: #f1f5f9;
          border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; }
        .leaflet-popup-tip { background: rgba(10,14,21,0.95) !important; }
        .leaflet-popup-close-button { color: #94a3b8 !important; }
        .leaflet-control-zoom a { background: rgba(10,14,21,0.85) !important; color: #cbd5e1 !important;
          border: 1px solid rgba(255,255,255,0.08) !important; }
        .tr-pop { font-family: var(--font-sans, system-ui); min-width: 200px; padding: 4px 2px; }
        .tr-pop-eye { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
          text-transform: uppercase; margin-bottom: 4px; }
        .tr-pop-num { font-family: var(--font-serif); font-size: 16px; letter-spacing: -0.01em; color: #f1f5f9; }
        .tr-pop-meta { font-size: 11px; color: #94a3b8; margin-top: 4px; line-height: 1.45; }
        .tr-pop-cta { color: #5BA9DE; font-weight: 500; }
        .tr-pop-link { display: inline-block; margin-top: 8px; font-family: var(--font-mono);
          font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #5BA9DE;
          text-decoration: none; border-bottom: 1px dotted #5BA9DE; }
      `}</style>

      <div ref={containerRef} className="tr-radar-map" />

      <div className="tr-title">
        <span className="tr-title-eye">
          <span className="dot" />
          {positionedCount} terminals tracked
          {closedCount > 0 && ` · ${closedCount} closed`}
          {restrictedCount > 0 && ` · ${restrictedCount} flagged`}
        </span>
        <h1 className="tr-title-h">
          The Terminal <em>Atlas.</em>
        </h1>
        <p className="tr-title-sub">
          Every cross-dock and yard we track, with public status notes (closed for remodel,
          re-routing through Y) and driver-reported wait times. Click any pin for the full
          facility page.
        </p>
      </div>

      {!isAuthed && (
        <div className="tr-cta-overlay">
          <div className="tr-cta-eye"><span style={{display:"inline-block",width:6,height:6,borderRadius:"50%",background:"#5BA9DE",marginRight:6,verticalAlign:"middle"}}/>Anonymous view</div>
          <h3 className="tr-cta-h">Driver-reported wait times.</h3>
          <p className="tr-cta-sub">
            Sign in for the status notes, average dock wait, and driver intel on each terminal.
            Free magic-link.
          </p>
          <button className="tr-cta-btn" onClick={() => onNav("signin")}>Sign in →</button>
        </div>
      )}
    </section>
  );
}

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);
  const [authedUser, setAuthedUser] = useStateTL(null);
  useEffectTL(() => {
    let alive = true;
    if (window.SI_DB && window.SI_DB.auth && window.SI_DB.auth.getCurrentUser) {
      window.SI_DB.auth.getCurrentUser().then(u => { if (alive) setAuthedUser(u); }).catch(() => {});
    }
    return () => { alive = false; };
  }, []);

  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([
        // Bump page size — OSM ingest can land 2K-3K terminals across major
        // LTL networks. PostgREST default is 1000 and would silently clip.
        window.SI_DB.raw.select(
          "entities",
          "select=id,slug,name,parent_id,primary_city_id,address,lat,lng&type=eq.facility_xdock&order=name.asc&limit=10000"
        ),
        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">
      {/* TERMINAL RADAR — focal hero. Pulses every cross-dock we track,
          color-coded by current status, with driver-reported wait times. */}
      <TerminalRadar
        user={authedUser}
        onNav={onNav}
        terminals={terminals}
        parents={parents}
        statuses={statuses}
        waits={waits}
      />
      <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;