// QYAS — Dashboard mockup (used in hero + features)
const { useState: useStateD, useEffect: useEffectD } = React;

function MeterRow({ name, site, value, unit, min, max, status, time }) {
  const pct = Math.max(0, Math.min(100, ((value - min) / (max - min)) * 100));
  const colors = {
    ok: { bar: "#059669", tag: "tag-success", label: "IN RANGE" },
    high: { bar: "#DC2626", tag: "tag-danger", label: "OVER MAX" },
    low: { bar: "#0284C7", tag: "tag-info", label: "UNDER MIN" },
    warn: { bar: "#D97706", tag: "tag-amber", label: "WARNING" },
  };
  const c = colors[status];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1.2fr 0.8fr", gap: 12, alignItems: "center", padding: "12px 16px", borderBottom: "1px solid var(--ink-100)", fontSize: 13 }}>
      <div>
        <div style={{ fontWeight: 600, color: "var(--ink-900)" }}>{name}</div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-500)" }}>{site}</div>
      </div>
      <div style={{ fontFamily: "var(--font-mono)", fontWeight: 600, color: "var(--ink-900)", fontSize: 14, fontVariantNumeric: "tabular-nums" }}>
        {value} <span style={{ color: "var(--ink-400)", fontWeight: 500 }}>{unit}</span>
      </div>
      <div>
        <div style={{ height: 6, background: "var(--ink-100)", borderRadius: 3, position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", inset: 0, width: `${pct}%`, background: c.bar, borderRadius: 3, transition: "width .8s ease" }} />
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-400)", marginTop: 4 }}>
          <span>min {min}</span><span>max {max}</span>
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4 }}>
        <span className={"tag " + c.tag} style={{ fontSize: 10 }}><span className="dot"></span>{c.label}</span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-400)" }}>{time}</span>
      </div>
    </div>
  );
}

function DashboardMock({ tickerSeed = 0 }) {
  const [tick, setTick] = useStateD(0);
  useEffectD(() => {
    const id = setInterval(() => setTick(t => t + 1), 2200);
    return () => clearInterval(id);
  }, []);

  // simulate jittery live readings
  const j = (base, amt) => +(base + Math.sin(tick + tickerSeed) * amt).toFixed(2);

  const counters = [
    { label: "SITES", value: 247, color: "#0B4A6F" },
    { label: "PLANTS", value: 1284, color: "#059669" },
    { label: "METERS", value: 18430, color: "#0891B2" },
    { label: "OPERATORS", value: 312, color: "#0284C7" },
    { label: "MANAGERS", value: 48, color: "#7C3AED" },
    { label: "AUDITORS", value: 12, color: "#475569" },
    { label: "ALERTS·24H", value: 7, color: "#D97706" },
    { label: "READINGS", value: "184k", color: "#DB2777" },
  ];

  return (
    <div style={{ background: "#fff", borderRadius: 16, border: "1px solid #e2e8f0", overflow: "hidden", boxShadow: "0 30px 80px -20px rgba(15,23,42,0.45), 0 0 0 1px rgba(15,23,42,0.05)" }}>
      {/* App chrome */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 18px", background: "#FAFBFC", borderBottom: "1px solid #e2e8f0" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ width: 28, height: 28, borderRadius: 7, background: "#0B4A6F", display: "grid", placeItems: "center", color: "#fff", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 13 }}>Q</div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, color: "#0F172A", fontSize: 14 }}>QYAS · Owner Dashboard</div>
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <span className="tag tag-success" style={{ fontSize: 10 }}><span className="dot pulse"></span>LIVE</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "#64748B" }}>04 May 2026 · 14:32 UTC</span>
        </div>
      </div>

      {/* Counters */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(8, 1fr)", borderBottom: "1px solid #e2e8f0" }}>
        {counters.map((c, i) => (
          <div key={c.label} style={{ padding: "16px 14px", borderRight: i < 7 ? "1px solid #f1f5f9" : "none", background: i === 6 ? "rgba(217,119,6,0.04)" : "transparent" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, fontWeight: 600, color: "#94A3B8", letterSpacing: "0.08em", marginBottom: 6 }}>{c.label}</div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, color: c.color, fontVariantNumeric: "tabular-nums", letterSpacing: "-0.02em" }}>{c.value}</div>
          </div>
        ))}
      </div>

      {/* Table */}
      <div>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1.2fr 0.8fr", gap: 12, padding: "10px 16px", background: "#F8FAFC", fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 600, color: "#64748B", letterSpacing: "0.06em", textTransform: "uppercase", borderBottom: "1px solid #e2e8f0" }}>
          <div>Meter / Site</div>
          <div>Reading</div>
          <div>Threshold</div>
          <div style={{ textAlign: "right" }}>Status / Time</div>
        </div>
        <MeterRow name="Pressure · Inlet A-12" site="Riyadh / Plant 03 / Sec. 2" value={j(4.2, 0.3)} unit="bar" min={2} max={6} status="ok" time="14:32:08" />
        <MeterRow name="Flow rate · Pump P-7" site="Jeddah / Desal Plant 1" value={j(7.2, 0.1)} unit="bar" min={2} max={6} status="high" time="14:31:54" />
        <MeterRow name="Temperature · Tank T-4" site="Dammam / Treatment 2" value={j(38.4, 0.8)} unit="°C" min={20} max={45} status="ok" time="14:31:41" />
        <MeterRow name="Conductivity · Outlet" site="Mecca / Reservoir 5" value={j(0.42, 0.05)} unit="mS/cm" min={0.5} max={2.0} status="low" time="14:31:22" />
        <MeterRow name="Chlorine · Dosing line" site="Riyadh / Plant 12" value={j(1.1, 0.05)} unit="ppm" min={0.5} max={1.5} status="warn" time="14:31:09" />
        <MeterRow name="Volume · Sales meter" site="Tabuk / Distribution N4" value={j(12480, 2)} unit="m³" min={0} max={20000} status="ok" time="14:30:58" />
      </div>
    </div>
  );
}

window.DashboardMock = DashboardMock;
window.MeterRow = MeterRow;