// Agri Pump detail — Controls | Live | Settings tabs
const _ROLE_LVL_A = { viewer: 0, operator: 1, admin: 2, owner: 3 };

const _AGRI_STORE_KEY = 'velonics_agri_data';
const _agriLoad = (id) => { try { return (JSON.parse(localStorage.getItem(_AGRI_STORE_KEY) || '{}')[id] || {}); } catch { return {}; } };
const _agriSave = (id, data) => { try { const all = JSON.parse(localStorage.getItem(_AGRI_STORE_KEY) || '{}'); all[id] = { ...all[id], ...data }; localStorage.setItem(_AGRI_STORE_KEY, JSON.stringify(all)); } catch {} };


const AgriDetail = ({ tank, onBack, updateTank, issueCmd, pendingCmds }) => {
  const myRoleA   = tank.myRole || 'owner';
  const canCtrlA  = (_ROLE_LVL_A[myRoleA] ?? 3) >= _ROLE_LVL_A['operator'];
  const canAdminA = (_ROLE_LVL_A[myRoleA] ?? 3) >= _ROLE_LVL_A['admin'];

  const [tab,       setTab]       = useState('controls');
  const [agriSaved, setAgriSaved] = useState(false);

  const [draftSched, setDraftSched] = useState({
    schedulerMode: tank.schedulerMode ?? 'off',
    runtimeSet:    tank.runtimeSet    ?? 20,
    offtimeSet:    tank.offtimeSet    ?? 20,
    phaseAllowed:  tank.phaseAllowed  ?? '3',
  });

  const [draftSet, setDraftSet] = useState({
    autoStartEnabled:   tank.autoStartEnabled    ?? true,
    autoDelay:          tank.autoDelay           ?? 3,
    highVoltage2P:      tank.highVoltage2P       ?? 260,
    lowVoltage2P:       tank.lowVoltage2P        ?? 180,
    voltageImbalance2P: tank.voltageImbalance2P  ?? 10,
    overload2P:         tank.overload2P          ?? 12,
    dryRun2P:           tank.dryRun2P            ?? 5,
    availablePhase3P:   tank.availablePhase3P    ?? 'RY',
    highVoltage3P:      tank.highVoltage3P       ?? 460,
    lowVoltage3P:       tank.lowVoltage3P        ?? 380,
    voltageImbalance3P: tank.voltageImbalance3P  ?? 5,
    overload3P:         tank.overload3P          ?? 15,
    dryRun3P:           tank.dryRun3P            ?? 5,
  });

  const tankPending    = (pendingCmds && pendingCmds[tank.id]) || {};
  const waitingForLive = !!tank.deviceId && tank.online && !tank.mqttReceived;
  const controlsReady  = tank.online && tank.mqttReceived;
  const running        = tank.motorStatus === 'running_auto' || tank.motorStatus === 'running_manual';
  const healthy        = !tank.motorStatus || running || tank.motorStatus === 'waiting_3phase';

  useEffect(() => {
    const stored = _agriLoad(tank.id);
    if (stored.switchType) updateTank(tank.id, { switchType: stored.switchType });
  }, []); // eslint-disable-line

  // Keep a ref to the latest tank prop so the simulation interval always reads fresh values
  const _tankRef = useRef(tank);
  useEffect(() => { _tankRef.current = tank; });

  // Simulate live electrical readings for virtual devices (no real hardware)
  // Uses tank.virtual flag — never runs for real devices, even when temporarily offline
  useEffect(() => {
    if (tank.deviceId && !tank.virtual) return;
    const id = setInterval(() => {
      const t = _tankRef.current;
      if (t.deviceId && !t.virtual) return; // safety: stop if device became real
      const isRunning = t.motorStatus === 'running_auto' || t.motorStatus === 'running_manual';
      const patch = {
        phaseVoltageRY: 434 + Math.round(Math.random() * 12),
        phaseVoltageYB: 436 + Math.round(Math.random() * 10),
        phaseVoltageBR: 433 + Math.round(Math.random() * 11),
      };
      if (isRunning) {
        patch.currentR = +(9.5 + Math.random() * 1.5).toFixed(1);
        patch.currentY = +(9.2 + Math.random() * 1.8).toFixed(1);
        patch.currentB = +(9.7 + Math.random() * 1.3).toFixed(1);
        patch.runtimeCurrent = +((t.runtimeCurrent || 0) + 2 / 60).toFixed(2);
        if ((t.runtimeRemaining || 0) > 0) {
          patch.runtimeRemaining = +Math.max(0, (t.runtimeRemaining || 0) - 2 / 60).toFixed(2);
        }
        if (t.schedulerMode === 'cyclic' && (t.offtimeRemaining || 0) > 0) {
          patch.offtimeRemaining = +Math.max(0, (t.offtimeRemaining || 0) - 2 / 60).toFixed(2);
        }
      } else {
        patch.currentR = 0; patch.currentY = 0; patch.currentB = 0;
      }
      updateTank(t.id, patch);
    }, 2000);
    return () => clearInterval(id);
  }, [tank.deviceId, tank.virtual]); // eslint-disable-line

  const statusLabel = {
    waiting_3phase:       'Waiting — 3 Phase',
    running_auto:         'Running — Auto',
    running_manual:       'Running — Manual',
    stopped_overvolt:     'Stopped — Over Voltage',
    stopped_undervolt:    'Stopped — Under Voltage',
    stopped_imbalance:    'Stopped — Phase Imbalance',
    stopped_overpressure: 'Stopped — Over Pressure',
    stopped_dryrun:       'Stopped — Dry Run',
  }[tank.motorStatus] || '—';

  const _now = () => new Date().toLocaleString('en-IN', { day:'2-digit', month:'short', year:'numeric', hour:'2-digit', minute:'2-digit' });

  const _isVirtual = !tank.deviceId || !!tank.virtual;

  const handleMotorOff = () => {
    if (_isVirtual) {
      updateTank(tank.id, { motor: false, motorStatus: 'stopped_undervolt', lastStop: _now() });
      window.__toast?.('Motor stopped', { kind: 'info' });
      return;
    }
    if (issueCmd) issueCmd(tank.id, 'motor', () => MQ.publishCmd(tank.deviceId, 'motor', false));
  };
  const handleMotorOn = () => {
    if (_isVirtual) {
      updateTank(tank.id, { motor: true, motorStatus: 'running_manual', lastStart: _now(), runtimeCurrent: 0 });
      window.__toast?.('Motor started', { kind: 'success' });
      return;
    }
    if (issueCmd) issueCmd(tank.id, 'motor', () => MQ.publishCmd(tank.deviceId, 'motor', true));
  };

  const saveScheduler = () => {
    updateTank(tank.id, draftSched);
    _agriSave(tank.id, draftSched);
    if (window.API) API.put(`/api/tanks/${tank.id}/setpoints`, draftSched).catch(() => {});
    if (tank.deviceId && issueCmd) issueCmd(tank.id, 'setpoints', () => MQ.publishSetpoints(tank.deviceId, draftSched));
    window.__toast?.('Scheduler saved', { kind: 'success' });
  };

  const saveSetpoints = () => {
    updateTank(tank.id, draftSet);
    _agriSave(tank.id, draftSet);
    if (window.API) API.put(`/api/tanks/${tank.id}/setpoints`, draftSet).catch(() => {});
    if (tank.deviceId && issueCmd) issueCmd(tank.id, 'setpoints', () => MQ.publishSetpoints(tank.deviceId, draftSet));
    setAgriSaved(true);
    setTimeout(() => setAgriSaved(false), 2500);
  };

  const resetTimers = () => {
    updateTank(tank.id, { runtimeCurrent: 0, runtimeRemaining: draftSched.runtimeSet, offtimeRemaining: draftSched.offtimeSet });
    if (tank.deviceId && issueCmd) issueCmd(tank.id, 'resetTimers', () => MQ.publishCmd(tank.deviceId, 'reset_timers', true));
    window.__toast?.('Timers reset', { kind: 'info', icon: 'refresh' });
  };

  const SchedulerDisplay = () => {
    if (tank.schedulerMode === 'cyclic') {
      const cycleOn = tank.currentCycle === 'on';
      return (
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
          <Metric icon="refresh" label="Current Cycle" value={<span style={{ color: cycleOn ? 'var(--green)' : 'var(--amber)', fontWeight:700 }}>{cycleOn ? 'ON' : 'OFF'}</span>}/>
          <div/>
          <Metric icon="clock" label="Runtime Set"   value={tank.runtimeSet ?? '—'}       unit="min"/>
          <Metric icon="clock" label="Runtime Left"  value={tank.runtimeRemaining ?? '—'} unit="min" tone={tank.runtimeRemaining < 5 ? 'amber' : undefined}/>
          <Metric icon="clock" label="Off-Time Set"  value={tank.offtimeSet ?? '—'}       unit="min"/>
          <Metric icon="clock" label="Off-Time Left" value={tank.offtimeRemaining ?? '—'} unit="min"/>
        </div>
      );
    }
    return (
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8 }}>
        <Metric icon="clock" label="Runtime Set"     value={tank.runtimeSet ?? '—'}       unit="min"/>
        <Metric icon="clock" label="Runtime Current" value={tank.runtimeCurrent ?? '—'}   unit="min"/>
        <Metric icon="clock" label="Time Left"       value={tank.runtimeRemaining ?? '—'} unit="min" tone={tank.runtimeRemaining < 5 ? 'amber' : undefined}/>
      </div>
    );
  };

  const tabs = [
    { key: 'controls',  label: 'Controls'  },
    { key: 'live',      label: 'Live'      },
    { key: 'settings',  label: 'Settings'  },
  ];
  const swipe = useSwipeTabs(tabs, tab, setTab, onBack);
  const AgriSwitchPreview = window._SwitchPreview;
  const AgriHeroSw        = window._HeroSwitch;
  const agriSwitchTypes   = window._SWITCH_TYPES || [];

  return (
    <div onTouchStart={swipe.onTouchStart} onTouchEnd={swipe.onTouchEnd} style={{ position:'fixed', inset:0, zIndex:50, background:'linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%)', overflowY:'auto', animation:'slide-up 300ms ease-out', paddingBottom:32 }}>
      {/* Header */}
      <div style={{ position:'sticky', top:0, zIndex:10, display:'flex', alignItems:'center', gap:12, padding:'14px 16px', background:'rgba(10,14,39,0.85)', backdropFilter:'blur(12px)', borderBottom:'1px solid var(--border)' }}>
        <button onClick={onBack} style={{ background:'rgba(255,255,255,0.06)', border:'1px solid var(--border)', borderRadius:10, width:36, height:36, display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', cursor:'pointer' }}>
          <Ic name="chevronLeft" size={18}/>
        </button>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontSize:16, fontWeight:600, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{tank.name}</div>
          <div style={{ fontSize:11, color:'var(--text-3)' }}>{tank.location} · Agri Pump</div>
        </div>
      </div>

      {myRoleA !== 'owner' && (
        <div style={{ padding:'9px 16px', background:'rgba(255,188,0,0.08)', borderBottom:'1px solid rgba(255,188,0,0.18)', display:'flex', alignItems:'center', gap:8 }}>
          <Ic name="shield" size={13} color="var(--amber)"/>
          <span style={{ fontSize:12, color:'var(--amber)' }}>
            {myRoleA === 'viewer' ? 'Read-only access — controls and setpoints are disabled' : myRoleA === 'operator' ? 'Operator access — setpoints are read-only' : 'Admin access — cannot delete or manage shares'}
          </span>
        </div>
      )}

      {/* Tab bar */}
      <div style={{ display:'flex', borderBottom:'1px solid var(--border)', background:'var(--bg)', position:'sticky', top:65, zIndex:9 }}>
        {tabs.map(t => (
          <button key={t.key} onClick={() => setTab(t.key)} style={{
            flex:1, padding:'12px 0', border:'none', background:'none', cursor:'pointer',
            fontSize:13, fontWeight: tab === t.key ? 700 : 500,
            color: tab === t.key ? 'var(--cyan)' : 'var(--text-3)',
            borderBottom: `2px solid ${tab === t.key ? 'var(--cyan)' : 'transparent'}`,
            transition: 'all 150ms',
          }}>{t.label}</button>
        ))}
      </div>

      <div style={{ padding:'20px 16px 16px' }}>

        {/* ── Controls tab: motor + scheduler ── */}
        {tab === 'controls' && (
          <>
            <SectionTitle>Motor</SectionTitle>
            <Card style={{ padding:16, position:'relative' }}>
              <div style={{ opacity: waitingForLive ? 0.35 : 1, transition:'opacity 180ms ease' }}>
                <div style={{ display:'flex', flexDirection:'column', alignItems:'center', padding:'6px 0 4px' }}>
                  {AgriHeroSw
                    ? <AgriHeroSw
                        isOn={running}
                        offline={(!_isVirtual && !controlsReady) || !canCtrlA}
                        kind={tank.switchType || 'round'}
                        onClick={() => { if (!running) handleMotorOn(); else handleMotorOff(); }}
                        pending={!!tankPending.motor}
                      />
                    : <button
                        onClick={() => { if (tankPending.motor) return; if (!running) handleMotorOn(); else handleMotorOff(); }}
                        disabled={!controlsReady || !!tankPending.motor || !canCtrlA}
                        style={{ position:'relative', width:96, height:96, borderRadius:'50%', background: running ? 'radial-gradient(circle at 30% 30%, #4dffaa, #00b860)' : 'rgba(255,255,255,0.04)', border:`1px solid ${running ? 'rgba(0,230,118,0.6)' : 'var(--border)'}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
                        <Ic name="power" size={32} color={running ? '#062b18' : 'var(--text-2)'}/>
                      </button>
                  }
                  <div style={{ marginTop:6, fontWeight:600, fontSize:14, display:'flex', alignItems:'center', gap:6 }}>
                    Motor ·{' '}{tankPending.motor ? <PendingDots size="sm" color="var(--text-2)"/> : (running ? 'RUNNING' : 'STOPPED')}
                  </div>
                </div>
              </div>
              {waitingForLive && <LiveDataOverlay compact card/>}
            </Card>

            <SectionTitle>Current Cycle</SectionTitle>
            <Card style={{ padding:16, position:'relative' }}>
              <div style={{ opacity: waitingForLive ? 0.35 : 1, transition:'opacity 180ms ease' }}>
                <SchedulerDisplay/>
              </div>
              {waitingForLive && <LiveDataOverlay compact card/>}
            </Card>

            <SectionTitle>Scheduler Setup</SectionTitle>
            <Card style={{ padding:16 }}>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12 }}>
                <div style={{ fontSize:13, fontWeight:500 }}>Phase Allowed</div>
                <Segmented size="sm"
                  options={[{ value:'2', label:'2-Phase' }, { value:'3', label:'3-Phase' }, { value:'2&3', label:'2 & 3' }]}
                  value={draftSched.phaseAllowed}
                  onChange={v => setDraftSched(s => ({ ...s, phaseAllowed: v }))}/>
              </div>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14 }}>
                <div style={{ fontSize:13, fontWeight:500 }}>Scheduler</div>
                <Segmented size="sm"
                  options={[{ value:'off', label:'OFF' }, { value:'cyclic', label:'CYCLIC' }]}
                  value={draftSched.schedulerMode}
                  onChange={v => setDraftSched(s => ({ ...s, schedulerMode: v }))}/>
              </div>
              {draftSched.schedulerMode === 'off' && (
                <div style={{ display:'grid', gridTemplateColumns:'1fr', gap:10, marginBottom:14 }}>
                  <NumField label="Runtime Set" suffix="min" value={draftSched.runtimeSet} onChange={v => setDraftSched(s => ({ ...s, runtimeSet: v }))}/>
                </div>
              )}
              {draftSched.schedulerMode === 'cyclic' && (
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:14 }}>
                  <NumField label="Runtime Set"  suffix="min" value={draftSched.runtimeSet} onChange={v => setDraftSched(s => ({ ...s, runtimeSet: v }))}/>
                  <NumField label="Off-Time Set" suffix="min" value={draftSched.offtimeSet} onChange={v => setDraftSched(s => ({ ...s, offtimeSet: v }))}/>
                </div>
              )}
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
                <Btn variant="secondary" icon="refresh" onClick={resetTimers}>Reset Timers</Btn>
                <Btn variant="primary"   icon="check"   onClick={saveScheduler}>Save</Btn>
              </div>
            </Card>
          </>
        )}

        {/* ── Live tab: health hero + telemetry + summaries ── */}
        {tab === 'live' && (
          <>
            <Card style={{ padding:20, marginBottom:4, display:'flex', alignItems:'center', gap:18 }}>
              <div style={{
                width:72, height:72, borderRadius:'50%', flexShrink:0,
                background: healthy ? 'rgba(0,230,118,0.14)' : 'rgba(255,82,82,0.14)',
                border: `2px solid ${healthy ? 'rgba(0,230,118,0.5)' : 'rgba(255,82,82,0.5)'}`,
                display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:4,
                boxShadow: healthy ? '0 0 24px rgba(0,230,118,0.25)' : '0 0 24px rgba(255,82,82,0.25)',
                animation: running ? 'pulse-glow 2s ease-in-out infinite' : undefined,
              }}>
                <div style={{ width:18, height:18, borderRadius:'50%', background: healthy ? 'var(--green)' : 'var(--red)', boxShadow: healthy ? '0 0 10px var(--green)' : '0 0 10px var(--red)' }}/>
                <div style={{ fontSize:9, fontWeight:700, color: healthy ? 'var(--green)' : 'var(--red)', letterSpacing:0.4 }}>{healthy ? 'HEALTHY' : 'FAULT'}</div>
              </div>
              <div style={{ flex:1, minWidth:0 }}>
                <Badge color={running ? 'green' : tank.motorStatus === 'waiting_3phase' ? 'amber' : 'red'} style={{ marginBottom:8 }}>
                  <StatusDot kind={running ? 'green' : tank.motorStatus === 'waiting_3phase' ? 'amber' : 'red'} size={6} pulse={running}/>
                  {statusLabel}
                </Badge>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:4, marginTop:8 }}>
                  <div>
                    <div style={{ fontSize:10, color:'var(--text-3)', marginBottom:2 }}>Last Start</div>
                    <div className="num" style={{ fontSize:11, color:'var(--text-2)', fontWeight:500 }}>{tank.lastStart || '—'}</div>
                  </div>
                  <div>
                    <div style={{ fontSize:10, color:'var(--text-3)', marginBottom:2 }}>Last Stop</div>
                    <div className="num" style={{ fontSize:11, color:'var(--text-2)', fontWeight:500 }}>{tank.lastStop || '—'}</div>
                  </div>
                </div>
              </div>
            </Card>

            <SectionTitle>Live Telemetry</SectionTitle>
            <div style={{ position:'relative' }}>
              <div style={{ opacity: waitingForLive ? 0.35 : 1, transition:'opacity 180ms ease' }}>
                <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8, marginBottom:8 }}>
                  {[
                    { label:'R-Y Voltage', val: tank.phaseVoltageRY },
                    { label:'Y-B Voltage', val: tank.phaseVoltageYB },
                    { label:'B-R Voltage', val: tank.phaseVoltageBR },
                  ].map(({ label, val }) => (
                    <Metric key={label} icon="zap" label={label} value={val ?? '—'} unit="V"/>
                  ))}
                </div>
                <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8, marginBottom:8 }}>
                  {[
                    { label:'R Current', val: tank.currentR },
                    { label:'Y Current', val: tank.currentY },
                    { label:'B Current', val: tank.currentB },
                  ].map(({ label, val }) => (
                    <Metric key={label} icon="bolt" label={label} value={val != null ? Number(val).toFixed(1) : '—'} unit="A"/>
                  ))}
                </div>
                <Card style={{ padding:'10px 14px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
                  <div style={{ fontSize:13, color:'var(--text-2)' }}>Phase Sequence</div>
                  <Badge color={tank.phaseSequence === 'RYB' ? 'green' : 'amber'}>{tank.phaseSequence || '—'}</Badge>
                </Card>
              </div>
              {waitingForLive && <LiveDataOverlay/>}
            </div>

            <SectionTitle>Today's Summary</SectionTitle>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
              <Metric icon="clock"   label="Run Hours" value={tank.todayRunHours != null ? Number(tank.todayRunHours).toFixed(1) : '—'} unit="h"/>
              <Metric icon="refresh" label="Cycles"    value={tank.todayCycles ?? '—'}/>
            </div>

            <SectionTitle>Overall Summary</SectionTitle>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
              <Metric icon="clock"   label="Total Run Hours" value={tank.totalRunHours != null ? Number(tank.totalRunHours).toFixed(1) : '—'} unit="h"/>
              <Metric icon="refresh" label="Total Cycles"    value={tank.totalCycles ?? '—'}/>
            </div>
          </>
        )}

        {/* ── Settings tab: protection thresholds ── */}
        {tab === 'settings' && (
          <>
            <SectionTitle>Switch Style</SectionTitle>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:8 }}>
              {agriSwitchTypes.map(t => {
                const active = (tank.switchType || 'round') === t.id;
                return (
                  <button key={t.id} onClick={() => {
                    updateTank(tank.id, { switchType: t.id });
                    _agriSave(tank.id, { switchType: t.id });
                    if (window.API) API.post('/api/tanks', { ...tank, switchType: t.id }).catch(() => {});
                  }} style={{
                    display:'flex', flexDirection:'column', alignItems:'center', gap:6, padding:'14px 8px',
                    background: active ? 'rgba(0,212,255,0.10)' : 'rgba(255,255,255,0.04)',
                    border: `1px solid ${active ? 'var(--cyan)' : 'var(--border)'}`,
                    borderRadius:14, color:'#fff', cursor:'pointer', transition:'all 200ms ease',
                  }}>
                    {AgriSwitchPreview && <AgriSwitchPreview kind={t.id} active={active}/>}
                    <div style={{ fontSize:12, fontWeight:600, marginTop:4 }}>{t.label}</div>
                    <div style={{ fontSize:10, color:'var(--text-3)' }}>{t.desc}</div>
                  </button>
                );
              })}
            </div>

            <SectionTitle>Auto Start</SectionTitle>
            <Card style={{ padding:16 }}>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14 }}>
                <div>
                  <div style={{ fontSize:13, fontWeight:500 }}>Auto Start</div>
                  <div style={{ fontSize:11, color:'var(--text-3)', marginTop:2 }}>Automatically start motor</div>
                </div>
                <Toggle on={draftSet.autoStartEnabled} onChange={v => setDraftSet(s => ({ ...s, autoStartEnabled: v }))} color="var(--cyan)"/>
              </div>
              <NumField label="Auto Delay" suffix="min" value={draftSet.autoDelay} onChange={v => setDraftSet(s => ({ ...s, autoDelay: v }))}/>
            </Card>

            <SectionTitle>Two Phase Config</SectionTitle>
            <Card style={{ padding:16 }}>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
                <NumField label="High Voltage"      suffix="V"   value={draftSet.highVoltage2P}      onChange={v => setDraftSet(s => ({ ...s, highVoltage2P: v }))}/>
                <NumField label="Low Voltage"       suffix="V"   value={draftSet.lowVoltage2P}       onChange={v => setDraftSet(s => ({ ...s, lowVoltage2P: v }))}/>
                <NumField label="Voltage Imbalance" suffix="%"   value={draftSet.voltageImbalance2P} onChange={v => setDraftSet(s => ({ ...s, voltageImbalance2P: v }))}/>
                <NumField label="Overload"          suffix="A"   value={draftSet.overload2P}         onChange={v => setDraftSet(s => ({ ...s, overload2P: v }))}/>
                <NumField label="Dry Run"           suffix="min" value={draftSet.dryRun2P}           onChange={v => setDraftSet(s => ({ ...s, dryRun2P: v }))}/>
              </div>
            </Card>

            <SectionTitle>Three Phase Config</SectionTitle>
            <Card style={{ padding:16 }}>
              <div style={{ marginBottom:10 }}>
                <div style={{ fontSize:11, color:'var(--text-2)', textTransform:'uppercase', letterSpacing:0.5, marginBottom:6 }}>Available Phase</div>
                <Segmented
                  options={[{ value:'RY', label:'R-Y' }, { value:'YB', label:'Y-B' }, { value:'RB', label:'R-B' }]}
                  value={draftSet.availablePhase3P}
                  onChange={v => setDraftSet(s => ({ ...s, availablePhase3P: v }))}/>
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
                <NumField label="High Voltage"      suffix="V"   value={draftSet.highVoltage3P}      onChange={v => setDraftSet(s => ({ ...s, highVoltage3P: v }))}/>
                <NumField label="Low Voltage"       suffix="V"   value={draftSet.lowVoltage3P}       onChange={v => setDraftSet(s => ({ ...s, lowVoltage3P: v }))}/>
                <NumField label="Voltage Imbalance" suffix="%"   value={draftSet.voltageImbalance3P} onChange={v => setDraftSet(s => ({ ...s, voltageImbalance3P: v }))}/>
                <NumField label="Overload"          suffix="A"   value={draftSet.overload3P}         onChange={v => setDraftSet(s => ({ ...s, overload3P: v }))}/>
                <NumField label="Dry Run"           suffix="min" value={draftSet.dryRun3P}           onChange={v => setDraftSet(s => ({ ...s, dryRun3P: v }))}/>
              </div>
            </Card>

            <Btn full variant="primary" icon="check" onClick={saveSetpoints} disabled={!canAdminA || agriSaved}
              style={{ marginTop:16, transition:'all 300ms', ...(agriSaved ? { background:'linear-gradient(135deg,var(--green),var(--teal))', color:'#062b18' } : {}) }}>
              {!canAdminA ? 'Admin role required' : agriSaved ? 'Saved to cloud ✓' : 'Save'}
            </Btn>
          </>
        )}
      </div>

    </div>
  );
};

const NumField = ({ label, value, onChange, suffix }) => (
  <div>
    <div style={{ fontSize:11, color:'var(--text-2)', marginBottom:4, textTransform:'uppercase', letterSpacing:0.5 }}>{label}</div>
    <div style={{ display:'flex', alignItems:'center', gap:6, background:'rgba(255,255,255,0.04)', border:'1px solid var(--border)', borderRadius:10, padding:'8px 10px' }}>
      <input type="number" value={value} onChange={e => onChange(+e.target.value)}
        style={{ background:'transparent', border:'none', outline:'none', color:'#fff', fontSize:14, fontWeight:600, width:'100%' }} className="num"/>
      <span style={{ fontSize:11, color:'var(--text-3)' }}>{suffix}</span>
    </div>
  </div>
);

const LiveDataOverlay = ({ compact = false, card = false }) => (
  <div style={{ position:'absolute', inset: card ? 16 : 0, display:'flex', alignItems:'center', justifyContent:'center', pointerEvents:'none' }}>
    <div style={{
      padding: compact ? '8px 12px' : '10px 14px', borderRadius:999,
      border:'1px solid rgba(0,212,255,0.28)',
      background:'linear-gradient(90deg, rgba(0,212,255,0.10), rgba(255,255,255,0.08), rgba(0,212,255,0.10))',
      backgroundSize:'200% 100%', color:'var(--cyan)',
      fontSize: compact ? 12 : 13, fontWeight:600, letterSpacing:0.2,
      animation:'shimmer 1.4s linear infinite', boxShadow:'0 10px 28px rgba(0,0,0,0.28)',
    }}>Waiting for live data…</div>
  </div>
);

window.AgriDetail = AgriDetail;