// Occupancy Sensor OS500 detail — Controls | Live | Settings tabs

const OsDetail = ({ tank, onBack, updateTank, issueCmd, pendingCmds }) => {
  const pending = pendingCmds?.[tank.id] || {};
  const _isVirtualOS = !tank.deviceId || !!tank.virtual;

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

  const [draftSp, setDraftSp] = useState(() => ({
    vacancyTimeout:   tank.osVacancyTimeout   ?? 300,
    holdTime:         tank.osHoldTime         ?? 60,
    sensitivity:      tank.osSensitivity      ?? 5,
    relayMode:        tank.osRelayMode        ?? 'auto',
    nightModeStart:   tank.osNightModeStart   ?? '',
    nightModeEnd:     tank.osNightModeEnd     ?? '',
    nightSensitivity: tank.osNightSensitivity ?? 3,
    zone:             tank.osZone             ?? 'Room',
  }));
  const [spSaving, setSpSaving] = useState(false);
  const [spSaved,  setSpSaved]  = useState(false);

  const _osRef = useRef(tank);
  useEffect(() => { _osRef.current = tank; });
  useEffect(() => {
    if (tank.deviceId && !tank.virtual) return;
    let ticks = 0;
    const id = setInterval(() => {
      const t = _osRef.current;
      if (t.deviceId && !t.virtual) return;
      ticks += 1;
      if (t.occupied) {
        updateTank(t.id, { duration: (t.duration || 0) + 2 });
        if (ticks >= 15) { // leave after ~30s
          updateTank(t.id, { occupied: false, relayOn: t.relayMode === 'auto' ? false : t.relayOn });
          ticks = 0;
        }
      } else {
        if (ticks >= 25) { // detect after ~50s
          updateTank(t.id, { occupied: true, countToday: (t.countToday || 0) + 1, duration: 0, relayOn: t.relayMode === 'auto' ? true : t.relayOn });
          ticks = 0;
        }
      }
    }, 2000);
    return () => clearInterval(id);
  }, [tank.deviceId, tank.virtual]); // eslint-disable-line

  useEffect(() => {
    setDraftSp(prev => ({
      vacancyTimeout:   tank.osVacancyTimeout   ?? prev.vacancyTimeout,
      holdTime:         tank.osHoldTime         ?? prev.holdTime,
      sensitivity:      tank.osSensitivity      ?? prev.sensitivity,
      relayMode:        tank.osRelayMode        ?? prev.relayMode,
      nightModeStart:   tank.osNightModeStart   ?? prev.nightModeStart,
      nightModeEnd:     tank.osNightModeEnd     ?? prev.nightModeEnd,
      nightSensitivity: tank.osNightSensitivity ?? prev.nightSensitivity,
      zone:             tank.osZone             ?? prev.zone,
    }));
  }, [tank.id]); // eslint-disable-line react-hooks/exhaustive-deps

  const saveSetpoints = async () => {
    setSpSaving(true);
    try {
      if (window.API) await API.put(`/api/tanks/${tank.id}/setpoints`, draftSp);
      if (tank.deviceId && window.MQ) MQ.publishSetpoints(tank.deviceId, draftSp);
      updateTank?.(tank.id, {
        osVacancyTimeout:   draftSp.vacancyTimeout,
        osHoldTime:         draftSp.holdTime,
        osSensitivity:      draftSp.sensitivity,
        osRelayMode:        draftSp.relayMode,
        osNightModeStart:   draftSp.nightModeStart,
        osNightModeEnd:     draftSp.nightModeEnd,
        osNightSensitivity: draftSp.nightSensitivity,
        osZone:             draftSp.zone,
      });
      setSpSaved(true);
      setTimeout(() => setSpSaved(false), 2500);
    } finally {
      setSpSaving(false);
    }
  };

  const resetCounters = async () => {
    if (!window.API) return;
    try {
      await API.post(`/api/tanks/${tank.id}/reset-counters`, {});
      updateTank?.(tank.id, { countToday: 0, runtimeToday: 0, duration: 0 });
      window.__toast?.('Daily counters reset', { kind: 'success' });
    } catch {
      window.__toast?.('Failed to reset counters', { kind: 'error' });
    }
  };

  const issueRelay = (on) => {
    if (_isVirtualOS) { updateTank?.(tank.id, { relayOn: on }); return; }
    if (!tank.deviceId || !window.MQ) return;
    issueCmd?.(tank.id, 'relay', () => MQ.publishCmd(tank.deviceId, 'relay', on));
  };

  const issueRelayMode = (mode) => {
    if (!tank.deviceId || !window.MQ) return;
    MQ.publishCmd(tank.deviceId, 'relay_mode', mode);
    updateTank?.(tank.id, { relayMode: mode });
  };

  const occupied    = !!tank.occupied;
  const offline     = !_isVirtualOS && !tank.online;
  const waitingLive = !_isVirtualOS && tank.online && !tank.mqttReceived;
  const zone        = tank.osZone || 'Room';

  const fmtSecs = (s) => {
    if (!s || s < 1) return '—';
    if (s >= 3600) return `${Math.floor(s / 3600)}h ${Math.floor((s % 3600) / 60)}m`;
    if (s >= 60)   return `${Math.floor(s / 60)}m ${s % 60}s`;
    return `${s}s`;
  };

  const tabs = [
    { key: 'controls', label: 'Controls' },
    { key: 'live',     label: 'Live'     },
    { key: 'settings', label: 'Settings' },
  ];

  const relayMode = tank.relayMode || draftSp.relayMode;
  const swipe = useSwipeTabs(tabs, tab, setTab, onBack);

  return (
    <div onTouchStart={swipe.onTouchStart} onTouchEnd={swipe.onTouchEnd} style={{ padding:'0 0 100px 0', minHeight:'100vh' }}>
      {/* Header */}
      <div style={{ display:'flex', alignItems:'center', gap:12, padding:'16px 16px 8px', position:'sticky', top:0, zIndex:10, background:'var(--bg)', borderBottom:'1px solid var(--border)' }}>
        <button onClick={onBack} style={{ background:'rgba(255,255,255,0.06)', border:'1px solid var(--border)', borderRadius:12, width:36, height:36, display:'flex', alignItems:'center', justifyContent:'center', color:'var(--text-2)' }}>
          <Ic name="arrowLeft" size={18}/>
        </button>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontWeight:700, fontSize:17, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{tank.name}</div>
          <div style={{ fontSize:11, color:'var(--text-3)', marginTop:1 }}>{tank.location} · {zone}</div>
        </div>
        <Badge color={_isVirtualOS ? 'amber' : offline ? 'red' : waitingLive ? 'gray' : 'green'} size="sm">
          <StatusDot kind={_isVirtualOS ? 'amber' : offline ? 'red' : waitingLive ? 'gray' : 'green'} size={6} pulse={!_isVirtualOS && !offline && !waitingLive}/>
          {_isVirtualOS ? 'Virtual' : offline ? 'Offline' : waitingLive ? 'Waiting…' : 'Online'}
        </Badge>
      </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:'14px 16px 0', display:'flex', flexDirection:'column', gap:12 }}>

        {/* ── Controls tab: relay control ── */}
        {tab === 'controls' && (
          <Card style={{ padding:14 }}>
            <div style={{ fontSize:11, fontWeight:600, color:'var(--text-3)', letterSpacing:0.6, textTransform:'uppercase', marginBottom:12 }}>Relay Control</div>

            <div style={{ marginBottom:12 }}>
              <div style={{ fontSize:12, color:'var(--text-2)', marginBottom:6 }}>Mode</div>
              <div style={{ display:'flex', gap:8 }}>
                {['auto', 'manual'].map(m => (
                  <button key={m} onClick={() => { setDraftSp(p => ({ ...p, relayMode: m })); issueRelayMode(m); }} style={{
                    flex:1, padding:'9px 0', borderRadius:10, fontSize:13, fontWeight:500, fontFamily:'inherit',
                    background: relayMode === m ? 'rgba(0,212,255,0.14)' : 'rgba(255,255,255,0.04)',
                    border: `1px solid ${relayMode === m ? 'rgba(0,212,255,0.5)' : 'var(--border)'}`,
                    color: relayMode === m ? 'var(--cyan)' : 'var(--text-2)', cursor:'pointer',
                  }}>
                    {m === 'auto' ? 'Auto (follows PIR)' : 'Manual'}
                  </button>
                ))}
              </div>
            </div>

            {relayMode === 'manual' && (
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'10px 12px', background:'rgba(255,255,255,0.04)', borderRadius:10, border:'1px solid var(--border)' }}>
                <div>
                  <div style={{ fontSize:13, fontWeight:500 }}>Relay Switch</div>
                  <div style={{ fontSize:11, color:'var(--text-3)', marginTop:2 }}>Manually control the relay output</div>
                </div>
                <Toggle
                  value={!!tank.relayOn}
                  onChange={v => { updateTank?.(tank.id, { relayOn: v }); issueRelay(v); }}
                  disabled={(!_isVirtualOS && offline) || !!pending.relay}
                />
              </div>
            )}

            {relayMode === 'auto' && (
              <div style={{ fontSize:12, color:'var(--text-3)', padding:'8px 12px', background:'rgba(0,212,255,0.04)', border:'1px solid rgba(0,212,255,0.12)', borderRadius:8, lineHeight:1.5 }}>
                Relay turns ON when motion is detected and stays on for {draftSp.holdTime}s after the last detection.
              </div>
            )}
          </Card>
        )}

        {/* ── Live tab: hero + occupancy + today's activity ── */}
        {tab === 'live' && (
          <>
            <Card style={{ padding:24, textAlign:'center' }}>
              <div style={{ position:'relative', display:'inline-flex', alignItems:'center', justifyContent:'center', marginBottom:16 }}>
                <div style={{
                  position:'absolute', width:120, height:120, borderRadius:'50%',
                  border: `2px solid ${occupied ? 'rgba(0,230,118,0.4)' : 'rgba(255,255,255,0.08)'}`,
                  animation: occupied ? 'pulse-glow 2s ease-in-out infinite' : 'none',
                }}/>
                <div style={{
                  width:96, height:96, borderRadius:'50%',
                  background: occupied ? 'radial-gradient(circle, rgba(0,230,118,0.2) 0%, rgba(0,230,118,0.05) 70%)' : 'rgba(255,255,255,0.04)',
                  border: `2px solid ${occupied ? 'var(--green)' : 'var(--border)'}`,
                  display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
                  transition:'all 400ms ease',
                }}>
                  <Ic name={occupied ? 'user' : 'userX'} size={28} color={occupied ? 'var(--green)' : 'var(--text-3)'}/>
                </div>
              </div>

              <div style={{ fontSize:22, fontWeight:700, color: occupied ? 'var(--green)' : 'var(--text-2)', marginBottom:4 }}>
                {offline ? 'Offline' : occupied ? 'OCCUPIED' : 'VACANT'}
              </div>
              <div style={{ fontSize:13, color:'var(--text-3)' }}>
                {occupied ? `Session: ${fmtSecs(tank.duration || 0)}` : 'No motion detected'}
              </div>

              <div style={{ marginTop:12, display:'inline-flex', alignItems:'center', gap:6, padding:'5px 12px', borderRadius:999, background: tank.relayOn ? 'rgba(0,230,118,0.08)' : 'rgba(255,255,255,0.04)', border: `1px solid ${tank.relayOn ? 'rgba(0,230,118,0.3)' : 'var(--border)'}` }}>
                <StatusDot kind={tank.relayOn ? 'green' : 'gray'} size={6} pulse={!!tank.relayOn}/>
                <span style={{ fontSize:12, color: tank.relayOn ? 'var(--green)' : 'var(--text-3)', fontWeight:500 }}>
                  Relay {tank.relayOn ? 'ON' : 'OFF'}
                </span>
              </div>
            </Card>

            <Card style={{ padding:14 }}>
              <div style={{ fontSize:11, fontWeight:600, color:'var(--text-3)', letterSpacing:0.6, textTransform:'uppercase', marginBottom:10 }}>Today's Activity</div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8 }}>
                {[
                  { label:'Events',      val: tank.countToday ?? 0,                           color:'var(--cyan)'  },
                  { label:'Occupied',    val: fmtSecs(tank.runtimeToday ?? 0),                color:'var(--green)' },
                  { label:'Sensitivity', val: `${tank.sensitivity ?? draftSp.sensitivity}/10`, color:'var(--amber)' },
                ].map(({ label, val, color }) => (
                  <div key={label} style={{ background:'rgba(255,255,255,0.04)', borderRadius:10, padding:'10px 8px', textAlign:'center' }}>
                    <div style={{ fontSize:9, color:'var(--text-3)', letterSpacing:0.4, textTransform:'uppercase', marginBottom:5 }}>{label}</div>
                    <div className="num" style={{ fontSize:16, fontWeight:700, color }}>{val}</div>
                  </div>
                ))}
              </div>
              <button onClick={resetCounters} style={{ marginTop:12, width:'100%', background:'rgba(255,255,255,0.04)', border:'1px solid var(--border)', borderRadius:10, padding:'9px 0', fontSize:13, color:'var(--text-2)', cursor:'pointer', fontFamily:'inherit' }}>
                Reset Today's Counts
              </button>
            </Card>
          </>
        )}

        {/* ── Settings tab: setpoints + connectivity + maintenance ── */}
        {tab === 'settings' && (
          <>
            <Card style={{ padding:14 }}>
              <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
                <div>
                  <div style={{ fontSize:12, color:'var(--text-2)', marginBottom:6 }}>Zone Name</div>
                  <input value={draftSp.zone} onChange={e => setDraftSp(p => ({ ...p, zone: e.target.value }))}
                    style={{ width:'100%', background:'rgba(255,255,255,0.06)', border:'1px solid var(--border)', borderRadius:10, padding:'10px 12px', color:'var(--text)', fontSize:14, fontFamily:'inherit' }}
                    placeholder="e.g. Living Room"/>
                </div>

                <div>
                  <div style={{ display:'flex', justifyContent:'space-between', marginBottom:6 }}>
                    <span style={{ fontSize:12, color:'var(--text-2)' }}>Vacancy Timeout</span>
                    <span className="num" style={{ fontSize:12, color:'var(--cyan)', fontWeight:600 }}>{draftSp.vacancyTimeout}s</span>
                  </div>
                  <input type="range" min={10} max={600} step={10} value={draftSp.vacancyTimeout} onChange={e => setDraftSp(p => ({ ...p, vacancyTimeout: +e.target.value }))}/>
                  <div style={{ display:'flex', justifyContent:'space-between', fontSize:10, color:'var(--text-3)', marginTop:2 }}>
                    <span>10s</span><span>10 min</span>
                  </div>
                </div>

                <div>
                  <div style={{ display:'flex', justifyContent:'space-between', marginBottom:6 }}>
                    <span style={{ fontSize:12, color:'var(--text-2)' }}>Relay Hold Time</span>
                    <span className="num" style={{ fontSize:12, color:'var(--teal)', fontWeight:600 }}>{draftSp.holdTime}s</span>
                  </div>
                  <input type="range" min={0} max={600} step={10} value={draftSp.holdTime} onChange={e => setDraftSp(p => ({ ...p, holdTime: +e.target.value }))}/>
                  <div style={{ display:'flex', justifyContent:'space-between', fontSize:10, color:'var(--text-3)', marginTop:2 }}>
                    <span>0s (instant off)</span><span>10 min</span>
                  </div>
                </div>

                <div>
                  <div style={{ display:'flex', justifyContent:'space-between', marginBottom:6 }}>
                    <span style={{ fontSize:12, color:'var(--text-2)' }}>Sensitivity</span>
                    <span className="num" style={{ fontSize:12, color:'var(--amber)', fontWeight:600 }}>{draftSp.sensitivity}/10</span>
                  </div>
                  <input type="range" min={1} max={10} step={1} value={draftSp.sensitivity} onChange={e => setDraftSp(p => ({ ...p, sensitivity: +e.target.value }))}/>
                  <div style={{ display:'flex', justifyContent:'space-between', fontSize:10, color:'var(--text-3)', marginTop:2 }}>
                    <span>Low</span><span>High</span>
                  </div>
                </div>

                <div style={{ borderTop:'1px solid var(--border)', paddingTop:14 }}>
                  <div style={{ fontSize:12, color:'var(--text-2)', marginBottom:10 }}>Night Mode</div>
                  <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:10 }}>
                    {[{ label:'Start', key:'nightModeStart' }, { label:'End', key:'nightModeEnd' }].map(({ label, key }) => (
                      <div key={key}>
                        <div style={{ fontSize:11, color:'var(--text-3)', marginBottom:4 }}>{label}</div>
                        <input type="time" value={draftSp[key]} onChange={e => setDraftSp(p => ({ ...p, [key]: e.target.value }))}
                          style={{ width:'100%', background:'rgba(255,255,255,0.06)', border:'1px solid var(--border)', borderRadius:8, padding:'8px 10px', color:'var(--text)', fontSize:13, fontFamily:'inherit' }}/>
                      </div>
                    ))}
                  </div>
                  <div style={{ display:'flex', justifyContent:'space-between', marginBottom:6 }}>
                    <span style={{ fontSize:12, color:'var(--text-2)' }}>Night Sensitivity</span>
                    <span className="num" style={{ fontSize:12, color:'var(--info)', fontWeight:600 }}>{draftSp.nightSensitivity}/10</span>
                  </div>
                  <input type="range" min={1} max={10} step={1} value={draftSp.nightSensitivity} onChange={e => setDraftSp(p => ({ ...p, nightSensitivity: +e.target.value }))}/>
                  <div style={{ fontSize:10, color:'var(--text-3)', marginTop:4, lineHeight:1.4 }}>Leave times blank to disable night mode.</div>
                </div>

                <Btn
                  onClick={saveSetpoints} disabled={spSaving}
                  style={{ marginTop:4, background: spSaved ? 'rgba(0,230,118,0.12)' : undefined, borderColor: spSaved ? 'rgba(0,230,118,0.4)' : undefined, color: spSaved ? 'var(--green)' : undefined }}>
                  {spSaving ? 'Saving…' : spSaved ? '✓ Saved' : 'Save'}
                </Btn>
              </div>
            </Card>

          </>
        )}
      </div>
    </div>
  );
};

window.OsDetail = OsDetail;