/* global React */
// NUON Console mock — embedded preview of the operations console

const { useState: useStateC, useEffect: useEffectC } = React;

function ConsolaMock({ copy }) {
  // Animated line chart
  const points24 = [
    180, 165, 150, 145, 140, 138, 142, 165, 200, 245, 285, 312,
    335, 348, 352, 345, 332, 318, 295, 268, 240, 218, 200, 188,
  ];
  const dispatch24 = [
    160, 150, 142, 138, 135, 132, 138, 158, 195, 232, 268, 295,
    315, 322, 328, 320, 308, 298, 278, 252, 228, 205, 188, 175,
  ];
  const max = 360;

  const pathFor = (arr) => {
    const w = 100;
    const step = w / (arr.length - 1);
    return arr.map((v, i) => `${i === 0 ? "M" : "L"} ${(i * step).toFixed(2)} ${(100 - (v / max) * 90).toFixed(2)}`).join(" ");
  };

  // Cycle progress
  const [progress, setProgress] = useStateC(38);
  useEffectC(() => {
    const id = setInterval(() => {
      setProgress((p) => (p >= 95 ? 38 : p + 1));
    }, 250);
    return () => clearInterval(id);
  }, []);

  // Live counter for cycle margin
  const [margin, setMargin] = useStateC(612);
  useEffectC(() => {
    const id = setInterval(() => {
      setMargin((m) => m + Math.floor(Math.random() * 5 - 1));
    }, 1400);
    return () => clearInterval(id);
  }, []);

  // Lucide icon glyph
  const Glyph = ({ name }) => {
    const paths = {
      "layout-grid": (
        <>
          <rect x="3" y="3" width="7" height="7" />
          <rect x="14" y="3" width="7" height="7" />
          <rect x="14" y="14" width="7" height="7" />
          <rect x="3" y="14" width="7" height="7" />
        </>
      ),
      zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />,
      activity: <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />,
      "bar-chart-3": (
        <>
          <path d="M3 3v18h18" />
          <path d="M7 16v-5" />
          <path d="M12 16V8" />
          <path d="M17 16v-3" />
        </>
      ),
      clock: (
        <>
          <circle cx="12" cy="12" r="10" />
          <polyline points="12 6 12 12 16 14" />
        </>
      ),
      bell: (
        <>
          <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
          <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
        </>
      ),
    };
    return (
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        {paths[name]}
      </svg>
    );
  };

  return (
    <div className="consola">
      <div className="consola__chrome">
        <div className="consola__dots">
          <span></span><span></span><span></span>
        </div>
        <div className="consola__url">
          <span className="u">https://</span>{copy.url_prefix}<span style={{ color: "rgba(255,255,255,.5)" }}>{copy.url_suffix}</span>
        </div>
        <div className="consola__status">
          <span className="dot"></span>{copy.status}
        </div>
      </div>

      <div className="consola__body">
        <div className="consola__sb">
          <img src={(window.NUON_ASSET_BASE || "") + "assets/nuon-wordmark.svg"} alt="NUON" />
          {copy.sb.map(([label, icon, active], i) => (
            <div className={`consola__sb-item ${active ? "is-active" : ""}`} key={i}>
              <Glyph name={icon} />
              <span>{label}</span>
            </div>
          ))}
        </div>

        <div className="consola__main">
          <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", gap: 16 }}>
            <h3 className="consola__title">
              {copy.console_title[0]}<span className="grad">{copy.console_title[1]}</span>
            </h3>
            <Clock className="" prefix="↻" />
          </div>

          <div className="consola__kpis">
            {copy.console_kpis.map(([label, num, unit, delta], i) => (
              <div className="consola__kpi" key={i}>
                <div className="consola__kpi-label">{label}</div>
                <div className="consola__kpi-num">
                  {i === 3 ? <LiveNum value={margin} prefix="+" /> : num}
                  <span className="u">{unit}</span>
                </div>
                <div className="consola__kpi-delta">{delta}</div>
              </div>
            ))}
          </div>

          <div className="consola__row">
            <div className="consola__panel">
              <div className="consola__panel-head">
                <span className="consola__panel-title">{copy.panel_title}</span>
                <span className="consola__panel-meta">{copy.panel_meta}</span>
              </div>
              <svg className="consola__chart" viewBox="0 0 100 100" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="cm-area" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#0096FF" stopOpacity="0.4" />
                    <stop offset="100%" stopColor="#0096FF" stopOpacity="0" />
                  </linearGradient>
                </defs>
                {/* grid */}
                {[20, 40, 60, 80].map((y) => (
                  <line key={y} x1="0" y1={y} x2="100" y2={y} stroke="rgba(122,177,255,0.12)" strokeWidth="0.3" />
                ))}
                {/* generation area */}
                <path d={`${pathFor(points24)} L 100 100 L 0 100 Z`} fill="url(#cm-area)" />
                {/* generation line */}
                <path d={pathFor(points24)} fill="none" stroke="#76D6FF" strokeWidth="0.8" />
                {/* dispatch line */}
                <path d={pathFor(dispatch24)} fill="none" stroke="#D883FF" strokeWidth="0.7" strokeDasharray="1.5 1" />
                {/* cursor */}
                <line x1="55" y1="0" x2="55" y2="100" stroke="#FDBFE8" strokeWidth="0.3" />
                <circle cx="55" cy={100 - (points24[13] / max) * 90} r="1.2" fill="#76D6FF">
                  <animate attributeName="r" values="1.2;2;1.2" dur="2s" repeatCount="indefinite" />
                </circle>
              </svg>
              <div style={{ display: "flex", gap: 18, fontSize: 10, fontFamily: "var(--font-mono)", color: "rgba(184,196,216,.7)", letterSpacing: ".08em" }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                  <span style={{ width: 12, height: 2, background: "#76D6FF" }}></span>GEN
                </span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                  <span style={{ width: 12, height: 2, background: "#D883FF", borderTop: "1px dashed" }}></span>DESPACHO
                </span>
              </div>
            </div>

            <div className="consola__panel">
              <div className="consola__panel-head">
                <span className="consola__panel-title">{copy.cycle_title}</span>
                <span className="consola__panel-meta">{copy.cycle_meta}</span>
              </div>
              <div className="consola__cycle-bar">
                <div className="consola__cycle-fill" style={{ width: `${progress}%` }}></div>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 4 }}>
                {copy.cycle_steps.map(([label, state], i) => (
                  <div key={i} className={`consola__cycle-row is-${state}`}>
                    <span className="dot"></span>
                    <span>{label}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function LiveNum({ value, prefix = "" }) {
  return (
    <span style={{ display: "inline-block", minWidth: 90, textAlign: "left" }}>
      {prefix}{Math.round(value).toLocaleString("es-CO")}
    </span>
  );
}

window.ConsolaMock = ConsolaMock;