import * as vscode from 'vscode';
import * as fs from 'fs';
import * as path from 'path';
import * as http from 'http';
import { getToolWebviewStyles } from './shared';

const store: {
  panel: vscode.WebviewPanel | null;
  previewServer: http.Server | null;
  previewPort: number;
  previewContent: string;
  previewDir: string;
} = { panel: null, previewServer: null, previewPort: 0, previewContent: '', previewDir: '' };

interface Device {
  id: string;
  name: string;
  sw: number; sh: number;
  scr: number;
  notch: 'none' | 'notch' | 'island' | 'punch';
  nw?: number; nh?: number; nr?: number; ps?: number;
  sat: number; sab: number;
}

const DEVICES: Device[] = [
  // ── iPhone 17 ──────────────────────────────────────────────────────────────
  { id: 'iphone-17-pro-max', name: 'iPhone 17 Pro Max', sw: 440, sh: 956, scr: 44, notch: 'island', nw: 126, nh: 37, nr: 20, sat: 62, sab: 34 },
  { id: 'iphone-17-pro',     name: 'iPhone 17 Pro',     sw: 402, sh: 874, scr: 42, notch: 'island', nw: 126, nh: 37, nr: 20, sat: 62, sab: 34 },
  { id: 'iphone-air',        name: 'iPhone Air',        sw: 420, sh: 912, scr: 42, notch: 'island', nw: 126, nh: 37, nr: 20, sat: 62, sab: 34 },
  { id: 'iphone-17',         name: 'iPhone 17',         sw: 402, sh: 874, scr: 42, notch: 'island', nw: 126, nh: 37, nr: 20, sat: 62, sab: 34 },
  // ── iPhone 16 ──────────────────────────────────────────────────────────────
  { id: 'iphone-16-pro-max', name: 'iPhone 16 Pro Max', sw: 440, sh: 956, scr: 44, notch: 'island', nw: 126, nh: 37, nr: 20, sat: 62, sab: 34 },
  { id: 'iphone-16-pro',     name: 'iPhone 16 Pro',     sw: 402, sh: 874, scr: 42, notch: 'island', nw: 126, nh: 37, nr: 20, sat: 62, sab: 34 },
  { id: 'iphone-16-plus',    name: 'iPhone 16 Plus',    sw: 430, sh: 932, scr: 42, notch: 'island', nw: 120, nh: 36, nr: 18, sat: 59, sab: 34 },
  { id: 'iphone-16',         name: 'iPhone 16',         sw: 390, sh: 844, scr: 40, notch: 'island', nw: 120, nh: 36, nr: 18, sat: 59, sab: 34 },
  // ── iPhone 15 ──────────────────────────────────────────────────────────────
  { id: 'iphone-15-pro-max', name: 'iPhone 15 Pro Max', sw: 430, sh: 932, scr: 42, notch: 'island', nw: 120, nh: 36, nr: 18, sat: 59, sab: 34 },
  { id: 'iphone-15-pro',     name: 'iPhone 15 Pro',     sw: 393, sh: 852, scr: 40, notch: 'island', nw: 120, nh: 36, nr: 18, sat: 59, sab: 34 },
  { id: 'iphone-15-plus',    name: 'iPhone 15 Plus',    sw: 430, sh: 932, scr: 42, notch: 'island', nw: 120, nh: 36, nr: 18, sat: 59, sab: 34 },
  { id: 'iphone-15',         name: 'iPhone 15',         sw: 390, sh: 844, scr: 38, notch: 'island', nw: 120, nh: 36, nr: 18, sat: 59, sab: 34 },
  // ── iPhone 14 ──────────────────────────────────────────────────────────────
  { id: 'iphone-14-pro-max', name: 'iPhone 14 Pro Max', sw: 430, sh: 932, scr: 42, notch: 'island', nw: 120, nh: 36, nr: 18, sat: 59, sab: 34 },
  { id: 'iphone-14-pro',     name: 'iPhone 14 Pro',     sw: 393, sh: 852, scr: 40, notch: 'island', nw: 120, nh: 36, nr: 18, sat: 59, sab: 34 },
  { id: 'iphone-14-plus',    name: 'iPhone 14 Plus',    sw: 428, sh: 926, scr: 40, notch: 'notch',  nw: 130, nh: 34,          sat: 47, sab: 34 },
  { id: 'iphone-14',         name: 'iPhone 14',         sw: 390, sh: 844, scr: 38, notch: 'notch',  nw: 130, nh: 34,          sat: 47, sab: 34 },
  // ── Other ──────────────────────────────────────────────────────────────────
  { id: 'iphone-se3',        name: 'iPhone SE (3rd gen)', sw: 375, sh: 667, scr: 4,  notch: 'none',                           sat: 20, sab: 0  },
  { id: 'pixel-8',           name: 'Google Pixel 8',    sw: 411, sh: 914, scr: 22, notch: 'punch',  ps: 14,                  sat: 28, sab: 24 },
  { id: 'galaxy-s24',        name: 'Samsung Galaxy S24', sw: 360, sh: 780, scr: 20, notch: 'punch',  ps: 12,                  sat: 28, sab: 24 },
];

export function openDeviceSimulator(_context: vscode.ExtensionContext) {
  if (store.panel) {
    store.panel.reveal();
    return;
  }

  const panel = vscode.window.createWebviewPanel(
    'hplToolbox.deviceSimulator',
    'Device Simulator',
    vscode.ViewColumn.Active,
    { enableScripts: true, retainContextWhenHidden: true }
  );

  store.panel = panel;
  panel.onDidDispose(() => {
    store.panel = null;
    store.previewContent = '';
    store.previewDir = '';
    if (store.previewServer) {
      store.previewServer.close();
      store.previewServer = null;
      store.previewPort = 0;
    }
  });
  panel.webview.html = getHtml(DEVICES);

  let lastFilePath = '';

  panel.webview.onDidReceiveMessage(async (msg) => {
    if (msg.type === 'pickFile') {
      const picked = await vscode.window.showOpenDialog({
        canSelectFiles: true,
        canSelectFolders: false,
        canSelectMany: false,
        openLabel: 'Select File',
        filters: { 'HTML': ['html', 'htm'] },
      });
      if (picked?.[0]) {
        lastFilePath = picked[0].fsPath;
        sendFile(panel, lastFilePath, true);
      }
    } else if (msg.type === 'reload') {
      if (lastFilePath) sendFile(panel, lastFilePath, false);
    } else if (msg.type === 'exportDevices') {
      const target = await vscode.window.showSaveDialog({
        defaultUri: vscode.Uri.file('hpl-device-simulator-devices.json'),
        filters: { 'JSON': ['json'] },
        saveLabel: 'Export Devices',
      });
      if (target) {
        await fs.promises.writeFile(target.fsPath, String(msg.content || ''), 'utf8');
      }
    }
  });
}

function sendFile(panel: vscode.WebviewPanel, filePath: string, resetMute: boolean) {
  try {
    const content = fs.readFileSync(filePath, 'utf8');
    store.previewContent = content;
    store.previewDir = path.dirname(filePath);
    ensurePreviewServer(() => {
      const sourceUrl = store.previewPort ? `http://127.0.0.1:${store.previewPort}/preview/index.html` : '';
      panel.webview.postMessage({ type: 'fileLoaded', content, name: path.basename(filePath), sourceUrl, resetMute });
    });
  } catch {
    vscode.window.showErrorMessage('Device Simulator: could not read ' + path.basename(filePath));
  }
}

function ensurePreviewServer(callback: () => void) {
  if (store.previewServer && store.previewPort) {
    callback();
    return;
  }
  const server = http.createServer((req, res) => {
    if (!req.url || !req.url.startsWith('/preview')) {
      res.writeHead(404);
      res.end('Not found');
      return;
    }
    const requestUrl = new URL(req.url, 'http://127.0.0.1');
    const assetPath = decodeURIComponent(requestUrl.pathname.replace(/^\/preview\/?/, ''));
    if (!assetPath || assetPath === 'index.html') {
      res.writeHead(200, {
        'Content-Type': 'text/html; charset=utf-8',
        'Cache-Control': 'no-store',
      });
      res.end(injectServerMuteBridge(store.previewContent));
      return;
    }
    const resolved = path.resolve(store.previewDir, assetPath);
    if (!store.previewDir || !resolved.startsWith(path.resolve(store.previewDir) + path.sep)) {
      res.writeHead(403);
      res.end('Forbidden');
      return;
    }
    fs.readFile(resolved, (err, data) => {
      if (err) {
        res.writeHead(404);
        res.end('Not found');
        return;
      }
      res.writeHead(200, { 'Cache-Control': 'no-store' });
      res.end(data);
    });
  });
  server.listen(0, '127.0.0.1', () => {
    const address = server.address();
    store.previewServer = server;
    store.previewPort = typeof address === 'object' && address ? address.port : 0;
    callback();
  });
  server.on('error', () => {
    store.previewServer = null;
    store.previewPort = 0;
    callback();
  });
}

function injectServerMuteBridge(html: string): string {
  const bridge =
    '<scr' + 'ipt>' +
    '(function(){' +
    'if(window.__hplMuteBridgeInstalled)return;window.__hplMuteBridgeInstalled=true;' +
    'var muted=false,media=[],contexts=[],gains=[],destinations=[];' +
    'function rememberMedia(el){if(!el||media.indexOf(el)>=0)return;media.push(el);applyMedia(el);}' +
    'function applyMedia(el){try{el.muted=muted;if(muted){if(el.__hplVolume===undefined)el.__hplVolume=el.volume;el.volume=0;}else{if(el.__hplVolume!==undefined)el.volume=el.__hplVolume;}}catch(e){}}' +
    'function apply(){for(var i=0;i<media.length;i++)applyMedia(media[i]);for(var j=0;j<gains.length;j++){try{gains[j].gain.value=muted?0:1;}catch(e){}}}' +
    'window.__hplSetMuted=function(v){muted=!!v;window.__hplMuted=muted;apply();};' +
    'window.addEventListener("message",function(e){if(e.data&&e.data.type==="hplDeviceSimulatorMute")window.__hplSetMuted(e.data.muted);});' +
    'function patchAudioContext(name){var Orig=window[name];if(!Orig||Orig.__hplPatched)return;function Wrapped(){var ctx=arguments.length?new Orig(arguments[0]):new Orig();try{var gain=ctx.createGain();gain.gain.value=muted?0:1;gain.connect(ctx.destination);contexts.push(ctx);gains.push(gain);destinations.push(ctx.destination);}catch(e){}return ctx;}Wrapped.prototype=Orig.prototype;try{Object.setPrototypeOf(Wrapped,Orig);}catch(e){}Wrapped.__hplPatched=true;window[name]=Wrapped;}' +
    'try{var origConnect=window.AudioNode&&window.AudioNode.prototype&&window.AudioNode.prototype.connect;if(origConnect&&!origConnect.__hplPatched){var patched=function(target){var args=Array.prototype.slice.call(arguments);var idx=destinations.indexOf(args[0]);if(idx>=0&&gains[idx])args[0]=gains[idx];return origConnect.apply(this,args);};patched.__hplPatched=true;window.AudioNode.prototype.connect=patched;}}catch(e){}' +
    'try{patchAudioContext("AudioContext");patchAudioContext("webkitAudioContext");}catch(e){}' +
    'try{var play=window.HTMLMediaElement&&window.HTMLMediaElement.prototype&&window.HTMLMediaElement.prototype.play;if(play&&!play.__hplPatched){var p=function(){rememberMedia(this);return play.apply(this,arguments);};p.__hplPatched=true;window.HTMLMediaElement.prototype.play=p;}}catch(e){}' +
    'function scan(root){try{(root||document).querySelectorAll("audio,video").forEach(rememberMedia);}catch(e){}}' +
    'if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",function(){scan(document);});else scan(document);' +
    'try{new MutationObserver(function(ms){ms.forEach(function(m){Array.prototype.forEach.call(m.addedNodes,function(n){if(n.nodeType!==1)return;if(n.matches&&n.matches("audio,video"))rememberMedia(n);scan(n);});});}).observe(document.documentElement,{childList:true,subtree:true});}catch(e){}' +
    '})();' +
    '</scr' + 'ipt>';
  if (/<head\b[^>]*>/i.test(html)) {
    return html.replace(/<head\b[^>]*>/i, (match) => match + bridge);
  }
  return bridge + html;
}

function getHtml(devices: Device[]): string {
  const devicesJson = JSON.stringify(devices);
  return `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
${getToolWebviewStyles()}

/* ── layout ─────────────────────────────────────────────────────────── */
html, body { min-height: 100%; }

/* Setup view — shown before any file is loaded */
#setup-view { min-height: 100%; }

/* Simulator view — shown after first file load */
#sim-view {
  display: none;
  height: min(720px, calc(100vh - 280px));
  min-height: 520px;
  margin-top: var(--tool-gap-lg);
  gap: var(--tool-gap-lg);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  align-items: stretch;
}
#sim-view.active { display: grid; }

/* shared panel chrome */
.sim-panel {
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  background: var(--tool-panel-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── left: preview ───────────────────────────────────────────────────── */
#preview-area {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  position: relative;
}
#screen-scaler {
  transform-origin: top center;
  flex: 0 0 auto;
}
#device-screen {
  --cutout-bg: #000;
  position: relative;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 0 3px #1a1a1a,
    0 0 0 4px rgba(255,255,255,0.05),
    0 8px 32px rgba(0,0,0,0.5);
}
#device-screen iframe {
  display: block;
  border: none;
  position: absolute;
  top: 0; left: 0;
}
.cutout {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  background: var(--cutout-bg);
}
.title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.title-select {
  width: 180px;
  min-width: 120px;
}
.title-orient {
  min-height: 28px;
}
.orient-icon {
  display: block;
  transition: transform 120ms ease;
}
.title-orient.landscape .orient-icon {
  transform: rotate(90deg);
}
.icon-btn {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  background: var(--vscode-button-secondaryBackground);
  color: var(--vscode-button-secondaryForeground);
  border-color: var(--tool-border);
}
.icon-btn:hover { background: var(--vscode-button-secondaryHoverBackground); }
.icon-btn[aria-pressed="true"] { color: var(--vscode-testing-iconPassed, #73c991); }
.device-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.device-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.48);
}
.device-settings-modal.active { display: flex; }
.device-settings-dialog {
  width: min(560px, 100%);
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  background: var(--vscode-editor-background);
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
  overflow: hidden;
}
.device-list-manager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 8px;
}
.device-list {
  min-height: 220px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  background: var(--tool-panel-soft);
}
.device-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--tool-border);
}
.device-row:last-child { border-bottom: 0; }
.device-row.active { background: rgba(0,127,212,0.16); }
.device-row-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.device-row-size {
  color: var(--vscode-descriptionForeground);
  font-size: 11px;
  white-space: nowrap;
}
.device-list-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.device-settings-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.device-settings-footer button {
  min-height: 30px;
}
.device-settings-status {
  margin-top: 10px;
  color: var(--vscode-descriptionForeground);
  font-size: 12px;
  min-height: 18px;
}
.device-form {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--tool-border);
}
.device-form.active { display: block; }
.device-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.device-form-grid label {
  display: grid;
  gap: 4px;
  color: var(--vscode-descriptionForeground);
  font-size: 11px;
}
.device-form-grid .full {
  grid-column: 1 / -1;
}
.settings-close {
  margin-left: auto;
}

@media (max-width: 720px) {
  #sim-view {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(420px, 60vh);
    overflow: visible;
  }
  .title-select {
    width: min(180px, 36vw);
  }
}
</style>
</head>
<body>

<!-- ── setup view (no file loaded yet) ─────────────────────────────── -->
<div id="setup-view">
  <main class="tool-page">
    <header class="tool-header">
      <h2 class="tool-title">Device Simulator</h2>
      <p class="tool-description">Preview HTML playables inside accurate mobile device frames with notch and Dynamic Island overlays.</p>
    </header>
    <section class="tool-panel input-panel">
      <div class="panel-header device-settings-header">
        <h3 class="panel-title">Input</h3>
        <button id="settings-btn" class="icon-btn settings-close" title="Device Settings" aria-label="Device Settings">&#9881;</button>
      </div>
      <div class="panel-body">
        <div class="control-label">Playable HTML</div>
        <div class="field-row">
          <button id="pick-btn" class="secondary">Select File</button>
        </div>
        <div class="file-name" id="setup-file-name" style="margin-top:8px;">(no file selected)</div>
        <div id="setup-status" class="status-panel"></div>
      </div>
    </section>
    <div id="device-settings-modal" class="device-settings-modal" role="dialog" aria-modal="true" aria-labelledby="device-settings-title">
      <div class="device-settings-dialog">
        <div class="panel-header device-settings-header">
          <h3 id="device-settings-title" class="panel-title">Device Settings</h3>
          <button id="close-settings-btn" class="icon-btn settings-close" title="Close" aria-label="Close">&times;</button>
        </div>
        <div class="panel-body">
          <div class="device-list-manager">
            <div id="device-list" class="device-list" role="listbox" aria-label="Devices"></div>
            <div class="device-list-controls">
              <button id="add-device-btn" class="icon-btn" title="Add Device" aria-label="Add Device">+</button>
              <button id="remove-device-btn" class="icon-btn" title="Delete Selected Devices" aria-label="Delete Selected Devices">-</button>
              <button id="move-device-up-btn" class="icon-btn" title="Move Selected Up" aria-label="Move Selected Up">&#8593;</button>
              <button id="move-device-down-btn" class="icon-btn" title="Move Selected Down" aria-label="Move Selected Down">&#8595;</button>
            </div>
          </div>
          <div id="device-settings-status" class="device-settings-status"></div>
          <div id="device-form" class="device-form">
            <div class="device-form-grid">
              <label class="full">Name<input id="device-name-input" type="text" /></label>
              <label>Width<input id="device-sw-input" type="text" inputmode="numeric" /></label>
              <label>Height<input id="device-sh-input" type="text" inputmode="numeric" /></label>
              <label>Corner Radius<input id="device-scr-input" type="text" inputmode="numeric" /></label>
              <label>Notch
                <select id="device-notch-input">
                  <option value="none">none</option>
                  <option value="notch">notch</option>
                  <option value="island">island</option>
                  <option value="punch">punch</option>
                </select>
              </label>
              <label>Notch Width<input id="device-nw-input" type="text" inputmode="numeric" /></label>
              <label>Notch Height<input id="device-nh-input" type="text" inputmode="numeric" /></label>
              <label>Notch Radius<input id="device-nr-input" type="text" inputmode="numeric" /></label>
              <label>Punch Size<input id="device-ps-input" type="text" inputmode="numeric" /></label>
              <label>Safe Top<input id="device-sat-input" type="text" inputmode="numeric" /></label>
              <label>Safe Bottom<input id="device-sab-input" type="text" inputmode="numeric" /></label>
            </div>
            <div class="action-row">
              <button id="save-device-btn">Save Device</button>
              <button id="cancel-device-btn" class="secondary">Cancel</button>
            </div>
          </div>
          <div class="device-settings-footer">
            <button id="restore-devices-btn" class="secondary">Restore Defaults</button>
            <button id="import-devices-btn" class="secondary">Import Devices</button>
            <button id="export-devices-btn" class="secondary">Export Devices</button>
          </div>
          <input id="import-devices-input" type="file" accept="application/json,.json" style="display:none" />
        </div>
      </div>
    </div>
    <!-- ── simulator view (file loaded) ───────────────────────────── -->
    <div id="sim-view">

      <!-- left: device preview -->
      <section class="sim-panel">
        <div class="panel-header">
          <h3 class="panel-title">Playable</h3>
          <div style="display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;margin-left:auto;">
            <span id="file-label" style="font-size:11px;color:var(--vscode-descriptionForeground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;"></span>
            <span id="dim-label" style="font-size:11px;color:var(--vscode-descriptionForeground);white-space:nowrap;flex-shrink:0;"></span>
          </div>
          <div class="title-actions">
            <select id="device-select" class="title-select" title="Device"></select>
            <select id="language-select" class="title-select" title="Language" aria-label="Language"></select>
            <button id="orient-btn" class="icon-btn title-orient" title="Switch to Landscape" aria-label="Switch to Landscape"><span class="orient-icon">&#128241;</span></button>
            <button id="mute-btn" class="icon-btn" title="Mute" aria-label="Mute" aria-pressed="false">&#128263;</button>
            <button id="reload-btn" class="icon-btn" title="Reload" aria-label="Reload">&#8635;</button>
          </div>
        </div>
        <div id="preview-area">
          <div id="screen-scaler"></div>
        </div>
      </section>

      </div>
  </main>
</div>
<script>
const vscode = acquireVsCodeApi();
const DEFAULT_DEVICES = ${devicesJson};
const DEVICES_STORAGE_KEY = 'hplDeviceSimulator.devices.v1';
const LANGUAGES = [
  { name: 'English', code: 'en' },
  { name: 'Chinese (Simplified)', code: 'zh-hans' },
  { name: 'Chinese (Traditional)', code: 'zh-hant' },
  { name: 'French', code: 'fr' },
  { name: 'German', code: 'de' },
  { name: 'Japanese', code: 'ja' },
  { name: 'Korean', code: 'ko' },
  { name: 'Portuguese', code: 'pt' },
  { name: 'Russian', code: 'ru' },
  { name: 'Spanish', code: 'es' }
];

let devices = loadDevices();
let device = devices[0] || DEFAULT_DEVICES[0];
let language = 'en';
let landscape = false;
let currentContent = null;
let currentSourceUrl = '';
let currentBlobUrl = null;
let loadVersion = 0;
let cutoutColor = '#000000';
let muted = false;
const mediaVolumes = new WeakMap();
let muteObserver = null;
let muteDocument = null;

/* ── device selector ─────────────────────────────────────────────────── */
const sel = document.getElementById('device-select');
const languageSelect = document.getElementById('language-select');
populateDeviceSelect(device.id);
populateLanguageSelect();
sel.addEventListener('change', function() {
  device = devices[parseInt(sel.value, 10)] || devices[0] || DEFAULT_DEVICES[0];
  renderScreen();
  if (currentContent) loadContent(currentContent);
});
languageSelect.addEventListener('change', function() {
  language = languageSelect.value || LANGUAGES[0].code;
  if (currentContent) loadContent(currentContent);
});
document.getElementById('add-device-btn').addEventListener('click', addDevice);
document.getElementById('remove-device-btn').addEventListener('click', removeCurrentDevice);
document.getElementById('import-devices-btn').addEventListener('click', function() {
  document.getElementById('import-devices-input').click();
});
document.getElementById('export-devices-btn').addEventListener('click', exportDevices);
document.getElementById('restore-devices-btn').addEventListener('click', restoreDefaultDevices);
document.getElementById('import-devices-input').addEventListener('change', importDevices);
document.getElementById('settings-btn').addEventListener('click', openDeviceSettings);
document.getElementById('close-settings-btn').addEventListener('click', closeDeviceSettings);
document.getElementById('save-device-btn').addEventListener('click', saveDeviceForm);
document.getElementById('cancel-device-btn').addEventListener('click', hideDeviceForm);
document.getElementById('move-device-up-btn').addEventListener('click', moveSelectedDevicesUp);
document.getElementById('move-device-down-btn').addEventListener('click', moveSelectedDevicesDown);
document.getElementById('device-settings-modal').addEventListener('click', function(event) {
  if (event.target === event.currentTarget) closeDeviceSettings();
});

function openDeviceSettings() {
  document.getElementById('device-settings-modal').classList.add('active');
  renderDeviceList();
  setDeviceSettingsStatus('');
}

function closeDeviceSettings() {
  document.getElementById('device-settings-modal').classList.remove('active');
  hideDeviceForm();
}

function setDeviceSettingsStatus(message) {
  document.getElementById('device-settings-status').textContent = message || '';
}

function showDeviceForm() {
  const source = device || DEFAULT_DEVICES[0];
  document.getElementById('device-name-input').value = source.name ? source.name + ' Copy' : 'Custom Device';
  document.getElementById('device-sw-input').value = String(source.sw || 390);
  document.getElementById('device-sh-input').value = String(source.sh || 844);
  document.getElementById('device-scr-input').value = String(source.scr || 40);
  document.getElementById('device-notch-input').value = source.notch || 'none';
  document.getElementById('device-nw-input').value = source.nw === undefined ? '' : String(source.nw);
  document.getElementById('device-nh-input').value = source.nh === undefined ? '' : String(source.nh);
  document.getElementById('device-nr-input').value = source.nr === undefined ? '' : String(source.nr);
  document.getElementById('device-ps-input').value = source.ps === undefined ? '' : String(source.ps);
  document.getElementById('device-sat-input').value = String(source.sat || 0);
  document.getElementById('device-sab-input').value = String(source.sab || 0);
  document.getElementById('device-form').classList.add('active');
  setDeviceSettingsStatus('');
}

function hideDeviceForm() {
  document.getElementById('device-form').classList.remove('active');
}

function formOptionalNumber(id) {
  const value = document.getElementById(id).value.trim();
  return value === '' ? undefined : Number(value);
}

function saveDeviceForm() {
  const name = document.getElementById('device-name-input').value.trim();
  const created = normalizeDevice({
    id: (slugify(name) || 'custom-device') + '-' + Date.now(),
    name: name,
    sw: Number(document.getElementById('device-sw-input').value),
    sh: Number(document.getElementById('device-sh-input').value),
    scr: Number(document.getElementById('device-scr-input').value),
    notch: document.getElementById('device-notch-input').value,
    nw: formOptionalNumber('device-nw-input'),
    nh: formOptionalNumber('device-nh-input'),
    nr: formOptionalNumber('device-nr-input'),
    ps: formOptionalNumber('device-ps-input'),
    sat: Number(document.getElementById('device-sat-input').value),
    sab: Number(document.getElementById('device-sab-input').value)
  }, devices.length);
  if (!created) {
    setDeviceSettingsStatus('Enter at least a valid width and height.');
    return;
  }
  devices.push(created);
  saveDevices();
  populateDeviceSelect(created.id);
  renderDeviceList([created.id]);
  hideDeviceForm();
  setDeviceSettingsStatus('Added ' + created.name + '.');
  renderScreen();
  if (currentContent) loadContent(currentContent);
}

function populateDeviceSelect(selectedId) {
  sel.innerHTML = '';
  devices.forEach(function(d, i) {
    const o = document.createElement('option');
    o.value = String(i);
    o.textContent = d.name;
    sel.appendChild(o);
  });
  const foundIndex = devices.findIndex(function(d) { return d.id === selectedId; });
  const index = foundIndex >= 0 ? foundIndex : 0;
  sel.value = String(index);
  device = devices[index] || DEFAULT_DEVICES[0];
  renderDeviceList(getCheckedDeviceIds());
}

function populateLanguageSelect() {
  languageSelect.innerHTML = '';
  LANGUAGES.forEach(function(lang) {
    const o = document.createElement('option');
    o.value = lang.code;
    o.textContent = lang.name;
    languageSelect.appendChild(o);
  });
  languageSelect.value = language;
}

function renderDeviceList(checkedIds) {
  const list = document.getElementById('device-list');
  if (!list) return;
  const checked = new Set(checkedIds || []);
  list.innerHTML = '';
  devices.forEach(function(d, i) {
    const row = document.createElement('label');
    row.className = 'device-row' + (d.id === device.id ? ' active' : '');
    row.setAttribute('role', 'option');
    row.title = d.name;
    const input = document.createElement('input');
    input.type = 'checkbox';
    input.value = d.id;
    input.checked = checked.has(d.id);
    const name = document.createElement('span');
    name.className = 'device-row-name';
    name.textContent = d.name;
    const size = document.createElement('span');
    size.className = 'device-row-size';
    size.textContent = d.sw + ' x ' + d.sh;
    row.append(input, name, size);
    row.addEventListener('dblclick', function() {
      populateDeviceSelect(d.id);
      renderScreen();
      if (currentContent) loadContent(currentContent);
    });
    list.appendChild(row);
  });
}

function getCheckedDeviceIds() {
  return Array.from(document.querySelectorAll('#device-list input[type="checkbox"]:checked')).map(function(input) {
    return input.value;
  });
}

function getCheckedDeviceIndexes() {
  const checked = new Set(getCheckedDeviceIds());
  return devices.map(function(d, i) { return checked.has(d.id) ? i : -1; }).filter(function(i) { return i >= 0; });
}

function loadDevices() {
  try {
    const raw = localStorage.getItem(DEVICES_STORAGE_KEY);
    if (raw) {
      const parsed = normalizeDeviceList(JSON.parse(raw));
      if (parsed.length) return parsed;
    }
  } catch {}
  return DEFAULT_DEVICES.map(function(d) { return Object.assign({}, d); });
}

function saveDevices() {
  localStorage.setItem(DEVICES_STORAGE_KEY, JSON.stringify(devices));
}

function cloneDefaultDevices() {
  return DEFAULT_DEVICES.map(function(d) { return Object.assign({}, d); });
}

function restoreDefaultDevices() {
  const existingIds = new Set(devices.map(function(d) { return d.id; }));
  const restored = cloneDefaultDevices().filter(function(d) { return !existingIds.has(d.id); });
  if (!restored.length) {
    setDeviceSettingsStatus('All default devices are already present.');
    return;
  }
  devices = devices.concat(restored);
  saveDevices();
  populateDeviceSelect(restored[0].id);
  hideDeviceForm();
  renderDeviceList(restored.map(function(d) { return d.id; }));
  setDeviceSettingsStatus('Restored ' + restored.length + ' default device(s).');
  renderScreen();
  if (currentContent) loadContent(currentContent);
}

function normalizeDeviceList(value) {
  const list = Array.isArray(value) ? value : (value && Array.isArray(value.devices) ? value.devices : []);
  return list.map(normalizeDevice).filter(Boolean);
}

function normalizeDevice(raw, index) {
  if (!raw || typeof raw !== 'object') return null;
  const name = String(raw.name || '').trim();
  const notch = ['none', 'notch', 'island', 'punch'].includes(raw.notch) ? raw.notch : 'none';
  const d = {
    id: String(raw.id || slugify(name) || ('device-' + Date.now() + '-' + index)).trim(),
    name: name || 'Custom Device',
    sw: intInRange(raw.sw, 1, 5000),
    sh: intInRange(raw.sh, 1, 5000),
    scr: intInRange(raw.scr, 0, 500),
    notch: notch,
    sat: intInRange(raw.sat, 0, 500),
    sab: intInRange(raw.sab, 0, 500)
  };
  if (!d.sw || !d.sh) return null;
  if (raw.nw !== undefined) d.nw = intInRange(raw.nw, 0, 1000);
  if (raw.nh !== undefined) d.nh = intInRange(raw.nh, 0, 1000);
  if (raw.nr !== undefined) d.nr = intInRange(raw.nr, 0, 500);
  if (raw.ps !== undefined) d.ps = intInRange(raw.ps, 0, 500);
  return d;
}

function intInRange(value, min, max) {
  const n = Math.round(Number(value));
  if (!Number.isFinite(n)) return min;
  return Math.max(min, Math.min(max, n));
}

function slugify(value) {
  return String(value || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
}

function addDevice() {
  showDeviceForm();
}

function removeCurrentDevice() {
  const selectedIds = getCheckedDeviceIds();
  if (!selectedIds.length) {
    setDeviceSettingsStatus('Select one or more devices to delete.');
    return;
  }
  if (devices.length - selectedIds.length < 1) {
    setDeviceSettingsStatus('At least one device is required.');
    return;
  }
  const selected = new Set(selectedIds);
  const oldDeviceId = device.id;
  const removedCount = selectedIds.length;
  devices = devices.filter(function(d) { return !selected.has(d.id); });
  saveDevices();
  const nextDevice = devices.find(function(d) { return d.id === oldDeviceId; }) || devices[0];
  populateDeviceSelect(nextDevice.id);
  renderDeviceList([]);
  setDeviceSettingsStatus('Deleted ' + removedCount + ' device(s).');
  renderScreen();
  if (currentContent) loadContent(currentContent);
}

function moveSelectedDevicesUp() {
  moveSelectedDevices(-1);
}

function moveSelectedDevicesDown() {
  moveSelectedDevices(1);
}

function moveSelectedDevices(direction) {
  const selectedIds = getCheckedDeviceIds();
  if (!selectedIds.length) {
    setDeviceSettingsStatus('Select one or more devices to move.');
    return;
  }
  const selected = new Set(selectedIds);
  if (direction < 0) {
    for (let i = 1; i < devices.length; i++) {
      if (selected.has(devices[i].id) && !selected.has(devices[i - 1].id)) {
        const tmp = devices[i - 1];
        devices[i - 1] = devices[i];
        devices[i] = tmp;
      }
    }
  } else {
    for (let i = devices.length - 2; i >= 0; i--) {
      if (selected.has(devices[i].id) && !selected.has(devices[i + 1].id)) {
        const tmp = devices[i + 1];
        devices[i + 1] = devices[i];
        devices[i] = tmp;
      }
    }
  }
  saveDevices();
  populateDeviceSelect(device.id);
  renderDeviceList(selectedIds);
  setDeviceSettingsStatus('Moved ' + selectedIds.length + ' device(s).');
}

function exportDevices() {
  const payload = JSON.stringify({ version: 1, devices: devices }, null, 2);
  vscode.postMessage({ type: 'exportDevices', content: payload });
}

function importDevices(event) {
  const file = event.target.files && event.target.files[0];
  event.target.value = '';
  if (!file) return;
  const reader = new FileReader();
  reader.onload = function() {
    try {
      const imported = normalizeDeviceList(JSON.parse(String(reader.result || '')));
      if (!imported.length) {
        setDeviceSettingsStatus('No valid devices found.');
        return;
      }
      devices = imported;
      saveDevices();
      populateDeviceSelect(devices[0].id);
      renderDeviceList([]);
      setDeviceSettingsStatus('Imported ' + imported.length + ' device(s).');
      renderScreen();
      if (currentContent) loadContent(currentContent);
    } catch (e) {
      setDeviceSettingsStatus('Could not import devices: ' + (e.message || e));
    }
  };
  reader.readAsText(file);
}

/* ── orientation ────────────────────────────────────────────────────── */
document.getElementById('orient-btn').addEventListener('click', function() {
  landscape = !landscape;
  renderOrientationButton();
  renderScreen();
  if (currentContent) loadContent(currentContent);
});

function renderOrientationButton() {
  const btn = document.getElementById('orient-btn');
  btn.classList.toggle('landscape', landscape);
  btn.title = landscape ? 'Switch to Portrait' : 'Switch to Landscape';
  btn.setAttribute('aria-label', landscape ? 'Switch to Portrait' : 'Switch to Landscape');
}

function triggerPick(btn) {
  const status = document.getElementById('setup-status');
  if (status) {
    status.className = 'status-panel is-busy';
    status.textContent = 'Opening file picker...';
  }
  if (btn) { btn.disabled = true; btn.textContent = 'Selecting...'; }
  vscode.postMessage({ type: 'pickFile' });
  setTimeout(function() {
    if (btn) { btn.disabled = false; btn.textContent = 'Select File'; }
    if (status && status.textContent === 'Opening file picker...') {
      status.className = 'status-panel';
      status.textContent = '';
    }
  }, 3000);
}
document.getElementById('pick-btn').addEventListener('click', function() { triggerPick(this); });
document.getElementById('reload-btn').addEventListener('click', function() {
  vscode.postMessage({ type: 'reload' });
});
document.getElementById('mute-btn').addEventListener('click', function() {
  muted = !muted;
  renderMuteButton();
  applyMute();
});

/* ── helpers ─────────────────────────────────────────────────────────── */
function sw() { return landscape ? device.sh : device.sw; }
function sh() { return landscape ? device.sw : device.sh; }

/* ── cutout overlay HTML ─────────────────────────────────────────────── */
function buildCutout() {
  const d = device;
  if (d.notch === 'notch') {
    const r = Math.round((d.nh || 0) * 0.5);
    if (!landscape) {
      return '<div class="cutout" style="top:0;left:50%;transform:translateX(-50%);width:' + d.nw + 'px;height:' + d.nh + 'px;border-radius:0 0 ' + r + 'px ' + r + 'px;"></div>';
    }
    return '<div class="cutout" style="left:0;top:50%;transform:translateY(-50%);width:' + d.nh + 'px;height:' + d.nw + 'px;border-radius:0 ' + r + 'px ' + r + 'px 0;"></div>';
  }
  if (d.notch === 'island') {
    if (!landscape) {
      return '<div class="cutout" style="top:12px;left:50%;transform:translateX(-50%);width:' + d.nw + 'px;height:' + d.nh + 'px;border-radius:' + d.nr + 'px;"></div>';
    }
    return '<div class="cutout" style="left:12px;top:50%;transform:translateY(-50%);width:' + d.nh + 'px;height:' + d.nw + 'px;border-radius:' + d.nr + 'px;"></div>';
  }
  if (d.notch === 'punch') {
    const ps = d.ps || 12;
    if (!landscape) {
      return '<div class="cutout" style="top:10px;left:50%;transform:translateX(-50%);width:' + ps + 'px;height:' + ps + 'px;border-radius:50%;"></div>';
    }
    return '<div class="cutout" style="left:10px;top:50%;transform:translateY(-50%);width:' + ps + 'px;height:' + ps + 'px;border-radius:50%;"></div>';
  }
  return '';
}

function buildHomeBar() {
  if (!device.sab) return '';
  const base = 'position:absolute;background:rgba(255,255,255,0.3);border-radius:3px;pointer-events:none;z-index:10;';
  if (!landscape) {
    return '<div style="' + base + 'bottom:8px;left:50%;transform:translateX(-50%);width:130px;height:5px;"></div>';
  }
  return '<div style="' + base + 'right:8px;top:50%;transform:translateY(-50%);width:5px;height:100px;"></div>';
}

/* ── render ──────────────────────────────────────────────────────────── */
function renderScreen() {
  const W = sw(), H = sh();
  const scaler = document.getElementById('screen-scaler');
  scaler.innerHTML =
    '<div id="device-screen"' +
    ' style="width:' + W + 'px;height:' + H + 'px;border-radius:' + device.scr + 'px;">' +
    buildCutout() +
    '<iframe id="preview-frame" width="' + W + '" height="' + H +
    '" scrolling="no" frameborder="0" allow="autoplay;pointer-lock"></iframe>' +
    buildHomeBar() +
    '</div>';
  document.getElementById('dim-label').textContent = W + ' \xd7 ' + H;
  document.getElementById('device-screen').style.setProperty('--cutout-bg', cutoutColor);
  document.getElementById('preview-frame').addEventListener('load', applyMute);
  updateScale();
}

function loadContent(html) {
  const frame = document.getElementById('preview-frame');
  if (!frame) return;

  if (currentBlobUrl) {
    URL.revokeObjectURL(currentBlobUrl);
    currentBlobUrl = null;
  }

  if (currentSourceUrl) {
    frame.src = withPreviewParams(currentSourceUrl);
    return;
  }

  // Revoke previous blob URL to free memory
  // Blob URL iframe: the blob document has its own security context — VS Code
  // does not inject its nonce-based CSP into it, so inline scripts run freely.
  const blob = new Blob([injectMuteBridge(html)], { type: 'text/html; charset=utf-8' });
  currentBlobUrl = URL.createObjectURL(blob);
  frame.src = currentBlobUrl;
}

function withPreviewParams(url) {
  const separator = url.indexOf('?') >= 0 ? '&' : '?';
  loadVersion += 1;
  return url + separator + 'lang=' + encodeURIComponent(language) + '&v=' + loadVersion;
}

function injectMuteBridge(html) {
  const languageBridge =
    '<scr' + 'ipt>' +
    '(function(){try{' +
    'var url=new URL(window.location.href);' +
    'url.searchParams.set("lang","' + language + '");' +
    'history.replaceState(null,"",url.href);' +
    '}catch(e){}})();' +
    '</scr' + 'ipt>';
  const bridge = languageBridge +
    '<scr' + 'ipt>' +
    '(function(){' +
    'if(window.__hplMuteBridgeInstalled)return;window.__hplMuteBridgeInstalled=true;' +
    'var muted=false,media=[],contexts=[],gains=[],destinations=[];' +
    'function rememberMedia(el){if(!el||media.indexOf(el)>=0)return;media.push(el);applyMedia(el);}' +
    'function applyMedia(el){try{el.muted=muted;if(muted){if(el.__hplVolume===undefined)el.__hplVolume=el.volume;el.volume=0;}else{if(el.__hplVolume!==undefined)el.volume=el.__hplVolume;}}catch(e){}}' +
    'function apply(){for(var i=0;i<media.length;i++)applyMedia(media[i]);for(var j=0;j<gains.length;j++){try{gains[j].gain.value=muted?0:1;}catch(e){}}}' +
    'window.__hplSetMuted=function(v){muted=!!v;window.__hplMuted=muted;apply();};' +
    'window.addEventListener("message",function(e){if(e.data&&e.data.type==="hplDeviceSimulatorMute")window.__hplSetMuted(e.data.muted);});' +
    'function patchAudioContext(name){var Orig=window[name];if(!Orig||Orig.__hplPatched)return;function Wrapped(){var ctx=arguments.length?new Orig(arguments[0]):new Orig();try{var gain=ctx.createGain();gain.gain.value=muted?0:1;gain.connect(ctx.destination);contexts.push(ctx);gains.push(gain);destinations.push(ctx.destination);}catch(e){}return ctx;}Wrapped.prototype=Orig.prototype;try{Object.setPrototypeOf(Wrapped,Orig);}catch(e){}Wrapped.__hplPatched=true;window[name]=Wrapped;}' +
    'try{var origConnect=window.AudioNode&&window.AudioNode.prototype&&window.AudioNode.prototype.connect;if(origConnect&&!origConnect.__hplPatched){var patched=function(target){var args=Array.prototype.slice.call(arguments);var idx=destinations.indexOf(args[0]);if(idx>=0&&gains[idx])args[0]=gains[idx];return origConnect.apply(this,args);};patched.__hplPatched=true;window.AudioNode.prototype.connect=patched;}}catch(e){}' +
    'try{patchAudioContext("AudioContext");patchAudioContext("webkitAudioContext");}catch(e){}' +
    'try{var play=window.HTMLMediaElement&&window.HTMLMediaElement.prototype&&window.HTMLMediaElement.prototype.play;if(play&&!play.__hplPatched){var p=function(){rememberMedia(this);return play.apply(this,arguments);};p.__hplPatched=true;window.HTMLMediaElement.prototype.play=p;}}catch(e){}' +
    'function scan(root){try{(root||document).querySelectorAll("audio,video").forEach(rememberMedia);}catch(e){}}' +
    'if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",function(){scan(document);});else scan(document);' +
    'try{new MutationObserver(function(ms){ms.forEach(function(m){Array.prototype.forEach.call(m.addedNodes,function(n){if(n.nodeType!==1)return;if(n.matches&&n.matches("audio,video"))rememberMedia(n);scan(n);});});}).observe(document.documentElement,{childList:true,subtree:true});}catch(e){}' +
    '})();' +
    '</scr' + 'ipt>';
  if (/<head\b[^>]*>/i.test(html)) {
    return html.replace(/<head\b[^>]*>/i, function(match) { return match + bridge; });
  }
  return bridge + html;
}

function renderMuteButton() {
  const btn = document.getElementById('mute-btn');
  btn.innerHTML = muted ? '&#128264;' : '&#128263;';
  btn.title = muted ? 'Unmute' : 'Mute';
  btn.setAttribute('aria-label', muted ? 'Unmute' : 'Mute');
  btn.setAttribute('aria-pressed', muted ? 'true' : 'false');
}

function applyMute() {
  const frame = document.getElementById('preview-frame');
  if (!frame || !frame.contentWindow) return;
  frame.contentWindow.postMessage({ type: 'hplDeviceSimulatorMute', muted: muted }, '*');
  try {
    frame.contentWindow.__hplMuted = muted;
    if (typeof frame.contentWindow.__hplSetMuted === 'function') frame.contentWindow.__hplSetMuted(muted);
    const doc = frame.contentWindow.document;
    doc.querySelectorAll('audio,video').forEach(syncMediaMute);
    if (muteDocument !== doc) {
      if (muteObserver) muteObserver.disconnect();
      muteDocument = doc;
      muteObserver = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          mutation.addedNodes.forEach(function(node) {
            if (node.nodeType !== 1) return;
            if (node.matches && node.matches('audio,video')) syncMediaMute(node);
            if (node.querySelectorAll) node.querySelectorAll('audio,video').forEach(syncMediaMute);
          });
        });
      });
      muteObserver.observe(doc.documentElement, { childList: true, subtree: true });
    }
  } catch {}
}

function syncMediaMute(media) {
  if (muted) {
    if (!mediaVolumes.has(media)) mediaVolumes.set(media, media.volume);
    media.muted = true;
    media.volume = 0;
    return;
  }
  media.muted = false;
  if (mediaVolumes.has(media)) media.volume = mediaVolumes.get(media);
}

function updateScale() {
  const area = document.getElementById('preview-area');
  const screen = document.getElementById('device-screen');
  const scaler = document.getElementById('screen-scaler');
  if (!screen || !area || !scaler) return;
  scaler.style.transform = 'none';
  const nw = screen.offsetWidth, nh = screen.offsetHeight;
  const aw = area.clientWidth - 40, ah = area.clientHeight - 40;
  const scale = Math.min(aw / nw, ah / nh, 1);
  scaler.style.transform = 'scale(' + scale + ')';
  scaler.style.marginBottom = Math.round(nh * (scale - 1)) + 'px';
}

/* ── messages ────────────────────────────────────────────────────────── */
window.addEventListener('message', function(event) {
  const msg = event.data;
  if (!msg || !msg.type) return;
  if (msg.type === 'fileLoaded') {
    currentContent = msg.content;
    currentSourceUrl = msg.sourceUrl || '';
    if (msg.resetMute) {
      muted = false;
      renderMuteButton();
    }
    document.getElementById('file-label').textContent = msg.name;
    document.getElementById('setup-file-name').textContent = msg.name;
    var setupStatus = document.getElementById('setup-status');
    setupStatus.className = 'status-panel';
    setupStatus.textContent = '';
    var pb = document.getElementById('pick-btn');
    pb.disabled = false; pb.textContent = 'Select File';
    var first = !document.getElementById('sim-view').classList.contains('active');
    document.getElementById('sim-view').classList.add('active');
    if (first) renderScreen();
    loadContent(currentContent);
  }
});

window.addEventListener('resize', updateScale);
new ResizeObserver(updateScale).observe(document.getElementById('preview-area'));
</script>
</body>
</html>`;
}