var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
    var _, done = false;
    for (var i = decorators.length - 1; i >= 0; i--) {
        var context = {};
        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
        if (kind === "accessor") {
            if (result === void 0) continue;
            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
            if (_ = accept(result.get)) descriptor.get = _;
            if (_ = accept(result.set)) descriptor.set = _;
            if (_ = accept(result.init)) initializers.unshift(_);
        }
        else if (_ = accept(result)) {
            if (kind === "field") initializers.unshift(_);
            else descriptor[key] = _;
        }
    }
    if (target) Object.defineProperty(target, contextIn.name, descriptor);
    done = true;
};
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
    var useValue = arguments.length > 2;
    for (var i = 0; i < initializers.length; i++) {
        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
    }
    return useValue ? value : void 0;
};
import { DeesElement, customElement, html, css, property, state } from '@design.estate/dees-element';
import { RecorderService } from '../services/recorder.service.js';
let WccRecordingPanel = (() => {
    let _classDecorators = [customElement('wcc-recording-panel')];
    let _classDescriptor;
    let _classExtraInitializers = [];
    let _classThis;
    let _classSuper = DeesElement;
    let _dashboardRef_decorators;
    let _dashboardRef_initializers = [];
    let _dashboardRef_extraInitializers = [];
    let _panelState_decorators;
    let _panelState_initializers = [];
    let _panelState_extraInitializers = [];
    let _recordingMode_decorators;
    let _recordingMode_initializers = [];
    let _recordingMode_extraInitializers = [];
    let _audioEnabled_decorators;
    let _audioEnabled_initializers = [];
    let _audioEnabled_extraInitializers = [];
    let _selectedMicrophoneId_decorators;
    let _selectedMicrophoneId_initializers = [];
    let _selectedMicrophoneId_extraInitializers = [];
    let _availableMicrophones_decorators;
    let _availableMicrophones_initializers = [];
    let _availableMicrophones_extraInitializers = [];
    let _audioLevel_decorators;
    let _audioLevel_initializers = [];
    let _audioLevel_extraInitializers = [];
    let _recordingDuration_decorators;
    let _recordingDuration_initializers = [];
    let _recordingDuration_extraInitializers = [];
    let _previewVideoUrl_decorators;
    let _previewVideoUrl_initializers = [];
    let _previewVideoUrl_extraInitializers = [];
    let _trimStart_decorators;
    let _trimStart_initializers = [];
    let _trimStart_extraInitializers = [];
    let _trimEnd_decorators;
    let _trimEnd_initializers = [];
    let _trimEnd_extraInitializers = [];
    let _videoDuration_decorators;
    let _videoDuration_initializers = [];
    let _videoDuration_extraInitializers = [];
    let _isDraggingTrim_decorators;
    let _isDraggingTrim_initializers = [];
    let _isDraggingTrim_extraInitializers = [];
    let _isExporting_decorators;
    let _isExporting_initializers = [];
    let _isExporting_extraInitializers = [];
    var WccRecordingPanel = class extends _classSuper {
        static { _classThis = this; }
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _dashboardRef_decorators = [property({ attribute: false })];
            _panelState_decorators = [state()];
            _recordingMode_decorators = [state()];
            _audioEnabled_decorators = [state()];
            _selectedMicrophoneId_decorators = [state()];
            _availableMicrophones_decorators = [state()];
            _audioLevel_decorators = [state()];
            _recordingDuration_decorators = [state()];
            _previewVideoUrl_decorators = [state()];
            _trimStart_decorators = [state()];
            _trimEnd_decorators = [state()];
            _videoDuration_decorators = [state()];
            _isDraggingTrim_decorators = [state()];
            _isExporting_decorators = [state()];
            __esDecorate(this, null, _dashboardRef_decorators, { kind: "accessor", name: "dashboardRef", static: false, private: false, access: { has: obj => "dashboardRef" in obj, get: obj => obj.dashboardRef, set: (obj, value) => { obj.dashboardRef = value; } }, metadata: _metadata }, _dashboardRef_initializers, _dashboardRef_extraInitializers);
            __esDecorate(this, null, _panelState_decorators, { kind: "accessor", name: "panelState", static: false, private: false, access: { has: obj => "panelState" in obj, get: obj => obj.panelState, set: (obj, value) => { obj.panelState = value; } }, metadata: _metadata }, _panelState_initializers, _panelState_extraInitializers);
            __esDecorate(this, null, _recordingMode_decorators, { kind: "accessor", name: "recordingMode", static: false, private: false, access: { has: obj => "recordingMode" in obj, get: obj => obj.recordingMode, set: (obj, value) => { obj.recordingMode = value; } }, metadata: _metadata }, _recordingMode_initializers, _recordingMode_extraInitializers);
            __esDecorate(this, null, _audioEnabled_decorators, { kind: "accessor", name: "audioEnabled", static: false, private: false, access: { has: obj => "audioEnabled" in obj, get: obj => obj.audioEnabled, set: (obj, value) => { obj.audioEnabled = value; } }, metadata: _metadata }, _audioEnabled_initializers, _audioEnabled_extraInitializers);
            __esDecorate(this, null, _selectedMicrophoneId_decorators, { kind: "accessor", name: "selectedMicrophoneId", static: false, private: false, access: { has: obj => "selectedMicrophoneId" in obj, get: obj => obj.selectedMicrophoneId, set: (obj, value) => { obj.selectedMicrophoneId = value; } }, metadata: _metadata }, _selectedMicrophoneId_initializers, _selectedMicrophoneId_extraInitializers);
            __esDecorate(this, null, _availableMicrophones_decorators, { kind: "accessor", name: "availableMicrophones", static: false, private: false, access: { has: obj => "availableMicrophones" in obj, get: obj => obj.availableMicrophones, set: (obj, value) => { obj.availableMicrophones = value; } }, metadata: _metadata }, _availableMicrophones_initializers, _availableMicrophones_extraInitializers);
            __esDecorate(this, null, _audioLevel_decorators, { kind: "accessor", name: "audioLevel", static: false, private: false, access: { has: obj => "audioLevel" in obj, get: obj => obj.audioLevel, set: (obj, value) => { obj.audioLevel = value; } }, metadata: _metadata }, _audioLevel_initializers, _audioLevel_extraInitializers);
            __esDecorate(this, null, _recordingDuration_decorators, { kind: "accessor", name: "recordingDuration", static: false, private: false, access: { has: obj => "recordingDuration" in obj, get: obj => obj.recordingDuration, set: (obj, value) => { obj.recordingDuration = value; } }, metadata: _metadata }, _recordingDuration_initializers, _recordingDuration_extraInitializers);
            __esDecorate(this, null, _previewVideoUrl_decorators, { kind: "accessor", name: "previewVideoUrl", static: false, private: false, access: { has: obj => "previewVideoUrl" in obj, get: obj => obj.previewVideoUrl, set: (obj, value) => { obj.previewVideoUrl = value; } }, metadata: _metadata }, _previewVideoUrl_initializers, _previewVideoUrl_extraInitializers);
            __esDecorate(this, null, _trimStart_decorators, { kind: "accessor", name: "trimStart", static: false, private: false, access: { has: obj => "trimStart" in obj, get: obj => obj.trimStart, set: (obj, value) => { obj.trimStart = value; } }, metadata: _metadata }, _trimStart_initializers, _trimStart_extraInitializers);
            __esDecorate(this, null, _trimEnd_decorators, { kind: "accessor", name: "trimEnd", static: false, private: false, access: { has: obj => "trimEnd" in obj, get: obj => obj.trimEnd, set: (obj, value) => { obj.trimEnd = value; } }, metadata: _metadata }, _trimEnd_initializers, _trimEnd_extraInitializers);
            __esDecorate(this, null, _videoDuration_decorators, { kind: "accessor", name: "videoDuration", static: false, private: false, access: { has: obj => "videoDuration" in obj, get: obj => obj.videoDuration, set: (obj, value) => { obj.videoDuration = value; } }, metadata: _metadata }, _videoDuration_initializers, _videoDuration_extraInitializers);
            __esDecorate(this, null, _isDraggingTrim_decorators, { kind: "accessor", name: "isDraggingTrim", static: false, private: false, access: { has: obj => "isDraggingTrim" in obj, get: obj => obj.isDraggingTrim, set: (obj, value) => { obj.isDraggingTrim = value; } }, metadata: _metadata }, _isDraggingTrim_initializers, _isDraggingTrim_extraInitializers);
            __esDecorate(this, null, _isExporting_decorators, { kind: "accessor", name: "isExporting", static: false, private: false, access: { has: obj => "isExporting" in obj, get: obj => obj.isExporting, set: (obj, value) => { obj.isExporting = value; } }, metadata: _metadata }, _isExporting_initializers, _isExporting_extraInitializers);
            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
            WccRecordingPanel = _classThis = _classDescriptor.value;
            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #dashboardRef_accessor_storage = __runInitializers(this, _dashboardRef_initializers, void 0);
        // External configuration
        get dashboardRef() { return this.#dashboardRef_accessor_storage; }
        set dashboardRef(value) { this.#dashboardRef_accessor_storage = value; }
        #panelState_accessor_storage = (__runInitializers(this, _dashboardRef_extraInitializers), __runInitializers(this, _panelState_initializers, 'options'));
        // Panel state
        get panelState() { return this.#panelState_accessor_storage; }
        set panelState(value) { this.#panelState_accessor_storage = value; }
        #recordingMode_accessor_storage = (__runInitializers(this, _panelState_extraInitializers), __runInitializers(this, _recordingMode_initializers, 'viewport'));
        // Recording options
        get recordingMode() { return this.#recordingMode_accessor_storage; }
        set recordingMode(value) { this.#recordingMode_accessor_storage = value; }
        #audioEnabled_accessor_storage = (__runInitializers(this, _recordingMode_extraInitializers), __runInitializers(this, _audioEnabled_initializers, false));
        get audioEnabled() { return this.#audioEnabled_accessor_storage; }
        set audioEnabled(value) { this.#audioEnabled_accessor_storage = value; }
        #selectedMicrophoneId_accessor_storage = (__runInitializers(this, _audioEnabled_extraInitializers), __runInitializers(this, _selectedMicrophoneId_initializers, ''));
        get selectedMicrophoneId() { return this.#selectedMicrophoneId_accessor_storage; }
        set selectedMicrophoneId(value) { this.#selectedMicrophoneId_accessor_storage = value; }
        #availableMicrophones_accessor_storage = (__runInitializers(this, _selectedMicrophoneId_extraInitializers), __runInitializers(this, _availableMicrophones_initializers, []));
        get availableMicrophones() { return this.#availableMicrophones_accessor_storage; }
        set availableMicrophones(value) { this.#availableMicrophones_accessor_storage = value; }
        #audioLevel_accessor_storage = (__runInitializers(this, _availableMicrophones_extraInitializers), __runInitializers(this, _audioLevel_initializers, 0));
        get audioLevel() { return this.#audioLevel_accessor_storage; }
        set audioLevel(value) { this.#audioLevel_accessor_storage = value; }
        #recordingDuration_accessor_storage = (__runInitializers(this, _audioLevel_extraInitializers), __runInitializers(this, _recordingDuration_initializers, 0));
        // Recording state
        get recordingDuration() { return this.#recordingDuration_accessor_storage; }
        set recordingDuration(value) { this.#recordingDuration_accessor_storage = value; }
        #previewVideoUrl_accessor_storage = (__runInitializers(this, _recordingDuration_extraInitializers), __runInitializers(this, _previewVideoUrl_initializers, ''));
        // Preview/trim state
        get previewVideoUrl() { return this.#previewVideoUrl_accessor_storage; }
        set previewVideoUrl(value) { this.#previewVideoUrl_accessor_storage = value; }
        #trimStart_accessor_storage = (__runInitializers(this, _previewVideoUrl_extraInitializers), __runInitializers(this, _trimStart_initializers, 0));
        get trimStart() { return this.#trimStart_accessor_storage; }
        set trimStart(value) { this.#trimStart_accessor_storage = value; }
        #trimEnd_accessor_storage = (__runInitializers(this, _trimStart_extraInitializers), __runInitializers(this, _trimEnd_initializers, 0));
        get trimEnd() { return this.#trimEnd_accessor_storage; }
        set trimEnd(value) { this.#trimEnd_accessor_storage = value; }
        #videoDuration_accessor_storage = (__runInitializers(this, _trimEnd_extraInitializers), __runInitializers(this, _videoDuration_initializers, 0));
        get videoDuration() { return this.#videoDuration_accessor_storage; }
        set videoDuration(value) { this.#videoDuration_accessor_storage = value; }
        #isDraggingTrim_accessor_storage = (__runInitializers(this, _videoDuration_extraInitializers), __runInitializers(this, _isDraggingTrim_initializers, null));
        get isDraggingTrim() { return this.#isDraggingTrim_accessor_storage; }
        set isDraggingTrim(value) { this.#isDraggingTrim_accessor_storage = value; }
        #isExporting_accessor_storage = (__runInitializers(this, _isDraggingTrim_extraInitializers), __runInitializers(this, _isExporting_initializers, false));
        get isExporting() { return this.#isExporting_accessor_storage; }
        set isExporting(value) { this.#isExporting_accessor_storage = value; }
        // Service instance
        recorderService = __runInitializers(this, _isExporting_extraInitializers);
        constructor() {
            super();
            this.recorderService = new RecorderService({
                onDurationUpdate: (duration) => {
                    this.recordingDuration = duration;
                    this.dispatchEvent(new CustomEvent('duration-update', {
                        detail: { duration },
                        bubbles: true,
                        composed: true
                    }));
                },
                onRecordingComplete: (blob) => {
                    this.handleRecordingComplete(blob);
                },
                onAudioLevelUpdate: (level) => {
                    this.audioLevel = level;
                },
                onStreamEnded: () => {
                    this.stopRecording();
                }
            });
        }
        static styles = [
            css `
      :host {
        /* CSS Variables */
        --background: #0a0a0a;
        --foreground: #e5e5e5;
        --input: #141414;
        --primary: #3b82f6;
        --border: rgba(255, 255, 255, 0.06);
        --radius-sm: 2px;
        --radius-md: 4px;
        --radius-lg: 6px;
      }

      /* Recording Options Panel */
      .recording-options-panel {
        position: fixed;
        right: 16px;
        bottom: 116px;
        width: 360px;
        background: #0c0c0c;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-md);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        z-index: 1000;
        overflow: hidden;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
      }

      .recording-options-header {
        padding: 0.75rem 1rem;
        background: rgba(255, 255, 255, 0.02);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .recording-options-title {
        font-size: 0.8rem;
        font-weight: 500;
        color: #ccc;
      }

      .recording-options-close {
        width: 24px;
        height: 24px;
        background: transparent;
        border: none;
        color: #666;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        transition: all 0.15s ease;
      }

      .recording-options-close:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #999;
      }

      .recording-options-content {
        padding: 1rem;
      }

      .recording-option-group {
        margin-bottom: 1rem;
      }

      .recording-option-group:last-child {
        margin-bottom: 0;
      }

      .recording-option-label {
        font-size: 0.7rem;
        font-weight: 500;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
      }

      .recording-mode-buttons {
        display: flex;
        gap: 0.5rem;
      }

      .recording-mode-btn {
        flex: 1;
        padding: 0.6rem 0.75rem;
        background: var(--input);
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        color: #999;
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.15s ease;
        text-align: center;
      }

      .recording-mode-btn:hover {
        border-color: var(--primary);
        color: #ccc;
      }

      .recording-mode-btn.selected {
        background: rgba(59, 130, 246, 0.15);
        border-color: var(--primary);
        color: var(--primary);
      }

      .audio-toggle {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
      }

      .audio-toggle input[type="checkbox"] {
        width: 1rem;
        height: 1rem;
        accent-color: var(--primary);
      }

      .audio-toggle label {
        font-size: 0.75rem;
        color: #999;
        cursor: pointer;
      }

      .microphone-select {
        width: 100%;
        padding: 0.5rem 0.75rem;
        background: var(--input);
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        color: var(--foreground);
        font-size: 0.75rem;
        outline: none;
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .microphone-select:focus {
        border-color: var(--primary);
      }

      .microphone-select:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .audio-level-container {
        margin-top: 0.75rem;
        padding: 0.5rem;
        background: rgba(255, 255, 255, 0.02);
        border-radius: var(--radius-sm);
      }

      .audio-level-label {
        font-size: 0.65rem;
        color: #666;
        margin-bottom: 0.25rem;
      }

      .audio-level-bar {
        height: 8px;
        background: var(--input);
        border-radius: 4px;
        overflow: hidden;
      }

      .audio-level-fill {
        height: 100%;
        background: linear-gradient(90deg, #22c55e, #84cc16, #eab308);
        border-radius: 4px;
        transition: width 0.1s ease;
      }

      .start-recording-btn {
        width: 100%;
        padding: 0.75rem;
        background: #dc2626;
        border: none;
        border-radius: var(--radius-sm);
        color: white;
        font-size: 0.8rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease;
        margin-top: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
      }

      .start-recording-btn:hover {
        background: #b91c1c;
      }

      .start-recording-btn .rec-dot {
        width: 10px;
        height: 10px;
        background: white;
        border-radius: 50%;
      }

      /* Preview Modal */
      .preview-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        backdrop-filter: blur(4px);
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
      }

      .preview-modal {
        width: 90%;
        max-width: 800px;
        background: #0c0c0c;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
      }

      .preview-modal-header {
        padding: 1rem 1.25rem;
        background: rgba(255, 255, 255, 0.02);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .preview-modal-title {
        font-size: 0.9rem;
        font-weight: 500;
        color: #ccc;
      }

      .preview-modal-close {
        width: 28px;
        height: 28px;
        background: transparent;
        border: none;
        color: #666;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        font-size: 1.2rem;
        transition: all 0.15s ease;
      }

      .preview-modal-close:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #999;
      }

      .preview-modal-content {
        padding: 1.25rem;
      }

      .preview-video-container {
        background: #000;
        border-radius: var(--radius-sm);
        overflow: hidden;
        aspect-ratio: 16 / 9;
      }

      .preview-video {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .preview-modal-actions {
        padding: 1rem 1.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
      }

      .preview-btn {
        padding: 0.6rem 1.25rem;
        border-radius: var(--radius-sm);
        font-size: 0.8rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .preview-btn.secondary {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #999;
      }

      .preview-btn.secondary:hover {
        border-color: rgba(255, 255, 255, 0.2);
        color: #ccc;
      }

      .preview-btn.primary {
        background: var(--primary);
        border: none;
        color: white;
      }

      .preview-btn.primary:hover {
        background: #2563eb;
      }

      .preview-btn.primary:disabled {
        background: #1e3a5f;
        cursor: not-allowed;
        opacity: 0.7;
      }

      /* Trim Timeline Styles */
      .trim-section {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
      }

      .trim-section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
      }

      .trim-section-title {
        font-size: 0.75rem;
        font-weight: 500;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .trim-duration-info {
        font-size: 0.7rem;
        color: #666;
        font-family: 'Consolas', 'Monaco', monospace;
      }

      .trim-timeline {
        position: relative;
        height: 48px;
        background: var(--input);
        border-radius: var(--radius-sm);
        margin-bottom: 0.75rem;
        user-select: none;
      }

      .trim-track {
        position: absolute;
        top: 50%;
        left: 12px;
        right: 12px;
        height: 6px;
        background: #333;
        transform: translateY(-50%);
        border-radius: 3px;
      }

      .trim-selected {
        position: absolute;
        top: 50%;
        height: 6px;
        background: var(--primary);
        transform: translateY(-50%);
        border-radius: 3px;
        pointer-events: none;
      }

      .trim-handle {
        position: absolute;
        top: 50%;
        width: 16px;
        height: 36px;
        background: white;
        border: 2px solid var(--primary);
        border-radius: 4px;
        transform: translate(-50%, -50%);
        cursor: ew-resize;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s ease, transform 0.1s ease;
      }

      .trim-handle:hover {
        background: #e0e0e0;
      }

      .trim-handle:active {
        background: var(--primary);
        transform: translate(-50%, -50%) scale(1.05);
      }

      .trim-handle::before {
        content: '';
        width: 2px;
        height: 16px;
        background: #666;
        border-radius: 1px;
      }

      .trim-handle:active::before {
        background: white;
      }

      .trim-time-labels {
        display: flex;
        justify-content: space-between;
        font-size: 0.65rem;
        color: #666;
        font-family: 'Consolas', 'Monaco', monospace;
        padding: 0 12px;
      }

      .trim-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.75rem;
      }

      .trim-action-btn {
        flex: 1;
        padding: 0.5rem 0.75rem;
        background: var(--input);
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        color: #999;
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.15s ease;
        text-align: center;
      }

      .trim-action-btn:hover {
        border-color: var(--primary);
        color: #ccc;
      }

      .export-spinner {
        display: inline-block;
        width: 14px;
        height: 14px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: white;
        animation: spin 0.8s linear infinite;
        margin-right: 0.5rem;
      }

      @keyframes spin {
        to { transform: rotate(360deg); }
      }

    `
        ];
        render() {
            if (this.panelState === 'options') {
                return this.renderOptionsPanel();
            }
            else if (this.panelState === 'preview') {
                return this.renderPreviewModal();
            }
            return html ``;
        }
        renderOptionsPanel() {
            return html `
      <div class="recording-options-panel">
        <div class="recording-options-header">
          <span class="recording-options-title">Recording Settings</span>
          <button class="recording-options-close" @click=${() => this.close()}>✕</button>
        </div>
        <div class="recording-options-content">
          <div class="recording-option-group">
            <div class="recording-option-label">Record Area</div>
            <div class="recording-mode-buttons">
              <button
                class="recording-mode-btn ${this.recordingMode === 'viewport' ? 'selected' : ''}"
                @click=${() => this.recordingMode = 'viewport'}
              >
                Viewport Only
              </button>
              <button
                class="recording-mode-btn ${this.recordingMode === 'screen' ? 'selected' : ''}"
                @click=${() => this.recordingMode = 'screen'}
              >
                Entire Screen
              </button>
            </div>
          </div>

          <div class="recording-option-group">
            <div class="recording-option-label">Audio</div>
            <div class="audio-toggle">
              <input
                type="checkbox"
                id="audioToggle"
                ?checked=${this.audioEnabled}
                @change=${(e) => this.handleAudioToggle(e.target.checked)}
              />
              <label for="audioToggle">Enable Microphone</label>
            </div>

            ${this.audioEnabled ? html `
              <select
                class="microphone-select"
                .value=${this.selectedMicrophoneId}
                @change=${(e) => this.handleMicrophoneChange(e.target.value)}
              >
                <option value="">Select Microphone...</option>
                ${this.availableMicrophones.map(mic => html `
                  <option value=${mic.deviceId}>${mic.label || `Microphone ${mic.deviceId.slice(0, 8)}`}</option>
                `)}
              </select>

              ${this.selectedMicrophoneId ? html `
                <div class="audio-level-container">
                  <div class="audio-level-label">Input Level</div>
                  <div class="audio-level-bar">
                    <div class="audio-level-fill" style="width: ${this.audioLevel}%"></div>
                  </div>
                </div>
              ` : null}
            ` : null}
          </div>

          <button class="start-recording-btn" @click=${() => this.startRecording()}>
            <div class="rec-dot"></div>
            Start Recording
          </button>
        </div>
      </div>
    `;
        }
        renderPreviewModal() {
            return html `
      <div class="preview-modal-overlay" @click=${(e) => {
                if (e.target.classList.contains('preview-modal-overlay')) {
                    this.discardRecording();
                }
            }}>
        <div class="preview-modal">
          <div class="preview-modal-header">
            <span class="preview-modal-title">Recording Preview</span>
            <button class="preview-modal-close" @click=${() => this.discardRecording()}>✕</button>
          </div>
          <div class="preview-modal-content">
            <div class="preview-video-container">
              <video
                class="preview-video"
                src=${this.previewVideoUrl}
                controls
                @loadedmetadata=${(e) => this.handleVideoLoaded(e.target)}
              ></video>
            </div>

            <!-- Trim Section -->
            <div class="trim-section">
              <div class="trim-section-header">
                <span class="trim-section-title">Trim Video</span>
                <span class="trim-duration-info">
                  ${this.formatDuration(Math.floor(this.trimEnd - this.trimStart))}
                  ${this.trimStart > 0 || this.trimEnd < this.videoDuration
                ? `(trimmed from ${this.formatDuration(Math.floor(this.videoDuration))})`
                : ''}
                </span>
              </div>

              <div
                class="trim-timeline"
                @mousedown=${(e) => this.handleTimelineClick(e)}
                @mousemove=${(e) => this.handleTimelineDrag(e)}
                @mouseup=${() => this.handleTimelineDragEnd()}
                @mouseleave=${() => this.handleTimelineDragEnd()}
              >
                <div class="trim-track"></div>
                <div
                  class="trim-selected"
                  style="left: ${this.getHandlePositionStyle(this.trimStart)}; right: ${this.getHandlePositionFromEndStyle(this.trimEnd)};"
                ></div>
                <div
                  class="trim-handle start-handle"
                  style="left: ${this.getHandlePositionStyle(this.trimStart)};"
                  @mousedown=${(e) => { e.stopPropagation(); this.isDraggingTrim = 'start'; }}
                ></div>
                <div
                  class="trim-handle end-handle"
                  style="left: ${this.getHandlePositionStyle(this.trimEnd)};"
                  @mousedown=${(e) => { e.stopPropagation(); this.isDraggingTrim = 'end'; }}
                ></div>
              </div>

              <div class="trim-time-labels">
                <span>${this.formatDuration(Math.floor(this.trimStart))}</span>
                <span>${this.formatDuration(Math.floor(this.trimEnd))}</span>
              </div>

              <div class="trim-actions">
                <button class="trim-action-btn" @click=${() => this.resetTrim()}>
                  Reset Trim
                </button>
                <button class="trim-action-btn" @click=${() => this.previewTrimmedSection()}>
                  Preview Selection
                </button>
              </div>
            </div>

          </div>
          <div class="preview-modal-actions">
            <button class="preview-btn secondary" @click=${() => this.discardRecording()}>Discard</button>
            <button
              class="preview-btn primary"
              ?disabled=${this.isExporting}
              @click=${() => this.downloadRecording()}
            >
              ${this.isExporting ? html `<span class="export-spinner"></span>Exporting...` : 'Download WebM'}
            </button>
          </div>
        </div>
      </div>
    `;
        }
        // ==================== Audio Methods ====================
        async handleAudioToggle(enabled) {
            this.audioEnabled = enabled;
            if (enabled) {
                this.availableMicrophones = await this.recorderService.loadMicrophones(true);
                if (this.availableMicrophones.length > 0 && !this.selectedMicrophoneId) {
                    this.selectedMicrophoneId = this.availableMicrophones[0].deviceId;
                    await this.recorderService.startAudioMonitoring(this.selectedMicrophoneId);
                }
            }
            else {
                this.recorderService.stopAudioMonitoring();
                this.selectedMicrophoneId = '';
                this.audioLevel = 0;
            }
        }
        async handleMicrophoneChange(deviceId) {
            this.selectedMicrophoneId = deviceId;
            if (deviceId) {
                await this.recorderService.startAudioMonitoring(deviceId);
            }
            else {
                this.recorderService.stopAudioMonitoring();
                this.audioLevel = 0;
            }
        }
        // ==================== Recording Methods ====================
        async startRecording() {
            try {
                let viewportElement;
                if (this.recordingMode === 'viewport' && this.dashboardRef) {
                    const wccFrame = await this.dashboardRef.wccFrame;
                    viewportElement = await wccFrame.getViewportElement();
                }
                await this.recorderService.startRecording({
                    mode: this.recordingMode,
                    audioDeviceId: this.audioEnabled ? this.selectedMicrophoneId : undefined,
                    viewportElement
                });
                this.panelState = 'recording';
                this.dispatchEvent(new CustomEvent('recording-start', {
                    bubbles: true,
                    composed: true
                }));
            }
            catch (error) {
                console.error('Failed to start recording:', error);
                this.panelState = 'options';
            }
        }
        stopRecording() {
            this.recorderService.stopRecording();
        }
        handleRecordingComplete(blob) {
            if (this.previewVideoUrl) {
                URL.revokeObjectURL(this.previewVideoUrl);
            }
            this.previewVideoUrl = URL.createObjectURL(blob);
            this.panelState = 'preview';
            this.dispatchEvent(new CustomEvent('recording-stop', {
                bubbles: true,
                composed: true
            }));
        }
        discardRecording() {
            if (this.previewVideoUrl) {
                URL.revokeObjectURL(this.previewVideoUrl);
                this.previewVideoUrl = '';
            }
            this.recorderService.reset();
            this.trimStart = 0;
            this.trimEnd = 0;
            this.videoDuration = 0;
            this.isExporting = false;
            this.recordingDuration = 0;
            this.close();
        }
        async downloadRecording() {
            const recordedBlob = this.recorderService.recordedBlob;
            if (!recordedBlob)
                return;
            this.isExporting = true;
            try {
                let blobToDownload;
                // Handle trimming if needed
                const needsTrim = this.trimStart > 0.1 || this.trimEnd < this.videoDuration - 0.1;
                if (needsTrim) {
                    const video = this.shadowRoot?.querySelector('.preview-video');
                    if (video) {
                        blobToDownload = await this.recorderService.exportTrimmedVideo(video, this.trimStart, this.trimEnd);
                    }
                    else {
                        blobToDownload = recordedBlob;
                    }
                }
                else {
                    blobToDownload = recordedBlob;
                }
                // Trigger download
                const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
                const filename = `wcctools-recording-${timestamp}.webm`;
                const url = URL.createObjectURL(blobToDownload);
                const a = document.createElement('a');
                a.href = url;
                a.download = filename;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
                this.discardRecording();
            }
            catch (error) {
                console.error('Error exporting video:', error);
                this.isExporting = false;
            }
        }
        // ==================== Trim Methods ====================
        handleVideoLoaded(video) {
            // WebM files from MediaRecorder may have Infinity/NaN duration
            // Fall back to the tracked recording duration
            const duration = Number.isFinite(video.duration) ? video.duration : this.recordingDuration;
            this.videoDuration = duration;
            this.trimStart = 0;
            this.trimEnd = duration;
        }
        formatDuration(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = seconds % 60;
            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        }
        getHandlePositionStyle(time) {
            if (this.videoDuration === 0)
                return '12px';
            const percentage = time / this.videoDuration;
            // Formula: 12px padding + percentage of remaining width (total - 24px padding)
            // At 0%: 12px (left edge of track)
            // At 100%: calc(100% - 12px) (right edge of track)
            return `calc(12px + ${(percentage * 100).toFixed(2)}% - ${(percentage * 24).toFixed(2)}px)`;
        }
        getHandlePositionFromEndStyle(time) {
            if (this.videoDuration === 0)
                return '12px';
            const percentage = time / this.videoDuration;
            const remainingPercentage = 1 - percentage;
            // For CSS 'right' property: distance from right edge
            // At trimEnd = 100%: right = 12px (at right edge of track)
            // At trimEnd = 0%: right = calc(100% - 12px) (at left edge of track)
            return `calc(12px + ${(remainingPercentage * 100).toFixed(2)}% - ${(remainingPercentage * 24).toFixed(2)}px)`;
        }
        handleTimelineClick(e) {
            if (this.isDraggingTrim)
                return;
            const timeline = e.currentTarget;
            const rect = timeline.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const percentage = Math.max(0, Math.min(1, (x - 12) / (rect.width - 24)));
            const time = percentage * this.videoDuration;
            const video = this.shadowRoot?.querySelector('.preview-video');
            if (video) {
                video.currentTime = time;
            }
        }
        handleTimelineDrag(e) {
            if (!this.isDraggingTrim)
                return;
            const timeline = e.currentTarget;
            const rect = timeline.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const percentage = Math.max(0, Math.min(1, (x - 12) / (rect.width - 24)));
            const time = percentage * this.videoDuration;
            const minDuration = 1;
            if (this.isDraggingTrim === 'start') {
                this.trimStart = Math.min(time, this.trimEnd - minDuration);
                this.trimStart = Math.max(0, this.trimStart);
            }
            else if (this.isDraggingTrim === 'end') {
                this.trimEnd = Math.max(time, this.trimStart + minDuration);
                this.trimEnd = Math.min(this.videoDuration, this.trimEnd);
            }
            const video = this.shadowRoot?.querySelector('.preview-video');
            if (video) {
                video.currentTime = this.isDraggingTrim === 'start' ? this.trimStart : this.trimEnd;
            }
        }
        handleTimelineDragEnd() {
            this.isDraggingTrim = null;
        }
        resetTrim() {
            this.trimStart = 0;
            this.trimEnd = this.videoDuration;
            const video = this.shadowRoot?.querySelector('.preview-video');
            if (video) {
                video.currentTime = 0;
            }
        }
        previewTrimmedSection() {
            const video = this.shadowRoot?.querySelector('.preview-video');
            if (!video)
                return;
            video.currentTime = this.trimStart;
            video.play();
            const checkTime = () => {
                if (video.currentTime >= this.trimEnd) {
                    video.pause();
                    video.removeEventListener('timeupdate', checkTime);
                }
            };
            video.addEventListener('timeupdate', checkTime);
        }
        // ==================== Lifecycle ====================
        close() {
            this.recorderService.stopAudioMonitoring();
            this.dispatchEvent(new CustomEvent('close', {
                bubbles: true,
                composed: true
            }));
        }
        async disconnectedCallback() {
            await super.disconnectedCallback();
            this.recorderService.dispose();
            if (this.previewVideoUrl) {
                URL.revokeObjectURL(this.previewVideoUrl);
            }
        }
        static {
            __runInitializers(_classThis, _classExtraInitializers);
        }
    };
    return WccRecordingPanel = _classThis;
})();
export { WccRecordingPanel };
//# sourceMappingURL=data:application/json;base64, 