// Tank Detail full-screen view — Controls | Live | Settings tabs
const { LineChart, AreaChart, BarChart, ComposedChart, XAxis, YAxis, CartesianGrid, Tooltip, Area, Bar, Line, ResponsiveContainer, Legend } = Recharts;

const _ROLE_LEVEL_D = { viewer: 0, operator: 1, admin: 2, owner: 3 };
function _roleLvl(r) { return _ROLE_LEVEL_D[r] ?? 3; }

const Detail = ({ tank, onBack, updateTank, issueCmd, pendingCmds }) => {
  const myRole   = tank.myRole || 'owner';
  const canCtrl  = _roleLvl(myRole) >= _roleLvl('operator');
  const canAdmin = _roleLvl(myRole) >= _roleLvl('admin');

  const [tab,      setTab]  = useState('controls');
  const [draftSet, setDraftSet] = useState({
    autoStart: tank.autoStart, autoStop: tank.autoStop,
    lowAlarm:  tank.lowAlarm,  highAlarm: tank.highAlarm,
    maxRuntime: tank.maxRuntime, vLow: tank.vLow, vHigh: tank.vHigh, iMax: tank.iMax,
  });

  const tone = tank.level > 50 ? 'green' : tank.level >= 25 ? 'amber' : 'red';
  const toneColor = tone === 'green' ? 'var(--green)' : tone === 'amber' ? 'var(--amber)' : 'var(--red)';
  const _isVirtual     = !tank.deviceId || !!tank.virtual;
  const waitingForLive = !_isVirtual && !!tank.deviceId && tank.online && !tank.mqttReceived;
  const controlsReady  = _isVirtual || (tank.online && tank.mqttReceived);
  const tankPending    = (pendingCmds && pendingCmds[tank.id]) || {};

  const saveSetpoints = () => {
    updateTank(tank.id, draftSet);
    if (window.API) API.put(`/api/tanks/${tank.id}/setpoints`, draftSet).catch(() => {});
    if (!tank.deviceId || !issueCmd) { window.__toast?.('Setpoints saved', { kind: 'success' }); return; }
    issueCmd(tank.id, 'setpoints', () => MQ.publishSetpoints(tank.deviceId, draftSet));
  };

  const handleMotorOff     = () => {
    if (_isVirtual) { updateTank(tank.id, { motor: false, flow: 0, current: 0 }); window.__toast?.('Motor stopped', { kind: 'success' }); return; }
    if (tank.deviceId && issueCmd) issueCmd(tank.id, 'motor', () => MQ.publishCmd(tank.deviceId, 'motor', false));
  };
  const handleMotorOn      = () => {
    if (_isVirtual) { updateTank(tank.id, { motor: true, motorMode: 'manual', flow: parseFloat((8 + Math.random() * 4).toFixed(1)), current: parseFloat((3 + Math.random() * 1).toFixed(1)) }); window.__toast?.('Motor started', { kind: 'success' }); return; }
    if (!tank.deviceId || !issueCmd) return;
    issueCmd(tank.id, 'motor', () => MQ.publishCmd(tank.deviceId, 'motor', true));
    issueCmd(tank.id, 'motorMode', () => MQ.publishCmd(tank.deviceId, 'mode', 'manual'));
  };
  const handleInletValve   = (open) => {
    if (_isVirtual) { updateTank(tank.id, { valveIn: open }); return; }
    if (tank.deviceId && issueCmd) issueCmd(tank.id, 'valve', () => MQ.publishValveCmd(tank.deviceId, open, tank.valveOut));
  };
  const handleOutletValve  = (open) => {
    if (_isVirtual) { updateTank(tank.id, { valveOut: open }); return; }
    if (tank.deviceId && issueCmd) issueCmd(tank.id, 'valve', () => MQ.publishValveCmd(tank.deviceId, tank.valveIn, open));
  };
  const handleMode         = (mode) => {
    if (_isVirtual) { updateTank(tank.id, { motorMode: mode }); return; }
    if (tank.deviceId && issueCmd) issueCmd(tank.id, 'motorMode', () => MQ.publishCmd(tank.deviceId, 'mode', mode));
  };

  const tabs = [
    { key: 'controls', label: 'Controls' },
    { key: 'live',     label: 'Live'     },
    { key: 'settings', label: 'Settings' },
  ];
  const swipe = useSwipeTabs(tabs, tab, setTab, onBack);

  const _detailRef = useRef(tank);
  useEffect(() => { _detailRef.current = tank; });
  useEffect(() => {
    if (tank.deviceId && !tank.virtual) return;
    const id = setInterval(() => {
      const t = _detailRef.current;
      if (t.deviceId && !t.virtual) return;
      const motorOn = t.motor;
      const newLevel = motorOn ? Math.min(100, t.level + 0.3) : Math.max(0, t.level - 0.1);
      updateTank(t.id, {
        level:   parseFloat(newLevel.toFixed(1)),
        volume:  Math.round(newLevel * t.capacity / 100),
        flow:    motorOn ? parseFloat((8 + Math.random() * 4).toFixed(1)) : 0,
        voltage: 230 + Math.round((Math.random() - 0.5) * 8),
        current: motorOn ? parseFloat((3 + Math.random() * 1.5).toFixed(1)) : 0,
        temp:    parseFloat((27 + (Math.random() - 0.5) * 2).toFixed(1)),
      });
    }, 2000);
    return () => clearInterval(id);
  }, [tank.deviceId, tank.virtual]); // eslint-disable-line

  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' }}>
          <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} · FW {tank.fw}</div>
        </div>
      </div>

      {myRole !== '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)' }}>
            {myRole === 'viewer' ? 'Read-only access — controls and setpoints are disabled' : myRole === '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' }}>
        {tab === 'controls' && (
          <_TankControlsTab
            tank={tank} waitingForLive={waitingForLive} controlsReady={controlsReady}
            tankPending={tankPending} canCtrl={canCtrl}
            handleMotorOn={handleMotorOn} handleMotorOff={handleMotorOff}
            handleInletValve={handleInletValve} handleOutletValve={handleOutletValve}
            handleMode={handleMode}
          />
        )}
        {tab === 'live' && (
          <_TankLiveTab tank={tank} tone={tone} toneColor={toneColor} waitingForLive={waitingForLive} controlsReady={controlsReady}/>
        )}
        {tab === 'settings' && (
          <_TankSettingsTab
            tank={tank} draftSet={draftSet} setDraftSet={setDraftSet}
            tankPending={tankPending} canAdmin={canAdmin}
            updateTank={updateTank} onSave={saveSetpoints}
          />
        )}
      </div>

    </div>
  );
};

// ── Controls tab ──────────────────────────────────────────────────────
const _TankControlsTab = ({
  tank, waitingForLive, controlsReady, tankPending, canCtrl,
  handleMotorOn, handleMotorOff, handleInletValve, handleOutletValve, handleMode,
}) => (
  <>
    <SectionTitle>Motor Pump</SectionTitle>
    <Card style={{ padding:16, position:'relative' }}>
      <div style={{ display:'flex', flexDirection:'column', alignItems:'center', padding:'6px 0 14px', opacity: waitingForLive ? 0.35 : 1, transition:'opacity 180ms ease' }}>
        <button
          onClick={() => { if (tankPending.motor) return; if (!tank.motor) handleMotorOn(); else handleMotorOff(); }}
          disabled={!controlsReady || !!tankPending.motor || !canCtrl}
          style={{
            position:'relative', width:96, height:96, borderRadius:'50%',
            background: tankPending.motor ? 'rgba(255,255,255,0.06)' : tank.motor ? 'radial-gradient(circle at 30% 30%, #4dffaa, #00b860)' : 'rgba(255,255,255,0.04)',
            border: `1px solid ${tankPending.motor ? 'rgba(255,255,255,0.15)' : tank.motor ? 'rgba(0,230,118,0.6)' : 'var(--border)'}`,
            color: tank.motor && !tankPending.motor ? '#062b18' : 'var(--text-2)',
            boxShadow: tank.motor && !tankPending.motor ? '0 0 30px rgba(0,230,118,0.4)' : 'none',
            cursor: (controlsReady && !tankPending.motor && canCtrl) ? 'pointer' : 'not-allowed',
            opacity: (controlsReady && !tankPending.motor && canCtrl) ? 1 : 0.55,
            animation: tank.motor && !tankPending.motor ? 'pulse-glow 2s ease-in-out infinite' : undefined,
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
          {tankPending.motor ? <PendingDots size="lg" color="var(--text-2)"/> : <Ic name="power" size={32} color={tank.motor ? '#062b18' : 'var(--text-2)'} strokeWidth={2}/>}
          {tank.motor && !tankPending.motor && <div style={{ position:'absolute', inset:-6, border:'2px dashed rgba(255,255,255,0.4)', borderRadius:'50%', animation:'spin 6s linear infinite' }}/>}
        </button>
        <div style={{ marginTop:10, fontWeight:600, fontSize:14, display:'flex', alignItems:'center', gap:6 }}>
          Motor pump ·{' '}{tankPending.motor ? <PendingDots size="sm" color="var(--text-2)"/> : (tank.motor ? 'RUNNING' : 'STOPPED')}
        </div>
        <div style={{ marginTop:4, fontSize:11, color:'var(--text-3)' }}>
          {tank.motorMode === 'auto' ? `Auto: starts at ${tank.autoStart}%, stops at ${tank.autoStop}%` : 'Manual control · tap power to toggle'}
        </div>
        <div style={{ marginTop:10, display:'flex', alignItems:'center', gap:8 }}>
          <Segmented size="sm"
            options={[{ value:'auto', label:'Auto' }, { value:'manual', label:'Manual' }]}
            value={tank.motorMode}
            disabled={!controlsReady || !!tankPending.motorMode || !canCtrl}
            onChange={handleMode}/>
          {tankPending.motorMode && <PendingDots size="sm" color="var(--cyan)"/>}
        </div>
      </div>

      <div style={{ height:1, background:'var(--border)', margin:'6px 0 14px' }}/>

      <ValveRow icon="pipe" label="Inlet Valve"  open={tank.valveIn}  onChange={handleInletValve}  disabled={!controlsReady || !canCtrl} pending={tankPending.valve}/>
      <ValveRow icon="pipe" label="Outlet Valve" open={tank.valveOut} onChange={handleOutletValve} disabled={!controlsReady || !canCtrl} pending={tankPending.valve}/>
      <div style={{ fontSize:11, color:'var(--text-3)', textAlign:'center', marginTop:4, opacity: waitingForLive ? 0.35 : 1 }}>
        Flow: <span style={{ color: tank.motor && tank.valveIn ? 'var(--green)' : 'var(--text-2)', fontWeight:500 }}>{tank.motor && tank.valveIn ? 'Active' : 'Stopped'}</span>
      </div>

      {waitingForLive && <LiveDataOverlay compact card/>}
    </Card>
  </>
);

// ── Live tab ──────────────────────────────────────────────────────────
const _TankLiveTab = ({ tank, tone, toneColor, waitingForLive, controlsReady }) => (
  <>
    <div style={{ display:'flex', alignItems:'center', justifyContent:'center', position:'relative', height:240, marginBottom:8 }}>
      <div style={{ position:'relative', width:220, height:220 }}>
        <CircularRing level={tank.level} size={220}/>
        <div style={{ position:'absolute', inset:30, display:'flex', alignItems:'center', justifyContent:'center' }}>
          {tank.type === 'Underground'
            ? <UndergroundTankVisual level={tank.level} online={tank.online} motor={tank.motor && tank.online} valveOpen={tank.valveIn && tank.online} width={120} height={160} big/>
            : <TankVisual level={tank.level} online={tank.online} motor={tank.motor && tank.online} valveOpen={tank.valveIn && tank.online} width={120} height={160} big/>
          }
        </div>
      </div>
      <div style={{ position:'absolute', right:8, top:8, textAlign:'right' }}>
        <div className="num" style={{ fontSize:48, fontWeight:700, color:toneColor, lineHeight:1, letterSpacing:-1.5 }}>{Math.round(tank.level)}<span style={{ fontSize:20, color:'var(--text-2)', fontWeight:500 }}>%</span></div>
        <div className="num" style={{ fontSize:12, color:'var(--text-2)', marginTop:4 }}>{AC.fmtNum(Math.round(tank.capacity * tank.level / 100))} / {AC.fmtNum(tank.capacity)} L</div>
        <div style={{ marginTop:8 }}>
          <Badge color={!tank.deviceId ? 'gray' : !tank.online ? 'red' : controlsReady ? 'green' : 'gray'} size="sm">
            <StatusDot kind={!tank.deviceId ? 'gray' : !tank.online ? 'red' : controlsReady ? 'green' : 'gray'} size={6} pulse={controlsReady}/>
            {!tank.deviceId ? 'No Device' : !tank.online ? 'Offline' : !tank.mqttReceived ? 'Waiting…' : 'Online'}
          </Badge>
        </div>
      </div>
    </div>

    <SectionTitle>Live Telemetry</SectionTitle>
    <div style={{ position:'relative' }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:8, opacity: waitingForLive ? 0.35 : 1, transition:'opacity 180ms ease' }}>
        <Metric icon="droplet"     label="Water Level"   value={waitingForLive ? '—' : Math.round(tank.level)}                                 unit="%" tone={waitingForLive ? undefined : tone}/>
        <Metric icon="waves"       label="Volume"        value={waitingForLive ? '—' : AC.fmtNum(Math.round(tank.capacity * tank.level / 100))} unit="L"/>
        <Metric icon="clock"       label="Runtime today" value={waitingForLive ? '—' : `${Math.floor(tank.runtime / 60)}h ${Math.round(tank.runtime) % 60}m`}/>
        <Metric icon="activity"    label="Flow rate"     value={waitingForLive ? '—' : (tank.motor ? tank.flow.toFixed(1) : '0.0')}            unit="L/min" tone={!waitingForLive && tank.motor ? 'cyan' : undefined}/>
        <Metric icon="zap"         label="Voltage"       value={controlsReady ? tank.voltage : '—'}                                            unit="V"/>
        <Metric icon="bolt"        label="Current"       value={controlsReady ? tank.current.toFixed(1) : '—'}                                 unit="A"/>
      </div>
      {waitingForLive && <LiveDataOverlay/>}
    </div>

    <SectionTitle>Today's Summary</SectionTitle>
    <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8 }}>
      <Metric icon="zap"         label="Energy"     value={tank.energyToday.toFixed(1)}          unit="kWh"/>
      <Metric icon="waves"       label="Consumed"   value={AC.fmtNum(tank.consumedToday)}         unit="L"/>
      <Metric icon="refresh"     label="Cycles"     value={tank.cycles}/>
      <Metric icon="thermometer" label="Water temp" value={tank.temp}                             unit="°C"/>
      <Metric icon="sparkle"     label="TDS"        value={tank.tds}                              unit="ppm"/>
      <Metric icon="clock"       label="Last fill"  value={Number(tank.lastFill).toFixed(1)}      unit="min"/>
    </div>
  </>
);

// ── Settings tab ──────────────────────────────────────────────────────
const _TankSettingsTab = ({ tank, draftSet, setDraftSet, tankPending, canAdmin, updateTank, onSave }) => (
  <>
    <SectionTitle>Auto-Control Levels</SectionTitle>
    <Card style={{ padding:16 }}>
      <SliderRow label="Auto-Start Level" hint="Motor starts when level drops below this" value={draftSet.autoStart} onChange={v => setDraftSet(s => ({ ...s, autoStart: v }))} color="var(--green)"/>
      <SliderRow label="Auto-Stop Level"  hint="Motor stops when level reaches this"      value={draftSet.autoStop}  onChange={v => setDraftSet(s => ({ ...s, autoStop:  v }))} color="var(--cyan)"/>
      <SliderRow label="Low Level Alarm"  hint="Alert when level drops below"             value={draftSet.lowAlarm}  onChange={v => setDraftSet(s => ({ ...s, lowAlarm:  v }))} color="var(--red)"/>
      <SliderRow label="High Level Alarm" hint="Alert when level exceeds"                 value={draftSet.highAlarm} onChange={v => setDraftSet(s => ({ ...s, highAlarm: v }))} color="var(--amber)"/>
    </Card>

    <SectionTitle>Electrical Limits</SectionTitle>
    <Card style={{ padding:16 }}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
        <NumField label="Max Runtime"   suffix="min" value={draftSet.maxRuntime} onChange={v => setDraftSet(s => ({ ...s, maxRuntime: v }))}/>
        <NumField label="V Low Cutoff"  suffix="V"   value={draftSet.vLow}       onChange={v => setDraftSet(s => ({ ...s, vLow:       v }))}/>
        <NumField label="V High Cutoff" suffix="V"   value={draftSet.vHigh}      onChange={v => setDraftSet(s => ({ ...s, vHigh:      v }))}/>
        <NumField label="Current Limit" suffix="A"   value={draftSet.iMax}       onChange={v => setDraftSet(s => ({ ...s, iMax:       v }))}/>
      </div>
    </Card>

    <SectionTitle>Protection</SectionTitle>
    <Card style={{ padding:16 }}>
      <ProtectionRow label="Dry Run Protection"  hint="Stops motor if no flow detected" on={tank.dryRun}   onChange={v => updateTank(tank.id, { dryRun:   v })}/>
      <ProtectionRow label="Overflow Protection" hint="Auto-stops at high alarm level"  on={tank.overflow} onChange={v => updateTank(tank.id, { overflow: v })}/>
    </Card>

    <SectionTitle>Device Info</SectionTitle>
    <Card style={{ padding:14 }}>
      <_InfoRow label="Firmware"  value={tank.fw || '—'}/>
      <_InfoRow label="Device ID" value={tank.deviceId || '—'} mono/>
      <_InfoRow label="Capacity"  value={`${AC.fmtNum(tank.capacity)} L`}/>
      <_InfoRow label="Location"  value={tank.location || '—'}/>
      <_InfoRow label="Last seen" value={tank.lastSeen || '—'}/>
      <_InfoRow label="Signal"    value={`${tank.signal ?? 0}/4 bars`} last/>
    </Card>

    <SectionTitle>Health Checks</SectionTitle>
    <Card style={{ padding:14 }}>
      <_HealthRow label="Water level sensor"   ok={tank.online && tank.level >= 0 && tank.level <= 100}/>
      <_HealthRow label="Flow sensor"          ok={tank.online && !(tank.motor && tank.flow < 0.5)}/>
      <_HealthRow label="Voltage in range"     ok={!tank.online || (tank.voltage >= tank.vLow && tank.voltage <= tank.vHigh)}/>
      <_HealthRow label="Current within limit" ok={!tank.online || tank.current <= tank.iMax}/>
      <_HealthRow label="Connectivity"         ok={!!tank.online} last/>
    </Card>

    <Btn full variant="primary" icon={tankPending.setpoints ? undefined : 'check'}
      onClick={onSave} disabled={!canAdmin || !!tankPending.setpoints} style={{ marginTop:16 }}>
      {tankPending.setpoints ? <PendingDots color="#0a0e27"/> : !canAdmin ? 'Admin role required' : 'Save'}
    </Btn>
  </>
);

// ── Shared helpers ────────────────────────────────────────────────────
const _InfoRow = ({ label, value, mono = false, last = false }) => (
  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 0', borderBottom: last ? 'none' : '1px solid var(--border)' }}>
    <span style={{ fontSize:13, color:'var(--text-2)' }}>{label}</span>
    <span style={{ fontSize:13, fontWeight:500, fontFamily: mono ? 'JetBrains Mono, monospace' : undefined, color: mono ? 'var(--cyan)' : '#fff' }}>{value}</span>
  </div>
);

const _HealthRow = ({ label, ok, last = false }) => (
  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 0', borderBottom: last ? 'none' : '1px solid var(--border)' }}>
    <span style={{ fontSize:13, color:'var(--text-2)' }}>{label}</span>
    <span style={{ display:'flex', alignItems:'center', gap:6, fontSize:12, color: ok ? 'var(--green)' : 'var(--red)' }}>
      <StatusDot kind={ok ? 'on' : 'red'} size={6}/>{ok ? 'OK' : 'Check'}
    </span>
  </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>
);

const ValveRow = ({ icon, label, open, onChange, disabled, pending }) => (
  <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'8px 0', opacity: disabled ? 0.45 : 1 }}>
    <div style={{ display:'flex', alignItems:'center', gap:10 }}>
      <div style={{ width:30, height:30, borderRadius:8, background: open ? 'rgba(0,212,255,0.14)' : 'rgba(255,255,255,0.04)', display:'flex', alignItems:'center', justifyContent:'center' }}>
        <Ic name={icon} size={14} color={pending ? 'var(--text-3)' : open ? 'var(--cyan)' : 'var(--text-2)'}/>
      </div>
      <div>
        <div style={{ fontSize:14, fontWeight:500 }}>{label}</div>
        <div style={{ fontSize:11, color:'var(--text-3)' }}>{pending ? <PendingDots size="sm" color="var(--text-3)"/> : (open ? 'Open · flow active' : 'Closed')}</div>
      </div>
    </div>
    {pending ? <PendingDots size="sm" color="var(--cyan)"/> : <Toggle on={open} onChange={onChange} color="var(--cyan)" disabled={disabled}/>}
  </div>
);

const ProtectionRow = ({ label, hint, on, onChange }) => (
  <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'8px 0' }}>
    <div>
      <div style={{ fontSize:14, fontWeight:500 }}>{label}</div>
      <div style={{ fontSize:11, color:'var(--text-3)', marginTop:2 }}>{hint}</div>
    </div>
    <Toggle on={on} onChange={onChange} color="var(--teal)"/>
  </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>
);

window.Detail = Detail;