<script lang="ts">
// ae_idaa_comp__jitsi_url_builder.svelte
// Builds and previews Jitsi iframe URLs for testing and Novi page configuration.
// Only shown to trusted_access users — not for general IDAA members.

// --- Environment presets ---
const BASE_URL_OPTIONS = [
    {
        label: 'Production',
        value: 'https://sk-idaa.oneskyit.com/idaa/video_conferences'
    },
    {
        label: 'Dev / Staging',
        value: 'https://dev-idaa.oneskyit.com/idaa/video_conferences'
    },
    {
        label: 'Local',
        value: 'http://idaa.localhost:5173/idaa/video_conferences'
    },
    { label: 'Custom…', value: 'custom' }
];

// --- State ---
let base_url_preset = $state(BASE_URL_OPTIONS[1].value); // dev by default
let base_url_custom = $state('');
let room_name = $state('IDAA-Test-Meeting');
let site_key = $state('restricted-access');
let uuid = $state('');
let is_moderator = $state(false);
let domain = $state('jitsi.dgrzone.com');
let start_muted = $state(true);
let start_hidden = $state(false);
let disable_incoming_msg = $state(true);
let disable_participant_joined = $state(false);
let disable_participant_left = $state(false);
let disable_reaction = $state(true);
let disable_raise_hand = $state(true);

// show_menu=true overrides the default iframe hide — for admins testing the embed
let show_ae_menu = $state(false);

let show_advanced = $state(false);
let show_sound = $state(false);
let output_mode = $state<'url' | 'iframe'>('url');
let copied = $state(false);

// --- Derived URL ---
let effective_base = $derived(
    base_url_preset === 'custom' ? base_url_custom.trim() : base_url_preset
);

let built_url = $derived.by(() => {
    if (!effective_base || !room_name.trim()) return '';
    const p = new URLSearchParams();
    if (uuid.trim()) p.set('uuid', uuid.trim());
    p.set('iframe', 'true');
    p.set('key', site_key.trim() || 'restricted-access');
    p.set('room', room_name.trim());
    if (is_moderator) p.set('moderator', 'true');
    if (domain.trim() && domain.trim() !== 'jitsi.dgrzone.com')
        p.set('domain', domain.trim());
    if (start_muted) p.set('start_muted', 'true');
    if (start_hidden) p.set('start_hidden', 'true');
    if (disable_incoming_msg) p.set('incoming_msg_sound', 'true');
    if (disable_participant_joined) p.set('participant_joined_sound', 'true');
    if (disable_participant_left) p.set('participant_left_sound', 'true');
    if (disable_reaction) p.set('reaction_sound', 'true');
    if (disable_raise_hand) p.set('raise_hand_sound', 'true');
    // AE embed: iframe=true hides the menu by default; show_menu=true lets admins override
    if (show_ae_menu) p.set('show_menu', 'true');
    return `${effective_base}?${p.toString()}`;
});

let iframe_snippet = $derived(`<p>
  <iframe
    width="100%"
    height="950"
    id="ae_idaa_jitsi_meeting_iframe"
    src="${built_url}"
    style="min-height: 750px; height: min-content; max-height: 2048px"
    class="ae_idaa_iframe"
    allow="camera; microphone; fullscreen; display-capture; autoplay; clipboard-write"
    allowfullscreen
  ></iframe>
</p>`);

let output = $derived(output_mode === 'iframe' ? iframe_snippet : built_url);

function copy_output() {
    if (!output) return;
    navigator.clipboard.writeText(output).then(() => {
        copied = true;
        setTimeout(() => (copied = false), 2000);
    });
}
</script>

<div class="space-y-3 text-sm">
    <!-- Environment + Room (always visible) -->
    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
        <div>
            <label
                for="jub_base_url"
                class="mb-1 block text-xs tracking-wide uppercase opacity-40">
                Environment
            </label>
            <select
                id="jub_base_url"
                bind:value={base_url_preset}
                class="border-surface-200-800 bg-surface-50-950 w-full rounded border px-2 py-1 text-sm">
                {#each BASE_URL_OPTIONS as opt}
                    <option value={opt.value}>{opt.label}</option>
                {/each}
            </select>
            {#if base_url_preset === 'custom'}
                <input
                    type="url"
                    bind:value={base_url_custom}
                    placeholder="https://…/idaa/video_conferences"
                    class="border-surface-200-800 bg-surface-50-950 mt-1 w-full rounded border px-2 py-1 font-mono text-sm" />
            {/if}
        </div>
        <div>
            <label
                for="jub_room"
                class="mb-1 block text-xs tracking-wide uppercase opacity-40">
                Room Name <span class="text-error-500">*</span>
            </label>
            <input
                type="text"
                id="jub_room"
                bind:value={room_name}
                placeholder="IDAA-Meeting-Room"
                class="border-surface-200-800 bg-surface-50-950 w-full rounded border px-2 py-1 font-mono text-sm" />
        </div>
    </div>

    <!-- UUID + Key -->
    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
        <div>
            <label
                for="jub_uuid"
                class="mb-1 block text-xs tracking-wide uppercase opacity-40">
                Novi UUID <span class="opacity-60">(blank = guest)</span>
            </label>
            <input
                type="text"
                id="jub_uuid"
                bind:value={uuid}
                placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                class="border-surface-200-800 bg-surface-50-950 w-full rounded border px-2 py-1 font-mono text-sm" />
        </div>
        <div>
            <label
                for="jub_key"
                class="mb-1 block text-xs tracking-wide uppercase opacity-40">
                Site Key
            </label>
            <input
                type="text"
                id="jub_key"
                bind:value={site_key}
                class="border-surface-200-800 bg-surface-50-950 w-full rounded border px-2 py-1 font-mono text-sm" />
        </div>
    </div>

    <!-- Moderator toggle -->
    <label class="flex w-fit cursor-pointer items-center gap-2">
        <input
            type="checkbox"
            bind:checked={is_moderator}
            class="checkbox checkbox-sm" />
        <span class="text-sm">Moderator</span>
        <span class="text-xs opacity-40"
            >(requests JWT, enables lobby + activity logging)</span>
    </label>

    <!-- Advanced toggle -->
    <button
        type="button"
        onclick={() => (show_advanced = !show_advanced)}
        class="flex items-center gap-1 text-xs opacity-60 transition-opacity hover:opacity-100">
        <span
            class="fas {show_advanced ? 'fa-chevron-up' : 'fa-chevron-down'}"
            aria-hidden="true"></span>
        {show_advanced ? 'Hide' : 'Show'} advanced options
    </button>

    {#if show_advanced}
        <div
            class="border-surface-200-800 bg-surface-100-900 space-y-3 rounded-xl border p-3">
            <!-- Domain -->
            <div>
                <label
                    for="jub_domain"
                    class="mb-1 block text-xs tracking-wide uppercase opacity-40">
                    Jitsi Domain
                </label>
                <input
                    type="text"
                    id="jub_domain"
                    bind:value={domain}
                    class="border-surface-200-800 bg-surface-50-950 w-full rounded border px-2 py-1 font-mono text-sm" />
            </div>

            <!-- AE menu — hides the AE nav chrome; useful when embedding in Novi or pages with their own navigation -->
            <label class="flex w-fit cursor-pointer items-center gap-2">
                <input
                    type="checkbox"
                    bind:checked={show_ae_menu}
                    class="checkbox checkbox-sm" />
                <span class="text-xs"
                    >Show AE system menu <span class="opacity-40"
                        >(show_menu=true)</span
                    ></span>
            </label>

            <!-- Start options -->
            <div class="flex flex-wrap gap-4">
                <label class="flex cursor-pointer items-center gap-2">
                    <input
                        type="checkbox"
                        bind:checked={start_muted}
                        class="checkbox checkbox-sm" />
                    <span class="text-xs">Start muted</span>
                </label>
                <label class="flex cursor-pointer items-center gap-2">
                    <input
                        type="checkbox"
                        bind:checked={start_hidden}
                        class="checkbox checkbox-sm" />
                    <span class="text-xs">Start hidden (video off)</span>
                </label>
            </div>

            <!-- Sound settings -->
            <div>
                <button
                    type="button"
                    onclick={() => (show_sound = !show_sound)}
                    class="flex items-center gap-1 text-xs opacity-60 transition-opacity hover:opacity-100">
                    <span
                        class="fas {show_sound
                            ? 'fa-chevron-up'
                            : 'fa-chevron-down'}"
                        aria-hidden="true"></span>
                    {show_sound ? 'Hide' : 'Show'} sound settings
                </button>
                {#if show_sound}
                    <div class="mt-2 flex flex-wrap gap-4">
                        <label class="flex cursor-pointer items-center gap-2">
                            <input
                                type="checkbox"
                                bind:checked={disable_incoming_msg}
                                class="checkbox checkbox-sm" />
                            <span class="text-xs"
                                >Disable incoming msg sound</span>
                        </label>
                        <label class="flex cursor-pointer items-center gap-2">
                            <input
                                type="checkbox"
                                bind:checked={disable_participant_joined}
                                class="checkbox checkbox-sm" />
                            <span class="text-xs"
                                >Disable participant joined sound</span>
                        </label>
                        <label class="flex cursor-pointer items-center gap-2">
                            <input
                                type="checkbox"
                                bind:checked={disable_participant_left}
                                class="checkbox checkbox-sm" />
                            <span class="text-xs"
                                >Disable participant left sound</span>
                        </label>
                        <label class="flex cursor-pointer items-center gap-2">
                            <input
                                type="checkbox"
                                bind:checked={disable_reaction}
                                class="checkbox checkbox-sm" />
                            <span class="text-xs">Disable reaction sound</span>
                        </label>
                        <label class="flex cursor-pointer items-center gap-2">
                            <input
                                type="checkbox"
                                bind:checked={disable_raise_hand}
                                class="checkbox checkbox-sm" />
                            <span class="text-xs"
                                >Disable raise hand sound</span>
                        </label>
                    </div>
                {/if}
            </div>
        </div>
    {/if}

    <!-- Output -->
    <div class="border-surface-200-800 space-y-2 border-t pt-3">
        <!-- Mode toggle -->
        <div class="flex gap-2">
            <button
                type="button"
                onclick={() => (output_mode = 'url')}
                class="btn btn-sm {output_mode === 'url'
                    ? 'preset-tonal-primary'
                    : 'preset-tonal-surface border-surface-200-800 border'}">
                <span class="fas fa-link mr-1" aria-hidden="true"></span>
                URL
            </button>
            <button
                type="button"
                onclick={() => (output_mode = 'iframe')}
                class="btn btn-sm {output_mode === 'iframe'
                    ? 'preset-tonal-primary'
                    : 'preset-tonal-surface border-surface-200-800 border'}">
                <span class="fas fa-code mr-1" aria-hidden="true"></span>
                iframe HTML
            </button>
        </div>

        {#if built_url}
            <div class="flex items-stretch gap-1">
                <textarea
                    readonly
                    rows={output_mode === 'iframe' ? 8 : 2}
                    value={output}
                    class="border-surface-200-800 bg-surface-50-950 w-full cursor-text resize-none rounded border px-2 py-1.5 font-mono text-xs"
                    onclick={(e) => (e.target as HTMLTextAreaElement).select()}
                    title="Click to select all"></textarea>
                <button
                    type="button"
                    onclick={copy_output}
                    title="Copy to clipboard"
                    class="btn btn-sm shrink-0 self-start {copied
                        ? 'preset-tonal-success'
                        : 'preset-tonal-primary'} transition-colors">
                    <span
                        class="fas {copied ? 'fa-check' : 'fa-copy'}"
                        aria-hidden="true"></span>
                </button>
            </div>
            {#if output_mode === 'url'}
                <a
                    href={built_url}
                    target="_blank"
                    rel="noopener noreferrer"
                    class="text-primary-600 dark:text-primary-400 inline-flex items-center gap-1 text-xs hover:underline">
                    <span class="fas fa-external-link-alt" aria-hidden="true"
                    ></span>
                    Open in new tab
                </a>
            {/if}
        {:else}
            <p class="text-xs italic opacity-40">
                Fill in Room Name to generate a URL.
            </p>
        {/if}
    </div>
</div>
