/* LandIntelligence loader — "Parcel fit": footprint blocks slide into a dashed
   lot boundary, hold, fade, repeat (3.4s loop). Browser-global port of the brand
   component (LandIntelligenceLoader.jsx) for the no-build stack: no import/export,
   exposed as window.LILoader. Keyframes self-inject once under
   <style id="li-loader-keyframes">; prefers-reduced-motion renders the blocks static.

   Usage (any page that loads this file before its consumer):
     const { ParcelFitLoader } = window.LILoader;
     <ParcelFitLoader variant="fullscreen" label="Optymalizowanie zabudowy…" />
     <ParcelFitLoader variant="inline" label="Wczytywanie danych działki…" />
     <ParcelFitLoader variant="button" />   // inside a disabled button

   Rules: use for any async state expected to take >300ms (the wrapper fades in
   after 250ms so quick responses never flash it). Labels: sentence case,
   present-progressive, "…" character. Don't restyle per-page — colors come from
   LILoader.COLORS; custom sizes via the ParcelFitLot primitive (w/h props). */

(function () {
  const { useEffect } = React;

  const COLORS = {
    deep: "#14352A",      // darkest green (text, buttons)
    panel: "#12241D",     // full-screen backdrop
    green: "#2E7D5B",
    greenLight: "#3E9A72",
    terracotta: "#C96F4A",
    cream: "#F5F1E8",
  };

  // Blocks slide in from outside the lot and settle at rest — NO overshoot past
  // their resting position. An overshoot momentarily closes the gaps between
  // blocks (fine on the 132px fullscreen lot with its ~11px gaps, but on the
  // small inline/button lots the gap ≈ the overshoot, so adjacent blocks visibly
  // collide). A clean decelerated slide (ease) keeps them spaced at every scale.
  const KEYFRAMES = `
@keyframes li-fit-l {
  0% { opacity: 0; transform: translateX(-52px); }
  14% { opacity: 1; transform: translateX(0); }
  82% { opacity: 1; transform: translateX(0); }
  92%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes li-fit-t {
  0% { opacity: 0; transform: translateY(-46px); }
  14% { opacity: 1; transform: translateY(0); }
  82% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes li-fit-b {
  0% { opacity: 0; transform: translateY(46px); }
  14% { opacity: 1; transform: translateY(0); }
  82% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes li-fit-r {
  0% { opacity: 0; transform: translateX(52px); }
  14% { opacity: 1; transform: translateX(0); }
  82% { opacity: 1; transform: translateX(0); }
  92%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes li-fade-in {
  0%, 100% { opacity: 1; }
}
.li-loader { opacity: 0; animation: li-fade-in 0.01s linear 0.25s forwards; }
@media (prefers-reduced-motion: reduce) {
  .li-loader { opacity: 1; animation: none; }
  .li-loader [data-li-block] { animation: none !important; opacity: 1 !important; transform: none !important; }
}`;

  function useLoaderStyles() {
    useEffect(() => {
      if (document.getElementById("li-loader-keyframes")) return;
      const el = document.createElement("style");
      el.id = "li-loader-keyframes";
      el.textContent = KEYFRAMES;
      document.head.appendChild(el);
    }, []);
  }

  const DURATION = "3.4s";

  // One block; dir = l | t | b | r, delay in seconds.
  function Block({ dir, delay, style }) {
    return (
      <div
        data-li-block=""
        style={Object.assign({
          position: "absolute",
          borderRadius: 3,
          animation: `li-fit-${dir} ${DURATION} ease infinite`,
          animationDelay: `${delay}s`,
          animationFillMode: "backwards",
        }, style)}
      />
    );
  }

  // The lot with 4 blocks. `w`/`h` set overall size; everything scales.
  function ParcelFitLot({ w = 132, h = 100, borderColor = "rgba(245,241,232,0.45)", colors = COLORS }) {
    useLoaderStyles();
    const u = w / 132; // scale unit
    const s = (n) => Math.max(1, Math.round(n * u));
    return (
      <div
        style={{
          position: "relative",
          width: w,
          height: h,
          border: `${Math.max(1.5, 2 * u)}px dashed ${borderColor}`,
          borderRadius: s(8),
          boxSizing: "content-box",
        }}
      >
        <Block dir="l" delay={0}   style={{ top: s(6), left: s(6),  width: s(48), height: s(38), background: colors.greenLight }} />
        <Block dir="t" delay={0.3} style={{ top: s(6), right: s(6), width: s(61), height: s(38), background: colors.cream }} />
        <Block dir="b" delay={0.6} style={{ bottom: s(6), left: s(6),  width: s(72), height: s(39), background: colors.terracotta }} />
        <Block dir="r" delay={0.9} style={{ bottom: s(6), right: s(6), width: s(37), height: s(39), background: colors.green }} />
      </div>
    );
  }

  function ParcelFitLoader({ variant = "inline", label, colors = COLORS }) {
    useLoaderStyles();

    if (variant === "fullscreen") {
      return (
        <div
          className="li-loader"
          style={{
            position: "fixed", inset: 0, zIndex: 9999,
            background: colors.panel,
            display: "flex", flexDirection: "column",
            alignItems: "center", justifyContent: "center", gap: 26,
          }}
        >
          <ParcelFitLot w={132} h={100} colors={colors} />
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
            <div style={{ fontSize: 20, fontWeight: 700, color: colors.cream, letterSpacing: "0.02em" }}>
              LandIntelligence
            </div>
            {label && (
              <div style={{ fontSize: 13, color: "rgba(245,241,232,0.6)" }}>{label}</div>
            )}
          </div>
        </div>
      );
    }

    if (variant === "button") {
      // Micro version for inside buttons — light-surface palette (TEREN buttons are light).
      return (
        <div className="li-loader" style={{ position: "relative", width: 20, height: 15, border: "1.5px dashed #B7B0A0", borderRadius: 3, flex: "none", display: "inline-block", verticalAlign: "-2px" }}>
          <Block dir="l" delay={0}   style={{ top: 2, left: 2,  width: 7,  height: 4, background: colors.green, borderRadius: 1 }} />
          <Block dir="t" delay={0.3} style={{ top: 2, right: 2, width: 5,  height: 4, background: colors.deep, borderRadius: 1 }} />
          <Block dir="b" delay={0.6} style={{ bottom: 2, left: 2, width: 10, height: 4, background: colors.terracotta, borderRadius: 1 }} />
        </div>
      );
    }

    // inline (cards, panels, tables) — even ~6px gaps between blocks and rows so
    // the footprints read as spaced (roads), never cramped or touching.
    return (
      <div className="li-loader" style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <div style={{ position: "relative", width: 46, height: 34, border: "1.5px dashed #B7B0A0", borderRadius: 5, flex: "none" }}>
          <Block dir="l" delay={0}   style={{ top: 4, left: 4,  width: 14, height: 10, background: colors.green, borderRadius: 2 }} />
          <Block dir="t" delay={0.3} style={{ top: 4, right: 4, width: 18, height: 10, background: colors.deep, borderRadius: 2 }} />
          <Block dir="b" delay={0.6} style={{ bottom: 4, left: 4, width: 22, height: 10, background: colors.terracotta, borderRadius: 2 }} />
          <Block dir="r" delay={0.9} style={{ bottom: 4, right: 4, width: 10, height: 10, background: colors.greenLight, borderRadius: 2 }} />
        </div>
        {label && <div style={{ fontSize: 12, color: "#8A8578" }}>{label}</div>}
      </div>
    );
  }

  window.LILoader = { ParcelFitLoader, ParcelFitLot, COLORS };
})();