/**
 * SecureCam Mobile Simulator Logic
 * Refactored for modern UI/UX and stability.
 */

// --- 1. State Management ---
class Store {
  constructor(initialState) {
    this.state = initialState;
    this.listeners = new Set();
  }

  get() {
    return this.state;
  }

  update(partialState) {
    this.state = { ...this.state, ...partialState };
    this.notify();
  }

  subscribe(listener) {
    this.listeners.add(listener);
    return () => this.listeners.delete(listener);
  }

  notify() {
    this.listeners.forEach((listener) => listener(this.state));
  }
}

const store = new Store({
  screen: 'auth', // auth, onboarding, home, activity, settings
  session: null,
  device: null,
  deviceToken: null,
  socketConnected: false,
  isMotionActive: false,
  cameraStatus: 'idle', // idle, recording, streaming
  linkedCameras: [],
  recordings: [],
  motionNotifications: [],
  activeCameraDeviceId: null,
  activeStreamSessionId: null,
  activityFeed: [],
  loading: false, // global loading spinner state if needed
});

// --- 2. UI Utilities ---
const $ = (selector) => {
  // If it looks like a simple ID (no spaces, dots, hash), use getElementById
  if (/^[a-zA-Z0-9_\-]+$/.test(selector)) {
    return document.getElementById(selector);
  }
  // Otherwise use querySelector (handles #id, .class, complex selectors)
  return document.querySelector(selector);
};
const $$ = (selector) => document.querySelectorAll(selector);

const Toast = {
  show(message, type = 'info') {
    const container = $('toast-container');
    const toast = document.createElement('div');

    let alertClass = 'alert-info';
    let icon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>';

    if (type === 'success') {
      alertClass = 'alert-success';
      icon = '<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>';
    } else if (type === 'error') {
      alertClass = 'alert-error';
      icon = '<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>';
    }

    toast.className = `alert ${alertClass} text-white shadow-lg text-xs py-2 px-3 flex flex-row gap-2 toast-enter`;
    toast.innerHTML = `${icon}<span>${message}</span>`;

    container.appendChild(toast);
    setTimeout(() => {
      toast.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
      toast.style.opacity = '0';
      toast.style.transform = 'translateY(100%)';
      setTimeout(() => toast.remove(), 300);
    }, 3000);
  }
};

// --- 3. API Client ---
const API = {
  async request(path, options = {}) {
    const { deviceToken } = store.get();
    const headers = { 'Content-Type': 'application/json' };

    if (deviceToken) {
      headers['Authorization'] = `Bearer ${deviceToken}`;
    }

    try {
      const res = await fetch(path, { ...options, headers: { ...headers, ...options.headers } });
      const data = await res.json().catch(() => ({}));

      if (!res.ok) {
        throw new Error(data.message || data.error || res.statusText);
      }
      return data;
    } catch (e) {
      Toast.show(e.message, 'error');
      throw e;
    }
  },

  auth: {
    signUp: (data) => API.request('/api/auth/sign-up/email', { method: 'POST', body: JSON.stringify(data) }),
    signIn: (data) => API.request('/api/auth/sign-in/email', { method: 'POST', body: JSON.stringify(data) }),
    getSession: () => API.request('/api/auth/get-session'),
    signOut: () => API.request('/api/auth/sign-out', { method: 'POST', body: JSON.stringify({}) }),
  },

  devices: {
    register: (data) => API.request('/devices/register', { method: 'POST', body: JSON.stringify(data) }),
    listLinks: () => API.request('/device-links'),
    link: (cameraDeviceId, clientDeviceId) => API.request('/device-links', { method: 'POST', body: JSON.stringify({ cameraDeviceId, clientDeviceId }) }),
  },

  streams: {
    request: (cameraDeviceId) => API.request('/streams/request', { method: 'POST', body: JSON.stringify({ cameraDeviceId, reason: 'on_demand' }) }),
    accept: (id) => API.request(`/streams/${id}/accept`, { method: 'POST', body: JSON.stringify({}) }),
    end: (id) => API.request(`/streams/${id}/end`, { method: 'POST', body: JSON.stringify({ reason: 'completed' }) }),
    getPublishCreds: (id) => API.request(`/streams/${id}/publish-credentials`),
    getSubscribeCreds: (id) => API.request(`/streams/${id}/subscribe-credentials`),
  },

  events: {
    startMotion: () => API.request('/events/motion/start', { method: 'POST', body: JSON.stringify({ title: 'Simulated Motion', triggeredBy: 'motion' }) }),
    endMotion: (id) => API.request(`/events/${id}/motion/end`, { method: 'POST', body: JSON.stringify({ status: 'completed' }) }),
    finalizeRecording: (id, payload) => API.request(`/recordings/${id}/finalize`, { method: 'POST', body: JSON.stringify(payload) }),
  },

  ops: {
    ready: () => API.request('/ops/ready'),
    listRecordings: () => API.request('/recordings/me/list'),
    getRecordingDownloadUrl: (recordingId) => API.request(`/recordings/${recordingId}/download-url`),
    listNotifications: () => API.request('/push-notifications/me'),
  },

  sfu: {
    getSession: (id) => API.request(`/streams/${id}/sfu/session`),
    createPublishTransport: (id) => API.request(`/streams/${id}/sfu/publish-transport`, { method: 'POST', body: JSON.stringify({ role: 'camera' }) }),
    connectPublishTransport: (id, payload) => API.request(`/streams/${id}/sfu/publish-transport/connect`, { method: 'POST', body: JSON.stringify(payload) }),
    createSubscribeTransport: (id) => API.request(`/streams/${id}/sfu/subscribe-transport`, { method: 'POST', body: JSON.stringify({ role: 'viewer' }) }),
    connectSubscribeTransport: (id, payload) => API.request(`/streams/${id}/sfu/subscribe-transport/connect`, { method: 'POST', body: JSON.stringify(payload) }),
    produce: (id, payload) => API.request(`/streams/${id}/sfu/produce`, { method: 'POST', body: JSON.stringify(payload) }),
    consume: (id, payload) => API.request(`/streams/${id}/sfu/consume`, { method: 'POST', body: JSON.stringify(payload) }),
  }
};

// --- 4. Logic & Controllers ---

let socket = null;
let pollInterval = null;
let localCameraStream = null;
let remoteClientStream = null;
let peerConnection = null;
let peerSessionId = null;
let peerTargetDeviceId = null;
let remoteStreamWaitTimer = null;
let frameRelayTimer = null;
let frameRelayStartTimer = null;
let frameCanvas = null;
let frameContext = null;
let activeMediaRecorder = null;
let activeRecordingChunks = [];
let activeRecordingStartedAt = null;
let recordingModalUrl = null;
let webrtcConnected = false;
let hasWebrtcEverConnected = false;
let lastPeerConnectionState = null;
let pendingRemoteCandidates = [];
let mediaMode = 'legacy';
const rtcConfig = {
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
};

const isSfuMode = () => mediaMode === 'single_server_sfu';

const detectMediaMode = async () => {
  try {
    const ready = await API.ops.ready();
    const mode = ready?.checks?.mediaMode;
    if (mode === 'single_server_sfu' || mode === 'legacy') {
      mediaMode = mode;
      addActivity('Media', `Mode: ${mediaMode}`);
    }
  } catch {
    mediaMode = 'legacy';
  }
};

const init = async () => {
  // Load local storage
  const saved = localStorage.getItem('mobileSimDevice');
  if (saved) {
    try {
      const parsed = JSON.parse(saved);
      store.update({ device: parsed.device, deviceToken: parsed.deviceToken });
    } catch (e) { console.error('Failed to load saved device', e); }
  }

  try {
    const session = await API.auth.getSession();
    if (session && session.session) {
      store.update({ session });
      await detectMediaMode();
      if (store.get().deviceToken) {
        // If we have a token, skip onboarding
        navigateBasedOnRole();
        connectSocket();
        startPolling();
      } else {
        store.update({ screen: 'onboarding' });
      }
    } else {
      store.update({ screen: 'auth' });
    }
  } catch {
    store.update({ screen: 'auth' });
  }
};

const navigateBasedOnRole = () => {
  const { device } = store.get();
  if (!device) return store.update({ screen: 'onboarding' });

  // Default home screen based on role
  store.update({ screen: 'home' });
};

const startCameraPreview = async () => {
  const videoEl = $('cameraVideo');
  if (!videoEl || !navigator.mediaDevices?.getUserMedia) {
    Toast.show('Camera API is not available in this browser', 'error');
    return false;
  }

  if (localCameraStream) {
    videoEl.srcObject = localCameraStream;
    videoEl.classList.remove('hidden');
    return true;
  }

  try {
    localCameraStream = await navigator.mediaDevices.getUserMedia({
      video: {
        width: { ideal: 640, max: 960 },
        height: { ideal: 360, max: 540 },
        frameRate: { ideal: 15, max: 24 },
      },
      audio: false,
    });
    videoEl.srcObject = localCameraStream;
    videoEl.classList.remove('hidden');
    addActivity('Camera', 'Camera access granted');
    return true;
  } catch (error) {
    Toast.show('Camera permission denied or unavailable', 'error');
    addActivity('Camera', 'Camera access failed');
    return false;
  }
};

const stopCameraPreview = () => {
  const videoEl = $('cameraVideo');
  if (localCameraStream) {
    localCameraStream.getTracks().forEach((track) => track.stop());
    localCameraStream = null;
  }
  if (videoEl) {
    videoEl.srcObject = null;
    videoEl.classList.add('hidden');
  }
};

const setClientStreamPlaceholderText = (text) => {
  const placeholderEl = $('clientStreamPlaceholder');
  if (!placeholderEl) return;
  const label = placeholderEl.querySelector('p');
  if (label) {
    label.textContent = text;
  }
};

const setClientStreamMode = (mode) => {
  const videoEl = $('clientStreamVideo');
  const imageEl = $('clientStreamImage');
  const placeholderEl = $('clientStreamPlaceholder');

  if (videoEl) videoEl.classList.toggle('hidden', mode !== 'video');
  if (imageEl) imageEl.classList.toggle('hidden', mode !== 'image');

  if (!placeholderEl) return;

  if (mode === 'video' || mode === 'image') {
    placeholderEl.classList.add('hidden');
    return;
  }

  if (mode === 'unavailable') {
    setClientStreamPlaceholderText('Stream unavailable');
  } else if (mode === 'connecting') {
    setClientStreamPlaceholderText('Connecting stream...');
  } else {
    setClientStreamPlaceholderText('Waiting for stream');
  }
  placeholderEl.classList.remove('hidden');
};

const clearClientStream = () => {
  if (remoteStreamWaitTimer) {
    clearTimeout(remoteStreamWaitTimer);
    remoteStreamWaitTimer = null;
  }
  const videoEl = $('clientStreamVideo');
  const imageEl = $('clientStreamImage');
  if (remoteClientStream) {
    remoteClientStream.getTracks().forEach((track) => track.stop());
    remoteClientStream = null;
  }
  if (videoEl) {
    videoEl.srcObject = null;
  }
  if (imageEl) {
    imageEl.src = '';
  }
  setClientStreamMode('none');
};

const getCameraLabel = (cameraDeviceId) => `Camera ${cameraDeviceId?.substring(0, 6) ?? 'Unknown'}`;

const pushMotionNotification = (cameraDeviceId) => {
  if (!cameraDeviceId) return;

  const notification = {
    id: crypto.randomUUID(),
    cameraDeviceId,
    message: `${getCameraLabel(cameraDeviceId)} has detected movement`,
    createdAt: new Date().toISOString(),
    isRead: false,
  };

  store.update({
    motionNotifications: [notification, ...store.get().motionNotifications].slice(0, 50),
  });
};

const markMotionNotificationRead = (notificationId) => {
  store.update({
    motionNotifications: store
      .get()
      .motionNotifications.map((notification) =>
        notification.id === notificationId ? { ...notification, isRead: true } : notification,
      ),
  });
};

const markAllNotificationsRead = () => {
  store.update({
    motionNotifications: store
      .get()
      .motionNotifications.map((notification) => (notification.isRead ? notification : { ...notification, isRead: true })),
  });
};

const openRecordingModal = (downloadUrl, title) => {
  const modal = $('recordingModal');
  const videoEl = $('recordingModalVideo');
  const titleEl = $('recordingModalTitle');

  if (!modal || !videoEl || !titleEl) return;

  recordingModalUrl = downloadUrl;
  titleEl.textContent = title || 'Recording Playback';
  videoEl.src = downloadUrl;
  modal.classList.remove('hidden');
  modal.classList.add('flex');
  void videoEl.play().catch(() => {});
};

const closeRecordingModal = () => {
  const modal = $('recordingModal');
  const videoEl = $('recordingModalVideo');
  if (!modal || !videoEl) return;

  modal.classList.add('hidden');
  modal.classList.remove('flex');
  videoEl.pause();
  videoEl.removeAttribute('src');
  videoEl.load();
  recordingModalUrl = null;
};

const stopFrameRelay = () => {
  if (frameRelayStartTimer) {
    clearTimeout(frameRelayStartTimer);
    frameRelayStartTimer = null;
  }
  if (frameRelayTimer) {
    clearInterval(frameRelayTimer);
    frameRelayTimer = null;
  }
};

const startFrameRelay = async (streamSessionId, toDeviceId) => {
  if (!socket || !streamSessionId || !toDeviceId) return;
  if (hasWebrtcEverConnected) return;

  const ready = await startCameraPreview();
  if (!ready) {
    throw new Error('Camera permission is required before streaming');
  }

  const cameraVideoEl = $('cameraVideo');
  if (!cameraVideoEl) return;

  stopFrameRelay();
  frameRelayTimer = setInterval(() => {
    if (webrtcConnected || hasWebrtcEverConnected) return;
    if (!socket || cameraVideoEl.readyState < 2 || !cameraVideoEl.videoWidth || !cameraVideoEl.videoHeight) return;

    if (!frameCanvas) {
      frameCanvas = document.createElement('canvas');
      frameContext = frameCanvas.getContext('2d');
    }
    if (!frameCanvas || !frameContext) return;

    frameCanvas.width = cameraVideoEl.videoWidth;
    frameCanvas.height = cameraVideoEl.videoHeight;
    frameContext.drawImage(cameraVideoEl, 0, 0, frameCanvas.width, frameCanvas.height);
    const frame = frameCanvas.toDataURL('image/jpeg', 0.6);

    socket.emit('stream:frame', {
      toDeviceId,
      streamSessionId,
      frame,
      capturedAt: new Date().toISOString(),
    });
  }, 600);
};

const getPreferredRecordingMimeType = () => {
  if (typeof MediaRecorder === 'undefined') return '';
  const preferredTypes = [
    'video/webm;codecs=vp9',
    'video/webm;codecs=vp8',
    'video/webm',
  ];
  return preferredTypes.find((type) => MediaRecorder.isTypeSupported(type)) ?? '';
};

const startLocalRecording = async () => {
  if (!localCameraStream || typeof MediaRecorder === 'undefined') {
    addActivity('Recording', 'MediaRecorder unavailable');
    return false;
  }

  if (activeMediaRecorder?.state === 'recording') {
    return true;
  }

  activeRecordingChunks = [];
  activeRecordingStartedAt = Date.now();

  try {
    const mimeType = getPreferredRecordingMimeType();
    activeMediaRecorder = mimeType ? new MediaRecorder(localCameraStream, { mimeType }) : new MediaRecorder(localCameraStream);
  } catch (error) {
    console.error('Failed to create MediaRecorder', error);
    addActivity('Recording', 'Failed to start recorder');
    activeMediaRecorder = null;
    return false;
  }

  activeMediaRecorder.ondataavailable = (event) => {
    if (event.data && event.data.size > 0) {
      activeRecordingChunks.push(event.data);
    }
  };

  activeMediaRecorder.start(1000);
  addActivity('Recording', 'Local recording started');
  return true;
};

const stopLocalRecording = async () => {
  if (!activeMediaRecorder || activeMediaRecorder.state === 'inactive') {
    return null;
  }

  return await new Promise((resolve) => {
    const recorder = activeMediaRecorder;
    const startedAt = activeRecordingStartedAt ?? Date.now();

    recorder.onstop = () => {
      const mimeType = recorder.mimeType || 'video/webm';
      const blob = activeRecordingChunks.length > 0 ? new Blob(activeRecordingChunks, { type: mimeType }) : null;
      const durationSeconds = Math.max(1, Math.round((Date.now() - startedAt) / 1000));

      activeMediaRecorder = null;
      activeRecordingChunks = [];
      activeRecordingStartedAt = null;

      resolve(blob ? { blob, durationSeconds } : null);
    };

    recorder.onerror = () => {
      activeMediaRecorder = null;
      activeRecordingChunks = [];
      activeRecordingStartedAt = null;
      resolve(null);
    };

    recorder.stop();
  });
};

const teardownPeerConnection = () => {
  const previousSessionId = peerSessionId;
  if (peerConnection) {
    peerConnection.onicecandidate = null;
    peerConnection.ontrack = null;
    peerConnection.onconnectionstatechange = null;
    peerConnection.close();
  }

  peerConnection = null;
  peerSessionId = null;
  peerTargetDeviceId = null;
  lastPeerConnectionState = null;
  webrtcConnected = false;
  hasWebrtcEverConnected = false;
  if (previousSessionId) {
    pendingRemoteCandidates = pendingRemoteCandidates.filter((item) => item.streamSessionId !== previousSessionId);
  }
  clearClientStream();
};

const queueRemoteCandidate = ({ streamSessionId, fromDeviceId, data }) => {
  if (!streamSessionId || !fromDeviceId || !data) return;
  pendingRemoteCandidates.push({ streamSessionId, fromDeviceId, data, createdAt: Date.now() });
  const cutoff = Date.now() - 120000;
  pendingRemoteCandidates = pendingRemoteCandidates
    .filter((item) => item.createdAt >= cutoff)
    .slice(-200);
};

const takeQueuedCandidates = (streamSessionId, fromDeviceId) => {
  const queued = pendingRemoteCandidates.filter(
    (item) => item.streamSessionId === streamSessionId && item.fromDeviceId === fromDeviceId
  );
  pendingRemoteCandidates = pendingRemoteCandidates.filter(
    (item) => !(item.streamSessionId === streamSessionId && item.fromDeviceId === fromDeviceId)
  );
  return queued;
};

const applyQueuedCandidates = async (connection, streamSessionId, fromDeviceId) => {
  if (!connection?.remoteDescription) return;
  const queued = takeQueuedCandidates(streamSessionId, fromDeviceId);
  for (const candidate of queued) {
    try {
      await connection.addIceCandidate(new RTCIceCandidate(candidate.data));
    } catch (error) {
      console.warn('Dropping queued ICE candidate', error);
    }
  }
};

const ensurePeerConnection = async ({
  streamSessionId,
  targetDeviceId,
  asCamera,
}) => {
  if (peerConnection && peerSessionId === streamSessionId && peerTargetDeviceId === targetDeviceId) {
    return peerConnection;
  }

  teardownPeerConnection();

  const connection = new RTCPeerConnection(rtcConfig);
  peerConnection = connection;
  peerSessionId = streamSessionId;
  peerTargetDeviceId = targetDeviceId;

  connection.onicecandidate = (event) => {
    if (!socket || !event.candidate || !peerSessionId || !peerTargetDeviceId) return;
    socket.emit('webrtc:signal', {
      toDeviceId: peerTargetDeviceId,
      streamSessionId: peerSessionId,
      signalType: 'candidate',
      data: event.candidate.toJSON(),
    });
  };

  connection.onconnectionstatechange = () => {
    if (connection.connectionState !== lastPeerConnectionState) {
      if (connection.connectionState === 'connected') {
        addActivity('WebRTC', 'Peer connected');
      } else if (
        connection.connectionState === 'failed' ||
        connection.connectionState === 'disconnected' ||
        connection.connectionState === 'closed'
      ) {
        addActivity('WebRTC', `Peer ${connection.connectionState}`);
      }
      lastPeerConnectionState = connection.connectionState;
    }

    if (connection.connectionState === 'connected') {
      webrtcConnected = true;
      hasWebrtcEverConnected = true;
      stopFrameRelay();
    }

    if (connection.connectionState === 'disconnected') {
      if (!hasWebrtcEverConnected) {
        webrtcConnected = false;
      }
      return;
    }

    if (connection.connectionState === 'failed' || connection.connectionState === 'closed') {
      webrtcConnected = false;
      hasWebrtcEverConnected = false;
      if (store.get().device?.role === 'client') {
        clearClientStream();
      }
    }
  };

  connection.ontrack = (event) => {
    if (remoteStreamWaitTimer) {
      clearTimeout(remoteStreamWaitTimer);
      remoteStreamWaitTimer = null;
    }
    const [stream] = event.streams;
    if (!stream) return;
    webrtcConnected = true;
    hasWebrtcEverConnected = true;
    stopFrameRelay();
    remoteClientStream = stream;
    const videoEl = $('clientStreamVideo');
    if (videoEl) {
      videoEl.srcObject = stream;
      setClientStreamMode('video');
      void videoEl.play().catch(() => {});
    }
  };

  if (asCamera) {
    const ready = await startCameraPreview();
    if (!ready || !localCameraStream || localCameraStream.getVideoTracks().length === 0) {
      throw new Error('Camera stream unavailable for WebRTC publish');
    }
    if (localCameraStream) {
      localCameraStream.getTracks().forEach((track) => connection.addTrack(track, localCameraStream));
    }
  }

  return connection;
};

const startOfferToClient = async (streamSessionId, requesterDeviceId) => {
  if (!socket) return;

  const connection = await ensurePeerConnection({
    streamSessionId,
    targetDeviceId: requesterDeviceId,
    asCamera: true,
  });

  const offer = await connection.createOffer();
  await connection.setLocalDescription(offer);
  socket.emit('webrtc:signal', {
    toDeviceId: requesterDeviceId,
    streamSessionId,
    signalType: 'offer',
    data: offer,
  });
};

const startSfuPublishHandshake = async (streamSessionId) => {
  const ready = await startCameraPreview();
  if (!ready || !localCameraStream) {
    throw new Error('Camera stream unavailable for SFU publish');
  }

  const publishTransport = await API.sfu.createPublishTransport(streamSessionId);
  const transportId = publishTransport?.transport?.transportId;
  if (!transportId) {
    throw new Error('Missing SFU publish transport id');
  }

  await API.sfu.connectPublishTransport(streamSessionId, {
    transportId,
    dtlsParameters: { role: 'auto' },
  });

  const track = localCameraStream.getVideoTracks()[0];
  await API.sfu.produce(streamSessionId, {
    transportId,
    kind: 'video',
    rtpParameters: {
      codec: 'VP8',
      source: 'mobile-sim-camera',
      trackSettings: track?.getSettings?.() ?? {},
    },
  });

  addActivity('SFU', 'Publish handshake completed');
};

const setClientSfuConnectedState = () => {
  if (remoteStreamWaitTimer) {
    clearTimeout(remoteStreamWaitTimer);
    remoteStreamWaitTimer = null;
  }
  setClientStreamPlaceholderText('Connected via SFU (simulated media path)');
  setClientStreamMode('connecting');
};

const startSfuSubscribeHandshake = async (streamSessionId) => {
  const subscribeTransport = await API.sfu.createSubscribeTransport(streamSessionId);
  const transportId = subscribeTransport?.transport?.transportId;
  if (!transportId) {
    throw new Error('Missing SFU subscribe transport id');
  }

  await API.sfu.connectSubscribeTransport(streamSessionId, {
    transportId,
    dtlsParameters: { role: 'auto' },
  });

  let consumeResult = null;
  for (let attempt = 0; attempt < 8; attempt += 1) {
    try {
      consumeResult = await API.sfu.consume(streamSessionId, {
        transportId,
        rtpCapabilities: { browser: 'mobile-sim' },
      });
      if (consumeResult?.consumer?.consumerId) {
        break;
      }
    } catch {
      // Camera may still be establishing producer; retry briefly.
    }
    await sleep(350);
  }

  if (!consumeResult?.consumer?.consumerId) {
    throw new Error('SFU consumer was not created');
  }

  setClientSfuConnectedState();
  addActivity('SFU', `Subscribed to producer ${consumeResult.consumer.producerId}`);
};

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const finalizeRecordingForStream = async (streamSessionId, captureResult) => {
  const currentDevice = store.get().device;
  if (!currentDevice?.id) {
    addActivity('Recording', 'No device identity for finalize');
    return false;
  }

  for (let attempt = 0; attempt < 8; attempt += 1) {
    const recs = await API.ops.listRecordings().catch(() => ({ recordings: [] }));
    const recording = (recs.recordings || []).find((rec) => rec.streamSessionId === streamSessionId && rec.status === 'awaiting_upload');

    if (recording?.id) {
      try {
        if (!captureResult?.blob || captureResult.blob.size === 0) {
          throw new Error('No captured video blob to upload');
        }

        const uploadMeta = await API.request('/videos/upload-url', {
          method: 'POST',
          body: JSON.stringify({
            fileName: `stream-${streamSessionId}.webm`,
            deviceId: currentDevice.id,
            prefix: 'recordings',
          }),
        });

        const uploadResponse = await fetch(uploadMeta.uploadUrl, {
          method: 'PUT',
          headers: { 'Content-Type': captureResult.blob.type || 'video/webm' },
          body: captureResult.blob,
        });

        if (!uploadResponse.ok) {
          throw new Error(`Upload failed with status ${uploadResponse.status}`);
        }

        await API.events.finalizeRecording(recording.id, {
          objectKey: uploadMeta.objectKey,
          bucket: uploadMeta.bucket,
          durationSeconds: captureResult.durationSeconds,
          sizeBytes: captureResult.blob.size,
        });

        addActivity('Recording', 'Recording uploaded and finalized');
        return true;
      } catch (error) {
        console.error('Recording upload failed, falling back to simulated key', error);
        const fallbackObjectKey = `sim/${streamSessionId}/${Date.now()}.webm`;
        await API.events.finalizeRecording(recording.id, {
          objectKey: fallbackObjectKey,
          durationSeconds: captureResult?.durationSeconds ?? 15,
          sizeBytes: captureResult?.blob?.size ?? 5000000,
        });
        addActivity('Recording', 'Upload failed; finalized with simulator fallback');
        return true;
      }
    }

    await sleep(350);
  }

  addActivity('Recording', 'No recording row found to finalize');
  return false;
};

const connectSocket = () => {
  const { deviceToken } = store.get();
  if (!deviceToken) return;

  if (socket) socket.disconnect();

  socket = io({ auth: { token: deviceToken } });

  socket.on('connect', () => {
    store.update({ socketConnected: true });
    addActivity('System', 'Connected to realtime server');
    void detectMediaMode();
    if (store.get().device?.role === 'camera') {
      startCameraPreview();
    }
  });

  socket.on('disconnect', () => {
    store.update({ socketConnected: false });
    stopFrameRelay();
    void stopLocalRecording();
    teardownPeerConnection();
    store.update({ activeCameraDeviceId: null, activeStreamSessionId: null });
  });

  // Handle commands (as Camera)
  socket.on('command:received', async (payload) => {
    addActivity('Command', `Received ${payload.commandType}`);

    try {
      if (payload.commandType === 'start_stream') {
        const streamId = payload.payload.streamSessionId;
        const ready = await startCameraPreview();
        if (!ready) {
          throw new Error('Camera permission is required before streaming');
        }
        await API.streams.accept(streamId);
        await API.streams.getPublishCreds(streamId);
        await startLocalRecording();
        if (isSfuMode()) {
          await startSfuPublishHandshake(streamId);
        } else if (payload.sourceDeviceId) {
          await startOfferToClient(streamId, payload.sourceDeviceId);
          frameRelayStartTimer = setTimeout(() => {
            if (!webrtcConnected && !hasWebrtcEverConnected) {
              void startFrameRelay(streamId, payload.sourceDeviceId);
            }
          }, 2500);
        }
        addActivity('Stream', 'Accepted & Published');
        // Auto-stop after 15s for simulation
        setTimeout(async () => {
          const captureResult = await stopLocalRecording();
          await API.streams.end(streamId);
          await finalizeRecordingForStream(streamId, captureResult);
          stopFrameRelay();
          if (!isSfuMode() && socket && payload.sourceDeviceId) {
            socket.emit('webrtc:signal', {
              toDeviceId: payload.sourceDeviceId,
              streamSessionId: streamId,
              signalType: 'hangup',
            });
          }
          teardownPeerConnection();
          store.update({ activeCameraDeviceId: null, activeStreamSessionId: null });
          addActivity('Stream', 'Ended auto-simulation');
        }, 15000);
      }

      socket.emit('command:ack', { commandId: payload.commandId, status: 'acknowledged' });
    } catch (e) {
      socket.emit('command:ack', { commandId: payload.commandId, status: 'rejected', error: e.message });
    }
  });

  // Handle Events (as Client)
  socket.on('motion:detected', (payload) => {
    const cameraDeviceId = payload.cameraDeviceId || payload.deviceId;
    addActivity('Motion', `${getCameraLabel(cameraDeviceId)} has detected movement`);
    Toast.show('Motion Detected!', 'info');
    pushMotionNotification(cameraDeviceId);
  });

  socket.on('stream:started', async (payload) => {
    addActivity('Stream', 'Stream is live, connecting...');
    clearClientStream();
    store.update({
      activeCameraDeviceId: payload.cameraDeviceId ?? store.get().activeCameraDeviceId,
      activeStreamSessionId: payload.streamSessionId ?? null,
    });
    try {
      await API.streams.getSubscribeCreds(payload.streamSessionId);
      if (isSfuMode()) {
        await startSfuSubscribeHandshake(payload.streamSessionId);
      }
      Toast.show('Connected to Stream', 'success');
      if (!isSfuMode()) {
        remoteStreamWaitTimer = setTimeout(() => {
          if (!remoteClientStream) {
            Toast.show('Stream connected but no video received', 'error');
            addActivity('Stream', 'No remote video track received');
          }
        }, 6000);
      }
    } catch (e) {
      Toast.show('Stream connect failed', 'error');
    }
  });

  socket.on('stream:frame', (payload) => {
    if (isSfuMode()) return;
    if (webrtcConnected) return;
    if (!payload?.frame) return;
    if (remoteStreamWaitTimer) {
      clearTimeout(remoteStreamWaitTimer);
      remoteStreamWaitTimer = null;
    }
    const imageEl = $('clientStreamImage');
    if (!imageEl) return;
    imageEl.src = payload.frame;
    imageEl.classList.remove('hidden');
    const videoEl = $('clientStreamVideo');
    if (videoEl) {
      videoEl.classList.add('hidden');
    }
    setClientStreamMode('image');
  });

  socket.on('stream:ended', (payload) => {
    if (payload?.streamSessionId && payload.streamSessionId === store.get().activeStreamSessionId) {
      clearClientStream();
      store.update({ activeCameraDeviceId: null, activeStreamSessionId: null });
    }
  });

  socket.on('webrtc:signal', async (payload) => {
    if (isSfuMode()) return;
    const device = store.get().device;
    if (!device || !payload?.streamSessionId || !payload?.signalType || !payload?.fromDeviceId) return;

    try {
      if (payload.signalType === 'offer') {
        if (device.role !== 'client') return;
        addActivity('WebRTC', 'Offer received');
        const connection = await ensurePeerConnection({
          streamSessionId: payload.streamSessionId,
          targetDeviceId: payload.fromDeviceId,
          asCamera: false,
        });
        await connection.setRemoteDescription(new RTCSessionDescription(payload.data));
        await applyQueuedCandidates(connection, payload.streamSessionId, payload.fromDeviceId);
        const answer = await connection.createAnswer();
        await connection.setLocalDescription(answer);
        socket.emit('webrtc:signal', {
          toDeviceId: payload.fromDeviceId,
          streamSessionId: payload.streamSessionId,
          signalType: 'answer',
          data: answer,
        });
        addActivity('WebRTC', 'Answer sent');
        return;
      }

      if (payload.signalType === 'answer') {
        if (device.role !== 'camera' || !peerConnection) return;
        if (peerSessionId !== payload.streamSessionId || peerTargetDeviceId !== payload.fromDeviceId) {
          return;
        }
        if (peerConnection.signalingState !== 'have-local-offer') {
          if (peerConnection.signalingState === 'stable' && peerConnection.remoteDescription?.type === 'answer') {
            return;
          }
          return;
        }
        await peerConnection.setRemoteDescription(new RTCSessionDescription(payload.data));
        await applyQueuedCandidates(peerConnection, payload.streamSessionId, payload.fromDeviceId);
        addActivity('WebRTC', 'Answer received');
        return;
      }

      if (payload.signalType === 'candidate') {
        if (!payload.data) return;
        if (!peerConnection || peerSessionId !== payload.streamSessionId || peerTargetDeviceId !== payload.fromDeviceId) {
          queueRemoteCandidate(payload);
          return;
        }
        if (!peerConnection.remoteDescription) {
          queueRemoteCandidate(payload);
          return;
        }
        await peerConnection.addIceCandidate(new RTCIceCandidate(payload.data));
        return;
      }

      if (payload.signalType === 'hangup') {
        teardownPeerConnection();
        store.update({ activeCameraDeviceId: null, activeStreamSessionId: null });
        addActivity('Stream', 'Remote stream ended');
      }
    } catch (error) {
      console.error('Failed handling WebRTC signal', error);
      Toast.show('WebRTC negotiation failed', 'error');
    }
  });

  socket.on('error:webrtc_signal', (payload) => {
    const message = payload?.message || 'WebRTC signaling error';
    addActivity('WebRTC', message);
    Toast.show(message, 'error');
  });
};

const startPolling = () => {
  if (pollInterval) clearInterval(pollInterval);

  const poller = async () => {
    const { device, screen, activeStreamSessionId } = store.get();
    if (!device) return;

    if (screen === 'home' && device.role === 'client') {
      if (activeStreamSessionId) {
        return;
      }

      const recs = await API.ops.listRecordings().catch(() => ({ recordings: [] }));
      store.update({ recordings: recs.recordings || [] });

      const links = await API.devices.listLinks().catch(() => ({ links: [] }));
      store.update({ linkedCameras: links.links || [] });
    }

    if (screen === 'activity') {
      // maybe poll notifications
    }
  };

  poller();
  pollInterval = setInterval(poller, 5000);
};

// --- Actions ---

const Actions = {
  toggleAuthMode: () => {
    const isRegistering = !$('authNameField').classList.contains('hidden');
    if (isRegistering) {
      $('authNameField').classList.add('hidden');
      $('signInBtn').textContent = 'Sign In';
      $('toggleAuthModeBtn').textContent = 'Create an account';
    } else {
      $('authNameField').classList.remove('hidden');
      $('signInBtn').textContent = 'Create Account';
      $('toggleAuthModeBtn').textContent = 'I already have an account';
    }
  },

  submitAuth: async () => {
    const email = $('authEmail').value;
    const password = $('authPassword').value;
    const name = $('authName').value || email.split('@')[0];
    const isRegistering = !$('authNameField').classList.contains('hidden');

    try {
      if (isRegistering) {
        await API.auth.signUp({ email, password, name });
      }
      await API.auth.signIn({ email, password });
      const session = await API.auth.getSession();
      store.update({ session });
      await detectMediaMode();
      Toast.show(`Welcome, ${session.user.name}`, 'success');

      // Proceed
      if (store.get().deviceToken) {
        navigateBasedOnRole();
        connectSocket();
        startPolling();
      } else {
        store.update({ screen: 'onboarding' });
      }
    } catch (e) {
      // handled by API wrapper toast
    }
  },

  selectRole: (role) => {
    $('role').value = role;
    const btnCamera = $('btn-role-camera');
    const btnClient = $('btn-role-client');

    btnCamera.setAttribute('data-active', role === 'camera');
    btnClient.setAttribute('data-active', role === 'client');

    // DaisyUI/Tailwind manual toggle logic for visual feedback
    if (role === 'camera') {
      btnCamera.classList.add('bg-blue-600', 'text-white');
      btnCamera.classList.remove('text-gray-400');
      btnClient.classList.remove('bg-blue-600', 'text-white');
      btnClient.classList.add('text-gray-400');
    } else {
      btnClient.classList.add('bg-blue-600', 'text-white');
      btnClient.classList.remove('text-gray-400');
      btnCamera.classList.remove('bg-blue-600', 'text-white');
      btnCamera.classList.add('text-gray-400');
    }
  },

  registerDevice: async () => {
    const name = $('deviceName').value || 'Web Simulator';
    const role = $('role').value;
    const pushToken = $('pushToken').value;

    try {
      const payload = { name, role, platform: 'web', appVersion: 'sim-2.0' };
      if (pushToken && pushToken.trim().length > 0) {
        payload.pushToken = pushToken.trim();
      }

      const res = await API.devices.register(payload);

      store.update({ device: res.device, deviceToken: res.deviceToken });
      localStorage.setItem('mobileSimDevice', JSON.stringify({ device: res.device, deviceToken: res.deviceToken }));
      await detectMediaMode();

      Toast.show('Device Registered', 'success');
      navigateBasedOnRole();
      connectSocket();
      startPolling();
    } catch (e) {
      // handled
    }
  },

  signOut: async () => {
    await API.auth.signOut();
    store.update({ session: null, screen: 'auth', device: null, deviceToken: null, socketConnected: false });
    if (socket) socket.disconnect();
    stopFrameRelay();
    await stopLocalRecording();
    teardownPeerConnection();
    stopCameraPreview();
    localStorage.removeItem('mobileSimDevice');
    Toast.show('Signed Out', 'info');
  },

  // Camera Actions
  startMotion: async () => {
    try {
      const res = await API.events.startMotion();
      store.update({ isMotionActive: true, lastMotionEventId: res.event.id });
      Toast.show('Motion Event Started', 'success');
      addActivity('Motion', 'Started event ' + res.event.id);
    } catch (e) { }
  },

  endMotion: async () => {
    const { lastMotionEventId } = store.get();
    if (!lastMotionEventId) return;
    try {
      await API.events.endMotion(lastMotionEventId);
      store.update({ isMotionActive: false });
      Toast.show('Motion Ended', 'success');
      addActivity('Motion', 'Ended event');
    } catch (e) { }
  },

  // Client Actions
  linkCamera: async () => {
    const id = prompt('Enter Camera Device ID:'); // Simple prompt for now, could be better UI
    if (!id) return;
    try {
      await API.devices.link(id, store.get().device.id);
      Toast.show('Camera Linked', 'success');
      startPolling(); // refresh list
    } catch (e) { }
  },

  requestStream: async (camId) => {
    try {
      store.update({ activeCameraDeviceId: camId });
      Toast.show('Requesting Stream...', 'info');
      await API.streams.request(camId);
      // Socket will handle the rest ('stream:started')
    } catch (e) { }
  },

  openRecording: async (recordingId) => {
    try {
      const result = await API.ops.getRecordingDownloadUrl(recordingId);
      if (!result?.downloadUrl) {
        Toast.show('Recording URL unavailable', 'error');
        return;
      }
      const recording = store.get().recordings.find((entry) => entry.id === recordingId);
      const title = recording ? `${new Date(recording.createdAt).toLocaleString()} recording` : 'Recording Playback';
      openRecordingModal(result.downloadUrl, title);
    } catch (e) {
      // handled by API wrapper
    }
  },

  closeRecordingModal: () => {
    closeRecordingModal();
  },

  openMotionNotificationTarget: async (notificationId, cameraDeviceId) => {
    markMotionNotificationRead(notificationId);
    if (!cameraDeviceId) return;

    const recs = await API.ops.listRecordings().catch(() => ({ recordings: [] }));
    const readyRecording = (recs.recordings || [])
      .filter((recording) => recording.cameraDeviceId === cameraDeviceId && recording.status === 'ready')
      .sort((left, right) => new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime())[0];

    if (readyRecording?.id) {
      await Actions.openRecording(readyRecording.id);
      return;
    }

    store.update({ screen: 'home' });
    await Actions.requestStream(cameraDeviceId);
  },
};

// --- 5. Rendering ---

const render = (state) => {
  // 1. Screen Visibility
  $$('section[id^="screen-"]').forEach(el => el.classList.add('hidden'));

  if (state.screen === 'home') {
    const homeId = state.device?.role === 'camera' ? 'screen-home-camera' : 'screen-home-client';
    $(homeId).classList.remove('hidden');
  } else {
    $(`screen-${state.screen}`).classList.remove('hidden');
  }

  // 2. Top Bar Status
  const statusDot = $('#connectionStatus .status-dot');
  const statusText = $('#connectionStatus span:last-child');
  if (state.socketConnected) {
    statusDot.className = 'status-dot status-online transition-colors duration-300';
    statusText.textContent = 'ONLINE';
  } else {
    statusDot.className = 'status-dot status-offline transition-colors duration-300';
    statusText.textContent = 'OFFLINE';
  }

  const authBadge = $('authStatusBadge');
  if (state.session?.user) {
    authBadge.textContent = state.session.user.email;
    authBadge.classList.add('text-blue-400');
  } else {
    authBadge.textContent = 'Signed Out';
    authBadge.classList.remove('text-blue-400');
  }

  // 3. Bottom Nav Visibility & State
  const nav = $('bottomNav');
  const unreadNotifications = state.motionNotifications.filter((notification) => !notification.isRead).length;
  updateNotificationDot(unreadNotifications > 0);

  if (state.session && state.device) {
    nav.classList.remove('hidden');
    $$('.nav-btn').forEach(btn => {
      const target = btn.dataset.target;
      const isActive = target === state.screen || (target === 'home' && (state.screen === 'home-camera' || state.screen === 'home-client'));
      btn.setAttribute('data-active', isActive);
    });
  } else {
    nav.classList.add('hidden');
  }

  // 4. Camera Mode specifics
  if (state.device?.role === 'camera') {
    const preview = $('cameraPreview');
    const offlineOverlay = $('cameraOfflineOverlay');

    if (state.socketConnected) {
      offlineOverlay.classList.add('hidden');
      if (state.isMotionActive) {
        preview.classList.remove('bg-black/50');
        preview.classList.add('bg-red-900/20');
        $('startMotionBtn').classList.add('hidden');
        $('endMotionBtn').classList.remove('hidden');
        $('endMotionBtn').disabled = false;
      } else {
        preview.classList.add('bg-black/50');
        preview.classList.remove('bg-red-900/20');
        $('startMotionBtn').classList.remove('hidden');
        $('endMotionBtn').classList.add('hidden');
      }
    } else {
      offlineOverlay.classList.remove('hidden');
    }
  }

  // 5. Client Mode Lists
  if (state.device?.role === 'client' && state.screen === 'home') {
    if (!state.activeCameraDeviceId && state.linkedCameras.length > 0) {
      void Actions.requestStream(state.linkedCameras[0].cameraDeviceId);
    }

    const list = $('linkedCamerasList');
    if (state.linkedCameras.length === 0) {
      list.innerHTML = `<div class="min-w-full text-center py-8 bg-gray-900/30 rounded-xl border border-dashed border-gray-800"><p class="text-gray-600 text-xs">No cameras linked yet</p></div>`;
    } else {
      list.innerHTML = state.linkedCameras.map(link => `
                <div class="min-w-[240px] max-w-[240px] bg-gray-900/60 rounded-xl border border-white/5 overflow-hidden">
                    <div class="relative overflow-hidden bg-black/40 border-b border-white/5 aspect-video">
                      ${
                        state.activeCameraDeviceId === link.cameraDeviceId
                          ? `
                            <video id="clientStreamVideo" class="absolute inset-0 w-full h-full object-cover hidden" autoplay playsinline></video>
                            <img id="clientStreamImage" class="absolute inset-0 w-full h-full object-cover hidden" alt="Live stream preview" />
                            <div id="clientStreamPlaceholder" class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-gray-500">
                              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                              </svg>
                              <p class="text-[10px]">${state.activeStreamSessionId ? 'Connecting stream...' : 'Waiting for stream'}</p>
                            </div>
                          `
                          : `
                            <div class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-gray-500">
                              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                              </svg>
                              <p class="text-[10px]">Stand by</p>
                            </div>
                          `
                      }
                    </div>
                    <div class="px-3 py-2">
                      <div>
                          <p class="text-xs font-bold text-gray-300">${getCameraLabel(link.cameraDeviceId)}</p>
                          <p class="text-[10px] text-gray-500">${link.status}</p>
                      </div>
                    </div>
                </div>
            `).join('');

      if (state.activeCameraDeviceId && remoteClientStream) {
        const videoEl = $('clientStreamVideo');
        if (videoEl && videoEl.srcObject !== remoteClientStream) {
          videoEl.srcObject = remoteClientStream;
          setClientStreamMode('video');
          void videoEl.play().catch(() => {});
        }
      }

      const imageEl = $('clientStreamImage');
      if (imageEl && !imageEl.dataset.errorBound) {
        imageEl.dataset.errorBound = '1';
        imageEl.addEventListener('error', () => {
          const videoEl = $('clientStreamVideo');
          if (videoEl) {
            videoEl.classList.add('hidden');
          }
          setClientStreamMode('unavailable');
        });
      }
    }

    const recList = $('recordingsList');
    if (state.recordings.length === 0) {
      recList.innerHTML = `<div class="text-center py-4 bg-gray-900/30 rounded-xl"><p class="text-gray-600 text-xs text-center">No recordings found</p></div>`;
    } else {
      recList.innerHTML = state.recordings.slice(0, 5).map(rec => `
        <div class="flex items-center justify-between p-3 bg-gray-900/40 rounded-lg border border-white/5 hover:bg-gray-800 transition-colors">
            <div class="flex flex-col">
                <span class="text-xs font-medium text-gray-300">${new Date(rec.createdAt).toLocaleString()}</span>
                <span class="text-[10px] text-gray-500">${rec.durationSeconds != null ? `${rec.durationSeconds}s duration` : 'Duration pending'} · ${rec.status ?? 'unknown'}</span>
            </div>
            <button class="btn btn-xs btn-outline border-white/10 text-gray-400 download-recording-btn" data-recording-id="${rec.id}" ${rec.status === 'ready' ? '' : 'disabled'}>
              View
            </button>
        </div>
      `).join('');
    }
  }

  if (state.screen === 'activity') {
    const activityFeed = $('activityFeedList');
    if (state.motionNotifications.length === 0) {
      activityFeed.innerHTML = `
        <div class="text-center py-10 opacity-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mx-auto mb-2 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
          <p class="text-sm text-gray-500">No notifications yet</p>
        </div>
      `;
    } else {
      activityFeed.innerHTML = state.motionNotifications.map((notification) => `
        <button class="w-full text-left p-3 rounded-lg border border-white/5 ${notification.isRead ? 'bg-gray-900/30' : 'bg-blue-900/20'} motion-notification-btn" data-notification-id="${notification.id}" data-camera-device-id="${notification.cameraDeviceId}">
          <p class="text-xs font-medium text-gray-200">${notification.message}</p>
          <p class="text-[10px] text-gray-500 mt-1">${new Date(notification.createdAt).toLocaleString()}</p>
        </button>
      `).join('');
    }
  }

  // 6. Settings Screen
  if (state.session?.user && state.screen === 'settings') {
    $('profileName').textContent = state.session.user.name;
    $('profileEmail').textContent = state.session.user.email;
    $('profileInitials').textContent = state.session.user.name.charAt(0).toUpperCase();
  }
};

const addActivity = (type, msg) => {
  const list = $('activityFeedList');
  const item = document.createElement('div');
  item.className = 'p-3 rounded-lg bg-gray-900/40 border border-white/5 flex flex-col gap-1';
  item.innerHTML = `
        <div class="flex justify-between items-start">
            <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">${type}</span>
            <span class="text-[10px] text-gray-600">${new Date().toLocaleTimeString()}</span>
        </div>
        <p class="text-xs text-gray-300">${msg}</p>
    `;
  list.prepend(item);

  // Also update camera logs if applicable
  if ($('cameraLogs')) {
    const logLine = document.createElement('div');
    logLine.textContent = `[${new Date().toLocaleTimeString()}] ${type}: ${msg}`;
    $('cameraLogs').prepend(logLine);
  }
};

const updateNotificationDot = (show) => {
  const dot = $('notificationDot');
  if (show) dot.classList.remove('hidden');
  else dot.classList.add('hidden');
};

// --- 6. Event Listeners ---

$('toggleAuthModeBtn').addEventListener('click', Actions.toggleAuthMode);
$('signInBtn').addEventListener('click', Actions.submitAuth);
$('registerBtn').addEventListener('click', Actions.registerDevice);
$('loadSavedBtn').addEventListener('click', () => { /* Handle legacy loading if needed */ });
$$('#screen-onboarding [data-role]').forEach((btn) => {
  btn.addEventListener('click', () => Actions.selectRole(btn.dataset.role));
});
$('recordingsList').addEventListener('click', (event) => {
  const target = event.target.closest('.download-recording-btn');
  if (!target || target.disabled) return;
  const recordingId = target.dataset.recordingId;
  if (!recordingId) return;
  Actions.openRecording(recordingId);
});
$('activityFeedList').addEventListener('click', (event) => {
  const target = event.target.closest('.motion-notification-btn');
  if (!target) return;
  const notificationId = target.dataset.notificationId;
  const cameraDeviceId = target.dataset.cameraDeviceId;
  if (!notificationId || !cameraDeviceId) return;
  Actions.openMotionNotificationTarget(notificationId, cameraDeviceId);
});

// Navbar
$$('.nav-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    if (btn.dataset.target === 'activity') {
      markAllNotificationsRead();
    }
    store.update({ screen: btn.dataset.target });
  });
});

// Camera Controls
$('cameraGoOnlineBtn').addEventListener('click', async () => {
  if (store.get().device?.role === 'camera') {
    await startCameraPreview();
  }
  connectSocket();
});
$('startMotionBtn').addEventListener('click', Actions.startMotion);
$('endMotionBtn').addEventListener('click', Actions.endMotion);

// Client Controls
$('linkCameraBtn').addEventListener('click', Actions.linkCamera);
$('refreshClientBtn').addEventListener('click', startPolling);

// Settings
$('signOutBtn').addEventListener('click', Actions.signOut);
$('clearActivityBtn').addEventListener('click', () => {
  store.update({ motionNotifications: [] });
});
$('recordingModalCloseBtn').addEventListener('click', Actions.closeRecordingModal);
$('recordingModal').addEventListener('click', (event) => {
  if (event.target === $('recordingModal')) {
    Actions.closeRecordingModal();
  }
});

// Init
store.subscribe(render);
init();

window.addEventListener('beforeunload', () => {
  stopFrameRelay();
  void stopLocalRecording();
  teardownPeerConnection();
  stopCameraPreview();
});

window.Actions = Actions;