/* eslint-disable no-undef */
// IoT · Conditions — deep agronomic analytics, insights & actionable recommendations.
// Surfaces: Insights (recommendations + risk), Soil, Water, Weather & spray, by-field scorecard.

const { useState: cnUseState, useMemo: cnUseMemo, useEffect: cnUseEffect } = React;

// ---------- Per-field synthetic agronomy (deterministic) ----------
function fieldsForFarm(farm) {
  const rand = mulberry32((farm.id.charCodeAt(2) || 5) * 23);
  const n = 6 + Math.floor(rand() * 4);
  const crop = farm.crop;
  const targetN = ({ corn: 180, soy: 40, wheat: 110, canola: 130, alfalfa: 60, blueberry: 90, dairy: 200 }[crop]) || 120;
  return Array.from({ length: n }, (_, i) => {
    const moisture = Math.round(20 + rand() * 38);
    const ndvi = +(0.3 + rand() * 0.6).toFixed(2);
    const no3 = Math.round(targetN * (0.55 + rand() * 0.6));
    const ph = +(5.3 + rand() * 2.2).toFixed(1);
    const ec = +(0.4 + rand() * 2.6).toFixed(2);
    const om = +(2 + rand() * 4).toFixed(1);
    const nDeficitPct = Math.max(0, Math.round((1 - no3 / targetN) * 100));
    return {
      id: `${farm.id}-FLD${i + 1}`, name: `Field ${i + 1}`, acres: Math.round(farm.acres / n),
      moisture, ndvi, no3, targetN, ph, ec, om, nDeficitPct,
      status: ndvi >= 0.6 && moisture > 28 && nDeficitPct < 12 ? "optimal"
            : ndvi < 0.4 || moisture < 24 || nDeficitPct > 30 ? "attention" : "watch",
    };
  });
}

// ---------- Recommendations engine ----------
function buildRecommendations(farm, fields) {
  const recs = [];
  const crop = farm.crop;
  fields.forEach((f) => {
    if (f.nDeficitPct > 18) {
      const lbs = Math.round((f.targetN - f.no3));
      recs.push({ id: f.id + "-n", priority: f.nDeficitPct > 32 ? "high" : "med", category: "Nutrients", icon: "leaf",
        title: `Nitrogen ${f.nDeficitPct}% below target in ${f.name}`,
        detail: `NitroSense root-zone NO₃⁻ reads ${f.no3} ppm vs ${f.targetN} target. Apply ~${lbs} lb N/ac (4R split) within 5 days to protect yield.`,
        impact: `+${(f.nDeficitPct * 0.18).toFixed(1)} bu/ac potential · ${fmtMoney(f.acres * lbs * 0.62)} input`,
        action: "Create prescription", confidence: 0.86 });
    }
    if (f.moisture < 25) {
      const mm = Math.round((28 - f.moisture) * 0.9);
      recs.push({ id: f.id + "-w", priority: f.moisture < 22 ? "high" : "med", category: "Irrigation", icon: "droplet",
        title: `${f.name} soil moisture low (${f.moisture}% VWC)`,
        detail: `Below the ${crop} stress threshold. Recommended application ≈ ${mm} mm. Best window tonight 02:00–05:00 to minimise evaporative loss.`,
        impact: `Avoids ${(2 + f.nDeficitPct * 0.05).toFixed(1)}% yield risk · ${mm * f.acres * 0.4} L`,
        action: "Schedule irrigation", confidence: 0.81 });
    }
    if (f.ph < 5.7) {
      recs.push({ id: f.id + "-ph", priority: "med", category: "Soil", icon: "layers",
        title: `Acidic soil in ${f.name} (pH ${f.ph})`,
        detail: `Low pH limits P & N availability. Consider liming ~${(1 + (5.8 - f.ph) * 1.2).toFixed(1)} t/ac to reach pH 6.2.`,
        impact: `Unlocks ${Math.round((5.8 - f.ph) * 14)}% nutrient availability`,
        action: "Add to plan", confidence: 0.74 });
    }
  });
  // Whole-farm GHG / weather
  if (crop === "dairy") {
    recs.push({ id: "ghg", priority: "high", category: "GHG", icon: "cloud",
      title: "N₂O flux elevated near manure storage",
      detail: "EcoSense reads 4.1 ppm (baseline 0.9). Delay fertilizer application 48h and increase aeration; flag for carbon-credit verification.",
      impact: "Protects credit eligibility · -0.8 tCO₂e/day", action: "Notify operator", confidence: 0.79 });
  }
  recs.push({ id: "frost", priority: "med", category: "Weather", icon: "cloud",
    title: "Frost risk Thursday night (low 1°C)",
    detail: `Forecast dips near freezing. ${crop === "blueberry" ? "Run overhead irrigation for frost protection on bloom blocks." : "Monitor low-lying fields; delay any early seeding."}`,
    impact: "Protects sensitive growth stage", action: "Set alert", confidence: 0.68 });
  recs.push({ id: "spray", priority: "low", category: "Operations", icon: "wifi",
    title: "Spray window opens Wed 06:00–10:00",
    detail: "Wind < 8 km/h, RH 65%, no precip — within label conditions. Drift risk low.",
    impact: "Optimal efficacy · low drift", action: "Add to calendar", confidence: 0.9 });
  const order = { high: 0, med: 1, low: 2 };
  return recs.sort((a, b) => order[a.priority] - order[b.priority]).slice(0, 8);
}

function IoTConditions() {
  const { FARMS } = window.AGB_DATA;
  const [farmId, setFarmId] = cnUseState(FARMS[0].id);
  const [tab, setTab] = cnUseState("insights");
  const farm = FARMS.find((f) => f.id === farmId);
  const fields = cnUseMemo(() => fieldsForFarm(farm), [farmId]);
  const recs = cnUseMemo(() => buildRecommendations(farm, fields), [farmId]);

  return (
    <div>
      <PageHeader eyebrow="IoT · Conditions" title="Field intelligence & agronomy"
        sub="Sensor fusion across soil, water, and weather — translated into ranked, actionable recommendations for each field."
        actions={
          <>
            <select className="input" value={farmId} onChange={(e) => setFarmId(e.target.value)} style={{ width: "auto" }}>
              {FARMS.map((f) => <option key={f.id} value={f.id}>{f.name}</option>)}
            </select>
            <button className="btn" onClick={() => downloadCSV(`${farm.name.replace(/\s+/g, "-")}-field-report.csv`,
              ["Field", "Acres", "NDVI", "Moisture %", "NO3 ppm", "Target N", "pH", "EC", "OM %", "Status"],
              fields.map((f) => [f.name, f.acres, f.ndvi, f.moisture, f.no3, f.targetN, f.ph, f.ec, f.om, f.status]))}>
              <Icon name="download" size={14} /> Field report
            </button>
          </>
        } />
      <div style={{ padding: "0 var(--space-6)" }}>
        <Tabs active={tab} onChange={setTab} tabs={[
          { id: "insights", label: "Insights", icon: "target", badge: recs.filter((r) => r.priority === "high").length || null },
          { id: "soil", label: "Soil", icon: "leaf" },
          { id: "water", label: "Water & irrigation", icon: "droplet" },
          { id: "weather", label: "Weather & spray", icon: "cloud" },
        ]} />
      </div>
      <div style={{ padding: "var(--space-5) var(--space-6) var(--space-6)" }}>
        {tab === "insights" && <CondInsights farm={farm} fields={fields} recs={recs} setTab={setTab} />}
        {tab === "soil" && <CondSoil farm={farm} fields={fields} />}
        {tab === "water" && <CondWater farm={farm} fields={fields} />}
        {tab === "weather" && <CondWeather farm={farm} />}
      </div>
    </div>
  );
}

// ---------- Insights ----------
function CondInsights({ farm, fields, recs, setTab }) {
  const optimal = fields.filter((f) => f.status === "optimal").length;
  const attention = fields.filter((f) => f.status === "attention").length;
  const avgNdvi = (fields.reduce((s, f) => s + f.ndvi, 0) / fields.length).toFixed(2);
  const avgMoist = Math.round(fields.reduce((s, f) => s + f.moisture, 0) / fields.length);
  const nDeficit = Math.round(fields.reduce((s, f) => s + f.nDeficitPct, 0) / fields.length);

  const risks = [
    { label: "Irrigation need", level: avgMoist < 28 ? "high" : avgMoist < 34 ? "med" : "low", value: `${avgMoist}% VWC`, icon: "droplet" },
    { label: "Nutrient deficit", level: nDeficit > 25 ? "high" : nDeficit > 12 ? "med" : "low", value: `${nDeficit}% below N`, icon: "leaf" },
    { label: "Frost risk (72h)", level: "med", value: "Low 1°C Thu", icon: "cloud" },
    { label: "Disease pressure", level: avgMoist > 45 ? "med" : "low", value: avgMoist > 45 ? "Elevated" : "Nominal", icon: "alert" },
    { label: "Crop vigor (NDVI)", level: avgNdvi < 0.45 ? "high" : avgNdvi < 0.6 ? "med" : "low", value: avgNdvi, icon: "leaf" },
    { label: "Spray window", level: "low", value: "Open Wed AM", icon: "wifi" },
  ];

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {/* Risk tiles */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 12 }}>
        {risks.map((r) => {
          const c = r.level === "high" ? "var(--rose)" : r.level === "med" ? "var(--amber)" : "var(--green)";
          return (
            <div key={r.label} className="card" style={{ padding: 14 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <Icon name={r.icon} size={15} color={c} />
                <span className="tag" style={{ fontSize: 9, color: c, borderColor: `color-mix(in oklch, ${c} 30%, transparent)`, background: `color-mix(in oklch, ${c} 10%, transparent)` }}>{r.level}</span>
              </div>
              <div className="mono tnum" style={{ fontSize: 16, fontWeight: 600, marginTop: 10 }}>{r.value}</div>
              <div className="dim" style={{ fontSize: 11, marginTop: 2 }}>{r.label}</div>
            </div>
          );
        })}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.5fr) 1fr", gap: 12 }}>
        {/* Recommendations */}
        <div className="card">
          <div className="card-hd">
            <div>
              <div style={{ fontSize: 13, fontWeight: 500 }}>Recommended actions</div>
              <div className="dim" style={{ fontSize: 11, marginTop: 2 }}>Ranked by priority · sensor-derived · {farm.name}</div>
            </div>
            <span className="tag bad" style={{ fontSize: 10 }}>{recs.filter((r) => r.priority === "high").length} high priority</span>
          </div>
          <div className="card-bd" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {recs.map((r) => <RecoCard key={r.id} r={r} />)}
          </div>
        </div>

        {/* Field scorecard + correlation */}
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div className="card">
            <div className="card-hd"><div style={{ fontSize: 13, fontWeight: 500 }}>Field scorecard</div><span className="dim" style={{ fontSize: 11 }}>{optimal} optimal · {attention} need attention</span></div>
            <div className="card-bd" style={{ padding: 0 }}>
              <DataTable rows={fields} columns={[
                { key: "name", label: "Field" },
                { key: "ndvi", label: "NDVI", mono: true, align: "right" },
                { key: "moisture", label: "Moist", mono: true, align: "right", render: (r) => r.moisture + "%" },
                { key: "no3", label: "N", mono: true, align: "right", render: (r) => <span style={{ color: r.nDeficitPct > 25 ? "var(--rose)" : r.nDeficitPct > 12 ? "var(--amber)" : "var(--green)" }}>{r.no3}</span> },
                { key: "status", label: "Status", render: (r) => <span className={"tag " + (r.status === "optimal" ? "ok" : r.status === "attention" ? "bad" : "warn")}>{r.status}</span> },
              ]} />
            </div>
          </div>
          <div className="card">
            <div className="card-hd"><div style={{ fontSize: 13, fontWeight: 500 }}>NDVI × moisture</div><span className="dim" style={{ fontSize: 11 }}>each dot = field</span></div>
            <div className="card-bd">
              <Scatter w={420} h={200} xLabel="Soil moisture %" yLabel="NDVI"
                points={fields.map((f) => ({ x: f.moisture, y: f.ndvi * 100, r: 4 + f.acres / 80,
                  color: f.status === "optimal" ? "var(--green)" : f.status === "attention" ? "var(--rose)" : "var(--amber)" }))} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function RecoCard({ r }) {
  const c = r.priority === "high" ? "var(--rose)" : r.priority === "med" ? "var(--amber)" : "var(--cyan)";
  const onAct = () => AGB_UI.form({
    eyebrow: r.category, title: r.action, subtitle: r.title, submitLabel: r.action, successMessage: `${r.action} ✓`,
    fields: [
      { key: "when", label: "Schedule", type: "select", options: ["As soon as possible", "Tonight", "Tomorrow AM", "This week", "Custom"] },
      { key: "assignee", label: "Assign to", type: "select", options: ["Auto-assign", "Field team A", "Field team B", "Operator"] },
      { key: "notes", label: "Notes", type: "textarea", placeholder: "Optional…", value: r.detail.slice(0, 0) },
    ],
  });
  return (
    <div style={{ display: "flex", gap: 12, padding: 14, background: "var(--bg-elev)", borderRadius: 10, border: "1px solid var(--border-faint)", borderLeft: `3px solid ${c}` }}>
      <div style={{ width: 30, height: 30, borderRadius: 8, background: `color-mix(in oklch, ${c} 14%, var(--surface-2))`, display: "grid", placeItems: "center", flexShrink: 0 }}>
        <Icon name={r.icon} size={15} color={c} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", justifyContent: "space-between", gap: 10, alignItems: "baseline" }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>{r.title}</div>
          <span className="tag" style={{ fontSize: 9, color: c, borderColor: `color-mix(in oklch, ${c} 30%, transparent)`, flexShrink: 0 }}>{r.priority}</span>
        </div>
        <div className="dim" style={{ fontSize: 12, marginTop: 5, lineHeight: 1.5 }}>{r.detail}</div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 10, gap: 10, flexWrap: "wrap" }}>
          <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
            <span className="tag info" style={{ fontSize: 9 }}>{r.category}</span>
            <span className="faint mono" style={{ fontSize: 10 }}>impact: {r.impact}</span>
            <span className="faint mono" style={{ fontSize: 10 }}>· conf {Math.round(r.confidence * 100)}%</span>
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            <button className="btn ghost" style={{ fontSize: 11, padding: "5px 8px" }} onClick={() => AGB_UI.toast("Dismissed", { type: "info" })}>Dismiss</button>
            <button className="btn primary" style={{ fontSize: 11, padding: "5px 10px" }} onClick={onAct}>{r.action}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Soil ----------
function CondSoil({ farm, fields }) {
  const depthSeries = cnUseMemo(() => ([
    { label: "0 cm", color: "var(--cyan)", values: generateSeries(72, 38, 5, 0, farm.id.charCodeAt(2) + 1) },
    { label: "10 cm", color: "var(--green)", values: generateSeries(72, 34, 3, 0, farm.id.charCodeAt(2) + 2) },
    { label: "30 cm", color: "var(--violet)", values: generateSeries(72, 30, 2, 0, farm.id.charCodeAt(2) + 3) },
    { label: "60 cm", color: "var(--amber)", values: generateSeries(72, 27, 1.2, 0, farm.id.charCodeAt(2) + 4) },
  ]), [farm.id]);
  const heatmap = cnUseMemo(() => Array.from({ length: 7 }, (_, r) => Array.from({ length: 24 }, (_, c) => {
    const rand = mulberry32(r * 100 + c + farm.id.charCodeAt(2)); return rand();
  })), [farm.id]);
  const targetN = fields[0].targetN;
  const npk = [
    { k: "Nitrogen (N)", actual: Math.round(fields.reduce((s, f) => s + f.no3, 0) / fields.length), target: targetN, unit: "ppm", color: "var(--green)" },
    { k: "Phosphorus (P)", actual: 38, target: 50, unit: "ppm", color: "var(--cyan)" },
    { k: "Potassium (K)", actual: 165, target: 160, unit: "ppm", color: "var(--amber)" },
    { k: "Sulfur (S)", actual: 12, target: 18, unit: "ppm", color: "var(--violet)" },
  ];

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.5fr) 1fr", gap: 12 }}>
        <div className="card">
          <div className="card-hd"><div><div style={{ fontSize: 13, fontWeight: 500 }}>Soil moisture by depth</div><div className="dim" style={{ fontSize: 11, marginTop: 2 }}>72h · root-zone profile</div></div>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>{depthSeries.map((d) => (
              <span key={d.label} style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 11 }}><span style={{ width: 10, height: 2, background: d.color }} /><span className="dim">{d.label}</span></span>
            ))}</div>
          </div>
          <div className="card-bd"><MultiLine datasets={depthSeries} h={250} /></div>
        </div>
        <div className="card">
          <div className="card-hd"><div style={{ fontSize: 13, fontWeight: 500 }}>Nutrients — actual vs target</div></div>
          <div className="card-bd" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {npk.map((n) => {
              const pct = n.actual / n.target;
              const c = pct < 0.8 ? "var(--rose)" : pct > 1.15 ? "var(--amber)" : "var(--green)";
              return (
                <div key={n.k}>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, marginBottom: 5 }}>
                    <span>{n.k}</span>
                    <span className="mono"><span style={{ color: c }}>{n.actual}</span> <span className="faint">/ {n.target} {n.unit}</span></span>
                  </div>
                  <div style={{ position: "relative" }}>
                    <Bar value={n.actual} max={n.target * 1.4} color={c} h={7} />
                    <div style={{ position: "absolute", left: `${(1 / 1.4) * 100}%`, top: -2, bottom: -2, width: 2, background: "var(--text-faint)" }} title="target" />
                  </div>
                  {pct < 0.85 && <div className="dim" style={{ fontSize: 10.5, marginTop: 4 }}>↳ {Math.round((1 - pct) * 100)}% deficit — apply {Math.round((n.target - n.actual))} {n.unit} equivalent</div>}
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
        <div className="card">
          <div className="card-hd"><div style={{ fontSize: 13, fontWeight: 500 }}>pH by field</div><span className="dim" style={{ fontSize: 11 }}>target 6.0–6.8</span></div>
          <div className="card-bd"><BarChart h={180} color="var(--violet)" data={fields.map((f) => f.ph)} labels={fields.map((f) => f.name.replace("Field ", "F"))} /></div>
        </div>
        <div className="card">
          <div className="card-hd"><div style={{ fontSize: 13, fontWeight: 500 }}>Salinity (EC)</div><span className="dim" style={{ fontSize: 11 }}>mS/cm</span></div>
          <div className="card-bd"><BarChart h={180} color="var(--cyan)" data={fields.map((f) => f.ec)} labels={fields.map((f) => f.name.replace("Field ", "F"))} /></div>
        </div>
        <div className="card">
          <div className="card-hd"><div style={{ fontSize: 13, fontWeight: 500 }}>Sensor activity</div><span className="dim" style={{ fontSize: 11 }}>by hour</span></div>
          <div className="card-bd"><Heatmap data={heatmap} h={160} color="var(--green)" /></div>
        </div>
      </div>
    </div>
  );
}

// ---------- Water & irrigation ----------
function CondWater({ farm, fields }) {
  // 14-day water balance: ET vs precip vs irrigation
  const days = 14;
  const balance = cnUseMemo(() => {
    const rand = mulberry32(farm.id.charCodeAt(2) * 7);
    let storage = 32;
    return Array.from({ length: days }, (_, i) => {
      const et = +(3 + rand() * 4).toFixed(1);
      const precip = rand() < 0.3 ? +(rand() * 14).toFixed(1) : 0;
      const irr = storage < 28 && precip < 3 ? +(et + 2).toFixed(1) : 0;
      storage = Math.max(15, Math.min(45, storage - et + precip + irr));
      return { d: i, et, precip, irr, storage: +storage.toFixed(1) };
    });
  }, [farm.id]);
  const totalET = balance.reduce((s, b) => s + b.et, 0).toFixed(0);
  const totalPrecip = balance.reduce((s, b) => s + b.precip, 0).toFixed(0);
  const totalIrr = balance.reduce((s, b) => s + b.irr, 0).toFixed(0);
  const wue = (1 - +totalIrr / (+totalET || 1)).toFixed(2);

  const zones = fields.slice(0, 5).map((f, i) => ({
    id: f.id, zone: `${f.name} — Zone A`,
    status: f.moisture < 24 ? "alert" : f.moisture < 28 ? "queued" : i === 0 ? "active" : "off",
    moisture: f.moisture, flow: f.moisture < 28 ? `${(4 + i).toFixed(1)} L/min` : "—",
    rec: f.moisture < 24 ? `Irrigate ${Math.round((28 - f.moisture) * 0.9)}mm` : f.moisture < 28 ? "Queue tonight" : "Adequate",
  }));

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        <Stat label="Evapotranspiration" value={totalET} unit="mm/14d" sparkline={balance.map((b) => b.et)} spark_color="var(--amber)" />
        <Stat label="Rainfall" value={totalPrecip} unit="mm/14d" sparkline={balance.map((b) => b.precip + 0.1)} spark_color="var(--cyan)" />
        <Stat label="Irrigation applied" value={totalIrr} unit="mm/14d" sparkline={balance.map((b) => b.irr + 0.1)} spark_color="var(--violet)" />
        <Stat label="Water-use efficiency" value={wue} unit="index" delta={6.2} spark_color="var(--green)" sparkline={generateSeries(20, 70, 2, 0.2, 9)} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.4fr) 1fr", gap: 12 }}>
        <div className="card">
          <div className="card-hd"><div><div style={{ fontSize: 13, fontWeight: 500 }}>Water balance & soil-water storage</div><div className="dim" style={{ fontSize: 11, marginTop: 2 }}>ET vs rainfall vs irrigation · 14 days</div></div>
            <div style={{ display: "flex", gap: 10 }}>
              {[["ET", "var(--amber)"], ["Rain", "var(--cyan)"], ["Irrigation", "var(--violet)"], ["Storage", "var(--green)"]].map(([l, c]) => (
                <span key={l} style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 11 }}><span style={{ width: 10, height: 2, background: c }} /><span className="dim">{l}</span></span>
              ))}
            </div>
          </div>
          <div className="card-bd"><MultiLine h={260} datasets={[
            { label: "ET", color: "var(--amber)", values: balance.map((b) => b.et) },
            { label: "Rain", color: "var(--cyan)", values: balance.map((b) => b.precip) },
            { label: "Irrigation", color: "var(--violet)", values: balance.map((b) => b.irr) },
            { label: "Storage", color: "var(--green)", values: balance.map((b) => b.storage / 4) },
          ]} /></div>
        </div>
        <div className="card">
          <div className="card-hd"><div style={{ fontSize: 13, fontWeight: 500 }}>Irrigation advisor</div>
            <button className="btn primary" style={{ fontSize: 12, padding: "5px 10px" }} onClick={() => AGB_UI.form({ eyebrow: "Irrigation", title: "Schedule irrigation", submitLabel: "Schedule run", successMessage: "Irrigation run scheduled", fields: [{ key: "zone", label: "Zone", type: "select", options: zones.map((z) => z.zone) }, { key: "dur", label: "Duration", type: "number", value: 30, suffix: "min" }, { key: "start", label: "Start", type: "select", options: ["Now", "Tonight 02:00", "Tomorrow 06:00"] }] })}><Icon name="plus" size={13} /> Schedule</button>
          </div>
          <div className="card-bd" style={{ padding: 0 }}>
            <DataTable rows={zones} columns={[
              { key: "zone", label: "Zone" },
              { key: "moisture", label: "VWC", mono: true, align: "right", render: (r) => <span style={{ color: r.moisture < 24 ? "var(--rose)" : r.moisture < 28 ? "var(--amber)" : "var(--green)" }}>{r.moisture}%</span> },
              { key: "status", label: "Status", render: (r) => <span className={"tag " + ({ active: "ok", alert: "bad", queued: "info", off: "" }[r.status] || "")}>{r.status}</span> },
              { key: "rec", label: "Recommendation", dim: true },
            ]} />
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Weather & spray ----------
function CondWeather({ farm }) {
  const fc = cnUseMemo(() => {
    const rand = mulberry32(farm.id.charCodeAt(2) * 11);
    return Array.from({ length: 7 }, (_, i) => {
      const max = Math.round(14 + rand() * 12), min = Math.round(2 + rand() * 9);
      return { day: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"][(new Date().getDay() + i) % 7],
        max, min, precip: rand() < 0.35 ? +(rand() * 12).toFixed(1) : 0, wind: Math.round(4 + rand() * 18),
        cond: ["Sun", "P/Cloud", "Cloud", "Rain", "Sun"][Math.floor(rand() * 5)], frost: min <= 2 };
    });
  }, [farm.id]);
  // Growing degree days
  const gdd = cnUseMemo(() => {
    let cum = 0;
    return Array.from({ length: 30 }, (_, i) => {
      const rand = mulberry32(farm.id.charCodeAt(2) + i);
      const daily = Math.max(0, (10 + rand() * 14) - 10);
      cum += daily;
      return { daily: +daily.toFixed(1), cum: +cum.toFixed(0) };
    });
  }, [farm.id]);
  // Spray windows next 48h (hourly)
  const spray = cnUseMemo(() => Array.from({ length: 48 }, (_, h) => {
    const rand = mulberry32(farm.id.charCodeAt(2) * 3 + h);
    const wind = +(2 + rand() * 22).toFixed(0), rh = Math.round(40 + rand() * 50), rain = rand() < 0.2;
    const ok = wind < 12 && rh > 45 && rh < 88 && !rain;
    return { h, wind, rh, rain, ok };
  }), [farm.id]);
  const goodHours = spray.filter((s) => s.ok).length;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {/* forecast */}
      <div className="card">
        <div className="card-hd"><div style={{ fontSize: 13, fontWeight: 500 }}>7-day forecast</div><span className="dim" style={{ fontSize: 11 }}>hyperlocal · on-farm + model blend</span></div>
        <div className="card-bd" style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 8 }}>
          {fc.map((d, i) => (
            <div key={i} style={{ padding: "12px 8px", background: d.frost ? "color-mix(in oklch, var(--cyan) 12%, var(--bg-elev))" : "var(--bg-elev)", borderRadius: 8, textAlign: "center", border: d.frost ? "1px solid color-mix(in oklch, var(--cyan) 35%, transparent)" : "1px solid transparent" }}>
              <div className="dim" style={{ fontSize: 11 }}>{d.day}</div>
              <div className="mono tnum" style={{ fontSize: 20, fontWeight: 600, marginTop: 6 }}>{d.max}°</div>
              <div className="mono faint" style={{ fontSize: 11 }}>{d.min}° low</div>
              <div className="tag" style={{ marginTop: 6, fontSize: 9 }}>{d.cond}</div>
              {d.frost && <div style={{ fontSize: 9, color: "var(--cyan)", marginTop: 4 }}>❄ frost</div>}
              {d.precip > 0 && <div className="mono" style={{ fontSize: 9, color: "var(--cyan)", marginTop: 2 }}>{d.precip}mm</div>}
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <div className="card">
          <div className="card-hd"><div><div style={{ fontSize: 13, fontWeight: 500 }}>Growing degree days</div><div className="dim" style={{ fontSize: 11, marginTop: 2 }}>cumulative · base 10°C · 30 days</div></div>
            <div className="mono tnum" style={{ fontSize: 18, fontWeight: 600, color: "var(--amber)" }}>{gdd[gdd.length - 1].cum} <span className="faint" style={{ fontSize: 11 }}>GDD</span></div>
          </div>
          <div className="card-bd"><AreaChart series={gdd.map((g) => g.cum)} h={210} color="var(--amber)" yLabel="GDD" labels={gdd.map((_, i) => i % 5 === 0 ? `D${i}` : "")} /></div>
        </div>
        <div className="card">
          <div className="card-hd"><div><div style={{ fontSize: 13, fontWeight: 500 }}>Spray window advisor</div><div className="dim" style={{ fontSize: 11, marginTop: 2 }}>next 48h · wind &lt;12 km/h, RH 45–88%, dry</div></div>
            <span className="tag ok" style={{ fontSize: 10 }}>{goodHours}h favorable</span>
          </div>
          <div className="card-bd">
            <div style={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
              {spray.map((s) => (
                <div key={s.h} title={`+${s.h}h · wind ${s.wind} km/h · RH ${s.rh}%${s.rain ? " · rain" : ""}`}
                  style={{ width: `calc(${100 / 24}% - 2px)`, height: 26, borderRadius: 3, background: s.ok ? "var(--green)" : s.rain ? "var(--cyan)" : "var(--surface-3)", opacity: s.ok ? 0.85 : 0.5 }} />
              ))}
            </div>
            <div style={{ display: "flex", gap: 16, marginTop: 12, fontSize: 11 }}>
              <span style={{ display: "flex", alignItems: "center", gap: 5 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: "var(--green)" }} /> favorable</span>
              <span style={{ display: "flex", alignItems: "center", gap: 5 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: "var(--surface-3)" }} /> unsuitable</span>
              <span style={{ display: "flex", alignItems: "center", gap: 5 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: "var(--cyan)" }} /> precip</span>
            </div>
            <div className="dim" style={{ fontSize: 12, marginTop: 12, padding: 10, background: "var(--bg-elev)", borderRadius: 8 }}>
              <Icon name="target" size={12} color="var(--green)" /> Next optimal window: <strong style={{ color: "var(--text)" }}>Wed 06:00–10:00</strong> — wind 6 km/h, RH 64%, no precip.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { IoTConditions });