// Smart Plug detail screen — Controls | Live | Settings tabs

const _PLUG_STORE_KEY = 'velonics_plug_data';
function _plugLoad(id)       { try { return JSON.parse(localStorage.getItem(_PLUG_STORE_KEY) || '{}')[id] || {}; } catch { return {}; } }
function _plugSave(id, data) { try { const all = JSON.parse(localStorage.getItem(_PLUG_STORE_KEY) || '{}'); all[id] = { ...all[id], ...data }; localStorage.setItem(_PLUG_STORE_KEY, JSON.stringify(all)); } catch {} }

const _ROLE_LVL_P = { viewer: 0, operator: 1, admin: 2, owner: 3 };

const PlugDetail = ({ tank: plug, onBack, updateTank, issueCmd, pendingCmds }) => {
  const toast = useToast();
  const plugRef = useRef(plug);
  plugRef.current = plug;

  const myRoleP   = plug.myRole || 'owner';
  const canCtrlP  = (_ROLE_LVL_P[myRoleP] ?? 3) >= _ROLE_LVL_P['operator'];
  const canAdminP = (_ROLE_LVL_P[myRoleP] ?? 3) >= _ROLE_LVL_P['admin'];
  const _isVirtualPlug = !plug.deviceId || !!plug.virtual;

  const plugPending    = (pendingCmds && pendingCmds[plug.id]) || {};
  const waitingForLive = !!plug.deviceId && plug.online && !plug.mqttReceived;
  const controlsReady  = plug.online && !!plug.mqttReceived;

  const [scheduleEditor, setScheduleEditor] = useState(null);
  const [timerSheet,     setTimerSheet]     = useState(false);
  const [tab,            setTab]            = useState('controls');
  const [tick,           setTick]           = useState(0);

  useEffect(() => {
    const stored = _plugLoad(plug.id);
    const patch = {};
    if (stored.switchType)                patch.switchType    = stored.switchType;
    if (stored.overload)                  patch.overload      = stored.overload;
    if (stored.childLock    !== undefined) patch.childLock     = stored.childLock;
    if (stored.ledIndicator !== undefined) patch.ledIndicator  = stored.ledIndicator;
    if (stored.overloadAlert !== undefined) patch.overloadAlert = stored.overloadAlert;
    if (Object.keys(patch).length) updateTank(plug.id, patch);

    if (window.API) {
      API.get(`/api/plugs/${plug.id}/schedules`)
        .then(data => { if (Array.isArray(data)) updateTank(plug.id, { schedules: data }); })
        .catch(() => {});
      API.get(`/api/plugs/${plug.id}/timer`)
        .then(data => { updateTank(plug.id, { timer: data && data.endsAt > Date.now() ? data : null }); })
        .catch(() => {});
    }
  }, []); // eslint-disable-line

  useEffect(() => {
    if (!plug.timer) return;
    const id = setInterval(() => setTick(x => x + 1), 1000);
    return () => clearInterval(id);
  }, [plug.timer]);

  useEffect(() => {
    if (!plug.timer) return;
    if (plug.timer.endsAt <= Date.now()) updateTank(plug.id, { timer: null });
  }, [tick]); // eslint-disable-line

  useEffect(() => {
    if (plug.deviceId && !plug.virtual) return;
    const id = setInterval(() => {
      const p = plugRef.current;
      if (p.deviceId && !p.virtual) return;
      if (!p.on) return;
      const watt = Math.round(1200 + (Math.random() - 0.5) * 100);
      const volt = 230 + Math.round((Math.random() - 0.5) * 8);
      updateTank(p.id, { power: watt, current: parseFloat((watt / volt).toFixed(2)), voltage: volt });
    }, 2000);
    return () => clearInterval(id);
  }, [plug.deviceId, plug.virtual]); // eslint-disable-line

  function save(patch) {
    updateTank(plug.id, patch);
    const next = { ...plugRef.current, ...patch };
    _plugSave(plug.id, {
      switchType:    next.switchType    ?? plugRef.current.switchType,
      overload:      next.overload      ?? plugRef.current.overload,
      overloadAlert: next.overloadAlert ?? plugRef.current.overloadAlert,
      childLock:     next.childLock     ?? plugRef.current.childLock,
      ledIndicator:  next.ledIndicator  ?? plugRef.current.ledIndicator,
    });
    if (window.API && 'switchType' in patch) {
      API.post('/api/tanks', { ...next }).catch(() => {});
    }
  }

  const togglePower = () => {
    if (!canCtrlP) { window.__toast?.('Your role cannot control this device', { kind: 'error' }); return; }
    const next = !plug.on;
    if (_isVirtualPlug) {
      updateTank(plug.id, { on: next, current: next ? 5.2 : 0, power: next ? 1200 : 0 });
      toast(`${plug.appliance || plug.name} ${next ? 'ON' : 'OFF'}`, { kind: 'success', icon: 'power' });
      return;
    }
    if (plug.deviceId && window.MQ) issueCmd(plug.id, 'power', () => MQ.publishCmd(plug.deviceId, 'power', next));
    toast(`Turning ${plug.appliance || plug.name} ${next ? 'ON' : 'OFF'}…`, { kind: 'info', icon: 'power' });
  };

  const saveSchedule = async (sched) => {
    const schedules = plugRef.current.schedules || [];
    const exists = sched.id && schedules.some(s => s.id === sched.id);
    try {
      if (exists) {
        await API.put(`/api/plugs/${plug.id}/schedules/${sched.id}`, sched);
        updateTank(plug.id, { schedules: schedules.map(s => s.id === sched.id ? { ...s, ...sched } : s) });
      } else {
        const created = await API.post(`/api/plugs/${plug.id}/schedules`, sched);
        updateTank(plug.id, { schedules: [...schedules, created] });
      }
      setScheduleEditor(null);
      toast(exists ? 'Schedule updated' : 'Schedule added', { kind: 'success', icon: 'calendar' });
    } catch {
      toast('Failed to save schedule', { kind: 'error' });
    }
  };

  const deleteSchedule = async (id) => {
    try {
      await API.del(`/api/plugs/${plug.id}/schedules/${id}`);
      updateTank(plug.id, { schedules: (plugRef.current.schedules || []).filter(s => s.id !== id) });
      setScheduleEditor(null);
      toast('Schedule removed', { kind: 'info' });
    } catch {
      toast('Failed to delete schedule', { kind: 'error' });
    }
  };

  const toggleSchedule = async (id, enabled) => {
    try {
      await API.put(`/api/plugs/${plug.id}/schedules/${id}`, { enabled });
      updateTank(plug.id, { schedules: (plugRef.current.schedules || []).map(s => s.id === id ? { ...s, enabled } : s) });
    } catch {
      toast('Failed to update schedule', { kind: 'error' });
    }
  };

  const setTimer = async (minutes, action) => {
    if (minutes <= 0) {
      try { await API.del(`/api/plugs/${plug.id}/timer`); } catch {}
      updateTank(plug.id, { timer: null });
      toast('Timer cancelled', { kind: 'info' });
    } else {
      const endsAt = Date.now() + minutes * 60_000;
      try {
        const saved = await API.post(`/api/plugs/${plug.id}/timer`, { action, endsAt, label: `${minutes} min` });
        updateTank(plug.id, { timer: { id: saved.id, action, endsAt, label: `${minutes} min` } });
        toast(`${action === 'off' ? 'Turn off' : 'Turn on'} in ${minutes} min`, { kind: 'success', icon: 'clock' });
      } catch {
        toast('Failed to set timer', { kind: 'error' });
      }
    }
    setTimerSheet(false);
  };

  const saveSettings = (patch) => {
    save(patch);
    if (!plug.deviceId || !window.MQ) return;
    if ('overload' in patch)
      MQ.publishSetpoints(plug.deviceId, { vLow: plug.vLow || 180, vHigh: plug.vHigh || 260, iMax: patch.overload, powerMax: plug.powerMax || 3500 });
    if ('childLock'    in patch) issueCmd(plug.id, 'childlock',    () => MQ.publishCmd(plug.deviceId, 'childlock',    patch.childLock));
    if ('ledIndicator' in patch) issueCmd(plug.id, 'ledindicator', () => MQ.publishCmd(plug.deviceId, 'ledindicator', patch.ledIndicator));
  };

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

  return (
    <div onTouchStart={swipe.onTouchStart} onTouchEnd={swipe.onTouchEnd} style={{ paddingBottom: 32, minHeight: '100dvh' }}>
      {/* Header */}
      <div style={{ position:'sticky', top:0, zIndex:5, 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' }}>{plug.name}</div>
          <div style={{ fontSize:11, color:'var(--text-3)' }}>{plug.location}{plug.fw && plug.fw !== '—' ? ` · FW ${plug.fw}` : ''}</div>
        </div>
      </div>

      {myRoleP !== '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)' }}>
            {myRoleP === 'viewer' ? 'Read-only access — controls and schedules are disabled' : myRoleP === 'operator' ? 'Operator access — settings 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 }}>
        {[
          { key: 'controls', label: 'Controls' },
          { key: 'live',     label: 'Live'     },
          { key: 'settings', label: 'Settings' },
        ].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: hero toggle, timer, schedules ── */}
        {tab === 'controls' && (
          <>
            <PlugHero plug={plug} onToggle={togglePower} tick={tick} pending={plugPending.power} controlsReady={controlsReady}/>

            <SectionTitle action={
              plug.timer && (
                <button onClick={() => setTimer(0, plug.timer.action)} style={{ background:'transparent', border:'none', color:'var(--red)', fontSize:12, fontWeight:600, cursor:'pointer' }}>
                  Cancel
                </button>
              )
            }>Quick Timer</SectionTitle>
            <TimerCard plug={plug} onOpen={() => setTimerSheet(true)} tick={tick}/>

            <SectionTitle action={
              <button onClick={() => setScheduleEditor('new')} style={{ background:'transparent', border:'none', color:'var(--cyan)', fontSize:12, fontWeight:600, display:'inline-flex', alignItems:'center', gap:4, cursor:'pointer', padding:'4px 0' }}>
                <Ic name="plus" size={12}/> Add Schedule
              </button>
            }>Schedules</SectionTitle>

            {(plug.schedules || []).length === 0 ? (
              <Card style={{ padding:20, textAlign:'center' }}>
                <Ic name="calendar" size={28} color="var(--text-3)"/>
                <div style={{ fontSize:13, fontWeight:500, marginTop:8 }}>No schedules yet</div>
                <div style={{ fontSize:11, color:'var(--text-3)', marginTop:4 }}>Automate this plug to turn on or off at specific times.</div>
                <div style={{ marginTop:14 }}>
                  <Btn icon="plus" size="sm" onClick={() => setScheduleEditor('new')}>Create schedule</Btn>
                </div>
              </Card>
            ) : (
              <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                {(plug.schedules || []).map(s => (
                  <ScheduleCard key={s.id} sched={s} onEdit={() => setScheduleEditor(s)} onToggle={v => toggleSchedule(s.id, v)}/>
                ))}
              </div>
            )}
          </>
        )}

        {/* ── Live tab: telemetry only ── */}
        {tab === 'live' && (
          <>
            <SectionTitle>Real-time Telemetry</SectionTitle>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:8, opacity: waitingForLive ? 0.35 : 1, transition:'opacity 180ms ease' }}>
              <Metric icon="zap"      label="Voltage" value={waitingForLive ? '—' : (plug.voltage || 0)} unit="V"/>
              <Metric icon="bolt"     label="Current" value={waitingForLive ? '—' : (plug.on ? (plug.current || 0).toFixed(2) : '0.00')} unit="A"
                tone={!waitingForLive && plug.on && plug.current > (plug.overload || 16) * 0.85 ? 'amber' : undefined}/>
              <Metric icon="activity" label="Power"   value={waitingForLive ? '—' : (plug.on ? AC.fmtNum(plug.power) : 0)} unit="W"
                tone={!waitingForLive && plug.on ? 'cyan' : undefined}/>
              <Metric icon="gauge"    label="Energy"  value={waitingForLive ? '—' : (plug.energyToday || 0).toFixed(2)} unit="kWh"/>
            </div>

            <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8, marginTop:8, opacity: waitingForLive ? 0.35 : 1, transition:'opacity 180ms ease' }}>
              <Metric icon="clock"   label="Runtime"  value={waitingForLive ? '—' : `${Math.floor((plug.runtimeToday || 0) / 60)}h ${Math.round(plug.runtimeToday || 0) % 60}m`}/>
              <Metric icon="sparkle" label="Lifetime" value={waitingForLive ? '—' : (plug.energyTotal || 0).toFixed(0)} unit="kWh"/>
              <Metric icon="rupee"   label="Cost today" value={waitingForLive ? '—' : ((plug.energyToday || 0) * 7.5).toFixed(1)} unit="₹"/>
            </div>
          </>
        )}

        {/* ── Settings tab ── */}
        {tab === 'settings' && (
          <_PlugSettingsTab plug={plug} onSave={saveSettings} canAdmin={canAdminP}/>
        )}
      </div>

      {scheduleEditor && (
        <ScheduleEditor
          initial={scheduleEditor === 'new' ? null : scheduleEditor}
          onSave={saveSchedule}
          onDelete={scheduleEditor === 'new' ? null : () => deleteSchedule(scheduleEditor.id)}
          onClose={() => setScheduleEditor(null)}
        />
      )}

      {timerSheet && (
        <TimerSheet currentOn={plug.on} onApply={setTimer} onClose={() => setTimerSheet(false)}/>
      )}
    </div>
  );
};

// ── Settings tab ──────────────────────────────────────────────────────
const _PlugSettingsTab = ({ plug, onSave, canAdmin }) => {
  const [draft, setDraft] = useState({
    switchType:    plug.switchType    || 'round',
    overload:      plug.overload      || 16,
    overloadAlert: plug.overloadAlert !== false,
    childLock:     !!plug.childLock,
    ledIndicator:  plug.ledIndicator !== false,
  });
  const [saved, setSaved] = useState(false);

  const handleSave = () => {
    const patch = {};
    if (draft.switchType    !== plug.switchType)    patch.switchType    = draft.switchType;
    if (draft.overload      !== plug.overload)      patch.overload      = draft.overload;
    if (draft.overloadAlert !== plug.overloadAlert) patch.overloadAlert = draft.overloadAlert;
    if (draft.childLock     !== plug.childLock)     patch.childLock     = draft.childLock;
    if (draft.ledIndicator  !== plug.ledIndicator)  patch.ledIndicator  = draft.ledIndicator;
    if (Object.keys(patch).length) {
      onSave(patch);
      setSaved(true);
      setTimeout(() => setSaved(false), 2500);
    }
  };

  return (
    <>
      <SectionTitle>Switch Style</SectionTitle>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:8 }}>
        {_SWITCH_TYPES.map(t => {
          const active = draft.switchType === t.id;
          return (
            <button key={t.id} onClick={() => setDraft({ ...draft, switchType: t.id })} 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',
            }}>
              <_SwitchPreview 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>Safety</SectionTitle>
      <Card style={{ padding:14 }}>
        <SliderRow label="Overload threshold"
          hint={`Cut power if current exceeds ${draft.overload} A`}
          value={draft.overload} onChange={v => setDraft({ ...draft, overload: v })}
          min={2} max={16} step={1} unit=" A" color="var(--red)"/>
        <div style={{ height:1, background:'var(--border)', margin:'6px 0 4px' }}/>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'8px 0' }}>
          <div>
            <div style={{ fontSize:14, fontWeight:500 }}>Overload alerts</div>
            <div style={{ fontSize:11, color:'var(--text-3)', marginTop:2 }}>Push notification when threshold crossed</div>
          </div>
          <Toggle on={draft.overloadAlert} onChange={v => setDraft({ ...draft, overloadAlert: v })} color="var(--red)"/>
        </div>
        <div style={{ height:1, background:'var(--border)', margin:'4px 0' }}/>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'8px 0' }}>
          <div>
            <div style={{ fontSize:14, fontWeight:500 }}>Child lock</div>
            <div style={{ fontSize:11, color:'var(--text-3)', marginTop:2 }}>Disable physical button on the plug</div>
          </div>
          <Toggle on={draft.childLock} onChange={v => setDraft({ ...draft, childLock: v })} color="var(--cyan)"/>
        </div>
        <div style={{ height:1, background:'var(--border)', margin:'4px 0' }}/>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'8px 0' }}>
          <div>
            <div style={{ fontSize:14, fontWeight:500 }}>LED indicator</div>
            <div style={{ fontSize:11, color:'var(--text-3)', marginTop:2 }}>Glow LED when outlet is on</div>
          </div>
          <Toggle on={draft.ledIndicator} onChange={v => setDraft({ ...draft, ledIndicator: v })} color="var(--cyan)"/>
        </div>
      </Card>

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

/* ============================================================
   HERO — big animated on/off toggle
   ============================================================ */
const PlugHero = ({ plug, onToggle, tick, pending, controlsReady }) => {
  const isOn = plug.virtual ? plug.on : (plug.on && plug.online);
  const accent = isOn ? 'var(--green)' : 'var(--text-3)';
  const isDisabled = (!plug.virtual && !!plug.deviceId && !plug.online) || !!pending;
  const statusColor = !plug.deviceId ? 'gray' : plug.virtual ? 'amber' : !plug.online ? 'red' : !plug.mqttReceived ? 'gray' : 'green';
  const statusLabel = !plug.deviceId ? 'Demo' : plug.virtual ? 'Virtual' : !plug.online ? 'Offline' : !plug.mqttReceived ? 'Waiting…' : 'Online';
  const HeroSw = window._HeroSwitch;
  return (
    <div style={{
      position:'relative', padding:'32px 16px 28px',
      background: isOn ? 'radial-gradient(120% 100% at 50% 0%, rgba(0,230,118,0.15), transparent 60%), rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.03)',
      border: `1px solid ${isOn ? 'rgba(0,230,118,0.28)' : 'var(--border)'}`,
      borderRadius:20, overflow:'hidden',
      transition:'background 400ms ease, border-color 400ms ease', marginBottom:20,
    }}>
      <div style={{ position:'absolute', top:12, left:12, display:'flex', gap:6 }}>
        <Badge color={statusColor} size="sm">
          <StatusDot kind={statusColor} size={6} pulse={plug.online && !!plug.mqttReceived}/>
          {statusLabel}
        </Badge>
        {plug.timer && <Badge color="amber" size="sm"><Ic name="clock" size={10}/> Timer</Badge>}
      </div>
      {plug.childLock && (
        <div style={{ position:'absolute', top:12, right:12 }}>
          <Badge color="amber" size="sm"><Ic name="lock" size={10}/> Locked</Badge>
        </div>
      )}
      <div style={{ display:'flex', justifyContent:'center', alignItems:'center', padding:'8px 0' }}>
        {HeroSw
          ? <HeroSw isOn={isOn} offline={isDisabled} kind={plug.switchType || 'round'} onClick={onToggle} pending={!!pending}/>
          : <button onClick={onToggle} disabled={isDisabled} style={{
              position:'relative', width:168, height:168, borderRadius:'50%',
              background: isOn ? 'radial-gradient(circle at 30% 25%, #6dffb0, #00b860 70%)' : 'radial-gradient(circle at 30% 25%, rgba(255,255,255,0.06), rgba(255,255,255,0.02) 70%)',
              border: `2px solid ${isOn ? 'rgba(0,230,118,0.55)' : 'var(--border)'}`,
              cursor: isDisabled ? 'not-allowed' : 'pointer', opacity: isDisabled ? 0.4 : 1,
            }}>
              {pending ? <PendingDots size="lg" color={isOn ? '#062b18' : 'var(--text-2)'}/> : <Ic name="power" size={68} color={isOn ? '#062b18' : 'var(--text-2)'} strokeWidth={2.2}/>}
            </button>
        }
      </div>
      <div style={{ marginTop:18, textAlign:'center' }}>
        <div style={{ fontSize:13, color:'var(--text-2)' }}>
          {pending ? 'Sending command…' : isOn ? 'Drawing ' : 'Idle · '}
          {!pending && <span className="num" style={{ color:accent, fontWeight:600 }}>{isOn ? `${AC.fmtNum(plug.power)} W` : '0 W'}</span>}
          {!pending && isOn && <span style={{ color:'var(--text-3)' }}> · {(plug.current || 0).toFixed(1)} A @ {plug.voltage} V</span>}
        </div>
        <div style={{ fontSize:11, color:'var(--text-3)', marginTop:6 }}>
          {pending ? 'Waiting for device confirmation…' : `Tap to ${isOn ? 'turn off' : 'turn on'}`}
          {!pending && plug.appliance && <> · controls <strong style={{ color:'var(--text-2)' }}>{plug.appliance}</strong></>}
        </div>
      </div>
    </div>
  );
};

/* ============================================================
   TIMER
   ============================================================ */
const TimerCard = ({ plug, onOpen, tick }) => {
  const t = plug.timer;
  if (!t) {
    return (
      <Card style={{ padding:14 }} onClick={onOpen}>
        <div style={{ display:'flex', alignItems:'center', gap:12, cursor:'pointer' }}>
          <div style={{ width:38, height:38, borderRadius:11, background:'rgba(255,171,64,0.12)', display:'flex', alignItems:'center', justifyContent:'center' }}>
            <Ic name="clock" size={18} color="var(--amber)"/>
          </div>
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{ fontSize:14, fontWeight:500 }}>No active timer</div>
            <div style={{ fontSize:11, color:'var(--text-3)', marginTop:2 }}>Set a quick countdown to auto on/off</div>
          </div>
          <Ic name="chevronRight" size={16} color="var(--text-3)"/>
        </div>
      </Card>
    );
  }
  const msLeft = Math.max(0, t.endsAt - Date.now());
  const mm = Math.floor(msLeft / 60000);
  const ss = Math.floor((msLeft % 60000) / 1000);
  return (
    <Card accent="amber" style={{ padding:14 }} onClick={onOpen}>
      <div style={{ display:'flex', alignItems:'center', gap:12, cursor:'pointer' }}>
        <div style={{ width:44, height:44, borderRadius:12, background:'rgba(255,171,64,0.16)', display:'flex', alignItems:'center', justifyContent:'center', animation:'pulse-glow 2s ease-in-out infinite' }}>
          <Ic name="clock" size={20} color="var(--amber)"/>
        </div>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontSize:13, color:'var(--text-2)' }}>Will turn <strong style={{ color:'#fff' }}>{t.action.toUpperCase()}</strong> in</div>
          <div className="num" style={{ fontSize:22, fontWeight:700, color:'var(--amber)', letterSpacing:-0.5, fontFamily:'JetBrains Mono, monospace' }}>
            {String(mm).padStart(2,'0')}:{String(ss).padStart(2,'0')}
          </div>
        </div>
        <Ic name="chevronRight" size={16} color="var(--text-3)"/>
      </div>
    </Card>
  );
};

const TimerSheet = ({ currentOn, onApply, onClose }) => {
  const [minutes, setMinutes] = useState(30);
  const presets = [15, 30, 60, 120];
  const action = currentOn ? 'off' : 'on';
  return (
    <BottomSheet onClose={onClose} title={`Turn ${action.toUpperCase()} after…`}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:8, marginBottom:16 }}>
        {presets.map(p => (
          <button key={p} onClick={() => setMinutes(p)} style={{
            padding:'12px 0',
            background: minutes === p ? 'rgba(0,212,255,0.16)' : 'rgba(255,255,255,0.04)',
            border: `1px solid ${minutes === p ? 'var(--cyan)' : 'var(--border)'}`,
            color: minutes === p ? 'var(--cyan)' : '#fff',
            borderRadius:12, cursor:'pointer', fontSize:14, fontWeight:600,
          }}>{p}m</button>
        ))}
      </div>
      <div style={{ fontSize:11, color:'var(--text-2)', textTransform:'uppercase', letterSpacing:.5, marginBottom:8 }}>Custom · {minutes} minutes</div>
      <input type="range" min={1} max={240} step={1} value={minutes} onChange={e => setMinutes(+e.target.value)} style={{ accentColor:'var(--cyan)', width:'100%' }}/>
      <div style={{ display:'flex', gap:8, marginTop:18 }}>
        <Btn variant="ghost" full onClick={onClose}>Cancel</Btn>
        <Btn full icon="clock" onClick={() => onApply(minutes, action)}>Start timer</Btn>
      </div>
    </BottomSheet>
  );
};

/* ============================================================
   SCHEDULES
   ============================================================ */
const _DAYS_SHORT = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
const _DAYS_FULL  = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

const _daysLabel = (days, repeat) => {
  if (repeat === 'daily')    return 'Every day';
  if (repeat === 'weekdays') return 'Weekdays';
  if (repeat === 'once')     return 'Once';
  const sel = (days || []).map((v, i) => v ? _DAYS_FULL[i] : null).filter(Boolean);
  if (sel.length === 7) return 'Every day';
  if (sel.length === 0) return 'No days';
  return sel.join(', ');
};

const ScheduleCard = ({ sched, onEdit, onToggle }) => {
  const isOn = sched.action === 'on';
  return (
    <Card accent={isOn ? 'cyan' : 'amber'} style={{ padding:12 }}>
      <div style={{ display:'flex', alignItems:'center', gap:12 }}>
        <div onClick={onEdit} style={{ flex:1, minWidth:0, cursor:'pointer' }}>
          <div style={{ display:'flex', alignItems:'center', gap:8 }}>
            <div style={{ width:30, height:30, borderRadius:8, background: isOn ? 'rgba(0,212,255,0.14)' : 'rgba(255,171,64,0.14)', display:'flex', alignItems:'center', justifyContent:'center' }}>
              <Ic name="power" size={14} color={isOn ? 'var(--cyan)' : 'var(--amber)'}/>
            </div>
            <div style={{ minWidth:0, flex:1 }}>
              <div style={{ fontSize:14, fontWeight:600, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
                {sched.label || (isOn ? 'Turn on' : 'Turn off')}
              </div>
              <div className="num" style={{ fontSize:12, color:'var(--text-2)', marginTop:2, fontFamily:'JetBrains Mono, monospace' }}>
                {sched.start}{sched.end ? `–${sched.end}` : ''} · <span style={{ color:'var(--text-3)' }}>{_daysLabel(sched.days, sched.repeat)}</span>
              </div>
            </div>
          </div>
          <div style={{ display:'flex', gap:3, marginTop:8, marginLeft:38 }}>
            {_DAYS_SHORT.map((d, i) => (
              <span key={i} style={{
                fontSize:9, fontWeight:600, width:18, height:18, borderRadius:'50%',
                display:'inline-flex', alignItems:'center', justifyContent:'center',
                background: (sched.days || [])[i] ? (isOn ? 'rgba(0,212,255,0.18)' : 'rgba(255,171,64,0.18)') : 'rgba(255,255,255,0.04)',
                color: (sched.days || [])[i] ? (isOn ? 'var(--cyan)' : 'var(--amber)') : 'var(--text-3)',
                border: '1px solid ' + ((sched.days || [])[i] ? (isOn ? 'rgba(0,212,255,0.4)' : 'rgba(255,171,64,0.4)') : 'var(--border)'),
              }}>{d}</span>
            ))}
          </div>
        </div>
        <Toggle on={sched.enabled} onChange={onToggle} color={isOn ? 'var(--cyan)' : 'var(--amber)'} size="sm"/>
      </div>
    </Card>
  );
};

const ScheduleEditor = ({ initial, onSave, onDelete, onClose }) => {
  const [form, setForm] = useState(() => initial ? { ...initial } : {
    id: null, label: '', start: '07:00', end: '07:30',
    days: [1,1,1,1,1,0,0], action: 'on', repeat: 'weekdays', enabled: true,
  });

  const setRepeat = (r) => {
    let days = form.days;
    if (r === 'daily')    days = [1,1,1,1,1,1,1];
    if (r === 'weekdays') days = [1,1,1,1,1,0,0];
    if (r === 'once')     days = [0,0,0,0,0,0,0];
    setForm({ ...form, repeat: r, days });
  };

  const toggleDay = (i) => { const days = [...form.days]; days[i] = days[i] ? 0 : 1; setForm({ ...form, days, repeat: 'custom' }); };

  return (
    <BottomSheet onClose={onClose} title={initial ? 'Edit Schedule' : 'New Schedule'}>
      <div style={{ fontSize:11, color:'var(--text-2)', textTransform:'uppercase', letterSpacing:.5, marginBottom:6 }}>Label</div>
      <TextInput icon="edit" value={form.label} onChange={v => setForm({ ...form, label: v })} placeholder="e.g. Morning geyser"/>

      <div style={{ fontSize:11, color:'var(--text-2)', textTransform:'uppercase', letterSpacing:.5, marginBottom:6, marginTop:14 }}>Action</div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
        <_ActionPick label="Turn ON"  icon="power" color="var(--green)" active={form.action === 'on'}  onClick={() => setForm({ ...form, action: 'on' })}/>
        <_ActionPick label="Turn OFF" icon="power" color="var(--red)"   active={form.action === 'off'} onClick={() => setForm({ ...form, action: 'off' })}/>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginTop:14 }}>
        <div>
          <div style={{ fontSize:11, color:'var(--text-2)', textTransform:'uppercase', letterSpacing:.5, marginBottom:6 }}>Start time</div>
          <_TimeInput value={form.start} onChange={v => setForm({ ...form, start: v })}/>
        </div>
        <div>
          <div style={{ fontSize:11, color:'var(--text-2)', textTransform:'uppercase', letterSpacing:.5, marginBottom:6 }}>End time <span style={{ textTransform:'none', color:'var(--text-3)' }}>(optional)</span></div>
          <_TimeInput value={form.end} onChange={v => setForm({ ...form, end: v })}/>
        </div>
      </div>

      <div style={{ fontSize:11, color:'var(--text-2)', textTransform:'uppercase', letterSpacing:.5, marginBottom:6, marginTop:14 }}>Repeat</div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:6 }}>
        {[{ v:'once', l:'Once' }, { v:'daily', l:'Daily' }, { v:'weekdays', l:'Weekdays' }, { v:'custom', l:'Custom' }].map(o => (
          <button key={o.v} onClick={() => setRepeat(o.v)} style={{
            padding:'8px 0',
            background: form.repeat === o.v ? 'rgba(0,212,255,0.16)' : 'rgba(255,255,255,0.04)',
            border: `1px solid ${form.repeat === o.v ? 'var(--cyan)' : 'var(--border)'}`,
            color: form.repeat === o.v ? 'var(--cyan)' : '#fff',
            borderRadius:10, cursor:'pointer', fontSize:12, fontWeight:500,
          }}>{o.l}</button>
        ))}
      </div>

      <div style={{ fontSize:11, color:'var(--text-2)', textTransform:'uppercase', letterSpacing:.5, marginTop:14, marginBottom:6 }}>Days</div>
      <div style={{ display:'flex', gap:6, justifyContent:'space-between' }}>
        {_DAYS_SHORT.map((d, i) => (
          <button key={i} onClick={() => toggleDay(i)} style={{
            width:38, height:38, borderRadius:'50%',
            background: form.days[i] ? 'linear-gradient(135deg, var(--cyan), var(--teal))' : 'rgba(255,255,255,0.04)',
            border: `1px solid ${form.days[i] ? 'transparent' : 'var(--border)'}`,
            color: form.days[i] ? '#0a0e27' : 'var(--text-2)',
            fontSize:13, fontWeight:700, cursor:'pointer', transition:'all 200ms ease',
          }}>{d}</button>
        ))}
      </div>

      <div style={{ display:'flex', gap:8, marginTop:18 }}>
        {onDelete ? <Btn variant="ghost" icon="trash" onClick={onDelete}>Delete</Btn> : <Btn variant="ghost" full onClick={onClose}>Cancel</Btn>}
        <Btn full icon="check" onClick={() => onSave(form)}>{initial ? 'Save changes' : 'Add Schedule'}</Btn>
      </div>
    </BottomSheet>
  );
};

const _ActionPick = ({ label, icon, color, active, onClick }) => (
  <button onClick={onClick} style={{
    display:'flex', alignItems:'center', gap:8, justifyContent:'center', padding:'12px',
    background: active ? `${color}24` : 'rgba(255,255,255,0.04)',
    border: `1px solid ${active ? color : 'var(--border)'}`,
    color: active ? color : 'var(--text-2)',
    borderRadius:12, cursor:'pointer', fontWeight:600, fontSize:13,
  }}>
    <Ic name={icon} size={16}/> {label}
  </button>
);

const _TimeInput = ({ value, onChange }) => (
  <div style={{ display:'flex', alignItems:'center', gap:6, background:'rgba(255,255,255,0.04)', border:'1px solid var(--border)', borderRadius:10, padding:'10px 12px' }}>
    <Ic name="clock" size={14} color="var(--text-2)"/>
    <input type="time" value={value} onChange={e => onChange(e.target.value)}
      style={{ background:'transparent', border:'none', outline:'none', color:'#fff', fontSize:14, fontWeight:500, flex:1, fontFamily:'JetBrains Mono, monospace', colorScheme:'dark' }}/>
  </div>
);

/* ============================================================
   SWITCH STYLE PREVIEWS
   ============================================================ */
const _SWITCH_TYPES = [
  { id:'round',  label:'Round',    desc:'Classic push button' },
  { id:'toggle', label:'Toggle',   desc:'Flip-style switch'   },
  { id:'rocker', label:'Rocker',   desc:'Wall-style rocker'   },
  { id:'push',   label:'Push-pad', desc:'Capacitive pad'      },
];

const _SwitchPreview = ({ kind, active }) => {
  const stroke = active ? 'var(--cyan)' : 'var(--text-2)';
  const fill   = active ? 'rgba(0,212,255,0.10)' : 'rgba(255,255,255,0.03)';
  return (
    <svg width="56" height="40" viewBox="0 0 56 40" fill="none">
      <rect x="2" y="2" width="52" height="36" rx="8" stroke={stroke} strokeWidth="1.5" fill={fill}/>
      {kind === 'round'  && <g><circle cx="28" cy="20" r="10" stroke={stroke} strokeWidth="1.5" fill={active ? stroke + '33' : 'transparent'}/><circle cx="28" cy="20" r="3" fill={stroke}/></g>}
      {kind === 'toggle' && <g><rect x="20" y="10" width="16" height="20" rx="4" stroke={stroke} strokeWidth="1.5" fill={active ? stroke + '33' : 'transparent'}/><rect x="22" y="12" width="12" height="8" rx="2" fill={stroke}/></g>}
      {kind === 'rocker' && <g><rect x="14" y="12" width="28" height="16" rx="3" stroke={stroke} strokeWidth="1.5" fill={active ? stroke + '33' : 'transparent'}/><line x1="28" y1="12" x2="28" y2="28" stroke={stroke} strokeWidth="1.2"/><circle cx="20" cy="20" r="1.5" fill={stroke}/></g>}
      {kind === 'push'   && <g><rect x="16" y="10" width="24" height="20" rx="10" stroke={stroke} strokeWidth="1.5" fill={active ? stroke + '33' : 'transparent'}/><line x1="22" y1="20" x2="34" y2="20" stroke={stroke} strokeWidth="1.5"/></g>}
    </svg>
  );
};

window._SWITCH_TYPES = _SWITCH_TYPES;
window._SwitchPreview = _SwitchPreview;

/* ============================================================
   BOTTOM SHEET — portal into #modal-root so position:fixed
   escapes the SwipeBack transform container
   ============================================================ */
const BottomSheet = ({ children, onClose, title }) => {
  const content = React.createElement('div', {
    onClick: onClose,
    style: { position:'fixed', inset:0, background:'rgba(5,8,20,0.65)', backdropFilter:'blur(6px)', zIndex:1000, display:'flex', alignItems:'flex-end', justifyContent:'center', animation:'pop-in 180ms ease-out' },
  },
    React.createElement('div', {
      onClick: e => e.stopPropagation(),
      style: { width:'100%', maxWidth:460, background:'linear-gradient(180deg, rgba(20,26,55,0.97), rgba(15,20,48,0.97))', borderTop:'1px solid var(--border-strong)', borderRadius:'24px 24px 0 0', padding:'12px 18px calc(env(safe-area-inset-bottom) + 22px)', maxHeight:'88vh', overflowY:'auto', boxShadow:'0 -20px 60px rgba(0,0,0,0.6)', animation:'slide-up 240ms cubic-bezier(.4,1.4,.6,1)' },
    },
      React.createElement('div', { style: { width:38, height:4, borderRadius:2, background:'rgba(255,255,255,0.18)', margin:'4px auto 14px' } }),
      title && React.createElement('h3', { style: { margin:'0 0 16px', fontSize:17, fontWeight:600 } }, title),
      children
    )
  );
  const portalTarget = document.getElementById('modal-root') || document.body;
  return ReactDOM.createPortal(content, portalTarget);
};

window.ScheduleCard   = ScheduleCard;
window.ScheduleEditor = ScheduleEditor;
window.TimerSheet     = TimerSheet;
window.BottomSheet    = BottomSheet;
window.PlugDetail     = PlugDetail;